/* Personal Finance Canada — the component layer over the tl;dr design system.
 *
 * Every value here resolves to a token in /design/tokens. Nothing invents a
 * colour, a radius, a shadow or a font, and `npm test` greps this file to keep
 * that true rather than trusting anyone to remember — the portfolio forked the
 * tokens and drifted, one reasonable-looking line at a time, and this is the
 * guard against doing it again.
 *
 * The design system is built for tool shells: a nav rail, a dense grid, an
 * inspector. This is a public document instead — a top bar, a measure, prose —
 * so the vocabulary it does not ship is composed here out of what it does.
 */

/* Layout rails the system has no opinion about, because it has never had to
   set a reading measure. Dimensions only; every colour below is a token. */
:root{
  --page-max:1180px;
  --controls-w:298px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:var(--z-nav); height:var(--bar-top);
  display:flex; align-items:center; gap:var(--space-7);
  padding:0 var(--space-8);
  background:var(--surface-sunken);
  border-bottom:var(--border-hairline);
}
.bar-inner{
  display:flex; align-items:center; gap:var(--space-7);
  width:100%; max-width:var(--page-max); margin:0 auto;
}
/* The way back to the estate. Quieter than the brand beside it — it names
   where you came from, not where you are. */
.home-link{
  display:flex; align-items:center; gap:var(--space-3); flex:none;
  padding:var(--space-2) var(--space-4); margin-left:calc(var(--space-4) * -1);
  border-radius:var(--radius-2); border-bottom:0;
  color:var(--text-quaternary); font:var(--type-body-sm); white-space:nowrap;
  transition:var(--transition-control);
}
.home-link:hover{background:var(--surface-hover); color:var(--text-primary)}
.bar-sep{
  width:1px; height:var(--space-8); flex:none;
  background:var(--line-subtle);
}

.brand{
  display:flex; align-items:center; gap:var(--space-4);
  color:var(--text-primary); font:var(--type-subheading);
  white-space:nowrap; border-bottom:0;
}
.brand:hover{color:var(--text-primary)}
.mark{
  width:var(--space-9); height:var(--space-9); flex:none;
  border-radius:var(--radius-2); background:var(--graphite-750);
  display:grid; place-items:center;
  font:var(--fw-semibold) var(--fs-micro)/var(--lh-flat) var(--font-mono);
  color:var(--graphite-050); letter-spacing:var(--tracking-tighter);
}
.bar nav{display:flex; align-items:center; gap:var(--space-1); margin-left:var(--space-4)}
.bar nav a{
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-2);
  color:var(--text-tertiary); font:var(--type-body-sm);
  border-bottom:0; transition:var(--transition-control);
}
.bar nav a:hover{background:var(--surface-hover); color:var(--text-primary)}
.bar nav a.is-active{background:var(--surface-selected); color:var(--text-primary)}
.bar .spacer{flex:1}
.bar .who{
  display:flex; align-items:center; gap:var(--space-4);
  font:var(--type-numeric); color:var(--text-quaternary);
}
.bar .who b{color:var(--text-secondary); font-weight:var(--fw-medium)}

/* On a phone the bar has to give something up, and the wordmark is the right
   thing: the mark alone still identifies the site, while a three-line brand
   pushed the nav off the screen entirely. The nav scrolls rather than wraps,
   because a bar that changes height as you navigate is worse than one that
   scrolls sideways. */
@media (max-width:680px){
  .bar{padding:0 var(--space-6); gap:var(--space-4)}
  .bar-inner{gap:var(--space-4)}
  .brand .wordmark{display:none}
  .home-link span{display:none}
  .home-link{padding:var(--space-2)}
  .bar nav{margin-left:0; overflow-x:auto; scrollbar-width:none; flex:1}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{padding:var(--space-3) var(--space-4); white-space:nowrap}
  .bar .spacer,.bar .who{display:none}
}

/* ── Page frame ──────────────────────────────────────────────────────────── */

.page{max-width:var(--page-max); margin:0 auto; padding:var(--space-10) var(--space-8) var(--space-15)}
.page-head{margin-bottom:var(--space-9)}
.page-head h1{font:var(--type-title); letter-spacing:var(--tracking-tighter)}
.page-head .lede{
  margin-top:var(--space-4); color:var(--text-tertiary);
  font:var(--type-body); line-height:var(--lh-relaxed); max-width:var(--measure-prose);
}

