/* Results dashboard refresh (2026-09-25) — loaded last. The theme's rules are layered !important,
   so these overrides sit in the first-declared layer (compassNavTop), which wins. */
@layer compassNavTop {
  /* one card style: no colored top borders or tinted tiles on the bottom row */
  #resultsPanel .dash-card:has(#dashLowPoint),
  #resultsPanel .dash-card:has(#dashBadLuck),
  #resultsPanel .dash-card:has(#dashGoodLuck) { border-top:1px solid var(--c-gray-90) !important; background:rgba(var(--c-gray-99-rgb), 0.96) !important; }
  #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap,
  #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap,
  #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap { background:var(--compass-teal-soft, var(--c-gray-95)) !important; }
  #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg,
  #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg,
  #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg { stroke:var(--compass-teal, var(--c-teal-50)) !important; }
  #resultsPanel #dashLowPoint { color:var(--c-slate-30) !important; }
  #resultsPanel #dashYearsFunded { font-size:26px !important; line-height:1.15 !important; }

}
.dash-scope-note { margin-right:auto; font-size:12.5px; font-weight:600; color:var(--c-slate-45); }
@media (max-width:760px) { .dash-scope-note { flex-basis:100%; margin-right:0; } }
#resultsPanel div:has(> #dashScopeNote) { flex-wrap:wrap; }
/* "Active in your plan" panel (js/04): option name, then its summary */
@layer compassNavTop {
  #activePlanOptionsList .apo-label { display:block !important; font-size:13.5px !important; font-weight:750 !important; line-height:1.3 !important; color:var(--c-slate-30) !important; margin:0 0 2px !important; }
  #activePlanOptionsList .apo-sum { display:block !important; font-size:12.5px !important; font-weight:500 !important; line-height:1.45 !important; color:var(--c-slate-45) !important; }
}

/* "If markets fall early in retirement" (2026-10-02, js/13 renderDashDownturn) */
.dd-card { margin:14px 0 0; padding:16px 18px; border:1px solid var(--c-gray-90); border-radius:16px; background:var(--c-gray-99); }
.dd-card[hidden] { display:none; }
.dd-h { font-size:16px; font-weight:800; color:var(--c-slate-30); }
.dd-sub { margin:2px 0 10px; font-size:13px; color:var(--c-slate-50); }
.dd-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.dd-grid > div { padding:10px 12px; border-radius:12px; background:var(--c-gray-95); }
.dd-grid small { display:block; font-size:12px; line-height:1.3; color:var(--c-slate-50); }
.dd-grid b { display:block; margin-top:2px; font-size:20px; font-weight:800; color:var(--c-slate-30); font-variant-numeric:tabular-nums; }
.dd-grid b.dd-bad { color:var(--c-red-50b); }
.dd-note { margin:10px 0 0; padding:9px 12px; border-radius:10px; background:rgba(var(--c-orange-55-rgb), 0.1); font-size:13px; line-height:1.45; color:var(--c-slate-30); }
@media (max-width:700px){ .dd-grid { grid-template-columns:1fr 1fr; } .dd-card { padding:14px 14px; } }

