/* Harness Lab app: styles. Hand-written in tools/app/; `kb regen` copies this file into views/app/.
   The colours, fonts (@font-face), type scale, radius scale, elevation and motion classes live in tokens.css (b35: the Night
   Shift kit), which index.html loads first. Light and dark follow the system; the profile menu's Theme row and ?theme=dark|light
   set data-theme on <html> (theme.js applies them before first paint). This file holds no colour literal: it uses var().
   Colour names are the kit's (var(--foreground), --surface-1, --primary, --success-text ...); the legacy aliases are gone (b35 integ-6). */
:root {
  /* space (4 px base), radius (10 px until Phase 2 changes the buttons), type scale in px (the kit's rem scale is --text-*) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 10px; --radius-s: 6px; --radius-xs: 4px;
  --fs-xs: 12px; --fs-0: 13px; --fs-1: 15px; --fs-2: 17px; --fs-3: 21px; --fs-4: 28px; --fs-5: 40px;
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }   /* a focused name is never hidden under the sticky top bar */
body { margin: 0; background: var(--background); color: var(--foreground); font-size: var(--fs-1); line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4 { line-height: 1.2; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ================================================================ b35 lane P: primitives and the profile-menu pages
   Night Shift. One definition per selector. Buttons, icon buttons, badges, cards, icon tiles, fields, sheets, menus, tooltips, tables,
   tabs, toasts, skeleton and empty state; then the pages of the profile menu. Kit token names only; logical properties. */

/* buttons: primary (the one action), secondary (the default), ghost, ai (the brain will run), destructive (.danger is the old name), link.
   32 / 40 / 46 px; 44 on a touch screen. Every one has hover, focus-visible, active, disabled and loading. */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--foreground); box-shadow: inset 0 1px 0 var(--highlight);
  font: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out-quart), background-color 160ms var(--ease-out-quart),
    border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart); }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; box-shadow: none; cursor: not-allowed; transform: none; }
.btn .icon { flex: none; }
.btn.primary { border-color: transparent; background: var(--primary); color: var(--primary-foreground); box-shadow: inset 0 1px 0 var(--sheen); }
.btn.primary:hover { background: var(--primary-hover); box-shadow: var(--glow-primary), inset 0 1px 0 var(--sheen); }
.btn.ai { border-color: transparent; background: var(--ai-solid); color: var(--ai-solid-foreground); box-shadow: inset 0 1px 0 var(--sheen); }
.btn.ai:hover { background: var(--ai-solid); filter: brightness(1.1); box-shadow: var(--glow-ai), inset 0 1px 0 var(--sheen); }
.btn.primary::after, .btn.ai::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 30%, var(--sheen) 50%, transparent 70%); transition: transform 700ms var(--ease-out-quart); }
.btn.primary:hover::after, .btn.ai:hover::after { transform: translateX(130%); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted-foreground); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); color: var(--foreground); }
.btn.danger, .btn.destructive { border-color: color-mix(in oklch, var(--destructive) 30%, transparent); background: var(--destructive-soft);
  color: var(--destructive-text); box-shadow: none; }
.btn.danger:hover, .btn.destructive:hover { background: color-mix(in oklch, var(--destructive) 20%, transparent); }
.btn.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--primary-text); font-weight: 500; }
.btn.link:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.btn.small, .btn.sm { min-height: 32px; padding: 0 var(--s3); font-size: var(--text-sm); }
.btn.lg { min-height: 46px; padding: 0 var(--s5); font-size: var(--text-base); }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent;
  border-radius: 50%; animation: btn-spin 700ms linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.link-btn, .linklike { font: inherit; cursor: pointer; border: 0; background: none; color: var(--primary-text); padding: 0; }
.link-btn:hover, .linklike:hover { text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }

/* icon buttons: the ghost recipe, 40 px (44 on touch), radius-md, not round; the send button of the composer stays round */
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent;
  border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-quart), background-color 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart); }
.icon-btn:hover { background: var(--surface-3); color: var(--foreground); }
.icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.icon-btn:active { transform: scale(0.94); background: var(--surface-3); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; transform: none; }
.icon-btn .icon { display: block; }
.composer .icon-btn { width: 44px; height: 44px; border-radius: 50%; }   /* the composer's tools stay round and 44 px (lane A may restyle them) */

/* fields: sunken fill, input-contrast border, a darker border on hover, primary border and a 3 px halo on focus, red when invalid */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  font: inherit; font-size: var(--text-base); color: var(--foreground); max-width: 100%; min-height: 40px; padding: 0 var(--s3);
  background: var(--bg-sunken); border: 1px solid var(--input); border-radius: var(--radius-md);
  transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart), background-color 150ms var(--ease-out-quart); }
textarea { width: 100%; resize: vertical; padding: var(--s2) var(--s3); line-height: 1.5; }
select { cursor: pointer; }
select option { color: var(--foreground); background: var(--surface-2); }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--subtle-foreground); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--destructive); }
input[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
::placeholder { color: var(--subtle-foreground); opacity: 1; }
input[type="file"] { font: inherit; font-size: var(--text-sm); color: var(--foreground); max-width: 100%; min-height: 0; padding: 0; border: 0; background: none; }
input[type="file"]::file-selector-button { font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; margin-inline-end: var(--s3);
  min-height: 36px; padding: 0 var(--s3); color: var(--foreground); background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); }
input[type="file"]::file-selector-button:hover { background: var(--surface-3); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.field { display: flex; flex-direction: column; gap: 6px; margin: var(--s3) 0 0; }
.field-label { font-size: var(--text-sm); font-weight: 550; color: var(--muted-foreground); }
.hint { font-size: var(--text-xs); color: var(--subtle-foreground); }
.form-error { color: var(--destructive-text); margin: var(--s2) 0 0; font-size: var(--text-sm); }
.form-ok { color: var(--success-text); margin: var(--s2) 0 0; font-size: var(--text-sm); font-weight: 600; }
.form-row { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.form-row .field { flex: 1 1 200px; }
.check { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s3); font-size: var(--text-sm); cursor: pointer; }

/* badges: one .badge with tones. The old badge-like classes below are the same pill with their tone. A word always sits next to
   the colour. Tones: live (success), ai, info (primary), warning, danger, neutral; .ribbon (pink) is only for "New" and "Draft". */
.badge, .status, .cu-state, .seg-tag, .differs-tag { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  min-height: 24px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent;
  color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 550; line-height: 1.2; white-space: nowrap; }
.badge .icon, .seg-tag .icon, .status .icon, .cu-state .icon { width: 12px; height: 12px; }
.badge.live, .badge.tone-live, .badge.tone-success, .badge.mode-live, .status-resolved, .cu-state.st-done, .cu-state.st-finished, .seg-tag.fact {
  background: var(--success-soft); color: var(--success-text); border-color: color-mix(in oklch, var(--success) 25%, transparent); }
.badge.ai, .badge.tone-ai { background: var(--ai-soft); color: var(--ai-text); border-color: color-mix(in oklch, var(--ai) 30%, transparent); }
.badge.info, .badge.tone-info, .cu-state.st-running, .seg-tag.opinion {
  background: var(--primary-soft); color: var(--primary-text); border-color: color-mix(in oklch, var(--primary) 30%, transparent); }
.badge.warning, .badge.warn, .badge.tone-warning, .badge.mode-test, .status-open, .differs-tag, .cu-state.st-waiting, .cu-state.st-waiting_for_you,
.cu-state.st-paused, .cu-state.st-pausing, .cu-state.st-intake, .cu-state.st-out_of_date {
  background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in oklch, var(--warning) 30%, transparent); }
.badge.danger, .badge.tone-danger, .badge.mode-off, .cu-state.st-not_verified, .cu-state.st-failed, .cu-state.st-cancelled {
  background: var(--destructive-soft); color: var(--destructive-text); border-color: color-mix(in oklch, var(--destructive) 30%, transparent); }
.badge.neutral, .badge.tone-neutral, .badge.mode, .status-declined, .cu-state.st-queued, .seg-tag.gap { background: transparent; color: var(--muted-foreground); }
.seg-tag.gap { border-style: dashed; }
/* a tag is text that may wrap (a short note on a card), so it is a small rounded box, not a one-line pill */
.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--muted-foreground);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.4; }
.badge.ribbon { background: var(--ribbon-soft); color: var(--ribbon-text); border-color: color-mix(in oklch, var(--ribbon) 30%, transparent); }
.badge-dot, .badge.live::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: var(--animate-live); }
.badge-dot { display: inline-block; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-inline-start: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--destructive); color: var(--primary-foreground); font-size: var(--text-2xs); font-weight: 700; line-height: 1; }

/* icon tiles: an icon in a soft tile (iconTile in app.js); tone primary, ai or success */
.icon-tile { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
  border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); }
.icon-tile.tone-ai, .icon-tile.ai { background: var(--ai-soft); color: var(--ai-text); border-color: color-mix(in oklch, var(--ai) 20%, transparent); }
.icon-tile.tone-success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in oklch, var(--success) 20%, transparent); }
.icon-tile.tone-warning { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in oklch, var(--warning) 25%, transparent); }
.icon-tile.tone-danger { background: var(--destructive-soft); color: var(--destructive-text); border-color: color-mix(in oklch, var(--destructive) 25%, transparent); }
.icon-tile .icon { display: block; }
.icon-dir:dir(rtl) { transform: scaleX(-1); }

/* cards: one recipe (surface-1, hairline, card elevation, radius-lg, 16 to 20 px). `lift` goes on a card that opens something; no coloured rails. */
.card, .auth-card, .answer { background: var(--surface-1); background-image: var(--gradient-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); padding: var(--s4) var(--s5); }
.card h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 6px; }
.card p, .card ul { margin: 6px 0; }
.card.lift, a.card:hover, .card[role="link"]:hover { border-color: var(--border-strong); }
a.card { display: block; color: inherit; text-decoration: none; }
.inset { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-sunken); }

/* menus and popovers: surface-2, strong hairline, popover elevation, radius-xl; rows 32 px (44 on touch) with a 16 px icon */
.menu-list, .conv-menu-list, .voice-menu, .cu-more-list, .search-results { background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--elevation-pop); padding: var(--s1); list-style: none; animation: pop-in 150ms var(--ease-out-quart); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.profile-menu .menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 6; min-width: 268px; margin: 0; list-style: none; }
.profile-menu .menu-list[hidden] { display: none; }
.menu-item, .menu-row, .voice-lang, .search-results a, .menu-list .sign-out { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px;
  padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--muted-foreground); font: inherit; font-size: var(--text-base);
  text-align: start; text-decoration: none; cursor: pointer; transition: background-color 120ms var(--ease-out-quart), color 120ms var(--ease-out-quart); }
/* the conversation and voice menus hold actions with consequences: always a finger-sized row */
.menu-row, .voice-lang { min-height: 44px; }
.menu-item:hover, .menu-row:hover, .voice-lang:hover, .search-results a:hover, .search-results a:focus-visible, .menu-list .sign-out:hover {
  background: var(--surface-3); color: var(--foreground); text-decoration: none; }
.menu-item:focus-visible, .menu-row:focus-visible, .voice-lang:focus-visible, .menu-list .sign-out:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.menu-item:active, .menu-row:active, .voice-lang:active, .menu-list .sign-out:active { background: var(--surface-3); }
.menu-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.menu-item .icon, .menu-row .icon, .sign-out .icon { flex: none; }
.menu-text { flex: 1 1 auto; min-width: 0; }
.menu-item .count { margin-inline-start: auto; }
.menu-list .btn.sign-out { min-height: 32px; padding: 0 10px; border: 0; box-shadow: none; font-weight: 400; justify-content: flex-start; }
.menu-row.danger, .menu-row.danger:hover { color: var(--destructive-text); }
.menu-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 var(--s3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--foreground);
  box-shadow: inset 0 1px 0 var(--highlight); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: background-color 150ms var(--ease-out-quart), border-color 150ms var(--ease-out-quart); }
.menu-btn:hover { background: var(--surface-3); }
.menu-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.menu-btn:active { background: var(--surface-3); }
.menu-btn[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.menu-btn::after { content: ""; flex: none; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: translateY(-2px) rotate(45deg); }
.menu-theme { padding: var(--s2) 10px var(--s1); }
.menu-theme-label { display: block; margin-bottom: var(--s1); color: var(--subtle-foreground); font-size: var(--text-xs); font-weight: 550; }
.theme-options { display: flex; gap: var(--s1); padding: 3px; border-radius: var(--radius-md); background: var(--bg-sunken); }
.theme-opt { flex: 1 1 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 var(--s2);
  font: inherit; font-size: var(--text-sm); color: var(--muted-foreground); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color 120ms var(--ease-out-quart), color 120ms var(--ease-out-quart); }
.theme-opt:hover { background: var(--surface-3); color: var(--foreground); }
.theme-opt:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.theme-opt:active { transform: scale(0.97); }
.theme-opt[aria-checked="true"] { background: var(--surface-2); color: var(--primary-text); box-shadow: var(--elevation-card); }
.menu-note { padding: 6px 10px var(--s1); margin-top: var(--s1); border-top: 1px solid var(--border); color: var(--subtle-foreground); font-size: var(--text-xs); }
.menu-list .form-error:empty { display: none; }
.search-results { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; max-height: 60vh; overflow-y: auto; }
.search-results a { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; color: var(--foreground); }
.conv-menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 6; min-width: 15em; }
.conv-menu-list[hidden] { display: none; }
.voice-menu { position: absolute; bottom: calc(100% + var(--s2)); inset-inline-start: 0; z-index: 6; min-width: 9em; display: flex; flex-direction: column; }
.cu-more-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 6; width: min(320px, 80vw); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }

/* a tooltip: surface-3, strong hairline, popover elevation, radius-md */
.tip-btn { cursor: help; text-decoration: underline dotted var(--subtle-foreground); text-underline-offset: 3px; }
.tip-btn:hover { text-decoration-color: var(--primary); }
.tipbox { position: fixed; z-index: 20; width: max-content; max-width: min(400px, calc(100vw - 16px)); padding: 8px 12px; background: var(--surface-3);
  color: var(--foreground); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--elevation-pop);
  font-size: var(--text-sm); font-weight: 400; line-height: 1.45; }
.tipbox p { margin: 0 0 6px; }
.tipbox p:last-child { margin-bottom: 0; }
.tipbox .tip-h { font-size: var(--text-xs); color: var(--subtle-foreground); margin-top: 10px; }
.tipbox .tip-h:first-child { margin-top: 0; }
.tipbox .tip-h code { text-transform: none; letter-spacing: 0; }

/* tables: a sunken header band (12.5 px, 550, subtle), rows that light up on hover, no zebra, figures in tabular numbers */
table.data, .mini { font-size: var(--text-sm); }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); overflow: hidden; }
table.data th, table.data td { text-align: start; padding: 10px var(--s3); border-top: 1px solid var(--border); vertical-align: top; }
table.data thead th { border-top: 0; font-size: var(--text-xs); font-weight: 550; color: var(--subtle-foreground); background: var(--bg-sunken); }
table.data tbody th { font-weight: 600; }
table.data tbody tr { transition: background-color 100ms var(--ease-out-quart); }
table.data tbody tr:hover > * { background: var(--surface-3); }
table.data td.num, table.data th.num { font-variant-numeric: tabular-nums; text-align: end; }
tr.is-disabled th, tr.is-disabled td { color: var(--subtle-foreground); }
.mini th, .mini td { text-align: start; padding: 3px 10px 3px 0; vertical-align: top; }
.mini th { font-weight: 500; color: var(--subtle-foreground); }

