/* ==========================================================================
   PEARTO — Design System
   Compare. Decide. See what happens next.
   --------------------------------------------------------------------------
   Layer 1   Primitive tokens      raw values, never referenced by components
   Layer 2   Semantic tokens       the only tokens components should use
   Layer 3   Reset & base
   Layer 4   Layout primitives
   Layer 5   Typography
   Layer 6   Navigation
   Layer 7   Buttons
   Layer 8   Surfaces
   Layer 9   Badges, chips & provenance tags
   Layer 10  Scores & meters
   Layer 11  Forms & controls
   Layer 12  Tables
   Layer 13  Tabs & accordions
   Layer 14  Feedback: alerts, empty states, skeletons
   Layer 15  Charts
   Layer 16  Timeline / consequence steps
   Layer 17  Command bar & search
   Layer 18  Cards (tools, categories, decisions)
   Layer 19  Prose (long-form trust pages)
   Layer 20  Footer
   Layer 21  Utilities
   Layer 22  Responsive
   Layer 23  Motion, print & dark-mode architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer 1 — Primitive tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand: evergreen "leaf" — evokes growth + go-ahead, not generic SaaS blue */
  --brand-50:  #eefbf5;
  --brand-100: #d6f5e6;
  --brand-200: #aeead0;
  --brand-300: #7bd9b3;
  --brand-400: #45c092;
  --brand-500: #17a375;
  --brand-600: #0d845e;
  --brand-700: #0c6a4d;
  --brand-800: #0d5440;
  --brand-900: #0c4536;

  /* Ink: cool neutral with a faint green cast so it sits with the brand */
  --ink-50:  #f6f8f9;
  --ink-100: #eaeff1;
  --ink-200: #d6e0e4;
  --ink-300: #b3c4ca;
  --ink-400: #87a1a9;
  --ink-500: #5f7d87;
  --ink-600: #48646e;
  --ink-700: #38505a;
  --ink-800: #26383f;
  --ink-900: #16262b;
  --ink-950: #0b161a;

  /* Accent: citrus amber, reserved for scores and emphasis — never decoration */
  --accent-100: #fef3c7;
  --accent-300: #fcd34d;
  --accent-500: #f59e0b;
  --accent-600: #d97706;
  --accent-700: #b45309;

  /* Status */
  --positive-600: #0d845e;
  --positive-100: #d6f5e6;
  --caution-700:  #b45309;
  --caution-100:  #fef3c7;
  --critical-700: #b42318;
  --critical-100: #fee4e2;
  --info-700:     #175cd3;
  --info-100:     #e0eaff;

  /* Type */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(11, 22, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 22, 26, 0.07), 0 1px 2px rgba(11, 22, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(11, 22, 26, 0.07), 0 2px 4px rgba(11, 22, 26, 0.04);
  --shadow-lg: 0 18px 40px rgba(11, 22, 26, 0.10), 0 4px 10px rgba(11, 22, 26, 0.05);
  --shadow-focus: 0 0 0 4px var(--brand-100);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 160ms;

  /* Layout */
  --measure: 68ch;
  --page-max: 1160px;
}

/* --------------------------------------------------------------------------
   Layer 2 — Semantic tokens

   These are the names components use. Dark mode (below) only overrides this
   layer, so every component inherits a theme for free.

   The `--navy*`, `--brand*`, `--muted`, `--line`, `--bg`, `--green` and
   `--radius` names are legacy aliases kept so `calculator.css` and the
   ported calculator templates keep rendering unchanged.
   -------------------------------------------------------------------------- */
:root {
  --surface:        #ffffff;
  --surface-sunken: var(--ink-50);
  --surface-inset:  var(--ink-100);
  --surface-invert: var(--ink-950);

  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-400);
  --text-invert:    #ffffff;
  --text-invert-muted: var(--ink-300);

  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-subtle:  var(--ink-100);

  --brand:          var(--brand-600);
  --brand-hover:    var(--brand-700);
  --brand-soft:     var(--brand-50);
  --brand-ink:      var(--brand-800);

  --positive:       var(--positive-600);
  --positive-bg:    var(--positive-100);
  --caution:        var(--caution-700);
  --caution-bg:     var(--caution-100);
  --critical:       var(--critical-700);
  --critical-bg:    var(--critical-100);
  --info:           var(--info-700);
  --info-bg:        var(--info-100);
  --accent:         var(--accent-600);
  --accent-bg:      var(--accent-100);

  /* Legacy aliases — do not remove, calculator.css depends on them */
  --navy:       var(--ink-900);
  --navy-deep:  var(--ink-950);
  --muted:      var(--ink-500);
  --line:       var(--ink-200);
  --bg:         var(--ink-50);
  --green:      var(--positive-600);
  --radius:     16px;
}