.foot{
  border-top:var(--border-hairline); margin-top:var(--space-13); padding:var(--space-8);
  color:var(--text-quaternary); font:var(--type-caption); line-height:var(--lh-relaxed);
}
.foot-inner{max-width:var(--page-max); margin:0 auto; display:flex; gap:var(--space-9); flex-wrap:wrap}
.foot a{color:var(--text-tertiary)}

@media (max-width:680px){
  .page{padding:var(--space-8) var(--space-7) var(--space-13)}
  .page-head h1{font:var(--type-heading)}
}

/* ── Cards and notes ─────────────────────────────────────────────────────── */

.card{
  background:var(--surface-card); border:var(--border-hairline);
  border-radius:var(--radius-card); padding:var(--pad-card);
}

.note{
  border:var(--border-subtle); border-left:2px solid var(--line-accent);
  border-radius:var(--radius-2); padding:var(--space-5) var(--space-6);
  background:var(--surface-pane); color:var(--text-tertiary);
  font:var(--type-body-sm); line-height:var(--lh-relaxed);
}
.note.warn{border-left-color:var(--caution-400)}
.note.bad{border-left-color:var(--critical-400)}
.note b{color:var(--text-secondary); font-weight:var(--fw-medium)}
.note + .note{margin-top:var(--space-4)}

/* ── The calculator layout ───────────────────────────────────────────────── */

/* The inputs sit above the results, not beside them.
 *
 * They were a 298px rail holding all twenty-six fields, which treated the home
 * price and the renter's insurance as equally important and left the results in
 * a column too narrow for a twelve-column table. Above, the five that decide
 * the answer lead and the rest are one disclosure away — and the charts and
 * tables get the whole measure, which is what they needed. */
.calc{display:block}

.controls{margin-bottom:var(--space-8)}

/* ── The five that matter ────────────────────────────────────────────────── */

.lead-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-6); align-items:end;
  padding:var(--space-7); margin-bottom:var(--space-4);
  background:var(--surface-card); border:var(--border-hairline); border-radius:var(--radius-card);
}
.field-lead > label{font:var(--type-subheading); color:var(--text-primary)}
.field-lead .input{height:var(--ctl-h-lg)}
.field-lead .input input{font:var(--fw-regular) var(--fs-md)/var(--lh-flat) var(--font-mono)}
.lead-actions{display:flex; gap:var(--space-4); align-items:end; flex-wrap:wrap}
.lead-actions .btn{height:var(--ctl-h-lg)}
@media (max-width:680px){
  .lead-row{grid-template-columns:minmax(0,1fr); padding:var(--space-6)}
  .lead-actions{margin-top:var(--space-2)}
}

/* ── Everything else ─────────────────────────────────────────────────────── */

details.more{
  background:var(--surface-pane); border:var(--border-hairline); border-radius:var(--radius-card);
}
details.more > summary{
  display:flex; align-items:center; gap:var(--space-4); cursor:pointer;
  padding:var(--space-5) var(--space-7); list-style:none;
  font:var(--type-body-sm); color:var(--text-secondary);
  transition:var(--transition-control);
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary:hover{color:var(--text-primary); background:var(--surface-hover)}
/* A caret that turns, rather than a label that has to say "show" then "hide". */
details.more > summary::before{
  content:""; width:0; height:0; flex:none;
  border-left:5px solid var(--text-quaternary);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform var(--dur-fast) var(--ease-standard);
}
details.more[open] > summary::before{transform:rotate(90deg)}
.more-count{
  margin-left:auto; font:var(--type-numeric); color:var(--text-quaternary);
}
.more-body{padding:var(--space-2) var(--space-7) var(--space-7); border-top:var(--border-hairline)}

fieldset.group{border:0; margin:var(--space-7) 0 0; padding:0}
fieldset.group legend{
  font:var(--fw-semibold) var(--fs-micro)/var(--lh-flat) var(--font-sans);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-quaternary); width:100%;
  padding:0 0 var(--space-4); border-bottom:var(--border-hairline); margin-bottom:var(--space-6);
}
/* Related short numeric fields, two to four across. Single column is faster to
   complete in general; a row of two or three tightly related numbers is the
   documented exception, and "fee" beside "annual increase" is exactly that. */
