/* ═══════════════════════════════════════════════════════════════════════════
   Morning Briefing — components built on the Bürgenstock token system.
   Rules honoured:
     1  taupe is a mark, never text, never data
     2  navy is reserved for the year-over-year series — unused here on purpose
     3  pastel accents always tint+tone as a pair
     4  Lora capped at 4 uses per screen (page title + up to 3 figures)
     5  no drop shadows — depth is a surface change plus a hairline
     letter-spacing is 0 everywhere except eyebrow labels
   ═══════════════════════════════════════════════════════════════════════════ */

/* Night Audit = the sanctioned inverse ground (ink), NOT a blue theme.
   Only the semantic layer flips; the palette itself is untouched. */
:root[data-mode="night"]{
  --surface-page:    #1D1D1F;
  --surface-raised:  #26262A;
  --surface-sunken:  #17171A;
  --text-primary:    #F1F0EB;
  --text-secondary:  rgb(241 240 235 / .68);
  --text-tertiary:   rgb(241 240 235 / .45);
  --border-subtle:   rgb(241 240 235 / .16);
  --border-strong:   rgb(241 240 235 / .30);
  --border-focus:    #F1F0EB;
}

/* Status pairs: tint fills and tone writes on the light ground; on the inverse
   ground the pair swaps so the tone never has to carry text on ink. */
:root{
  --ok-bg:var(--accent-sage-tint);   --ok-fg:var(--accent-sage-tone);
  --pd-bg:var(--accent-amber-tint);  --pd-fg:var(--accent-amber-tone);
  --ms-bg:var(--accent-clay-tint);   --ms-fg:var(--accent-clay-tone);
  --nf-bg:var(--accent-slate-tint);  --nf-fg:var(--accent-slate-tone);
}
:root[data-mode="night"]{
  --ok-bg:rgb(70 108 61 / .34);   --ok-fg:var(--accent-sage-tint);
  --pd-bg:rgb(121 87 42 / .38);   --pd-fg:var(--accent-amber-tint);
  --ms-bg:rgb(138 72 56 / .34);   --ms-fg:var(--accent-clay-tint);
  --nf-bg:rgb(85 95 109 / .34);   --nf-fg:var(--accent-slate-tint);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-body);
  font-weight:var(--weight-regular); line-height:var(--leading-normal);
  letter-spacing:0; -webkit-font-smoothing:antialiased;
  transition:background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
}
.hide{display:none !important}
.eyebrow{
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold);
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-secondary);
}
.serif{font-family:var(--font-display); font-weight:var(--weight-regular); letter-spacing:0}

/* ── Login ─────────────────────────────────────────────────────────────── */
#login{min-height:100vh; display:grid; place-items:center; padding:var(--space-6);
  background:var(--surface-page)}
.card{
  width:100%; max-width:400px; background:var(--surface-raised);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:var(--space-12) var(--space-8);
}
.crest{
  width:34px; height:34px; border:1px solid var(--accent-quiet); border-radius:var(--radius-sm);
  display:grid; place-items:center; font-family:var(--font-sans);
  font-weight:var(--weight-semibold); font-size:.6875rem; letter-spacing:.09em;
  color:var(--text-primary); margin-bottom:var(--space-6);
}
.card h1{
  font-family:var(--font-display); font-weight:var(--weight-regular);
  font-size:var(--text-section); line-height:var(--leading-snug); margin:0 0 var(--space-1);
}
.card .sub{margin:0 0 var(--space-8); color:var(--text-secondary); font-size:var(--text-body)}
.field{margin-bottom:var(--space-4)}
label{display:block; margin-bottom:var(--space-2);
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold);
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-secondary)}
input{
  width:100%; padding:.625rem .75rem; font-family:inherit; font-size:var(--text-body);
  color:var(--text-primary); background:var(--surface-page);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
input:focus{outline:2px solid var(--border-focus); outline-offset:-1px; border-color:transparent}
.btn{
  font-family:inherit; font-size:var(--text-body); font-weight:var(--weight-medium);
  padding:.625rem 1rem; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface-inverse); color:var(--text-inverse); border:1px solid var(--surface-inverse);
  transition:opacity var(--duration-fast) var(--ease-standard);
}
:root[data-mode="night"] .btn{background:var(--color-creme); color:var(--color-ink); border-color:var(--color-creme)}
.btn:hover:not(:disabled){opacity:.86}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-block{width:100%}
.btn-quiet{
  background:transparent; color:var(--text-secondary); border:1px solid var(--border-subtle);
}
.btn-quiet:hover{background:var(--surface-sunken); color:var(--text-primary)}
:root[data-mode="night"] .btn-quiet{background:transparent; color:var(--text-secondary); border-color:var(--border-subtle)}
.msg{margin-top:var(--space-4); padding:.625rem .75rem; border-radius:var(--radius-sm);
  font-size:var(--text-body); display:none}