/* tabs: ONE underline style (top tabs, Explore sub-tabs, project and case tabs). A single .tab-ind span slides under the current one
   (app.js); on the phone's bottom bar it sits on top. Segmented controls stay only for choices (.cu-seg, the theme row). */
.nav { position: relative; display: flex; gap: var(--s1); font-size: var(--text-base); align-self: stretch; margin-bottom: calc(-1 * var(--s2)); }
.tab { position: relative; display: inline-flex; align-items: center; align-self: stretch; gap: 8px; padding: 0 var(--s3); color: var(--subtle-foreground);
  font-weight: 550; transition: color 150ms var(--ease-out-quart); }
.tab:hover { color: var(--foreground); text-decoration: none; }
.tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tab:active { color: var(--primary-text); }
.tab .icon { display: none; }
.tab[aria-current="page"], .nav a[aria-current="page"] { color: var(--foreground); font-weight: 600; }
.subnav { position: relative; display: flex; gap: var(--s5); margin: 0 0 var(--s4); max-width: 100%; box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; scrollbar-width: none; }
.seg-tab { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; color: var(--subtle-foreground); font-weight: 550;
  white-space: nowrap; text-decoration: none; transition: color 150ms var(--ease-out-quart); }
.seg-tab:hover { color: var(--foreground); text-decoration: none; }
.seg-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.seg-tab:active { color: var(--primary-text); }
.seg-tab[aria-current="page"] { color: var(--foreground); font-weight: 600; }
.tabs { position: relative; display: flex; gap: var(--s5); margin: var(--s4) 0 var(--s4); box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tab-btn { position: relative; flex: none; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--subtle-foreground); font: inherit;
  font-weight: 550; white-space: nowrap; cursor: pointer; transition: color 150ms var(--ease-out-quart); }
.tab-btn:hover { color: var(--foreground); }
.tab-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }
.tab-btn:active { color: var(--primary-text); }
.tab-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tab-btn[aria-selected="true"] { color: var(--foreground); font-weight: 600; }
.tab-panel:focus { outline: none; }
.tab-ind { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; border-radius: 999px 999px 0 0; background: var(--primary);
  pointer-events: none; transition: transform 280ms var(--ease-out-expo), width 280ms var(--ease-out-expo), opacity 150ms; }
.nav .tab-ind { bottom: -1px; }
.tab-ind.no-anim { transition: none; }
.tab-ind.is-off { opacity: 0; }
.nav.solo .tab-ind { display: none; }

/* toasts: surface-3, strong hairline, popover elevation, an icon tile for the tone; past tense ("Copied"); errors stay until closed */
.notice { position: fixed; inset-inline: 0; margin-inline: auto; bottom: var(--s4); z-index: 30; display: flex; align-items: center; gap: var(--s3);
  width: max-content; max-width: min(640px, calc(100vw - 32px)); padding: 10px var(--s3) 10px 10px; background: var(--surface-3); color: var(--foreground);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--elevation-pop); font-size: var(--text-sm);
  animation: toast-in 280ms var(--ease-out-expo); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast-text { min-width: 0; overflow-wrap: anywhere; }

/* loading: lines on surface-2 in the shape of what will come */
.skeleton { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0; }
.skel { display: block; border-radius: var(--radius-md); background: var(--surface-2); animation: skel-pulse 1.6s var(--ease-in-out-cubic) infinite; }
.skel-line { height: 44px; }
.skel-short { width: 62%; }
@keyframes skel-pulse { 50% { opacity: 0.55; } }

/* the empty state: a dashed frame with a faint dot field, an icon tile, what is missing, one sentence, one action */
.empty-state { position: relative; overflow: hidden; display: grid; place-items: center; padding: 56px var(--s5); text-align: center; color: var(--muted-foreground);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); }
.empty-state::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 22px 22px;
  background-image: radial-gradient(color-mix(in oklch, var(--foreground) 9%, transparent) 1px, transparent 1px);
  mask-image: radial-gradient(70% 60% at 50% 30%, var(--foreground), transparent); }
.empty-inner { position: relative; display: grid; justify-items: center; gap: var(--s3); max-width: 24rem; }
.empty-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--foreground); }
.empty-text { margin: 0; font-size: var(--text-sm); }
.empty-inner .btn { margin-top: var(--s2); }
.empty p { margin: 0 0 var(--s3); }
.empty { color: var(--muted-foreground); }

/* sheets, the drawer and the assistant panel: surface-2, modal elevation, a strong hairline, the scrim, the inner edge rounded, a 280 ms slide */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* a panel opens by a 280 ms wipe from its inline-end edge (a clip, not a transform or an inset: its box is whole pixels from the first frame) */
@keyframes slide-in { from { opacity: 0.4; clip-path: inset(0 0 0 48px); } to { opacity: 1; clip-path: inset(0); } }
@keyframes slide-in-rtl { from { opacity: 0.4; clip-path: inset(0 48px 0 0); } to { opacity: 1; clip-path: inset(0); } }
.drawer:dir(rtl), .sheet:dir(rtl), .ai-panel:dir(rtl) { animation-name: slide-in-rtl; }

/* reduced motion: no slide, no pulse, no sweep; the states still change colour */
@media (prefers-reduced-motion: reduce) {
  .tab-ind, .btn, .icon-btn, .menu-item, .theme-opt, .tab, .seg-tab, .tab-btn { transition: none; }
  .btn.primary::after, .btn.ai::after { display: none; }
  .btn:active, .icon-btn:active, .theme-opt:active, .bell:active { transform: none; }
  .btn[aria-busy="true"]::before { animation-duration: 2.4s; }
  .menu-list, .conv-menu-list, .voice-menu, .cu-more-list, .search-results, .notice, .drawer, .sheet, .ai-panel, .backdrop, .sheet-scrim, .skel, .badge.live::before, .badge-dot { animation: none; }
}
@media (forced-colors: active) {
  .btn, .icon-btn, .menu-btn, .badge, .card, .icon-tile { border: 1px solid CanvasText; }
  .tab-ind { background: Highlight; }
}

/* ---- end of b35 lane P primitives ---- */

/* responsive (CP1 review): the page uses the width it has, up to 1600 px, from a 360 px phone upward */
.topbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4);
  padding: var(--s2) clamp(12px, 3vw, 32px); background: var(--surface-1); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--fs-2); color: var(--foreground);
  white-space: nowrap; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }

main { max-width: 1600px; margin: 0 auto; padding: 18px clamp(12px, 3vw, 32px) 48px; }
main h1 { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.015em; margin: var(--s1) 0 var(--s2); }
main h1:focus { outline: none; }
.summary, .subtitle, .meta-line { color: var(--muted-foreground); margin: 0 0 var(--s4); max-width: 80ch; }

.topics, .chips, .levels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: flex-start; align-content: flex-start; }
.topic { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-1); }
.topic.off { border-style: dashed; color: var(--muted-foreground); }

.harnesses { margin-top: var(--s5); border-top: 1px solid var(--border); padding-top: var(--s3); }
.harnesses h2 { font-size: var(--fs-1); margin: 0 0 10px; }
.chip { display: flex; align-items: center; gap: 6px; padding: var(--s1) var(--s3); border-radius: var(--radius-s); background: var(--surface-1);
  border: 1px solid var(--border); }
.chip.off { background: transparent; border-style: dashed; }
.levels li { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.levels .k { color: var(--muted-foreground); }
.loading { color: var(--muted-foreground); padding: 24px; }

/* topic page sections (SPEC §4.2) */
.prop-name { font-weight: 650; }
.prop-text { color: var(--muted-foreground); font-size: var(--fs-0); }
.muted { color: var(--muted-foreground); }
.spend-service { font-weight: 600; }
.spend-service.reached { color: var(--destructive-text); }
.small { font-size: var(--fs-xs); }
.k { color: var(--muted-foreground); }
.cite { font: inherit; font-size: var(--fs-xs); cursor: pointer; border: 1px solid var(--primary); background: transparent;
  color: var(--primary); border-radius: var(--radius-s); padding: 0 var(--s2); }
.cite:hover { background: var(--surface-3); }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* field projects (b16): our own products, kept visibly apart from the harnesses */
.field-items { list-style: none; padding: 0; margin: 0 0 8px; }
.field-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.field-item .tag { margin-left: 4px; }
.field-item p { margin: 2px 0 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.settings { padding-left: 18px; font-size: var(--fs-0); }
.settings li { margin: 3px 0; }
.set-name { font-weight: 650; }
code, .key { font-family: var(--font-mono); font-size: var(--fs-xs); }
.dial { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4);
  margin-bottom: var(--s3); }
.dial h3 { font-size: var(--fs-1); margin: 0 0 4px; }
.dial .key { color: var(--muted-foreground); font-weight: 400; }
.dial .unit { color: var(--muted-foreground); font-weight: 400; }
.dots { max-width: 100%; height: auto; }

/* search in the top bar */
.search-wrap { position: relative; flex: 1 1 120px; min-width: 120px; max-width: 420px; }
.search { width: 100%; font: inherit; font-size: var(--text-base); padding: 0 var(--s4); border-radius: 999px; }
.search-results li { padding: 0; }
.search-results li.muted { padding: 6px 8px; }
.sr-kind { font-size: var(--fs-xs); color: var(--muted-foreground); }

/* b35 lane E: Explore (hero, map, banner), topic page, rules grid, Compare, harness page, What's new, evidence drawer, code blocks.
   Kit tokens only (no colour literal), logical properties. Nothing here moves on its own except the banner (owner decision). */

/* --- harness identity: a dot in --tool-n, or a hollow neutral ring for the harnesses with no hue (tool 0) --- */
.htag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 0 10px; border: 1px solid var(--border-strong);
  border-radius: 999px; font-size: 12.5px; font-weight: 550; line-height: 1.25; color: var(--muted-foreground); vertical-align: middle; }
.htag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.htag-dot.t0 { box-shadow: inset 0 0 0 1.5px var(--subtle-foreground); }
.htag-dot.t1 { background: var(--tool-1); } .htag-dot.t2 { background: var(--tool-2); } .htag-dot.t3 { background: var(--tool-3); }
.htag-dot.t4 { background: var(--tool-4); } .htag-dot.t5 { background: var(--tool-5); } .htag-dot.t6 { background: var(--tool-6); }
.htag-name { min-width: 0; overflow-wrap: break-word; }
/* --- Explore (b37): pick your agent, see the stack. Tokens only. Nothing here moves on its own: a hover, a press and a click are
   the user's own. The five level shades are shared by the stack's chips, the topic cards' badge and pills and the legend. --- */
.st-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.st-dot.mat-settled { background: var(--success); }
.st-dot.mat-open { border: 2px solid var(--warning); }
.st-dot.mat-emerging { border: 2px dashed var(--subtle-foreground); }
.st-dot.mat-depends { background: var(--subtle-foreground); }
.st-dot.mat-none { border: 1.5px dotted var(--subtle-foreground); }

.ex-title { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s4) var(--s6); margin: var(--s5) 0 var(--s5); }
@media (min-width: 900px) { .ex-title.has-ask { grid-template-columns: minmax(0, 1fr) minmax(340px, 31rem); } }
.ex-title-text { min-width: 0; }
.ex-compare { margin: var(--s2) 0 0 calc(-1 * var(--s3)); }
main .ex-title h1 { margin: 0 0 var(--s1); font-size: clamp(1.625rem, 4vw, 2.125rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.ex-sub { margin: 0; font-size: var(--fs-1); color: var(--muted-foreground); }
.ex-live { display: flex; flex-direction: column; gap: var(--s4); }

/* the five agent-type cards: two to a row on a phone, one row of five on a wide screen */
.ex-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-types .ty-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .ex-types { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .ex-types .ty-card:last-child:nth-child(odd) { grid-column: auto; } }
.ty-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-width: 0; width: 100%; padding: 14px 16px; font: inherit; text-align: start; cursor: pointer;
  color: var(--foreground); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.ty-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ty-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ty-card:active { transform: scale(0.985); }
.ty-card[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ty-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ty-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--primary-text); }
.ty-card[aria-pressed="true"] .ty-ico { background: var(--surface-1); }
.ty-name { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ty-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; }
.ty-count strong { font-size: var(--fs-4); font-weight: 700; line-height: 1; }
.ty-label { font-size: var(--fs-0); color: var(--muted-foreground); }
.ty-note { font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); }