.group-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-4) var(--space-6)}
.field{margin-bottom:var(--space-3)}
.field > label{
  display:flex; align-items:center; gap:var(--space-2);
  font:var(--type-body-sm); color:var(--text-secondary); margin-bottom:var(--space-2);
}
.field-check{display:flex; align-items:center; min-height:var(--ctl-h-md)}
.more-foot{
  display:flex; align-items:center; gap:var(--space-7); flex-wrap:wrap;
  margin-top:var(--space-8); padding-top:var(--space-6); border-top:var(--border-hairline);
}
.more-foot .hint{flex:1; min-width:240px; font:var(--type-caption); line-height:var(--lh-snug); color:var(--text-quaternary)}

/* ── Help, on demand ─────────────────────────────────────────────────────── */
/* It was a paragraph under every field: four lines of explanation times
   twenty-six inputs, and the guidance drowned the controls it was guiding.
   Hover is not the whole story — the trigger is a real button, so it also opens
   on keyboard focus, and a tap counts as focus, which is what makes it work on
   a phone. */

.help-wrap{position:relative; display:inline-flex; flex:none}
button.help{
  width:14px; height:14px; padding:0; flex:none;
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  background:none; color:var(--text-quaternary); cursor:help;
  font:var(--fw-semibold) 9px/1 var(--font-mono);
  display:grid; place-items:center; transition:var(--transition-control);
}
button.help:hover{border-color:var(--control-accent); color:var(--text-accent)}
.help-pop{
  position:absolute; left:50%; bottom:calc(100% + var(--space-3));
  transform:translateX(-50%);
  z-index:var(--z-popover); width:max-content; max-width:280px;
  padding:var(--space-5) var(--space-6);
  background:var(--surface-raised); border:var(--border-strong);
  border-radius:var(--radius-2); box-shadow:var(--shadow-popover);
  font:var(--type-caption); line-height:var(--lh-normal); color:var(--text-secondary);
  white-space:normal; text-transform:none; letter-spacing:normal;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard),visibility var(--dur-fast);
}
button.help:hover + .help-pop,
button.help:focus + .help-pop{opacity:1; visibility:visible}
/* Near the left edge the centred tooltip would hang off the page. */
.group-grid > .field:first-child .help-pop,
.lead-row > .field:first-child .help-pop{left:0; transform:none}

.input{
  display:flex; align-items:center; height:var(--ctl-h-md);
  background:var(--surface-input); border:var(--border-subtle);
  border-radius:var(--radius-control); overflow:hidden; transition:var(--transition-control);
}
.input:focus-within{border-color:var(--line-accent); box-shadow:var(--shadow-focus)}
.input .affix{
  flex:none; padding:0 var(--space-4); align-self:stretch; display:grid; place-items:center;
  font:var(--type-numeric); color:var(--text-quaternary); background:var(--control-fill);
}
.input .affix:first-child{border-right:var(--border-hairline)}
.input .affix:last-child{border-left:var(--border-hairline)}
.input input{
  flex:1; min-width:0; height:100%; padding:0 var(--space-4);
  background:none; border:0;
  font:var(--type-numeric); font-variant-numeric:tabular-nums;
}
.input input:focus{outline:none; box-shadow:none}
.input input::-webkit-outer-spin-button,
.input input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.input input[type=number]{-moz-appearance:textfield}

select.select{
  width:100%; height:var(--ctl-h-md); padding:0 var(--space-9) 0 var(--space-4);
  background:var(--surface-input); border:var(--border-subtle);
  border-radius:var(--radius-control); font:var(--type-body-sm);
  appearance:none; cursor:pointer;
  background-image:url("/caret.svg"); background-repeat:no-repeat;
  background-position:right var(--space-4) center;
}
select.select:focus{outline:none; border-color:var(--line-accent); box-shadow:var(--shadow-focus)}

.check{display:flex; align-items:center; gap:var(--space-4); cursor:pointer;
  font:var(--type-body-sm); color:var(--text-secondary)}
.check input{
  appearance:none; width:var(--space-7); height:var(--space-7); flex:none;
  border:var(--border-strong); border-radius:var(--radius-1);
  background:var(--surface-input); cursor:pointer; position:relative;
}
.check input:checked{background:var(--control-accent); border-color:var(--control-accent)}
.check input:checked::after{
  content:""; position:absolute; left:var(--space-2); top:var(--space-px);
  width:var(--space-2); height:var(--space-4);
  border:solid var(--control-accent-text); border-width:0 2px 2px 0; transform:rotate(42deg);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  height:var(--ctl-h-md); padding:0 var(--space-6);
  border:var(--border-subtle); border-radius:var(--radius-control);
  background:var(--control-fill); color:var(--text-secondary);
  font:var(--type-body-sm); cursor:pointer; white-space:nowrap;
  transition:var(--transition-control);
}
.btn:hover{background:var(--control-fill-hover); color:var(--text-primary)}
.btn.primary{
  background:var(--control-accent); border-color:var(--control-accent);
  color:var(--control-accent-text); font-weight:var(--fw-medium);
}
.btn.primary:hover{background:var(--control-accent-hover); border-color:var(--control-accent-hover)}
.btn.ghost{background:none}
.btn:disabled{opacity:.45; cursor:not-allowed}
a.btn{border-bottom:var(--border-subtle)}
a.btn.ghost{border-bottom:var(--border-subtle)}
a.btn.primary{border-bottom:1px solid var(--control-accent)}
.btn-row{display:flex; gap:var(--space-4); flex-wrap:wrap}

