/* Good Bunny hub components. Every value is a token from tokens.css; no literals except 0, 1, 100%, auto.
   Fonts: subset woff2 from the hub's own origin (scripts/fonts.sh). */
@font-face { font-family: "Heebo"; src: url("/assets/fonts/heebo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/spacegrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gb-h-canvas); color: var(--gb-h-ink); font: 400 var(--gb-h-fs-body)/var(--gb-h-lh) var(--gb-h-font); }
a { color: var(--gb-h-action); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--gb-h-ring) solid var(--gb-h-action); outline-offset: var(--gb-h-ring-offset); border-radius: var(--gb-h-r-s); }
.skip { position: absolute; inset-inline-start: var(--gb-h-sp-4); top: -100px; background: var(--gb-h-surface); padding: var(--gb-h-sp-2) var(--gb-h-sp-4); border-radius: var(--gb-h-r-m); }
.skip:focus { top: var(--gb-h-sp-4); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* shell: dimmed sidebar + inset white panel (hifi HIFI.md §4). Phone chrome (<=768) is further down */
svg.i { width: var(--gb-h-sp-4); height: var(--gb-h-sp-4); flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.app { display: grid; grid-template-columns: var(--gb-h-side-w) minmax(0, 1fr); min-height: 100vh; background: var(--gb-h-shell); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--gb-h-sp-3); }
.frame { margin-block: var(--gb-h-sp-2); margin-inline: 0 var(--gb-h-sp-2); background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-l); min-width: 0; }
.switch { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--gb-h-sp-2); width: 100%; height: var(--gb-h-btn-h); padding: 0 var(--gb-h-sp-2); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-ui); }
summary.switch { cursor: pointer; }
.switch { min-width: 0; }
.switch:focus-visible { outline: var(--gb-h-ring) solid var(--gb-h-action); outline-offset: calc(-1 * var(--gb-h-ring)); }
summary.switch:hover { background: var(--gb-h-fill); }
.switch .mark { width: var(--gb-h-sp-4); height: var(--gb-h-sp-4); color: var(--gb-h-action); flex: none; }
.switch .slash { color: var(--gb-h-line); }
.switch b { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch .chev { margin-inline-start: auto; color: var(--gb-h-muted); }
.acct-tile { width: var(--gb-h-av-s); height: var(--gb-h-av-s); border-radius: var(--gb-h-r-xs); background: var(--gb-h-ink); color: var(--gb-h-surface); display: grid; place-items: center; font: 600 var(--gb-h-fs-micro)/1 var(--gb-h-font-display); flex: none; }
.nav { margin-top: var(--gb-h-sp-4); display: grid; gap: var(--gb-h-sp-1); }
.nav-label { font-size: var(--gb-h-fs-eyebrow); font-weight: 500; color: var(--gb-h-muted); padding: var(--gb-h-sp-4) var(--gb-h-sp-2) var(--gb-h-sp-1); }
.nav a { display: flex; align-items: center; gap: var(--gb-h-sp-2); height: var(--gb-h-nav-h); padding: 0 var(--gb-h-sp-2); border-radius: var(--gb-h-r-m); color: var(--gb-h-muted); font-size: var(--gb-h-fs-ui); font-weight: 500; text-decoration: none; transition: background var(--gb-h-t) var(--gb-h-ease), color var(--gb-h-t) var(--gb-h-ease); }
.nav a:hover, .nav a[aria-current] { background: var(--gb-h-fill); color: var(--gb-h-ink); }
.side-foot { margin-top: auto; }
.me { display: flex; align-items: center; gap: var(--gb-h-sp-2); padding: var(--gb-h-sp-2); }
.me-t { min-width: 0; }
.me-t b, .me-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-t b { font-weight: 500; font-size: var(--gb-h-fs-meta); }
.me-t small { font-size: var(--gb-h-fs-eyebrow); color: var(--gb-h-muted); font-weight: 400; }
.av { width: var(--gb-h-av-m); height: var(--gb-h-av-m); border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--gb-h-ink); font: 600 var(--gb-h-fs-eyebrow)/1 var(--gb-h-font); }
.av.s { width: var(--gb-h-av-s); height: var(--gb-h-av-s); font-size: var(--gb-h-fs-micro); }
.id-1 { background: var(--gb-h-id-1); } .id-2 { background: var(--gb-h-id-2); } .id-3 { background: var(--gb-h-id-3); }
.id-4 { background: var(--gb-h-id-4); } .id-5 { background: var(--gb-h-id-5); } .id-6 { background: var(--gb-h-id-6); }
.side .menu-list { inset-inline: 0; box-shadow: var(--gb-h-shadow-pop); }
.mtop, .mbar { display: none; }

/* page */
main { max-width: var(--gb-h-wrap); margin: 0 auto; padding: var(--gb-h-sp-6) var(--gb-h-sp-6) var(--gb-h-sp-8); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gb-h-sp-4); flex-wrap: wrap; margin-bottom: var(--gb-h-sp-5); }
h1 { margin: 0; font: 600 var(--gb-h-fs-h1)/var(--gb-h-lh-tight) var(--gb-h-font-display); letter-spacing: var(--gb-h-track-display); overflow-wrap: anywhere; }
h2 { margin: 0; font: 600 var(--gb-h-fs-h2)/1.3 var(--gb-h-font); }
.sub { margin: var(--gb-h-sp-2) 0 0; color: var(--gb-h-muted); font-size: var(--gb-h-fs-ui); }
.sub b { color: var(--gb-h-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.crumb { display: inline-block; margin-bottom: var(--gb-h-sp-3); font-size: var(--gb-h-fs-ui); }
section + section { margin-top: var(--gb-h-sp-7); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-h-sp-4); margin-bottom: var(--gb-h-sp-4); }
.note { margin: var(--gb-h-sp-3) 0 0; color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

/* buttons: one primary per view */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gb-h-sp-2); height: var(--gb-h-btn-h); padding: 0 var(--gb-h-sp-4); border-radius: var(--gb-h-r-pill); border: var(--gb-h-hair) solid transparent; font: 600 var(--gb-h-fs-ui)/1 var(--gb-h-font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--gb-h-t) var(--gb-h-ease); }
.btn-p { background: var(--gb-h-action); color: var(--gb-h-on-action); }
.btn-p:hover { background: var(--gb-h-ink); text-decoration: none; }
.btn-q { background: var(--gb-h-surface); color: var(--gb-h-ink); border-color: var(--gb-h-line-input); }
.btn-q:hover { background: var(--gb-h-canvas); text-decoration: none; }
.btn-t { background: none; color: var(--gb-h-action); padding: 0 var(--gb-h-sp-2); height: var(--gb-h-btn-h); }
.btn-t:hover { text-decoration: underline; }
.btn-danger { background: var(--gb-h-surface); color: var(--gb-h-error); border-color: var(--gb-h-line-input); }

/* card + table */
.card { background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line); border-radius: var(--gb-h-r-m); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--gb-h-fs-ui); }
.tbl th { white-space: nowrap; text-align: start; padding: var(--gb-h-sp-3) var(--gb-h-sp-4); color: var(--gb-h-muted); font: 500 var(--gb-h-fs-eyebrow)/1 var(--gb-h-font-display); letter-spacing: var(--gb-h-track-eyebrow); text-transform: uppercase; border-bottom: var(--gb-h-hair) solid var(--gb-h-line); }
.tbl td { padding: var(--gb-h-sp-3) var(--gb-h-sp-4); border-bottom: var(--gb-h-hair) solid var(--gb-h-line); vertical-align: top; height: var(--gb-h-row-min); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { position: relative; }
.tbl tbody tr:hover td { background: var(--gb-h-canvas); }
.tbl tr.changed td { background: var(--gb-h-tint); }
.host { color: var(--gb-h-ink); font-weight: 600; font-size: var(--gb-h-fs-body); text-decoration: none; overflow-wrap: anywhere; }
.host::after { content: ""; position: absolute; inset: 0; } /* whole row clicks through, one tab stop */
.host:hover { text-decoration: underline; }
.tbl td a:not(.host), .tbl td button { position: relative; z-index: 1; } /* stay pressable above the row link */
.meta { display: block; color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; color: var(--gb-h-muted); white-space: nowrap; }
.tag { display: inline-block; margin-inline-start: var(--gb-h-sp-2); padding: 0 var(--gb-h-sp-2); border: var(--gb-h-hair) solid var(--gb-h-line); border-radius: var(--gb-h-r-s); color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); font-weight: 500; vertical-align: 2px; }
.chev { color: var(--gb-h-muted); text-align: end; }

