/* Bonker Banker: customer dashboard and runway report (ClaudeTwo).
   Builds on theme.css tokens, so it follows light/dark mode. */

.dash-lookup { display: flex; gap: 0.6rem; max-inline-size: 26rem; margin-bottom: 1.25rem; }
.dash-lookup .input { flex: 1; }
.link { color: var(--brand-strong); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ---------- Headline card ---------- */
.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}
.dash-runway { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-block: 0.25rem 0.75rem; }
.dash-runway .runway-big { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 800; line-height: 1; }
.dash-hero .verdict { padding: 0.7rem 0.9rem; border-radius: 0.75rem; max-inline-size: 38rem; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.dash-actions a { text-decoration: none; display: inline-block; }
.dash-hero-side { display: grid; gap: 1rem; justify-items: center; min-inline-size: 12rem; }
/* No cards inside cards: stats inside a card are plain text blocks */
.dash .stat, .dash-hero-side .stat { border: 0; background: none; box-shadow: none; padding: 0; }
.dash-hero-side .stat { inline-size: 100%; text-align: center; }
.dash .stat-value { font-variant-numeric: tabular-nums; }
.dash .stat-grid { gap: 1rem 1.5rem; }
.stat-value.good { color: var(--good); }
.stat-value.warn { color: var(--warn); }
.stat-value.bad  { color: var(--bad); }

/* ---------- Resilience score ring (SVG stroke, no gradients) ---------- */
.score-ring { position: relative; inline-size: 9rem; block-size: 9rem; --ring-color: var(--muted); }
.score-ring.good { --ring-color: var(--good); }
.score-ring.warn { --ring-color: var(--warn); }
.score-ring.bad  { --ring-color: var(--bad); }
.score-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 3; }
.score-track { stroke: var(--surface-2); }
.score-fill { stroke: var(--ring-color); stroke-linecap: round; }
.score-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-num { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.score-label { font-size: 0.8125rem; color: var(--muted); }
.our-measure { font-size: 0.8125rem; color: var(--muted); margin-top: -0.5rem; }

.score-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; }
.score-part-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; margin-bottom: 0.35rem; }
.bar { block-size: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--brand); }
.bar.peer > span { background: var(--ink); opacity: 0.55; }
.peer-row { margin-bottom: 1rem; }

/* ---------- Two-up grid ---------- */
.dash-grid > .card { margin: 0; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; }
.dash-grid .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-sm { height: 260px; }
.dash-details summary { cursor: pointer; margin: 0; }

@media (max-width: 760px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-lookup { max-inline-size: none; }
}

/* ---------- Runway Report (/report/<id>) ---------- */
.report {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.5rem); max-inline-size: 52rem; margin-inline: auto;
}
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: start;
               border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.report-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.report-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.report-tools a { text-decoration: none; }
.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; padding-block: 1.5rem; }
.report-big .runway-big { font-size: 2.75rem; font-weight: 800; line-height: 1.1; }
.report-section { border-top: 1px solid var(--border); padding-block: 1.25rem; }
.report-section .card-title { margin-bottom: 0.75rem; }
.table-wrap { overflow-x: auto; }
.report-table { inline-size: 100%; border-collapse: collapse; font-size: 0.92rem; }
.report-table th, .report-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.report-table tr > td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.report-scenarios tr > td:last-child { text-align: left; }
.report-table th { font-weight: 500; color: var(--muted); }
.report-table thead th { font-size: 0.8125rem; }
.report-list { list-style: disc; padding-inline-start: 1.25rem; margin-top: 0.75rem; display: grid; gap: 0.3rem; }
.report-foot { border-top: 1px solid var(--border); padding-top: 1rem; }

@media print {
  .nav, .no-print { display: none !important; }
  body { background: #fff; }
  main { padding: 0 !important; max-width: none !important; }
  .report { border: none; padding: 0; max-inline-size: none; }
  .report-section { break-inside: avoid; }
}

/* ---------- /plan result ---------- */
.plan-stack { display: grid; gap: 1.5rem; }
.plan-stack > .card { margin: 0; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.plan-lead { font-size: 1.05rem; margin-block: 0.25rem 1rem; }
.goal-bar .bar { block-size: 0.75rem; }
.goal-bar-legend { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted);
                   margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem 1.5rem; margin-top: 1rem; }
.plan-facts dt { font-size: 0.875rem; color: var(--muted); }
.plan-facts dd { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Runway card: "what changed" + worked formula (live twist) ---------- */
.explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem;
           border-block: 1px solid var(--border); padding-block: 1rem; margin-block: 1rem; }
.explain-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; }
.explain-list { list-style: disc; padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.explain-formula { font-variant-numeric: tabular-nums; line-height: 1.7; margin-bottom: 0.4rem; }

/* ---------- /sources ---------- */
.sources-list { list-style: decimal; padding-inline-start: 1.25rem; display: grid; gap: 1.25rem; margin-block: 1.5rem; }
.sources-name { font-size: 1.05rem; font-weight: 700; }
.sources-url { overflow-wrap: anywhere; }
.report-scenarios td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- /insights ---------- */
.insights { max-inline-size: 60rem; }
.insights-headline { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.2;
                     letter-spacing: -0.02em; margin-block: 0.5rem; max-inline-size: 48rem; }
.insights-subhead { font-size: 1.1rem; color: var(--muted); max-inline-size: 44rem; margin-bottom: 1rem; }
.insights-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem 2.5rem; }
.rate-table th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rate-cell { display: flex; align-items: center; gap: 0.6rem; min-inline-size: 10rem; }
.report-table tr > td.rate-cell:last-child { text-align: left; }
.hbar { flex: 1; block-size: 0.6rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; min-inline-size: 3rem; }
.hbar > span { display: block; block-size: 100%; background: var(--brand); border-radius: inherit; }
.num { font-variant-numeric: tabular-nums; }
.caveats { list-style: disc; padding-inline-start: 1.1rem; margin-top: 1rem; display: grid; gap: 0.25rem;
           font-size: 0.875rem; color: var(--muted); }