.msg.err{display:block; background:var(--ms-bg); color:var(--ms-fg)}

/* ── Header ────────────────────────────────────────────────────────────── */
header{
  display:flex; align-items:center; gap:var(--space-4);
  height:60px; padding:0 var(--space-6);
  background:var(--surface-raised); border-bottom:1px solid var(--border-subtle);
  position:sticky; top:0; z-index:5;
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.logo{display:flex; align-items:center; gap:var(--space-3); white-space:nowrap}
.logo .crest{width:28px; height:28px; margin:0; font-size:.6875rem}
.logo b{font-weight:var(--weight-medium); font-size:.875rem}
.logo small{display:block; font-size:var(--text-eyebrow); color:var(--text-secondary);
  letter-spacing:.09em; text-transform:uppercase; font-weight:var(--weight-medium)}
.spacer{flex:1}
.clock{font-size:var(--text-body); color:var(--text-secondary); white-space:nowrap;
  font-variant-numeric:tabular-nums}

.modesw{display:flex; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden}
.modesw button{
  font-family:inherit; font-size:var(--text-body); font-weight:var(--weight-medium);
  padding:.4375rem .75rem; border:0; cursor:pointer; letter-spacing:0;
  background:transparent; color:var(--text-secondary);
  transition:background var(--duration-fast) var(--ease-standard);
}
.modesw button + button{border-left:1px solid var(--border-subtle)}
.modesw button:hover{background:var(--surface-sunken)}
.modesw button.on{background:var(--surface-sunken); color:var(--text-primary); font-weight:var(--weight-semibold);
  box-shadow:inset 0 -2px 0 var(--accent-quiet)}   /* taupe as an active-state mark */
.badge{
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold); letter-spacing:.09em;
  text-transform:uppercase; padding:.25rem .5rem; border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle); background:transparent; color:var(--text-secondary);
  cursor:pointer; white-space:nowrap; font-family:inherit;
}
.badge.manual{border-color:var(--accent-quiet); color:var(--text-primary)}
.mono{font-family:var(--font-mono); font-size:.75rem}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.body{display:grid; grid-template-columns:340px 1fr; flex:1 1 auto; min-height:0}
nav{
  background:var(--surface-page); border-right:1px solid var(--border-subtle);
  padding:var(--space-4) var(--space-3);
  transition:background var(--duration-base) var(--ease-standard)
}
.navhead{padding:var(--space-3) var(--space-3) var(--space-2); display:flex; gap:var(--space-3)}
.navhead span{cursor:pointer; color:var(--text-tertiary)}
.navhead span.on{color:var(--text-primary); border-bottom:1px solid var(--accent-quiet); padding-bottom:2px}
nav a{
  display:flex; align-items:center; gap:var(--space-3); cursor:pointer;
  padding:var(--space-3); margin-bottom:var(--space-1);
  border-radius:var(--radius-sm);
  color:var(--text-secondary); text-decoration:none;
  font-size:var(--text-body-lg); line-height:var(--leading-snug);
  border-left:2px solid transparent;
  min-height:44px;                    /* comfortable touch/click target */
}
nav a:hover{background:var(--surface-sunken); color:var(--text-primary)}
nav a.on{background:var(--surface-sunken); color:var(--text-primary);
  font-weight:var(--weight-medium); border-left-color:var(--accent-quiet)}