/* status: a dot + a word. Colour is never the only carrier */
.st { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: var(--gb-h-dot); height: var(--gb-h-dot); border-radius: 50%; background: currentColor; flex: none; }
.st-ok::before { background: var(--gb-h-success); }
.st-warn::before { background: var(--gb-h-caution); }
.st-err { color: var(--gb-h-error); }
.st-off::before { background: transparent; box-shadow: inset 0 0 0 var(--gb-h-hair) var(--gb-h-muted); }
.st-wait::before { background: var(--gb-h-muted); animation: var(--gb-h-pulse); } /* CRITIQUE-PR36 should-fix 1: blue only on what you can press */
@keyframes gb-pulse { to { opacity: .3; } }

/* banner: plain words + the fix */
.banner { display: flex; gap: var(--gb-h-sp-3); padding: var(--gb-h-sp-4); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-ui); margin-bottom: var(--gb-h-sp-5); }
.banner p { margin: 0; }
.banner b:first-child { display: block; margin-bottom: var(--gb-h-sp-1); }
.banner-warn { background: var(--gb-h-caution-tint); color: var(--gb-h-ink); }
.banner-warn b:first-child { color: var(--gb-h-caution); }
.banner-err { background: var(--gb-h-error-tint); }
.banner-err b:first-child { color: var(--gb-h-error); }

/* forms */
.field { display: grid; gap: var(--gb-h-sp-1); align-content: start; }
.field label { font-size: var(--gb-h-fs-ui); font-weight: 600; }
.field .opt { color: var(--gb-h-muted); font-weight: 400; }
.note.flush { margin: 0; }
.field .hint { color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }
.input, .select { height: var(--gb-h-field-h); padding: 0 var(--gb-h-sp-3); border: var(--gb-h-hair) solid var(--gb-h-line-input); border-radius: var(--gb-h-r-m); background: var(--gb-h-surface); color: var(--gb-h-ink); font: 400 var(--gb-h-fs-body)/1 var(--gb-h-font); width: 100%; }
.input[aria-invalid="true"] { border-color: var(--gb-h-error); }
.err-msg { color: var(--gb-h-error); font-size: var(--gb-h-fs-meta); font-weight: 500; }
.mono { font-family: var(--gb-h-font-mono); font-size: var(--gb-h-fs-ui); overflow-wrap: anywhere; }

/* new guest link: a native <details>, no JS needed */
.new { margin-bottom: var(--gb-h-sp-4); }
.new > summary { list-style: none; }
.new > summary::-webkit-details-marker { display: none; }
.new[open] > summary { display: none; }
.new-form { padding: var(--gb-h-sp-5); display: grid; grid-template-columns: 2fr 1fr; gap: var(--gb-h-sp-4); }
.new-form .full { grid-column: 1 / -1; }
.new-form .actions { grid-column: 1 / -1; display: flex; gap: var(--gb-h-sp-2); align-items: center; }

/* ended links fold away */
.ended { margin-top: var(--gb-h-sp-4); }
.ended > summary { cursor: pointer; color: var(--gb-h-muted); font-size: var(--gb-h-fs-ui); font-weight: 500; padding: var(--gb-h-sp-2) 0; }

/* white-label preview: the only dark thing in the hub, because it IS the overlay */
.preview { display: grid; grid-template-columns: 1fr auto; gap: var(--gb-h-sp-5); align-items: center; padding: var(--gb-h-sp-5); }
.pill { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--gb-h-sp-4); height: var(--gb-h-pill-h); padding: 0 var(--gb-h-sp-2) 0 var(--gb-h-sp-4); border-radius: var(--gb-h-r-pill); background: var(--gb-h-chrome); color: var(--gb-h-chrome-text); font: 600 var(--gb-h-fs-ui)/1 var(--gb-h-font-overlay); }
.pill .agency { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); }
.pill .agency i { width: var(--gb-h-pill-logo); height: var(--gb-h-pill-logo); border-radius: var(--gb-h-r-s); background: var(--gb-h-chrome-text); color: var(--gb-h-chrome); font: 700 var(--gb-h-fs-eyebrow)/var(--gb-h-pill-logo) var(--gb-h-font); text-align: center; font-style: normal; }
.pill .via { color: var(--gb-h-chrome-text-2); font-weight: 400; font-size: var(--gb-h-fs-meta); }
.pill .send { height: var(--gb-h-btn-h); padding: 0 var(--gb-h-sp-4); border-radius: var(--gb-h-r-pill); background: var(--gb-h-chrome-action); color: var(--gb-h-chrome); display: inline-flex; align-items: center; }
.coach { margin: 0 0 var(--gb-h-sp-3); font-size: var(--gb-h-fs-ui); }

/* definition list for site facts */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--gb-h-sp-3) var(--gb-h-sp-6); margin: 0; padding: var(--gb-h-sp-5); font-size: var(--gb-h-fs-ui); }
.facts dt { color: var(--gb-h-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.danger { display: flex; justify-content: space-between; align-items: center; gap: var(--gb-h-sp-4); padding: var(--gb-h-sp-4) var(--gb-h-sp-5); border-top: var(--gb-h-hair) solid var(--gb-h-line); font-size: var(--gb-h-fs-ui); }
.danger p { margin: 0; color: var(--gb-h-muted); }

.empty { padding: var(--gb-h-sp-6) var(--gb-h-sp-5) var(--gb-h-sp-5); }
.empty h2 { margin-bottom: var(--gb-h-sp-2); }
.empty p { margin: 0 0 var(--gb-h-sp-4); color: var(--gb-h-muted); max-width: 52ch; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; border-top: var(--gb-h-hair) solid var(--gb-h-line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: var(--gb-h-sp-6) 1fr auto; gap: var(--gb-h-sp-3); align-items: center; padding: var(--gb-h-sp-4) var(--gb-h-sp-5); border-bottom: var(--gb-h-hair) solid var(--gb-h-line); font-size: var(--gb-h-fs-ui); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); width: var(--gb-h-sp-5); height: var(--gb-h-sp-5); border-radius: 50%; border: var(--gb-h-hair) solid var(--gb-h-line-input); display: grid; place-items: center; font: 500 var(--gb-h-fs-meta)/1 var(--gb-h-font-display); color: var(--gb-h-muted); }
.steps li.done::before { content: "\2713"; background: var(--gb-h-success); border-color: var(--gb-h-success); color: var(--gb-h-on-action); }
.steps li.done { color: var(--gb-h-muted); }
.steps li.now b { color: var(--gb-h-ink); }

/* mobile 390: tables become stacked rows, same markup */
@media (max-width: 600px) {
  main { padding: var(--gb-h-sp-5) var(--gb-h-sp-4) var(--gb-h-sp-6); }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr { padding: var(--gb-h-sp-3) var(--gb-h-sp-4); border-bottom: var(--gb-h-hair) solid var(--gb-h-line); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { padding: 0; border: 0; height: auto; }
  .tbl td + td { margin-top: var(--gb-h-sp-1); }
  .tbl td.hide-m { display: none; }
  .tbl tbody tr:hover td, .tbl tr.changed td { background: none; }
  .tbl tr.changed { background: var(--gb-h-tint); }
  .tbl td.chev { position: absolute; inset-inline-end: var(--gb-h-sp-4); top: var(--gb-h-sp-3); }
  .tbl td.act { margin-top: var(--gb-h-sp-3); }
  .tbl td.act .btn { width: 100%; height: var(--gb-h-btn-h-l); }
  .new-form { grid-template-columns: 1fr; padding: var(--gb-h-sp-4); }
  .new-form .actions .btn-p { flex: 1; height: var(--gb-h-btn-h-l); }
  .sec-head .btn-p { height: var(--gb-h-btn-h); }
  .preview { grid-template-columns: minmax(0, 1fr); padding: var(--gb-h-sp-4); }
  .pill { gap: var(--gb-h-sp-3); justify-self: start; max-width: 100%; }
  .pill .via { display: none; } /* mirrors the overlay's compact pill under 600px */
  .facts { grid-template-columns: 1fr; gap: 0; padding: var(--gb-h-sp-4); }
  .facts dd { margin-bottom: var(--gb-h-sp-3); }
  .danger { flex-direction: column; align-items: stretch; padding: var(--gb-h-sp-4); }
  .steps li { grid-template-columns: var(--gb-h-sp-6) 1fr; padding: var(--gb-h-sp-4); }
  .steps li .btn { grid-column: 2; justify-self: start; }
}

/* ---- WP-B1 additions (Igor). Tokens only; for Tali's critique (gate D). ---- */
.stack { display: grid; gap: var(--gb-h-sp-4); }
.btn-l { width: 100%; height: var(--gb-h-btn-h-l); font-size: var(--gb-h-fs-body); }
.btn[disabled] { cursor: not-allowed; background: var(--gb-h-canvas); color: var(--gb-h-muted); border-color: var(--gb-h-line); }
.row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-h-sp-2); } /* CRITIQUE-PR44 S3: a status beside a button sits on its centre line */
.addr { display: block; font-weight: 600; overflow-wrap: anywhere; } /* own line: a split address hides typos (CRITIQUE-PR10 M1) */

/* account menu: native <details>, menu.ts adds Esc + outside click */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; inset-inline-end: 0; top: 100%; z-index: 2; display: grid; gap: var(--gb-h-sp-1); padding: var(--gb-h-sp-2); background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line); border-radius: var(--gb-h-r-m); white-space: nowrap; }
.menu-list form { margin: 0; }
.menu-list .btn-t { width: 100%; justify-content: flex-start; }