/* the stack: one raised card, L7 on top, L0 at the base */
.ex-stack { display: flex; flex-direction: column; gap: 8px; padding: var(--s4); border-radius: var(--radius-2xl); }
.ex-stack-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); padding: 2px 4px 6px; }
.ex-summary { margin: 0; font-size: var(--fs-1); font-weight: 600; line-height: 1.35; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted-foreground); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { display: inline-block; width: 12px; height: 12px; border: 1px solid; border-radius: 3px; }
.st-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.card .st-rows { margin: 0; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; padding: 10px 14px; font: inherit; text-align: start; cursor: pointer;
  color: var(--foreground); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.st-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.st-row:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.st-row:active { transform: scale(0.995); }
.st-row[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); box-shadow: inset 0 0 0 0.5px var(--primary); }
.st-lead { order: 1; flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-id { flex: none; width: 22px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-foreground); }
.st-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; min-width: 0; }
.st-tail { order: 2; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.st-tail strong { font-size: var(--fs-1); font-weight: 600; }
.st-tail-label { font-size: 11.5px; color: var(--muted-foreground); }
.st-chev { display: grid; place-items: center; color: var(--subtle-foreground); }
.st-row[aria-expanded="true"] .st-chev { color: var(--primary-text); transform: rotate(180deg); }
.st-chips { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
@media (min-width: 900px) {
  .st-lead { flex: 0 0 200px; }
  .st-chips { order: 2; flex: 1 1 0; }
  .st-tail { order: 3; flex: 0 0 140px; }
}
.st-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border: 1px solid; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.3; }
.st-chip-name { min-width: 0; overflow-wrap: anywhere; }

/* the open layer: its topic cards */
.ex-detail { margin-top: var(--s2); }
.ex-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--s3); }
.ex-detail-head h2 { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
.ex-detail-head p { margin: 0; color: var(--muted-foreground); }
.ex-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.ex-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ex-card:not(.off):hover { border-color: var(--lift-edge); box-shadow: 0 10px 28px -12px var(--ai-glow); }
.ex-card.na { opacity: 0.6; }
.ex-card.off { border-style: dashed; background: transparent; box-shadow: none; color: var(--muted-foreground); }
.ex-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ex-card-name { font-size: var(--fs-2); font-weight: 600; color: var(--foreground); }
a.ex-card-name:hover { text-decoration: none; }
a.ex-card-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.ex-card-name:focus-visible { outline: none; }
.ex-card:has(a.ex-card-name:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.lv-badge { flex: none; padding: 3px 8px; border: 1px solid; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.ex-card-line { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }
.ex-build { padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg-sunken); font-size: var(--fs-0); line-height: 1.45; color: var(--foreground); }
.ex-build b { font-weight: 600; }
.ex-per { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-pill { padding: 2px 7px; border: 1px solid; border-radius: 5px; font-size: 11.5px; line-height: 1.4; }
.ex-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--subtle-foreground); }

/* the harnesses studied for the chosen type */
.ex-harn { margin-top: var(--s5); }
.ex-harn h2 { margin: 0 0 var(--s2); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
.ex-hsub { margin: var(--s4) 0 var(--s2); font-size: var(--fs-1); font-weight: 600; }
.ex-hnote { margin: 0 0 var(--s3); }
.ex-hlist { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.ex-hcard { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ex-hcard:hover { border-color: var(--lift-edge); box-shadow: 0 10px 28px -12px var(--ai-glow); }
.ex-hcard.off { background: transparent; border-style: dashed; box-shadow: none; }
.ex-hhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.ex-hname { min-width: 0; }
.ex-hname:hover { text-decoration: none; }
.ex-hname::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ex-hname:focus-visible { outline: none; }
.ex-hcard:has(.ex-hname:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.ex-hname .htag { padding: 0; border: 0; font-size: var(--fs-1); font-weight: 600; color: var(--foreground); }
.ex-hname .htag-dot { width: 10px; height: 10px; }
.ex-hopen { font-size: 12.5px; color: var(--subtle-foreground); }
.ex-hline { font-size: var(--fs-0); color: var(--muted-foreground); }
.ex-hstrong { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-0); line-height: 1.45; color: var(--muted-foreground); }
.ex-hstrong li { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-more { margin: 0 0 var(--s3); }
.ex-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.disclaimer { margin: 0; max-width: 80ch; }

/* how much we checked, and the Ask box */
.ex-proof { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.ex-proof-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
@media (min-width: 960px) { .ex-proof-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ex-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: var(--s5); }
@media (min-width: 600px) { .ex-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) and (max-width: 1259px) { .ex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* beside the bar card, two by two */
.ex-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-stat strong { font-size: 26px; font-weight: 700; line-height: 1.2; }
.ex-stat span { font-size: 12.5px; color: var(--muted-foreground); }
.ex-bar-card { display: flex; flex-direction: column; gap: 12px; padding: var(--s5); }
.ex-bar-h, .ex-ask-h { margin: 0; font-size: var(--fs-1); font-weight: 600; }
.ex-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.ex-seg { min-width: 6px; }
.ex-seg.mat-settled { background: var(--success); }
.ex-seg.mat-open { background: var(--warning); }
.ex-seg.mat-emerging { background: var(--subtle-foreground); }
.ex-seg.mat-depends { background: var(--muted-foreground); }
.ex-bar-text { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }
/* the Ask card at the top (b38): raised, with the brain's face in its header */
.ex-ask { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); border-color: var(--border-strong); box-shadow: var(--elevation-pop); min-width: 0; }
.ex-ask-head { display: flex; align-items: center; gap: var(--s2); }
.ex-ask-face { display: inline-flex; flex: none; }
.ex-ask-box { min-width: 0; }

/* the level shades come last so that they win over the border of the element they colour */
.lv-m { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.lv-s { background: var(--surface-3); color: var(--foreground); border-color: var(--border-strong); }
.lv-o { background: var(--surface-1); color: var(--muted-foreground); border-color: var(--border); }
.lv-n, .lv-x { background: transparent; color: var(--subtle-foreground); border-color: var(--border-strong); border-style: dashed; }
.lv-x { border-style: dotted; }

/* --- Explore: What's new --- */
.whats-new { margin: 40px 0 0; padding: 0; }
.whats-new .sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.changes { list-style: none; margin: 0 0 8px; padding: 0; }
.changes li { padding: 8px 0; border-top: 1px solid var(--border); }
.changes li:first-child { border-top: 0; }
.whats-new p { margin: 0; }

/* --- the Updates page: a timeline with a dot per round --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { position: relative; padding: 0 0 20px; padding-inline-start: 28px; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-1); border: 2px solid var(--border-strong); }
.timeline > li:first-child::before { background: var(--foreground); border-color: var(--foreground); }
.timeline > li::after { content: ""; position: absolute; inset-inline-start: 5px; top: 24px; bottom: -2px; width: 1px; background: var(--border); }
.timeline > li:last-child::after { display: none; }
.timeline > li.quiet { padding-bottom: 12px; }
.timeline > li.quiet::before { width: 7px; height: 7px; top: 8px; inset-inline-start: 2px; border-width: 1.5px; }
.timeline > li.quiet::after { inset-inline-start: 5px; top: 18px; }
.timeline .changes { list-style: disc; padding-inline-start: 24px; margin: 4px 0 0; }
.timeline .changes li { border-top: 0; padding: 2px 0; }
.timeline details > summary { color: var(--foreground); margin: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 2px; }
.tl-topics { margin: 4px 0 0; padding-inline-start: 18px; font-size: var(--text-base); }
.tickets ul, .disputes ul { padding-inline-start: 18px; }
.tickets li, .disputes li { margin: 4px 0; }

/* --- the topic page: sections without cards, the three answers as quiet cards --- */
.summary-box { margin: 4px 0 12px; max-width: 95ch; }
.summary-box .one-liner { margin: 0 0 4px; font-size: var(--text-lg); line-height: 1.6; color: var(--foreground); }
.summary-box .why { margin: 0; color: var(--muted-foreground); }
.levels { gap: 6px 8px; }
.levels li { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: 12.5px; }
.answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
.answer { padding: 16px 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.answer h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 550; color: var(--subtle-foreground); }
.answer p { margin: 0 0 8px; }
.topic-sec { margin-top: 40px; }
.topic-sec h2, .rules h2 { margin: 0 0 12px; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.rules { margin-top: 40px; }

/* --- the rules grid and the Compare table: harness tags in the header, an icon plus its word for every mark --- */
.grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; background: transparent; border: 0; box-shadow: none; }
.grid th, .grid td { padding: 10px 14px; border-top: 1px solid var(--border); text-align: start; vertical-align: top; }
.grid thead th { border-top: 0; background: var(--bg-sunken); color: var(--foreground); font-size: 12.5px; font-weight: 550; vertical-align: bottom; }
.grid thead .htag { color: var(--foreground); white-space: normal; border-radius: var(--radius-md); }
.grid tbody th { min-width: clamp(180px, 24vw, 340px); font-weight: 500; color: var(--foreground); }
.rules .grid td > .marks { min-width: 12ch; }   /* b35 integ-8: 12 characters hold the icon and the longest short word on one line */
.col-note { display: block; margin-top: 4px; font-weight: 400; font-size: var(--text-xs); color: var(--subtle-foreground); }
.rule-sum { margin-top: 2px; font-size: var(--text-xs); font-weight: 400; color: var(--subtle-foreground); }
.grid tr.sub-head th { background: var(--bg-sunken); color: var(--subtle-foreground); font-size: var(--text-xs); }
.compare .grid tr.differs > th { box-shadow: none; }
@media (min-width: 641px) {
  .grid thead th:first-child, .grid tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface-1); border-inline-end: 1px solid var(--border); }
  .grid thead th:first-child { z-index: 2; background: var(--bg-sunken); }
  .grid tr.sub-head th { position: static; border-inline-end: 0; background: var(--bg-sunken); }
}
.mark { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; font-size: 13.5px; line-height: 1.4; }
.mark .sym { flex: none; display: inline-flex; margin-top: 1px; }
.mark .sym svg { width: 16px; height: 16px; }
.mk-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.mk-text .lbl { color: var(--foreground); font-weight: 500; }
.mark .cfg { flex-basis: 100%; font-size: var(--text-xs); color: var(--subtle-foreground); font-family: var(--font-mono); }
.mark .note, .mk-text .note { display: block; flex-basis: 100%; font-size: var(--text-xs); color: var(--muted-foreground); }
/* b35 integ-8: a compact mark in the rules grid is one line: icon, one short word, optional chips; the long label and the setting are in the tooltip */
.mark.compact { position: relative; align-items: center; margin: 0; }   /* relative: its hidden text is clipped by the grid's scroll box, not placed beyond the page */
.mark.compact .mk-text { flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mark.compact .lbl { white-space: nowrap; }
.mark.compact .badge { white-space: nowrap; }   /* a caveat badge (Read, not re-checked) stays one line; the grid scrolls inside its box */
@media (max-width: 640px) { .mark.compact .badge { white-space: normal; max-width: 100%; } }   /* on a phone it wraps under the word */
.mark.compact .sym { margin-top: 0; }
.chip-mini { padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--subtle-foreground); font-family: var(--font-mono); font-size: 11px; line-height: 16px; }
@media (min-width: 641px) { .rules .grid tbody th { width: 260px; min-width: 260px; max-width: 260px; } }
.rules .grid td { padding-block: 8px; }
.rules .grid .must-short { position: relative; gap: 4px; }
/* b35 integ-3: a harness page's missed must-haves are one danger badge and a quiet list behind a disclosure */
.misses { margin: 0 0 var(--s3); }
.misses > summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); min-height: 44px; cursor: pointer; list-style: none; }
.misses > summary::-webkit-details-marker { display: none; }
.misses-toggle { color: var(--primary-text); font-size: var(--text-sm); }
.misses-toggle:hover { text-decoration: underline; }
.misses[open] .misses-toggle { color: var(--muted-foreground); }
.quiet-list { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.quiet-list li { padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.quiet-list li:first-child { border-top: 0; }
.state-meets .sym { color: var(--success-text); }
.state-partly .sym, .state-disputed .sym { color: var(--warning-text); }
.state-fails .sym { color: var(--destructive-text); }
.state-unknown .sym, .state-not-checked .sym, .state-lead .sym, .state-lead-wrong .sym, .state-n-a .sym { color: var(--subtle-foreground); }
.state-unknown .lbl, .state-not-checked .lbl, .state-lead .lbl, .state-lead-wrong .lbl, .state-n-a .lbl { color: var(--muted-foreground); font-weight: 400; }
.marks .badge { padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: 12px; }
.mark-btn { font: inherit; color: inherit; text-align: start; background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 2px 6px; margin: 0 -6px 4px; cursor: pointer; width: calc(100% + 12px); }
.mark-btn:hover { border-color: var(--border-strong); background: var(--surface-3); }
.mark-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.must-row td { font-weight: 500; }

/* --- Compare: the picker --- */
.pickers { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: 8px 0 16px; }
.pickers fieldset { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 8px 14px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pickers legend { padding: 0 4px; font-size: var(--text-xs); color: var(--subtle-foreground); }
.pick-h { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.pick-h:has(input:checked) .htag { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.pick-h:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.differs-tag { margin-inline-start: 6px; vertical-align: 1px; }

/* --- the harness page: status as badges with words --- */
.hp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.gap-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--destructive-text); }
.mini.wide td.must-meets, .mini.wide td.must-blocked, .mini.wide td.must-unassessed { color: inherit; }

/* --- the evidence drawer --- */
.backdrop { position: fixed; inset: 0; z-index: 10; background: var(--scrim); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 11; width: min(560px, 100vw); overflow-y: auto; padding: 20px 24px 32px;
  background: var(--surface-2); border-inline-start: 1px solid var(--border); box-shadow: var(--elevation-modal); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.drawer-head h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--foreground); }
.claim { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.claim .statement { margin: 0 0 10px; font-size: var(--text-base); line-height: 1.6; font-weight: 550; color: var(--foreground); }
.claim .kv { margin: 4px 0; font-size: var(--text-sm); color: var(--muted-foreground); overflow-wrap: anywhere; }
.claim .k { color: var(--subtle-foreground); }
.claim .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.claim .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--muted-foreground); font-size: 12px; font-weight: 550; }
.claim .badge.warn { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in oklch, var(--warning) 30%, transparent); }
.claim .open { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; }
.open-evidence { font-weight: 600; color: var(--primary-text); }
.claim h3 { margin: 14px 0 6px; font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.claim ul { margin: 0; padding-inline-start: 18px; }
.linklike { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: var(--primary-text); text-align: start; }

/* --- code blocks: one recipe (a quiet sunken surface, mono 13 px, scrolls instead of widening the page) --- */
.wu-code, .ans-code pre, .cu-prompt, .excerpt, .doc-text { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--foreground); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.wu-code { margin: 0 0 12px; padding: 12px 14px; overflow-x: auto; }

/* top-bar navigation, section heads with a link, and the Compare view */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 10px; }
.sec-head h2 { margin: 0; }
.sec-link { font-size: var(--fs-0); }
.pick-topic select { font: inherit; margin-left: 6px; padding: 3px 6px; border: 1px solid var(--input); border-radius: var(--radius-s);
  background: var(--surface-1); color: var(--foreground); }

/* tips: a name that explains itself on hover, focus or tap (the dotted underline says so) */
.tip-rule { color: var(--muted-foreground); }
.dial-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.dots .axis, .dots .guide { stroke: var(--border); }
.dots .dot { fill: var(--primary); }
.dots text { fill: var(--muted-foreground); font-size: var(--fs-xs); }
.mini .ours td { font-weight: 600; }
.affects-list, .earlier-list { padding-left: 18px; }
/* The full write-up (b11): collapsed, a readable measure, code that scrolls instead of widening the page. */
.writeup-body { max-width: 78ch; line-height: 1.55; margin-top: 10px; }
.writeup-body p, .writeup-body li { margin: 0 0 10px; }
.writeup-body ul, .writeup-body ol { padding-left: 20px; }
.writeup-body .cite { margin-left: 2px; }
.affects-list li, .earlier-list li { margin: 4px 0; }
.ext { font-size: var(--fs-xs); margin-left: 6px; }
details summary { cursor: pointer; color: var(--primary); margin: 6px 0; }
@media (max-width: 900px) { .answers { grid-template-columns: 1fr; } }

/* Home: the map is styled in the b35 lane E section above */
.mini.wide { width: 100%; }
.mini.wide td { padding-right: 14px; }
.mini.wide td:nth-child(2) { white-space: nowrap; }
.mini.wide th .tag { margin-left: 6px; }

/* phones: the rules grid becomes one card per rule, each harness's mark beside its name; tables stack */
@media (max-width: 640px) {
  main h1 { font-size: var(--fs-3); }
  .grid, .grid tbody, .grid tr, .grid th, .grid td { display: block; }
  .grid-wrap { border: 0; border-radius: 0; background: none; overflow: visible; }
  .grid { border: 0; background: transparent; }
  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .grid tbody tr { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: 8px; padding: 8px 12px; }
  .grid th, .grid td { border: 0; padding: 2px 0; }
  .grid tbody th { min-width: 0; margin-bottom: 4px; }
  .grid td[data-label] { display: grid; grid-template-columns: minmax(6.5em, 34%) 1fr; gap: 8px; align-items: baseline; }
  .grid td[data-label]::before { content: attr(data-label); color: var(--subtle-foreground); font-size: var(--text-xs); }
  .mini.wide, .mini.wide tbody, .mini.wide tr, .mini.wide th, .mini.wide td { display: block; }
  .mini.wide tr { border-top: 1px solid var(--border); padding: 6px 0; }
  .mini.wide td:nth-child(2) { white-space: normal; }
  .drawer { padding: 12px 14px 24px; }
}

/* ---------------------------------------------------------------- v2 (CP4): the served app's pages and panels (live.js)
   Classes only: the server's CSP allows no inline style. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* buttons and forms */

/* before sign-in */
main.auth { max-width: 460px; padding-top: 8vh; }
.auth-card h1 { margin-top: 0; }
.auth-card .actions { margin-top: 16px; }
/* b39: Continue with Google (a full-width secondary button, 44 px), a quiet divider, the sign-in problem */
.google-btn { display: flex; width: 100%; min-height: 44px; margin: var(--s4) 0 0; }
.auth-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s2); color: var(--subtle-foreground); font-size: var(--text-sm); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-problem { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border: 1px solid color-mix(in oklch, var(--destructive) 30%, transparent);
  border-radius: var(--radius-md); background: var(--destructive-soft); }
.auth-problem:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* b39: the owner's list of people waiting for approval, and the Google tag */
.waiting-box { margin: var(--s5) 0; }
.waiting-box h3 { margin: 0 0 var(--s2); }
.waiting-row .actions { margin-top: var(--s2); }
.google-tag { margin-inline-start: var(--s1); font-weight: 500; }
.auth-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }

/* the top bar: the current page, the unread count and the signed-in person */

/* the right of the top bar: the inbox bell and the profile menu (b23) */
.bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: var(--radius-md); color: var(--muted-foreground); transition: background-color 150ms var(--ease-out-quart), color 150ms; }
.bell:hover { background: var(--surface-3); color: var(--foreground); text-decoration: none; }
.bell:active { background: var(--surface-3); transform: scale(0.96); }
.bell[aria-current="page"] { background: var(--primary-soft); color: var(--primary-text); }
.bell .count { position: absolute; top: -4px; inset-inline-end: -4px; margin: 0; }
.profile-menu { position: relative; }
/* the Theme row (b35): a label and three radio buttons side by side; the checked one is the periwinkle soft fill */

