.screen.grouped { background: var(--grouped); }
  .screen.grouped .appheader,
  .screen.grouped .segmented-wrap { background: var(--grouped); }

  /* screen 1 */
  .bb-inbox .card { box-shadow: none; }
  .bb-inbox .scroll { padding-bottom: 40px; }
  .bb-inbox .edge {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(246, 246, 244, 0), var(--grouped));
    pointer-events: none;
  }

  /* screen 2 */
  .bb-detail { background: var(--paper); }
  .bb-detail .scroll { padding-bottom: 8px; }
  .bb-detail h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.024em;
    line-height: 1.22;
  }
  .bb-detail .recordMeta {
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 13px;
    letter-spacing: -0.004em;
  }
  .bb-detail .recordMeta b { color: var(--ink-2); font-weight: 500; }
  .bb-detail .subhead {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 13px;
  }
  .bb-detail .topPad { padding-top: 6px; }



  /* ── shared primitives for the full screen set ── */
  .link { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
  .chip.on { background: color-mix(in srgb, var(--green) 9%, var(--paper)); color: var(--green); }

  .bb-search .backdrop { position: absolute; z-index: 3; inset: 0; background: rgba(19, 19, 17, 0.3); }
  .sheet {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 16px 34px;
    border-radius: 18px 18px 0 0;
    background: var(--paper);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.16);
  }
  .grabber { display: block; width: 36px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--grouped-2); }
  .sheethead { display: flex; align-items: center; justify-content: space-between; }
  .sheethead b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .sheetlabel { margin: 18px 0 8px; color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
  .sheet .chiprow { margin-top: 0; }
  .sheet .chip { height: 30px; border-radius: 9px; }
  .sheet .actionbar { padding: 22px 0 0; }

  mark { border-radius: 6px; background: color-mix(in srgb, var(--amber) 14%, transparent); color: inherit; }

  .diffmeta { color: var(--ink-3); font-size: 13px; }
  .diffline { padding: 11px 13px; border-radius: 10px; font-size: 14.5px; letter-spacing: -0.006em; line-height: 1.45; }
  .diffline.rem { background: var(--grouped-2); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
  .diffline.add { margin-top: 6px; background: var(--green-soft); color: var(--ink); }

  .trow { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; padding: 11px 16px; }
  .trow + .trow::before { position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: var(--line-soft); content: ''; }
  .trow .t { padding-top: 2px; color: var(--ink-4); font-size: 12px; font-variant-numeric: tabular-nums; }
  .trow .d { font-size: 14px; letter-spacing: -0.006em; }
  .trow .d span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12.5px; }

  .thumb { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grouped-2); color: var(--ink-4); }
  .brow { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; padding: 11px 16px; }
  .brow + .brow::before { position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: var(--line-soft); content: ''; }
  .brow .bt { overflow: hidden; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
  .brow .bm { margin-top: 3px; color: var(--ink-3); font-size: 12px; letter-spacing: -0.004em; }

  .bb-connect .body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px 20px; text-align: center; }

  .bb-connect .stepbar { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 2px 20px 0; }
  .bb-connect .dots { display: flex; gap: 6px; }
  .bb-connect .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); opacity: 0.5; }
  .bb-connect .dots i.on { width: 18px; border-radius: 3px; background: var(--ink); opacity: 1; }

  .editor { margin: 0 16px; padding: 14px 15px 12px; border-radius: var(--radius-card); background: var(--paper); }
  .editor p { min-height: 128px; font-size: 14.5px; letter-spacing: -0.006em; line-height: 1.52; }
  .editor .efoot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--ink-4); font-size: 12px; }
  .logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ink); color: #fff; }
  .bb-connect h1 { margin-top: 20px; font-size: 24px; font-weight: 600; letter-spacing: -0.024em; }
  .bb-connect .ledec { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; letter-spacing: -0.006em; line-height: 1.5; }
  .bb-connect .works { margin-top: 24px; color: var(--ink-3); font-size: 12.5px; }
  .bb-connect .actions { display: flex; width: 100%; flex-direction: column; gap: 8px; margin-top: 26px; }
  .bb-connect .actions .btn { flex: none; }
  .bb-connect .fine { margin-top: 14px; color: var(--ink-4); font-size: 12px; }

  /* ── design language: precision console ─────────────────── */
  .screen {
    --radius-card: 8px;
    --radius-row: 8px;
    --btn-r: 8px;
    --btn-h: 48px;
    --btn-h-sm: 34px;
    --btn-pad: 16px;
    --btn-pad-bar: 10px;
    --btn-icon: 40px;
    --btn-min: 84px;
  }

  .bb-auth .wordmark { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; }
  .bb-auth .authhero .brandmark { border-radius: 18px; background: #171717; }
  .bb-auth .authhero .brandmark svg { width: 36px; height: 36px; }

  .screen .grouphead {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .screen .section h3 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .screen .navbar .navTitle {
    overflow: hidden;
    max-width: 62%;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .screen .btn {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .screen .btn.ghost {
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 14.5px;
  }

  .screen .card,
  .screen .panel,
  .screen .editor,
  .screen .sheet { border-radius: 8px; }

  .screen .sheet { border-radius: 12px 12px 0 0; }

  .screen .chip { border-radius: 6px; font-size: 11.5px; }
  .screen .thumb { border-radius: 6px; }
  .screen .field { border-radius: 8px; }
  .screen .avatar { border-radius: 50%; }
  .screen .segmented { border-radius: 8px; }
  .screen .segmented button { border-radius: 6px; }

  .screen .appheader h1 { font-size: 27px; }
  .screen .appheader .sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* On a grouped canvas the page itself is --grouped, so a .panel painted
     with the same token disappears into the page. Flip it to the raised
     paper surface here, exactly as vika.html does with `.vika .panel`. */
  .screen.grouped .panel { background: var(--paper); }

  .screen .prow .k,
  .screen .prow .v,
  .screen .receipt,
  .screen .sheetlabel { font-family: var(--mono); }

  /* a run log is machine output: timestamps and measured values stay mono,
     the event sentence stays in the text face */
  .screen .trow .t { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-3); }
  .screen .trow .d .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; }


  /* ── native mobile layout · Busabase app shell ─────────────────────────────
     Mirrors apps/busabase-mobile: theme/tokens.ts, native-screen-layout,
     native-list, native-selection-controls, native-screen-states, ui/Button,
     review/components/ChangeRequestCard + StatusBadge. Fraunces is the app's
     heading face; body stays on the system sans. */
  .screen.native {
    --n-r: 6px;
    --n-r-sm: 4px;
    --n-bg: #f1f3f3;
    --n-surface: #f9fafa;
    --n-fg: #161818;
    --n-muted-fg: #6f7373;
    --n-muted: #e6e9e9;
    --n-border: #d6dada;
    --n-primary: #161818;
    --n-primary-fg: #f1f3f3;
    --n-merged: #5e8c6a;
    --n-merged-text: #406c4c;
    --n-review: #c79a3e;
    --n-review-text: #7f6221;
    --n-rejected: #b95b3f;
    --n-rejected-text: #9a4531;
    background: var(--n-bg);
    color: var(--n-fg);
    font-size: 15px;
    line-height: 22px;
  }

  .n-header {
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--n-border);
  }
  .n-menu {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--n-r);
    background: var(--n-muted);
    color: var(--n-fg);
  }
  .n-titleblock {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .n-h1 {
    overflow: hidden;
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 28px;
  }
  .n-h1.clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .n-sub {
    overflow: hidden;
    color: var(--n-muted-fg);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .n-scroll { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 36px; }
  .n-scroll.with-foot { padding-bottom: 16px; }

  .n-seg {
    display: flex;
    gap: 3px;
    margin: 10px 20px 2px;
    min-height: 34px;
    padding: 3px;
    border: 1px solid var(--n-border);
    border-radius: var(--n-r);
    background: var(--n-muted);
  }
  .n-segbtn {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: var(--n-r-sm);
    background: none;
    color: var(--n-muted-fg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
  }
  .n-segbtn.on { background: var(--n-surface); color: var(--n-fg); }
  .n-segbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--n-surface);
    color: var(--n-muted-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
  }
  .n-segbtn.on .n-segbadge { background: var(--n-primary); color: var(--n-primary-fg); }

  .n-section { margin: 10px 20px 0; }
  .n-sechead {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    padding: 4px 8px;
    border-radius: var(--n-r-sm);
    background: var(--n-muted);
    color: var(--n-muted-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 14px;
    text-transform: uppercase;
  }
  .n-sechead span { font-variant-numeric: tabular-nums; }

  .n-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--n-border);
  }
  .n-list > :last-child { border-bottom: 0; }
  .n-row-lead {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--n-muted-fg);
  }
  .n-row-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .n-row-titleline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .n-row-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .n-row-meta {
    flex: none;
    color: var(--n-muted-fg);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
  }
  .n-row-sub {
    overflow: hidden;
    color: var(--n-muted-fg);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .n-row-trail {
    display: flex;
    flex: none;
    align-items: flex-end;
    max-width: 46%;
  }

  .n-crrow {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 52px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--n-border);
  }
  .n-cr-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--n-review);
  }
  .n-cr-title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .n-cr-meta {
    overflow: hidden;
    padding-left: 16px;
    color: var(--n-muted-fg);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .n-crrow .n-cr-dot { position: absolute; }
  .n-crrow { position: relative; padding-left: 30px; }
  .n-cr-dot { top: 16px; left: 14px; }
  .n-cr-dot[data-state='approved'],
  .n-cr-dot[data-state='merged'] { background: var(--n-merged); }
  .n-cr-dot[data-state='rejected'] { background: var(--n-rejected); }

  .n-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--n-merged) 12%, transparent);
    color: var(--n-merged-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 14px;
    white-space: nowrap;
  }
  .n-badge[data-state='review'] {
    background: color-mix(in srgb, var(--n-review) 12%, transparent);
    color: var(--n-review-text);
  }
  .n-badge[data-state='rejected'] {
    background: color-mix(in srgb, var(--n-rejected) 12%, transparent);
    color: var(--n-rejected-text);
  }

  .n-fblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--n-border);
  }
  .n-flabel {
    color: var(--n-muted-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 14px;
    text-transform: uppercase;
  }
  .n-fvalue { font-size: 15px; line-height: 22px; }
  .n-proposed {
    display: inline;
    border-radius: var(--n-r-sm);
    padding: 2px 4px;
    background: var(--n-muted);
    color: var(--n-fg);
  }

  .n-foot {
    flex: none;
    padding: 12px 20px 8px;
    /* The app draws this edge with `tokens.border` (`#D6DADA`), which reads as a
       dark rule at deck size against a footer surface that is already a step
       lighter than the page; the author asked for it to come down. */
    border-top: 1px solid var(--n-muted);
    background: var(--n-surface);
  }
  .n-actionbar { display: flex; flex-direction: column; gap: 10px; }
  .n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--n-r);
    background: none;
    color: var(--n-fg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 22px;
  }
  .n-btn.primary { background: var(--n-primary); color: var(--n-primary-fg); }
  .n-btn.ghost { border: 1px solid var(--n-border); color: var(--n-fg); }

  .n-home {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin-top: auto;
  }
  .n-home i { width: 139px; height: 5px; border-radius: 3px; background: var(--n-fg); opacity: 0.8; }
  .n-home.on-surface { margin-top: 0; background: var(--n-surface); }