/* The verdict (2026-10-02, js/13 renderDashVerdict): one sentence, the dot plot, three facts */
#resultsPanel .dash-banner { flex-wrap:wrap; }
.dv { flex:1 1 100%; min-width:0; } /* first in the banner since its verdict and gauge were removed (2026-10-10) */
.dv[hidden] { display:none; }
.dv-head { font-size:20px; font-weight:800; line-height:1.3; }
.dv-plot { display:block; max-width:520px; margin:10px 0 2px; }
.dv-key { margin:0; font-size:12.5px; opacity:.8; }
.dv-facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; max-width:640px; margin-top:12px; }
.dv-facts > div { padding:9px 11px; border-radius:12px; background:rgba(var(--c-shadow-rgb), 0.05); }
.dv-facts small { display:block; font-size:11.5px; line-height:1.3; opacity:.85; }
.dv-facts b { display:block; margin-top:2px; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.dv-facts b.dv-bad { color:var(--c-red-50b); }
@media (max-width:700px){ .dv-head { font-size:18px; } .dv-facts b { font-size:15px; } .dv-facts > div { padding:8px 9px; } }
.dv-plot.dv-plot-all { max-width:420px; } /* all 100 last: a short, wide block */

.dv-main { min-width:0; }

/* "What would help most" (2026-10-02, js/13 renderDashHelp) */
.dh-card { margin:14px 0; padding:16px 18px; border:1px solid var(--c-gray-90); border-radius:16px; background:var(--c-gray-99); }
.dh-h { font-size:16px; font-weight:800; color:var(--c-slate-30); }
.dh-sub { margin:3px 0 10px; font-size:13px; line-height:1.5; color:var(--c-slate-50); }
html body .dh-btn { display:block; width:100%; max-width:420px; min-height:46px; margin-top:6px; border:0; border-radius:12px; background:var(--c-teal-50); color:var(--c-gray-99); font:inherit; font-size:15px; font-weight:700; cursor:pointer; box-shadow:none; }
html body .dh-btn:disabled { opacity:.65; cursor:default; }
html body .dh-btn.dh-btn-2 { background:var(--c-gray-99); color:var(--c-teal-50); border:1px solid var(--c-teal-50); margin-top:12px; }
.dh-progress { margin:8px 0 0; font-size:12.5px; color:var(--c-slate-50); }
.dh-progress[hidden] { display:none; }
.dh-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--c-gray-95); }
.dh-row:first-of-type { border-top:0; }
.dh-t { flex:1; min-width:0; font-size:14.5px; font-weight:600; color:var(--c-slate-30); }
.dh-t small { display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--c-slate-50); }
.dh-r { flex:none; text-align:right; font-size:17px; font-weight:800; color:var(--c-teal-50); font-variant-numeric:tabular-nums; }
.dh-r small { display:block; font-size:11.5px; font-weight:600; color:var(--c-slate-60); }
/* What it would take (2026-10-03, js/13 dashNeedHtml): the change that is enough, above the smaller steps. */
.dh-need { margin:10px 0 4px; padding:4px 14px 10px; border:1px solid rgba(var(--c-teal-50-rgb),.35); border-radius:12px; background:rgba(var(--c-teal-50-rgb),.06); }
.dh-need-h { margin-top:10px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-teal-40); }
.dh-steps-h { margin-top:14px; color:var(--c-slate-50); }
.dh-need .dh-row:first-of-type, .dh-need-h + .dh-row { border-top:0; }
.dh-need-note { margin:6px 0 0; font-size:12px; line-height:1.45; color:var(--c-slate-50); }
.dh-need-run { margin:10px 0 4px; }
html body .dh-use { display:inline-block; margin-top:6px; padding:5px 12px; min-height:32px; border:1px solid var(--c-teal-50); border-radius:999px; background:transparent; color:var(--c-teal-50); font:inherit; font-size:13px; font-weight:700; cursor:pointer; box-shadow:none; }
.dh-applied { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 8px; padding:8px 12px; border-radius:10px; background:rgba(var(--c-teal-50-rgb),.08); font-size:13.5px; line-height:1.45; color:var(--c-slate-30); }
.dh-applied .dh-use { flex:none; margin:0; min-height:30px; padding:3px 12px; }
@media (max-width:700px){ .dh-card { padding:14px 14px; } html body .dh-btn { max-width:none; } }

/* Number cards on one row (2026-10-02, js/13 dashGridColumns): compact. In the themes' layers too, since their
   layered !important sizes outrank unlayered rules. */
  #resultsPanel .dash-grid.dash-grid-row .dash-card { padding:14px 14px 16px !important; min-height:0 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-iconwrap { display:none !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-head { gap:0 !important; margin-bottom:6px !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-label { font-size:12.5px !important; line-height:1.3 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-value { font-size:24px !important; line-height:1.15 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-sub { font-size:12.5px !important; line-height:1.45 !important; }
@layer compassAppRefresh {
  #resultsPanel .dash-grid.dash-grid-row .dash-card { padding:14px 14px 16px !important; min-height:0 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-iconwrap { display:none !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-head { gap:0 !important; margin-bottom:6px !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-label { font-size:12.5px !important; line-height:1.3 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-value { font-size:24px !important; line-height:1.15 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-sub { font-size:12.5px !important; line-height:1.45 !important; }
}
@layer rnCustomizer {
  #resultsPanel .dash-grid.dash-grid-row .dash-card { padding:14px 14px 16px !important; min-height:0 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-iconwrap { display:none !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-head { gap:0 !important; margin-bottom:6px !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-label { font-size:12.5px !important; line-height:1.3 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-value { font-size:24px !important; line-height:1.15 !important; }
  #resultsPanel .dash-grid.dash-grid-row .dash-card .dash-card-sub { font-size:12.5px !important; line-height:1.45 !important; }
}

