/* ToolVerse Phase 4 — Calculator UX
   Presentation-only enhancements for financial calculator pages.
   No calculation, analytics, storage, API, SEO, or navigation behavior is changed. */

:root {
  --tv-calc-ink: #172033;
  --tv-calc-muted: #5f6b7a;
  --tv-calc-line: #dfe4ea;
  --tv-calc-line-strong: #c9d1dc;
  --tv-calc-surface: #ffffff;
  --tv-calc-soft: #f7f8fa;
  --tv-calc-accent: #e5322d;
  --tv-calc-accent-dark: #b9201c;
  --tv-calc-danger: #b42318;
}

/* Input area: one clear task surface, with assumptions grouped inside it. */
body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) form,
body.tv-financial-shell main > form {
  margin-top: 1.5rem;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) fieldset {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--tv-calc-line);
  border-radius: 14px;
  background: var(--tv-calc-soft);
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) fieldset legend {
  max-width: 100%;
  padding: 0 .45rem;
  color: var(--tv-calc-ink);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .015em;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.tool-grid, .tv-fintech-grid, .insurance-form-grid) {
  gap: 1rem;
}

/* Labels, helper copy, and controls use a consistent readable rhythm. */
body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) label,
body.tv-financial-shell .tv-fintech-field label {
  color: var(--tv-calc-ink);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea),
body.tv-financial-shell .tv-fintech-field :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  margin-top: .45rem;
  padding: .72rem .8rem;
  border: 1px solid var(--tv-calc-line-strong);
  border-radius: 10px;
  background: var(--tv-calc-surface);
  color: var(--tv-calc-ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(input, select, textarea):hover {
  border-color: #aeb8c6;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(input, select, textarea):focus-visible {
  outline: 3px solid rgba(229, 50, 45, .18);
  outline-offset: 1px;
  border-color: var(--tv-calc-accent);
  box-shadow: 0 0 0 1px var(--tv-calc-accent);
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(small, .field-help, .helper-text),
body.tv-financial-shell .tv-fintech-field small {
  display: block;
  margin-top: .4rem;
  color: var(--tv-calc-muted);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Primary action is unmistakable without adding decorative effects. */
body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.button, .tv-fintech-button, button[type=submit]) {
  min-height: 48px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .005em;
}

body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.tool-actions, .form-actions) {
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tv-calc-line);
}

/* Validation and empty/error states remain in their existing DOM and behavior. */
body.tv-financial-shell :is(.form-error, .tv-fintech-error, [role=alert]):not(:empty) {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid #f0b4ae;
  border-left: 4px solid var(--tv-calc-danger);
  border-radius: 10px;
  background: #fff5f4;
  color: #8f1d16;
  font-weight: 650;
  line-height: 1.5;
}

/* Results are visually separate from assumptions and lead with the decision. */
body.tv-financial-shell :is(.tool-result, .tv-fintech-result, .result):not([hidden]) {
  margin-top: 1.5rem;
  padding: 1.35rem;
  border: 1px solid #f0c2bf;
  border-top: 4px solid var(--tv-calc-accent);
  border-radius: 14px;
  background: #fffafa;
  color: var(--tv-calc-ink);
  box-shadow: 0 8px 22px rgba(23, 32, 51, .07);
}

body.tv-financial-shell :is(.tool-result, .tv-fintech-result, .result):not([hidden]) :is(h2, h3, strong):first-child {
  color: var(--tv-calc-ink);
}

body.tv-financial-shell :is(.tool-result, .tv-fintech-result, .result):not([hidden]) :is(.result-value, .metric-value, output) {
  font-variant-numeric: tabular-nums;
}

/* Homepage calculator already has its Phase 3 structure; align its controls and result emphasis. */
body.tv-premium-home #calculator :is(input, select, button) {
  min-height: 48px;
}
body.tv-premium-home #calculator :is(input, select):focus-visible {
  outline: 3px solid rgba(229, 50, 45, .18);
  outline-offset: 2px;
}
body.tv-premium-home #calculator [aria-live=polite] {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) fieldset {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.tool-grid, .tv-fintech-grid, .insurance-form-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }
  body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.tool-actions, .form-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  body.tv-financial-shell :is(.calculator-card, .tv-fintech-card) :is(.tool-actions, .form-actions) > * {
    width: 100%;
  }
  body.tv-financial-shell :is(.tool-result, .tv-fintech-result, .result):not([hidden]) {
    padding: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tv-financial-shell :is(input, select, textarea, button) {
    transition: none !important;
  }
}