/* in-row forms (members, invites) */
.tbl td form { display: inline; }
.tbl td.act { text-align: end; white-space: nowrap; }
.new:not([open]) { background: none; border: 0; } /* closed: just the button, the card frame appears with the form */
@media (max-width: 600px) {
  .tbl td.act { display: flex; gap: var(--gb-h-sp-2); }
  .tbl td.act > * { flex: 1; }
  .tbl td.act form .btn { width: 100%; height: var(--gb-h-btn-h-l); }
}

/* ---- WP-B2 additions (Igor). Tokens only. ---- */
.keybox { display: grid; gap: var(--gb-h-sp-3); padding: var(--gb-h-sp-5); }
.keybox p { margin: 0; }
.key { padding: var(--gb-h-sp-3) var(--gb-h-sp-4); background: var(--gb-h-canvas); border-radius: var(--gb-h-r-s); font-size: var(--gb-h-fs-body); }
.gap { height: var(--gb-h-sp-5); }
.m-label { display: none; } /* mobile-only column label: headers are hidden under 600px (CRITIQUE-PR10 nice-to-have 1) */
@media (max-width: 600px) { .m-label { display: inline; } }
.pager { margin-top: var(--gb-h-sp-4); align-items: center; }
form.inline { display: inline; }

/* ---- WP-B5 additions (Igor). Tokens only. Connect card (HUB-DIRECTION §2.3) ---- */
.connect-host { margin: 0; font: 600 var(--gb-h-fs-display)/var(--gb-h-lh-tight) var(--gb-h-font-display); letter-spacing: var(--gb-h-track-display); overflow-wrap: normal; word-break: normal; hyphens: none; }
.connect-host--long { font-size: var(--gb-h-fs-display-s); }
.connect-path { color: var(--gb-h-caution); }
.connect-sub { color: var(--gb-h-muted); font-weight: 500; } /* CRITIQUE-PR41 M1: subdomain labels recede */
.connect-own { color: var(--gb-h-ink); }                     /* the owning domain carries the weight (600 from .connect-host) */
.connect-rest { color: var(--gb-h-ink); overflow-wrap: normal; word-break: normal; }
.connect-back { margin: 0; }
.connect-back .mono { font-size: inherit; overflow-wrap: normal; }
.connect-caution { margin: 0; padding: var(--gb-h-sp-2) var(--gb-h-sp-3); background: var(--gb-h-caution-tint); color: var(--gb-h-caution); border-radius: var(--gb-h-r-s); font-size: var(--gb-h-fs-ui); }
.connect-exit .btn-t, .facts dd .btn-t { margin-inline-start: calc(-1 * var(--gb-h-sp-2)); } /* a text button starts on the text column (CRITIQUE-PR44 S4: facts too) */
.banner-plain { background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line); }
.nowrap { white-space: nowrap; }
.connect-key { display: flex; align-items: baseline; gap: var(--gb-h-sp-2); }
.connect-key .meta { display: inline; }
.connect-thumb { font-size: var(--gb-h-fs-h2); font-weight: 600; letter-spacing: var(--gb-h-track-key); }
.accts { display: grid; gap: var(--gb-h-sp-2); margin: 0; padding: 0; border: 0; }
.accts legend { margin-bottom: var(--gb-h-sp-2); padding: 0; font-size: var(--gb-h-fs-ui); font-weight: 500; }
.acct { display: flex; align-items: flex-start; gap: var(--gb-h-sp-3); padding: var(--gb-h-sp-3) var(--gb-h-sp-4); border: var(--gb-h-hair) solid var(--gb-h-line-input); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-ui); cursor: pointer; }
.acct:has(input:checked) { background: var(--gb-h-tint); border-color: var(--gb-h-action); }
.acct input { margin: var(--gb-h-sp-1) 0 0; accent-color: var(--gb-h-action); }

/* ---- WP-B7 fix round (CRITIQUE-PR44). Tokens only. ---- */
.hold { display: grid; justify-items: start; gap: var(--gb-h-sp-3); margin-bottom: var(--gb-h-sp-4); } /* M1: the copy hold, right above New guest link */
@media (max-width: 600px) {
  .keybox .row-btns > .btn { flex: 1 1 100%; height: var(--gb-h-btn-h-l); } /* S3: the card's one action full width at 48 px (§3) */
}

/* ---- Shell, phone (<=768): top strip, bottom bar, account sheet (a <details>; menu.ts closes it on Esc / outside tap) ---- */
@media (max-width: 768px) {
  .app { display: flex; flex-direction: column; background: var(--gb-h-surface); }
  .side { display: none; }
  .frame { flex: 1; margin: 0; border: 0; border-radius: 0; }
  .mtop { display: flex; align-items: center; height: var(--gb-h-top-h); padding: 0 var(--gb-h-sp-4); border-bottom: var(--gb-h-hair) solid var(--gb-h-line-soft); }
  .mtop .switch { width: auto; padding: 0; }
  .mbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: sticky; bottom: 0; height: var(--gb-h-bar-h); background: var(--gb-h-surface); border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); z-index: 5; }
  .mbar > a, .mbar > details > summary { display: grid; justify-items: center; align-content: center; gap: var(--gb-h-sp-1); height: var(--gb-h-bar-h); color: var(--gb-h-muted); font-size: var(--gb-h-fs-eyebrow); font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; }
  .mbar > a[aria-current], .mbar > details:has(.sheet [aria-current]) > summary { color: var(--gb-h-ink); }
  .mbar > a svg.i, .mbar > details > summary svg.i { width: var(--gb-h-sp-5); height: var(--gb-h-sp-5); }
  .scrim { display: none; position: fixed; inset: 0 0 var(--gb-h-bar-h) 0; z-index: 3; background: var(--gb-h-scrim); }
  .mbar:has(.sheet-d[open]) .scrim { display: block; }
  .sheet-d { position: static; }
  .sheet { position: fixed; inset: auto 0 var(--gb-h-bar-h) 0; z-index: 4; max-height: calc(100vh - var(--gb-h-bar-h)); overflow-y: auto; background: var(--gb-h-surface); border-radius: var(--gb-h-r-l) var(--gb-h-r-l) 0 0; padding: var(--gb-h-sp-2) var(--gb-h-sp-3) var(--gb-h-sp-4); box-shadow: var(--gb-h-shadow-pop); }
  .sheet .grab { width: var(--gb-h-sp-6); height: var(--gb-h-sp-1); border-radius: var(--gb-h-r-pill); background: var(--gb-h-line); margin: 0 auto var(--gb-h-sp-3); }
  .sheet .lbl { font-size: var(--gb-h-fs-eyebrow); color: var(--gb-h-muted); padding: var(--gb-h-sp-2) var(--gb-h-sp-2) var(--gb-h-sp-1); }
  .sheet form { margin: 0; }
  .sheet-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--gb-h-sp-3); width: 100%; min-height: var(--gb-h-field-h); padding: 0 var(--gb-h-sp-2); border-radius: var(--gb-h-r-m); font: 500 var(--gb-h-fs-ui)/var(--gb-h-lh) var(--gb-h-font); color: var(--gb-h-ink); cursor: pointer; }
  div.sheet-row { cursor: default; }
  .sheet-row svg.i { color: var(--gb-h-muted); }
  .sheet-row[aria-current] { background: var(--gb-h-fill); }
  .sheet-row.quiet { color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); padding-inline-start: calc(var(--gb-h-sp-2) + var(--gb-h-sp-4) + var(--gb-h-sp-3)); }
  .sheet-row .tick { margin-inline-start: auto; color: var(--gb-h-action); }
  .sheet-row:focus-visible { outline: var(--gb-h-ring) solid var(--gb-h-action); }
  .sheet hr { border: 0; border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); margin: var(--gb-h-sp-2) 0; }
}

