/* AI Artifact component layer — B · Capsule.
   Class names match docs/design/agent-artifacts-ui.html exactly. Every value comes from tokens.css.
   The board's phone mock used a `.cap.m` modifier; the product applies those rules by media query. */

/* ---------- layout primitives (structure only) ---------- */
@layer od-layout {
  :where(.od-stack, .od-row, .od-row-top, .od-cluster, .od-grid, .od-field, .od-stat, .od-cell, .od-tile) > :where(*) { min-width: 0; }
  .od-stack { display: flex; flex-direction: column; gap: var(--od-gap, var(--sp-8)); }
  .od-row { display: flex; align-items: center; gap: var(--od-gap, var(--sp-8)); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, var(--sp-8)); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, var(--sp-8)); }
  .od-fill { flex: 1 1 0; min-width: 0; }
  .od-fixed { flex: none; }
  .od-grid { display: grid; gap: var(--od-gap, var(--sp-12)); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, var(--sp-2)); }
  :where(.od-stat, .od-field, .od-cell) > :where(*) { display: block; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-nowrap { white-space: nowrap; }
  .od-touch { min-width: var(--h-touch); min-height: var(--h-touch); }
}

/* ---------- root ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--field); }
.cap {
  font-family: var(--font-ui); color: var(--ink); background: var(--field);
  font-size: var(--fs-14); line-height: var(--lh-body); -webkit-font-smoothing: antialiased;
  position: relative; min-height: 100%; overflow: hidden;
}
.cap .mono { font-family: var(--font-mono); }
.cap button, .cap a, .cap input { font-family: inherit; }
.cap button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; }
.cap :focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: var(--sp-2); border-radius: var(--r-sm); }
.sprite { position: absolute; }
.ico { display: block; width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: var(--ico-sm); height: var(--ico-sm); }
.ico-lg { width: var(--ico-lg); height: var(--ico-lg); }

/* ---------- capsule: the only persistent chrome object ---------- */
.capsule {
  position: absolute; top: var(--capsule-top); left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: var(--sp-4); height: var(--h-capsule); padding: var(--sp-5); border-radius: var(--pill);
  background: var(--shell); color: var(--shell-ink); max-width: calc(100% - var(--capsule-gutter));
  box-shadow: var(--shadow-capsule);
}
.cap-item {
  display: inline-flex; align-items: center; gap: var(--sp-7); height: var(--h); padding: 0 var(--sp-13); border-radius: var(--pill);
  font-size: var(--fs-13); font-weight: 500; color: var(--shell-dim); white-space: nowrap; text-decoration: none;
}
.cap-item:hover { background: var(--shell-line); color: var(--shell-ink); }
.cap-item[aria-pressed="true"], .cap-item.on { background: var(--shell-ink); color: var(--shell); }
.cap-item.title { color: var(--shell-ink); font-weight: 600; padding-left: var(--sp-9); }
.cap-item.title .fav { font-size: var(--fav-cap); line-height: 1; }
.cap-item[disabled] { opacity: 0.45; cursor: default; }
.cap-item[disabled]:hover { background: none; color: var(--shell-dim); }
.cap-div { width: var(--border); height: var(--ico-lg); background: var(--shell-line); margin: 0 var(--sp-3); flex: none; }
.cap-badge { font-family: var(--font-mono); font-size: var(--fs-105); background: var(--amber); color: var(--on-amber); border-radius: var(--pill); padding: var(--sp-2) var(--sp-7); font-weight: 500; }
.cap-item[aria-pressed="true"] .cap-badge { background: var(--amber-soft); color: var(--amber-ink); }
.cap-avatar { width: var(--avatar-cap); height: var(--avatar-cap); border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); flex: none; display: grid; place-items: center; font-size: var(--fs-11); font-weight: 600; }
.cap-wrap { position: relative; }
.cap-dd {
  position: absolute; top: var(--dd-top); left: 50%; transform: translateX(-50%); min-width: var(--dd-w); z-index: 14;
  background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); padding: var(--sp-6);
  box-shadow: var(--shadow-dd);
}
.cap-dd[hidden] { display: none; }
.dd-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-10); align-items: center; width: 100%; padding: var(--sp-9) var(--sp-10); border-radius: var(--r-md); text-align: left; }
.dd-item:hover { background: var(--hover); }
.dd-item .v { font-family: var(--font-mono); font-size: var(--fs-125); font-weight: 500; }
.dd-item .t { font-size: var(--fs-125); color: var(--muted); }
.dd-item .w { font-family: var(--font-mono); font-size: var(--fs-105); color: var(--faint); }
.dd-sep { height: var(--border); background: var(--line-soft); margin: var(--sp-5) var(--sp-2); }
.dd-note { padding: var(--sp-8) var(--sp-10) var(--sp-4); font-size: var(--fs-115); color: var(--faint); line-height: var(--lh-tight); }