.signal-list, .stress-list { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.signal-list li { display: grid; grid-template-columns: 9rem 1fr 2.5rem; align-items: center; gap: 0.75rem; }
.stress-list li { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr 3.5rem 7rem; align-items: center; gap: 0.75rem; }
.stress-list li b, .signal-list li b { text-align: right; }
.stress-list li.is-today .hbar > span { background: var(--muted); }
@media (max-width: 640px) {
  .stress-list li { grid-template-columns: 1fr 3.5rem; }
  .stress-list li .hbar { grid-column: 1 / -1; grid-row: 2; }
  .stress-list li > .text-muted { display: none; }
  .signal-list li { grid-template-columns: 7.5rem 1fr 2.5rem; }
}

/* ---------- /demo walkthrough ---------- */
.demo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.demo-head .dash-lookup { margin: 0; }
.demo-steps { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; list-style: none; padding: 0; }
.demo-steps > li, .demo-steps > li.card { margin: 0; }
.demo-num { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; margin-right: 0.6rem;
            border: 1.5px solid var(--brand); color: var(--brand-strong); border-radius: 999px; font-size: 0.9rem; }
.demo-step-title { margin-bottom: 0.75rem; }
.demo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; }
.demo-facts > div { display: grid; gap: 0.15rem; font-variant-numeric: tabular-nums; }
.demo-facts b { font-size: 1.2rem; }
.demo-facts .demo-big { font-size: 2rem; line-height: 1.1; }
.demo-big small { font-size: 0.9rem; font-weight: 500; color: var(--muted); }

/* ---------- Home: one headline stat + three entry points ---------- */
.home-side { display: grid; gap: 1.5rem; }
.home-stat { display: grid; gap: 0.35rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius);
             background: var(--surface); text-decoration: none; color: inherit; }
.home-stat:hover { border-color: var(--brand); }
.home-stat-big { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; line-height: 1; color: var(--brand-strong);
                 font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.home-stat-text { font-size: 1.05rem; }
.home-stat-note { font-size: 0.875rem; color: var(--muted); }

/* ---------- Declutter helpers: one hero per page, the rest behind expanders ---------- */
.sample-badge { display: inline-block; font-size: 0.8125rem; color: var(--warn); border: 1px solid currentColor;
                border-radius: 0.4rem; padding: 0.05rem 0.45rem; margin-left: 0.5rem; vertical-align: middle; font-weight: 600; }
.more { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 1rem; }
.more > summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+ "; }
.more[open] > summary::before { content: "− "; }
.more > :not(summary) { margin-top: 1rem; }
.dash-verdict { font-size: 1.05rem; max-inline-size: 40rem; margin-bottom: 0.25rem; }
.dash-links { color: var(--muted); }
.dash-actions { align-items: center; }
.peer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.25rem 2.5rem; }

/* ---------- /insights (decluttered) ---------- */
.insights-page { display: grid; gap: 1.5rem; max-inline-size: 64rem; margin-inline: auto; }
.insights-page > .card { margin: 0; }
.insights-hero { display: grid; gap: 0.5rem; }
.insights-finding { font-size: 1.15rem; font-weight: 600; line-height: 1.45; max-inline-size: 48rem; }
.chart-heat { height: 300px; margin-top: 0.5rem; }
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem 2.5rem; }
.breakdown-list li { grid-template-columns: minmax(6rem, 9rem) 1fr 2.5rem; }
.report-table tr > td.why:last-child { text-align: left; font-variant-numeric: normal; }
.check-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin-top: 0.75rem; cursor: pointer; }
.check-row input { accent-color: var(--brand); inline-size: 1rem; block-size: 1rem; }
.lab-group.is-off .check-row { opacity: 0.4; }

/* ---------- /plan tabs ---------- */
.plan-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.plan-tab { padding: 0.6rem 1rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent;
            margin-bottom: -1px; background: none; cursor: pointer; }
.plan-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.plan-tab:hover { color: var(--ink); }

/* ---------- Saved scenarios ---------- */
.save-row { display: flex; gap: 0.5rem; margin-top: 1rem; }
.save-row .input { flex: 1; }
.saved-list { display: grid; gap: 0.5rem; }
.saved-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
                 padding-block: 0.4rem; border-bottom: 1px solid var(--border); }
.saved-list label { display: flex; gap: 0.6rem; align-items: baseline; cursor: pointer; flex-wrap: wrap; }
.saved-list input { accent-color: var(--brand); }
.link-btn { color: var(--brand-strong); font-weight: 600; background: none; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.compare-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col { border-top: 3px solid var(--border); padding-top: 1rem; display: grid; gap: 0.35rem; align-content: start; }
.compare-col .runway-big { font-size: 3rem; font-weight: 800; line-height: 1; margin-top: 0.5rem; }
.compare-verdict { margin-block: 0.5rem; }
.compare-facts { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; font-size: 0.9rem; margin-bottom: 0.5rem; }
.compare-facts > div { display: contents; }
.compare-facts dt { color: var(--muted); }
.compare-facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.compare-col > .text-muted { min-block-size: 2.6em; }
.peer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .peer-grid { grid-template-columns: 1fr; } }
.dash-sim { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.25rem; cursor: help; }