/* phones (b23): the tabs become a bar fixed to the bottom of the screen; the top bar keeps brand, bell and menu, with
   the search on a row of its own; the assistant's button sits above the tabs and its panel covers the screen */
@media (max-width: 719px) {
  .topbar { gap: var(--s2) var(--s3); }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select { font-size: 16px; }
  .bar-right { order: 2; }
  .search-wrap { order: 3; flex: 1 1 100%; max-width: none; }
  .nav:not(.solo) { position: fixed; inset-inline: 0; bottom: 0; z-index: 4; gap: 0; background: var(--surface-1);
    border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .nav:not(.solo) .tab-ind { top: -1px; bottom: auto; border-radius: 0 0 999px 999px; }
  .nav { margin-bottom: 0; }
  .nav:not(.solo) .tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 4px 6px;
    font-size: var(--text-xs); min-height: 52px; }
  .nav:not(.solo) .tab .icon { display: block; }
  .nav:not(.solo) .tab[aria-current="page"] { color: var(--primary-text); }
  body.has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.has-tabbar .panel-toggle { bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-tabbar .notice { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* Your view on a topic or harness page: pick, challenge, notes */
.view-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4); min-width: 0; }
.panel h3 { font-size: var(--fs-1); margin: 0 0 4px; }
.panel h4 { font-size: var(--fs-xs); color: var(--muted-foreground); margin: 14px 0 4px; }
.panel > .muted.small { margin: 0 0 6px; }
/* picks per part (CP5 S4): one fieldset per part of the proposal, then your own approach */
.pick-part { border: 1px solid var(--border); border-radius: var(--radius-s); margin: 8px 0 0; padding: 4px 10px 8px; min-width: 0; }
.pick-part:has(input[value="adopt"]:checked), .pick-part:has(input[value="adapt"]:checked) { border-color: var(--primary); }
.pick-part legend { display: flex; flex-direction: column; padding: 0 4px; max-width: 100%; }
.po-name { font-weight: 600; }
.po-sub { font-size: var(--fs-xs); color: var(--muted-foreground); font-weight: 400; }
.choices { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: var(--fs-0); }
.choice { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.part-name { font-size: var(--fs-xs); font-weight: 600; margin: 8px 0 2px; }
.pick-text, .pick-why { overflow-wrap: anywhere; }
.pick-review { display: block; margin: 4px 0 0; color: var(--warning-text); font-size: var(--fs-0); overflow-wrap: anywhere; }
.pick-review::before { content: "⚠ "; }
.pick-confirm { margin: 4px 0 0; }
.pick-gone { margin: 0 0 12px; }
.team-topic .part-name:first-child { margin-top: 0; }
.team-picks { list-style: none; margin: 0; padding: 0; font-size: var(--fs-0); }
.team-picks li { padding: 4px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.team-picks li:first-child { border-top: 0; }
.who { font-weight: 600; }
.notes { list-style: none; margin: 10px 0 0; padding: 0; }
.note-item { border-top: 1px solid var(--border); padding: 8px 0; }
.note-text { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.note-target { margin: 0 0 4px; font-size: var(--fs-0); }
.claim-actions { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.claim-actions > .actions { margin-top: 0; }

/* the assistant */
.ai-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 8px; color: var(--muted-foreground); }
.ai-status .today, .ai-status .web-note { flex-basis: 100%; font-size: var(--fs-xs); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 16px; padding: 0; font-size: var(--fs-xs);
  color: var(--muted-foreground); }
.assistant { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.conv-side { position: sticky; top: 64px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.conversations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 70vh;
  overflow-y: auto; }
.conv { display: flex; flex-direction: column; padding: 6px 9px; border-radius: var(--radius-s); color: var(--foreground); }
.conv:hover { background: var(--surface-3); text-decoration: none; }
.conv[aria-current="page"] { background: var(--primary-soft); color: var(--primary-text); }
.conv-title { font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-when { font-size: var(--fs-xs); color: var(--muted-foreground); }
.conv-main { min-width: 0; }
.conv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.conv-head h2 { font-size: var(--fs-2); margin: 0; }
.conv-head .form-error { flex-basis: 100%; }
.thread { display: flex; flex-direction: column; gap: 18px; }
.turn { display: flex; flex-direction: column; gap: 8px; }
.question { align-self: flex-end; max-width: min(720px, 92%); background: var(--surface-3); color: var(--foreground); border-radius: var(--radius) var(--radius) 2px var(--radius);
  padding: var(--s2) var(--s3); }
.q-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.question .muted { margin: 2px 0 0; }
.reply { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--border)); border-radius: var(--radius-lg);
  padding: var(--s4) var(--s5); box-shadow: var(--elevation-card); }
.outcome { margin: 0 0 var(--s3); font-size: var(--fs-0); font-weight: 700; color: var(--success-text); }
.outcome-cancelled, .outcome-limited, .outcome-partial { color: var(--warning-text); }
.outcome-failed { color: var(--destructive-text); }
.segments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seg { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.seg-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.seg-text { flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.seg .why { flex-basis: 100%; font-size: var(--fs-0); color: var(--muted-foreground); }
/* answer v2 (CP5 S3): a written answer, its numbered references and the check's marks */
.answer-v2 { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.answer-v2 p, .answer-v2 ul, .answer-v2 ol, .answer-v2 blockquote { margin: 0; }
.ans-summary { font-size: var(--fs-1); font-weight: 500; }
.ans-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ans-body:empty { display: none; }
.ans-h { margin: 6px 0 0; font-size: var(--fs-1); }
h4.ans-h, h5.ans-h { font-size: var(--fs-0); }
.ans-list { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; }
.ans-list .ans-list { margin-top: 4px; }
.answer-v2 blockquote { border-inline-start: 3px solid var(--border); padding-inline-start: 10px; color: var(--muted-foreground); }
.answer-v2 hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 2px 0; }
.ans-code pre { margin: 0; padding: 8px 10px; background: var(--surface-3); border-radius: var(--radius-s); overflow-x: auto; }
.ans-code code { white-space: pre; overflow-wrap: normal; }
li > .ans-code { margin: 4px 0; }
.answer-v2 :not(pre) > code { background: var(--surface-3); border-radius: 3px; padding: 0 3px; }
.table-wrap { overflow-x: auto; max-width: 100%; }
table.ans-table { width: auto; min-width: min(100%, 420px); overflow-wrap: normal; }
.al-left { text-align: start; } .al-center { text-align: center; } .al-right { text-align: end; }
table.data th.al-center, table.data td.al-center { text-align: center; }
table.data th.al-right, table.data td.al-right { text-align: end; }
button.ref { font: inherit; font-size: var(--fs-xs); font-weight: 600; vertical-align: super; line-height: 1; margin: 0; margin-inline-start: 1px;
  padding: 0 2px; border: 0; border-radius: 3px; background: none; color: var(--ai-text); cursor: pointer; }
button.ref:hover { background: var(--ai-soft); }
.ref-lent button.ref { color: var(--muted-foreground); font-weight: 400; }
.is-marked { background: var(--warning-soft); border-radius: var(--radius-sm); padding-inline: var(--s2); }
li.is-marked, tr.is-marked { padding-inline: 0; }
.unit-mark { display: inline; font-size: var(--fs-xs); line-height: 1.3; border: 1px solid currentColor; border-radius: 4px;
  padding: 0 5px; white-space: normal; }
.unit-mark .mk { font-weight: 700; }
.mark-partly { color: var(--warning-text); }
.mark-unsupported, .mark-unreferenced { color: var(--destructive-text); }
.mark-unchecked { color: var(--muted-foreground); border-style: dashed; }
.unit-mark .mk-note { font-weight: 400; }
.ans-rec { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s3) var(--s4); background: var(--surface-1);
  box-shadow: var(--elevation-card); }
.answer-v2 .ans-rec > p { margin: 0 0 4px; }
.ans-rec.is-marked { border-color: var(--warning); padding-inline: var(--s4); }
.rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ans-rec .why { font-size: var(--fs-0); color: var(--muted-foreground); }
.ans-ideas { display: flex; flex-direction: column; gap: var(--s2); }
.ans-idea { border: 1px solid color-mix(in srgb, var(--ai) 28%, var(--border)); border-radius: var(--radius-lg); padding: var(--s3) var(--s4);
  background: var(--surface-1); box-shadow: var(--elevation-card); }
.answer-v2 .ans-idea > p { margin: 0 0 4px; }
.answer-v2 .ans-idea > p:last-child { margin-bottom: 0; }
.idea-head { display: flex; align-items: center; gap: 6px; color: var(--ai-text); }
.idea-head .k { color: var(--ai-text); font-weight: 600; }
.idea-head .icon { flex: none; }
.ans-gaps ul { padding-inline-start: 20px; font-size: var(--fs-0); }
.ans-refs { border-top: 1px solid var(--border); padding-top: 8px; }
.ref-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-0); }
.ref-item { border-radius: var(--radius-xs); padding: 2px var(--s1); }
.ref-item:focus { outline: 2px solid var(--primary); outline-offset: 1px; background: var(--surface-3); }
.ref-n { display: inline-block; font-weight: 700; color: var(--ai-text); border: 1px solid color-mix(in srgb, var(--ai) 40%, var(--border)); border-radius: var(--radius-xs);
  padding: 0 5px; font-size: var(--fs-xs); }
.ref-item .muted.small { margin-inline-start: 6px; }
/* the cited lines (b25 F3): numbered by the text itself. b31: a document or library text follows its own direction (dir=auto) and wraps;
   code stays left to right, on lines that scroll sideways inside the box */
.ref-item .excerpt { margin: 4px 0 0; padding: 6px 8px; background: var(--surface-3); border-radius: 4px; max-height: 12em;
  max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; text-align: start; font-size: var(--fs-xs); }
.ref-item .excerpt-code { white-space: pre; overflow-wrap: normal; direction: ltr; text-align: left; }
.ref-item .excerpt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.link-btn { font: inherit; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.ans-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.legend-v2 { margin: 0 0 16px; font-size: var(--fs-xs); color: var(--muted-foreground); }
.legend-v2 summary { cursor: pointer; }
.legend-v2 ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; }
.draft-note { margin: var(--s3) 0 0; }
/* the workspace a conversation reads, and what an answer saved to its memory (CP5 S4) */
.conv-ws { flex-basis: 100%; margin: 0; }
.mem-changes { margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-s); font-size: var(--fs-0); }
.mem-changes > .k { margin: 0 0 4px; }
.mem-changes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mem-change { overflow-wrap: anywhere; }
.mem-change.is-undone .mem-text { color: var(--muted-foreground); }
.mem-old { display: block; }
.mem-box .form-error { margin-top: 4px; }
.run-meta { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--muted-foreground); }
.run-notes { margin: 12px 0 0; padding-inline-start: 18px; font-size: var(--fs-0); color: var(--muted-foreground); }
.run-notes li { margin: 0 0 4px; }
.state-label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.spinner { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border);
  border-top-color: var(--primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .ty-card, .st-row, .ex-card, .ex-hcard { transition: none; }
  .ty-card:active, .st-row:active { transform: none; }
}
.ask-hint:empty { display: none; }
.ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-0); }
.ctx:empty { display: none; }
.ctx-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 999px;
  padding: 1px 3px 1px 10px; }
.chip-x { font: inherit; border: 0; background: none; color: var(--muted-foreground); cursor: pointer; padding: 0 6px; border-radius: 999px; }
.chip-x:hover { color: var(--foreground); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* the assistant beside every page (CP5 S6): a button at the bottom right opens a panel on the right. From 1100 px up the
   page makes room for it; below that it lies over the page. The evidence drawer opens above it. */
.panel-toggle { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 8; box-shadow: var(--elevation-pop); }
.ai-panel { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: 9; width: min(var(--panel-w, 420px), 100vw); display: flex;
  flex-direction: column; background: var(--surface-2); border-inline-start: 1px solid var(--border-strong); box-shadow: var(--elevation-modal);
  border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); animation: slide-in 280ms var(--ease-out-expo); }
.ai-panel[hidden], .panel-toggle[hidden] { display: none; }
.panel-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.panel-top h2 { font-size: var(--fs-2); margin: 0 auto 0 0; }
.panel-face { display: inline-flex; flex: none; }
.panel-conv { padding: 8px 14px 0; font-size: var(--fs-0); }
.panel-conv:empty { display: none; }
.panel-title { margin: 0 0 2px; overflow-wrap: anywhere; }
.panel-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.ai-panel .question { max-width: 100%; }
.panel-status .today, .panel-status .web-note { flex-basis: auto; }
/* its left edge sets its width (the owner, 2026-10-03): drag it, or focus it and press the arrow keys */
.panel-resize { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: 1; cursor: ew-resize;
  touch-action: none; }
.panel-resize::after { content: ""; position: absolute; top: 50%; left: 2px; width: 4px; height: 44px; margin-top: -22px;
  border-radius: 2px; background: var(--muted-foreground); opacity: 0.6; }