/* ---------- buttons ---------- */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-7); height: var(--h); padding: 0 var(--sp-14);
  border-radius: var(--pill); border: var(--border) solid var(--line); background: var(--surface);
  font-size: var(--fs-13); font-weight: 500; color: var(--ink); white-space: nowrap; text-decoration: none;
}
.b-btn:hover { background: var(--hover); border-color: var(--line-strong); }
.b-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.b-btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.b-btn-danger { color: var(--danger-ink); border-color: var(--danger-line); }
.b-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger-line-hover); }
.b-btn-lg { height: var(--h-lg); padding: 0 var(--sp-18); font-size: var(--fs-14); }
.b-btn-icon { width: var(--h); padding: 0; }
.b-btn[disabled] { opacity: 0.45; cursor: default; }

/* ---------- surfaces ---------- */
.b-card { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); }
.b-page { position: absolute; inset: 0; overflow: auto; padding: var(--page-top) 0 0; }
.b-col { width: var(--col-w); max-width: 100%; margin: 0 auto; padding: 0 var(--sp-24); }
.b-sect-head { display: flex; align-items: baseline; gap: var(--sp-12); margin: 0 0 var(--sp-12); }
.b-sect-head h2 { margin: 0; font-size: var(--fs-15); font-weight: 600; letter-spacing: 0.01em; }
.b-sect-head .n { font-size: var(--fs-125); color: var(--muted); }
.b-sect-head .sp { flex: 1; }
.b-h1 { margin: 0 0 var(--sp-6); font-size: var(--fs-26); font-weight: 700; letter-spacing: -0.02em; }
.b-sub { margin: 0 0 var(--sp-26); font-size: var(--fs-14); color: var(--muted); }

/* ---------- list row (gallery, viewers, keys) ---------- */
.b-row { display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-13) var(--sp-16); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; }
.b-row + .b-row { margin-top: var(--sp-8); }
.b-row:hover { border-color: var(--line-strong); background: var(--raise); }
.b-row .fav { font-size: var(--fav); line-height: 1; flex: none; width: var(--fav-w); text-align: center; }
.b-row .name { font-size: var(--fs-14); font-weight: 600; }
.b-row .meta { font-size: var(--fs-125); color: var(--muted); }
.b-row .meta .dot { color: var(--faint); padding: 0 var(--sp-5); }

/* ---------- repository › branch taxonomy ---------- */
.grp + .grp { margin-top: var(--sp-26); }
.grp-head { display: flex; align-items: center; gap: var(--sp-10); padding: 0 var(--sp-4) var(--sp-9); border-bottom: var(--border) solid var(--line); }
.grp-head .repo { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-15); font-weight: 600; min-width: 0; }
.grp-head .repo .own { color: var(--muted); font-weight: 500; }
.grp-head .sum { margin-left: auto; flex: none; font-size: var(--fs-125); color: var(--muted); }
.br { border-bottom: var(--border) solid var(--line-soft); }
.br > summary { display: flex; align-items: center; gap: var(--sp-10); height: var(--h-summary); padding: 0 var(--sp-6); cursor: pointer; list-style: none; }
.br > summary::-webkit-details-marker { display: none; }
.br > summary:hover { background: var(--raise); }
.br > summary .tw { color: var(--faint); transform: rotate(-90deg); transition: transform var(--t-state); }
.br[open] > summary .tw { transform: none; }
.br-name { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 500; }
.br .n { margin-left: auto; flex: none; font-size: var(--fs-12); color: var(--muted); }
.br-body { padding: var(--sp-2) 0 var(--sp-12) var(--sp-26); }
.path { display: inline-flex; align-items: center; gap: var(--sp-7); min-width: 0; }
.path .o { color: var(--muted); font-size: var(--fs-13); }
.path .s { color: var(--faint); }
.path .b { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 500; color: var(--ink); }