nav a{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

main{padding:var(--space-8) var(--space-8); max-width:var(--layout-max-width)}
.crumb{color:var(--text-secondary); margin-bottom:var(--space-2)}
h2{
  font-family:var(--font-display); font-weight:var(--weight-regular);
  font-size:var(--text-title); line-height:var(--leading-tight);
  letter-spacing:0; margin:0 0 var(--space-3);
}
.lede{margin:0 0 var(--space-8); color:var(--text-secondary); max-width:var(--layout-measure)}

/* ── Cards, tiles, tables — depth by surface + hairline, never shadow ──── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--space-4); margin-bottom:var(--space-8)}
.tile,.panel,.prog{
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.tile{padding:var(--space-4) var(--space-4)}
.tile .v{
  font-family:var(--font-display); font-weight:var(--weight-regular);
  font-size:var(--text-figure); line-height:var(--leading-tight);
  margin:var(--space-3) 0 var(--space-1); font-variant-numeric:tabular-nums;
}
.tile .d{color:var(--text-secondary); font-size:var(--text-body)}
.panel{padding:var(--space-12); text-align:center; color:var(--text-secondary)}
.panel h3{font-size:var(--text-body-lg); font-weight:var(--weight-medium);
  color:var(--text-primary); margin:0 0 var(--space-2)}
.panel p{margin:0 auto; max-width:var(--layout-measure)}
.srcnote{margin-top:var(--space-6); color:var(--text-tertiary); font-size:var(--text-eyebrow);
  display:flex; align-items:center; gap:var(--space-2); letter-spacing:.09em; text-transform:uppercase}
.mark{width:5px; height:5px; background:var(--accent-quiet); flex:none}  /* taupe as a mark */

/* progress */
.prog{padding:var(--space-4) var(--space-6); margin-bottom:var(--space-6)}
.prog .top{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-3); flex-wrap:wrap}
.prog .top .c{color:var(--text-secondary); font-variant-numeric:tabular-nums}
.bar{height:6px; background:var(--surface-sunken); display:flex; overflow:hidden;
  border-radius:var(--radius-sm); border:1px solid var(--border-subtle)}
.bar i{height:100%; transition:width var(--duration-base) var(--ease-standard)}
.legend{display:flex; gap:var(--space-6); margin-top:var(--space-3); flex-wrap:wrap;
  color:var(--text-secondary); font-size:var(--text-eyebrow);
  letter-spacing:.09em; text-transform:uppercase}
.legend i{width:8px; height:8px; display:inline-block; margin-right:var(--space-2)}

table{width:100%; border-collapse:collapse; background:var(--surface-raised);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden}
th{
  text-align:left; padding:.625rem var(--space-4); background:var(--surface-sunken);
  border-bottom:1px solid var(--border-subtle); color:var(--text-secondary);
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold);
  letter-spacing:.09em; text-transform:uppercase;
}
td{padding:.625rem var(--space-4); border-bottom:1px solid var(--border-subtle); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.q{color:var(--text-secondary)}
.st{display:inline-block; padding:.1875rem .5rem; border-radius:var(--radius-sm);
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold); letter-spacing:.09em;
  text-transform:uppercase; white-space:nowrap}
.st.up{background:var(--ok-bg); color:var(--ok-fg)}
.st.pd{background:var(--pd-bg); color:var(--pd-fg)}
.st.ms{background:var(--ms-bg); color:var(--ms-fg)}
.act{font-family:inherit; font-size:var(--text-eyebrow); font-weight:var(--weight-medium);
  letter-spacing:.09em; text-transform:uppercase; padding:.25rem .5rem; cursor:pointer;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm)}
.act:hover{background:var(--surface-sunken); color:var(--text-primary)}

@media(max-width:900px){
  .body{grid-template-columns:1fr}
  nav{display:none}
  .clock{display:none}
  main{padding:var(--space-6) var(--space-4)}
}

/* ── Icons ──────────────────────────────────────────────────────────────
   Stroke-only, inherit colour and optical weight from their context.
   Hard rule: no emoji anywhere in the interface. */
.ico{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;   /* Lucide 24-grid -> ~1.17px at 16px */
  stroke-linecap:round; stroke-linejoin:round;
}
.modesw button .ico,
.btn .ico{margin-right:.4375rem; vertical-align:-3px}
nav a .ico{stroke:var(--text-tertiary)}
nav a.on .ico{stroke:var(--accent-quiet)}  /* taupe as an active mark, never as text */
.modesw button{display:inline-flex; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center}
.btn-block{width:100%}

/* ── Brand wordmark ─────────────────────────────────────────────────────
   Two polarities of the same mark; the ground decides which shows. */
.wm{display:block; height:20px; width:auto}
.card .wm{height:26px; margin-bottom:var(--space-6)}
.wm-neg{display:none}
:root[data-mode="night"] .wm-pos{display:none}
:root[data-mode="night"] .wm-neg{display:block}
.vr{width:1px; height:22px; background:var(--border-subtle); flex:none}
.logo{gap:var(--space-4)}


/* ── Navigation surface ─────────────────────────────────────────────────
   #283153 is a client request and is NOT part of the token set — see
   docs/02-design-system.md. Promote it into tokens.json if it stays. */