.panel-resize:hover, body.panel-resizing .panel-resize { background: var(--primary); opacity: 0.35; }
.panel-resize:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.panel-resizing { cursor: ew-resize; user-select: none; }
@media (min-width: 1100px) { body.panel-open #app { margin-right: var(--panel-w, 420px); } }
@media (max-width: 719px) { .ai-panel { left: 0; width: auto; border-left: 0; } .panel-resize { display: none; } }

/* My work, Team, Inbox and Admin */
.item-list, .admin-list, .notifications { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item-list > li, .admin-list > li, .notifications > li { background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
.item-list p, .admin-list p, .notifications p { margin: 4px 0; }
.item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.quote { border-inline-start: 3px solid var(--border); padding-inline-start: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.n-text { overflow-wrap: anywhere; }
.n-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.toolbar .field { flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.export-result p { margin: 0 0 12px; }

/* Admin -> Tips (b44 lane D): the add form, one row per tip, its statements with the evidence and the owner's decision */
.tip-add { margin: 0 0 var(--s4); }
.tip-add > summary { cursor: pointer; font-weight: 550; padding: var(--s2) 0; min-height: 40px; }
.tip-form { margin-top: var(--s3); }
.tip-form textarea { min-height: 6rem; }
.tips-list { margin-top: var(--s3); }
.tip-title { font-weight: 600; overflow-wrap: anywhere; }
.tip-progress { margin: 4px 0; }
.tip-statements { margin-top: var(--s3); }
.tip-statement { font-weight: 500; overflow-wrap: anywhere; }
.tip-where { overflow-wrap: anywhere; }
.tip-proposal { margin: var(--s2) 0; padding: var(--s2) var(--s3); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.tip-kind { margin: 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.tip-text { overflow-wrap: anywhere; }
.tip-detail { margin: 4px 0; padding-inline-start: 1.1em; }
.tip-evidence a { overflow-wrap: anywhere; }
.tip-excerpt summary { cursor: pointer; font-size: var(--text-sm); color: var(--muted-foreground); min-height: 32px; }
.tip-excerpt pre { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); background: var(--code-bg); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
.tip-warnings { margin: 4px 0; padding-inline-start: 1.1em; color: var(--warning-text); }
.tip-row .actions, .tip-item .actions { flex-wrap: wrap; }
.tip-row .actions .btn, .tip-item .actions .btn { min-height: 40px; }
.triage, .resolve { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.ws-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.ws-bar .field { margin: 0; }
.ws-manage, .ws-new { margin-top: 6px; }
.mem-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mem-item.is-past { border-style: dashed; }
.mem-item.is-past .mem-text { color: var(--muted-foreground); }
/* CP7 S5: the brief, the documents and a document's numbered text */
.brief-form textarea { min-height: 9em; }
.doc-report { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--fs-0); }
.doc-report:empty { display: none; }
.doc-report .ok { color: var(--success-text); }
.doc-report .bad { color: var(--destructive-text); }
.doc-report li { overflow-wrap: anywhere; }
.doc-usage { margin: 10px 0 8px; }
.doc-name { font-weight: 600; overflow-wrap: anywhere; }
.doc-item .actions { margin-top: 4px; }
.doc-where { margin: 0 0 6px; }
.doc-cited { font-weight: 600; margin: 0; }
.doc-text { counter-reset: ln; margin-top: 12px; padding: 8px 0; background: var(--code-bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font: 13px/1.5 var(--font-mono); }
.doc-text .ln { counter-increment: ln; display: grid; grid-template-columns: 4.5em minmax(0, 1fr); min-height: 1.5em;
  padding-right: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-text .ln::before { content: counter(ln); padding-right: 12px; color: var(--muted-foreground); text-align: right;
  user-select: none; }
.doc-text .ln.cited { background: var(--primary-soft); }
.doc-text .ln.cited::before { color: var(--primary-text); font-weight: 600; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.members li { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--elevation-card); }
.profile { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: var(--s2) 0 0; padding: var(--s4) var(--s5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.profile dt { color: var(--subtle-foreground); font-size: var(--text-sm); }
.profile dd { margin: 0; }
.row-actions .btn { margin: 0 6px 4px 0; }
.one-time { margin: 12px 0; padding: var(--s3) var(--s4); border: 1px solid color-mix(in oklch, var(--warning) 30%, transparent); border-radius: var(--radius-lg); background: var(--warning-soft); }
.one-time p { margin: 4px 0; }
.one-time code { font-size: var(--fs-1); padding: 2px 8px; background: var(--code-bg); border-radius: var(--radius-sm); user-select: all; }
.models .item-list { margin-bottom: 6px; }
.days { margin: 12px 0; }
.admin-ai h3 { font-size: var(--fs-1); margin: 14px 0 6px; }

@media (max-width: 900px) {
  .assistant { grid-template-columns: minmax(0, 1fr); }
  .conv-side { position: static; min-width: 0; }
  .conversations ul { max-height: 30vh; }
}
@media (max-width: 640px) {
  .seg { grid-template-columns: 1fr; gap: 2px; }
  .seg-tag { justify-self: start; }
  .question { max-width: 100%; }
  main.auth { padding-top: 16px; }
  .ans-list { padding-inline-start: 18px; }
  .ref-item .ref-link { display: block; margin: 2px 0 0; }
  .ref-item .excerpt { max-height: 9em; }
}

/* touch: a hit target is 44 px */
@media (pointer: coarse) {
  .btn, .menu-btn, .menu-item, .menu-row, .voice-lang, .menu-list .sign-out, .theme-opt, .pick, .bell { min-height: 44px; }
  .btn.link { min-height: 0; }
  .icon-btn { width: 44px; height: 44px; }
  .seg-tab { min-width: 44px; justify-content: center; }
  .bell { min-width: 44px; }
}

/* b23 slice 4: the project switcher (Assistant page and panel), the Project page's tabs, empty states */
.proj-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: var(--s1) 0 var(--s2); }
.proj-switch { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; font-weight: 600; }
.proj-switch select { min-width: 0; max-width: 100%; font-weight: 400; text-overflow: ellipsis; }
.proj-bar .form-error { flex-basis: 100%; margin: 0; }
.ai-panel .proj-bar { padding: var(--s2) var(--s4) 0; margin: 0; }
.my-notes h3 { font-size: var(--fs-2); margin: var(--s5) 0 var(--s2); }
@media (pointer: coarse) { .tab-btn, .seg-tab { min-height: 44px; } }
@media (max-width: 719px) { .tab-btn { padding: var(--s2) 10px; } }

/* b25 F1: on a phone the list of conversations is a disclosure, "Conversations (n)", closed; from 720 px up it is the list */
.conv-fold > summary { font-weight: 600; margin: 0; }
@media (min-width: 720px) { .conv-fold > summary { display: none; } }
@media (max-width: 719px) { .conv-fold > summary { padding-block: var(--s1); } .conv-fold[open] > summary { margin-bottom: var(--s1); } }
/* b25 F4: the item an answer's reference points at, marked for a few seconds */
.is-target { outline: 2px solid var(--primary); outline-offset: 2px; background: var(--surface-3); border-radius: var(--radius-xs); }

/* b24 UI-1: the Check-up pages */
.cu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); }
.cu-draft { margin: 0 0 var(--s3); font-size: var(--fs-0); color: var(--warning-text); font-weight: 600; }
.cu-next { margin: var(--s4) 0; padding: var(--s4) var(--s5); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.cu-next h2 { font-size: var(--fs-2); margin: 0 0 var(--s1); }
.cu-next-text { margin: 0 0 var(--s3); max-width: 80ch; }
.cu-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s4); }
.cu-action { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; max-width: 100%; }
.cu-action .form-error { margin: 0; }
.cu-why { margin: 0; max-width: 34ch; }
.cu-form { display: flex; flex-direction: column; gap: var(--s1); width: min(100%, 300px); }
.cu-form input, .cu-form select, .cu-form textarea { width: 100%; }
.cu-form .field { margin: 0; }
.cu-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); counter-reset: none; }
.cu-step { padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.cu-step.st-waiting, .cu-step.st-paused, .cu-step.st-out_of_date { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.cu-step.st-not_verified, .cu-step.st-failed { border-color: color-mix(in srgb, var(--destructive) 40%, var(--border)); }
.cu-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.cu-step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background: var(--surface-3); font-weight: 700; font-size: var(--fs-0); }
.cu-step p { margin: var(--s1) 0 0; }
.cu-reason { color: var(--foreground); }
.cu-problems { margin: var(--s1) 0 0; padding-left: var(--s5); color: var(--destructive-text); font-size: var(--fs-0); overflow-wrap: anywhere; }
.cu-recs a { margin-right: 2px; }
.step-actions { margin-top: var(--s2); }
.cu-bar { display: block; width: 100%; height: 8px; border-radius: 4px; }
.cu-bar .track { fill: var(--surface-3); }
.cu-bar .g-from { stop-color: var(--primary); }
.cu-bar .g-to { stop-color: var(--ai); }
.cu-bar .held { fill: var(--warning-text); }
.cu-ledger { max-width: 560px; }
.cu-ledger-line { margin: 0 0 var(--s1); }
.cu-bystep { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.cu-bystep li { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; border-top: 1px solid var(--border); font-size: var(--fs-0); }
.cu-never-list { margin: 0 0 var(--s3); padding-left: var(--s5); overflow-wrap: anywhere; }
.cu-exclude { max-width: 460px; }
.cu-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s3); }
.cu-case { padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elevation-card); min-width: 0; }
.cu-case.is-waiting { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.cu-case-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.cu-case-name { font-weight: 700; font-size: var(--fs-2); overflow-wrap: anywhere; }
.cu-case p { margin: var(--s1) 0 0; }
.cu-progress { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.cu-messages { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.cu-msg { max-width: min(720px, 100%); padding: var(--s2) var(--s3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); }
.cu-msg.role-user { align-self: flex-end; background: var(--surface-3); }
.cu-msg.role-system { background: transparent; border-style: dashed; color: var(--muted-foreground); }
.cu-msg.is-open { border-color: var(--primary); box-shadow: var(--elevation-card); }
.cu-msg p { margin: 0 0 var(--s1); }
.cu-msg-text { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.cu-options { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cu-cite { margin: var(--s2) 0; }
.cu-cite figcaption { font-size: var(--fs-0); color: var(--muted-foreground); }
.cu-cite pre { margin: 2px 0 0; padding: var(--s2) var(--s3); background: var(--surface-3); border-radius: var(--radius-s); overflow-x: auto; direction: ltr; unicode-bidi: embed; }
.cu-say { max-width: 720px; }
.cu-records, .cu-missing, .cu-counts { margin: 0; padding-left: var(--s5); }
.cu-records { list-style: none; padding-left: 0; }
.cu-records li { padding: 2px 0; }
.cu-counts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; padding: 0; margin: var(--s2) 0; }
.cu-facts { display: grid; grid-template-columns: minmax(9em, max-content) minmax(0, 1fr); gap: var(--s1) var(--s4); margin: 0 0 var(--s3); }
.cu-facts dt { color: var(--muted-foreground); }
.cu-facts dd { margin: 0; overflow-wrap: anywhere; }
.cu-list { margin: 0 0 var(--s3); padding-inline-start: var(--s5); }
.cu-list .badge { margin-inline-start: var(--s2); }
.cu-section { margin-top: var(--s5); }
.cu-finding { margin: 0 0 var(--s4); padding: var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card); }
.cu-finding .tags .badge { background: var(--surface-3); color: var(--muted-foreground); }
.cu-finding.disp-fix_now .tags .badge:first-child { background: var(--destructive-soft); color: var(--destructive-text); }
.cu-finding.disp-investigate_next .tags .badge:first-child, .cu-finding.disp-fix_when .tags .badge:first-child { background: var(--warning-soft); color: var(--warning-text); }
.cu-finding h3 { font-size: var(--fs-2); margin: 0 0 var(--s1); }
.cu-finding:focus { outline: 2px solid var(--primary); }
.cu-fixes { padding-left: var(--s5); }
.cu-fix { margin: 0 0 var(--s3); }
.cu-fix h3 { font-size: var(--fs-1); margin: 0 0 var(--s1); }
.cu-prompt { margin: 0 0 var(--s2); padding: var(--s3); background: var(--surface-3); border-radius: var(--radius-s); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-export, .cu-handover .actions { margin-top: var(--s3); }
a.btn[role="button"] { text-decoration: none; }
.cu-new-form { max-width: 560px; }
.cu-new-form .tabs { margin-top: var(--s3); }
.cu-pane[hidden] { display: none; }
.cu-material-block { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-s); }
.cu-material-h { font-size: var(--fs-1); margin: 0 0 var(--s1); }
.cu-material-line { margin: 0 0 var(--s2); overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .cu-next { padding: var(--s3) var(--s4); }
  .cu-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cu-facts dd { margin-bottom: var(--s2); }
  .cu-why { max-width: none; }
}

/* b24 UI-2: answers in any direction (dir="auto" is set on each block; plaintext bidi makes each paragraph pick its own
   direction), code always left to right, rich tables, answer actions, the attach button */
.answer-v2 p, .answer-v2 li, .answer-v2 td, .answer-v2 th, .answer-v2 blockquote, .answer-v2 .ans-h, .answer-v2 .tbl-caption,
.q-text, .conv-title, .conv-head h2, .panel-title strong, .conv-list a { unicode-bidi: plaintext; }
.answer-v2 code, .answer-v2 pre, .ans-code { direction: ltr; unicode-bidi: embed; text-align: left; }
.answer-v2 :not(pre) > code { unicode-bidi: embed; }
.answer-v2 .table-wrap { max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-s); }
.answer-v2 table.ans-table { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; max-width: none; font-variant-numeric: tabular-nums; }
.answer-v2 table.ans-table th, .answer-v2 table.ans-table td { border-top: 1px solid var(--border); }
.answer-v2 table.ans-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-3); border-top: 0; }
.answer-v2 table.ans-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-1)); }
.answer-v2 .tbl-caption { margin: 0 0 var(--s1); color: var(--muted-foreground); font-size: var(--fs-0); unicode-bidi: plaintext; }
.table-fig { min-width: 0; max-width: 100%; }
.turn, .reply, .conv-main, .thread, .panel-thread { min-width: 0; }
.panel-thread { overflow-x: hidden; }
.ans-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); border-top: 1px solid var(--border); padding-top: var(--s2); }
.attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s2); }
.attach-row progress { width: 120px; height: 8px; }
.attach-status { min-width: 0; overflow-wrap: anywhere; }