/* ---------- chips ---------- */
.b-chip { display: inline-flex; align-items: center; gap: var(--sp-5); height: var(--h-chip); padding: 0 var(--sp-9); border-radius: var(--pill); font-family: var(--font-mono); font-size: var(--fs-105); letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; flex: none; }
.chip-private { background: var(--chip-neutral); color: var(--chip-neutral-ink); }
.chip-shared { background: var(--accent-soft); color: var(--accent-ink); }
.chip-public { background: var(--amber-soft); color: var(--amber-ink); }
.chip-open { background: var(--amber-soft); color: var(--amber-ink); }
.chip-res { background: var(--accent-soft); color: var(--accent-ink); }
.chip-ver { background: var(--chip-neutral); color: var(--chip-neutral-ink); }
.chip-latest { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- form controls ---------- */
.b-label { display: block; font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 var(--sp-6); }
.b-input { display: flex; align-items: center; height: var(--h-lg); padding: 0 var(--sp-13); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); font-size: var(--fs-135); color: var(--ink); width: 100%; }
.b-input.ph { color: var(--faint); }
.b-area { min-height: var(--area-min); padding: var(--sp-10) var(--sp-12); align-items: flex-start; height: auto; background: var(--raise); }
.b-search { display: flex; align-items: center; gap: 0; height: var(--h-lg); border: var(--border) solid var(--line); border-radius: var(--pill); background: var(--surface); overflow: hidden; }
.b-search .lbl { display: inline-flex; align-items: center; gap: var(--sp-6); height: 100%; padding: 0 var(--sp-12) 0 var(--sp-15); font-size: var(--fs-12); font-weight: 600; color: var(--muted); border-right: var(--border) solid var(--line-soft); }
.b-search .val { padding: 0 var(--sp-14); font-size: var(--fs-135); color: var(--faint); }
.b-switch { display: inline-flex; align-items: center; width: var(--w-switch); height: var(--h-switch); padding: var(--sp-3); border-radius: var(--pill); background: var(--switch-off); flex: none; }
.b-switch .knob { width: var(--knob); height: var(--knob); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-knob); transition: transform var(--t-state); }
.b-switch[aria-checked="true"] { background: var(--accent); }
.b-switch[aria-checked="true"] .knob { transform: translateX(var(--knob-travel)); }
.b-seg { display: inline-flex; padding: var(--sp-3); background: var(--line); border-radius: var(--pill); gap: var(--sp-2); }
.b-seg button, .b-seg a { display: inline-flex; align-items: center; height: var(--h-seg); padding: 0 var(--sp-14); border-radius: var(--pill); font-size: var(--fs-125); font-weight: 500; color: var(--muted); text-decoration: none; }
.b-seg button[aria-selected="true"], .b-seg a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-seg); }

/* ---------- code one-liner (the machine's part: same shell as the capsule) ---------- */
.b-code { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16); background: var(--shell); border-radius: var(--r); color: var(--shell-ink); font-family: var(--font-mono); font-size: var(--fs-125); }
.b-code .cmd { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-code.multi { align-items: flex-start; }
.b-code.multi .cmd { white-space: pre-wrap; overflow: visible; text-overflow: clip; line-height: var(--lh-code); }
.b-code.multi .copy { margin-top: var(--border); }
.b-code .cmd .p { color: var(--code-dim); }
.b-code .cmd .g { color: var(--code-green); }
.b-code .copy { height: var(--h-copy); padding: 0 var(--sp-12); border-radius: var(--pill); background: var(--shell-line); color: var(--shell-ink); font-size: var(--fs-115); font-weight: 500; font-family: var(--font-ui); flex: none; }
.b-code .copy:hover { background: var(--shell-hover); }

/* ---------- note strips and empty state ---------- */
.b-note { display: flex; gap: var(--sp-9); padding: var(--sp-11) var(--sp-13); border-radius: var(--r); font-size: var(--fs-125); line-height: var(--lh-tight); }
.note-amber { background: var(--amber-soft); color: var(--amber-ink); }
.note-accent { background: var(--accent-soft); color: var(--accent-ink); }
.note-plain { background: var(--hover); color: var(--muted); }
.b-empty { padding: var(--sp-28) var(--sp-24); text-align: center; background: var(--raise); border: var(--border) dashed var(--line-strong); border-radius: var(--r); }
.b-empty h3 { margin: 0 0 var(--sp-5); font-size: var(--fs-14); font-weight: 600; }
.b-empty p { margin: 0 0 var(--sp-14); font-size: var(--fs-13); color: var(--muted); }

/* ---------- viewer: document field + overlay panels ---------- */
.b-field { position: absolute; inset: 0; overflow: hidden; padding: var(--page-top) 0 var(--sp-40); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.b-doc { width: var(--doc-w); max-width: 100%; flex: 1 1 auto; min-height: 0; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-doc); }
.b-doc > iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--surface); }
.b-stamp { margin: 0; font-family: var(--font-mono); font-size: var(--fs-105); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--faint); flex: none; }
.vw[data-panel="comments"] .b-field, .vw[data-panel="share"] .b-field { padding-right: var(--panel-shift); }
.vw[data-panel="comments"] .capsule, .vw[data-panel="share"] .capsule { left: calc(50% - var(--capsule-shift)); }
.b-panel {
  position: absolute; top: var(--page-top); right: var(--panel-right); bottom: var(--panel-right); width: var(--panel-w); z-index: 13; display: none;
  background: var(--surface); border-radius: var(--r); border: var(--border) solid var(--line);
  box-shadow: var(--shadow-panel); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
  animation: panelIn var(--t-enter);
}
@keyframes panelIn { from { opacity: 0; transform: translateX(var(--sp-14)); } to { opacity: 1; transform: none; } }
.vw[data-panel="comments"] .b-panel[data-pane="comments"] { display: grid; }
.vw[data-panel="share"] .b-panel[data-pane="share"] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.panel-head { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-14) var(--sp-16); border-bottom: var(--border) solid var(--line); }
.panel-head h3 { margin: 0; font-size: var(--fs-145); font-weight: 600; }
.panel-head .x { margin-left: auto; width: var(--h-x); height: var(--h-x); border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.panel-head .x:hover { background: var(--hover); }
.panel-loop { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-9) var(--sp-16); background: var(--accent-soft); font-family: var(--font-mono); font-size: var(--fs-11); color: var(--accent-ink); }
.panel-body { overflow: auto; padding: var(--sp-2) var(--sp-16) var(--sp-12); }
.panel-foot { padding: var(--sp-12) var(--sp-16); border-top: var(--border) solid var(--line); }
.panel-foot textarea.b-input { resize: vertical; font-family: inherit; line-height: var(--lh-tight); }
.m-scrim { display: none; }