/* --------------------------------------------------------------------------
   Layer 3 — Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

/* One focus style everywhere; `:focus-visible` keeps mouse clicks quiet. */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand-200); color: var(--ink-950); }

/* --------------------------------------------------------------------------
   Layer 4 — Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--page-max), calc(100% - 32px));
  margin-inline: auto;
}

.container-narrow { width: min(760px, calc(100% - 32px)); margin-inline: auto; }

.section { padding: var(--space-16) 0; }
.section-sm { padding: var(--space-10) 0; }
.section-tight { padding: var(--space-8) 0; }
.section-sunken { background: var(--surface-sunken); }
.section-surface { background: var(--surface); }
.section-invert { background: var(--surface-invert); color: var(--text-invert); }

/* Vertical rhythm helper — prefer this over ad-hoc margins */
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster-lg { gap: var(--space-5); }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Legacy `.grid` (3-up) kept for existing templates */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

.section-head { max-width: var(--measure); margin-bottom: var(--space-8); }
.section-head.split { max-width: none; }
.section-head p { color: var(--text-muted); margin: var(--space-2) 0 0; font-size: 17px; }

.divider { height: 1px; background: var(--border-subtle); border: 0; margin: var(--space-8) 0; }

/* --------------------------------------------------------------------------
   Layer 5 — Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.025em; line-height: 1.2; margin: 0; font-weight: 750; }

.display {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 800;
}

h1, .h1 { font-size: clamp(30px, 3.6vw, 44px); }
h2, .h2 { font-size: clamp(25px, 2.6vw, 32px); }
h3, .h3 { font-size: 19px; }
h4, .h4 { font-size: 16px; }

.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-muted); line-height: 1.6; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.strong { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; }
.text-invert { color: var(--text-invert); }
.text-invert-muted { color: var(--text-invert-muted); }
.text-brand { color: var(--brand); }
.text-positive { color: var(--positive); }
.text-caution { color: var(--caution); }
.text-critical { color: var(--critical); }
.balance { text-wrap: balance; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.section-invert .eyebrow { color: var(--brand-300); }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 13.5px; color: var(--text-subtle); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs li { list-style: none; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--border-strong); }

/* --------------------------------------------------------------------------
   Layer 6 — Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  width: min(var(--page-max), calc(100% - 32px));
  min-height: 66px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: -0.04em; font-size: 17px; flex: none; }
.brand:hover { color: inherit; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  box-shadow: 2px 2px 0 var(--brand-800);
  flex: none;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-accent { color: var(--brand); }

.desktop-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-4); }
.desktop-nav a,
.nav-actions > a {
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: 14.5px;
  font-weight: 600;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"],
.nav-actions > a:hover { background: var(--brand-soft); color: var(--brand-700); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Compact nav search */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none; }
.nav-search-input {
  width: 210px;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 14px;
  transition: width var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.nav-search-input::placeholder { color: var(--text-subtle); }
.nav-search-input:focus {
  width: 260px;
  background: var(--surface);
  border-color: var(--brand-400);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  flex: none;
}
.mobile-nav-toggle span { display: block; width: 17px; height: 2px; background: var(--ink-800); border-radius: 2px; position: relative; }
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink-800); border-radius: 2px; transition: transform var(--duration) var(--ease); }
.mobile-nav-toggle span::before { top: -5px; }
.mobile-nav-toggle span::after { top: 5px; }
.mobile-nav-toggle[aria-expanded="true"] span { background: transparent; }
.mobile-nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: var(--space-4) 0 var(--space-6);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 2px; }
.mobile-nav a { display: block; padding: 11px 12px; border-radius: var(--radius-sm); font-weight: 600; color: var(--ink-700); }
.mobile-nav a:hover { background: var(--brand-soft); color: var(--brand-700); }
.mobile-nav .mobile-nav-section { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   Layer 7 — Buttons
   -------------------------------------------------------------------------- */
.button,
.button-ghost,
.button-quiet,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease),
              color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.button:active, .button-ghost:active, .button-quiet:active { transform: translateY(1px); }
.button[disabled], .button-ghost[disabled], .button-quiet[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(13, 132, 94, 0.22);
}
.button:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff !important; }

.button-ghost { background: var(--surface); border-color: var(--border); color: var(--ink-800); box-shadow: var(--shadow-xs); }
.button-ghost:hover { border-color: var(--border-strong); background: var(--surface-sunken); color: var(--ink-900); }

.button-quiet { background: transparent; border-color: transparent; color: var(--ink-700); }
.button-quiet:hover { background: var(--surface-inset); color: var(--ink-900); }

