/* Conviction League — the Seat Interview. Engraved Ledger: paper and ink, serif
   speaks, mono counts. Motion whitelist: 0.12s state transitions and the 2s
   status-dot pulse only. */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink2: #52514e;
  --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7;
  --border: rgba(11,11,11,0.10); --hover: rgba(11,11,11,0.04);
  --s1: #2a78d6; --good: #006300; --bad: #d03b3b; --brass: #a06d12;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink2: #c3c2b7;
    --muted: #898781; --grid: #2c2c2a; --axis: #383835;
    --border: rgba(255,255,255,0.10); --hover: rgba(255,255,255,0.05);
    --s1: #3987e5; --good: #0ca30c; --bad: #e66767; --brass: #d19a3f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink2: #c3c2b7;
  --muted: #898781; --grid: #2c2c2a; --axis: #383835;
  --border: rgba(255,255,255,0.10); --hover: rgba(255,255,255,0.05);
  --s1: #3987e5; --good: #0ca30c; --bad: #e66767; --brass: #d19a3f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--page); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 56px; }

/* ---------- header ---------- */
header.top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 0 12px; border-bottom: 1px solid var(--border); }
.wordmark { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.2px; color: var(--ink); text-decoration: none; }
.tagline { color: var(--ink2); font-size: 13px; }
.authchip { margin-left: auto; font-size: 11px; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; font-family: var(--mono); }
.authchip a { color: var(--muted); }

.label { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--display); }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
section[hidden] { display: none; }
a { color: var(--ink); }

button.primary, button.plain {
  font: 600 14px/1 system-ui, sans-serif; cursor: pointer; border-radius: 8px;
  padding: 11px 18px; border: 1px solid var(--ink);
}
button.primary { background: var(--ink); color: var(--page); }
button.primary:hover { opacity: 0.9; }
button.primary:disabled { opacity: 0.4; cursor: default; }
button.plain { background: var(--surface); color: var(--ink); border-color: var(--border); }
button.plain:hover { background: var(--hover); }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

.err { color: var(--bad); font-size: 13px; margin: 10px 0 0; }
.err .errretry { margin-left: 8px; padding: 5px 12px; font-size: 12px; vertical-align: baseline; }

/* ---------- landing (contemporary) ---------- */
.landing { max-width: 468px; margin: 0 auto; padding-top: 40px; }
.landing .kicker { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; }
.landing h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 14px; text-wrap: balance; }
.landing .lede { font-size: 16px; line-height: 1.55; color: var(--ink2); margin: 0 0 26px; }

