:root {
  /* Light theme — matches the QBCC Builders app's look (Brad confirmed he
     likes that one and wants the Hub to match it): white cards, light grey
     page background, indigo-blue accent. Was previously a dark theme;
     every hardcoded colour below that was tuned for readability on a DARK
     background has been re-tuned for a LIGHT one too — see the "AREA
     COLOUR CODING" section further down for the biggest batch of those. */
  --bg: #eef0f6;
  --panel: #ffffff;
  --panel-2: #f5f6fb;
  --border: #d7dbe6;
  --text: #1e2532;
  /* Contrast pass, 27 Jul 2026. These three carried the bulk of the app's
     unreadable text: --accent scored 3.2:1 on the 246 links that use it (and
     on white button labels), --muted dropped to ~4.4:1 once it sat on a
     --panel-2 tinted row, and --accent-2 was 3.9:1 as text. Same hues, each
     darkened just enough to clear the 4.5:1 WCAG AA line for small text.
     Deliberately NOT flattened to grey/navy — the indigo identity is kept. */
  --muted: #5b6270;
  --accent: #4f5bd5;
  --accent-bg: rgba(79,91,213,0.10);
  --accent-2: #0e7a3d;
  --warn: #8a5a12; /* was #b7791f — 3.4:1 as text on white, now 6.0:1 */
  --danger: #d9363e;
  --radius: 10px;

  /* ---- Professional redesign pass (13 Jul 2026) — added, not replacing the
     vars above, so every one of the 52 tabs that already reads var(--accent)
     etc. keeps working. These are the new systematic scales: spacing (4px
     base grid), shadows, and a slightly deeper/less-saturated hover shade
     of the accent for a more restrained, SaaS-dashboard feel. ---- */
  /* Up/down figures (share prices, fund returns, budget over/under). These
     were hardcoded as #3fb950 / #f85149 in ~10 files — dark-theme greens and
     reds that scored 2.3:1 and 3.4:1 against the white panel, i.e. genuinely
     hard to read at the 11-12px these figures are rendered at. Same hues,
     darkened to pass WCAG AA (6.6:1 / 8.3:1). Kept as tokens so the next
     theme change is one edit, not another ten-file sweep. */
  --pos: #0e6b3a;
  --neg: #8f2a2f;

  --accent-hover: #414cc0; /* kept one step darker than the new --accent */
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20,25,40,.05);
  --shadow-md: 0 2px 8px rgba(20,25,40,.08);
  --shadow-lg: 0 8px 24px rgba(20,25,40,.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; } /* browsers don't inherit this on form controls by default — was leaking Arial into the tab bar */
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}
.muted { font-size: 14.5px; line-height: 1.55; }
.card p, .card li, .strat-body p, .strat-body li { font-size: 14.5px; }