.button-danger { background: var(--critical); border-color: var(--critical); color: #fff !important; }

.button-small { padding: 9px 14px; font-size: 14px; border-radius: var(--radius-sm); }
.button-large { padding: 15px 26px; font-size: 16.5px; }
.button-block { width: 100%; }

.section-invert .button-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.section-invert .button-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   Layer 8 — Surfaces
   -------------------------------------------------------------------------- */
.card,
.panel,
.surface {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card { padding: var(--space-6); }
.panel { padding: var(--space-6); }
.surface { padding: var(--space-6); }

.card-hover { transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.card-hover:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card h3, .surface h3 { margin: 0 0 var(--space-2); }
.card p, .surface p { margin: 0; }

.panel-title {
  margin: 0 0 var(--space-5);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.panel-heading { margin: 0 0 var(--space-4); font-size: 16px; font-weight: 750; color: var(--text); }

.panel + .panel, .panel + .result-columns, .result-columns + .panel { margin-top: var(--space-5); }

.surface-flush { padding: 0; overflow: hidden; }
.surface-head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.surface-body { padding: var(--space-6); }
.surface-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); }

/* --------------------------------------------------------------------------
   Layer 9 — Badges, chips & provenance tags
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  /* Prevents the pill stretching when it is a flex item (e.g. inside .tool-card). */
  align-self: flex-start;
  background: var(--surface-inset);
  color: var(--ink-700);
}
.badge-brand    { background: var(--brand-soft);  color: var(--brand-700); }
.badge-positive { background: var(--positive-bg); color: var(--positive); }
.badge-caution  { background: var(--caution-bg);  color: var(--caution); }
.badge-critical { background: var(--critical-bg); color: var(--critical); }
.badge-info     { background: var(--info-bg);     color: var(--info); }
.badge-accent   { background: var(--accent-bg);   color: var(--accent-700); }
.badge-outline  { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

/* Provenance tags — used to separate FACT / INPUT / CALC / ESTIMATE / AI */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tag-fact     { background: var(--info-bg);     color: var(--info); }
.tag-input    { background: var(--brand-soft);  color: var(--brand-700); }
.tag-calc     { background: var(--surface-inset); color: var(--ink-700); }
.tag-estimate { background: var(--accent-bg);   color: var(--accent-700); }
.tag-ai       { background: #f3e8ff;            color: #6b21a8; }

.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12px; font-weight: 700; background: var(--surface-inset); color: var(--ink-700); }

/* --------------------------------------------------------------------------
   Layer 10 — Scores & meters
   -------------------------------------------------------------------------- */
.score { display: flex; align-items: center; gap: var(--space-4); }
.score-value {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.score-outof { font-size: 15px; font-weight: 700; color: var(--text-subtle); }
.score-label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }

.score-delta { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-delta-up { color: var(--positive); }
.score-delta-down { color: var(--critical); }

.meter { display: grid; gap: 6px; }
.meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.meter-label { font-weight: 600; color: var(--ink-700); }
.meter-value { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.meter-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden; }
/* Bars are <span>s so they stay inline-safe in text flow; blockified here so
   percentage heights and widths actually apply. */
.meter-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand); transition: width 420ms var(--ease); }
.meter-fill-positive { background: var(--positive); }
.meter-fill-caution  { background: var(--accent-500); }
.meter-fill-critical { background: var(--critical); }

.confidence-note { margin: var(--space-4) 0 0; font-size: 13px; color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Layer 11 — Forms & controls
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 6px; margin: var(--space-4) 0; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 11px 13px;
  font-size: 15px;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand-400); outline: none; box-shadow: var(--shadow-focus); }
.field input::placeholder { color: var(--text-subtle); }
.field-help { margin: 0; font-size: 12.5px; color: var(--text-subtle); }

.field-list { display: flex; flex-direction: column; gap: var(--space-4); }
.field-list .field { margin: 0; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); padding: 0 0 var(--space-3); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { width: 100%; }
.affix { position: absolute; font-size: 14px; color: var(--text-subtle); pointer-events: none; }
.affix-left { left: 13px; }
.affix-right { right: 13px; }

/* Range slider — brand-tinted, large enough to hit on touch */
.slider { width: 100%; margin-top: var(--space-2); accent-color: var(--brand); cursor: pointer; }
.slider:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 4px; }

.row-split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.row-label { font-weight: 600; color: var(--ink-700); }
.row-value { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

.note {
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
}
.note a { color: var(--brand); font-weight: 600; }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 600; color: var(--ink-700); cursor: pointer; }

.errorlist { color: var(--critical); padding-left: var(--space-5); margin: var(--space-2) 0; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Layer 12 — Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table caption { text-align: left; padding: var(--space-4) var(--space-5); color: var(--text-muted); font-size: 13.5px; }
.table th, .table td { padding: var(--space-3) var(--space-5); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.table thead th {
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  position: sticky;
  top: 0;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunken); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layer 13 — Tabs & accordions
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--space-3) var(--space-4);
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--brand-700); border-bottom-color: var(--brand); }
.tabs-panels > [role="tabpanel"] { padding-top: var(--space-6); }
[role="tabpanel"][hidden] { display: none; }

