/* GUI v2 — Stream A (Home, Help, First run, What's new). Tokens only; no raw hex.
   Loads after v2.css. Every rule is scoped to its screen (.home, .help, .fr,
   .whatsnew) so nothing here can restyle another stream's screen. */

/* ── Home ─────────────────────────────────────────────────────────────── */
.home .greeting { margin-bottom: var(--s-8); }
.home .greeting .lede { max-width: 68ch; }
.home .greeting .sk { margin-top: var(--s-4); }
.home .home-alarm { margin: calc(-1 * var(--s-4)) 0 var(--s-8); align-items: center; flex-wrap: wrap; }
.home .home-alarm > div { flex: 1 1 260px; }
.home .home-alarm .btn { flex: none; }
.home .greeting .home-why { color: var(--text-2); font-size: var(--t-small); white-space: nowrap; }

/* Needs attention — the Repairs list. Red only on the warning glyph (R-C2):
   the row is a normal list row, the one action is a Fix button that goes to
   the remedy, and the rows never stretch the button. */
.home .home-attention { margin: calc(-1 * var(--s-4)) 0 var(--s-8); }
/* "Worth knowing" (a slow router, home.js worthKnowing) sits in the same slot
   and takes the same spacing. It had only `.section`'s top margin, so the
   privacy strip touched it (founder, 2026-10-05 21:48;
   tests/ui/home-spacing.test.mjs). */
.home .home-note { margin: calc(-1 * var(--s-4)) 0 var(--s-8); }
.home .home-attention .lrow { align-items: center; }
.home .home-attention .lead { color: var(--bad); background: var(--bad-bg); }
.home .home-attention .title { font-weight: var(--w-medium); }
.home .home-attention .desc { white-space: normal; }
.home .home-attention .trail { flex: none; }
.home .home-attention .trail .btn { min-width: 88px; white-space: nowrap; }
.home .home-attn-more { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--hit); color: var(--text-2); font-size: var(--t-small); white-space: nowrap; }
.home .home-attn-more .chev { width: 14px; height: 14px; }

/* ⭐ In the steady state the strip is QUIET (audit D-12, RULEBOOK R-C2): the
   loudest object on Home must not be the one saying nothing is wrong. Local =
   the page's own surface with a green chip; any other state keeps its tint,
   because then it is news. */
.home .truth.ok { background: var(--surface); border: 1px solid var(--border); }
.home .truth .grow > span { display: block; }
.home .truth .grow > span.why { margin-top: var(--s-1); }

/* ⭐ Clyde is the front door (founder, 2026-10-04 17:11: "the clyde tile should
   be a hero tile … this is the gateway to our system"). The hero takes the
   full width; OxOnGPT is ONE ROW beneath it (Phase 2: as a card beside him it
   was stretched to his height with an empty middle). No suggested prompts —
   they made the pair tall and the Clyde card empty. */