/* b24 UI-3: the case page leads with what you must do */
.cu-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s3); }
.cu-head-main { min-width: 0; flex: 1 1 320px; }
.cu-head-main p { margin: 0 0 var(--s1); }
.cu-id { font-size: var(--fs-0); }
.cu-head-side { display: flex; align-items: center; gap: var(--s3); flex: 0 1 auto; }
.cu-money-line { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 150px; font-size: var(--fs-0); }
.cu-more { position: relative; }
.cu-more > summary { list-style: none; cursor: pointer; display: inline-flex; }
.cu-more > summary::-webkit-details-marker { display: none; }
.cu-lead { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.cu-lead h2 { font-size: var(--fs-2); margin: 0 0 var(--s1); }
.cu-lead-text { margin: 0 0 var(--s3); max-width: 80ch; }
.cu-lead .cu-chat { margin: var(--s3) 0; }
details.cu-lead-brief { margin: var(--s3) 0; padding: var(--s2) var(--s3); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-s); }
.cu-runline { margin: 0 0 var(--s1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 600; }
.cu-lead-run .cu-lead-text { margin-bottom: var(--s2); }
.cu-section > summary, .cu-allsteps > summary { cursor: pointer; font-weight: 600; margin: var(--s2) 0; }
details.cu-section { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--border); }
.cu-section, .cu-finding { scroll-margin-top: 72px; }
/* b25 F8: the report's section list; b25 E7: what a running step holds, beside the spend */
.cu-toc { margin: var(--s3) 0; padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-s); }
.cu-toc p { margin: 0 0 var(--s1); }
.cu-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.cu-toc li { min-width: 0; }
.cu-holding, .cu-live { overflow-wrap: anywhere; }
.cu-p, .cu-list li, .cu-lead-text p, .cu-toc button { overflow-wrap: anywhere; }
details.cu-section > summary { font-size: var(--fs-2); color: var(--foreground); }
.cu-plan { margin-top: var(--s4); }
.cu-allsteps > summary { color: var(--foreground); }
.cu-show { color: var(--primary); }
.cu-allsteps[open] .cu-show { display: none; }
.cu-stepper { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.cu-dot { font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: var(--s1); background: none; border: 0; border-radius: var(--radius-s);
  color: var(--foreground); font-size: var(--fs-xs); }
.cu-dot:hover { background: var(--surface-3); }
.cu-dot-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--input); background: var(--surface-1); font-weight: 700; font-size: var(--fs-0); }
.cu-dot.st-done .cu-dot-n { border-color: var(--success); color: var(--success-text); background: var(--success-soft); }
.cu-dot.st-running .cu-dot-n { border-color: var(--ai); color: var(--ai-text); background: var(--ai-soft); }
.cu-dot.st-waiting .cu-dot-n, .cu-dot.st-paused .cu-dot-n, .cu-dot.st-out_of_date .cu-dot-n { border-color: var(--warning); color: var(--warning-text); background: var(--warning-soft); }
.cu-dot.st-not_verified .cu-dot-n, .cu-dot.st-failed .cu-dot-n { border-color: var(--destructive); color: var(--destructive-text); background: var(--destructive-soft); }
.cu-dot[aria-current="step"] .cu-dot-n { box-shadow: 0 0 0 3px var(--surface-3), 0 0 0 5px var(--primary); }
.cu-dot[aria-expanded="true"] { background: var(--surface-3); }
.cu-details { display: flex; flex-direction: column; gap: var(--s2); }
.cu-details .cu-step[hidden] { display: none; }
.cu-mini { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; }
.cu-mini li { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--surface-3); border: 1px solid var(--border); }
.cu-mini li.st-done { background: var(--success); border-color: var(--success); }
.cu-mini li.st-running { background: var(--ai); border-color: var(--ai); }
.cu-mini li.st-waiting, .cu-mini li.st-paused, .cu-mini li.st-out_of_date { background: var(--warning); border-color: var(--warning); }
.cu-mini li.st-not_verified, .cu-mini li.st-failed { background: var(--destructive); border-color: var(--destructive); }
.cu-case { position: relative; }
.cu-case:hover { border-color: var(--input); }
.cu-case .cu-case-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.cu-case .cu-case-name:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
.cu-later { margin-top: var(--s1); }
@media (max-width: 719px) {
  .cu-lead { padding: var(--s3) var(--s4); }
  .cu-head-side { width: 100%; justify-content: space-between; }
  .cu-dot { min-width: 56px; }
}

/* ---------------------------------------------------------------- b24 UI-4: responsive at every width (the audit, rows 1 to 20) */
:root { --bar-h: 57px; }
@media (max-width: 719px) { :root { --fs-xs: 13px; --fs-0: 14px; } }                       /* 19: phone text is not 12 px */

/* 2, 3, 11: a long name or path wraps instead of widening the page */
main, .drawer, .ai-panel, .tipbox, .menu-list { overflow-wrap: anywhere; }
.mark, .mk-text, .cfg, .note, .claim, .claim .kv, .chip, .dial, .mini th, .mini td, .grid td, .grid th { min-width: 0; }
.drawer * { min-width: 0; }
.drawer code, .drawer .kv, .claim .statement { overflow-wrap: anywhere; word-break: break-word; }
code, .key, .cfg { overflow-wrap: anywhere; }

/* 1: dials: the chart and the table shrink into the column, and stack on a phone */
.dial-body, .dial-body > * { min-width: 0; max-width: 100%; }
.dots { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .dial .mini, .dial .mini tbody, .dial .mini tr, .dial .mini th, .dial .mini td { display: block; }
  .dial .mini tr { padding: var(--s1) 0; border-top: 1px solid var(--border); }
  .dial .mini th, .dial .mini td { padding: 0; }
  .mini.wide td:nth-child(2) { white-space: normal; }
}

/* 12: a reading width on prose, never on tables, grids or cards */
main p, .answer-v2 li, .writeup-body li, .tl-topics li, .changes li, .cu-list li { max-width: 75ch; }
.cu-lead p, .cu-next p { max-width: none; }

/* 7, 8, 14: the top bar is one row from 720 px up, and from 361 px down brand, search, bell and menu share a row;
   on a wide screen its content lines up with the page (1600 px) */
.topbar { min-height: var(--bar-h); padding-inline: max(clamp(12px, 3vw, 32px), calc((100vw - 1600px) / 2 + clamp(12px, 3vw, 32px))); }
.brand-name { white-space: nowrap; }
@media (min-width: 720px) and (max-width: 899px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar { gap: var(--s1) var(--s3); flex-wrap: nowrap; }
}
@media (max-width: 380px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar { flex-wrap: nowrap; gap: var(--s2); }
  .search-wrap { order: 2; flex: 1 1 0; min-width: 0; }
  .bar-right { order: 3; margin-left: 0; gap: var(--s1); }
  .menu-btn { max-width: 96px; }
}

/* 9: on a phone the floating button is a round 44 px icon, and only where there is a page to ask about */
.panel-toggle .icon { display: none; }
@media (max-width: 719px) {
  .panel-toggle { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; right: var(--s3); }
  .panel-toggle .icon { display: block; }
  .panel-toggle .toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 10: from 720 to 1099 px the panel starts under the top bar, so search, bell and menu stay in reach */
@media (min-width: 720px) and (max-width: 1099px) { .ai-panel { top: var(--bar-h); } }


/* 15: the Check-up list lines up with the page */
.cu-listing .cu-cases { padding: 0; margin: 0; }

/* 16: a table that scrolls sideways says so: a soft edge where more is hidden */
.grid-wrap, .table-wrap { background:
  linear-gradient(to right, var(--surface-1) 30%, transparent) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--surface-1) 30%, transparent) right center / 28px 100% no-repeat local,
  linear-gradient(to right, color-mix(in oklch, var(--foreground) 22%, transparent), transparent) left center / 12px 100% no-repeat scroll,
  linear-gradient(to left, color-mix(in oklch, var(--foreground) 22%, transparent), transparent) right center / 12px 100% no-repeat scroll; }

/* 18: Compare: the harness columns are equal, the rule column a fixed share */
@media (min-width: 641px) {
  .compare .grid { table-layout: fixed; }
  .compare .grid thead th:first-child, .compare .grid tbody th { width: 34%; }
}

/* 20: an answer on a phone keeps its words, not its margins */
@media (max-width: 640px) {
  .reply { padding: var(--s3); }
  .ans-list { padding-inline-start: 18px; }
  .answer-v2 .is-marked { padding-inline-start: 6px; }
}

/* 4: phone form text is 16 px so a phone does not zoom in (this wins over the page's own select and input rules) */
@media (max-width: 719px) {
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea { font-size: 16px !important; }
}

/* 5, 6: on a touch screen every button, link outside running text, summary and field is 44 px */
@media (pointer: coarse) {
  button, summary, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .search { min-height: 44px; }
  button, .btn, .tab-btn, .cite, .link-btn, .chip-x, .menu-btn { min-width: 44px; }
  .btn, .btn.small { min-height: 44px; }
  .btn.small, .link-btn, .cite, .chip-x { display: inline-flex; align-items: center; justify-content: center; }
  .link-btn { justify-content: flex-start; }
  button.ref { min-height: 0; min-width: 0; }                                  /* a citation marker inside a sentence */
  .mark-btn { margin-block: 0 var(--s1); }
  a.ex-card-name, .ex-hname, .brand, .sec-link, .search-results a, .conv, .cu-case-name, a.menu-item, .doc-name, .item-head a,
  .standalone-link, .tl-head a, .chips a, .changes a, .cu-recs a, .cu-records a, .tabs a,
  .topic-sec .sec-link { display: inline-flex; align-items: center; min-height: 44px; }
  .mini th a, .mini td a, .grid th a, .grid thead a, .compare h2 a, .proj-bar a, .sec-head a, .tag a, h2 a, h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }   /* b26: a short name ("repoA") is narrower in Plex than in the system font, so the width is held too */
  .summary-box a, .meta-line a { display: inline-flex; align-items: center; min-height: 44px; }
  .bell { min-width: 44px; min-height: 44px; }
  .tip-btn { padding-block: var(--s2); }
}

/* b24 UI-5: the follow-up on a finished check-up, the re-check */
.cu-followup { margin-top: var(--s4); }
.cu-followup h2 { font-size: var(--fs-2); margin: 0 0 var(--s2); }
.cu-followup-form { max-width: 720px; margin-bottom: var(--s3); }
.cu-why-closed { margin: 0 0 var(--s3); }
.cu-followup .answer-v2 { margin-top: var(--s1); }
.cu-followup .cu-msg.role-assistant { max-width: 100%; }
.cu-answering { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 0; }
.cu-run-meta { margin: var(--s1) 0 0; }
.cu-final { margin: 0 0 var(--s2); }
.cu-final .badge { color: var(--success-text); background: transparent; border: 1px solid var(--success-text); }
.cu-recheck-form { max-width: 560px; }
.cu-recheck-form .choices { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s2) 0; }
.cu-recheck-of, .cu-rechecks { margin: 0 0 var(--s1); }

/* ---------------------------------------------------------------- b27 H1: where you are
   Explore's sub-tabs (Map, Compare, What's new) are a segmented control at the top of those pages; a topic or a harness page
   has a breadcrumb instead. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 var(--s3); font-size: var(--fs-0); color: var(--muted-foreground); }
.crumbs a { display: inline-flex; align-items: center; }
.crumbs .sep { white-space: pre; }
.crumb-here { overflow-wrap: anywhere; }
.ask-pointer { margin: var(--s3) 0 0; font-size: var(--fs-0); }
@media (pointer: coarse) {
  .seg-tab { min-height: 44px; }
  .crumbs a { min-height: 44px; }
}

/* ---------------------------------------------------------------- b27 H2: the composer, the empty state, the project sheet
   One composer (a rounded, raised surface with the question box and a row of tools) is the hero of the Ask page and is the same
   in the side panel and on the Explore page. Icon buttons are round and 44 px; pills are tinted, not outlined. */
.beam { --beam-radius: 16px; }
.composer { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: var(--s3) var(--s3) var(--s2) var(--s4);
  background: var(--chat-bg); border: 0; box-shadow: none; }
.cmp-text { display: block; width: 100%; min-height: 28px; max-height: 220px; padding: var(--s1) 0; border: 0; border-radius: 0; resize: none;
  background: transparent; color: var(--foreground); font: inherit; font-size: 16px; line-height: 1.5; overflow-y: auto; }
.cmp-text:focus, .cmp-text:focus-visible { outline: none; }
.cmp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-left: calc(-1 * var(--s2)); }
.cmp-grow { flex: 1 1 0; min-width: 0; }
.cmp-pills { display: contents; }
.send { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ai-solid); color: var(--ai-solid-foreground); cursor: pointer; transition: filter var(--dur-fast) var(--ease-out-quart); }
.send:hover { filter: brightness(1.08); }
.send:disabled { background: var(--surface-3); color: var(--muted-foreground); cursor: not-allowed; filter: none; }
.send:disabled::after { display: none; }
.send .icon { display: block; }
.pill { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; min-height: 40px; padding: 0 var(--s3);
  border: 0; border-radius: 999px; background: var(--surface-3); color: var(--foreground); font: inherit; font-size: var(--fs-0); font-weight: 500; cursor: pointer; }
.pill:hover { filter: brightness(0.97); }
.pill .icon { flex: none; color: var(--muted-foreground); }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-pill { max-width: 15em; }
.depth-pill { position: relative; padding: 0; }
.depth-pill select { appearance: none; -webkit-appearance: none; min-width: 0; width: 9em; max-width: 100%; min-height: 40px; padding: 0 var(--s6) 0 var(--s3);
  margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--fs-0); font-weight: 500;
  text-overflow: ellipsis; cursor: pointer; }
.depth-pill .icon { position: absolute; right: var(--s3); top: 50%; margin-top: -8px; pointer-events: none; }
.depth-pill select:focus, .depth-pill select:focus-visible { outline: none; }
.depth-pill:focus-within, .pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.attach-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.attach-status:empty { display: none; }
.composer .ctx { margin: 0 0 var(--s1); }
.composer .form-error { margin: 0; }
.cmp-dock { margin-top: var(--s4); }
.cmp-dock > .ask-hint { margin: 0 0 var(--s2); padding: 0 var(--s1); font-size: var(--fs-0); color: var(--warning-text); }
.cmp-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-top: var(--s1); color: var(--muted-foreground); font-size: var(--fs-0); }
.how-works { flex: 1 1 auto; min-width: 0; margin: 0; }
.how-works > summary { display: inline-block; margin: 0; padding: var(--s1) 0; color: var(--muted-foreground); font-size: var(--fs-0); }
.how-works .ai-status, .how-works .legend-box { margin: var(--s1) 0; }
.how-works .legend-v2 { margin: 0 0 var(--s2); }
.sent-note { margin: 0 0 var(--s2); }
.today-line { flex: none; padding: var(--s1) 0; }
.composer-hero { padding-block: var(--s2); }
.composer-hero .cmp-text { min-height: 28px; }

/* the Ask page: the conversation, and the composer under it */
.conv-main { display: flex; flex-direction: column; width: 100%; max-width: 860px; margin-inline: auto; }
.conv-main .thread { flex: 1 1 auto; }
.conv-main.has-turns .cmp-dock { position: sticky; bottom: 0; z-index: 3; padding: var(--s3) 0 var(--s3); margin-top: 0; background: var(--background); }
.conv-head .conv-ws { margin: 0; }
.hello { padding: var(--s6) 0 0; }
.greeting { margin: 0 0 var(--s1); font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--foreground); }
.lede { margin: 0 0 var(--s5); }
.suggestions { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.suggestions li { min-width: 0; }
.suggest { display: flex; flex-direction: column; gap: var(--s1); width: 100%; height: 100%; padding: var(--s3) var(--s4); text-align: start; font: inherit;
  background: var(--surface-1); color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.suggest:hover { border-color: var(--input); }
.suggest-k { font-weight: 600; }
.suggest-q { color: var(--muted-foreground); font-size: var(--fs-0); }
.ai-panel .cmp-dock { margin: 0; padding: var(--s2) var(--s3) var(--s3); background: var(--surface-1); }
.ai-panel .composer { padding: var(--s2) var(--s2) var(--s1) var(--s3); }
.ai-panel .proj-pill { max-width: 9em; }
.ai-panel .how-works .ai-status { font-size: var(--fs-xs); }

/* the project sheet: from the right, the whole screen on a phone */
.sheet-scrim { position: fixed; inset: 0; z-index: 12; background: var(--scrim); backdrop-filter: blur(6px); animation: fade-in 200ms var(--ease-out-quart); }
.sheet { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: 13; width: min(520px, 100vw); display: flex; flex-direction: column;
  background: var(--surface-2); border-inline-start: 1px solid var(--border-strong); box-shadow: var(--elevation-modal); overflow-wrap: anywhere;
  border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); animation: slide-in 280ms var(--ease-out-expo); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s5);
  border-bottom: 1px solid var(--border); }