.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.accordion > details { border-bottom: 1px solid var(--border-subtle); }
.accordion > details:last-child { border-bottom: 0; }
.accordion summary {
  padding: var(--space-4) var(--space-5);
  font-weight: 650;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--text-subtle); line-height: 1; }
.accordion details[open] > summary::after { content: "\2212"; }
.accordion summary:hover { background: var(--surface-sunken); }
.accordion .accordion-body { padding: 0 var(--space-5) var(--space-5); color: var(--text-muted); font-size: 15px; }
.accordion .accordion-body > :first-child { margin-top: 0; }
.accordion .accordion-body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Layer 14 — Feedback: alerts, empty states, skeletons
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: 14.5px;
  line-height: 1.6;
}
.alert strong { display: block; margin-bottom: 2px; }
.alert-info     { background: var(--info-bg);     border-color: #b2ccff; color: #0b3a91; }
.alert-positive { background: var(--positive-bg); border-color: var(--brand-200); color: var(--brand-900); }
.alert-caution  { background: var(--caution-bg);  border-color: #fde68a; color: #7a3d05; }
.alert-critical { background: var(--critical-bg); border-color: #fecdca; color: #7a271a; }
.alert p { margin: 0; }

.empty-state { text-align: center; padding: var(--space-12) var(--space-5); display: grid; gap: var(--space-3); justify-items: center; }
.empty-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand-700);
  font-size: 22px;
}
.empty-state h3 { margin: 0; }
.empty-state p { margin: 0; color: var(--text-muted); max-width: 46ch; }

.skeleton { background: linear-gradient(90deg, var(--surface-inset) 25%, var(--ink-50) 37%, var(--surface-inset) 63%); background-size: 400% 100%; animation: skeleton-sweep 1.4s ease infinite; border-radius: var(--radius-sm); }
.skeleton-line { height: 13px; margin-bottom: var(--space-2); }
.skeleton-line:last-child { width: 60%; }
.skeleton-block { height: 110px; border-radius: var(--radius-md); }
@keyframes skeleton-sweep { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   Layer 15 — Charts
   -------------------------------------------------------------------------- */
.chart { display: grid; gap: var(--space-3); }
.chart-row { display: grid; grid-template-columns: minmax(96px, 0.8fr) 2.4fr auto; align-items: center; gap: var(--space-3); font-size: 14px; }
.chart-label { font-weight: 600; color: var(--ink-700); }
.chart-track { display: block; height: 26px; border-radius: var(--radius-xs); background: var(--surface-inset); overflow: hidden; }
/* display:block is required: these are <span>s, and an inline box ignores
   height and percentage width entirely. */
.chart-bar { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--brand); min-width: 4px; transition: width 420ms var(--ease); }
.chart-bar-b { background: var(--brand-200); }
.chart-bar-negative { background: var(--critical); }
.chart-value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; color: var(--text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--brand); flex: none; }
.chart-swatch-b { background: var(--brand-200); }

/* Accessible textual equivalent for any chart */
.chart-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Layer 16 — Timeline / consequence steps
   -------------------------------------------------------------------------- */
.timeline { position: relative; margin: 0; padding: 0 0 0 var(--space-6); list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: var(--space-6); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) + 2px);
  top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
}
.timeline-when { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-700); }
.timeline-what { margin: 4px 0 0; font-size: 15px; color: var(--ink-700); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.step { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4); align-items: start; }
.step-dot {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-800);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid var(--brand-200);
}
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Layer 17 — Command bar & search
   -------------------------------------------------------------------------- */
.command-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 7px 7px var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}
.command-bar:focus-within { border-color: var(--brand-400); box-shadow: var(--shadow-lg), var(--shadow-focus); }
.command-bar svg { width: 19px; height: 19px; color: var(--text-subtle); flex: none; }
.command-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 4px;
  font-size: 16.5px;
}
.command-input:focus { outline: none; }
.command-input::placeholder { color: var(--text-subtle); }
.command-submit { flex: none; }

.command-hints { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.command-hint {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-invert);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.command-hint:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.command-hint-rotating::after { content: ""; animation: none; }

.search-form { display: flex; gap: var(--space-2); max-width: 620px; }
.search-form .field { flex: 1; margin: 0; }
.results-count { font-size: 14px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Layer 18 — Cards: tools, categories, decisions
   -------------------------------------------------------------------------- */
.tool-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.tool-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool-card h3 { margin: 0; font-size: 17px; }
.tool-card p { margin: 0; color: var(--text-muted); font-size: 14px; flex: 1; }
.tool-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; font-weight: 700; color: var(--brand-700); }
.tool-card-arrow { transition: transform var(--duration) var(--ease); }
.tool-card:hover .tool-card-arrow { transform: translateX(3px); }

.category-card { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.category-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-700); font-size: 19px; }
.category-card h3 { margin: 0; font-size: 16px; }
.category-card p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.category-count { font-size: 12.5px; font-weight: 700; color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Layer 19 — Prose (long-form trust pages)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); font-size: 16.5px; line-height: 1.75; color: var(--ink-700); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: var(--space-10) 0 var(--space-3); font-size: 26px; color: var(--text); }
.prose h3 { margin: var(--space-8) 0 var(--space-2); font-size: 19px; color: var(--text); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); }
.prose blockquote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 3px solid var(--brand-300); color: var(--text-muted); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-inset); padding: 2px 6px; border-radius: var(--radius-xs); }