.home .home-front { margin-top: var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.home .home-front > .card { min-width: 0; }
.home .hstack .grow, .home .boxcard .grow { flex: 1; min-width: 0; }
.home .home-small { font-size: var(--t-small); }
/* ⛔ THE BUTTONS SIT IN THE PILL WITH THE SAME GAP ON EVERY SIDE (founder,
   2026-10-05 02:06: "same for the ask button on the ask clyde on home page").
   The field was --hit-lg tall and the buttons --hit, so the pill held them
   8 px from the top and bottom but only 4 px from its end — the Ask button
   sat jammed into the curve, reading as running off it. The end padding is
   now derived from the field's height: (field − button) / 2 + the inset. */
.home .home-composer { --cmp-field: var(--hit); --cmp-inset: calc((var(--cmp-field) - var(--hit)) / 2 + var(--s-1));
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--cmp-inset) var(--s-1) var(--s-4); }
.home .home-composer input#home-clyde-q, .home .home-composer input#home-q { flex: 1; min-width: 0; min-height: var(--cmp-field); font-size: var(--t-body); outline: none; border: 0; background: transparent; padding: 0; }
.home .home-composer .btn { flex: none; }
.home svg.hi { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the hero: the portrait is full-bleed down the left edge, the rest beside it */
.home .home-hero {
  padding: 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  display: grid; column-gap: var(--s-8); row-gap: var(--s-4);
  grid-template-columns: clamp(140px, 19%, 240px) minmax(0, 1fr);
  grid-template-areas: "face head" "face lede" "face ask" "face hint" "face doors";
  grid-template-rows: auto auto auto auto 1fr;
}
.home .home-hero > :not(.home-hero-face) { margin-right: var(--s-8); min-width: 0; }
.home .home-hero-face {
  grid-area: face; width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 32%;
  background: var(--surface-2); display: block; border-right: 1px solid var(--hairline);
}
.home .home-hero-head { grid-area: head; margin-top: var(--s-8); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.home .home-hero-name { min-width: 0; }
.home .home-hero-head h2 { margin: 2px 0 0; font-size: var(--t-title-1); font-weight: var(--w-bold); letter-spacing: var(--track-title); line-height: var(--lh-tight); }
.home .home-hero-head .state { flex: none; margin-top: var(--s-1); }
.home .home-hero-lede { grid-area: lede; margin: calc(-1 * var(--s-2)) 0 0; max-width: 60ch; font-size: var(--t-body); line-height: var(--lh-snug); color: var(--text-2); }
.home .home-hero-ask { grid-area: ask; }
.home .home-hero-ask { --cmp-field: var(--hit-lg); }
.home .home-hero-ask input#home-clyde-q { font-size: var(--t-lead); }
.home .home-hero-ask .btn { min-height: var(--hit); }
.home .home-talk {
  flex: none; display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: 50%;
  border: 1px solid var(--control-border); background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
  transition: background var(--dur-1) var(--ease);
}
.home a.home-talk:hover { background: var(--surface-2); }
.home .home-talk:disabled { opacity: .45; cursor: not-allowed; }
.home .home-talk .hi { width: 20px; height: 20px; }
.home .home-hero-hint { grid-area: hint; margin: calc(-1 * var(--s-2)) 0 0; padding-left: var(--s-4); font-size: var(--t-small); color: var(--text-3); }
.home .home-doors { grid-area: doors; align-self: end; margin-bottom: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.home .home-door {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill); border: 1px solid var(--control-border); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--t-small); font-weight: var(--w-medium); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease);
}
.home a.home-door:hover { background: var(--surface-2); }
.home .home-door small { font-size: var(--t-caption); font-weight: var(--w-regular); color: var(--text-3); margin-left: var(--s-1); }
.home .home-door:disabled { opacity: .45; cursor: not-allowed; }
.home .home-door .hi { color: var(--text-2); }

/* OxOnGPT: one row — icon · name and its threads · the field. The field and
   its button are exactly the hero's height, so Home has ONE composer size. */
.home .home-ask { display: grid; grid-template-columns: 48px minmax(160px, auto) minmax(0, 1fr); align-items: center; column-gap: var(--s-4); row-gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.home .home-ask-icon { width: 48px; height: 48px; border-radius: var(--r-icon); }
.home .home-ask-name h3 { margin: 0; font-size: var(--t-lead); font-weight: var(--w-bold); }
.home .home-ask-open { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--t-small); }
.home .home-ask-open .chev { width: 14px; height: 14px; }
.home .home-ask .home-composer { --cmp-field: var(--hit-lg); }
.home .home-ask .home-composer input#home-q { font-size: var(--t-lead); }
/* the two Ask buttons: same height, same width, same type (only the fill differs) */
.home .home-composer .btn[type="submit"] { min-height: var(--hit); min-width: 88px; padding: 0 var(--s-5); font-size: var(--t-body); }
.home .home-hero-sk { min-height: 260px; }

/* below the glass the hint gives its line back (the mic's own label and title
   still say it) */
@media (max-width: 1699px) { .home .home-hero { grid-template-areas: "face head" "face lede" "face ask" "face doors"; grid-template-rows: auto auto auto 1fr; } .home .home-hero-hint { display: none; } }
@media (max-width: 1100px) {
  .home .home-ask { grid-template-columns: 48px minmax(0, 1fr); }
  .home .home-ask .home-composer { grid-column: 1 / -1; }
}
/* phone: the portrait becomes a face beside his name; everything else is full width */
@media (max-width: 760px) {
  .home .home-hero {
    padding: var(--s-5); column-gap: var(--s-4);
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "face head" "lede lede" "ask ask" "doors doors";
    grid-template-rows: auto;
  }
  .home .home-hero > :not(.home-hero-face) { margin-right: 0; }
  .home .home-hero-face { width: 72px; height: 72px; min-height: 0; border-radius: 50%; border: 0; align-self: center; }
  .home .home-hero-head { margin-top: 0; align-self: center; flex-wrap: wrap; }
  .home .home-hero-head h2 { font-size: var(--t-title-2); }
  .home .home-hero-lede { font-size: var(--t-body); }
  .home .home-hero-hint { display: none; }
  .home .home-hero-ask { --cmp-field: var(--hit); }
  .home .home-hero-ask input#home-clyde-q { padding: 0; font-size: var(--t-body); }
  .home .home-doors { margin-bottom: 0; }
  .home .home-door { flex: 1 1 100%; }
  .home .home-ask .home-composer { --cmp-field: var(--hit); }
  .home .home-ask .home-composer input#home-q { font-size: var(--t-body); }
  /* the strip's chip sits on the title row, never centred alone (audit D-13) */
  .home .truth { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-3); }
  .home .truth > .state { margin: var(--s-1) 0 0; }
}