/* ---- Hub inbox (package 3). Tokens only; hifi.html `inbox` / `waiting` / `inbox-calm`. ---- */
.av.bot { background: var(--gb-h-chrome); color: var(--gb-h-chrome-action); }
.av.bot svg { width: 62%; height: 62%; }
.av.team { background: var(--gb-h-fill); color: var(--gb-h-muted); }
.av.team svg { width: 55%; height: 55%; }
.fav { width: var(--gb-h-sp-4); height: var(--gb-h-sp-4); border-radius: var(--gb-h-r-s); flex: none; display: inline-grid; place-items: center; color: var(--gb-h-ink); font: 700 var(--gb-h-fs-micro)/1 var(--gb-h-font); }
.nav a .n { margin-inline-start: auto; color: var(--gb-h-ink); font-size: var(--gb-h-fs-eyebrow); font-weight: 600; font-variant-numeric: tabular-nums; }
.mbar > a { position: relative; }
.badge { position: absolute; top: var(--gb-h-sp-2); inset-inline-start: calc(50% + var(--gb-h-sp-1)); min-width: calc(var(--gb-h-sp-4) + 2 * var(--gb-h-hair)); padding: 0 var(--gb-h-sp-1); border-radius: var(--gb-h-r-pill); background: var(--gb-h-action); color: var(--gb-h-on-action); font: 600 var(--gb-h-fs-micro)/calc(var(--gb-h-sp-4) + 2 * var(--gb-h-hair)) var(--gb-h-font); text-align: center; box-shadow: 0 0 0 calc(2 * var(--gb-h-hair)) var(--gb-h-surface); }
[dir="rtl"] svg.i[class*="chev"], [dir="rtl"] .go svg, [dir="rtl"] .diff svg { transform: scaleX(-1); }