/* ── Results ─────────────────────────────────────────────────────────────── */

.verdict{
  border:var(--border-subtle); border-left:3px solid var(--line-accent);
  border-radius:var(--radius-card); padding:var(--space-7) var(--space-7);
  background:var(--surface-pane); color:var(--text-secondary);
  font:var(--type-body); line-height:var(--lh-relaxed); margin-bottom:var(--space-7);
}
.verdict b,.verdict strong{color:var(--text-primary); font-weight:var(--fw-semibold)}
.verdict.buy{border-left-color:var(--viz-1)}
.verdict.rent{border-left-color:var(--viz-6)}

/* A one-pixel hairline grid, made of the gap rather than of borders: the cells
   sit on a hairline-coloured ground and cover all but the seams. */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--space-px); background:var(--line-hairline);
  border:var(--border-hairline); border-radius:var(--radius-card);
  overflow:hidden; margin-bottom:var(--space-7);
}
.stat{background:var(--surface-card); padding:var(--space-6) var(--space-7)}
.stat .k{
  font:var(--fw-semibold) var(--fs-micro)/var(--lh-flat) var(--font-sans);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-quaternary); margin-bottom:var(--space-4);
}
.stat .v{
  font:var(--fw-light) var(--fs-xl)/var(--lh-tight) var(--font-mono);
  font-variant-numeric:tabular-nums; color:var(--text-primary);
}
.stat .v.sm{font-size:var(--fs-md)}
.stat .s{margin-top:var(--space-3); font:var(--type-caption); line-height:var(--lh-snug); color:var(--text-quaternary)}
.stat.good .v{color:var(--text-positive)}
.stat.bad .v{color:var(--text-critical)}
.stat.accent .v{color:var(--text-accent)}
@media (max-width:680px){.stats{grid-template-columns:minmax(0,1fr)}}

.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-7)}
/* Stacked until there is genuinely room for two: below this the columns are
   narrow enough that a chart's labels shrink past reading. */
@media (max-width:1100px){.grid2{grid-template-columns:minmax(0,1fr)}}

.chart-card{
  background:var(--surface-card); border:var(--border-hairline);
  border-radius:var(--radius-card); padding:var(--pad-card); margin-bottom:var(--space-7);
}
.chart-card h3{font:var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  color:var(--text-primary); margin-bottom:var(--space-1)}
.chart-card .sub{font:var(--type-caption); line-height:var(--lh-snug);
  color:var(--text-quaternary); margin-bottom:var(--space-6)}
.chart-wrap{position:relative}
/* The height is pinned and the width is fluid, so preserveAspectRatio="meet"
   scales the drawing to fit rather than stretching it. Without this a chart in
   a wide card scales up and takes its labels with it — see SIZES in
   lib/view/charts.js. */
.chart-wrap svg{display:block; width:100%; height:300px}
@media (max-width:680px){.chart-wrap svg{height:240px}}

.legend{display:flex; flex-wrap:wrap; gap:var(--space-7); margin-bottom:var(--space-4)}
.legend span{display:inline-flex; align-items:center; gap:var(--space-3);
  font:var(--type-caption); color:var(--text-tertiary)}
.legend i{width:var(--space-4); height:var(--space-4); border-radius:var(--radius-1); flex:none}