:root{ --surface-nav:#283153; --on-nav:#F1F0EB; }
nav{
  background:var(--surface-nav);
  border-right-color:rgb(241 240 235 / .14);
}
nav a{color:rgb(241 240 235 / .74)}
nav a:hover{background:rgb(241 240 235 / .07); color:var(--on-nav)}
nav a.on{background:rgb(241 240 235 / .11); color:var(--on-nav);
  border-left-color:var(--accent-quiet)}
nav a .ico{stroke:rgb(241 240 235 / .55)}
nav a.on .ico{stroke:var(--accent-quiet)}
.navhead{color:rgb(241 240 235 / .55)}
.navhead span{color:rgb(241 240 235 / .55)}
.navhead span.on{color:var(--on-nav); border-bottom-color:var(--accent-quiet)}

/* ── Navigation layout: scrolling list, hero pinned to the bottom ───────── */
:root{ --surface-nav-rgb:40 49 83; }        /* #283153 as channels, for gradients */
nav{
  display:flex; flex-direction:column;
  padding:var(--space-4) var(--space-3) 0;
  overflow:hidden; min-height:0;      /* grid items default to min-height:auto */
}
#navlist{flex:1 1 auto; overflow-y:auto; min-height:0; scrollbar-width:thin}
.navhead{padding:var(--space-3) var(--space-3) var(--space-4)}


/* ── Shell height: header + weather band + body, body takes the remainder,
   so the nav hero pins to the bottom of the viewport and each column
   scrolls on its own rather than the whole page. ─────────────────────── */
#app{height:100vh; overflow:hidden; display:flex; flex-direction:column}
main{overflow-y:auto; min-height:0}


/* ── User block, pinned to the bottom of the navbar ─────────────────────
   Sits outside #navlist so it never scrolls with the section list. */
.nav-user{
  flex:0 0 auto;
  margin:0 calc(var(--space-3) * -1);
  padding:var(--space-4);
  border-top:1px solid rgb(241 240 235 / .14);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.nav-user-mail{
  color:rgb(241 240 235 / .72); font-size:.75rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nav-user .btn{
  width:100%; background:transparent; color:rgb(241 240 235 / .88);
  border:1px solid rgb(241 240 235 / .24);
}
.nav-user .btn:hover{background:rgb(241 240 235 / .09); color:var(--on-nav); opacity:1}
.nav-user .btn .ico{stroke:currentColor}

/* ── Weather band — now, then the next three 3-hour blocks ──────────────
   MeteoSwiss symbols carry the colour; the band stays on the lake
   tint/tone pair the system reserves for information. */
.wx{
  display:flex; align-items:center; gap:var(--space-6);
  padding:var(--space-2) var(--space-6);
  background:var(--accent-lake-tint); color:var(--accent-lake-tone);
  border-bottom:1px solid var(--border-subtle);
  overflow-x:auto; scrollbar-width:thin;
}
:root[data-mode="night"] .wx{
  background:rgb(66 99 128 / .22); color:var(--accent-lake-tint);
}
.wx-now{display:flex; align-items:center; gap:var(--space-3); flex:none}
.wx-sym{flex:none; width:52px; height:52px; display:block}
.wx-temp{
  flex:none; font-family:var(--font-display); font-size:2rem; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.wx-temp span{font-size:1.125rem; vertical-align:top; opacity:.7}
.wx-block{flex:none; display:flex; flex-direction:column; gap:2px}
.wx-label{font-size:var(--text-body-lg); font-weight:var(--weight-medium);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.wx-lo{font-weight:var(--weight-regular); opacity:.62}
.wx-sub{font-size:var(--text-eyebrow); letter-spacing:.09em; text-transform:uppercase;
  opacity:.72; white-space:nowrap}

/* the three upcoming blocks */
.wx-next{display:flex; align-items:center; gap:var(--space-6); flex:none}
.wx-blk{display:flex; align-items:center; gap:var(--space-2)}
.wx-sym-sm{flex:none; width:30px; height:30px; display:block}
.wx-blk-t{font-size:var(--text-body); font-weight:var(--weight-medium);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.wx-prob{font-size:var(--text-eyebrow); opacity:.7; letter-spacing:.04em}

.wx-sep{flex:none; width:1px; height:34px; background:currentColor; opacity:.2}
.wx-warn{
  flex:none; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  font-size:var(--text-eyebrow); font-weight:var(--weight-semibold);
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.wx-warn-mid{background:var(--accent-amber-tint); color:var(--accent-amber-tone)}
.wx-warn-hi{background:var(--accent-clay-tint);  color:var(--accent-clay-tone)}
.wx-src{margin-left:auto; flex:none; font-size:var(--text-eyebrow); letter-spacing:.09em;
  text-transform:uppercase; opacity:.7; white-space:nowrap}
@media(max-width:1100px){ .wx-src{display:none} }
@media(max-width:900px){
  .wx{gap:var(--space-4); padding:var(--space-2) var(--space-4)}
  .wx-sep{display:none}
}

/* ── Morning Meeting wizard ─────────────────────────────────────────────
   A third view. While it runs the navbar, the weather band and the mode
   switch step aside so one Bereich has the whole screen. */
#wizprog, #wizexit{display:none}
body.wizard #startmeeting,
body.wizard .modesw,
body.wizard #autobadge,
body.wizard .clock{display:none}
body.wizard #wx{display:none}
/* Night Audit has no use for a guest-facing forecast */
:root[data-mode="night"] #wx{display:none}
body.wizard nav{display:none}
body.wizard .body{grid-template-columns:1fr}
body.wizard #wizprog{display:flex; align-items:center; gap:var(--space-3)}
body.wizard #wizexit{display:inline-flex}

.wiz-bar{display:block; width:120px; height:4px; background:var(--surface-sunken);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden}
.wiz-bar i{display:block; height:100%; background:var(--accent-quiet);
  transition:width var(--duration-base) var(--ease-standard)}

.wiz{max-width:var(--layout-max-width); margin:0 auto; display:flex; flex-direction:column;
  min-height:100%}
.wiz h2{margin-bottom:var(--space-6)}
.wiz-panel{margin-bottom:var(--space-8); text-align:left}
.wiz-panel h3{text-align:left}
.wiz-panel p{margin:0}

.wiz-notes{margin-bottom:var(--space-8); max-width:var(--layout-measure)}
.wiz-notes label{display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-3); color:var(--text-secondary)}
.wiz-notes label .ico{stroke:var(--accent-quiet)}
.wiz-notes textarea{
  width:100%; padding:var(--space-3); font-family:inherit; font-size:var(--text-body-lg);
  line-height:var(--leading-relaxed); color:var(--text-primary);
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); resize:vertical;
}
.wiz-notes textarea:focus{outline:2px solid var(--border-focus); outline-offset:-1px;
  border-color:transparent}
.wiz-saved{margin-top:var(--space-2); min-height:1.1em;
  font-size:var(--text-eyebrow); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-tertiary)}

.wiz-foot{
  margin-top:auto; position:sticky; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) 0; background:var(--surface-page);
  border-top:1px solid var(--border-subtle);
}
.wiz-foot .btn{min-width:150px; justify-content:center}
.wiz-foot .btn .ico{margin:0 0 0 var(--space-2)}
.wiz-foot #wizback .ico{margin:0 var(--space-2) 0 0}
.wiz-dots{display:flex; gap:5px; flex-wrap:wrap; justify-content:center}
.wiz-dots i{width:7px; height:7px; border-radius:var(--radius-pill);
  background:var(--border-subtle); display:block}
.wiz-dots i.has{background:var(--accent-quiet); opacity:.55}
.wiz-dots i.on{background:var(--accent-quiet); opacity:1;
  transform:scale(1.35)}

.wiz-sum{border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  background:var(--surface-raised); margin-bottom:var(--space-8)}
.wiz-sum-row{padding:var(--space-4); border-bottom:1px solid var(--border-subtle)}
.wiz-sum-row:last-child{border-bottom:0}
.wiz-sum-t{font-size:var(--text-eyebrow); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-secondary); margin-bottom:var(--space-2)}
.wiz-sum-n{font-size:var(--text-body-lg); line-height:var(--leading-relaxed)}

@media(max-width:900px){
  .wiz-foot .btn{min-width:0}
  .wiz-dots{display:none}
}

/* ── Night Audit: import center ─────────────────────────────────────────*/
.daypick{
  font-family:inherit; font-size:var(--text-eyebrow); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-primary);
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:2px 6px; margin-left:var(--space-2);
}
.blocking{
  margin-top:var(--space-3); padding:var(--space-2) var(--space-3);
  background:var(--accent-clay-tint); color:var(--accent-clay-tone);
  border-radius:var(--radius-sm); font-size:var(--text-body);
}
:root[data-mode="night"] .blocking{
  background:rgb(138 72 56 / .30); color:var(--accent-clay-tint);
}
td .fn{font-size:var(--text-eyebrow); color:var(--text-tertiary); margin-top:2px;
  font-family:var(--font-mono); letter-spacing:0; text-transform:none}
.opt{margin-left:var(--space-2); font-size:var(--text-eyebrow); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-tertiary)}
.iss{font-size:var(--text-body); line-height:var(--leading-snug); margin-bottom:4px}
.iss:last-child{margin-bottom:0}
main code{font-family:var(--font-mono); font-size:.8125rem;
  background:var(--surface-sunken); padding:2px 6px; border-radius:var(--radius-sm)}