/* Results page order (2026-10-02, js/13 arrangeResultsPage): Details, folded sections; the quick estimate as one line */
.rv-details { margin-top:22px; }
.rv-details-h { margin:0 2px 8px; font-size:15px; font-weight:800; color:var(--c-slate-30); }
details.rv-sec { margin:0 0 10px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); }
details.rv-sec > summary { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; list-style:none; font-size:15px; font-weight:700; color:var(--c-slate-30); }
details.rv-sec > summary::-webkit-details-marker { display:none; }
details.rv-sec > summary::after { content:'›'; font-size:22px; line-height:1; color:var(--c-slate-60); transition:transform .15s; }
details.rv-sec[open] > summary::after { transform:rotate(90deg); }
details.rv-sec > .rv-sec-body { padding:0 14px 14px; }
@media (max-width:700px){ details.rv-sec > .rv-sec-body { padding:0 8px 10px; } }
.qs-handoff.qs-folded { display:block; }
.qs-handoff.qs-folded:not(.qs-open) > :not(.qs-fold) { display:none !important; }
html body .qs-fold { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; padding:0; border:0; background:none; box-shadow:none; font:inherit; font-size:14px; color:var(--c-slate-30); text-align:left; cursor:pointer; min-height:0; }
.qs-handoff.qs-open .qs-fold { margin-bottom:10px; }
.qs-fold-ok { color:var(--c-teal-50); font-weight:600; }
.qs-fold-chev { flex:none; font-weight:700; color:var(--c-teal-50); }
/* inside Details: the year table's own Show/Hide buttons (opening the section shows the table) */
.rv-anchor { height:0; margin:0; padding:0; overflow:hidden; } /* where links to the year table and Saved scenarios land (index.html) */
details.rv-sec #yearByYearToggleBtn, details.rv-sec .yb-collapse { display:none !important; }
.dh-safe { margin:10px 0 0; font-size:13px; color:var(--c-slate-55b); } .dh-safe a { color:var(--c-teal-50); font-weight:700; }

/* Historical stress test chart (2026-10-03, js/10 histChart): 30 retirement years as lines + a bar per year that picks one. */
.hc { margin:4px 0 14px; }
.hc-cap { margin:10px 0 4px; font-size:12.5px; font-weight:600; color:var(--c-slate-45); }
.hc-svg { display:block; overflow:visible; }
.hc-ax { font-size:10.5px; fill:var(--c-slate-55); }
.hc-line { fill:none; stroke:var(--c-slate-75); stroke-width:1; opacity:.45; cursor:pointer; }
.hc-line.hc-fail { stroke:var(--c-red-55b); opacity:.35; }
.hc-line.is-on { stroke:var(--c-teal-50); stroke-width:3; opacity:1; }
.hc-line.hc-fail.is-on { stroke:var(--c-red-55b); }
.hc-bar { cursor:pointer; outline:none; }
.hc-hit { fill:transparent; }
.hc-col { fill:var(--c-teal-75); }
.hc-bar.hc-fail .hc-col { fill:var(--c-red-55b); }
.hc-bar.is-on .hc-col { fill:var(--c-teal-45); }
.hc-bar.hc-fail.is-on .hc-col { fill:var(--c-red-50b); }
.hc-bar.is-on .hc-hit, .hc-bar:focus-visible .hc-hit { fill:rgba(var(--c-teal-50-rgb), 0.10); }
.hc-detail { margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--c-gray-95); font-size:14px; line-height:1.55; color:var(--c-slate-30); }
.hc-note { display:block; margin-top:4px; font-size:12px; color:var(--c-slate-55); }
.hc-table { margin-top:12px; }
.hc-table > summary { cursor:pointer; font-size:13.5px; font-weight:700; color:var(--c-teal-50); }
html body .hist-bear { min-width:0; text-align:left; cursor:pointer; border:1px solid var(--c-gray-90); background:var(--c-gray-99); font:inherit; color:inherit; }
html body #histBearCards { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px !important; }
.hist-bear-t { font-size:11.5px; line-height:1.45; color:var(--muted); margin:4px 0 8px; }
.hist-bear-s { font-size:11px; color:var(--muted2); margin-top:4px; }
.hc-line.hc-part { stroke-dasharray:3 3; opacity:.3; }
.hc-bar.hc-part .hc-col { opacity:.45; }
.hc-partbg { fill:var(--c-gray-95); }
#histTable tr.hist-partial td { color:var(--c-slate-55); }
html body .hist-bear:hover { border-color:var(--c-teal-50); }
@media (max-width:700px){
  html body #histBearCards { gap:8px !important; }
  html body .hist-bear { padding:10px 11px !important; }
  html body .hist-bear .v { font-size:16px !important; line-height:1.25 !important; }
  html body .hist-bear .l { font-size:12px !important; }
  .hist-bear-t, .hist-bear-s { font-size:11px; }
}
/* Ways to improve (2026-10-04, index.html #improveCard, js/38): one card, two tabs — Make it last / Keep more — and
   Look closer. The card is the .dh-card; "What would help most" inside it loses its own card look. */