.tip{
  position:absolute; pointer-events:none; z-index:var(--z-popover);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-raised); border:var(--border-strong);
  border-radius:var(--radius-2); box-shadow:var(--shadow-popover);
  font:var(--type-numeric); line-height:var(--lh-normal);
  color:var(--text-primary); white-space:nowrap;
}
.tip .t{
  color:var(--text-quaternary); margin-bottom:var(--space-2);
  font:var(--fw-semibold) var(--fs-micro)/var(--lh-flat) var(--font-sans);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
}
.tip .r{display:flex; align-items:center; gap:var(--space-4); justify-content:space-between}
.tip .r i{width:var(--space-3); height:var(--space-3); border-radius:var(--radius-1); flex:none}
.tip .r span{color:var(--text-tertiary); display:inline-flex; align-items:center; gap:var(--space-3)}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs{
  display:flex; gap:var(--space-1); margin-bottom:var(--space-7);
  border-bottom:var(--border-hairline); overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  padding:var(--space-4) var(--space-6); background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--text-quaternary); font:var(--type-body-sm); cursor:pointer;
  white-space:nowrap; transition:var(--transition-control);
}
.tabs button:hover{color:var(--text-secondary)}
.tabs button.is-active{color:var(--text-primary); border-bottom-color:var(--control-accent)}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap{overflow-x:auto; max-width:100%; border:var(--border-hairline); border-radius:var(--radius-card)}
table{width:100%; border-collapse:collapse; font:var(--type-caption)}
thead th{
  position:sticky; top:0; z-index:var(--z-sticky); background:var(--surface-raised);
  padding:var(--space-4) var(--pad-cell-x); text-align:right; white-space:nowrap;
  font:var(--fw-semibold) var(--fs-micro)/var(--lh-snug) var(--font-sans);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-quaternary); border-bottom:var(--border-subtle);
}
thead th:first-child{text-align:left}
tbody td{
  padding:var(--pad-cell-y) var(--pad-cell-x); text-align:right; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  color:var(--text-secondary); border-bottom:var(--border-hairline);
}
tbody td:first-child{text-align:left; color:var(--text-tertiary)}
tbody tr:hover td{background:var(--surface-hover)}
tbody tr:last-child td{border-bottom:0}
td.pos{color:var(--text-positive)}
td.neg{color:var(--text-critical)}

/* Two kinds of highlighted row, and they must not share a class: one marks the
   year the answer changes sign, the other marks the option in use. Reusing the
   first for the second labelled every chosen payment schedule "crossover". */
tr.crossover td,tr.is-chosen td{background:var(--surface-selected)}
tr.crossover td:first-child::after,
tr.is-chosen td:first-child::after{
  color:var(--text-accent); font-family:var(--font-sans); font-size:var(--fs-micro);
}
tr.crossover td:first-child::after{content:" \2190 crossover"}
tr.is-chosen td:first-child::after{content:" \2190 yours"}

/* ── Home ────────────────────────────────────────────────────────────────── */

.hero{padding:var(--space-13) 0 var(--space-11); border-bottom:var(--border-hairline); margin-bottom:var(--space-10)}
.hero h1{
  font:var(--fw-regular) var(--fs-3xl)/var(--lh-tight) var(--font-sans);
  letter-spacing:var(--tracking-tighter); max-width:18ch;
}
.hero h1 em{font-style:normal; color:var(--text-accent)}
.hero p{
  margin-top:var(--space-7); max-width:60ch;
  font:var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-sans); color:var(--text-tertiary);
}
.hero .btn-row{margin-top:var(--space-9)}
@media (max-width:680px){
  .hero{padding:var(--space-10) 0 var(--space-9)}
  .hero h1{font-size:var(--fs-2xl)}
  .hero p{font-size:var(--fs-base)}
}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-7); margin-bottom:var(--space-11)}
.tile{
  display:block; background:var(--surface-card); border:var(--border-hairline);
  border-radius:var(--radius-card); padding:var(--space-8);
  color:inherit; border-bottom:var(--border-hairline);
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.tile:hover{border-color:var(--line-strong); background:var(--surface-raised); color:inherit}
.tile h3{font:var(--fw-medium) var(--fs-md)/var(--lh-snug) var(--font-sans);
  color:var(--text-primary); margin-bottom:var(--space-4); letter-spacing:var(--tracking-tight)}
.tile p{font:var(--type-body-sm); line-height:var(--lh-relaxed); color:var(--text-tertiary)}
.tile .more{margin-top:var(--space-7); font:var(--type-body-sm); color:var(--text-accent)}

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-px); background:var(--line-hairline);
  border:var(--border-hairline); border-radius:var(--radius-card);
  overflow:hidden; margin-bottom:var(--space-11);
}
.fact{background:var(--surface-card); padding:var(--space-7)}
.fact h4{font:var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-sans);
  color:var(--text-primary); margin-bottom:var(--space-3)}