/* ---- Type scale (13 Jul 2026 redesign) — applies to any h1–h4 that
   doesn't carry its own inline font-size (a large share of the app's
   headings, especially plain <h3>/<h4> tags in index.html and files that
   don't inline-style their headings). Inline-styled headings elsewhere are
   left as-is per the surgical-changes rule, but now sit closer to this
   scale than the old browser-default sizes did. ---- */
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--text); }
h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text); }
h3 { font-size: 17px; font-weight: 650; margin: 22px 0 10px; color: var(--text); }
h4 { font-size: 14.5px; font-weight: 650; margin: 16px 0 8px; color: var(--text); }
p { margin: 0 0 10px; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.brand h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.subtitle { color: var(--muted); font-size: 13px; }
.asat { color: var(--muted); font-size: 13px; }
.asat strong { color: var(--accent-2); }

.disclaimer {
  background: rgba(183,121,31,0.10);
  border-bottom: 1px solid var(--warn);
  color: #7a5210;
  padding: 12px 28px;
  font-size: 13px;
}
.disclaimer.collapsed { display: none; }
.disclaimer button {
  margin-left: 10px;
  background: transparent;
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
  font-size: 12px;
}

.news-ticker-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(90deg, rgba(79,91,213, 0.1), transparent);
  border-bottom: 1px solid rgba(79,91,213, 0.3);
  padding: 10px 28px;
  overflow: hidden;
}
.ticker-label {
  color: var(--accent);
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-scroll {
  flex: 1;
  overflow: hidden;
  height: 24px;
}
.ticker-content {
  display: flex;
  gap: 40px;
  animation: scroll-left 30s linear infinite;
  padding-right: 100%;
}
.ticker-content span {
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-content a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.ticker-content a:hover { text-decoration: underline; }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- unverified content banner --- */
.unverified-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(217,54,62,0.08);
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: #8f2a2f;
  padding: 12px 14px;
  margin: 12px 0 18px;
  font-size: 13.5px; line-height: 1.55;
}
.unverified-banner strong { color: #b5262e; }

/* --- grouped navigation (hero + categories + sub-tabs) ---
   Redesigned 13 Jul 2026 for a calmer, "restrained palette" SaaS-dashboard
   feel: hero buttons are now one consistent neutral pill shape (not solid
   candy-colour fills) with each GROUP's colour showing only as a small
   accent dot + on the active/hover state — so the wayfinding colour-coding
   already wired in nav-groups.js and the tab-underline rules below is kept,
   just toned down instead of removed. */
.nav-hero {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6) var(--space-3); background: var(--panel);
}
.nav-hero-label { color: var(--muted); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; margin-right: 2px; }
.hero-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.hero-btn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--muted));
  flex-shrink: 0;
}
.hero-btn.alt      { --dot: #1a8f3c; }
.hero-btn.intl     { --dot: #c22a70; }
.hero-btn.insights { --dot: #57606f; }
.hero-btn.ref      { --dot: #0e8a9e; }
.hero-btn.plan     { --dot: #0f9d68; }
.hero-btn.struct   { --dot: #6242c9; }
.hero-btn.elec     { --dot: #a6710a; }
.hero-btn.constr   { --dot: #c96a1f; }
.hero-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); transform: translateY(-1px); }
.hero-btn.active {
  background: var(--tint, var(--accent-bg));
  border-color: var(--dot, var(--accent));
  color: var(--dot, var(--accent));
  box-shadow: var(--shadow-sm);
}
.hero-btn.alt.active      { --tint: rgba(26,143,60,.10); }
.hero-btn.intl.active     { --tint: rgba(194,42,112,.10); }
.hero-btn.insights.active { --tint: rgba(87,96,111,.10); }
.hero-btn.ref.active      { --tint: rgba(14,138,158,.10); }
.hero-btn.plan.active     { --tint: rgba(15,157,104,.10); }
.hero-btn.struct.active   { --tint: rgba(98,66,201,.10); }
.hero-btn.elec.active     { --tint: rgba(166,113,10,.10); }
.hero-btn.constr.active   { --tint: rgba(201,106,31,.10); }
/* groupless hero buttons (Overview / Ask / What Can I Claim? / Travel / Sports)
   fall back to the plain accent colour — they have no group hue to borrow */
.hero-btn.active:not(.alt):not(.intl):not(.insights):not(.ref):not(.plan):not(.struct):not(.elec):not(.constr) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.hero-btn.active:not(.alt):not(.intl):not(.insights):not(.ref):not(.plan):not(.struct):not(.elec):not(.constr)::before { background: #fff; }

.nav-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: var(--space-3) var(--space-6) 0; background: var(--panel);
}
.cat-btn {
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 15px; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cat-btn:hover { color: var(--text); border-color: var(--accent); }
.cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Sub-tab row sits in its own slightly-tinted shelf so it reads as clearly
   "beneath" the hero row (secondary nav level), not the same visual weight. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 6px var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.tab {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.tab:hover { color: var(--text); background: rgba(20,25,40,.03); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

main { padding: var(--space-6) var(--space-6) 60px; max-width: 1040px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

h2 { margin-top: 0; }
.muted { color: var(--muted); font-size: 14px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.grid label.full { grid-column: 1 / -1; }
.grid button { grid-column: 1 / -1; justify-self: start; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
input, select, textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, box-shadow .15s, transform .15s;
}
button.primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
button.primary:active { transform: translateY(0); box-shadow: none; }
.saved { color: var(--accent-2); font-size: 13px; margin-left: 10px; }

/* ---- Alert / callout boxes — used across Travel, Visas, Trust & Accuracy,
   Credit Cards and Insurance (class="alert alert-blue" / "alert alert-yellow")
   but these classes were never defined anywhere, so every one of those boxes
   was rendering as unstyled plain text. Real, verifiable bug — fixed here. ---- */
.alert {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}
.alert-blue { background: rgba(79,91,213,0.07); border-color: #2f81f7; color: #1c4c8f; }
.alert-yellow { background: rgba(183,121,31,0.09); border-color: var(--warn); color: #7a5210; }
.alert-green { background: rgba(18,161,80,0.08); border-color: var(--accent-2); color: #0e6b3a; }
.alert-red { background: rgba(217,54,62,0.08); border-color: var(--danger); color: #8f2a2f; }
.alert strong { color: inherit; }

/* ---- Table default (safety net for any table without its own inline
   styling — most tables in the app style th/td inline, which still wins,
   but this keeps an un-styled table from looking broken). ---- */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 8px 6px; border-bottom: 1px solid var(--border); }
td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 13px; }

#deductionPicker, #caseSearch, #actSearch { width: 100%; margin: 12px 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
/* Clickable cards (the app uses onclick="..." on <div class="card"> throughout,
   e.g. the Overview page's 13-area jump cards) now get real hover affordance —
   previously there was no visual cue these were clickable at all. */
.card[onclick] { cursor: pointer; }
.card[onclick]:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-1px); }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card .ref { font-size: 12px; color: var(--accent); }
.card .tag {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--muted);
  margin: 4px 4px 0 0;
}
.card a { color: var(--accent); text-decoration: none; }
.card a:hover { text-decoration: underline; }

.verify { color: var(--warn); font-weight: 600; font-size: 12px; }
.confidence { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.confidence.high { background: rgba(18,161,80,0.15); color: var(--accent-2); }
.confidence.check { background: rgba(183,121,31,0.15); color: var(--warn); }

.callout {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}
.callout code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.scenario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.scenario .box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.scenario .box.winner { border-color: var(--accent-2); }
.scenario .big { font-size: 26px; font-weight: 700; margin: 8px 0; }
.scenario .line { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--muted); }
.scenario .line strong { color: var(--text); }

/* ---- Strategy cards ---- */
.partiva-banner {
  background: rgba(217,54,62,0.08);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0 20px;
  font-size: 13px;
  color: #a13a2f;
}

.strat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0;
  overflow: hidden;
}
/* Title and saving sat side by side in a flex row. That works across a full
   1040px page, but once these cards flow into ~448px columns there isn't room
   for both: the title got squeezed to a sliver and wrapped one word per line
   ("Debt / Recycling / — / Converting / …"), and the nowrap saving text
   overflowed straight out of the card and was clipped.
   They now STACK — title first, saving underneath — which is what actually
   fits a card-width column. */
.strat-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 18px;
  cursor: pointer;
  gap: 6px;
}
.strat-header:hover { background: var(--panel-2); }
.strat-title { font-size: 15.5px; font-weight: 650; margin: 0; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.strat-meta { font-size: 12px; color: var(--muted); }
/* was white-space:nowrap — that is what pushed the text outside the card */
.strat-saving { font-size: 12px; color: var(--accent-2); font-weight: 600; overflow-wrap: anywhere; }
.strat-body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--border); }
.strat-body.open { display: block; }
.strat-body h4 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.strat-body ul { margin: 0; padding-left: 18px; }
.strat-body ul li { font-size: 14px; margin: 4px 0; }
.strat-body .partiva-note {
  background: rgba(217,54,62,0.07);
  border-left: 3px solid var(--danger);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #a13a2f;
  margin-top: 10px;
}
.case-pill {
  display: inline-block;
  background: rgba(79,91,213,0.12);
  color: var(--accent);
  border: 1px solid rgba(79,91,213,0.3);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  margin: 3px 3px 0 0;
  cursor: pointer;
}
.case-pill:hover { background: rgba(79,91,213,0.2); }
.risk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.risk-low { background: var(--accent-2); }
.risk-low-medium { background: #a8d8a0; }
.risk-medium { background: var(--warn); }
.risk-high { background: var(--danger); }

/* ---- Investment cards ---- */
.invest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.invest-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
}
.invest-card:hover { border-color: var(--accent); }
.invest-card.expanded { border-color: var(--accent); grid-column: 1 / -1; }
.invest-icon { font-size: 28px; margin-bottom: 8px; }
.invest-name { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.invest-headline { font-size: 13px; color: var(--muted); }
.rating-row { display: flex; gap: 16px; margin: 12px 0 8px; flex-wrap: wrap; }
.rating-item { font-size: 12px; color: var(--muted); }
.stars { color: var(--accent-2); }
.invest-detail { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.invest-benefit {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 13px;
}
.invest-benefit strong { display: block; margin-bottom: 3px; }
.invest-watch { color: var(--warn); font-size: 13px; margin: 6px 0; }
.invest-verdict {
  background: rgba(79,91,213,0.08);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 10px;
}

.scenario-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0;
}
.scenario-card h4 { margin: 0 0 8px; }
.step-list { counter-reset: steps; list-style: none; padding: 0; margin: 0; }
.step-list li {
  counter-increment: steps;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
  content: counter(steps);
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.plan-result {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}
.alloc-bar { height: 20px; border-radius: 10px; overflow: hidden; display: flex; margin: 12px 0; }
.alloc-seg { height: 100%; transition: width .4s; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.alloc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; }

footer {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .grid, .scenario { grid-template-columns: 1fr; }
}

/* Print: show only the Prep Pack, on white */
#prepPack { display: none; }
@media print {
  body * { visibility: hidden; }
  #prepPack, #prepPack * { visibility: visible; }
  #prepPack { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
}

/* ============================================================
   AREA COLOUR CODING (accessibility-reviewed palette)
   Each area has a signature colour on: idle tab tint, active
   tab text + underline, card left-border, and H2 left accent.
   Palette verified for WCAG AA contrast on the dark theme and
   for colour-blind (deuteranopia/protanopia) distinctness.
   ============================================================ */

/* Sub-tab active colour is now driven by GROUP (data-group, set by
   nav-groups.js on every tab) so all ~52 tabs get a coordinated colour that
   matches their hero button — not just the 9 that happened to have one
   before. See the ".tab[data-group=...]" rules below.
   Card/h2 left-BORDER accents below keep the original hue (a colour swatch
   doesn't need text-contrast), but every place that hue is used as TEXT
   uses a darker, light-background-legible shade of the same hue — the
   pastel versions were tuned for a dark background and would be very low
   contrast on white. */

/* Area border hues re-cut for the light theme, 28 Jul 2026. The palette above
   was, by its own note, "verified for WCAG AA on the dark theme" — the pastels
   (#5ce0b0 mint, #ff7eb6 pink, #f2cc60 butter, #56d364, #d2a8ff, #aab8c6,
   #3fc8e0, #e8823c) sat at 152-203 brightness and read as washed-out smudges
   against white. Each is now the SAME hue at the darker value the matching
   hero-button dot already used, so the wayfinding colour-coding is preserved
   and the swatches actually read. */

/* deductions — What Can I Claim? (green) — groupless standalone, keeps its own colour */
.tab[data-tab="deductions"] { color: #1a8f3c; }
.tab[data-tab="deductions"].active { color: #1a8f3c; border-bottom-color: #1a8f3c; }
#deductions .card { border-left: 4px solid #1a8f3c; }
#deductions h2 { border-left: 4px solid #1a8f3c; padding-left: 12px; }

/* cgt — CGT / Profit Planner (gold) — page's own accent, kept as-is */
#cgt .card { border-left: 4px solid #a6710a; }
#cgt h2 { border-left: 4px solid #a6710a; padding-left: 12px; }

/* cases — Case Law (lavender-violet) — page's own accent, kept as-is */
#cases .card { border-left: 4px solid #6242c9; }
#cases h2 { border-left: 4px solid #6242c9; padding-left: 12px; }

/* acts — Tax Acts (cyan) — matches its group (Reference & Tools) colour, see below */
#acts .card { border-left: 4px solid #0e8a9e; }
#acts h2 { border-left: 4px solid #0e8a9e; padding-left: 12px; }

/* strategies — Strategies (burnt-copper orange) — page's own accent, kept as-is */
#strategies .card { border-left: 4px solid #c96a1f; }
#strategies .strat-card { border-left: 4px solid #c96a1f; }
#strategies h2 { border-left: 4px solid #c96a1f; padding-left: 12px; }

/* invest — Invest Planning (mint teal-green) — matches its group (My Plan & Finances) colour, see below */
#invest .card { border-left: 4px solid #0f9d68; }
#invest .invest-card { border-left: 4px solid #0f9d68; }
#invest h2 { border-left: 4px solid #0f9d68; padding-left: 12px; }

/* intl — International / Cross-border (rose-pink) — matches its group colour, see below */
#intl .card { border-left: 4px solid #c22a70; }
#intl .strat-card { border-left: 4px solid #c22a70; }
#intl h2 { border-left: 4px solid #c22a70; padding-left: 12px; }

/* updates — Updates & Strategy (slate) — matches its group (Insights) colour, see below */
#updates .card { border-left: 4px solid #57606f; }
#updates h2 { border-left: 4px solid #57606f; padding-left: 12px; }

/* Group-driven active-tab colour — covers every tab in every group consistently,
   using a darker, light-background-legible shade of that group's hero-button hue. */
.tab[data-group="plan"].active { color: #0f9d68; border-bottom-color: #0f9d68; }
.tab[data-group="struct"].active { color: #6242c9; border-bottom-color: #6242c9; }
.tab[data-group="ref"].active { color: #0e8a9e; border-bottom-color: #0e8a9e; }
.tab[data-group="intl"].active { color: #c22a70; border-bottom-color: #c22a70; }
.tab[data-group="insights"].active { color: #57606f; border-bottom-color: #57606f; }
.tab[data-group="compare"].active { color: #a6710a; border-bottom-color: #a6710a; }
.tab[data-group="construction-intel"].active { color: #c96a1f; border-bottom-color: #c96a1f; }

/* ============================================================
   STRONGER, UNMISTAKABLE AREA ACCENTS
   Colour the heading TEXT, underline each section title, and
   tint the active tab so the area colour is obvious at a glance.
   Darker, light-background-legible shades — the underline itself keeps
   the original brighter hue (a thin coloured line doesn't need text-contrast).
   ============================================================ */
#profile h2    { color: #0969da; border-bottom: 2px solid #6cb6ff; padding-bottom: 8px; }
#deductions h2 { color: #1a8f3c; border-bottom: 2px solid #1a8f3c; padding-bottom: 8px; }
#cgt h2        { color: #a6790a; border-bottom: 2px solid #a6710a; padding-bottom: 8px; }
#cases h2      { color: #7c3aed; border-bottom: 2px solid #6242c9; padding-bottom: 8px; }
#acts h2       { color: #0e8a9e; border-bottom: 2px solid #0e8a9e; padding-bottom: 8px; }
#strategies h2 { color: #c96a1f; border-bottom: 2px solid #c96a1f; padding-bottom: 8px; }
#invest h2     { color: #0f9d68; border-bottom: 2px solid #0f9d68; padding-bottom: 8px; }
#intl h2       { color: #c22a70; border-bottom: 2px solid #c22a70; padding-bottom: 8px; }
#updates h2    { color: #57606f; border-bottom: 2px solid #57606f; padding-bottom: 8px; }

/* Per-area section sub-headings (h3) tinted to match */
#profile h3    { color: #0969da; }
#deductions h3 { color: #1a8f3c; }
#cgt h3        { color: #a6790a; }
#cases h3      { color: #7c3aed; }
#acts h3       { color: #0e8a9e; }
#strategies h3 { color: #c96a1f; }
#invest h3     { color: #0f9d68; }
#intl h3       { color: #c22a70; }
#updates h3    { color: #57606f; }

/* Active tab gets a tinted background so "you are here" is obvious —
   driven by the same group colour as the text/underline above, so all
   three (hero button, tab text, tab background) always agree. */
.tab { border-radius: 6px 6px 0 0; }
.tab[data-tab="deductions"].active { background: #1a8f3c22; }
.tab[data-group="plan"].active { background: #0f9d6822; }
.tab[data-group="struct"].active { background: #7b61d622; }
.tab[data-group="ref"].active { background: #0e8a9e22; }
.tab[data-group="intl"].active { background: #c22a7022; }
.tab[data-group="insights"].active { background: #57606f22; }
.tab[data-group="compare"].active { background: #d2992222; }
.tab[data-group="construction-intel"].active { background: #c96a1f22; }

/* ========== CASE LAW LIBRARY ========== */
.category-btn {
  transition: all 0.2s ease;
}

.category-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}

.category-btn.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}
/* The result count inside each category button is rendered with an inline
   color:var(--muted). On the ACTIVE button that grey sat on the indigo fill at
   1.11:1 — the "(14)" was effectively invisible the moment you selected a
   category. Inline styles win over normal rules, hence !important. */
.category-btn.active span { color: rgba(255,255,255,.78) !important; }

/* ========== EXPERTS VIEW ========== */
#expertSearch {
  width: 100%;
  margin-bottom: 12px;
}

.expert-article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(79,91,213, 0.05);
  margin-bottom: 12px;
}

.expert-article h3 {
  margin: 8px 0;
  color: var(--text);
  font-size: 15px;
}

.expert-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
}

.expert-category {
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.expert-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 600px;
  overflow-y: auto;
}

.read-more-btn {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.read-more-btn:hover {
  background: var(--accent);
  color: white;
}

/* Enhanced tab styling */
.tab {
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tab.active {
  /* no !important here — this used to silently override every group/area
     colour above regardless of CSS specificity, which was the real cause
     of the tab bar's colours looking inconsistent/random. */
  font-weight: 600;
}

/* ---- Section-header divider (property-portfolio-ui.js / propinvest tab):
   class="section-hdr" wraps an h2 flanked by two class="line" divs (meant
   as "—— Heading ——" flanking rules) but neither class had a CSS
   definition anywhere, so the divider lines were invisible (zero-height
   empty divs) — same "used but never defined" bug shape as the .alert
   fix above. Scoped to .section-hdr .line so it doesn't touch the
   pre-existing, unrelated .scenario .line rule. ---- */
.section-hdr { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; }
.section-hdr h2 { margin: 0; white-space: nowrap; }
.section-hdr .line { flex: 1; height: 1px; background: var(--border); }

/* ---- Density fix: Credit Cards tab renders ~25 cards fully stacked
   full-width (credit-cards-ui.js #cc_cards), making that comparison page
   ~14,600px tall — a real, verified example of the "dense/stacked cards"
   complaint. A 2-column grid roughly halves the scroll without touching
   the render logic (each card's own internal fact-grid still reflows fine
   at half width). Category headings span both columns. ---- */
#cc_cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); align-items: start; }
#cc_cards > h3 { grid-column: 1 / -1; }
@media (max-width: 800px) { #cc_cards { display: block; } }

/* ============================================================
   COMPARISON TOOLS TAB (#comparisons) — 27 Jul 2026
   Was still carrying dark-theme leftovers: green-wash panel
   backgrounds (rgba(18,161,80,.05)), purple row tints and
   #3fb950 / #d97e73 result text, all tuned for the OLD dark
   background and washed out / low-contrast on the light theme.
   Rebuilt as proper white tool cards on the app's own tokens.
   Scoped to .ctool* so nothing else in the app is affected.
   ============================================================ */
.ctool {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ctool-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.ctool-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ctool-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ctool-body { padding: var(--space-5); }

/* Inputs: two columns instead of one full-bleed stack. The global
   label{display:flex;flex-direction:column} already stacks the caption
   above the field — these just give it a readable measure and a hint line. */
/* Explicit column counts rather than auto-fit: on a wide screen auto-fit
   produced 6 very thin columns, which made the number fields unreadable.
   Three is the widest that keeps a dollar field a sensible size. */
.ctool-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.ctool-fields label { font-size: 12.5px; font-weight: 600; color: var(--text); gap: 5px; }
.ctool-fields input, .ctool-fields select { width: 100%; }
.ctool-hint { font-weight: 400; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.ctool-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.ctool-actions .note { font-size: 12px; color: var(--muted); }

/* ---- Results ---- */
.ctool-results { margin-top: var(--space-5); }
.ctool-results:empty { display: none; }
.ctool-restitle {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--space-3);
}

/* Ranked comparison table — light header, hairline rows, tabular figures
   so the dollar columns line up digit-for-digit. */
.ctool-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ctool-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.ctool-table th:first-child { border-top-left-radius: var(--radius-sm); }
.ctool-table th:last-child { border-top-right-radius: var(--radius-sm); }
.ctool-table td {
  padding: 12px; font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ctool-table tr:last-child td { border-bottom: none; }
.ctool-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ctool-table .name { font-weight: 600; }
.ctool-table tr.best td { background: rgba(18,161,80,0.06); }
.ctool-table tr.best .name { color: #0e6b3a; }
.ctool-table tr.best td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.ctool-table .amount { font-weight: 700; font-size: 15px; }
.ctool-table .delta { font-size: 12px; color: var(--muted); }

.ctool-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px;
  background: rgba(18,161,80,0.12); color: #0e6b3a;
}

/* Stat tiles for the investment modeller */
.ctool-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.ctool-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-2);
}
.ctool-stat .k {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.ctool-stat .v {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: var(--text);
}
.ctool-stat .sub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.ctool-stat.pos .v { color: #0e6b3a; }
.ctool-stat.neg .v { color: #8f2a2f; }
.ctool-stat.headline {
  grid-column: 1 / -1;
  background: rgba(108,123,240,0.06);
  border-color: var(--accent);
}
.ctool-stat.headline .v { font-size: 30px; color: var(--accent); }

/* Assumptions / limits — same visual language as .alert, kept quiet
   so it reads as a footnote rather than a warning. */
.ctool-assump {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--panel-2);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.ctool-assump summary {
  cursor: pointer; font-weight: 700; color: var(--text);
  font-size: 12.5px; list-style: none;
}
.ctool-assump summary::-webkit-details-marker { display: none; }
.ctool-assump summary::before { content: "▸ "; color: var(--accent); }
.ctool-assump[open] summary::before { content: "▾ "; }
.ctool-assump ul { margin: 8px 0 0; padding-left: 18px; }
.ctool-assump li { margin: 4px 0; }
.ctool-assump strong { color: var(--text); }

@media (max-width: 900px) {
  .ctool-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ctool-fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ctool-fields, .ctool-stats { grid-template-columns: 1fr; }
  .ctool-body { padding: var(--space-4); }
  .ctool-actions { flex-direction: column; align-items: flex-start; }
  .ctool-actions .primary { width: 100%; }
  /* The per-row explanation is the first thing to go when space is tight —
     the structure name, the dollar figure and the gap still fit. */
  .ctool-table td { padding: 10px 8px; font-size: 13px; }
  .ctool-table th:nth-child(3), .ctool-table td:nth-child(3) { display: none; }
}

/* ============================================================
   TRUST & ACCURACY TAB (#verify) — 27 Jul 2026
   Rebuilt. The content was already honest and worth reading; the
   presentation was fighting it. Nine cards carried seven different
   arbitrary left-border colours (#2f81f7, #9371f7, #56b36a,
   #f0a93b, #d2a334, #e67e22 …) so nothing read as more important
   than anything else, the status pills were hand-built inline in
   four places with four slightly different palettes, and the
   headline tally — the actual answer to "can I trust this app?" —
   sat buried two thirds of the way down.
   Approach: colour now means STATUS and nothing else. Cards are
   plain white and earn their weight through hierarchy, not hue.
   Scoped to .vf* so no other tab is affected.
   ============================================================ */

/* ---- Scoreboard: the answer, before the evidence ---- */
.vf-score {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.vf-score-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.vf-metric {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.vf-metric .n {
  display: block;
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  line-height: 1.1;
}
.vf-metric .l {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted);
}
.vf-metric.good .n { color: var(--pos); }
.vf-metric.warn .n { color: var(--warn); }
.vf-metric.bad  .n { color: var(--neg); }
.vf-metric.info .n { color: var(--accent); }

/* ---- One pill component, replacing four inline variants ---- */
/* .pill is the app-wide alias — same component, neutral name, usable by any tab. */
.vf-pill, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  white-space: nowrap;
}
.vf-pill.good, .pill.good { border-color: var(--accent-2); background: rgba(18,161,80,.10); color: var(--pos); }
.vf-pill.warn, .pill.warn { border-color: var(--warn);     background: rgba(138,90,18,.10);  color: var(--warn); }
.vf-pill.bad, .pill.bad { border-color: var(--danger);   background: rgba(217,54,62,.10);  color: var(--neg); }
.vf-pill.info, .pill.info { border-color: var(--accent);   background: var(--accent-bg);     color: var(--accent); }
.vf-pills, .pills { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--space-3) 0; }

/* ---- Cards: no rainbow. Weight comes from the header, not a hue. ---- */
/* .ui-card / .ui-row are the app-wide aliases — same components, neutral
   names, so any tab can use the card shell built for Trust & Accuracy. */
.vf-card, .ui-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: var(--space-4) 0;
  overflow: hidden;
}
.vf-card > header, .ui-card > header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.vf-card > header h3, .ui-card > header h3 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vf-card > header p, .ui-card > header p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.vf-body, .ui-body { padding: var(--space-4) var(--space-5); }
.vf-body > :first-child, .ui-body > :first-child { margin-top: 0; }
.vf-body > :last-child, .ui-body > :last-child { margin-bottom: 0; }

/* ---- Numbered stepper for the 7-step pipeline ---- */
.vf-steps { counter-reset: vfstep; margin: 0; padding: 0; list-style: none; }
.vf-step {
  position: relative;
  padding: 0 0 var(--space-4) 34px;
  border-left: 2px solid var(--border);
  margin-left: 11px;
}
.vf-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.vf-step::before {
  counter-increment: vfstep; content: counter(vfstep);
  position: absolute; left: -12px; top: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vf-step .t { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.vf-step .d { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---- Consistent row rhythm for lenses / balances / watchlist / registry ---- */
.vf-row, .ui-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.vf-row:last-child, .ui-row:last-child { border-bottom: none; }
.vf-row .t, .ui-row .t { font-weight: 600; font-size: 13px; }
.vf-row .d, .ui-row .d { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.vf-row .meta, .ui-row .meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.vf-rowhead, .ui-rowhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }

/* ---- Tab coverage list ---- */
.vf-tabrow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.vf-tabrow:last-child { border-bottom: none; }
.vf-tablink {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; font-size: 13px;
  text-align: left; font-family: inherit;
}
.vf-tablink:hover { text-decoration: underline; }
.vf-type { font-size: 11.5px; color: var(--muted); margin-left: 6px; }

/* ---- Dated change log ---- */
.vf-log { border-left: 2px solid var(--border); padding-left: var(--space-4); margin-left: 4px; }
.vf-log-entry { position: relative; padding-bottom: var(--space-4); }
.vf-log-entry:last-child { padding-bottom: 0; }
.vf-log-entry::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 0 3px var(--panel);
}
.vf-log-entry ul { margin: 6px 0 0; padding-left: 18px; }
.vf-log-entry li { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-bottom: 4px; }

.vf-sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-5); }

.vf-note { font-size: 11.5px; color: var(--muted); margin-top: var(--space-3); line-height: 1.55; }
details.vf-more > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 8px 0; list-style: none;
}
details.vf-more > summary::-webkit-details-marker { display: none; }
details.vf-more > summary::before { content: "▸ "; }
details.vf-more[open] > summary::before { content: "▾ "; }

@media (max-width: 860px) {
  .vf-score-grid { grid-template-columns: repeat(2, 1fr); }
  .vf-sources { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vf-score-grid { grid-template-columns: 1fr 1fr; }
  .vf-body, .vf-card > header, .vf-score { padding: var(--space-4); }
}

/* ============================================================
   COMPARISON SECTION (⚖️ Comparison nav group) — 27 Jul 2026
   Shared shell for the six "compare and save" tabs: Electricity,
   Health, Internet/NBN, Home Loans, Insurance, Credit Cards.
   Each had grown its own toolbar and its own set of coloured
   left-border cards (#1a7cc7, #1e9e5a, #c79a1a, var(--accent),
   var(--pos)/var(--neg) …), so the section read as six unrelated
   pages. One shell, one button hierarchy, one card, and the
   money answer promoted to a hero — because on these tabs the
   only question is "am I overpaying, and by how much?".
   Scoped to .cmp* so nothing outside the section is affected.
   ============================================================ */

/* ---- Sticky toolbar at the top of each comparison tab ---- */
.cmp-bar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.cmp-bar h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cmp-bar .spacer { flex: 1 1 auto; }
.cmp-bar label { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; }
.cmp-bar input { width: 88px; padding: 6px 8px; font-size: 13px; }

/* Two weights only: primary action, and everything else. */
.btn-secondary {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 6px; font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ---- The money answer, stated once, at full size ---- */
.cmp-hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap;
}
.cmp-hero.win  { border-left: 4px solid var(--accent-2); }
.cmp-hero.hold { border-left: 4px solid var(--accent); }
.cmp-hero-main { flex: 1 1 320px; min-width: 0; }
.cmp-hero .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.cmp-hero .headline { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.cmp-hero .figure {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  margin: var(--space-2) 0 2px;
}
.cmp-hero.win .figure { color: var(--pos); }
.cmp-hero .sub { font-size: 13px; color: var(--muted); line-height: 1.6; }
.cmp-hero-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }

/* ---- One card, no rainbow ---- */
.cmp-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
  font-size: 13px; line-height: 1.6;
}
.cmp-card > .t {
  font-weight: 700; font-size: 13.5px; margin-bottom: 5px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.cmp-card > .d { color: var(--muted); }
.cmp-card.good { border-left: 3px solid var(--accent-2); }
.cmp-card.warn { border-left: 3px solid var(--warn); }
.cmp-card.info { border-left: 3px solid var(--accent); }
.cmp-card details > summary {
  cursor: pointer; font-weight: 700; color: var(--accent); list-style: none;
}
.cmp-card details > summary::-webkit-details-marker { display: none; }
.cmp-card details > summary::before { content: "▸ "; }
.cmp-card details[open] > summary::before { content: "▾ "; }

/* ---- Result tables ---- */
/* .data-table is the app-wide alias — same rules, neutral name, so tabs
   outside the Comparison section (Funds, Shares, …) can use it too. */
.cmp-table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--space-3); }
.cmp-table th, .data-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; text-align: left;
  padding: 8px 10px; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.cmp-table td, .data-table td { padding: 9px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.cmp-table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }
.cmp-table .num, .data-table .num {
  text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.cmp-table tr.beats td, .data-table tr.beats td { background: rgba(18,161,80,.07); }
.cmp-table tr.beats .num, .data-table tr.beats .num { color: var(--pos); font-weight: 700; }
.cmp-table td.muted, .data-table td.muted { color: var(--muted); }

/* The embedded dashboards are themselves light-themed; the iframe carried a
   near-black placeholder colour that flashed on every load. */
.cmp-frame { width: 100%; border: none; display: block; background: var(--bg); }

@media (max-width: 640px) {
  .cmp-hero { padding: var(--space-4); gap: var(--space-4); }
  .cmp-hero .figure { font-size: 28px; }
  .cmp-hero-side { width: 100%; }
  .cmp-bar { padding: var(--space-3); }
}

/* ============================================================
   LAYOUT — 28 Jul 2026
   Brad's actual complaint after the whole colour pass: "you have
   made no changes to the layout." He was right. Every tab was a
   single 1040px column of stacked boxes, so on a normal monitor
   the app sat in a narrow strip with ~450px of dead grey down
   each side and everything read as one long vertical scroll.
   Recolouring boxes can't fix that — the shape was the problem.

   Three changes, in order of what you notice:
     1. the content column actually uses the screen
     2. cards flow into columns instead of stacking one-per-row
     3. prose stays at a readable measure so widening doesn't
        produce 200-character lines
   ============================================================ */

main {
  max-width: 1440px;          /* was 1040px */
  padding: var(--space-5) var(--space-6) 60px;
}

/* Long-form reading stays at a comfortable measure even though the
   container is now wide — widening a text column past ~80 characters
   makes it harder to read, not easier. */
.panel > p.muted,
.panel > p,
.ui-card > header p,
.cmp-hero .sub {
  max-width: 82ch;
}

/* ---- Card flow -------------------------------------------------
   The app's convention is a run of sibling .card elements directly
   inside a panel. Those now flow into columns on a wide screen
   instead of each taking a full 1440px row. Headings, alerts and
   anything explicitly full-width still span. --------------------- */
@media (min-width: 1100px) {
  .panel.active > .card,
  .panel.active > .ui-card,
  .panel.active > .cmp-card {
    break-inside: avoid;
    margin: 0 0 var(--space-4);
  }
  .cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .cards-2 > h2, .cards-2 > h3, .cards-3 > h2, .cards-3 > h3 { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  .cards-2, .cards-3 { display: block; }
}

/* Wide tabs that embed a full dashboard already break out of the
   container; keep them doing that at the new width. */
.panel.active > iframe.cmp-frame { max-width: none; }

/* Two-column working area: inputs on the left, results on the right,
   instead of results always pushed below the fold. */
.split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1099px) { .split { grid-template-columns: 1fr; } }

/* The tab strip is long; keep it reachable without scrolling back up. */
.tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--panel);
}

/* Card runs found by layout-columns.js — flow into columns instead of
   stacking one per row. minmax(0,1fr) rather than a fixed min so a long
   unbroken string can't blow the column out. */
@media (min-width: 1100px) {
  /* :not(.panel) is load-bearing. `.card-columns{display:grid}` and
     `.panel{display:none}` have the SAME specificity, and this rule comes
     later in the file — so when a PANEL was tagged as a card container it
     won the cascade and forced display:grid on tabs that were supposed to be
     hidden. Result: two panels on screen at once (Comparison Tools rendered
     Overview's content underneath it). Panels are handled by the
     `.panel.active.card-columns` rule further down instead. */
  .card-columns:not(.panel) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 0 var(--space-4);
    align-items: start;
  }
  .card-columns > .card,
  .card-columns > .ui-card,
  .card-columns > .cmp-card,
  .card-columns > .strat-card,
  .card-columns > .invest-card,
  .card-columns > .scenario-card { margin: 0 0 var(--space-4); min-width: 0; }
  /* anything that isn't a card (headings, notes, filters) spans the row */
  .card-columns > h2,
  .card-columns > h3,
  .card-columns > h4,
  .card-columns > p,
  .card-columns > .alert,
  .card-columns > details,
  .card-columns > .muted { grid-column: 1 / -1; }
}

/* Build stamp in the header — a one-glance check that the browser is showing
   the current files rather than a cached copy. */
.build-stamp {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Label/value pairs parsed out of the run-on WHAT:/WHO:/OUTCOME: strings. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 0; }
.kv dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); padding-top: 3px; white-space: nowrap;
}
.kv dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }
@media (max-width: 700px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ============================================================
   VISIBLE REDESIGN — 28 Jul 2026
   Brad, twice: "you have done nothing" / "it's also the layout
   and the colours".
   He was right, and the reason is a choice I made: when I fixed
   the palette for contrast I kept every HUE identical and only
   darkened it. Great for readability, literally invisible to the
   person looking at the screen. Same for consolidating components.
   So the app measured better and looked untouched.
   This section changes what you actually SEE, starting with the
   masthead and navigation — the part on screen before you scroll.
   ============================================================ */

/* ---- Masthead: a real brand bar instead of a thin white strip ---- */
header {
  background: linear-gradient(135deg, #2c2f6b 0%, #4f5bd5 55%, #5f6ae0 100%);
  border-bottom: none;
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 1px 0 rgba(20,25,40,.10);
}
header .brand h1 { color: #fff; font-size: 23px; letter-spacing: -0.02em; }
header .subtitle { color: rgba(255,255,255,.72); }
header .asat { color: rgba(255,255,255,.80); }
header .asat strong { color: #fff; }
.build-stamp {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ---- Navigation: one calm surface, clear active state ---- */
.nav-hero {
  background: var(--panel);
  padding: var(--space-4) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.hero-btn {
  border-radius: 10px;
  padding: 10px 15px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.hero-btn:hover { background: var(--panel-2); border-color: var(--border); color: var(--text); transform: none; }
.hero-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,91,213,.30);
}
.hero-btn.active::before { background: rgba(255,255,255,.85); }

.tabs {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6);
  gap: 2px;
}
.tab { padding: 12px 14px; font-size: 13.5px; border-bottom-width: 3px; }
.tab.active { background: var(--panel); }

/* ---- Page canvas: cards should sit ON something, not float in white ---- */
body { background: var(--bg); }
.card, .ui-card, .cmp-card, .strat-card, .invest-card, .scenario-card, .vf-card, .ctool {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,25,40,.04), 0 4px 14px rgba(20,25,40,.05);
}

/* ---- Panel headings: give each tab a real title block ---- */
.panel.active > h2 {
  font-size: 25px;
  letter-spacing: -0.02em;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--border);
}

/* ---- Depth pass ------------------------------------------------
   Brad: "the entire app is very light in colour". Correct — white
   cards (#ffffff) on a near-white canvas (#eef0f6) with a 1px
   hairline border. There was almost no tonal difference between a
   card and the page behind it, so everything floated and the whole
   thing read as washed out and insubstantial.
   Deepening the CANVAS rather than darkening the cards: the cards
   stay clean white and now actually stand off the page. --------- */
:root {
  --bg: #dfe3ee;            /* was #eef0f6 — too close to the white cards */
  --panel-2: #f2f4fa;
  --border: #c9cfe0;        /* was #d7dbe6 — hairlines were barely visible */
}

body { background: var(--bg); }

/* Cards now sit on the canvas with a real edge and a soft lift. */
.card, .ui-card, .cmp-card, .strat-card, .invest-card,
.scenario-card, .vf-card, .ctool, .cmp-hero, .vf-score {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(30,37,60,.05), 0 6px 16px rgba(30,37,60,.06);
}

/* The main content area reads as a sheet on the canvas. */
main { background: transparent; }

/* Inputs need to read as inputs against the lighter panel. */
input, select, textarea { background: #fff; border-color: var(--border); }

/* Section headings carry the accent so a tab has a visible identity. */
.panel.active > h2 { border-bottom-color: var(--accent); }

/* Anything sitting directly on the new dark masthead needs light text —
   the profile label was inheriting --text and went dark-on-dark. */
header, header label, header span, header div { color: rgba(255,255,255,.85); }
header select, header input, header button, header a { color: var(--text); }
header .primary, header button.primary { color: #fff; }

/* ============================================================
   READABILITY — 28 Jul 2026
   Brad: "comparison tab is terrible and so hard to read".
   Looking at it: paragraphs of 12–12.5px text running the full
   1400px width. A line that long is genuinely hard to track —
   your eye loses its place on the return sweep — and the type was
   sized for a 1040px column that no longer exists. Widening the
   app made this WORSE, so this is partly my doing.
   Fix: cap the measure, lift the size, open the leading.
   ============================================================ */

/* No line of prose gets longer than ~80 characters, wherever it lives. */
.cmp-card .d, .cmp-card p, .cmp-card li,
.ui-card .d, .ui-card p, .ui-card li,
.ui-row .d, .vf-row .d,
.cmp-hero .sub, .ctool-assump li, .card p, .card li,
.alert, .muted { max-width: 80ch; }

/* Dense info text was 11–12.5px. Too small at this width. */
.cmp-card, .cmp-card .d,
.ui-card .d, .ui-row .d, .vf-row .d { font-size: 13.5px; line-height: 1.65; }
.cmp-hero .sub { font-size: 13.5px; line-height: 1.7; }
.alert { font-size: 13.5px; line-height: 1.65; }
.card p, .card li { font-size: 14px; line-height: 1.65; }
.muted { font-size: 13.5px; line-height: 1.6; }

/* Card titles need to outrank their body text more clearly. */
.cmp-card > .t { font-size: 14.5px; margin-bottom: 7px; }

/* Embedded dashboards had their own inner scrollbar, so the page
   scrolled inside the page. Let the frame run to its natural height
   and use ONE scrollbar for the whole tab. */
.cmp-frame { min-height: 88vh; }

/* ---- Specificity fix -------------------------------------------
   When the PANEL itself is the container holding the cards (Overview,
   and several others), `.panel.active{display:block}` — two classes —
   out-specified `.card-columns{display:grid}` — one class — so the
   grid silently never applied and those tabs stayed single-column.
   ---------------------------------------------------------------- */
@media (min-width: 1100px) {
  .panel.active.card-columns { display: grid; }
}

/* ---- "Learn more" clamp (learn-more.js) ---- */
.lm { position: relative; }
.lm-body {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lm.is-open .lm-body { display: block; -webkit-line-clamp: unset; overflow: visible; }
.lm-btn {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lm-btn::after { content: "▾"; font-size: 10px; }
.lm.is-open .lm-btn::after { content: "▴"; }
.lm-btn:hover { text-decoration: underline; }

/* ---- Professional polish ------------------------------------
   Cards were a flat box with everything at one weight. Give them a
   proper title / body / action rhythm and a bit more room to breathe. */
.card { padding: 20px 22px; }
.card > h3, .card > h4 {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Buttons sitting at the bottom of a card read as a footer action row. */
.card > button, .card > a.btn-secondary, .card > .primary,
.ui-body > button, .ui-body > .primary {
  margin-top: var(--space-3);
}
button.primary, .btn-secondary { letter-spacing: -0.005em; }
button.primary { box-shadow: 0 1px 2px rgba(30,37,60,.10); }

/* Muted "meta" text top-right of a card (dates, counts) shouldn't
   compete with the title. */
.card .muted, .ui-card .muted { font-size: 12.5px; }