/* ---------- comments ---------- */
.cmt { padding: var(--sp-15) 0; border-bottom: var(--border) solid var(--line-soft); }
.cmt:last-child { border-bottom: 0; }
.cmt-head { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.cmt-name { font-size: var(--fs-135); font-weight: 600; }
.cmt-time { font-family: var(--font-mono); font-size: var(--fs-105); color: var(--faint); margin-left: auto; flex: none; }
.avatar { width: var(--avatar); height: var(--avatar); border-radius: 50%; flex: none; display: grid; place-items: center; font-size: var(--fs-105); font-weight: 600; }
.quote { margin: 0 0 var(--sp-9); padding: var(--sp-8) var(--sp-11); background: var(--hover); border-radius: var(--r-quote); font-size: var(--fs-12); line-height: var(--lh-tight); color: var(--muted); }
.quote::before { content: "\201C"; font-size: var(--fs-17); line-height: 0; vertical-align: var(--quote-mark-shift); margin-right: var(--sp-2); color: var(--faint); }
.cmt p { margin: 0; font-size: var(--fs-135); line-height: var(--lh-body); color: var(--ink); }
.cmt.agent { border-radius: var(--r); background: var(--agent-bg); border: var(--border) solid var(--agent-line); padding: var(--sp-14); margin: var(--sp-6) 0; }
.cmt.agent .cmt-name { display: inline-flex; align-items: center; gap: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.cmt-acts { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-10); }
.cmt-acts .lnk { font-size: var(--fs-12); font-weight: 500; color: var(--muted); }
.cmt-acts .lnk:hover { color: var(--accent-ink); }
.hint { font-size: var(--fs-11); color: var(--faint); }

/* ---------- screen composites ---------- */
.signin-page { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--sp-20); }
.signin-wrap { width: 100%; max-width: var(--signin-w); }
.signin { background: var(--shell); border-radius: var(--r-signin); padding: var(--sp-30) var(--sp-28) var(--sp-28); color: var(--shell-ink); box-shadow: var(--shadow-signin); }
.signin .mark { display: flex; align-items: center; gap: var(--sp-10); justify-content: center; margin-bottom: var(--sp-26); }
.cap-mark { width: var(--mark); height: var(--mark); border-radius: var(--r-mark); background: var(--shell-ink); color: var(--shell); display: grid; place-items: center; flex: none; }
.signin .mark .wm { font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.012em; color: var(--shell-ink); }
.signin .oauth { display: flex; align-items: center; justify-content: center; gap: var(--sp-10); width: 100%; height: var(--h-oauth); border-radius: var(--pill); background: var(--shell-ink); color: var(--shell); font-size: var(--fs-14); font-weight: 600; }
.signin .oauth + .oauth { margin-top: var(--sp-10); }
.signin .oauth:hover { background: var(--oauth-hover); }
.oauth-ico { width: var(--ico-oauth); height: var(--ico-oauth); flex: none; }
/* The mono foot line, shared by the sign-in card and the landing footer. */
.signin-foot, .l-foot { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.11em; color: var(--faint); }
.signin-foot { margin: var(--sp-18) 0 0; text-align: center; }
.gal-bar { display: flex; align-items: center; gap: var(--sp-10); margin: 0 0 var(--sp-22); flex-wrap: wrap; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--key-col) var(--key-col) auto; gap: var(--sp-14); align-items: center; padding: var(--sp-13) var(--sp-16); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); }
.key-row + .key-row { margin-top: var(--sp-8); }
.key-row .kn { font-size: var(--fs-135); font-weight: 600; }
.key-row .kp { font-family: var(--font-mono); font-size: var(--fs-115); color: var(--muted); }
.key-row .kd { font-size: var(--fs-125); color: var(--muted); }
.key-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--key-col) var(--key-col) auto; gap: var(--sp-14); padding: 0 var(--sp-16) var(--sp-8); font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-14); }
.usage .u { padding: var(--sp-14) var(--sp-16); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r); }
.usage .u .k { font-size: var(--fs-12); font-weight: 600; color: var(--muted); margin: 0 0 var(--sp-7); }
.usage .u .v { font-family: var(--font-mono); font-size: var(--fs-17); font-weight: 500; margin: 0 0 var(--sp-9); }
.usage .u .v .t { color: var(--faint); font-size: var(--fs-125); }
.people { margin-top: var(--sp-8); }
.people .p { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) 0; border-bottom: var(--border) solid var(--line-soft); }
.people .p:last-child { border-bottom: 0; }
.people .p .nm { font-size: var(--fs-135); font-weight: 500; }
.people .p .em { font-size: var(--fs-12); color: var(--muted); }