/* the owner's word is the headline; "Intelligence Fleet" is the kicker */
.home .section > header .home-kicked { flex: 1; min-width: 0; }
.home .home-kicker { display: block; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-3); }
.home .section > header .home-kicked h2 { flex: none; }

.home .boxcard { display: flex; flex-direction: row; align-items: center; text-align: left; gap: var(--s-4); text-decoration: none; color: inherit; padding: var(--s-5); min-height: var(--hit); }
.home a.boxcard:hover { background: var(--surface-2); }
/* the computer's picture: the family drawing on its transparent ground, or the owner's own photo */
.home .boxcard img { width: 56px; height: 56px; flex: none; object-fit: contain; }
.home .boxcard img.boxpic-photo { object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.home .boxcard .n, .home .boxcard .m, .home .boxcard .s { display: block; }
.home .boxcard .n { font-size: var(--t-lead); font-weight: var(--w-bold); line-height: var(--lh-snug); }
.home .boxcard .m { font-size: var(--t-small); color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.home .boxcard .s { margin-top: var(--s-2); }
.home .section > .foot { margin: var(--s-3) 0 0; max-width: 80ch; }

/* At a glance — v2 stat cards, scoped so the v1 band .stat is untouched */
.home .home-stats .card.stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-6); border-right: 1px solid var(--border); min-width: 0; }
.home .home-stats .stat .label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-2); margin: 0; }
.home .home-stats .stat .value { font-size: var(--t-title-1); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-tight); color: var(--text); }
.home .home-stats .stat .value small { font-size: var(--t-body); font-weight: var(--w-regular); color: var(--text-2); letter-spacing: 0; margin-left: var(--s-1); }
.home .home-stats .stat .value.word { font-size: var(--t-title-3); font-weight: var(--w-bold); letter-spacing: 0; padding: var(--s-1) 0; }
.home .home-stats .stat .value.word.bad { color: var(--bad); }
.home .home-stats .stat .value.word.ok { color: var(--ok); }
.home .home-stats .stat .value.idle { font-size: var(--t-title-3); font-weight: var(--w-medium); color: var(--idle); letter-spacing: 0; padding: var(--s-1) 0; }
.home .home-stats .stat .sub { font-size: var(--t-small); color: var(--text-3); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.home .home-stats .stat .sub a { color: var(--text-2); }
.home .home-stats .meter { margin: var(--s-1) 0; }
.home .home-stats .meter i { display: block; height: 100%; background: var(--text-2); border-radius: inherit; }
.home .home-stats .sk { margin-top: var(--s-2); }

.home .list .lrow .time { flex: none; width: 3.2em; font-size: var(--t-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.home .list .lrow .title { font-size: var(--t-body); }
.home .list .lrow .home-actor { flex: none; font-size: var(--t-small); color: var(--text-2); }
/* Recent activity (founder 07:34, "the bold font … doesn't look neat"): ONE
   weight across the row. The sentence is body text; time and actor are quiet,
   in fixed columns, all on one baseline. */
.home .home-acts .home-act { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 4.5em; align-items: baseline; column-gap: var(--s-4); }
.home .home-acts .home-act > * { font-weight: var(--w-regular); }
.home .home-acts .act-what { display: block; font-size: var(--t-body); line-height: var(--lh-snug); color: var(--text); }
.home .home-acts .home-act .time, .home .home-acts .home-act .home-actor { width: auto; font-size: var(--t-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.home .home-acts .home-act .home-actor { justify-self: end; text-align: right; white-space: nowrap; }
.home .home-acts .home-act { align-content: center; }
@media (max-width: 560px) {
  /* a phone: who did it moves under the sentence, still quiet, still aligned */
  .home .home-acts .home-act { grid-template-columns: 3.2em minmax(0, 1fr); row-gap: 2px; }
  .home .home-acts .home-act .home-actor { grid-column: 2; justify-self: start; justify-content: flex-start; margin-left: 0; text-align: left; }
}
.home .empty .art svg { width: 28px; height: 28px; }

.home .home-news { margin: var(--s-8) 0 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.home .home-news a { color: var(--text-2); min-height: var(--hit); display: inline-flex; align-items: center; }
.home .home-help { margin-top: var(--s-6); }
@media (min-width: 761px) { .home .home-help { display: none; } }
@media (max-width: 760px) {
  .home .boxcard { padding: var(--s-4); }
  .home .home-alarm { margin-top: 0; }
}

/* ── Help ─────────────────────────────────────────────────────────────── */
.help .help-tasks .card { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; color: inherit; }
.help .help-tasks .card h2 { font-size: var(--t-title-3); font-weight: var(--w-bold); letter-spacing: var(--track-title); margin: 0; }
.help .help-tasks .card p { margin: 0; color: var(--text-2); }
.help .help-tasks .card .lead { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.help .help-tasks .card .lead svg { width: 22px; height: 22px; }
/* the box's own address, as an address chip — not code in a sentence (D-63) */
.help .help-addr { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-weight: var(--w-medium); overflow-wrap: anywhere; user-select: all; }
.help details.q { scroll-margin-top: calc(var(--s-16) + var(--s-8)); }
.help details.q.is-target > summary { color: var(--text); }
.help .section + .section { margin-top: var(--s-10); }
.help .help-keys { margin: var(--s-6) 0 0; color: var(--text-2); font-size: var(--t-small); }
.help .help-keys a { color: var(--text-2); }
/* the drawings: one pen (help.js SW), sentence-case captions, no tracking */
.help .hx-cap { letter-spacing: 0; }
kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--s-2); border: 1px solid var(--control-border); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-small); font-weight: var(--w-medium); line-height: 1; }

/* ── The keyboard-shortcut sheet ("?" on any screen; js/screens/help.js) ──
   The sheet is Stream 1's ONE sheet primitive (js/ui.js sheet()) — title,
   close icon, Esc, focus held and returned. Only its body is styled here. */
.ui-sheet.kbd-sheet { width: min(560px, 100%); }
.kbd-list { display: grid; }
.kbd-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--hairline); }
.kbd-row:first-child { border-top: 0; }
.kbd-keys { display: inline-flex; align-items: center; gap: var(--s-1); }
.kbd-plus { color: var(--text-3); font-size: var(--t-small); }
.kbd-what { display: grid; gap: 2px; font-size: var(--t-body); }
.kbd-what small { font-size: var(--t-small); color: var(--text-3); }
.kbd-foot { margin: var(--s-4) 0 0; font-size: var(--t-small); color: var(--text-2); }
@media (max-width: 520px) { .kbd-row { grid-template-columns: 96px minmax(0, 1fr); } }
.help details.q { display: block; padding: 0 var(--s-5); }
.help details.q + details.q { border-top: 1px solid var(--hairline); }
.help details.q > summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-lead); font-weight: var(--w-medium); list-style: none; }
.help details.q > summary::-webkit-details-marker { display: none; }
.help details.q > summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-size: var(--t-title-3); font-weight: var(--w-regular); }
.help details.q[open] > summary::after { content: "–"; }
.help details.q > .a { padding: 0 0 var(--s-5); color: var(--text-2); max-width: var(--read-max); }
.help details.q > .a p { margin: 0 0 var(--s-2); }
.help details.guide { margin-top: var(--s-10); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.help details.guide > summary { cursor: pointer; min-height: var(--hit-lg); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-6); font-size: var(--t-lead); font-weight: var(--w-bold); list-style: none; }
.help details.guide > summary::-webkit-details-marker { display: none; }
.help details.guide > summary .faint { font-weight: var(--w-regular); font-size: var(--t-small); }
.help details.guide > summary::after { content: "Show"; margin-left: auto; font-size: var(--t-small); color: var(--text-2); font-weight: var(--w-medium); }
.help details.guide[open] > summary::after { content: "Hide"; }
.help details.guide > .guide-body { padding: var(--s-2) var(--s-6) var(--s-6); }
/* the long guide's own v1 type, brought onto v2 tokens */
.help .guide-body .sect h2 { font-size: var(--t-title-3); }
.help .guide-body .hprose p, .help .guide-body .hsteps li, .help .guide-body .hlead,
.help .guide-body .hrail dd, .help .guide-body .happs span { font-size: var(--t-body); color: var(--text-2); }
.help .guide-body .hrail dt, .help .guide-body .happs b, .help .guide-body .hsub { font-size: var(--t-body); color: var(--text); }
.help .guide-body .hway { background: var(--surface-2); border-color: var(--border); border-radius: var(--r-md); }
.help .guide-body .hway-url { color: var(--text); overflow-wrap: anywhere; }
.help .guide-body .hx { color: var(--text-2); }
@media (max-width: 760px) {
  .help details.q { padding: 0 var(--s-4); }
  .help details.guide > summary, .help details.guide > .guide-body { padding-left: var(--s-4); padding-right: var(--s-4); }
}
/* ⛔ PRINTING EXPANDS EVERYTHING. A guide that prints only its headings is
   not a printed guide. ::details-content makes closed content renderable in
   Chrome; js/screens/help.js also opens every disclosure on beforeprint and
   restores them on afterprint, for any engine without it. */