.fact p{font:var(--type-body-sm); line-height:var(--lh-relaxed); color:var(--text-tertiary)}
.fact em{font-style:normal; color:var(--text-secondary)}

.section-title{font:var(--type-heading); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-7)}

/* ── Prose ───────────────────────────────────────────────────────────────── */

.prose{max-width:var(--measure-prose)}
.prose h2{font:var(--type-heading); letter-spacing:var(--tracking-tight); margin:var(--space-10) 0 var(--space-6)}
.prose h3{
  font:var(--fw-semibold) var(--fs-xs)/var(--lh-flat) var(--font-sans);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-quaternary); margin:var(--space-9) 0 var(--space-5);
}
.prose p{margin-bottom:var(--space-6); line-height:var(--lh-relaxed);
  color:var(--text-tertiary); font:var(--type-body-sm)}
.prose ul{margin:0 0 var(--space-6); padding-left:var(--space-8);
  color:var(--text-tertiary); font:var(--type-body-sm); line-height:var(--lh-relaxed)}
.prose li{margin-bottom:var(--space-2)}
.prose code{
  font:var(--type-code); background:var(--surface-raised);
  border:var(--border-hairline); border-radius:var(--radius-1);
  padding:var(--space-px) var(--space-2); color:var(--text-secondary);
}
.prose strong{color:var(--text-secondary); font-weight:var(--fw-semibold)}

pre.code{
  background:var(--surface-sunken); border:var(--border-hairline);
  border-radius:var(--radius-2); padding:var(--space-6) var(--space-7);
  overflow-x:auto; font:var(--type-code); color:var(--text-secondary);
  margin-bottom:var(--space-6);
}
.copy-row{display:flex; gap:var(--space-4); align-items:center; margin-bottom:var(--space-6)}
.copy-row input{
  flex:1; min-width:0; height:var(--ctl-h-md); padding:0 var(--space-4);
  background:var(--surface-sunken); border:var(--border-subtle);
  border-radius:var(--radius-control); font:var(--type-numeric); color:var(--text-secondary);
}

.token{
  display:block; padding:var(--space-5) var(--space-6);
  background:var(--surface-sunken); border:1px solid var(--caution-400);
  border-radius:var(--radius-2); font:var(--type-numeric); line-height:var(--lh-normal);
  color:var(--text-primary); word-break:break-all; margin-bottom:var(--space-5);
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.rows{border:var(--border-hairline); border-radius:var(--radius-card); overflow:hidden}
.row{
  display:flex; align-items:center; gap:var(--space-6);
  padding:var(--space-5) var(--space-7);
  background:var(--surface-card); border-bottom:var(--border-hairline);
}
.row:last-child{border-bottom:0}
.row .grow{flex:1; min-width:0}
.row .name{display:block; font:var(--type-body-sm); color:var(--text-primary)}
.row .meta{display:block; margin-top:var(--space-1);
  font:var(--fw-regular) var(--fs-2xs)/var(--lh-snug) var(--font-mono); color:var(--text-quaternary)}
.row .num{font:var(--type-numeric); font-variant-numeric:tabular-nums; color:var(--text-secondary)}
.empty{padding:var(--space-9) var(--space-7); text-align:center;
  color:var(--text-quaternary); font:var(--type-body-sm); background:var(--surface-card)}

.toast{
  position:fixed; left:50%; bottom:var(--space-9); transform:translateX(-50%);
  z-index:var(--z-toast); padding:var(--space-4) var(--space-7);
  background:var(--surface-raised); border:var(--border-strong);
  border-radius:var(--radius-2); box-shadow:var(--shadow-popover);
  font:var(--type-body-sm); color:var(--text-primary);
}

/* ── The consent screen ──────────────────────────────────────────────────── */

.consent{
  max-width:460px; margin:9vh auto; padding:var(--space-9);
  border:var(--border-subtle); border-radius:var(--radius-card); background:var(--surface-card);
}
.consent h1{font:var(--fw-medium) var(--fs-md)/var(--lh-snug) var(--font-sans); margin-bottom:var(--space-2)}
.consent .who{color:var(--text-tertiary); font:var(--type-body-sm); margin-bottom:var(--space-7)}
.consent ul{margin:0 0 var(--space-7); padding-left:var(--space-8);
  color:var(--text-secondary); font:var(--type-body-sm); line-height:var(--lh-relaxed)}
.consent .actions{display:flex; gap:var(--space-4); justify-content:flex-end; margin-top:var(--space-8)}