/* ---------- mobile: same tokens, same capsule, thumb-reach placement ----------
   720px is the one literal app.css keeps: media queries cannot read custom properties. */
@media (max-width: 720px) {
  .cap { --h: var(--h-m); }
  .capsule { top: auto; bottom: calc(var(--capsule-bottom-m) + var(--safe-bottom)); height: var(--h-capsule-m); padding: var(--sp-6); z-index: 16; }
  .cap-item { height: var(--h-item-m); min-width: var(--h-item-m); justify-content: center; }
  .cap-avatar { width: var(--avatar-cap-m); height: var(--avatar-cap-m); }
  .b-field { padding: 0; }
  .b-doc { width: 100%; border-radius: 0; box-shadow: none; height: 100%; }
  .b-page { padding: 0; }
  .b-col { width: 100%; padding: 0 var(--sp-16); }
  .b-h1 { font-size: var(--fs-22); }
  .b-btn { height: var(--h-touch); }
  .b-btn-icon { width: var(--h-touch); }
  .b-row { padding: var(--sp-14); gap: var(--sp-12); }
  .vw[data-panel="comments"] .b-field, .vw[data-panel="share"] .b-field { padding-right: 0; }
  .vw[data-panel="comments"] .capsule, .vw[data-panel="share"] .capsule { left: 50%; }
  /* The same panel element becomes the bottom sheet on phones. */
  .b-panel { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: var(--sheet-h); z-index: 18; border: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); animation: sheetIn var(--t-enter); }
  .b-panel[data-pane="share"] { height: var(--sheet-share-h); }
  .b-panel .panel-foot { padding-bottom: calc(var(--sp-26) + var(--safe-bottom)); }
  .vw[data-panel="comments"] .m-scrim, .vw[data-panel="share"] .m-scrim { display: block; }
  .m-top { position: absolute; top: 0; left: 0; right: 0; z-index: 14; height: calc(var(--safe-top) + var(--m-top-h)); padding: var(--safe-top) var(--sp-10) 0; display: flex; align-items: center; gap: var(--sp-8); background: color-mix(in srgb, var(--field) 92%, transparent); backdrop-filter: blur(var(--blur)); border-bottom: var(--border) solid var(--line); }
  .m-top .t { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 600; }
  .m-scroll { position: absolute; inset: 0; padding-top: calc(var(--safe-top) + var(--sp-58)); padding-bottom: var(--sp-110); overflow: auto; }
  .m-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h); z-index: 18; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); display: none; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; animation: sheetIn var(--t-enter); }
  .m-sheet[data-pane="share"] { height: var(--sheet-share-h); }
  .cap[data-panel="comments"] .m-sheet[data-pane="comments"] { display: grid; }
  .cap[data-panel="share"] .m-sheet[data-pane="share"] { display: grid; }
  .cap[data-panel="comments"] .m-scrim, .cap[data-panel="share"] .m-scrim { display: block; }
  .m-scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 17; display: none; border: 0; padding: 0; }
  .grab { width: var(--grab-w); height: var(--grab-h); border-radius: var(--pill); background: var(--line-strong); margin: var(--sp-9) auto var(--sp-4); flex: none; }
  .m-sheet .panel-foot { padding-bottom: calc(var(--sp-26) + var(--safe-bottom)); }
  .grp-head { position: sticky; top: 0; z-index: 3; background: var(--field); padding-top: var(--sp-10); }
  .br > summary { height: var(--h-touch); }
  .br-body { padding-left: var(--sp-14); }
  .cap-dd { top: auto; bottom: var(--dd-bottom-m); left: 0; transform: none; min-width: var(--dd-w-m); }
}
@keyframes sheetIn { from { transform: translateY(var(--sp-24)); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Inline revoke confirmation: the <details> dissolves into the key row's grid so the note spans the full row. */
.key-revoke { display: contents; }
.key-revoke > summary { list-style: none; cursor: pointer; }
.key-revoke > summary::-webkit-details-marker { display: none; }
.key-revoke > form { grid-column: 1 / -1; align-items: center; }

/* ---------- board chapters 06–11 (2026-09-17) ---------- */
.b-row .row-chev { color: var(--faint); transform: rotate(-90deg); margin-left: auto; }
.gal-tools { display: flex; align-items: center; gap: var(--sp-10); }
.gal-tools .gal-pick, .gal-tools .gal-apply { display: none; }
.gal-tools .b-search { width: var(--dd-w-wide); }
.usage.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usage.two .u .v { margin-bottom: 0; }

/* 09: the unverified banner is the first pixel of a public page; it pushes the capsule and the field down. */
.warnbar { position: absolute; top: 0; left: 0; right: 0; z-index: 15; display: flex; align-items: center; gap: var(--sp-10); min-height: var(--h-warnbar); padding: var(--sp-8) var(--sp-20); background: var(--amber-soft); color: var(--amber-ink); font-size: var(--fs-125); line-height: var(--lh-tight); }
.warnbar .rep { margin-left: auto; flex: none; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: var(--sp-2); }
.warnbar .short { display: none; }
.vw.banner .capsule { top: var(--capsule-top-banner); }
.vw.banner .b-field, .vw.banner .b-panel { top: 0; padding-top: var(--page-top-banner); }
.vw.banner .b-panel { top: var(--page-top-banner); padding-top: 0; }
.panel-loop.pending { background: var(--amber-soft); color: var(--amber-ink); }
.panel-loop.locked { background: var(--hover); color: var(--muted); }
.panel-cmd { padding: var(--sp-12) var(--sp-16) 0; }

/* 10: error pages — the capsule and one sentence. */
.err-page { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0 var(--sp-24); }
.err { width: var(--err-w); max-width: 100%; text-align: center; }
.err .code { margin: 0 0 var(--sp-13); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--faint); }
.err h1 { margin: 0 0 var(--sp-10); font-size: var(--fs-23); font-weight: 700; letter-spacing: -0.016em; }
.err p { margin: 0 auto var(--sp-20); font-size: var(--fs-14); color: var(--muted); line-height: var(--lh-open); max-width: var(--err-copy-w); }
.err .acts { display: flex; gap: var(--sp-10); justify-content: center; flex-wrap: wrap; }

/* 07: CLI authorize card. */
.auth { width: var(--auth-w); max-width: 100%; }
.auth .card { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r-lg); padding: var(--sp-26) var(--sp-26) var(--sp-22); box-shadow: var(--shadow-panel); }
.auth h1 { margin: 0 0 var(--sp-7); font-size: var(--fs-19); font-weight: 700; letter-spacing: -0.012em; }
.auth .lede { margin: 0 0 var(--sp-18); font-size: var(--fs-135); color: var(--muted); line-height: var(--lh-tight); }
.auth .meta { display: grid; gap: var(--border); background: var(--line-soft); border: var(--border) solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--sp-16); }
.auth .meta .r { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-11) var(--sp-13); background: var(--surface); }
.auth .meta .r .k { width: var(--auth-k-w); flex: none; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.auth .meta .r .v { font-size: var(--fs-13); min-width: 0; }
.auth .grant { margin: 0 0 var(--sp-18); padding: 0; list-style: none; }
.auth .grant li { display: grid; grid-template-columns: var(--sp-18) minmax(0, 1fr); gap: var(--sp-9); padding: var(--sp-4) 0; font-size: var(--fs-13); line-height: var(--lh-tight); color: var(--ink); }
.auth .grant .ico { color: var(--accent); margin-top: var(--sp-3); }
.auth .acts { display: flex; gap: var(--sp-10); }
.auth .acts .b-btn { flex: 1 1 0; }
.auth .foot { margin: var(--sp-16) 0 0; text-align: center; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.1em; color: var(--faint); }
.auth .seal { width: var(--h-seal); height: var(--h-seal); border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-14); background: var(--accent-soft); color: var(--accent-ink); }

