/* Shared public-site theme. Screen-only overrides preserve calculator printouts. */
@media screen {
  :root {
    color-scheme: dark;
    --ink: #eaf2ff;
    --muted: #a8b9d2;
    --panel: #121e31;
    --line: #ffffff18;
    --mint: #a6ebcf;
    --orange: #f3c49d;
    --text: var(--ink);
    --accent: var(--mint);
    --accent-2: var(--mint);
    --border: var(--line);
    --shadow: none;
    --layout-wide: 1240px;
    --layout-standard: 1240px;
    --space-page-x: 24px;
    --space-card: 24px;
    --space-card-lg: 24px;
    --space-section: 24px;
    --radius-card: 18px;
    --radius-card-lg: 18px;
    --radius-control: 9px;
    --color-bg-page: #0b1424;
    --color-bg-page-alt: #0b1424;
    --color-surface: var(--panel);
    --color-surface-2: #122538;
    --color-surface-3: #0c1828;
    --color-surface-4: #15263a;
    --color-surface-accent: #17332f;
    --color-surface-strong: #091422;
    --color-border: var(--line);
    --color-border-strong: #91abc033;
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-link: #abd4ff;
    --color-accent: var(--mint);
    --color-accent-soft: #c7f4e2;
    --color-accent-strong: var(--mint);
    --color-positive: var(--mint);
    --color-warning: var(--orange);
    --color-danger: #f4b7a5;
    --color-highlight: var(--ink);
    --shadow-card: none;
    --shadow-card-lg: none;
    --shadow-primary: none;
    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-family-fallback: var(--font-family-base);
    --font-size-h1: clamp(2rem, 4vw, 3.4rem);
    --font-size-h1-compact: var(--font-size-h1);
    --font-size-h2: 1.17rem;
  }

  body:is(.theme-calculator, .theme-content) {
    margin: 0;
    min-height: 100vh;
    background: #0b1424 !important;
    color: var(--ink);
    font-family: var(--font-family-base);
    line-height: 1.5;
  }

  body.theme-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .skip-link {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 99999;
    padding: 12px 16px;
    border-radius: 9px;
    background: var(--mint);
    color: #123229;
  }
  .skip-link:focus { top: 12px; }

  .page::before, .wrap::before, .page-theme-calculator::before,
  .page-intro::before, .guide-section::before {
    content: none !important;
    display: none !important;
  }

  .planner-shell, .wrap, .page-shell, .editorial-shell, .app.page-shell {
    width: 100%;
    max-width: 1240px;
    margin: 32px auto 64px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .page:has(> .layout) {
    max-width: 1240px;
    margin: 32px auto 64px;
    padding: 0 24px;
  }

  .page-intro, .content-hero, .hub-hero-copy {
    gap: 12px;
    margin: 0 0 24px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .editorial-intro { margin-bottom: 28px; }
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 0 36px; gap: 32px; }
  .home-hero .editorial-intro { margin: 0; }
  .editorial-shell .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-stat-list { position: static; width: 100%; max-width: 650px; }

  .page-intro h1, .content-hero h1, .editorial-shell h1,
  .home-hero h1, .app-head h1, .error-page h1 {
    max-width: none;
    margin: 6px 0 12px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.045em;
  }

  .page-subtitle, .page-intro > p, .lead, .subtitle {
    max-width: 650px;
    margin: 0;
    color: var(--muted) !important;
    font-size: 1rem;
    line-height: 1.65;
  }

  .eyebrow, .content-kicker, .section-kicker, .planner-kicker {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mint);
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  body.theme-calculator :is(.card, .surface-card, .content-surface,
  .surface-card-strong, .plan-panel, .essay, .quick-plan, .tool-card,
  .quickstart-card, .pillar-card, .trust-card-simple, .content-section-card,
  .source-note, .journey-card, .compare-card, .result-card) {
    min-width: 0;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: var(--panel) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.theme-calculator :is(.card, .content-surface, .essay, .quick-plan,
  .tool-card, .trust-card-simple, .content-section-card, .source-note,
  .panel-pad, .settings-card.sticky-card) { padding: 24px; }

  main :is(.card, .content-surface, .surface-card, .essay, .plan-panel) h2,
  .section-title, .section-heading h2 {
    color: var(--ink);
    font-size: 1.17rem;
    line-height: 1.35;
    letter-spacing: -.02em;
  }

  main :is(.card, .surface-card, .essay, .prose, .guide-section) :is(p, li),
  .related-link-copy, .tool-card p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.75;
  }

  main :is(.card, .essay, .prose, .guide-section) a:not([class]),
  .text-link, .source-note a { color: #abd4ff; text-underline-offset: 4px; }

  .grid, .calculator-layout, .goal-layout, .sim-layout, .page > .layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .grid > *, .calculator-layout > *, .goal-layout > *, .sim-layout > *,
  .layout > *, .split-grid > *, .detail-grid > *, .home-hero > * { min-width: 0; }
  .left-column, .calculator-sidebar, .salary-sidebar, aside.stack {
    height: auto;
    grid-template-rows: none;
    align-content: start;
    align-items: start;
  }
  .people-rail { display: none; }

  body.theme-calculator :is(.metrics, .metrics-grid, .results-metrics, .calculator-metrics) {
    grid-auto-rows: auto;
    align-items: stretch;
  }
  body.theme-calculator :is(.metric, .metric-card, .result-tile, .compare-metric) {
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px;
    border: 1px solid var(--line) !important;
    border-radius: 18px;
    background: #122538 !important;
    box-shadow: none !important;
  }
  body.theme-calculator :is(.metrics, .metrics-grid, .results-metrics, .calculator-metrics)
  > :is(.metric, .metric-card, .result-tile):first-child { background: #17332f !important; }
  .metric .label, .metric-label, .compare-label {
    height: auto;
    max-height: none;
    color: #bdd0dd;
    font-size: .79rem;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  body.theme-calculator :is(.metric .value, .metric-value, .compare-value) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    color: var(--ink) !important;
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.035em;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums;
  }
  body.theme-calculator :is(.metric .value.compact, .metric-value.compact) { font-size: 1.1rem; }
  body.theme-calculator :is(.metric:first-child .value, .metric-card:first-child .metric-value,
  .result-tile:first-child .metric-value, .value.positive) { color: var(--mint) !important; }
  body.theme-calculator :is(.compare-delta.lower, .status-warning, .value.negative) { color: var(--orange) !important; }

  body.theme-calculator main :is(.row, .form-row, .field, .plan-field, .quick-fields) label {
    color: #c4d1e4;
    font-size: .79rem;
    font-weight: 600;
    line-height: 1.45;
  }
  body.theme-calculator main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    padding: 12px 11px;
    border: 1px solid #627b9b66 !important;
    border-radius: 9px !important;
    background: #091422 !important;
    color: var(--ink);
    box-shadow: none !important;
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }
  body.theme-calculator main .percent-field input { padding-right: 40px; }
  body.theme-calculator main input[aria-invalid="true"] { border-color: #edb497 !important; }
  main input::placeholder, main textarea::placeholder { color: #9bafc9; opacity: 1; }
  input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--mint); }

  body.theme-calculator :is(button.primary, button.secondary, .button-primary,
  .button-secondary, .plan-button, .mini-btn, .period-btn) {
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid #91abc033;
    border-radius: 9px;
    background: #233b50 !important;
    color: var(--ink);
    box-shadow: none !important;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    transform: none !important;
    filter: none !important;
  }
  body.theme-calculator :is(button.primary, .button-primary, .plan-button.primary, .period-btn.active) {
    border-color: var(--mint);
    background: var(--mint) !important;
    color: #123229;
  }
  body.theme-calculator :is(.plan-button.small, .mini-btn, .period-btn) {
    min-height: 40px;
    padding: 8px 12px;
    font-size: .76rem;
  }
  body.theme-calculator :is(.plan-button.danger) { color: #f4b7a5; }
  body.theme-calculator :is(button.primary, .button-primary, .plan-button.primary):hover:not(:disabled) { background: #c7f4e2 !important; }
  body.theme-calculator :is(button.secondary, .button-secondary, .plan-button:not(.primary), .mini-btn):hover:not(:disabled) { background: #2b485e !important; }
  button:disabled, .button-secondary:disabled { opacity: .5; cursor: default; }
  .tool-card:hover, .related-link:hover, .quickstart-card:hover, .pillar-card:hover {
    border-color: #a6ebcf66 !important;
    transform: none;
    box-shadow: none !important;
  }
  body.theme-calculator :is(.surface-card-soft, .detail-grid .mini, .related-link, .compare-banner) {
    border-color: var(--line);
    background: #0c1828 !important;
    box-shadow: none !important;
  }
  #worldMap { background: #091422; border-color: var(--line); }
  .salary-live-card .money { color: var(--mint); text-shadow: none; }
  .salary-live-card .progress { background: var(--mint); box-shadow: none; }

  body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mint) !important;
    outline-offset: 3px;
    box-shadow: none !important;
  }
  body.theme-calculator main :is(input, select, textarea):focus { border-color: var(--mint) !important; }

  body.theme-calculator :is(.summary-banner, .summary-banner-card, .banner, .surface-banner, .home-method) {
    border: 1px solid #a6ebcf26;
    border-radius: 18px;
    background: #17312e !important;
    color: #cfebdf;
    box-shadow: none !important;
  }
  .formula, .essay .formula { background: #091422; color: var(--ink); text-shadow: none; }
  .status-pill { box-shadow: none; }

  .table-scroll, .scroll { border-color: var(--line); border-radius: 10px; background: transparent; }
  main :is(table, .data-table) { color: var(--ink); font-size: .78rem; font-variant-numeric: tabular-nums; }
  main :is(table, .data-table) th { background: #0c192b; color: #c7d6e9; font-weight: 600; }
  main :is(table, .data-table) :is(th, td) { padding: 12px 14px; border-bottom-color: #ffffff0a; }
  main :is(table, .data-table) tbody tr:hover { background: #ffffff04; }

  .site-topnav { background: #101b2c !important; border-color: var(--line) !important; box-shadow: none; }
  .site-topnav .topnav-panel, .site-topnav .nav-dropdown-menu { background: #101b2c !important; border-color: var(--line) !important; box-shadow: none !important; }
  .site-topnav .currency-picker select { background: #091422 !important; border-color: #627b9b66 !important; color: var(--ink); box-shadow: none !important; }
  .site-topnav :is(a, .menu-toggle, summary):focus-visible { border-color: var(--mint); }
  .site-footer { width: 100%; padding: 24px; border-top: 1px solid var(--line); background: #0b1424 !important; color: #99afc8; box-shadow: none; font-size: .78rem; line-height: 1.7; }
  .site-footer a { color: #abd4ff; }

  .error-page { width: calc(100% - 48px); max-width: 560px; margin: 64px auto; padding: 28px; border-radius: 18px; background: var(--panel); border-color: var(--line); box-shadow: none; }
  .error-page > a { min-height: 44px; border-radius: 9px; background: var(--mint); border-color: var(--mint); color: #123229; font-size: .82rem; }
  .error-page ~ .site-footer { margin-top: auto; }

  @media (max-width: 1000px) and (min-width: 781px) {
    .grid, .calculator-layout, .goal-layout, .sim-layout, .page > .layout { grid-template-columns: 320px minmax(0, 1fr); }
    body.theme-calculator :is(.metrics, .metrics-grid, .results-metrics, .calculator-metrics) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 780px) {
    .planner-shell, .wrap, .page-shell, .editorial-shell, .app.page-shell, .page:has(> .layout) { margin-top: 22px; padding-right: 16px; padding-left: 16px; }
    .grid, .calculator-layout, .goal-layout, .sim-layout, .page > .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sticky-card { position: static; }
    .home-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .editorial-shell .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.theme-calculator :is(.card, .content-surface, .essay, .quick-plan, .tool-card, .trust-card-simple, .content-section-card, .source-note, .panel-pad, .settings-card.sticky-card) { padding: 20px; }
    body.theme-calculator :is(.metric, .metric-card, .result-tile, .compare-metric) { padding: 17px 15px; }
    .page-subtitle, .page-intro > p, .lead, .subtitle { font-size: .88rem; }
    .page-intro, .content-hero { margin-bottom: 22px; }
    .home-method { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px; }
    .site-footer { padding: 22px 16px; }
  }

  @media (max-width: 520px) {
    body.theme-calculator :is(.metrics, .metrics-grid, .results-metrics, .calculator-metrics) { grid-template-columns: minmax(0, 1fr); }
    .tool-grid, .editorial-shell .tool-grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 380px) {
    .planner-shell, .wrap, .page-shell, .editorial-shell, .app.page-shell, .page:has(> .layout) { padding-right: 12px; padding-left: 12px; }
    body.theme-calculator :is(.card, .content-surface, .essay, .quick-plan, .tool-card, .trust-card-simple, .content-section-card, .source-note, .panel-pad) { padding: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}