/* sign in */
.signin { display: flex; flex-direction: column; gap: 11px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; font: 650 15px/1 system-ui, sans-serif; background: var(--ink); color: var(--page); border: 1px solid var(--ink); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.gbtn:hover { opacity: 0.92; }
.gbtn .gmark { flex: none; background: #fff; border-radius: 4px; padding: 3px; display: grid; place-items: center; }
.gbtn .gmark svg { width: 16px; height: 16px; display: block; }
.signin .or { text-align: center; font-size: 12.5px; color: var(--muted); }
.emailrow { display: flex; gap: 8px; }
/* 16px minimum: any smaller and iOS Safari zooms the viewport on focus */
.emailrow input { flex: 1; min-width: 0; font: 16px/1.3 system-ui, sans-serif; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.emailrow button { flex: none; border-radius: 12px; }
.signedin { font-size: 13.5px; color: var(--ink2); margin: 0; }
.signedin b { color: var(--ink); font-weight: 600; }
#beginbox { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* finishing an email-link sign-in */
.finishing { display: flex; flex-direction: column; gap: 10px; }
.finishing .finishingstatus { font-size: 15px; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 10px; }
.finishing .finishingstatus::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--ink); flex: none; }
@media (prefers-reduced-motion: no-preference) { .finishing .finishingstatus::before { animation: spin 0.7s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.finishing .confirmnote { font-size: 13.5px; line-height: 1.5; color: var(--ink2); margin: 0 0 2px; }

.micro { font-size: 12.5px; color: var(--muted); margin: 22px 0 30px; }
.micro b { color: var(--ink2); font-weight: 600; }

/* the contract — four term cards */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 28px; }
.terms .term { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.terms .term .k { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.terms .term .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); flex: none; }
.terms .term .v { font-size: 12.5px; line-height: 1.5; color: var(--ink2); margin: 0; }
@media (max-width: 520px) { .terms { grid-template-columns: 1fr; } }

.landing .creed { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); margin: 0 0 28px; }
.landing .creed span { color: var(--brass); }

/* the specimen — one real principle, and what it became */
.specimen { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 0 0 20px; }
.specimen .spectop { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--hover); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.specimen .specwho { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink); }
.specimen .specbody { padding: 14px 16px; }
.specimen .tags { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.specimen .stmt { font-size: 14.5px; font-weight: 550; line-height: 1.5; color: var(--ink); margin: 0; }
.specimen .specq { font-style: italic; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 9px 0 0; padding-left: 11px; border-left: 2px solid var(--brass); }

.footnote { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------- interview ---------- */
.igrid { padding-top: 10px; }
.chatcol { display: flex; flex-direction: column; min-height: 60vh; }
#chatlog { display: flex; flex-direction: column; gap: 18px; padding: 18px 0 12px; }
.msg .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.msg.hasface { display: flex; flex-direction: row; gap: 11px; align-items: flex-start; }
.msg.hasface .portrait { width: 42px; flex: none; color: var(--ink2); margin-top: 1px; }
.msg.hasface .bubble { flex: 1; min-width: 0; }
.msg .text { max-width: 62ch; white-space: pre-wrap; }
.msg.reg .text { font-family: var(--display); font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.msg.me { align-self: flex-end; text-align: right; }
.msg.me .who { text-align: right; }
.msg.me .text { font-size: 14.5px; color: var(--ink2); border-right: 2px solid var(--grid); padding-right: 12px; text-align: left; }
.msg.sys { text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 4px 0; }
/* an inscription is evidence: tapping it opens the draft at that entry */
.msg.inscribe { cursor: pointer; }
.msg.inscribe:hover { color: var(--ink2); }

/* ---------- the two acts ---------- */
/* the dividers that close the Registrar's file */
.msg.divider { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink2); padding: 10px 0 2px; }
.msg.divider + .msg.divider { padding-top: 2px; }
/* the creation moment: the name resolves, once */
.msg.ceremony { text-align: center; padding: 18px 0 8px; }
.msg.ceremony .cname { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: 0.3px; }
.msg.ceremony .carch { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* the settle pass over the draft panel */
.dsec { transition: background 0.12s ease; }
.dsec.lit { background: var(--hover); }

/* ---------- answer chips ----------
   chips decide about the record; prose is the record. Part of the asking
   turn, never of the composer — which stays open beneath them. */
.choices { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; max-width: 62ch; }
.choice { display: block; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-height: 44px; transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease; }
.choice:hover { background: var(--hover); border-color: var(--axis); }
.choice .clabel { display: block; font-family: var(--display); font-size: 14.5px; color: var(--ink); }
.choice .chint { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.choices.fading { opacity: 0; transition: opacity 0.12s ease; }
@media (max-width: 899px) {
  .choice .chint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.msg.first { border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: 10px; background: var(--surface); padding: 14px 16px; }
.msg.first .who { color: var(--ink); }
.msg.first .text { font-family: var(--display); font-size: 16.5px; line-height: 1.62; }
.msg .text em { font-style: italic; }
.msg .text strong { font-weight: 650; }
.msg .text code { font-family: var(--mono); font-size: 0.85em; background: var(--hover); border-radius: 4px; padding: 0 4px; }
.msg .undelivered { display: block; width: max-content; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dashed; text-underline-offset: 3px; }
.msg .undelivered:hover { color: var(--ink); }
.msg.me .undelivered { margin-left: auto; }

/* the way back to the live edge, shown only while the principal is reading
   further up. A zero-height sticky rail keeps it clear of the composer, whose
   real height app.js publishes as --foot. */
.tailrow { position: sticky; bottom: var(--foot, 76px); height: 0; display: flex; justify-content: center; align-items: flex-start; z-index: 5; pointer-events: none; }
.tailbtn { pointer-events: auto; transform: translateY(calc(-100% - 14px)); cursor: pointer; display: flex; align-items: center; min-height: 38px; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink2); background: var(--surface); border: 1px solid var(--axis); border-radius: 999px; padding: 0 17px; box-shadow: 0 2px 12px rgba(0,0,0,0.16); transition: background 0.12s ease, color 0.12s ease; }
.tailbtn:hover { background: var(--hover); color: var(--ink); }

#composer { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--page); padding: 10px 0 14px; border-top: 1px solid var(--border); }
/* 16px minimum: any smaller and iOS Safari zooms the viewport on every focus */
#composer textarea { flex: 1; min-width: 0; resize: none; font: 16px/1.5 system-ui, sans-serif; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; max-height: 160px; }
#composer button { flex: none; }
#composer[data-busy="true"] textarea { opacity: 0.6; }
.finishbar { position: sticky; bottom: 0; background: var(--page); border-top: 1px solid var(--border); padding: 12px 0 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* The post-read state shows BOTH sticky bars. Two siblings sticky at bottom:0
   stack on the same pixel and the composer paints over the Review button
   (elementFromPoint proved it: clicks landed in the textarea). The finish bar
   rides the composer's measured height instead — stacked, never overlapped. */
#finishbar:not(.quiet):has(~ #composer:not([hidden])) { bottom: var(--composer-h, 64px); }
.finishbar .note { font-size: 13px; color: var(--ink2); }
/* the charter is complete but the interview may continue: a quiet bar above the composer */
.finishbar.quiet { position: static; border-top: 1px dashed var(--border); padding: 10px 0 4px; }
.finishbar.quiet .note { color: var(--muted); }

/* ---------- the draft (materialization panel) ---------- */
.draftcol { border-top: 1px solid var(--border); }
.drafttoggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); color: var(--ink); border: none; border-bottom: 1px solid var(--border); padding: 13px 16px; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
.drafttoggle .caret { color: var(--muted); font-size: 11px; }
/* the completeness checklist: derived from real requirements, never a meter */
.dchecks { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.03em; color: var(--muted); text-align: left; }
.dchecks .chk.on { color: var(--ink); }
#draftbody { padding: 4px 16px 18px; overflow-y: auto; }
.dsec { margin-top: 16px; }
.dsec .label { display: block; margin-bottom: 6px; }
.dname { font-family: var(--display); font-size: 22px; font-weight: 700; }
.dname .arch { display: block; font-family: system-ui, sans-serif; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dcredo { font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.55; }
.dmono { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li { padding: 7px 0 7px 12px; border-left: 2px solid var(--grid); margin: 6px 0; font-size: 13px; color: var(--ink2); }
.dprin { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--surface); }
.dprin .tags { display: flex; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: var(--hover); border-radius: 4px; padding: 2px 6px; }
.tag.hard { color: var(--ink); border: 1px solid var(--border); background: none; }
.dprin .stmt { font-family: var(--display); font-size: 14.5px; line-height: 1.5; }
.dprin .quote { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 5px; }
.dhyp .clock { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.dempty { font-size: 13px; color: var(--muted); font-style: italic; padding: 16px 0; }
.dwait { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* mobile: the draft is a bottom sheet */
@media (max-width: 899px) {
  .draftcol { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(0,0,0,0.10); }
  #draftbody { display: none; max-height: 62vh; }
  .draftcol.open #draftbody { display: block; }
  .chatcol { padding-bottom: 54px; }
  #composer { bottom: 44px; }
  .finishbar { position: static; }
}
/* ---------------- the phone ----------------
   The interview already stacks and the option chips already clear 44px; what
   is left is the chrome around them and the mono lines that shrank to 11px. */
@media (max-width: 720px) {
  .wrap { padding: 0 14px 40px; }
  button.primary, button.plain { min-height: 44px; }
  #signoutlink, .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  #signoutlink { font-size: 12.5px; }
  .choice .chint, .dwait, .msg .undelivered { font-size: 12px; }
  .msg .text, .msg.first .text { max-width: none; }
}

/* desktop: chat beside the panel */
@media (min-width: 900px) {
  .igrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .draftcol { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
  .drafttoggle { cursor: default; pointer-events: none; }
  .drafttoggle .caret { display: none; }
  #draftbody { display: block; }
}

/* ---------- finish / charter ---------- */
.finish { max-width: 720px; margin: 0 auto; padding-top: 28px; }
.finish h2 { font-family: var(--display); font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.finish .sub { color: var(--ink2); font-size: 13.5px; margin: 0 0 20px; }
.charter { padding: 6px 18px 18px; }
.charter .dsec .label { display: flex; align-items: baseline; gap: 8px; }
.changeit { font: inherit; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline dashed; text-underline-offset: 3px; }
.changeit:hover { color: var(--ink); }
.privacy, .updatescard, .namecard { padding: 14px 18px; margin: 18px 0; }
.privacy .opt, .updatescard .opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; cursor: pointer; }
.privacy .opt input, .updatescard .opt input { margin-top: 3px; accent-color: var(--ink); }
.privacy .opt b, .updatescard .opt b { font-weight: 600; }
.privacy .opt .d, .updatescard .opt .d { font-size: 13px; color: var(--ink2); }
.updatescard .facehint, .namecard .facehint { margin-bottom: 10px; }
.updatescard .updfloor { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.finish .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- the seat picker (give it a face) ---------- */
.facecard { padding: 16px 18px 18px; margin: 18px 0; }
.facehint { font-size: 13px; line-height: 1.5; color: var(--ink2); margin: 6px 0 16px; }
.facebuild { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.facepreview { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.facestage { width: 150px; height: 150px; background: #141412; border: 1px solid var(--border);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 12px; }
:root[data-theme="light"] .facestage, :root:not([data-theme="dark"]) .facestage { background: #141412; }
.facearch { font-size: 11px; color: var(--brass); letter-spacing: 0.04em; }
.facecontrols { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.fgroup { display: flex; flex-direction: column; gap: 8px; }
.flabel { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fopts { display: flex; flex-wrap: wrap; gap: 7px; }
.fopt { background: var(--hover); border: 2px solid var(--border); border-radius: 6px;
  cursor: pointer; padding: 3px; line-height: 0; transition: border-color 0.12s; }
.fopt:hover { border-color: var(--ink2); }
.fopt.sel { border-color: var(--brass); }
.fopt:not(.dress):not(.sw) { width: 46px; height: 46px; }
.fopt.sw { width: 30px; height: 30px; border-radius: 50%; padding: 0; }
.fopt.sw.sel { border-color: var(--ink); }
.fopt.dress { width: 60px; height: 78px; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 2px; padding: 4px 2px 5px; }
.fopt.dress .fmini { display: block; width: 42px; height: 42px; flex: none; }
.fopt.dress .fdl { font-size: 8px; line-height: 1.1; color: var(--muted); white-space: nowrap; }

.statusface { line-height: 0; margin: 0 0 14px; }
.statusface .oo-avatar { margin: 0 auto; }
.errbox { border: 1px solid var(--bad); border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.errbox .label { color: var(--bad); }
.errbox ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink2); }

/* ---------- status ---------- */
.statuswrap { max-width: 560px; margin: 0 auto; padding-top: 44px; }
.statuscard { padding: 22px 22px 20px; }
.statusline { display: flex; align-items: center; gap: 10px; }
.statusword { font-family: var(--display); font-size: 21px; font-weight: 700; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the whitelist's single 2s pulse, spent play-once where it is earned:
     the moment the agent's name resolves (operator ruling 2026-07-25 —
     the status dot's infinite loop was retired to pay for it) */
  .msg.ceremony .cname { animation: pulse 2s ease-in-out 1; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  button, a, .drafttoggle { transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease; }
}
.statusdetail { font-size: 14.5px; color: var(--ink2); margin: 12px 0 0; line-height: 1.6; }
.statusdetail b { color: var(--ink); font-weight: 600; }
/* the kept artifact until the first bell: the agent's first read, verbatim */
.firstread { margin: 14px 0 0; padding: 10px 0 2px 14px; border-left: 2px solid var(--grid); font-family: var(--display); font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.firstread .label { display: block; margin-bottom: 6px; font-family: system-ui, sans-serif; }
.statusbell { font-family: var(--mono); font-size: 13px; color: var(--ink); margin-top: 10px; }
.statuslinks { margin-top: 18px; font-size: 14px; }
/* the first-session launcher and its live stages */
#statusrun { margin-top: 16px; }
#statusrun .bellnote { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
#statusrun .bellstage { font-family: var(--mono); font-size: 13px; color: var(--ink); margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
#statusrun .pulse-dot { background: var(--good); }

/* the first-session stepper — steps check off as the engine advances */
.bellsteps { list-style: none; margin: 16px 0 8px; padding: 0; }
.bellstep { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.bellstep::before { content: ""; position: absolute; left: 8px; top: 23px; bottom: -7px; width: 2px; background: var(--border); }
.bellstep:last-child::before { display: none; }
.bellstep .mk { flex: none; position: relative; z-index: 1; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--axis); background: var(--surface); display: grid; place-items: center; }
.bellstep.pending { color: var(--muted); }
.bellstep.active { color: var(--ink); font-weight: 550; }
.bellstep.active .mk { border-color: var(--good); }
.bellstep.active .mk::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.bellstep.done .mk { border-color: var(--good); background: var(--good); }
.bellstep.done .mk::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
@keyframes bellpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) { .bellstep.active .mk::after { animation: bellpulse 1.4s ease-in-out infinite; } }

footer.provenance { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 14px; font-size: 12px; color: var(--muted); }