h1 .fig { font-variant-numeric: tabular-nums; }
.sub.line { display: flex; flex-wrap: wrap; align-items: center; }
.sub.line > * + *::before { content: "\00B7"; display: inline-block; margin-inline: var(--gb-h-sp-2); color: var(--gb-h-line-input); text-decoration: none; }
.warnlink { color: var(--gb-h-caution); font-weight: 500; display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-h-sp-3); margin: var(--gb-h-sp-5) 0 var(--gb-h-sp-4); }
.seg { display: inline-flex; gap: calc(2 * var(--gb-h-hair)); padding: calc(3 * var(--gb-h-hair)); background: var(--gb-h-fill); border-radius: var(--gb-h-r-m); }
.seg a { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); height: calc(var(--gb-h-ctl-h) - 6 * var(--gb-h-hair)); padding: 0 var(--gb-h-sp-3); border-radius: var(--gb-h-r-xs); color: var(--gb-h-muted); font-size: var(--gb-h-fs-ui); font-weight: 500; text-decoration: none; white-space: nowrap; }
.seg a[aria-current] { background: var(--gb-h-surface); color: var(--gb-h-ink); box-shadow: var(--gb-h-shadow-s), 0 0 0 var(--gb-h-hair) var(--gb-h-line-soft); }
.seg .c { font-size: var(--gb-h-fs-eyebrow); font-variant-numeric: tabular-nums; }
.seg a[aria-current] .c { font-weight: 600; }
.seg .short { display: none; }
.filter > summary { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); height: var(--gb-h-ctl-h); padding: 0 var(--gb-h-sp-3); border: var(--gb-h-hair) solid var(--gb-h-line); border-radius: var(--gb-h-r-m); background: transparent; color: var(--gb-h-ink); font-size: var(--gb-h-fs-ui); font-weight: 500; cursor: pointer; white-space: nowrap; }
.filter > summary:hover, .filter[open] > summary { background: var(--gb-h-fill); }
.filter > summary:focus-visible { outline: var(--gb-h-ring) solid var(--gb-h-action); outline-offset: var(--gb-h-hair); }
.filter svg.i { width: var(--gb-h-icon); height: var(--gb-h-icon); color: var(--gb-h-muted); flex: none; }
.filter .menu-list { min-width: var(--gb-h-col-site); max-height: calc(5 * var(--gb-h-sp-8)); overflow-y: auto; }
.filter .menu-list .btn-t { gap: var(--gb-h-sp-2); color: var(--gb-h-ink); font-weight: 500; font-size: var(--gb-h-fs-ui); }
.filter .menu-list [aria-current] { background: var(--gb-h-fill); }
.cap { margin: calc(-1 * var(--gb-h-sp-2)) 0 var(--gb-h-sp-3); color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

.group { margin-top: var(--gb-h-sp-4); }
.group:first-of-type { margin-top: 0; }
.gh { display: flex; align-items: center; gap: var(--gb-h-sp-2); height: var(--gb-h-ctl-h); padding: 0 var(--gb-h-sp-3); background: var(--gb-h-shell); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-meta); font-weight: 600; list-style: none; cursor: pointer; }
.gh::-webkit-details-marker { display: none; }
.gh svg.i:first-child { width: var(--gb-h-fs-meta); height: var(--gb-h-fs-meta); color: var(--gb-h-muted); }
details.group:not([open]) > .gh svg.i:first-child { transform: rotate(-90deg); }
[dir="rtl"] details.group:not([open]) > .gh svg.i:first-child { transform: rotate(90deg); }
.gh .c { color: var(--gb-h-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.gh .why { margin-inline-start: auto; color: var(--gb-h-muted); font-weight: 400; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li .row { border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.row { display: grid; grid-template-columns: var(--gb-h-av-m) minmax(0, 1fr) var(--gb-h-thumb-w) var(--gb-h-col-site) var(--gb-h-col-holder) var(--gb-h-sp-8); column-gap: var(--gb-h-sp-4); align-items: center; padding: var(--gb-h-sp-3); color: var(--gb-h-ink); text-decoration: none; transition: background var(--gb-h-t) var(--gb-h-ease); }
.row.solo { grid-template-columns: var(--gb-h-av-m) minmax(0, 1fr) var(--gb-h-thumb-w) var(--gb-h-col-holder) var(--gb-h-sp-8); }
a.row:hover { background: var(--gb-h-shell); text-decoration: none; }
a.row:focus-visible { outline-offset: calc(-1 * var(--gb-h-ring)); }
.row .body { min-width: 0; }
.row .text { display: block; text-align: left; font-size: var(--gb-h-fs-ui); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[dir=rtl] .row .text { text-align: right; } /* the row's edge, not the note's own direction (dir=auto) */
.rmeta { display: flex; align-items: center; min-width: 0; margin-top: calc(2 * var(--gb-h-hair)); font-size: var(--gb-h-fs-meta); color: var(--gb-h-muted); white-space: nowrap; overflow: hidden; }
.rmeta > span { flex: none; }
.rmeta > span:last-child { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rmeta > * + *::before { content: ""; display: inline-block; width: calc(3 * var(--gb-h-hair)); height: calc(3 * var(--gb-h-hair)); border-radius: 50%; background: var(--gb-h-line-input); margin-inline: var(--gb-h-sp-2); vertical-align: middle; }
.reason { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); color: var(--gb-h-ink); font-weight: 600; }
.reason.loud { color: var(--gb-h-caution); }
.reason.mute { color: var(--gb-h-muted); font-weight: 500; }
.reason .bun { width: var(--gb-h-icon); height: var(--gb-h-icon); color: var(--gb-h-action); flex: none; }
.dot { width: var(--gb-h-dot); height: var(--gb-h-dot); border-radius: 50%; flex: none; display: inline-block; background: var(--gb-h-ink); }
.dot.ok { background: var(--gb-h-dot-ok); }
.dot.warn { background: var(--gb-h-dot-warn); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 calc(1.5 * var(--gb-h-hair)) var(--gb-h-line-input); }
.dot.wait { background: var(--gb-h-line-input); animation: var(--gb-h-pulse); }
.m-only { display: none; }
.diff { display: flex; align-items: center; gap: var(--gb-h-sp-2); margin-top: var(--gb-h-sp-2); font-size: var(--gb-h-fs-meta); color: var(--gb-h-muted); }
.diff s { text-decoration-thickness: calc(1.5 * var(--gb-h-hair)); }
.diff ins { text-decoration: underline var(--gb-h-action) calc(1.5 * var(--gb-h-hair)); text-underline-offset: calc(3 * var(--gb-h-hair)); color: var(--gb-h-ink); font-weight: 600; background: var(--gb-h-tint); border-radius: var(--gb-h-r-s); padding: 0 var(--gb-h-sp-1); }
.diff svg.i { width: var(--gb-h-fs-eyebrow); height: var(--gb-h-fs-eyebrow); }
.thumb { width: var(--gb-h-thumb-w); aspect-ratio: var(--gb-h-shot-ratio); border-radius: var(--gb-h-r-xs); box-shadow: inset 0 0 0 var(--gb-h-hair) var(--gb-h-line-soft); } /* the quiet slot until a page has a screenshot; .thumb img / .thumb.tile fill it */
.site-chip { display: flex; align-items: center; gap: var(--gb-h-sp-2); min-width: 0; font-size: var(--gb-h-fs-meta); color: var(--gb-h-muted); }
.site-chip > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holder { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); height: calc(var(--gb-h-av-s) + 4 * var(--gb-h-hair)); padding-inline: calc(2 * var(--gb-h-hair)) var(--gb-h-sp-2); border-radius: var(--gb-h-r-pill); background: var(--gb-h-fill); font-size: var(--gb-h-fs-meta); font-weight: 500; max-width: 100%; justify-self: start; white-space: nowrap; overflow: hidden; }
.holder.bare { background: transparent; padding: 0; height: auto; justify-self: center; }
.age { grid-column: -2; text-align: end; font-size: var(--gb-h-fs-meta); color: var(--gb-h-muted); font-variant-numeric: tabular-nums; transition: opacity var(--gb-h-t) var(--gb-h-ease); }
.age.quiet { color: var(--gb-h-caution); font-weight: 600; }
.go { grid-row: 1; grid-column: -2; justify-self: end; color: var(--gb-h-action); opacity: 0; transition: opacity var(--gb-h-t) var(--gb-h-ease); }
.age { grid-row: 1; }
a.row:hover .age, a.row:focus-visible .age { opacity: 0; }
a.row:hover .go, a.row:focus-visible .go { opacity: 1; }
.calm { display: flex; align-items: center; gap: var(--gb-h-sp-4); padding: var(--gb-h-sp-5); border-radius: var(--gb-h-r-l); background: var(--gb-h-shell); margin-bottom: var(--gb-h-sp-5); }
.calm > div { flex: 1; min-width: 0; }
.calm .ok { width: var(--gb-h-btn-h); height: var(--gb-h-btn-h); border-radius: 50%; display: grid; place-items: center; background: var(--gb-h-success-tint); color: var(--gb-h-success); flex: none; }
.calm b { display: block; font-weight: 600; }
.calm span:not(.ok) { color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

@media (max-width: 600px) {
  .toolbar { gap: var(--gb-h-sp-2); margin: var(--gb-h-sp-4) 0 var(--gb-h-sp-3); }
  .seg { flex: 1; }
  .seg.icons { flex: none; margin-inline-start: auto; }
  .seg.icons a { flex: none; padding: 0 var(--gb-h-sp-3); height: calc(var(--gb-h-ctl-h) - 6 * var(--gb-h-hair)); }
  .seg a { flex: 1; justify-content: center; padding: 0 var(--gb-h-sp-2); height: calc(var(--gb-h-field-h) - 6 * var(--gb-h-hair)); }
  .seg .long { display: none; } .seg .short { display: inline; }
  .filter > summary { height: var(--gb-h-field-h); width: var(--gb-h-field-h); padding: 0; justify-content: center; }
  .filter .lbl, .filter svg.cd { display: none; }
  .row, .row.solo { grid-template-columns: var(--gb-h-av-m) minmax(0, 1fr) calc(var(--gb-h-thumb-w) * .75); column-gap: var(--gb-h-sp-3); align-items: start; padding: var(--gb-h-sp-3) var(--gb-h-sp-1); }
  .row .text { white-space: normal; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .row .thumb { width: calc(var(--gb-h-thumb-w) * .75); }
  .row .site-chip, .row .holder, .row > .age, .row .go, .rmeta .pg-title, .rmeta .who { display: none; }
  .m-only { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); }
  .rmeta { flex-wrap: wrap; row-gap: calc(2 * var(--gb-h-hair)); column-gap: var(--gb-h-sp-3); white-space: normal; }
  .rmeta > *::before { display: none; }
  .rmeta .reason { flex-basis: 100%; }
  .gh .why { display: none; }
  .calm { flex-wrap: wrap; }
}

/* ---- Package 4: page thumbnails, Sites cards, Site page. Tokens only. ---- */
/* the frame every page screenshot sits in: 16:10, cropped from the top. No screenshot = a favicon tile on the site's identity hue, never a grey box */
.shot { aspect-ratio: var(--gb-h-shot-ratio); overflow: hidden; border-bottom: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.shot:not(.tile) { background: var(--gb-h-shell); } /* the ground behind an <img> while it loads; a tile keeps its identity hue */
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.tile { display: grid; place-content: center; justify-items: center; gap: var(--gb-h-sp-3); color: var(--gb-h-ink); font-size: var(--gb-h-fs-meta); text-align: center; padding: var(--gb-h-sp-4); }
.fav.s { width: var(--gb-h-av-xs); height: var(--gb-h-av-xs); }
.fav.m { width: var(--gb-h-av-m); height: var(--gb-h-av-m); font-size: var(--gb-h-fs-ui); }
.fav.big { width: var(--gb-h-tile-l); height: var(--gb-h-tile-l); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-h2); }
.shot.tile .fav, .thumb.tile .fav { background: var(--gb-h-surface); }
.shot.sm { width: var(--gb-h-thumb-s); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-xs); flex: none; }
.shot.sm.tile { padding: 0; }
.shot.sm.tile span:not(.fav) { display: none; }
.shot.sm .fav.big { width: var(--gb-h-av-s); height: var(--gb-h-av-s); font-size: var(--gb-h-fs-meta); }
.shot.l { border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-l); box-shadow: var(--gb-h-shadow-pop); }
.rowsite { display: flex; align-items: center; gap: var(--gb-h-sp-3); }
.rowsite .host { font-size: var(--gb-h-fs-ui); }

/* Sites: cards, 3 across (2, then 1 on a phone). The whole card is one link, through the host's stretched ::after */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-h-sp-4); margin: 0; padding: 0; list-style: none; }
.scard { position: relative; display: flex; flex-direction: column; background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-l); overflow: hidden; transition: box-shadow var(--gb-h-t) var(--gb-h-ease), border-color var(--gb-h-t) var(--gb-h-ease); }
.scard:hover, .scard:focus-within { border-color: var(--gb-h-line); box-shadow: var(--gb-h-shadow-pop); }
.scard-body { padding: var(--gb-h-sp-4) var(--gb-h-sp-4) var(--gb-h-sp-3); display: grid; gap: var(--gb-h-sp-2); flex: 1; }
.scard-h { display: flex; align-items: center; gap: var(--gb-h-sp-2); min-width: 0; }
.scard-h .host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard-h .tag { flex: none; white-space: nowrap; }
.hero-shot { display: grid; gap: var(--gb-h-sp-2); min-width: 0; }
.shot-rm .btn-t { padding-inline: 0; }
.shot-rm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-h-sp-2); }
.scard-st { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-h-sp-1); font-size: var(--gb-h-fs-meta); }
.meta-i { color: var(--gb-h-muted); }
.scard-st .meta-i.sep { flex-basis: 100%; } /* a status line is a sentence: it takes its own line, so no dot can wrap to a line start */
.meta-i.sep::before { content: none; }
.scard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-h-sp-2); padding: var(--gb-h-sp-3) var(--gb-h-sp-4); border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); font-size: var(--gb-h-fs-meta); color: var(--gb-h-muted); }
.scard-foot b { color: var(--gb-h-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* avatar row: 20px faces overlapping, a surface ring between them, "+N" after three */
.faces { display: inline-flex; align-items: center; flex: none; }
.faces .av { box-shadow: 0 0 0 var(--gb-h-ring) var(--gb-h-surface); }
.faces .av + .av { margin-inline-start: calc(-1 * var(--gb-h-sp-1)); }
.faces .more { margin-inline-start: var(--gb-h-sp-1); color: var(--gb-h-muted); font-size: var(--gb-h-fs-eyebrow); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* Site page: the large framed shot on the start side, the facts on the other */
.site-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gb-h-sp-6); align-items: start; margin-bottom: var(--gb-h-sp-7); }
.site-info { display: grid; gap: var(--gb-h-sp-4); min-width: 0; }
.site-title { display: flex; align-items: center; gap: var(--gb-h-sp-3); min-width: 0; }
.site-info .sub { margin: 0; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.strip > div { display: flex; flex-direction: column; padding: var(--gb-h-sp-3) var(--gb-h-sp-4); }
.strip > div + div { border-inline-start: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.strip > div:first-child { padding-inline-start: 0; }
.site-title h1 { min-width: 0; }
.site-title h1 bdi { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.sites td { vertical-align: middle; }
.tbl .cnt.zero { color: var(--gb-h-muted); }
.tbl .cnt:not(.zero) { color: var(--gb-h-ink); font-weight: 600; }
.seg.icons { flex: none; }
@media (max-width: 900px) { .tbl .hide-w { display: none; } }
.strip dt { color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }
.strip dd { order: -1; margin: 0; font: 600 var(--gb-h-fs-h2)/var(--gb-h-lh-tight) var(--gb-h-font-display); font-variant-numeric: tabular-nums; }
.strip dd.zero { color: var(--gb-h-muted); font-weight: 500; }
.mini { display: grid; grid-template-columns: max-content 1fr; gap: var(--gb-h-sp-2) var(--gb-h-sp-5); margin: 0; font-size: var(--gb-h-fs-ui); }
.mini dt { color: var(--gb-h-muted); }
.mini dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) { .site-hero { grid-template-columns: minmax(0, 1fr); gap: var(--gb-h-sp-5); margin-bottom: var(--gb-h-sp-6); } .strip > div { padding-inline: var(--gb-h-sp-3); } }
@media (max-width: 600px) { .site-notes .sec-head { flex-direction: column; align-items: flex-start; } }

/* The page thumbnail in a note row's slot (Inbox and Site page), with its pin */
.thumb:not(.tile) { background: var(--gb-h-shell); } /* the ground behind an <img> while it loads; a tile keeps its identity hue */
.thumb { position: relative; display: block; overflow: hidden; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb.tile { display: grid; place-items: center; }
.pin-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.pin { r: calc(var(--gb-h-pin) / 2); fill: var(--gb-h-action); stroke: var(--gb-h-surface); stroke-width: var(--gb-h-ring); }
.pin-no { fill: var(--gb-h-on-action); font: 600 var(--gb-h-fs-micro)/1 var(--gb-h-font-display); text-anchor: middle; dominant-baseline: central; }

/* ---- Brief-panel primitives the onboarding card shares (Tali panel/css/brief-panel.css). PR D (the hub profile panel) must not add these a second time. ---- */
.lede { margin: 0; max-width: 68ch; font-size: var(--gb-h-fs-body); color: var(--gb-h-ink); }
.brief-wait { margin: 0; font-size: var(--gb-h-fs-ui); }
.brief-wait .st { font-weight: 500; color: var(--gb-h-muted); }
.sw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--gb-h-sp-1); vertical-align: middle; margin-inline-end: var(--gb-h-sp-2); }
.sw svg { width: var(--gb-h-sp-4); height: var(--gb-h-sp-4); display: block; }
.say { display: grid; gap: var(--gb-h-sp-2); }
.say label { font-size: var(--gb-h-fs-ui); font-weight: 600; }
.input.grow { height: auto; min-height: var(--gb-h-field-h); max-height: calc(var(--gb-h-sp-8) + var(--gb-h-sp-8)); padding: var(--gb-h-sp-2) var(--gb-h-sp-3); line-height: var(--gb-h-lh); resize: vertical; field-sizing: content; }
.say-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gb-h-sp-3); }
.say-foot .meta { padding-top: var(--gb-h-sp-2); }
.kb-off { margin: 0; font-size: var(--gb-h-fs-ui); }
.kb-off .meta { margin-top: var(--gb-h-sp-1); }
@media (max-width: 600px) {
  .say-foot { flex-direction: column; align-items: stretch; }
  .say-foot .btn { height: var(--gb-h-btn-h-l); }
}
.field-note { margin: 0; color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

/* ---- Site onboarding (/sites/new). Tali 2026-10-27, onboarding/DIRECTION.md.
   PROPOSED hub.css additions: Igor appends this block to hub/public/assets/css/hub.css as is.
   Builds on: package 4 (#130: .fav, .shot, .scard, .cards, tokens --gb-h-tile-l / --gb-h-av-xs) and the brief-panel block
   (.sw, .say, .input.grow, .say-foot, .lede, .brief-wait, .kb-off). If either has not landed, append those rules first; none are repeated here.
   Every value is an existing token from tokens.css. No new token; no literal except 0, 1, 100%, auto. ---- */

/* the step bar: four quiet segments, words under them. Ink = done or now, line-soft = to come. Never blue (nothing to press) */
.onb-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-h-sp-1); max-width: var(--gb-h-narrow); margin: 0 0 var(--gb-h-sp-6); padding: 0; list-style: none; }
.onb-bar li { padding-top: var(--gb-h-sp-2); border-top: var(--gb-h-sp-1) solid var(--gb-h-line-soft); font-size: var(--gb-h-fs-eyebrow); font-weight: 500; color: var(--gb-h-muted); }
.onb-bar li.done, .onb-bar li[aria-current] { border-top-color: var(--gb-h-ink); }
.onb-bar li[aria-current] { color: var(--gb-h-ink); font-weight: 600; }