@media print {
  .help details > summary::after { content: none !important; }
  .help details::details-content { content-visibility: visible; display: contents; }
  .help details > :not(summary) { display: block !important; }
  .help details.guide { border: 0; }
  .help .help-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .help .card { box-shadow: none; }
}

/* ── First run ────────────────────────────────────────────────────────── */
.fr.fr2 { background: var(--bg); color: var(--text); }
.fr2 .fr-body { padding: var(--s-10) var(--page-pad); }
.fr2 .fr-panel { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--s-10) var(--s-8); text-align: center; }
.fr2 .fr-logo { margin: 0 auto var(--s-8); width: 200px; height: auto; }
.fr2 .fr-panel h1 { font-size: var(--t-title-1); font-weight: var(--w-bold); letter-spacing: var(--track-title); line-height: var(--lh-tight); margin: 0 0 var(--s-3); }
.fr2 .fr-lede { color: var(--text-2); font-size: var(--t-lead); margin: 0 auto var(--s-6); max-width: 52ch; }
.fr2 .fr-card { background: var(--surface-2); border: 0; border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); text-align: left; color: var(--text); min-width: 0; width: 100%; max-width: none; box-shadow: none; }
.fr2 .fr-card p { color: var(--text-2); }
.fr2 .fr-card.bad { background: var(--bad-bg); }
.fr2 .fr-card.bad p:first-child { color: var(--text); font-weight: var(--w-medium); }
.fr2 .fr-card .tag { flex: none; }
.fr2 .check-list li { font-size: var(--t-body); color: var(--text); padding: var(--s-2) 0; }
.fr2 .fr-field label { color: var(--text); font-size: var(--t-small); }
.fr2 .fr-field input { width: 100%; min-height: var(--hit); padding: 0 var(--s-4); border-radius: var(--r-md); font-size: var(--t-body); }
.fr2 .privacy-hero { color: var(--ok); font-size: var(--t-title-2); font-weight: var(--w-display); margin: var(--s-2) 0 var(--s-4); }
.fr2 .progress { background: var(--surface); }
.fr2 .progress > div { background: var(--text); }
.fr2 .msg-a .body { color: var(--text); text-align: left; }
.fr2 .fr-nav { margin-top: var(--s-8); gap: var(--s-3); flex-wrap: wrap; }
.fr2 .fr-steps { margin: var(--s-8) auto 0; max-width: 360px; }
.fr2 .fr-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.fr2 .fr-bar i { height: 4px; border-radius: var(--r-pill); background: var(--border); }
.fr2 .fr-bar i.on { background: var(--text); }
.fr2 .fr-count { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-3); }
@media (max-width: 760px) {
  .fr2 .fr-body { padding: var(--s-6) var(--s-4); }
  .fr2 .fr-panel { padding: var(--s-8) var(--s-5); border-radius: var(--r-lg); }
  .fr2 .fr-logo { width: 160px; margin-bottom: var(--s-6); }
  .fr2 .fr-nav .btn { width: 100%; }
}

/* ── What's new ───────────────────────────────────────────────────────── */
.whatsnew .lrow .btn { flex: none; }
.whatsnew .lrow .lead { color: var(--text-2); }