/* Desktop-only and phone-only pieces share one markup. */
.m-top { display: none; }
@media (max-width: 720px) {
  .m-top { display: flex; }
  .gal .b-page { padding-top: calc(var(--safe-top) + var(--m-top-h) + var(--sp-14)); padding-bottom: var(--sp-110); }
  .gal .b-h1, .gal-sel { display: none; }
  .gal-bar { flex-direction: column; align-items: stretch; }
  .gal-bar .b-seg { display: flex; width: 100%; }
  .gal-bar .b-seg a { flex: 1; justify-content: center; height: var(--sp-38); }
  .gal-tools { display: none; flex-wrap: wrap; }
  .gal-tools.open { display: flex; }
  .gal-tools .b-search { width: 100%; }
  .gal-tools .gal-pick { display: flex; flex: 1 1 var(--gal-pick-w); }
  .gal-tools .gal-apply { display: inline-flex; }
  .warnbar { padding: calc(var(--safe-top) + var(--sp-8)) var(--sp-16) var(--sp-9); font-size: var(--fs-115); }
  .warnbar .long { display: none; }
  .warnbar .short { display: inline; }
  .warnbar .rep { margin-left: var(--sp-8); }
  .vw.banner .capsule { top: auto; }
  .vw.banner .b-field { padding-top: calc(var(--safe-top) + var(--h-warnbar) + var(--sp-16)); }
  .vw.banner .b-panel { top: auto; }
  .err-page { padding: 0 var(--sp-22) var(--sp-110); }
  .err .acts .b-btn { width: 100%; }
  .auth .card { padding: var(--sp-22) var(--sp-20) var(--sp-20); }
  .auth .acts { flex-direction: column-reverse; }
  .signin { border-radius: var(--r-signin-m); }
  .signin .oauth { height: var(--h-oauth-m); }
}