.sheet-head h2 { margin: 0; font-size: var(--fs-3); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s5); }
.sheet-sec { margin: var(--s5) 0 0; }
.sheet-sec h3 { margin: 0 0 var(--s1); font-size: var(--fs-2); }
.sheet-sec > .muted.small { margin: 0 0 var(--s2); }
.sheet .item-list > li { background: transparent; }
.sheet-foot { position: sticky; bottom: 0; margin: var(--s5) calc(-1 * var(--s5)) 0; padding: var(--s3) var(--s5); background: var(--surface-1);
  border-top: 1px solid var(--border); }

@media (max-width: 719px) {
  .composer { padding: var(--s2) var(--s2) var(--s1) var(--s3); }
  /* the tools and the send button share the first row; the two pills have the second */
  .cmp-pills { order: 5; flex: 1 0 100%; display: flex; min-width: 0; }
  .cmp-pills > .proj-pill { flex: 0 1 auto; max-width: calc(100% - 9em); }
  .depth-pill select { width: 7.5em; }
  /* the composer sticks to the bottom of the screen, above the tab bar */
  .conv-main { min-height: calc(100vh - 190px); min-height: calc(100dvh - 190px); }
  .conv-main .cmp-dock { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 3; margin-top: 0; padding: var(--s2) 0 var(--s2);
    background: var(--background); }
  .conv-main .thread { min-height: 0; }
  .hello { padding-top: var(--s2); }
  .greeting { font-size: var(--fs-3); }
  /* the suggestion cards scroll sideways */
  .suggestions { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--s3)); padding: 0 var(--s3) var(--s2); }
  .suggestions li { flex: 0 0 78%; scroll-snap-align: start; }
  .sheet { width: 100vw; border-left: 0; }
  .sheet-body { padding: 0 var(--s4); }
  .sheet-foot { margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
}
@media (pointer: coarse) { .pill, .depth-pill select { min-height: 44px; } }

/* ---------------------------------------------------------------- b27 H3: voice input
   The microphone sits in the composer's row (and next to the Check-up's send buttons). While it listens (b38) the button sits in
   the brand kit's speaking ring (.bm-ring, brand.css): the stop icon in the aura colour on the ring's disc, and a sound wave that
   travels around it and grows with the voice (still and lit under reduced motion). A long press opens the language choice. */
.cmp-mic { display: contents; }
.voice { position: relative; display: inline-flex; }
.mic { position: relative; }
.voice > .bm-ring { margin: -4px; }
.bm-ring .mic.is-listening, .bm-ring .mic.is-listening:hover, .bm-ring .mic.is-listening:active { background: transparent; color: var(--ai-text); }
.bm-ring .mic.is-listening:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.voice-lang[aria-checked="true"] { font-weight: 600; }
.voice-lang[aria-checked="true"]::before { content: "\2713"; }
.voice-line { margin: 0; padding: 0 var(--s1); }
.voice-slot:empty { display: none; }

/* ---------------------------------------------------------------- b27 H4: one visual language across the pages
   Fewer frames (space and headings instead of boxes; cards only for tiles, answers and the composer), tinted secondary buttons
   (40 px, 10 px radius), round 44 px icon buttons, segmented tabs. Tokens only: no colour is written here. */
:root { --bar-h: 61px; }

/* buttons: primary filled, secondary tinted, danger tinted in the alarm colour */
.cite { border: 0; border-radius: 999px; background: var(--surface-3); color: var(--primary); padding: 0 var(--s3); font-weight: 500; }
.cite:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface-1)); }
.pick { border: 0; background: var(--surface-3); }
.pick:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface-1)); }
.pick[aria-pressed="true"] { background: var(--primary); }
.link-btn, .linklike { color: var(--primary); }

/* fields: 10 px radius, 40 px tall */

/* the top bar: a round bell, a tinted account button */
.topbar { border-bottom-color: var(--border); }

/* tabs are segmented, like Explore's sub-tabs */

/* fewer frames: lists and sections are separated by space and hairlines, not boxes */
.panel, .dial, .whats-new { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.panel h3 { font-size: var(--fs-2); margin: 0 0 var(--s1); }
.view-grid { gap: var(--s6); }
.dial { padding: var(--s3) 0; border-top: 1px solid var(--border); margin: 0; }
.item-list > li, .admin-list > li, .notifications > li { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: var(--s3) 0; }
.item-list, .admin-list, .notifications { gap: 0; }
.item-list > li:first-child, .admin-list > li:first-child, .notifications > li:first-child { border-top: 0; }
.notifications > li { position: relative; }
.notifications > li.unread { padding-inline-start: var(--s5); }
.notifications > li.unread::before { content: ""; position: absolute; inset-inline-start: var(--s1); top: calc(var(--s3) + 7px); width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.pick-part { border: 0; border-radius: var(--radius); padding: var(--s2) var(--s3) var(--s3); background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-1)); }
.pick-part:has(input[value="adopt"]:checked), .pick-part:has(input[value="adapt"]:checked) { box-shadow: inset 0 0 0 2px var(--primary); }
.members li, .levels li { border: 0; background: var(--surface-3); }
.tag { border: 0; background: var(--surface-3); }
table.data { border-color: transparent; box-shadow: var(--elevation-card); }
.one-time { background: transparent; }
.topic-sec { margin-top: var(--s6); }
.topic-sec h2, .whats-new h2, .harnesses h2 { font-size: var(--fs-3); letter-spacing: -0.01em; }
.whats-new { margin-top: var(--s6); }

/* the Check-up keeps its structure, with the same buttons and fewer shadows */
.cu-case, .cu-next, .cu-lead { box-shadow: var(--elevation-card); }
.cu-msg { border: 0; background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-1)); }
.cu-msg.role-user { background: var(--surface-3); }
.cu-msg.role-system { background: transparent; border: 1px dashed var(--border); }
.cu-step, .cu-finding, .cu-toc { border-color: var(--border); }
.cu-more > summary.btn { list-style: none; }

/* the conversations list beside the Ask page: quiet, with one tinted button */
.conv-side .new-conv { justify-content: center; }
.conv { border-radius: var(--radius); padding: var(--s2) var(--s3); }
.conv[aria-current="page"] .conv-title { font-weight: 600; }
.conv[aria-current="page"] .conv-when { color: var(--muted-foreground); }
.conv-head h2 { font-size: var(--fs-3); }

/* the floating button: a pill with its icon, above the page's corner */
.panel-toggle { gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: 999px; }
.panel-toggle .icon { display: block; }

/* the panel and the phone: the two pills take the row under the tools */
.composer-panel .cmp-pills { order: 5; flex: 1 0 100%; display: flex; gap: var(--s1); min-width: 0; }
.composer-panel .cmp-pills > .proj-pill { flex: 0 1 auto; max-width: calc(100% - 9.5em); }
.ai-panel .panel-top { border-bottom-color: var(--border); }

/* the project sheet: headings carry the parts, so a part's own label is not said twice */
.sheet .sec-brief .field-label, .sheet .sec-switch-project .field-label, .sheet .sec-documents .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet select, .sheet textarea { width: 100%; }
.sheet .btn.primary, .sheet-foot .btn { min-height: 44px; }

@media (max-width: 719px) {
  .cmp-pills { gap: var(--s1); }
  .pill { font-size: 16px; }
  .tabs { display: flex; }
  .tab-btn { flex: 1 1 auto; padding: 0 var(--s2); }
  .panel-toggle { padding: 0; min-height: 44px; border-radius: 50%; }
  .conv-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .conv-side .new-conv { flex: none; }
  .conv-fold { flex: 1 1 auto; text-align: end; }
  .conv-fold[open] { flex-basis: 100%; text-align: start; }
}
@media (pointer: coarse) {
  .btn, .btn.small { min-height: 44px; }
  .tab-btn, .seg-tab { min-height: 44px; }
  .menu-btn { min-height: 44px; }
  .search { min-height: 44px; }
}

/* a check-up waiting in line behind another: calm, not an alarm */
.cu-queue { margin: 0 0 var(--s1); font-size: var(--fs-0); }

/* b27 J: the gap sheet. One row per gap: what and where, what the brief says against what the code has (with the evidence as small
   chips), and a two-option choice. On a phone each row is a small card. */
.cu-msg.kind-gap_sheet { max-width: none; background: transparent; padding: 0; }
.cu-gapsheet .cu-gaps { list-style: none; margin: var(--s3) 0; padding: 0; display: flex; flex-direction: column; }
.cu-gap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) auto; gap: var(--s2) var(--s4); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.cu-gap:first-child { border-top: 0; }
.cu-gap-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu-gap-id { font-size: var(--fs-2); }
.cu-gap-says p { margin: 0 0 var(--s1); max-width: none; }
.cu-gap-ev { display: flex; flex-wrap: wrap; gap: var(--s1); }
.cu-gap-quotes .cu-cite { margin: var(--s1) 0 0; }
.cu-gap-chosen { margin: 0; }
.cu-gap-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0; }
.cu-seg { display: inline-flex; gap: 2px; padding: var(--s1); border-radius: var(--radius); background: var(--surface-3); }
.cu-seg-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--s3); border-radius: var(--radius-s);
  color: var(--muted-foreground); font-weight: 600; cursor: pointer; white-space: nowrap; }
.cu-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cu-seg-opt:has(input:checked) { background: var(--surface-1); color: var(--foreground); box-shadow: var(--elevation-card); }
.cu-seg-opt:has(input:checked)::before { content: "\2713"; margin-inline-end: var(--s1); }
.cu-seg-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.cu-gapsheet.is-answered > summary { color: var(--foreground); }
@media (max-width: 719px) {
  .cu-gap { grid-template-columns: minmax(0, 1fr); padding: var(--s3); margin-bottom: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
  .cu-gap:first-child { border-top: 1px solid var(--border); }
  .cu-seg { display: flex; }
  .cu-seg-opt { flex: 1 1 0; }
}
@media (pointer: coarse) { .cu-seg-opt { min-height: 44px; } }

/* The Explore banner (b32): one chip per studied harness, sliding slowly sideways. Pure CSS: the track holds two identical
   rows and moves by half its width, so the loop has no jump. It pauses on hover and on keyboard focus; for reduced motion
   it is a plain strip that scrolls by hand. Edge fades are symmetric, so they need no right-to-left variant. */
.mq { overflow: hidden; margin: var(--s4) 0 var(--s2); padding: var(--s1) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.mq-track { display: flex; width: max-content; animation: marquee 50s linear infinite;
  animation-duration: clamp(40s, calc(var(--mq-count, 12) * 3s), 60s); }
.mq-track:dir(rtl) { animation-name: marquee-rtl; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
.mq-group { display: flex; flex: none; justify-content: space-around; gap: var(--s3); min-width: 100vw; margin: 0;
  padding: 0 var(--s3) 0 0; list-style: none; }
.mq-group:dir(rtl) { padding: 0 0 0 var(--s3); }
.mq-chip { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); box-shadow: var(--elevation-card); color: var(--foreground); white-space: nowrap; }
.mq-chip:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.mq-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mq-chip .htag { padding: 0; border: 0; font-size: var(--text-base); font-weight: 600; color: var(--foreground); }
.mq-chip .htag-dot { width: 10px; height: 10px; }
.mq-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-tag { font-size: 12.5px; line-height: 1.25; color: var(--subtle-foreground); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; scrollbar-width: thin; }
  .mq-track { animation: none; }
  .mq-group.dup { display: none; }
  .mq-group { min-width: 0; }
}

/* b34 activity: what an AI is doing, as a calm timeline. Level 1 is the header (what it does now and a clock, or one finished line),
   level 2 the steps, level 3 what a tapped step looked at. Colours are the tokens above, so light and dark follow. */
.act { margin: 0 0 var(--s3); font-size: var(--fs-0); min-width: 0; }
.act-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
div.act-head { padding: var(--s2) var(--s3); border: 1px solid color-mix(in srgb, var(--ai) 25%, var(--border)); border-radius: var(--radius-lg);
  background: var(--ai-soft); }
.act-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ai);
  animation: act-pulse 1.8s ease-out infinite; }
@keyframes act-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes act-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai) 20%, transparent); } }
.act-now { display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.act-timer { flex: none; color: var(--muted-foreground); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: end; }
.act-toggle { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted-foreground); cursor: pointer; }
.act-toggle:hover { background: var(--surface-3); color: var(--foreground); }
.act .icon { transition: transform 180ms ease; }
.act.is-open > .act-head > .act-toggle .icon, .act.is-open > .act-head-btn > .icon { transform: rotate(180deg); }
.act-head-btn { width: 100%; font: inherit; color: var(--muted-foreground); background: none; border: 0; border-radius: var(--radius-s);
  padding: var(--s1) 0; text-align: start; cursor: pointer; }
.act-head-btn:hover:not(:disabled) { color: var(--foreground); }
.act-head-btn:disabled { cursor: default; }
.act-head-btn > .icon { flex: none; }
.act-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.act-tone { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--success-text);
  background: var(--success-soft); }
.tone-done .act-tone { background: none; }               /* b36 E2: the green-core mark stands on its own */
.tone-stopped .act-tone { color: var(--warning-text); background: var(--warning-soft); }
.tone-failed .act-tone { color: var(--destructive-text); background: var(--destructive-soft); }
/* a block that opens and closes smoothly: grid rows 0fr to 1fr; what is closed cannot be tabbed to */
.act-body, .act-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease; }
.act.is-open > .act-body, .act-row.is-open > .act-panel { grid-template-rows: 1fr; }
.act-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 220ms; }
.act.is-open > .act-body > .act-clip, .act-row.is-open > .act-panel > .act-clip { visibility: visible; transition-delay: 0s; }
.act.is-live > .act-body > .act-clip { overflow-x: hidden; overflow-y: auto; max-height: 17rem; overscroll-behavior: contain; }
.act-steps, .act-kids, .act-lines { list-style: none; margin: 0; padding: 0; }
.act-steps { padding: var(--s2) 0 var(--s1); }
.act-row { position: relative; }
.act-row[hidden] { display: none; }
.act-steps > .act-row:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 10px; top: 28px; bottom: -3px;
  width: 1px; border-radius: 1px; background: var(--border-strong); }
.act-main { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, auto) auto 16px 10px; align-items: center; gap: 0 var(--s2);
  width: 100%; font: inherit; color: var(--foreground); background: none; border: 0; border-radius: var(--radius-s);
  padding: 3px var(--s1) 3px 0; text-align: start; cursor: pointer; }