/* two columns: what you do (left), the site card that fills itself in (right). One column under 900 */
.onb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gb-h-sp-7); align-items: start; }
.onb-do { display: grid; gap: var(--gb-h-sp-5); align-content: start; min-width: 0; }
.onb-do > * { margin: 0; }
.onb-do .sub { margin-top: var(--gb-h-sp-2); max-width: 52ch; }
.onb-solo { max-width: var(--gb-h-narrow); } /* screen 1: no card yet, so no second column */

/* screen 1: the address. Field and button share the field height */
.onb-url { display: flex; gap: var(--gb-h-sp-2); }
.onb-url .input { flex: 1; min-width: 0; }
.onb-url .btn { height: var(--gb-h-field-h); }
.onb-url-wrap { display: grid; gap: var(--gb-h-sp-2); }
.onb-busy { display: none; } .onb-busy.on { display: block; } /* the node is always in the page (so its text is announced), shown on submit */
.onb-url-wrap .field-note { margin: 0; color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

/* install steps: the existing .steps list, inside a card, with room for a second line of actions */
.onb-do .steps { border-top: 0; }
.onb-do .steps li { grid-template-columns: var(--gb-h-sp-6) minmax(0, 1fr); align-items: start; padding: var(--gb-h-sp-4); }
.onb-do .steps li > span { display: grid; gap: var(--gb-h-sp-1); min-width: 0; }
.onb-do .steps li .meta { overflow-wrap: anywhere; }
.onb-do .steps .row-btns { margin-top: var(--gb-h-sp-2); }
.onb-do .steps .key { margin: 0; padding: var(--gb-h-sp-2) var(--gb-h-sp-3); font-size: var(--gb-h-fs-ui); }
.onb-do .steps li.done .row-btns, .onb-do .steps li.done .key, .onb-do .steps li.done .meta { display: none; } /* a ticked step folds to its title */

/* the live line: listens on its own (Plausible). Pulse = waiting, tint = it needs you or it worked */
.onb-wait { display: grid; gap: var(--gb-h-sp-2); padding: var(--gb-h-sp-4); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-m); font-size: var(--gb-h-fs-ui); }
.onb-wait p { margin: 0; }
.onb-wait .meta { display: block; }
.onb-wait.is-warn { background: var(--gb-h-caution-tint); border-color: transparent; }
.onb-wait.is-ok { background: var(--gb-h-success-tint); border-color: transparent; }
.onb-wait .st > span { white-space: normal; } /* one child: the label wraps as a block, the dot stays beside the first line (a nowrap flex gave every word its own gap) */
.onb-wait ul { margin: 0; padding-inline-start: var(--gb-h-sp-5); color: var(--gb-h-ink); font-size: var(--gb-h-fs-ui); }
.onb-wait ul li + li { margin-top: var(--gb-h-sp-1); }