/* Desktop-only and phone-only fragments inside shared markup. */
@media (min-width: 721px) {
  .m-only { display: none !important; }
  .grab { display: none; }
}
@media (max-width: 720px) {
  .desk-only { display: none !important; }
  .grab { display: block; }
  .panel-head .grab { position: absolute; top: var(--sp-8); left: 50%; transform: translateX(-50%); margin: 0; }
  .panel-head { position: relative; padding-top: var(--sp-20); }
  .vw.has-top .b-field { padding-top: calc(var(--safe-top) + var(--m-top-h)); }
  .m-top .cap-dd { top: calc(100% + var(--sp-4)); bottom: auto; left: 0; transform: none; min-width: var(--dd-w-versions); max-width: calc(100vw - var(--sp-20)); }
  .composer .b-area { min-height: var(--h-touch); height: var(--h-touch); padding-top: var(--sp-12); }
  .cmt-acts .lnk { display: inline-flex; align-items: center; min-height: var(--h-touch); padding: 0 var(--sp-8); }
}
.panel-top { display: block; }

/* 05: the create-key card is revealed by its button; the revoke note takes the whole row. */
.newkey { display: none; }
.newkey.open { display: block; }
.key-row .kp .dot { color: var(--faint); }
@media (max-width: 720px) {
  .acct .b-page { padding-top: calc(var(--safe-top) + var(--m-top-h) + var(--sp-18)); padding-bottom: var(--sp-110); }
  .b-code .copy { height: var(--h-touch); min-width: var(--h-touch); }
  .key-row { grid-template-columns: minmax(0, 1fr) auto; }
  .key-revoke > summary { width: var(--h-touch); padding: 0; justify-content: center; }
  .key-revoke > form { flex-wrap: wrap; }
}

/* ---------- 12: landing page (/) — layout only; every section reuses the component classes above ---------- */
.l-lang { position: absolute; top: 0; left: 0; right: 0; z-index: 13; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); height: var(--h-lang); background: var(--field); font-size: var(--fs-11); color: var(--faint); }
.l-lang a { color: inherit; text-decoration: none; }
.l-lang a:hover { color: var(--ink); }
.l-lang a[aria-current] { color: var(--ink); font-weight: 600; }
/* Only the page's own capsule moves for the strip; the one inside the viewer miniature keeps its place. */
.lp > .capsule { top: calc(var(--h-lang) + var(--capsule-top)); }
.lp .b-page { padding-top: calc(var(--h-lang) + var(--page-top)); padding-bottom: var(--sp-58); }

.l-hero-h1 { margin: 0 0 var(--sp-14); font-size: var(--fs-38); line-height: var(--lh-hero); font-weight: 700; letter-spacing: -0.022em; max-width: var(--hero-w); text-wrap: pretty; }
.l-lede { margin: 0 0 var(--sp-22); font-size: var(--fs-16); line-height: var(--lh-open); color: var(--muted); max-width: var(--lede-w); text-wrap: pretty; }
.l-sect { margin-top: var(--sp-58); }