.act-main:disabled { cursor: default; color: var(--foreground); }
.act-main:not(:disabled):hover { background: var(--surface-3); }
.act-main[aria-expanded]::after { content: ""; width: 5px; height: 5px; border-inline-end: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground); transform: rotate(45deg); transition: transform 180ms ease; justify-self: center; }
.act-row.is-open > .act-main::after { transform: rotate(225deg); }
/* b36 E4: a 20 px glyph tile per step: running = ai tile, done = quiet surface with a muted glyph, failed = destructive (stopped = warning, below) */
.act-ico { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-s); color: var(--muted-foreground); background: var(--surface-3); }
.s-running > .act-main .act-ico { color: var(--ai-text); background: var(--ai-soft);
  animation: act-glow 1.8s ease-in-out infinite; }
.s-done > .act-main .act-ico { color: var(--muted-foreground); background: var(--surface-3); }
.s-failed > .act-main .act-ico { color: var(--destructive-text); background: var(--destructive-soft); }
.act .spinner { border-top-color: var(--ai); }
.act-title { min-width: 0; overflow-wrap: anywhere; }
.s-running > .act-main .act-title { font-weight: 600; }
.act-chip { max-width: 12em; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--muted-foreground);
  font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-chip:empty { padding: 0; }
.s-failed > .act-main .act-chip { color: var(--destructive-text); background: var(--destructive-soft); }
.act-ms { min-width: 3.2em; color: var(--muted-foreground); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: end; }
.act-st { display: grid; place-items: center; color: var(--muted-foreground); }
.s-done > .act-main .act-st { color: var(--success-text); }
.s-failed > .act-main .act-st { color: var(--destructive-text); }
.act-lines { padding: 0 var(--s2) var(--s2) calc(20px + var(--s2)); color: var(--muted-foreground); font-size: var(--fs-xs); }
.act-lines:empty { display: none; }
.act-lines li { padding: 1px 0; overflow-wrap: anywhere; }
.k-agent { margin: 4px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--elevation-card); }
.k-agent.s-running { border-color: color-mix(in srgb, var(--ai) 35%, var(--border)); }
.k-agent > .act-main { padding-inline-start: 6px; }
.act-kids { margin: 0 var(--s2) var(--s2) calc(20px + var(--s2)); padding-inline-start: var(--s2); border-inline-start: 1px solid var(--border); }
.act-kids .act-ico { width: 18px; height: 18px; }
.act-kids .act-main { grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto) auto 16px 10px; }
.act-phase { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s1); color: var(--subtle-foreground);
  font-size: 12.5px; font-weight: 550; }
.act-phase::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.act-phase:first-child { margin-top: 0; }
@media (max-width: 480px) {
  .act-chip { max-width: 10em; }
  .act-ms { min-width: 2.6em; }
  .act-lines { padding-inline-start: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .act-dot, .s-running > .act-main .act-ico { animation: none; }
  .act-body, .act-panel, .act-clip, .act .icon, .act-main::after { transition: none; }
}
/* a finger needs 44 px (UI-4): the header, the toggle and the rows of the timeline */
@media (pointer: coarse) {
  .act-head-btn, .act-main { min-height: 44px; }
  .act-toggle { width: 44px; height: 44px; }
  .act-kids .act-main { min-height: 44px; }
}

/* ---------------------------------------------------------------- b33 Ask: one Ask tab. A conversation owns a folder; the repository, the
   check-up and its questions are cards in the thread; the empty screen offers start cards. */
.cu-listing-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.cu-listing-lead .subtitle { margin: 0; flex: 1 1 20em; }

/* the empty Ask screen: the server's start cards as a responsive grid (icon, title, one line each) */
.start-cards { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.start-cards li { min-width: 0; }
.start-card { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; height: 100%; min-height: 72px; padding: var(--s3) var(--s4);
  text-align: start; font: inherit; color: var(--foreground); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
  box-shadow: var(--elevation-card); transition: transform var(--dur-base) var(--ease-out-quart), border-color var(--dur-base), box-shadow var(--dur-base); }
.start-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--elevation-pop); }
.start-card:active { transform: translateY(0); }
.start-card[data-card="repo"] .sc-ico { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.sc-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--primary-text);
  background: var(--surface-3); border: 1px solid var(--border); }
.sc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-title { font-weight: 600; overflow-wrap: anywhere; }
.sc-text { color: var(--muted-foreground); font-size: var(--fs-0); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 560px) { .start-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .start-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .start-card { transition: none; } .start-card:hover { transform: none; } }

/* the repository box: a link, or a zip; a branch and a token behind one line */
.repo-panel { margin: 0 0 var(--s4); padding: var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card); }
.repo-panel h3 { margin: 0 0 var(--s1); font-size: var(--fs-2); }
.repo-panel > .muted { margin: 0 0 var(--s3); }
.repo-box .field { display: flex; flex-direction: column; gap: var(--s1); margin: 0 0 var(--s3); }
.repo-box input[type="text"], .repo-box input[type="password"] { width: 100%; }
.repo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.repo-or { font-size: var(--fs-0); }
.repo-more { margin: var(--s2) 0; }
.repo-more > summary { cursor: pointer; color: var(--muted-foreground); font-size: var(--fs-0); padding: var(--s1) 0; }
.repo-progress:empty { display: none; }
.sheet .repo-box .btn { min-height: 44px; }

/* the folder chip and the conversation's menu */
.folder-chip { max-width: 24em; }
.ai-panel .folder-chip { max-width: 10em; }
.composer-panel .cmp-pills > .folder-chip { flex: 0 1 auto; max-width: calc(100% - 9.5em); }
@media (max-width: 719px) { .cmp-pills > .folder-chip { flex: 0 1 auto; max-width: calc(100% - 9em); } }
.conv-head { position: relative; }
.conv-head h2 { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.conv-menu { position: relative; flex: none; }
.conv-head .conv-ws { flex-basis: 100%; }

/* cards in the thread: the repository, the offer, the check-up; and the calm notice that the web is off */
.tcard { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-card); min-width: 0; }
.tc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.tc-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--primary-text);
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.tcard-checkup .tc-ico { color: var(--success-text); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.tc-title { flex: 1 1 8em; min-width: 0; margin: 0; font-size: var(--fs-2); overflow-wrap: anywhere; }
.tc-text, .tc-url, .tc-meta, .tc-foot { margin: 0; overflow-wrap: anywhere; }
.tc-foot { margin-top: var(--s1); }
.tc-never { margin: var(--s1) 0; }
.tc-never ul { max-height: none; }
.tcard .cu-lead { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.tcard .cu-lead h2 { font-size: var(--fs-1); }
.tc-activity { margin-top: var(--s2); }
.tc-activity .act { margin-bottom: 0; }
.tc-budget { white-space: nowrap; }
.tnotice .callout-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.tnotice p { flex: 1 1 14em; min-width: 0; margin: 0; font-size: var(--fs-0); }

/* the folder sheet: its file section needs no label, and the check-up case list sits on the page, not in a frame of its own */
.sheet .sec-files .field-label, .sheet .sec-shared-project .field-label, .sheet .sec-project .field-label { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* no scroll box inside the page: the activity of a check-up grows with its steps (older steps fold behind "Show all") */
.cu-activity .act.is-live > .act-body > .act-clip, .tc-activity .act.is-live > .act-body > .act-clip { overflow: hidden; max-height: none; }
.act-row.is-old { display: none; }
.act-more { list-style: none; margin: 0 0 var(--s1); }
.act-more .btn { width: 100%; }

/* b33 polish: the folder sheet scrolls in one place only; files go in through a drop zone and sit in compact rows; the forms wait behind "+ Add" */
body.sheet-open { overflow: hidden; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--s4); padding-bottom: var(--s5); }
@media (min-width: 720px) { .sheet-body { padding-inline: var(--s5); } }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s5) var(--s4); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--bg-sunken); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart); }
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.dropzone.is-busy { opacity: 0.6; cursor: progress; }
.dz-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dz-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--primary-text);
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.dz-title { font-weight: 600; }
.dz-choose { color: var(--primary); text-decoration: underline; }
.dz-hint { color: var(--muted-foreground); font-size: var(--fs-0); }
.dz-note:empty { display: none; }
.sheet progress { width: 100%; height: 6px; margin: var(--s2) 0 0; accent-color: var(--primary); }
.sheet .doc-report { list-style: none; margin: var(--s2) 0; padding: 0; font-size: var(--fs-0); }
.doc-rows { list-style: none; margin: 0; padding: 0; }
.doc-rows > .doc-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) 0;
  border-top: 1px solid var(--border); }
.doc-rows > .doc-item:first-child { border-top: 0; }
.doc-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--muted-foreground);
  background: var(--surface-3); border: 1px solid var(--border); }
.doc-main { min-width: 0; }
.doc-main .doc-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.doc-main .doc-meta { margin: 0; }
.doc-main .form-error { margin: var(--s1) 0 0; }
.doc-menu .conv-menu-list { min-width: 11em; }
.add-wrap { margin: var(--s2) 0 var(--s3); }
.add-body { margin-top: var(--s2); }
.add-body[hidden] { display: none; }

/* the web-off notice: one short line, the way out, and the longer reason behind "Why?" */
.tnotice .tn-why { flex-basis: 100%; font-size: var(--fs-0); }
.tnotice .tn-why > summary { cursor: pointer; color: var(--muted-foreground); width: max-content; }
.tnotice .tn-why p { margin: var(--s1) 0 0; }

/* renaming in place */
.conv-rename-form { display: flex; flex: 1 1 14em; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.conv-title-input { flex: 1 1 12em; min-width: 0; font-size: var(--fs-2); font-weight: 600; }
.conv-rename-form .btn { flex: none; white-space: nowrap; }

/* b33 live: `code` in a case message or a brief row, and the small muted id after a brief row */
.cu-msg-text code, .cu-p code, .cu-list code, .cu-facts code, .cu-lead-text code, .cu-finding code, .cu-finding h3 code, .cu-remedy code, .cu-table td code { padding: 0 4px; border-radius: var(--radius-xs); background: var(--surface-3);
  font-size: 0.92em; overflow-wrap: anywhere; }
.cu-id { font-family: var(--font-mono); margin-inline: var(--s1); }
.cu-list .badge { margin-inline-start: var(--s1); }

/* b33 live: a step that stopped without hurting the run (a read that found nothing) is amber, not red */
.s-stopped > .act-main .act-ico, .s-stopped > .act-main .act-st { color: var(--warning-text); }
.s-stopped > .act-main .act-ico { background: var(--warning-soft); }
.s-stopped > .act-main .act-chip { color: var(--warning-text); background: var(--warning-soft); }

/* ---------------------------------------------------------------- b35 lane A: Ask and Check-up
   The assistant owns the cyan (the beam, its avatar, its answers, its running steps). Everything else on these screens is
   neutral surface, periwinkle for what you can click, and success / warning / destructive for status. No rails, no tinted boxes. */

/* the assistant's face (b36): brand.css's avatar (a Wrapped Core on a disc in a lit ring). The live activity header and the new-conversation
   screen carry it; an answer signs once with the static 16 px mark, no tile */
.reply-head { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.reply-head .bm { align-self: center; }
.hello-face { display: flex; justify-content: flex-start; margin: 0 0 var(--s3); }
/* the 40 px lockup is about 390 px wide: on a phone its name shrinks with the screen so the card never scrolls sideways */
.auth-logo { margin: 0 0 var(--s4); }
.auth-logo .bm-wordmark { font-size: min(32px, 6.4vw); }
.reply-who { font-size: var(--fs-0); font-weight: 600; color: var(--ai-text); }
.act-head-btn { gap: var(--s2); }

/* one beam per screen: the Explore hero stands still while the side panel's box is open */
body:has(.ai-panel:not([hidden])) .beam-hero:not(:focus-within) { animation: none; background: var(--beam-rest); }
body:has(.ai-panel:not([hidden])) .beam-hero:not(:focus-within)::before { animation: none; opacity: 0; }

/* the callout: a quiet card, the icon carries the type */
.callout { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; padding: var(--s3) var(--s4); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); font-size: var(--fs-0); }
.callout-ico { flex: none; display: grid; margin-top: 1px; color: var(--primary-text); }
.callout-tip .callout-ico { color: var(--success-text); }
.callout-warn .callout-ico { color: var(--warning-text); }
.callout-idea .callout-ico { color: var(--ai-text); }
.callout-body { flex: 1 1 auto; min-width: 0; color: var(--muted-foreground); }
.callout-body p { margin: 0; }
.callout-title { color: var(--foreground); font-weight: 600; }
.callout-title + * { margin-top: var(--s1); }
.callout .btn { flex: none; }

/* the Ask page */
.conv { transition: background var(--dur-fast) var(--ease-out-quart); }
.greeting { font-family: var(--font-display, var(--font-sans)); }
.question { background: var(--surface-3); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl); }
.ans-actions { border-top-color: var(--border); }
.run-meta { color: var(--subtle-foreground); }
.outcome { font-size: var(--fs-0); }

/* the check-up: findings and records are quiet cards; dots and bars keep their status colours */
.cu-finding h3 { font-size: var(--fs-2); }
.cu-finding .tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s3); }
.cu-finding .tags .badge { padding: 1px 8px; border-radius: 999px; }
.cu-case { transition: border-color var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart); }
.cu-case:hover { border-color: var(--border-strong); }
.cu-case-name { color: var(--foreground); }
.cu-bar { height: 8px; border-radius: 4px; overflow: hidden; }
.cu-bar .track { fill: var(--surface-3); }
.cu-bar .held { fill: var(--warning); }
.cu-dot-n { transition: border-color var(--dur-base), background var(--dur-base); }
.cu-prompt { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .conv, .cu-case, .cu-dot-n { transition: none; } }
.answer-v2 .k { color: var(--foreground); font-weight: 600; }
.answer-v2 .ans-gaps .k, .answer-v2 .ans-refs .k { color: var(--subtle-foreground); }
.ref-item .link-btn, .ref-item a { color: var(--ai-text); }
.reply.pending { padding: 0; border: 0; background: none; box-shadow: none; }

/* b39: the people table keeps its columns on a phone: it scrolls sideways inside its box instead of breaking emails letter by letter */
@media (max-width: 640px) {
  .users-box .grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .users-box table.users { min-width: 680px; }
}

/* b44 lane E: Connect your agent (Account) and the agent keys table (Admin). Tokens only. */
.connect-install { display: grid; gap: var(--s3); margin: var(--s3) 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.connect-card { min-width: 0; padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.connect-card h4 { margin: 0; }
.connect-card p { margin: 2px 0; }
.connect-code { margin: var(--s2) 0; padding: var(--s2) var(--s3); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow-x: auto; white-space: pre; direction: ltr; unicode-bidi: embed; font-family: var(--font-mono); font-size: var(--text-sm); }
.connect-code code { font-family: inherit; }
.connect-code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.make-key select { min-width: 0; max-width: 100%; }
.one-time.new-key code { overflow-wrap: anywhere; }
.account-connect h3, .admin-keys h3 { margin: var(--s4) 0 var(--s1); }
.my-keys { min-width: 540px; }
.admin-keys-table { min-width: 780px; }
.my-keys th, .my-keys td, .admin-keys-table th, .admin-keys-table td { vertical-align: top; }