/* --------------------------------------------------------------------------
   Layer 20 — Footer
   -------------------------------------------------------------------------- */
.footer { padding: var(--space-16) 0 var(--space-8); background: var(--ink-950); color: var(--ink-300); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); }
.footer .brand { color: #fff; margin-bottom: var(--space-3); }
.footer .brand:hover { color: #fff; }
.footer p { margin: 0; max-width: 34ch; color: var(--ink-400); }
.footer strong { display: block; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer a { display: block; margin-top: var(--space-2); color: var(--ink-400); }
.footer a:hover { color: #fff; }
.footer-legal { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: 13px; color: var(--ink-500); }
.footer-legal a { display: inline; margin: 0; }
.footer-disclaimer { margin-top: var(--space-4); font-size: 12.5px; color: var(--ink-500); max-width: 78ch; }

/* --------------------------------------------------------------------------
   Layer 21 — Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.kbd { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface); color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.full { width: 100%; }

/* Auth */
.auth-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: var(--space-12) var(--space-4); }
.auth-card { width: min(430px, 100%); padding: var(--space-8); }
.auth-card h1 { margin: var(--space-3) 0 var(--space-2); font-size: 27px; }

/* Legacy `.result` block used by the original calculator markup */
.result { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-md); background: var(--positive-bg); border: 1px solid var(--brand-200); }
.result strong { color: var(--brand-900); }

.form-card { max-width: 780px; margin: var(--space-8) auto; padding: var(--space-8); }

.calculator-header { padding: var(--space-10) 0; background: var(--ink-950); color: #fff; }
.calculator-header h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.04em; margin: 10px 0 6px; color: #fff; }
.calculator-header p { margin: 0; color: var(--ink-300); max-width: 60ch; }
.calculator-header .eyebrow { color: var(--brand-300); }

/* Hero (legacy class names preserved, restyled) */
.hero { position: relative; padding: var(--space-20) 0 var(--space-16); background: var(--ink-950); color: #fff; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -55% -15% auto -15%;
  height: 105%;
  background: radial-gradient(58% 62% at 24% 0%, rgba(23, 163, 117, 0.22), rgba(23, 163, 117, 0.06) 48%, transparent 78%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: var(--space-12); align-items: center; }
.hero h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.05; letter-spacing: -0.045em; margin: var(--space-4) 0; color: #fff; }
/* The eyebrow needs its own tone: brand-300 on ink-950 is 8.4:1, while the
   default brand-600 would be under 3:1 and fail WCAG AA for small text. */
.hero .eyebrow { color: var(--brand-300); }
.hero p { max-width: 56ch; color: var(--ink-300); font-size: 18px; margin: 0 0 var(--space-6); }
.hero-card { position: relative; padding: var(--space-6); color: var(--text); background: var(--surface); border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.hero-card h2 { font-size: 20px; margin: 0 0 var(--space-2); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.hero-stat-value { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-stat-label { font-size: 12px; color: var(--text-subtle); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-8); font-size: 13.5px; color: var(--ink-400); }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   Layer 22 — Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .nav-search { display: none; }
  /* Account links and the sign-out form move into the drawer, so the header
     keeps only the brand, the primary CTA and the menu button. */
  .nav-actions > a:not(.button),
  .nav-actions > form:not(.nav-search) { display: none; }
  .nav-actions .button { white-space: nowrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --space-16: 48px; --space-20: 56px; }
  .section { padding: var(--space-10) 0; }
  .grid { grid-template-columns: 1fr; }
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .hero { padding: var(--space-12) 0 var(--space-10); }
  .hero-card { padding: var(--space-5); }
  .hero-stats { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .calculator-header { padding: var(--space-8) 0; }
  .command-bar { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: var(--space-3); gap: var(--space-3); }
  .command-bar svg { display: none; }
  .command-input { text-align: center; }
  .command-submit { width: 100%; }
  .chart-row { grid-template-columns: 1fr auto; }
  .chart-track { grid-column: 1 / -1; order: 3; }
  .table th, .table td { padding: var(--space-3) var(--space-4); }
  .auth-wrap { min-height: auto; padding: var(--space-8) var(--space-4); }
  .search-form { flex-direction: column; }
}

/* Very small screens (320px) */
@media (max-width: 420px) {
  .container, .nav-inner { width: calc(100% - 24px); }
  .nav-inner { gap: var(--space-2); }
  .nav-actions { gap: var(--space-1); }
  .nav-actions .button { padding: 9px 12px; font-size: 13.5px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 30px; height: 30px; }
  .button { padding: 12px 15px; font-size: 14.5px; }
  .card, .panel, .surface { padding: var(--space-4); }
  .display { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   Layer 23 — Motion, print & dark-mode architecture
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-nav, .mobile-nav, .footer, .no-print, .command-bar, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .card, .panel, .surface, .tool-card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
  .hero { background: #fff !important; color: #000 !important; padding: 0 0 12pt; }
  .hero::before { display: none; }
  .hero h1, .hero p { color: #000 !important; }
  .section { padding: 12pt 0; }
}

/* Dark-mode architecture — opt-in via <html data-theme="dark">.
   Only the semantic layer changes, so every component themes for free. */
[data-theme="dark"] {
  --surface: #12211f;
  --surface-sunken: #0b161a;
  --surface-inset: #1b2f2c;
  --surface-invert: #061013;

  --text: #e8f1ef;
  --text-muted: #9db4b0;
  --text-subtle: #7d948f;

  --border: #26403c;
  --border-strong: #35544f;
  --border-subtle: #1b2f2c;

  --brand: var(--brand-400);
  --brand-hover: var(--brand-300);
  --brand-soft: #10312a;
  --brand-ink: var(--brand-200);

  --navy: var(--ink-100);
  --navy-deep: var(--ink-950);
  --line: #26403c;
  --bg: #0b161a;
  --brand-soft: #10312a;
}

/* ==========================================================================
   Layer 24 — Decision Workspace

   Three-panel shell: inputs | score | explanation. The answer leads on every
   breakpoint; on mobile the panels stack in reading order and a sticky bar
   keeps the recommendation and the "change inputs" action reachable.
   ========================================================================== */
.workspace-header { padding: var(--space-8) 0; background: var(--surface); border-bottom: 1px solid var(--border-subtle); }
.workspace-header h1 { margin: var(--space-2) 0 var(--space-1); }
.workspace-header-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-6);
  align-items: start;
  width: min(1440px, calc(100% - 32px));
  margin: var(--space-8) auto var(--space-16);
}
.workspace-left, .workspace-centre, .workspace-right { min-width: 0; }
.workspace-right { position: sticky; top: 84px; }

/* Sticky panels inside a sticky column would fight each other, so only the
   column sticks. */
.workspace > * { display: flex; flex-direction: column; }

/* --- The answer block ---------------------------------------------------- */
.answer { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.answer-top { display: grid; gap: var(--space-6); }
.answer-score { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
.answer-winner { margin: var(--space-2) 0 var(--space-1); font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }

/* Confidence gets its own full-width strip rather than competing with the score
   for horizontal room, so it reads the same at every panel width. */
.answer-confidence-strip {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-2);
}
.answer-confidence-strip > div { display: flex; align-items: center; gap: var(--space-3); }
.answer-confidence-strip .score-label { margin: 0; }

/* --- Flip points --------------------------------------------------------- */
.flip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.flip {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  padding: var(--space-4);
}
/* A threshold the user is already close to is the actionable one — mark it. */
.flip.is-near { border-color: var(--accent-300); background: var(--caution-bg); }
.flip-head { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.flip-text { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.6; color: var(--ink-800); }

/* --- Scenario / breakdown tables ---------------------------------------- */
.table tbody tr.is-current { background: var(--brand-soft); }
.table tbody tr.is-current th { color: var(--brand-800); }

/* --- Mobile action bar -------------------------------------------------- */
.workspace-mobile-bar { display: none; }

/* --- Score charts ------------------------------------------------------- */
.score-charts { display: grid; gap: var(--space-6); }
.score-chart .panel-heading { margin-bottom: var(--space-3); }
/* A longer label column than the generic chart, because factor names are words
   ("Cost stability") rather than short series keys. */
.score-chart .chart-row { grid-template-columns: minmax(110px, 0.9fr) 2fr auto; }
@media (max-width: 480px) {
  .score-chart .chart-row { grid-template-columns: 1fr auto; }
  .score-chart .chart-track { grid-column: 1 / -1; order: 3; }
}

/* --- Definition lists used for stored inputs and priorities ------------- */
.input-summary { margin: 0; display: grid; gap: var(--space-3); }
.input-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.input-summary dt { font-size: 14px; color: var(--text-muted); }
.input-summary dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.input-summary-row + .input-summary-row { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); }
  .workspace-right { grid-column: 1 / -1; position: static; }
}

@media (max-width: 860px) {
  .workspace {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    margin-bottom: var(--space-20);
    gap: var(--space-5);
  }
  /* The answer comes first on mobile, then inputs, then the rest. */
  .workspace-centre { order: 1; }
  .workspace-left { order: 2; }
  .workspace-right { order: 3; }
  .answer-confidence { text-align: left; justify-items: start; }
  .answer-confidence p { text-align: left; }
  .workspace-mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(11, 22, 26, 0.08);
  }
}

@media print {
  .workspace { display: block; width: 100%; margin: 0; }
  .workspace-right { position: static; }
  .workspace-mobile-bar { display: none !important; }
}

/* Visual refresh: shared navigation/cards and the warm Pearto home surface. */
:root { --page-max:1240px; --text-muted:var(--ink-600); --text-subtle:var(--ink-600); }
.site-nav { background:var(--surface); }
.nav-inner { min-height:76px; }
.brand { font-size:23px; }
.brand-mark { width:38px; height:38px; border-radius:13px; box-shadow:none; }
.brand-mark svg { width:24px; height:24px; }
.desktop-nav { margin-left:var(--space-3); }
.desktop-nav a, .nav-actions > a { padding-inline:10px; font-size:14px; }
.nav-search-input, .nav-search-input:focus { width:170px; }
.mobile-nav-toggle { width:44px; height:44px; }
.mobile-nav-toggle > span.visually-hidden::before,
.mobile-nav-toggle > span.visually-hidden::after { content:none; }
.mobile-nav { max-height:calc(100dvh - 76px); overflow-y:auto; overscroll-behavior:contain; }
.tool-card { padding:26px; gap:16px; border-color:var(--border-subtle); border-radius:20px; }
.tool-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tool-symbol { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--brand-soft); color:var(--brand-700); }
.tool-symbol svg { width:24px; height:24px; }
.tool-card[data-category="home"] .tool-symbol { background:#f1edfc; color:#7052a3; }
.tool-card[data-category="cars"] .tool-symbol { background:#e8f0fd; color:#355f9d; }
.tool-card[data-category="career"] .tool-symbol,
.tool-card[data-category="freelancing"] .tool-symbol { background:#fff1dc; color:#896019; }
.tool-card[data-category="purchases"] .tool-symbol,
.tool-card[data-category="subscriptions"] .tool-symbol { background:#fcece9; color:#a34d43; }
.tool-card h3 { font-size:20px; letter-spacing:-.035em; }
.tool-card p { line-height:1.7; }
.tool-card-foot { margin-top:10px; padding-top:16px; border-top:1px solid var(--border-subtle); }
.tool-card-arrow { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brand-soft); font-size:18px; }
.category-card { padding:24px; border-color:var(--border-subtle); }
.category-icon { width:46px; height:46px; margin-bottom:10px; }
.category-count { margin-top:10px; }
.section-head h1, .section-head h2 { max-width:24ch; }
.section-head .eyebrow { margin-bottom:10px; }
.search-form input { min-width:0; }
.footer-legal, .footer-disclaimer { color:var(--ink-300); }
.footer .brand { display:inline-flex; }
.home-page { background:#f8f9f5; }
.home-page .hero { padding:64px 0; background:#f6f7ef; color:var(--ink-900); }
.home-page .hero::before { inset:0; height:100%; background:radial-gradient(ellipse at 85% 30%, #e0eacb 0%, transparent 55%); }
.home-page .hero-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr); gap:clamp(32px,6vw,88px); }
.home-page .hero-copy { min-width:0; }
.home-page .hero-copy > .eyebrow { color:var(--brand-800); letter-spacing:.08em; font-size:11px; }
.home-page .hero-copy > .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.home-page .hero h1 { color:#183d32; font-size:clamp(42px,5.2vw,72px); line-height:1.04; letter-spacing:-.065em; margin:24px 0; }
.home-page .hero h1 span { color:var(--brand-700); }
.home-page .hero-copy > p { font-size:17px; line-height:1.75; color:var(--ink-600); max-width:48ch; margin-bottom:28px; }
.home-page .command-bar { padding:8px 8px 8px 18px; border:1px solid #c8d5c7; border-radius:16px; box-shadow:0 8px 24px #233d2910; }
.home-page .command-input { font-size:15px; }
.home-page .command-submit { min-height:48px; padding-inline:20px; }
.home-page .command-hints { gap:8px; }
.home-page .command-hint { background:transparent; border-color:#cbd6c9; color:#355249; font-size:12px; padding:8px 12px; }
.home-page .command-hint:hover { background:#e4edda; border-color:#92b497; }
.home-page .hero-proof { gap:10px 20px; color:#486358; font-size:12px; margin-top:24px; }
.home-page .hero-proof > span > span { color:var(--brand-700); }
.home-page .hero-card { border:1px solid #d5dfd3; border-radius:24px; padding:26px; box-shadow:0 22px 60px #284b2814,7px 7px 0 #e7eddf; }
.home-page .hero-card .eyebrow { color:var(--ink-600); letter-spacing:.1em; font-size:10px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
.demo-title { display:flex; gap:12px; align-items:center; margin:20px 0 10px; }
.demo-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#f1edfc; color:#7052a3; flex:none; }
.home-page .demo-title h2 { font-size:22px; margin:0; }
.home-page .hero-card p { font-size:13px; line-height:1.6; color:var(--ink-600); margin-bottom:0; }
.home-page .hero-card .badge { font-size:10px; }
.demo-score { padding:16px 20px; border-radius:14px; background:var(--brand-soft); border:1px solid var(--brand-100); }
.demo-score .score-value { font-size:50px; line-height:1.1; color:var(--brand-800); }
.demo-score .score-label { font-size:11px; color:var(--brand-800); }
.home-page .hero-card .score-outof { font-size:14px; color:var(--ink-600); }
.home-page .hero-card .chart-track { height:12px; border-radius:4px; }
.home-page .hero-card .chart-row { font-size:12px; grid-template-columns:64px 1fr 24px; }
.home-page .hero-card .chart-value { text-align:right; }
.home-page .hero-card .list { font-size:12px; line-height:1.6; margin-top:8px; }
.home-page .hero-card h3 { font-size:12px; }
.home-page .hero-card .tiny { font-size:10px; margin-top:12px; }
.category-shortcuts { background:var(--surface); border-block:1px solid var(--border-subtle); }
.category-shortcuts-inner { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-block:18px; }
.shortcut-label { font-size:13px; font-weight:750; margin-right:16px; color:var(--ink-600); }
.category-shortcuts a { display:inline-flex; gap:7px; align-items:center; padding:10px; border-radius:10px; font-size:12px; font-weight:600; white-space:nowrap; }
.category-shortcuts svg { width:16px; height:16px; color:var(--brand-700); }
.category-shortcuts a:hover { background:var(--brand-soft); }
.home-page .section { padding-block:72px; }
.home-page .section-head { margin-bottom:32px; }
.home-page .section-head h2 { font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-.045em; }
.home-page .section-head p { font-size:16px; line-height:1.7; }
.home-page .section-sunken { background:#eef2e9; }
.home-page .card-grid-4 > .card { box-shadow:none; border:0; border-top:1px solid var(--border); padding:24px 0; border-radius:0; }
.home-page .card-grid-4 > .card h3 { line-height:1.4; }
.how-it-works-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start; }
.how-it-works-grid h2 { margin-top:14px; font-size:clamp(28px,3vw,38px); max-width:16ch; }
.how-it-works-grid .lede { font-size:17px; }
.home-page .section-invert { background:#173e32; }
.home-page .section-invert h2 { color:#f2f8e9; }
.home-page .section-invert .lede { color:#c9dacd; }
.home-page .section-invert .button { background:#d9efaa; border-color:#d9efaa; color:#183d32 !important; box-shadow:none; }
.home-page .section-invert .button:hover { background:#c5e58a; }
@media (min-width:1081px) and (max-width:1240px) { .nav-search { display:none; } }
@media (max-width:900px) {
  .home-page .hero-grid { grid-template-columns:1fr; gap:40px; }
  .home-page .hero-copy { max-width:660px; }
  .home-page .hero-card { max-width:600px; width:100%; }
  .home-page .hero h1 { font-size:clamp(42px,8vw,64px); }
  .how-it-works-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:760px) {
  .home-page .hero { padding:40px 0; }
  .home-page .section { padding-block:44px; }
  .home-page .command-bar { padding:10px; gap:6px; }
  .home-page .command-input { text-align:left; padding:12px 8px; }
  .home-page .hero-card { padding:22px; }
  .home-page .hero-card .chart-track { grid-column:auto; order:initial; }
  .category-shortcuts-inner { gap:4px; padding-block:12px; }
  .shortcut-label { width:100%; margin:0 0 4px 10px; }
  .category-shortcuts a { padding:9px 10px; }
  .tool-card { padding:22px; }
  .home-page .hero-card .split { gap:8px; }
}
@media (max-width:420px) {
  .brand { font-size:20px; }
  .brand-mark { width:32px; height:32px; }
  .home-page .hero h1 { font-size:43px; }
  .home-page .hero-card { padding:18px; }
}
[data-theme="dark"] { --text-muted:#9db4b0; --text-subtle:#9db4b0; }
@media print {
  .home-page .hero, .home-page .section-invert { background:white; }
  .home-page .hero h1, .home-page .hero h1 span, .home-page .section-invert h2 { color:black; }
  .category-shortcuts { display:none; }
  .home-page .hero-grid { display:block; }
  .home-page .hero-card { box-shadow:none; }
}