.l-step { display: grid; grid-template-columns: var(--avatar) minmax(0, 1fr); gap: var(--sp-14); align-items: start; }
.l-step + .l-step { margin-top: var(--sp-22); }
.l-step .num { width: var(--avatar); height: var(--avatar); border-radius: 50%; display: grid; place-items: center; background: var(--chip-neutral); color: var(--chip-neutral-ink); font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 500; }
.l-step h3 { margin: 0 0 var(--sp-8); font-size: var(--fs-14); font-weight: 600; }
.l-step p { margin: var(--sp-8) 0 0; font-size: var(--fs-125); line-height: var(--lh-tight); color: var(--muted); }

.l-loop { display: grid; grid-template-columns: minmax(0, 1fr) var(--l-panel-w); gap: var(--sp-24); align-items: start; }
.l-loop .b-card { overflow: hidden; }

/* The viewer miniature: a framed screen with its own capsule, sheet and stamp. */
.l-screen { position: relative; overflow: hidden; height: var(--l-screen-h); background: var(--field); border: var(--border) solid var(--line-strong); border-radius: var(--r-lg); }
.l-mini { position: absolute; inset: 0; padding: var(--page-top) 0 var(--sp-40); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.l-sheet { width: min(var(--l-sheet-w), calc(100% - var(--sp-28))); flex: 1 1 auto; min-height: 0; overflow: hidden; padding: var(--sp-28) var(--sp-30); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-doc); }
.l-sheet h3 { margin: var(--sp-10) 0 var(--sp-8); font-size: var(--fs-19); font-weight: 600; letter-spacing: -0.012em; }
.l-sheet h4 { margin: var(--sp-20) 0 var(--sp-8); font-size: var(--fs-15); font-weight: 600; }
.l-sheet p { margin: 0 0 var(--sp-10); font-size: var(--fs-13); line-height: var(--lh-open); }
.l-sheet .hint { color: var(--muted); }

.l-card { padding: var(--sp-16); }
.l-card h3 { margin: 0 0 var(--sp-8); font-size: var(--fs-14); font-weight: 600; }
.l-card p { margin: 0; font-size: var(--fs-125); line-height: var(--lh-tight); color: var(--muted); }
.l-card .b-stamp, .l-card .od-cluster, .l-card .warnbar { margin-bottom: var(--sp-10); }
/* The banner is a full-width bar on a public page; inside the card it is a sample. */
.l-warn { position: static; border-radius: var(--r-sm); padding: var(--sp-8) var(--sp-11); font-size: var(--fs-115); }

/* Commands are the page's content here, so they wrap instead of truncating at the ellipsis. */
.lp .b-code { align-items: flex-start; }
.lp .b-code .cmd { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }

.l-agents { max-width: var(--l-agents-w); }
.l-note { margin: 0 0 var(--sp-14); font-size: var(--fs-125); line-height: var(--lh-tight); color: var(--muted); }

.l-foot { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-40); padding-top: var(--sp-16); border-top: var(--border) solid var(--line); }
.l-foot .sp { flex: 1; }
.l-foot a { color: inherit; text-decoration: underline; text-underline-offset: var(--sp-2); }

@media (max-width: 720px) {
  .lp > .capsule { top: auto; }
  .lp .b-page { padding-top: calc(var(--safe-top) + var(--h-lang)); padding-bottom: var(--sp-110); }
  .l-lang { height: calc(var(--safe-top) + var(--h-lang)); padding-top: var(--safe-top); }
  .l-hero-h1 { font-size: var(--fs-26); max-width: none; }
  .l-loop, .lp .od-grid { grid-template-columns: minmax(0, 1fr); }
  .l-screen { height: var(--l-screen-h-m); }
  .l-mini { padding: var(--sp-16) 0 calc(var(--capsule-bottom-m) + var(--h-capsule-m) + var(--sp-8)); }
  .l-sheet { padding: var(--sp-20) var(--sp-18); }
  .l-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
}

/* Capsule title mark on Gallery, Account, errors and authorize: the 20px white box from the board (chapter 02). */
.cap-item.title .g { width: var(--ico-lg); height: var(--ico-lg); border-radius: var(--r-md); background: var(--shell-ink); color: var(--shell); display: grid; place-items: center; flex: none; }
.cap-item.title .g .ico { width: var(--ico-xs); height: var(--ico-xs); }
.l-mini mark, .l-sheet mark { background: var(--amber-soft); color: inherit; padding: 0 var(--sp-2); border-radius: var(--r-sm); }