/* the site card: the one persistent thing. It grows from "what anyone can see" to "what Good Bunny knows" */
.onb-site { background: var(--gb-h-surface); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-l); min-width: 0; }
.onb-site-head { display: grid; grid-template-columns: var(--gb-h-tile-l) minmax(0, 1fr); gap: var(--gb-h-sp-1) var(--gb-h-sp-4); align-items: center; padding: var(--gb-h-sp-5); }
.onb-site-head .fav { grid-row: span 2; } /* the site favicon tile, fav(host, big): same initial and hue the site keeps on its Sites card */
.onb-site-head h2 { font: 600 var(--gb-h-fs-h2)/var(--gb-h-lh-tight) var(--gb-h-font-display); letter-spacing: var(--gb-h-track-display); overflow-wrap: anywhere; }
.onb-site-head .meta { overflow-wrap: anywhere; }
.onb-site-head .st { font-size: var(--gb-h-fs-meta); }
.onb-part { padding: var(--gb-h-sp-4) var(--gb-h-sp-5) var(--gb-h-sp-5); border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.onb-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-h-sp-3); margin: 0 0 var(--gb-h-sp-3); font-size: var(--gb-h-fs-eyebrow); font-weight: 500; color: var(--gb-h-muted); }
.onb-lbl b { color: var(--gb-h-ink); font-weight: 600; font-size: var(--gb-h-fs-ui); }
.onb-part .facts { padding: 0; gap: var(--gb-h-sp-2) var(--gb-h-sp-5); }
.onb-part .facts dd .meta { display: inline; }
.onb-part .facts code { font-family: var(--gb-h-font-mono); font-size: var(--gb-h-fs-meta); }
.onb-part .lede { font-size: var(--gb-h-fs-ui); }
.onb-part .brief-wait { margin-top: var(--gb-h-sp-4); }
.onb-note.onb-part-note { margin: 0; padding: var(--gb-h-sp-4) var(--gb-h-sp-5); border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.onb-note { margin: var(--gb-h-sp-3) 0 0; color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }

/* a row still being read: muted word + the pulse dot. A row that just arrived flashes the "changed" tint once */
.onb-pend { display: inline-flex; align-items: center; gap: var(--gb-h-sp-2); color: var(--gb-h-muted); }
.onb-pend::before { content: ""; width: var(--gb-h-dot); height: var(--gb-h-dot); border-radius: 50%; background: var(--gb-h-muted); animation: var(--gb-h-pulse); flex: none; }
.onb-later { color: var(--gb-h-muted); }
.onb-no { color: var(--gb-h-muted); }
.onb-part .lede.onb-new, .facts dd.onb-new, .facts dt.onb-new + dd { animation: gb-arrive var(--gb-h-t-slow) var(--gb-h-ease) 1; }
@keyframes gb-arrive { from { background: var(--gb-h-tint); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .onb-part .lede.onb-new, .facts dd.onb-new { animation: none; } }

/* ready: one primary, the correction composer, then a quiet line of next steps */
.onb-next { display: flex; flex-wrap: wrap; gap: var(--gb-h-sp-2) var(--gb-h-sp-5); margin: 0; padding: var(--gb-h-sp-4) 0 0; border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); font-size: var(--gb-h-fs-ui); }
.onb-do .say { padding: var(--gb-h-sp-5); border: var(--gb-h-hair) solid var(--gb-h-line-soft); border-radius: var(--gb-h-r-m); }
.onb-do .say h2 { font-size: var(--gb-h-fs-ui); }

/* an unfinished setup on /sites is a normal package-4 .scard with status "Setting up": no new rules */

@media (max-width: 900px) {
  .onb { grid-template-columns: minmax(0, 1fr); gap: var(--gb-h-sp-6); }
}
@media (max-width: 600px) {
  .onb-bar { max-width: none; margin-bottom: var(--gb-h-sp-5); }
  .onb-url { flex-direction: column; }
  .onb-url .btn { height: var(--gb-h-btn-h-l); }
  .onb-url .input { flex: none; height: var(--gb-h-btn-h-l); } /* column: the flex:1 of the row layout would stretch it to the button's height */
  .onb-do > .btn-p, .onb-do .row-btns > .btn-p { width: 100%; height: var(--gb-h-btn-h-l); }
  .onb-site-head, .onb-part, .onb-part-note { padding-inline: var(--gb-h-sp-4); }
  .onb-part .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .onb-part .facts dd { margin-bottom: var(--gb-h-sp-3); }
  .onb-do .say { padding: var(--gb-h-sp-4); }
  .onb-do .say-foot { align-items: flex-start; } /* Send keeps its own width; the 48px height stays */
  .onb-do .say .btn { height: var(--gb-h-btn-h-l); }
}

/* ---- auth + onboarding: the split (field panel | form column) and the onboarding rail. Tokens only (Tali, auth-v2). ---- */
/* ---------- the split: field panel | form column ---------- */
.split { display: grid; grid-template-columns: var(--gb-h-auth-cols); min-height: 100vh; background: var(--gb-h-shell); }
.split-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--gb-h-sp-6); min-height: 100vh; padding: var(--gb-h-sp-7); overflow: hidden; background: var(--gb-h-field); color: var(--gb-h-on-field); }
.split-logo { display: inline-block; justify-self: start; }
.split-logo img { display: block; height: var(--gb-h-logo-h); width: auto; }
.split-logo:focus-visible { outline-color: var(--gb-h-on-field); }
.split-visual { align-self: center; min-width: 0; margin: 0; }
.split-points { display: flex; flex-wrap: wrap; gap: var(--gb-h-sp-2) var(--gb-h-sp-5); margin: 0; padding: var(--gb-h-sp-4) 0 0; list-style: none; border-top: var(--gb-h-hair) solid var(--gb-h-line-field); font-size: var(--gb-h-fs-ui); color: var(--gb-h-on-field-2); }
.split-points b { color: var(--gb-h-on-field); font-weight: 600; }
.split-cap { margin: 0; padding-top: var(--gb-h-sp-4); border-top: var(--gb-h-hair) solid var(--gb-h-line-field); font-size: var(--gb-h-fs-ui); color: var(--gb-h-on-field-2); }

.split-main { display: flex; flex-direction: column; min-width: 0; max-width: none; margin: 0; padding: var(--gb-h-sp-6) var(--gb-h-sp-7); }
.split-top { display: flex; align-items: center; justify-content: flex-end; gap: var(--gb-h-sp-2); min-height: var(--gb-h-btn-h); margin: 0; font-size: var(--gb-h-fs-ui); color: var(--gb-h-muted); }
.split-top form { margin: 0; }
.split-top .btn-t { height: auto; padding: 0; font-size: inherit; font-weight: 400; text-decoration: underline; }
.split-body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: var(--gb-h-narrow); padding-block: var(--gb-h-sp-7); }
.split-body > * { margin: 0; }
.split-body > * + * { margin-top: var(--gb-h-sp-5); }
.split-head { display: grid; gap: var(--gb-h-sp-3); }
.split-head p { margin: 0; }
.eyebrow { font: 500 var(--gb-h-fs-eyebrow)/1 var(--gb-h-font-display); letter-spacing: var(--gb-h-track-eyebrow); text-transform: uppercase; color: var(--gb-h-muted); }
.split-body .stack { gap: var(--gb-h-sp-5); }
.split-body .stack .btn-l { margin-top: var(--gb-h-sp-2); }
.split-fine { color: var(--gb-h-muted); font-size: var(--gb-h-fs-meta); }
.split-fine a { color: inherit; }
.split-body .connect-host { margin-top: var(--gb-h-sp-4); }
.split-body .connect-host + .mono, .split-body .mono + .connect-back, .split-body .connect-key + .note { margin-top: var(--gb-h-sp-2); }