@layer compassNavTop {
  html body .ic #dashHelp.dh-card:not(#a11y-a) { margin:14px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
}
.ic-tabs { display:flex; gap:6px; margin:0 0 14px; padding:4px; border-radius:14px; background:var(--c-gray-95); }
.ic-tab { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:52px; padding:8px 10px; border:0; border-radius:10px; background:transparent; font:inherit; font-size:15px; font-weight:800; color:var(--c-slate-45); cursor:pointer; }
.ic-tab small { font-size:11.5px; font-weight:500; color:var(--c-slate-55); text-align:center; }
.ic-tab.is-on { background:var(--c-gray-99); color:var(--c-teal-40); box-shadow:0 1px 4px rgba(var(--c-shadow-rgb), 0.12); }
.ic-panel[hidden] { display:none !important; }
.ic-intro { margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--c-slate-45); }
details.ic-more { margin-top:14px; border-top:1px solid var(--c-gray-95); }
details.ic-more > summary { list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:12px 0 4px; cursor:pointer; font-size:14.5px; font-weight:800; color:var(--c-slate-30); }
details.ic-more > summary::-webkit-details-marker { display:none; }
details.ic-more > summary::after { content:'›'; margin-left:auto; font-size:20px; line-height:1; color:var(--c-slate-60); transition:transform .15s; }
details.ic-more[open] > summary::after { transform:rotate(90deg); }
details.ic-more > summary small { font-size:12px; font-weight:500; color:var(--c-slate-55); }
.ic-more-body > .plan-diagnostic { margin-top:12px !important; }
/* Earliest safe retirement age (js/38) */
.sa-box { padding:14px 16px; border:1px solid rgba(var(--c-teal-50-rgb), 0.35); border-radius:14px; background:rgba(var(--c-teal-50-rgb), 0.06); }
.sa-box[hidden] { display:none; }
.sa-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:10px 14px; }
.sa-k { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-teal-40); }
.sa-big { font-size:40px; font-weight:800; line-height:1.1; color:var(--c-slate-25); font-variant-numeric:tabular-nums; }
.sa-sub { margin-top:4px; font-size:13px; color:var(--c-slate-50); }
.sa-seg { display:inline-flex; padding:3px; border-radius:999px; background:var(--c-gray-95); }
.sa-t { min-height:34px; padding:4px 13px; border:0; border-radius:999px; background:transparent; font:inherit; font-size:13px; font-weight:700; color:var(--c-slate-45); cursor:pointer; }
.sa-t.is-on { background:var(--c-gray-99); color:var(--c-teal-40); box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), 0.14); }
.sa-line { margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--c-slate-30); }
.sa-line a { color:var(--c-teal-40); font-weight:700; }
.sa-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.sa-btn { min-height:40px; padding:8px 16px; border:0; border-radius:999px; background:var(--c-teal-50); color:var(--c-gray-99); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.sa-link { padding:0; border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; color:var(--c-teal-40); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.sa-note { margin-top:10px; padding:10px 12px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); font-size:13.5px; line-height:1.5; color:var(--c-slate-35); }
.sa-note.sa-warn { border-color:var(--c-amber-80); background:var(--c-amber-95); }
.sa-choice { margin:6px 0 0; padding-left:18px; } .sa-choice li { margin:4px 0; } .sa-q { margin:6px 0 0; }
.sa-foot { margin:10px 0 0; font-size:12px; color:var(--c-slate-55); }
@media (max-width:700px){ .ic-tab { font-size:14px; padding:8px 6px; } .sa-big { font-size:34px; } }
/* The selected tab's small line takes the tab's own ink (Dark and Dusk paint a selected tab teal with white type). */
.ic-tab[aria-selected="true"] small { color:inherit; }
/* Two answers side by side: the earliest safe age and the most you can spend safely (js/38 spendTile) */
.sa-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 22px; flex:1 1 360px; min-width:0; }
.sa-tile { min-width:0; }
.sa-big small { margin-left:2px; font-size:16px; font-weight:700; color:var(--c-slate-50); }
@media (max-width:520px){ .sa-tiles { grid-template-columns:1fr; } }
.sa-box a { color:var(--c-teal-40); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* Interactive savings chart (2026-10-04, js/39 Chart.js) */
.fcj { margin-top:2px; }
.fcj-canvas { position:relative; height:380px; touch-action:pan-y; }
.cfj-ms { margin:8px 0 0; }
.sq-cj { height:320px; }
.rc-cj { height:420px; }
@media (max-width:700px){ .rc-cj { height:380px; } }
.rcj { margin-bottom:18px; }
.rcy { margin-top:16px; padding-top:12px; border-top:1px solid var(--c-gray-90); }
.rcy[hidden] { display:none; }
.rcy-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.rcy-head strong { font-size:14px; color:var(--c-slate-25); }
/* the amount picker (selected = filled; in the themes' layer like .cfj-key, since themes paint aria-pressed buttons) */
.rcy-pick { display:flex; flex-wrap:wrap; gap:6px; }
@layer compassNavTop {
  :root .rcy-pick button.rcy-btn.rcy-btn { min-height:30px; padding:3px 12px; border:1px solid var(--c-gray-90) !important; border-radius:999px; background:var(--c-gray-99) !important; color:var(--c-slate-35) !important; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:none !important; }
  :root .rcy-pick button.rcy-btn.rcy-btn.is-on { background:var(--c-teal-50) !important; border-color:var(--c-teal-50) !important; color:var(--c-gray-99) !important; }
}
.rcy-sum { margin:8px 0 6px; font-size:13px; line-height:1.5; color:var(--c-slate-35); }
.rcy-cj { height:380px; }
@media (max-width:700px){ .rcy-cj { height:340px; } }
@media (max-width:700px){ .sq-cj { height:280px; } }
.gr-rings { margin-top:6px; font-size:11.5px; color:var(--c-slate-45); gap:4px 14px; }
.gr-rings span { display:inline-flex; align-items:center; gap:6px; }
.gr-ring { width:10px; height:10px; border-radius:50%; border:2px solid; box-sizing:border-box; background:var(--c-gray-99); }
.gr-ring-raise { border-color:var(--c-green-75); } .gr-ring-cut { border-color:var(--c-red-55b); } .gr-ring-late { border-color:var(--c-slate-55b); }
#grYearsBody tr.gr-pick td { background:rgba(var(--c-blue-55-rgb), 0.1); }
.fcj-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:6px; }
.fcj-hint { flex:1 1 220px; font-size:12px; color:var(--c-slate-55); }
.fcj-btn { min-height:32px; padding:4px 12px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); font:inherit; font-size:12.5px; font-weight:700; color:var(--c-teal-40); cursor:pointer; }
.fcj-btn[hidden] { display:none; }
.fcj-btn:disabled { opacity:.45; cursor:default; }
.fcj-table[hidden] { display:none; }
.fcj-table { margin-top:8px; overflow-x:auto; }
.fcj-table table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.fcj-table caption { text-align:left; padding:4px 0 6px; font-size:12px; color:var(--c-slate-55); }
.fcj-table th, .fcj-table td { padding:5px 8px; border-bottom:1px solid var(--c-gray-95); text-align:right; color:var(--c-slate-30); }
.fcj-table th:first-child { text-align:left; }
.fcj-table thead th { font-size:11.5px; font-weight:800; color:var(--c-slate-55); }
@media (max-width:700px){ .fcj-canvas { height:300px; } }
.cfj-keys { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; width:100%; }
.cfj-keys strong { margin-right:4px; font-size:12px; color:var(--c-slate-30); }
.cfj-key { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 9px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); font:inherit; font-size:11.5px; color:var(--c-slate-35); cursor:pointer; }
.cfj-key[aria-pressed="false"] { color:var(--c-slate-65b); text-decoration:line-through; background:transparent; }
.cfj-key[aria-pressed="false"] .cfj-sw { opacity:.3; }
/* styles.css paints every button[aria-pressed="true"] as a filled choice (!important); these are toggles in a legend. */
/* In the themes' layer (compass-themes.css loads in layer compassNavTop, and a layered !important beats an unlayered one). */
@layer compassNavTop {
  :root .cfj-keys button.cfj-key.cfj-key[aria-pressed] { background:var(--c-gray-99) !important; color:var(--c-slate-35) !important; border-color:var(--c-gray-90) !important; box-shadow:none !important; }
  :root .cfj-keys button.cfj-key.cfj-key[aria-pressed="false"] { background:transparent !important; color:var(--c-slate-65b) !important; }
  :root .cfj-keys button.cfj-key.cfj-key[aria-pressed] * { color:inherit !important; } /* styles.css paints a pressed button's children white */
  :root .cfj-keys button.cfj-key.cfj-key .sc-all-tag { color:var(--c-slate-55) !important; }
}
.cfj-sw { width:10px; height:10px; border-radius:2px; flex:none; }
.cfj-key.is-short .cfj-sw { background:rgba(var(--c-red-55b-rgb), 0.14) !important; border:1.5px dashed var(--c-red-55b); }