/* ---------- panel 1: the product moment (a client page, pins, the note card, the agency pill) ---------- */
.moment { position: relative; width: 100%; }
.m-page { width: 100%; max-width: var(--gb-h-moment-w); margin-inline-start: auto; position: relative; background: var(--gb-h-surface); border-radius: var(--gb-h-r-l); box-shadow: var(--gb-h-shadow-pop); overflow: hidden; }
.m-bar { display: flex; align-items: center; height: var(--gb-h-sp-6); padding: 0 var(--gb-h-sp-4); border-bottom: var(--gb-h-hair) solid var(--gb-h-line-soft); color: var(--gb-h-muted); font: 400 var(--gb-h-fs-micro)/1 var(--gb-h-font-mono); }
.m-shot { position: relative; aspect-ratio: var(--gb-h-shot-ratio); }
.m-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.m-pin { position: absolute; width: var(--gb-h-av-s); height: var(--gb-h-av-s); margin: calc(var(--gb-h-av-s) / -2) 0 0 calc(var(--gb-h-av-s) / -2); border-radius: 50%; display: grid; place-items: center; background: var(--gb-h-action); color: var(--gb-h-on-action); box-shadow: 0 0 0 var(--gb-h-ring) var(--gb-h-surface), var(--gb-h-shadow-s); font: 600 var(--gb-h-fs-micro)/1 var(--gb-h-font-display); }
.m-pin.p1 { left: 21%; top: 69%; } .m-pin.p3 { left: 84%; top: 24%; }
.m-pill { position: absolute; inset-inline-end: var(--gb-h-sp-4); bottom: var(--gb-h-sp-4); }
.m-pill .pill { box-shadow: var(--gb-h-shadow-pop); }
.m-card { position: relative; margin-top: calc(var(--gb-h-sp-7) * -1); width: var(--gb-h-note-w); display: grid; gap: var(--gb-h-sp-3); padding: var(--gb-h-sp-4); background: var(--gb-h-surface); color: var(--gb-h-ink); border-radius: var(--gb-h-r-l); box-shadow: var(--gb-h-shadow-pop); font-size: var(--gb-h-fs-ui); }
.m-card p { margin: 0; }
.m-who { display: flex; align-items: center; gap: var(--gb-h-sp-2); font-size: var(--gb-h-fs-meta); }
.m-who b { font-weight: 600; }
.m-who .meta { display: inline; }
.m-reply { display: grid; gap: var(--gb-h-sp-2); padding-top: var(--gb-h-sp-3); border-top: var(--gb-h-hair) solid var(--gb-h-line-soft); }
.m-card .av.bot { background: var(--gb-h-chrome); color: var(--gb-h-chrome-text); }
.m-card .av.bot svg { width: var(--gb-h-sp-3); height: var(--gb-h-sp-3); }
.m-fixed { display: inline-flex; justify-self: start; align-items: center; gap: var(--gb-h-sp-2); padding: var(--gb-h-sp-1) var(--gb-h-sp-2); border-radius: var(--gb-h-r-s); background: var(--gb-h-success-tint); color: var(--gb-h-success); font-size: var(--gb-h-fs-meta); font-weight: 600; }

/* ---------- onboarding: the rail (a narrow field that carries the four steps) ---------- */
.split.is-rail { grid-template-columns: var(--gb-h-rail-w) minmax(0, 1fr); }
.is-rail .split-panel { grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0; padding: var(--gb-h-sp-6); }
.is-rail .split-main { padding: var(--gb-h-sp-6) var(--gb-h-sp-7) var(--gb-h-sp-8); }
.is-rail .split-body { flex: none; justify-content: flex-start; max-width: var(--gb-h-wrap); padding-block: var(--gb-h-sp-6) 0; }
.is-rail .onb-solo { max-width: var(--gb-h-narrow); }
.is-rail .split-body:has(.onb-solo) { flex: 1; justify-content: center; padding-bottom: var(--gb-h-sp-8); } /* Address is a form moment: it sits where the auth form sits */
.rail-site { margin: 0; display: grid; gap: var(--gb-h-sp-1); padding-top: var(--gb-h-sp-7); }
.rail-site span { font-size: var(--gb-h-fs-eyebrow); color: var(--gb-h-on-field-2); font-weight: 500; }
.rail-site b { font: 600 var(--gb-h-fs-h2)/var(--gb-h-lh-tight) var(--gb-h-font-display); letter-spacing: var(--gb-h-track-display); overflow-wrap: anywhere; }
/* the same <ol class="onb-bar"> as today, restyled on the field: vertical with a number on the desktop rail, four segments in the phone band */
.is-rail .onb-bar { display: grid; grid-template-columns: none; gap: 0; max-width: none; margin: 0; padding: var(--gb-h-sp-6) 0 0; counter-reset: s; }
.is-rail .onb-bar li { counter-increment: s; display: grid; grid-template-columns: var(--gb-h-sp-5) minmax(0, 1fr); gap: var(--gb-h-sp-3); align-items: center; height: var(--gb-h-btn-h-l); padding: 0; border: 0; font-size: var(--gb-h-fs-ui); font-weight: 500; color: var(--gb-h-on-field-2); }
.is-rail .onb-bar li::before { content: counter(s); width: var(--gb-h-sp-5); height: var(--gb-h-sp-5); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 var(--gb-h-hair) var(--gb-h-line-field); font: 500 var(--gb-h-fs-meta)/1 var(--gb-h-font-display); }
.is-rail .onb-bar li.done { color: var(--gb-h-on-field); }
.is-rail .onb-bar li.done::before { content: "\2713"; background: var(--gb-h-on-field); color: var(--gb-h-field); box-shadow: none; }
.is-rail .onb-bar li[aria-current] { color: var(--gb-h-on-field); font-weight: 600; }
.is-rail .onb-bar li[aria-current]::before { box-shadow: inset 0 0 0 var(--gb-h-ring) var(--gb-h-on-field); color: var(--gb-h-on-field); }
.rail-foot { align-self: end; display: flex; align-items: center; gap: var(--gb-h-sp-2); margin: 0; padding-top: var(--gb-h-sp-4); border-top: var(--gb-h-hair) solid var(--gb-h-line-field); font-size: var(--gb-h-fs-meta); color: var(--gb-h-on-field-2); min-width: 0; }
.rail-foot b { color: var(--gb-h-on-field); font-weight: 600; }
.rail-foot .acct-tile { background: var(--gb-h-on-field); color: var(--gb-h-field); }
.rail-foot span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- under 900 (the split-at breakpoint; CSS cannot read a var in @media): the panel becomes a band on top, the form column follows, the top link goes last ---------- */
@media (max-width: 900px) {
  .split, .split.is-rail { display: block; }
  .split-panel { min-height: 0; grid-template-rows: auto; gap: var(--gb-h-sp-5); padding: var(--gb-h-sp-4) var(--gb-h-sp-4) var(--gb-h-sp-5); }
  .split-points, .split-cap { display: none; }
  .is-quiet .split-visual { display: none; } /* sent, expired, Connect: a task in hand, the band is the lockup only */
  .split-main { padding: var(--gb-h-sp-5) var(--gb-h-sp-4) var(--gb-h-sp-6); }
  .split-body { flex: none; max-width: none; padding-block: 0; }
  .split-top { order: 2; justify-content: flex-start; margin-top: var(--gb-h-sp-5); }
  .split-body .btn-l { width: 100%; }
  /* panel 1: the page alone, cropped to the top of the card, no pill */
  .m-pill, .m-card { display: none; }
  .m-pin.p1 { left: 24%; top: 66%; }
  .split-panel:has(.moment) { max-height: var(--gb-h-band-1); }
  /* onboarding: the rail becomes a band: logo, the site, four segments */
  .is-rail .split-panel { padding: var(--gb-h-sp-4); gap: var(--gb-h-sp-3); }
  .rail-site { padding-top: var(--gb-h-sp-2); grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--gb-h-sp-2); }
  .rail-site b { font-size: var(--gb-h-fs-body); }
  .rail-foot { display: none; }
  .is-rail .onb-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-h-sp-1); padding: var(--gb-h-sp-2) 0 0; }
  .is-rail .onb-bar li { display: block; height: auto; padding-top: var(--gb-h-sp-2); border-top: var(--gb-h-sp-1) solid var(--gb-h-line-field); font-size: var(--gb-h-fs-eyebrow); }
  .is-rail .onb-bar li::before { display: none; }
  .is-rail .onb-bar li.done, .is-rail .onb-bar li[aria-current] { border-top-color: var(--gb-h-on-field); }
  .is-rail .split-main { padding: var(--gb-h-sp-5) var(--gb-h-sp-4) var(--gb-h-sp-6); }
  .is-rail .split-body { padding-top: 0; }
}

/* ---------- the Setting up card: one new line in the existing .scard-foot (the step it stopped at) ---------- */
.scard-foot .onb-step { color: var(--gb-h-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.split-body .stack .cf-turnstile:empty { display: none; }