/* Where your result comes from (js/43, 2026-10-05), in place of the dot plot. */
/* 2026-10-05 tidy: a card of its own with the same space on both sides, the icons in small round badges, a line
   between rows, and balanced line breaks so no line ends with one stray word. */
.dx { display:flex; flex-direction:column; margin-top:6px; padding:14px 18px 6px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); text-align:left; }
.dx-h { font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--c-slate-50); padding-bottom:8px; }
.dx-h span { font-weight:500; color:var(--c-slate-60); }
.dx-dot { font-style:normal; }
.dx-row { display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:start; padding:11px 0; border-top:1px solid var(--c-gray-90); }
.dx-row p { margin:0; font-size:14.5px; line-height:1.55; color:var(--c-slate-25); text-wrap:pretty; hyphens:manual; }
.dx-row p b { font-weight:750; }
.dx-row a { color:var(--c-teal-50); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.dx-ic { width:28px; height:28px; padding:5px; box-sizing:border-box; border-radius:50%; margin-top:-2px; color:var(--c-teal-50); background:rgba(var(--c-teal-50-rgb), 0.10); }
.dx-risk .dx-ic { color:var(--c-amber-50); background:rgba(var(--c-amber-50-rgb), 0.14); }
@media (max-width:700px){
  .dx { padding:12px 14px 4px; }
  .dx-row { grid-template-columns:26px 1fr; column-gap:10px; padding:10px 0; }
  .dx-ic { width:26px; height:26px; padding:4px; }
  .dx-row p { font-size:14px; }
  .dx-h span { display:block; font-size:12px; margin-top:1px; }
  .dx-dot { display:none; }
}
/* "Try it" on each tested change (js/13 dashTryTested, 2026-10-05) */
html body .dh-row .dh-try { flex:none; margin:0; }
/* 2026-10-05: inside the result banner, themes that colour the banner (Minimal, Bold: white; Dusk: dark) painted
   this card's text the same colour as the card — found by tests/visual-run.js. The card keeps its own colours.
   In compassNavTop (declared first in index.html, so the strongest layer for !important — where the theme rules
   live), with a more specific selector than theirs. */
@layer compassNavTop {
  html:root #resultsPanel .dash-banner .dx { color:var(--c-slate-25) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-h { color:var(--c-slate-50) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-h span { color:var(--c-slate-60) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-row p, html:root #resultsPanel .dash-banner .dx .dx-row p b { color:var(--c-slate-25) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-row a { color:var(--c-teal-50) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-ic { color:var(--c-teal-50) !important; }
  html:root #resultsPanel .dash-banner .dx .dx-risk .dx-ic { color:var(--c-amber-50) !important; }
}
/* The card a dashboard button took you to, marked for a moment (2026-10-11) */
@keyframes dzFlash { 0%, 60% { box-shadow:0 0 0 3px var(--c-blue-50); } 100% { box-shadow:0 0 0 3px transparent; } }
.dz-flash { animation:dzFlash 2s ease-out 1; border-radius:14px; }

/* 2026-10-12: history's return vs the forecast's, under the summary cards */
.hist-vs { font-size:12.5px; line-height:1.5; color:var(--muted); margin:10px 0 4px; }