/* GENERATED from design/components/*.css — DO NOT EDIT.
 * Edit the family file, then: node scripts/design/build-tokens.mjs */

/* aw-ab — the A/B moment (task-369): a directional re-reading pair on a
   reaction-worthy statement. A = the reading we attached; B = a creative
   re-reading of the conclusion the narrative suggests. Picked = solid gold.
   Ancestor: P4 wireframes artifact v3 §4 (.ab / .ab-opt / .ab-neither). */

.aw-ab { margin: 12px 0 4px; font-family: var(--font-ui); }
.aw-ab__q {
  font-family: var(--font2); font-style: italic; font-size: 15.5px;
  color: var(--sic-ink); margin-bottom: 8px;
}
.aw-ab__pair { display: flex; gap: 10px; flex-wrap: wrap; }
.aw-ab__opt {
  flex: 1 1 220px; text-align: left; cursor: pointer;
  border: 1px dashed var(--edge); padding: 10px 14px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.45;
  color: var(--sic-ink); background: transparent;
}
.aw-ab__opt:hover { border-color: var(--sic-ink); }
.aw-ab__opt--picked {
  border-style: solid; border-color: var(--sic-gold);
  background: var(--gold-tint); cursor: default;
}
.aw-ab__opt:disabled { cursor: default; }
.aw-ab__tag {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em;
  color: var(--sic-blue); display: block; margin-bottom: 4px;
}
.aw-ab__neither { font-size: 13px; color: var(--muted); margin-top: 8px; }
.aw-ab__say {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline; text-decoration-color: var(--sic-blue);
  text-underline-offset: 3px;
}
.aw-ab__say:hover { color: var(--sic-ink); }

/* aw-ai — "ask your AI" (task-701; Scarlet's rulings 2026-09-28: both doors —
   your own AI over MCP and the aswritten assistant in your Teams private
   chat; the standing line on first use only). The comps: AI-panel,
   First-visit, First-visit-after, Position-AI. The theatre's MCP sheet
   (comp [M]) moved into the shared chrome as this panel: its blue chip
   (--sic-blue, --blue-edge, --blue-tint — the MCP accents task-377 minted)
   is the header control; the panel is a paper popover under the header's
   right edge, not a centred sheet. Tokens only; new selectors only. */

/* ---- the header control, beside [settings] ---- */
.aw-ai__control {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-blue);
  border: 1px solid var(--blue-edge); padding: 4px 11px 4px 8px;
  background: none; cursor: pointer;
}
.aw-ai__control:hover, .aw-ai__control--on { background: var(--blue-tint); }
.aw-ai__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sic-blue);
  display: inline-block;
}

/* ---- the standing line under the header, before first use ---- */
.aw-ai-line {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px; padding: 10px 26px 10px 22px;
  background: var(--sic-paper); border-bottom: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
}
.aw-ai-line__open {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-ai-line__open:hover { color: var(--sic-gold); }

/* ---- the panel: a paper popover under the header's right edge ---- */
.aw-ai__scrim { position: fixed; inset: 0; z-index: 85; }
.aw-ai {
  position: fixed; top: var(--ai-panel-top); right: 26px; z-index: 90;
  width: min(var(--ai-panel-width), calc(100vw - 32px)); box-sizing: border-box;
  max-height: calc(100vh - var(--ai-panel-top) - 16px); overflow-y: auto;
  background: var(--sic-paper); border: 1px solid var(--rule);
  box-shadow: 0 2px 14px var(--ink-wash); padding: 16px 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.aw-ai:focus { outline: none; }
.aw-ai__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aw-ai__title {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-blue);
}
.aw-ai__close {
  font-family: var(--font1-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--sic-stone); background: none; border: none; padding: 0; cursor: pointer;
}
.aw-ai__close:hover { color: var(--sic-ink); }
.aw-ai__sec { display: flex; flex-direction: column; gap: 8px; }
.aw-ai__sec + .aw-ai__sec { padding-top: 14px; border-top: 1px solid var(--rule); }
.aw-ai__h {
  margin: 0; font-family: var(--font1-mono); font-size: 11px; font-weight: 400;
  color: var(--sic-stone);
}
.aw-ai__lead {
  margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5;
  color: var(--sic-ink);
}
.aw-ai__prompt {
  margin: 0; padding: 10px 13px; border: 1px solid var(--rule); background: var(--card);
  font-family: var(--font-code); font-size: 12px; line-height: 1.6; color: var(--sic-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.aw-ai__row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aw-ai__copy {
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em; padding: 5px 14px;
  background: transparent; color: var(--sic-ink); border: 1.5px dashed var(--edge-strong);
  cursor: pointer;
}
.aw-ai__copy:hover { border-color: var(--sic-gold); background: var(--gold-tint); }
.aw-ai__note {
  margin: 0; font-family: var(--font1-mono); font-size: 10.5px; line-height: 1.6;
  color: var(--sic-stone);
}
.aw-ai__teams {
  align-self: flex-start; font-family: var(--font-ui); font-size: 14px; line-height: 1.45;
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px;
}
a.aw-ai__teams:hover { color: var(--sic-gold); }
/* the server served no deep link: the row says so, and does nothing */
.aw-ai__teams--pending { color: var(--sic-stone); text-decoration: none; }

/* the connect rows — the theatre sheet's row grammar */
.aw-ai__rows { display: flex; flex-direction: column; }
.aw-ai__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 0;
  border-top: 1px solid var(--border);
}
.aw-ai__nm {
  flex: none; min-width: 12ch; font-family: var(--font1-mono); font-size: 12.5px;
  color: var(--sic-ink);
}
.aw-ai__hears {
  flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
}
.aw-ai__code {
  font-family: var(--font-code); font-size: 11.5px; color: var(--sic-ink);
  background: var(--card); border: 1px solid var(--border); padding: 1px 5px;
  overflow-wrap: anywhere;
}
.aw-ai__act {
  flex: none; margin-left: auto; font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-ink); background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-ai__act:hover { color: var(--sic-gold); }
/* a refused clipboard: its own line under the copy that failed; the text
   it names is selected for the person's own copy keystroke */
.aw-ai__copyfail {
  flex-basis: 100%; margin: 0; font-family: var(--font1-mono); font-size: 10.5px;
  line-height: 1.6; color: var(--sic-red);
}

/* ---- the position page's line under the review row ---- */
.aw-ai-review { margin-top: 10px; }
.aw-ai-review__open {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-ai-review__open:hover { color: var(--sic-gold); }

/* ---- phone: the panel is a sheet under the header ---- */
@media (max-width: 800px) {
  .aw-ai {
    top: 61px; right: 0; left: 0; width: auto; border-left: none; border-right: none;
    max-height: calc(100vh - 61px);
  }
  .aw-ai-line { padding: 10px 20px; }
}

/* aw-attest — the one-tap attest CTA (D6 respec: confirm is one tap,
   optimistic, batched into the send). Sun time on resolution. */

.aw-attest {
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em;
  color: var(--sic-ink); background: transparent; cursor: pointer;
  border: 1.5px dashed rgba(205,163,73,0.65);
  padding: 8px 19px;
  transition: border-color var(--motion-sun), background var(--motion-sun);
}
.aw-attest:hover { border-color: var(--sic-gold); background: var(--gold-tint); }

/* one tap later — settled, no longer a question */
.aw-attest--confirmed {
  border-style: solid; border-color: var(--sic-gold);
  background: var(--gold-target); cursor: default;
}

/* batch send in flight — Moon time */
.aw-attest--waiting { animation: aw-pulse var(--motion-moon) ease-in-out infinite; }

/* aw-brk — bracket-bounded speech unit (task-528 r4). Replaces the card
   surface for conversational speech: on the white room there is no box —
   the drawn square bracket is the boundary, font hierarchy sets the text
   off, and the STROKE carries state. Stroke vocabulary (one device, six
   states): solid = witnessed · dashed = not-yet · double = absorbed ·
   gold-dashed = this-call · gold-solid = for-you · red-dashed = failed.
   Ancestor: r4 system comps, ratified 2026-07-20
   (docs/design/artifact-archive/2026-07-20-system-comps-sic-identity-task-528.html).
   Geometry witnessed from the ratified comp (NUMEROLOGY exempt: extracted).
   Stroke lives in custom props so state variants compose with --mine. */

.aw-brk {
  --brk-stroke: var(--sic-ink);
  --brk-style: solid;
  --brk-w: 2px;
  position: relative;
  max-width: 52ch;
  padding: 2px 0 2px calc(20px + var(--brk-w));
  border-left: var(--brk-w) var(--brk-style) var(--brk-stroke);
}
.aw-brk::before,
.aw-brk::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 0;
  border-top: var(--brk-w) var(--brk-style) var(--brk-stroke);
}
.aw-brk::before { top: 0; }
.aw-brk::after  { bottom: 0; }

/* mine closes right: bracket direction + alignment replace the tail */
.aw-brk--mine {
  border-left: none;
  border-right: var(--brk-w) var(--brk-style) var(--brk-stroke);
  padding: 2px calc(20px + var(--brk-w)) 2px 0;
  margin-left: auto;
  text-align: right;
}
.aw-brk--mine::before,
.aw-brk--mine::after { left: auto; right: 0; }

/* text hierarchy does the separation: mono name · serif speech · mono meta */
.aw-brk__name {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--sic-stone);
  margin: 0 0 4px;
}
.aw-brk__speech {
  font-family: var(--font2);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}
.aw-brk__derived {
  font-family: var(--font-ui);
  font-size: 15px;
  margin: 0;
}
.aw-brk__meta {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--sic-stone);
  margin: 7px 0 0;
}

/* ---- state variants: the stroke carries them ---- */
.aw-brk--this-call {
  --brk-stroke: var(--sic-gold);
  --brk-style: dashed;
  background: linear-gradient(to right, var(--gold-tint), transparent 70%);
}
.aw-brk--for-you {
  --brk-stroke: var(--sic-gold);
  background: linear-gradient(to right, var(--gold-tint), transparent 70%);
}
.aw-brk--unwitnessed {
  --brk-stroke: var(--mark);
  --brk-style: dashed;
}
.aw-brk--unwitnessed .aw-brk__speech,
.aw-brk--unwitnessed .aw-brk__derived { color: var(--sic-stone); }
.aw-brk--unread { --brk-style: dashed; }
.aw-brk--absorbed { --brk-style: double; --brk-w: 5px; }
.aw-brk--failed {
  --brk-stroke: var(--sic-red);
  --brk-style: dashed;
  background: linear-gradient(to right, var(--red-tint), transparent 70%);
}
.aw-brk--failed .aw-brk__meta { color: var(--sic-red); }

/* washed states flip direction on mine (text is right-aligned there) */
.aw-brk--mine.aw-brk--this-call,
.aw-brk--mine.aw-brk--for-you { background: linear-gradient(to left, var(--gold-tint), transparent 70%); }
.aw-brk--mine.aw-brk--failed  { background: linear-gradient(to left, var(--red-tint), transparent 70%); }

/* aw-pdoc — paper document surface (task-528 r4): on the white room, paper
   carries what the SYSTEM made — answers, digests, drafts, composers —
   never witnessed speech. Sharp corners (Daniel's boards: paper is a box
   that carries content, not the page). */
.aw-pdoc {
  background: var(--sic-paper);
  padding: 19px 22px;
}
.aw-pdoc__eyebrow {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--sic-stone);
  margin: 0 0 9px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.aw-pdoc__body {
  font-family: var(--font-ui);
  font-size: 15px;
  margin: 0;
}

/* aw-btn — the pill action. Ancestor: live.css .pill */

.aw-btn {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--sic-ink);
  background: transparent;
  cursor: pointer;
  border: 1.5px dashed var(--edge-strong);
 
  padding: 8px 18px;
  /* anchor pills (:tag :a, R7) render identically to buttons */
  text-decoration: none;
  display: inline-block;
  transition: border-color var(--motion-sun), background var(--motion-sun);
}
.aw-btn:hover { border-color: var(--sic-ink); background: var(--ink-wash); }
.aw-btn:disabled { opacity: 0.4; cursor: default; }

/* committed/primary action — solid border, ink-forward */
.aw-btn--strong { border-style: solid; }

/* in-flight — breathes on Moon time until resolved */
.aw-btn--waiting {
  animation: aw-pulse var(--motion-moon) ease-in-out infinite;
  opacity: 1 !important;
  border-style: solid;
  color: var(--sic-stone);
}

/* gold attest accent (one-tap attest CTA base; full CTA component follows) */
.aw-btn--gold { border-color: rgba(205,163,73,0.65); }
.aw-btn--gold:hover { border-color: var(--sic-gold); background: var(--gold-tint); }

@keyframes aw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --danger: the review act that marks a change rejected (task-701.07 action
   bar — reject · suggest · accept). Red is the rejected colour on
   the pills and the frame; the btn carries the same. */
.aw-btn--danger { color: var(--sic-red); border-color: var(--sic-red); }
.aw-btn--danger:hover { border-color: var(--sic-red); background: var(--red-tint); }

/* aw-callout — dashed aside/prompt box. Ancestor: live.css dashed note frame */

.aw-callout {
  border: 1px dashed var(--rule);
  padding: 13px 19px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.55;
  color: var(--sic-ink);
}
.aw-callout--gold { border-color: rgba(205,163,73,0.5); background: var(--gold-tint); }
.aw-callout--stone { color: var(--sic-stone); }

/* aw-card — the paper document surface (task-528 r4): flat, sharp-cornered
   paper on the white room. Witnessed speech should use aw-brk / aw-th-exp
   instead — the tail variants are retired to flat paper and kept only so
   existing call sites render sanely until they migrate. */

.aw-card {
  background: var(--sic-paper);
  border: 1px solid transparent;
  padding: 15px 20px;
  transition: border-color var(--motion-sun), background var(--motion-sun);
}

/* retired tail geometry (migrate call sites to aw-brk) */
.aw-card--tail       { }
.aw-card--tail-mine  { border-color: rgba(205,163,73,0.65); }

/* interactive card — gold invitation on hover */
.aw-card--hot { cursor: pointer; }
.aw-card--hot:hover { border-color: var(--sic-gold); background: var(--gold-tint); }

.aw-card--selected {
  background: var(--gold-target);
  border-color: var(--sic-gold);
}
.aw-card--noted { border-left: 3px solid var(--sic-gold); }
.aw-card--error { border-color: var(--sic-red); }

/* aw-chip — small inline token: kinds, statuses, counts.
   Ancestors: live.css .lv-tile (selection), graph kind pills.
   "Color is data": kind/status modifiers are the only place chips get color. */

.aw-chip {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sic-stone);
  border: 1px solid var(--border);
 
  padding: 3px 10px;
  background: transparent;
}

/* selectable chip (filter rows) */
.aw-chip--select { cursor: pointer; border-style: dashed; color: var(--sic-ink); }
.aw-chip--select:hover { border-color: var(--sic-ink); }
.aw-chip--on { border-style: solid; border-color: var(--sic-ink); background: var(--ink-wash); }

/* kind colors — data, not decoration */
.aw-chip--gold { color: var(--sic-gold); border-color: rgba(205,163,73,0.5); }
.aw-chip--blue { color: var(--sic-blue); border-color: rgba(74,122,255,0.4); }
.aw-chip--red  { color: var(--sic-red);  border-color: rgba(214,69,69,0.4); }
.aw-chip--terr { color: var(--sic-terr); border-color: rgba(208,110,75,0.45); }

/* dead — a state that never happened (merged without review): dashed, faint */
.aw-chip--dead { border-style: dashed; color: var(--ink-faint); }

/* provider tile (intake) — ancestor live.css .lv-tile. Larger dashed box,
   UI face, normal case. Composes with --on for the solid selected state. */
.aw-chip--tile {
  font-family: var(--font-ui); font-size: 14px; color: var(--sic-ink);
  border: 1.5px dashed var(--edge-strong);
  padding: 14px 22px; cursor: pointer; background: transparent;
  text-transform: none; letter-spacing: normal;
}
.aw-chip--tile:hover { border-color: var(--sic-ink); }
.aw-chip--tile.aw-chip--on {
  border-style: solid; border-color: var(--sic-ink); background: var(--ink-wash);
}

/* live status — in-flight extraction (task-362). Pulsing dot before the
   label; @keyframes ported from live.css lv-pulse (opacity pulse). */
.aw-chip--live { color: var(--sic-gold); border-color: rgba(205,163,73,0.5); }
.aw-chip--live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sic-gold); margin-right: 6px;
  animation: aw-pulse 1.4s ease-in-out infinite;
}
@keyframes aw-pulse { 50% { opacity: 0.35; } }

/* --pill: the review inbox's one-word pill (task-701.07) — lowercase r5
   mono, tighter than a kind chip. Colour still rides the kind variants
   (--gold for you · --red rejected · --terr contested · --blue changes
   requested · --on accepted); --dashed is the not-yet stroke (minted,
   changed, a call still being read). Scoped to --pill: no existing chip
   changes. */
.aw-chip--pill {
  font-family: var(--font1-mono); font-size: 10.5px; line-height: 1.5;
  letter-spacing: 0.02em; text-transform: none;
  padding: 1px 7px;
}
.aw-chip--pill.aw-chip--dashed { border-style: dashed; }
.aw-chip--pill.aw-chip--on { color: var(--sic-ink); }

/* aw-chrome — the application chrome (task-701.07 AC#5/#6; Scarlet
   2026-09-24: "header nav, settings right drawer, left sidebar with links
   to sections"). ONE shell for every review surface: the r5 aw-header over
   a two-column body (sidebar | main at page size), plus the right settings
   drawer — the feed's July settings sidebar formalized (head band on the
   header's line, paper ground, [close], the account at its foot; Scarlet
   2026-07-27). Phone (≤ 800px, the header's own breakpoint): the sidebar
   folds into the header's ☰ sheet; the drawer is a full-height sheet.
   New selectors only; tokens only. 61px is the header's height (header.css:
   14+32+14+1) — the offset body{padding-top} is built against. */

/* the app header spans the window: the wordmark sits over the sidebar,
   the controls at the right edge (the page column stays in main) */
.aw-chrome .aw-header__inner { max-width: none; padding-left: 22px; padding-right: 26px; }
.aw-chrome__right { display: inline-flex; align-items: center; gap: 16px; }
.aw-chrome__right .aw-fd-scope__btn { white-space: nowrap; }

/* ---- the page nav in the header's center line ---- */
.aw-chrome__nav { color: var(--sic-stone); text-decoration: none; }
.aw-chrome__nav:hover { color: var(--sic-ink); }
.aw-chrome__nav--on {
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 4px;
}

/* ---- the body: sidebar | main ---- */
.aw-chrome__body {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
}
.aw-chrome__side {
  position: sticky; top: 61px; box-sizing: border-box;
  height: calc(100vh - 61px); overflow-y: auto;
  border-right: 1px solid var(--rule);
  padding: 24px 16px 40px 22px;
}
.aw-chrome__main {
  min-width: 0; box-sizing: content-box; max-width: var(--landing-max);
  padding: 0 var(--landing-gutter) 114px;
}

/* ---- the sidebar: grouped section links ---- */
.aw-chrome__sidebar { display: grid; gap: 20px; }
.aw-chrome__sidebar-title {
  font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone); margin: 0;
}
.aw-chrome__group-label {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone); margin: 0 0 6px;
}
.aw-chrome__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.aw-chrome__link {
  display: block; padding: 5px 8px; text-decoration: none;
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.35; color: var(--ink-soft);
  transition: background var(--motion-sun), color var(--motion-sun);
}
.aw-chrome__link:hover { color: var(--sic-ink); background: var(--ink-wash); }
/* selection speaks gold (task-528 r4) */
.aw-chrome__link--on {
  color: var(--sic-ink); font-weight: 600;
  background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--sic-gold);
}

/* ---- the settings drawer ---- */
.aw-chrome__scrim { position: fixed; inset: 0; z-index: 85; background: var(--scrim); }
.aw-chrome__drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100vw); box-sizing: border-box;
  background: var(--sic-paper); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.aw-chrome__grab { display: none; }
.aw-chrome__drawer-head {
  box-sizing: content-box; flex: none; min-height: 32px; padding: 14px 26px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule);
}
.aw-chrome__drawer-title { font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone); }
.aw-chrome__close {
  font-family: var(--font1-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--sic-stone); background: none; border: none; cursor: pointer; padding: 0;
}
.aw-chrome__close:hover { color: var(--sic-ink); }
.aw-chrome__drawer-body {
  flex: 1; overflow-y: auto; padding: 22px 26px 40px; display: grid; gap: 24px;
  align-content: start;
}
.aw-chrome__drawer-label {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone); margin: 0 0 8px;
}
.aw-chrome__drawer-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; padding: 9px 0; text-align: left; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--guide);
  font-family: var(--font-ui); font-size: 14px; color: var(--sic-ink);
}
.aw-chrome__drawer-item:hover { color: var(--sic-gold); }
.aw-chrome__drawer-note { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
/* a row that says and does nothing — the scope's current org, a list with
   nothing in it yet (task-701 decision 3a): the item's look, no hover */
.aw-chrome__drawer-item--static { cursor: default; }
.aw-chrome__drawer-item--static:hover { color: var(--sic-ink); }
.aw-chrome__drawer-foot {
  flex: none; border-top: 1px solid var(--rule);
  padding: 16px 26px max(14px, env(safe-area-inset-bottom));
  display: grid; gap: 8px; justify-items: start;
}

.aw-chrome__drawer-foot .aw-fd-account__role { justify-self: stretch; gap: 12px; }

/* the ☰ sheet carries the page nav, the scope, the sections, [settings] */
.aw-chrome__sheet { max-height: calc(100vh - 61px); overflow-y: auto; }
.aw-chrome__sheet-nav {
  display: flex; gap: 20px; font-family: var(--font1-mono); font-size: 12px;
}

/* ---- phone ---- */
@media (max-width: 800px) {
  .aw-chrome__body { grid-template-columns: minmax(0, 1fr); }
  .aw-chrome__side { display: none; }
  .aw-chrome__main { padding: 0 20px 80px; }
  .aw-chrome .aw-header__inner { padding-left: 20px; padding-right: 20px; }
  .aw-chrome__drawer { width: 100vw; border-left: none; }
  .aw-chrome__grab {
    display: block; flex: none; width: 36px; height: 3px;
    background: var(--mark); margin: 10px auto 0;
  }
}

/* aw-cite — quoted source material with provenance. Ancestor: live.css .prose-q */

.aw-cite {
  position: relative;
  border-left: 2px solid var(--mark);
  padding-left: 19px; margin: 0 0 1.2em;
}
.aw-cite::before, .aw-cite::after {
  content: ""; position: absolute; left: 0; width: 12px; height: 0;
  border-top: 2px solid var(--mark);
}
.aw-cite::before { top: 0; }
.aw-cite::after  { bottom: 0; }
.aw-cite__quote { font-family: var(--font2); font-style: italic; color: var(--ink-soft); }
.aw-cite__source {
  margin-top: 6px; font-family: var(--font-code); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--sic-stone);
}
.aw-cite--gold { border-left-color: var(--sic-gold); }

/* aw-code — inline code + block. Token: --font-code */

.aw-code {
  font-family: var(--font-code); font-size: 0.88em;
  background: var(--ink-wash); padding: 1px 5px;
}
.aw-code-block {
  font-family: var(--font-code); font-size: 13px; line-height: 1.6;
  background: var(--sic-paper); border: none;
  padding: 13px 19px; overflow-x: auto; white-space: pre;
}

/* aw-composer — the plain reply field (D6: free text IS the reconciliation;
   no labels, no verb bar). Ancestors: live.css .lv-paste textarea, .act links */

.aw-composer { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 100%; }
.aw-composer__anchor {
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--sic-stone);
  border: 1px solid var(--border); padding: 3px 10px;
}
.aw-composer__anchor-x {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-faint);
}
.aw-composer__anchor-x:hover { color: var(--sic-ink); }
.aw-composer textarea {
  width: 100%; min-height: 76px; resize: vertical;
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  color: var(--sic-ink); background: transparent;
  border: 1.5px dashed var(--edge-soft);
  padding: 12px;
}
.aw-composer textarea:focus { outline: none; border-color: var(--sic-ink); }
.aw-composer__send {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-gold);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-composer__send:hover { color: var(--sic-ink); }
.aw-composer__send:disabled { color: var(--sic-stone); cursor: default; }

/* --inline: the composer that opens IN PLACE on a row when suggest
   or reject is pressed (task-701.07) — a comment is required on both. A thin
   variant over the family: the textarea and send above carry it; this adds
   the act's label, a shorter field, and cancel beside send. */
.aw-composer.aw-composer--inline { gap: 8px; }
.aw-composer__label {
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-ink);
}
.aw-composer--reject .aw-composer__label { color: var(--sic-red); }
.aw-composer--inline textarea { min-height: 64px; font-size: 14.5px; }
.aw-composer--inline textarea[readonly] { color: var(--sic-stone); }
/* cancel · send — negative left, positive right; explicit row so no
   container's alignment ever reverses the pair (Scarlet, 2026-09-25) */
.aw-composer__row { display: flex; flex-direction: row; justify-content: flex-start; gap: 20px; align-items: baseline; }
.aw-composer__cancel {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
}
.aw-composer__cancel:hover { color: var(--sic-ink); }
.aw-composer__cancel:disabled { cursor: default; color: var(--ink-faint); }

/* aw-divider — group header in a lifecycle list (repo group, section break).
   Ancestor: live.css .lv-inbox-div. Gutter-aligned to aw-row's 10px padding. */

.aw-divider {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sic-stone);
  padding: 12px 10px 4px; border-top: 1px solid var(--border);
}
.aw-divider::before { content: "[ "; color: var(--mark); }
.aw-divider::after  { content: " ]"; color: var(--mark); }

/* THE FEED FAMILY — r5 closed-bracket identity (task-544; ratified comps
 * 2026-07-21-cross-surface-comps-r5-round1-task-535.html [F]/[F+]/[E] ·
 * 2026-07-22-composer-elision-comps-r51-task-516.html [C·s] ·
 * 2026-07-22-mobile-comps-r52-task-547.html [M-F]/[M-E]/[M-+];
 * doctrine: docs/design/sic-identity-program.md rulings 1–26).
 *
 * The identity (r5 ruling 11): speech is quoted OPEN — [ a call is held
 * CLOSED ]. A theatre expression is an open bracket (one-sided stroke); a
 * feed call is a closed bracket: a container of speech, an object that
 * arrived. Same stroke-state annotations — long-dash = not-yet, red = the
 * reading failed, nested [[ ]] = absorbed, gold = for-you — annotating a
 * distinct identity. Drawn strokes with LONG dashes (gradient strokes,
 * never CSS border-dots — those read as boxes); brackets HUG content;
 * titles wrap INSIDE; drawn OR typed, never both.
 *
 * Closed enclosures hold FLAT tints (r5.2 ruling 25) — the left-to-right
 * fade is the open bracket's gesture (ink bleeding from its one stroke);
 * a closed bracket holds its tint evenly.
 *
 * Geometry rides the r5 stroke tokens (--brk-stroke/--brk-dash/
 * --brk-dash-gap/--brk-arm/--brk-arm-inner, minted task-545); color jobs
 * stay on the sic tokens. The r10 message-composition grammar
 * (aw-fd-msg + aw-th-exp annotation) retired with this file's r5 rewrite. */

/* ---- the call object: the closed bracket, V3 drawn strokes.
   SET width (Scarlet, 2026-07-22): call objects hold one card width —
   they never shrink to their content; the brackets hug top/bottom only. ---- */
.aw-call {
  --call-ink: var(--sic-ink);
  position: relative;
  width: 660px;
  max-width: 100%;
  padding: 9px 20px;
}
.aw-call::before, .aw-call::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--brk-arm);
  background:
    linear-gradient(var(--call-ink), var(--call-ink)) 0 0 / var(--brk-stroke) 100%,
    linear-gradient(var(--call-ink), var(--call-ink)) 0 0 / var(--brk-arm) var(--brk-stroke),
    linear-gradient(var(--call-ink), var(--call-ink)) 0 100% / var(--brk-arm) var(--brk-stroke);
  background-repeat: no-repeat;
}
.aw-call::before { left: 0; }
.aw-call::after  { right: 0; transform: scaleX(-1); }

/* not-yet / failed: the vertical stroke goes long-dash (drawn rhythm:
   --brk-dash on, --brk-dash-gap off); the arms stay solid */
.aw-call--unread::before, .aw-call--unread::after,
.aw-call--failed::before, .aw-call--failed::after {
  background:
    repeating-linear-gradient(180deg,
      var(--call-ink) 0 var(--brk-dash),
      transparent var(--brk-dash) calc(var(--brk-dash) + var(--brk-dash-gap)))
      0 0 / var(--brk-stroke) 100%,
    linear-gradient(var(--call-ink), var(--call-ink)) 0 0 / var(--brk-arm) var(--brk-stroke),
    linear-gradient(var(--call-ink), var(--call-ink)) 0 100% / var(--brk-arm) var(--brk-stroke);
  background-repeat: no-repeat;
}
.aw-call--failed { --call-ink: var(--sic-red); background: var(--red-tint); }
.aw-call--foryou { --call-ink: var(--sic-gold); background: var(--gold-tint); }
.aw-call--mine   { margin-left: auto; text-align: right; }

/* absorbed = the true nested [[ ]]: outer pair breathes, inner pair rides */
.aw-call--absorbed { padding: 13px 26px; }
.aw-call__in2 { position: absolute; inset: 5px 6px; pointer-events: none; }
.aw-call__in2::before, .aw-call__in2::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--brk-arm-inner);
  background:
    linear-gradient(var(--call-ink), var(--call-ink)) 0 0 / var(--brk-stroke) 100%,
    linear-gradient(var(--call-ink), var(--call-ink)) 0 0 / var(--brk-arm-inner) var(--brk-stroke),
    linear-gradient(var(--call-ink), var(--call-ink)) 0 100% / var(--brk-arm-inner) var(--brk-stroke);
  background-repeat: no-repeat;
}
.aw-call__in2::before { left: 0; }
.aw-call__in2::after  { right: 0; transform: scaleX(-1); }

/* content inside the enclosure: mono title (wraps INSIDE — never overflows
   the bracket), serif peek, mono meta; delta content = name + derived text */
.aw-call__t    { font-family: var(--font1-mono); font-size: 13px; line-height: 1.5; color: var(--sic-ink); margin: 0; }
.aw-call__snip { font-family: var(--font2); font-size: 15.5px; margin: 6px 0 0; }
.aw-call__meta { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 7px 0 0; }
.aw-call__name { font-family: var(--font1-mono); font-size: 11.5px; color: var(--sic-stone); margin: 0 0 4px; }
.aw-call__speech { font-family: var(--font2); font-size: 17px; line-height: 1.5; margin: 0; }
.aw-call__speech--sys { font-family: var(--font-ui); font-size: 15px; }
.aw-call--failed .aw-call__meta { color: var(--sic-red); }
.aw-call .aw-fd-verbs { margin-top: 10px; }

/* hover doctrine on the door: the stroke goes gold + the faint gold wash
   (the card IS the action — perceptible, her walk 2026-07-23) */
.aw-call--actionable { cursor: pointer;
  transition: background var(--motion-sun); }
.aw-call--actionable:hover, .aw-call--actionable.is-hover,
.aw-call--actionable:focus-within, .aw-call--actionable.is-focus {
  --call-ink: var(--sic-gold); background: var(--gold-tint); outline: none;
}
.aw-call--foryou.aw-call--actionable:hover { --call-ink: var(--sic-ink); }
/* the stretched door link: plain click = the app, modified click = the
   browser (native new tab); inner links/buttons ride above it */
.aw-call__cover { position: absolute; inset: 0; z-index: 1; }
.aw-call a:not(.aw-call__cover), .aw-call button,
.aw-call .aw-fd-verbs { position: relative; z-index: 2; }

/* ---- the collapsed stub: one mono line, the stroke is the identity ----
   Witnessed stubs (reviewed runs, connectors, merged PRs) hang LEFT and
   carry no ×. Composer-born stubs are YOURS (r5.1 ruling 18 + her
   override): right-hung, stroke on the RIGHT, name LAST (`ask · you`);
   desktop hover turns the stroke into ×, click deletes; mobile swipe
   right-to-left turns the tick red with × and deletes. */
.aw-stub {
  position: relative;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  padding: 2px 0 2px 22px; border-left: 2px solid var(--rule);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left; background: none; border-top: none; border-right: none; border-bottom: none;
  display: block; width: 100%;
}
.aw-stub--actionable { cursor: pointer; }
.aw-stub--actionable:hover, .aw-stub--actionable.is-hover { color: var(--sic-ink); }
.aw-stub--mine {
  border-left: none; border-right: 2px solid var(--rule);
  padding: 2px 22px 2px 0; text-align: right;
}
.aw-stub__x {
  position: absolute; right: -3px; top: -1px; padding: 0 3px;
  border: none; background: none; cursor: pointer;
  font-family: var(--font1-mono); font-size: 14px; line-height: 1.2; color: var(--sic-ink);
  opacity: 0;
}
.aw-stub--deletable:hover { border-right-color: transparent; color: var(--sic-ink); }
.aw-stub--deletable:hover .aw-stub__x { opacity: 1; }
/* mobile swipe: the wrap clips, the × zone waits at the right edge */
.aw-swipe { position: relative; overflow: hidden; }
.aw-swipe__x {
  position: absolute; right: 0; top: 0; bottom: 0; width: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font1-mono); font-size: 14px; color: var(--sic-red);
  border-right: var(--brk-stroke) dashed var(--sic-red);
  opacity: 0; pointer-events: none;
}
.aw-swipe--active .aw-swipe__x { opacity: 1; }
.aw-swipe--active .aw-stub--mine { border-right-color: transparent; }
.aw-stub--swiping { transition: none; }

/* ---- verbs & CTAs (square affordances — r5 ruling 7) ---- */
.aw-fd-verbs { display: flex; gap: 10px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.aw-fd-cta { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--sic-ink); background: transparent; cursor: pointer;
  border: 1.5px dashed var(--edge-strong); padding: 5px 15px;
  transition: border-color var(--motion-sun), background var(--motion-sun);
  white-space: nowrap; }
.aw-fd-cta:hover, .aw-fd-cta.is-hover { border-color: var(--sic-ink); background: var(--ink-wash); }
.aw-fd-cta:focus-visible, .aw-fd-cta.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-fd-cta--possible { opacity: 0.75; }
.aw-fd-cta--live { border-style: solid; }

/* ---- the repo mark: plain text after the dot separator ---- */
.aw-fd-repo { font-family: var(--font1-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--sic-stone); text-decoration: none; opacity: 0.8;
  transition: opacity var(--motion-sun); }
.aw-fd-repo:hover, .aw-fd-repo.is-hover { opacity: 1; color: var(--sic-ink); }
.aw-fd-sep { color: var(--mark); }

/* ---- date groups: centered mono heads (both sides carry voice) ---- */
.aw-fd-datehead { font-family: var(--font1-mono); font-size: 11.5px;
  color: var(--sic-stone); margin: 8px 0; text-align: center; }
.aw-fd-datehead::before { content: "[ "; }
.aw-fd-datehead::after  { content: " ]"; }

/* ---- the room: thread rhythm + reply geometry (comp [F] fidelity:
   pane column 760, thread gap 24, reply elbow 1.5px var(--mark) 26x30,
   reply hangs 16px under its parent — r5.3 fidelity pass) ---- */
/* .aw-th-stage.aw-fd-room: the compound selector out-specifies the
   stage's 820 (bundle concat order is alphabetical — feed loads first) */
.aw-th-stage.aw-fd-room { display: flex; flex-direction: column; gap: 24px;
  max-width: 960px; }
.aw-fd-room > * { margin-top: 0; }
.aw-fd-room .aw-th-replies { margin-top: 0; padding-left: 36px; }
.aw-fd-room .aw-th-replies--mine { padding-left: 0; padding-right: 36px; }
.aw-fd-room .aw-th-reply { margin-top: 16px; }
.aw-fd-room .aw-th-reply::before {
  border-color: var(--mark); border-width: 1.5px;
  width: 26px; height: 30px; left: -36px; top: -8px; }
.aw-fd-room .aw-th-replies--mine > .aw-th-reply::before {
  left: auto; right: -36px; }
/* right-hung replies hug their edge, mirroring the elbow — but their
   CONTENT reads left inside the card (the theatre's mine-reply
   right-align is its position grammar, not the feed's; exposed when the
   set card width landed). Mine-owned cards keep names at the stroke. */
.aw-th-replies--mine .aw-call,
.aw-th-replies--mine .aw-pdoc { margin-left: auto; }
/* a reply-riding card shrinks by the reply step (660 − 36) so its OUTER
   edge aligns with its parent's edge — the theatre's reply geometry
   (Scarlet, 2026-07-26) */
.aw-fd-room .aw-th-reply .aw-call { width: 624px; }
.aw-th-page .aw-fd-room .aw-th-replies--mine .aw-th-reply { text-align: left; }
.aw-th-page .aw-fd-room .aw-th-reply .aw-call--mine { text-align: right; }
/* links inside an enclosure are mono meta ink — never browser blue
   (comp: `[the arc →]` rides the meta line) */
.aw-call a { color: var(--sic-ink); font-family: var(--font1-mono);
  text-decoration: none; }
.aw-call a:hover { color: var(--sic-gold); }
.aw-call__speech a { font-size: 11px; }
/* typed speech-bracket name/meta keep the comp's mono in the feed room;
   typed messages widen with the room (the 960 column) */
.aw-fd-room .aw-brk { max-width: 60ch; }
.aw-fd-room .aw-brk__name { font-family: var(--font1-mono); font-size: 11.5px; }
.aw-fd-room .aw-brk__meta { font-family: var(--font1-mono); }
/* the dock is FIXED to the viewport floor (Scarlet, 2026-07-23: sticky
   sat at the end of short boot-time content and jumped down on load) —
   the section reserves its height so the last item scrolls clear */
#view-feed .aw-th-composer-row {
  position: fixed; bottom: 0; left: 0; right: 0; margin: 0;
  padding: 10px max(calc((100vw - 960px) / 2), 30px)
           max(14px, env(safe-area-inset-bottom)); }
#view-feed { padding-bottom: 130px; }
#view-feed .aw-th-endsentinel { scroll-margin-bottom: 130px; }

/* ---- results paper (search verb): rows with the door into witnessed
   speech — src · serif snip · [open →] ---- */
.aw-results__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px; align-items: baseline; padding: 9px 0;
  border-top: 1px solid var(--rule); font-size: 14px; }
.aw-results__row:last-child { border-bottom: 1px solid var(--rule); }
.aw-results__src { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  white-space: nowrap; }
.aw-results__snip { font-family: var(--font2); font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-results__go { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-ink);
  white-space: nowrap; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; }
.aw-results__go:hover { color: var(--sic-gold); }

/* ---- the citation footnote inside an answer paper (ask verb) ---- */
.aw-fncard { border-top: 1px solid var(--rule); margin-top: 15px; padding-top: 11px;
  font-size: 12.5px; color: var(--sic-stone); font-family: var(--font-ui); }
.aw-fncard__head { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-ink); }
.aw-fncard blockquote { font-family: var(--font2); margin: 7px 0; padding-left: 12px;
  border-left: 2px solid var(--sic-ink); color: var(--sic-ink); font-size: 13.5px; }

/* ---- the + menu: paper offering the two doors (same two doors in the
   theatre — global acts; a call-scoped attach would be a third door) ---- */
.aw-fd-plusmenu { position: absolute; bottom: 100%; margin-bottom: 8px;
  left: max(calc((100vw - 960px) / 2), 30px);
  min-width: 340px; padding: 10px 0;
  background: var(--sic-paper); z-index: 7; }
.aw-fd-plusmenu__mi { display: flex; align-items: baseline; gap: 12px;
  width: 100%; padding: 9px 17px; text-align: left;
  font-family: var(--font1-mono); font-size: 12.5px; color: var(--sic-ink);
  background: none; border: none; cursor: pointer; }
.aw-fd-plusmenu__mi:hover, .aw-fd-plusmenu__mi.is-hover { background: var(--ink-wash); }
.aw-fd-plusmenu__mi small { font-family: var(--font-ui); font-size: 12px; color: var(--sic-stone); }

/* ---- the dock's standing line: pure indicator under the composer —
   narrow state first (bold), then sources, then github (branch-first).
   NO [clear]: un-narrowing = deleting the narrow stub (her override). ---- */
.aw-fd-dockline { font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-stone);
  margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-fd-dockline b { color: var(--sic-ink); font-weight: 400; }
.aw-fd-dockline__btn { font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-stone);
  background: none; border: none; cursor: pointer; padding: 0; }
.aw-fd-dockline__btn:hover, .aw-fd-dockline__btn.is-hover { color: var(--sic-ink); }

/* ---- the connect flow (the ruled 515 shape): three steps — pick &
   authorize (hears vs ingests stated per source) · storage its own step,
   never implied · start from a recent call ---- */
.aw-srcstep { margin-top: 22px; }
.aw-srcstep__lbl { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  margin: 0 0 10px; }
.aw-srcrow { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 14px; }
.aw-srcrow:last-child { border-bottom: 1px solid var(--rule); }
.aw-srcrow__nm { font-family: var(--font1-mono); font-size: 12.5px; color: var(--sic-ink);
  min-width: 15ch; }
.aw-srcrow__hears { color: var(--sic-stone); font-size: 12.5px; min-width: 0; }
.aw-srcrow__st { margin-left: auto; font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-stone); white-space: nowrap; }
.aw-srcrow__st--on { color: var(--sic-ink); }
.aw-srcrow--actionable { cursor: pointer; }
.aw-srcrow--actionable:hover, .aw-srcrow--actionable.is-hover { background: var(--ink-wash); }
.aw-srcrow--open { background: var(--ink-wash); }
/* the chosen row's panel guts render under it, indented into the flow */
.aw-srcpanel { padding: 12px 0 16px 15ch; }

/* ---- the upload slot: one file, processed in place, lands as a dashed
   call object ---- */
.aw-upslot { border: 1.5px dashed var(--mark); padding: 26px 22px; text-align: center;
  font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone);
  max-width: 52ch; line-height: 1.7; }
.aw-fd-upload__text, .aw-fd-upload__voices { display: block; width: 100%;
  box-sizing: border-box; font-family: var(--font2); font-size: 13px;
  line-height: 1.5; color: var(--sic-ink); background: transparent;
  border: 1px dashed var(--edge); padding: 10px 12px;
  margin-top: 8px; }
.aw-fd-upload__voices { font-family: var(--font-ui); }
.aw-fd-upload__text:focus-visible, .aw-fd-upload__voices:focus-visible {
  outline: 2px solid var(--sic-gold); outline-offset: 1px; }

/* ---- the empty room [E]: the room IS the identity — one dashed not-yet
   object where the first call lands, the serif brand line, the two doors ---- */
.aw-fd-empty { max-width: 640px; padding: 8px 0 20px; }
.aw-fd-empty__h { font-family: var(--font2); font-weight: 350; font-size: 19px;
  max-width: 40ch; margin: 34px 0 8px; }
.aw-fd-empty__p { font-family: var(--font-ui); font-size: 14px; color: var(--sic-stone);
  max-width: 46ch; margin: 0 0 28px; }
.aw-fd-empty__doors { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.aw-fd-empty__doors .aw-fd-cta { font-size: 14.5px; padding: 9px 19px; }

/* ---- month fold: backfilled history, collapsed by month (task-497 —
   disabled at MVP; renders when backfill lands) ---- */
.aw-fd-month { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  border: 1.5px dashed var(--edge-soft); padding: 10px 16px;
  color: var(--muted); font-size: 13px; font-family: var(--font-ui); cursor: pointer;
  background: none; width: 100%; text-align: left; }
.aw-fd-month:hover, .aw-fd-month.is-hover { border-color: var(--edge-strong); }
.aw-fd-month b { color: var(--sic-ink); }
.aw-fd-month .aw-fd-cta { margin-left: auto; }

/* ---- for-you badge: the aggregate at feed distance (scope rows) ---- */
.aw-fd-badge { display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--sic-gold); background: var(--gold-tint);
  padding: 1px 10px 1px 7px; font-size: 11.5px; font-family: var(--font-ui); }
.aw-fd-badge__mark { color: var(--sic-gold); font-family: var(--font2); font-weight: 700; }

/* ---- the scope popover: ORG then repos — navigation between rooms,
   never a filter within one (feed r10) ---- */
.aw-fd-scope { position: relative; }
.aw-fd-scope__btn { font-family: var(--font-code); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sic-stone);
  background: none; border: none; cursor: pointer; }
.aw-fd-scope__btn b { color: var(--sic-ink); font-weight: 700; }
.aw-fd-scope__btn:hover, .aw-fd-scope__btn.is-hover { color: var(--sic-ink); }
.aw-fd-scope__pop { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 10px); z-index: 9; min-width: 270px; padding: 12px 14px;
  background: var(--sic-paper); border: 1px solid var(--rule);
  box-shadow: 0 2px 14px var(--ink-wash); display: grid; gap: 8px; text-align: left; }
.aw-fd-scope__org { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sic-stone); }
.aw-fd-scope__org b { color: var(--sic-ink); font-weight: 700; }
.aw-fd-scope__repo { display: flex; justify-content: space-between; font-size: 12.5px;
  font-family: var(--font-ui); color: var(--ink-soft); background: none; border: none;
  cursor: pointer; padding: 1px 0; }
.aw-fd-scope__repo:hover, .aw-fd-scope__repo.is-hover { color: var(--sic-ink); }
.aw-fd-scope__repo--all { font-weight: 650; color: var(--sic-ink); }
.aw-fd-scope__n { font-family: var(--font-code); font-size: 10.5px; color: var(--ink-faint); }
.aw-fd-scope__sep { border-top: 1px solid var(--guide); }

/* ---- the account menu: the deployed ls-acct recipe as a component ---- */
.aw-fd-account { position: relative; z-index: 2; }
/* r5 chrome ruling (task-545): mono name + ▾, lowercase — the uppercase
   eyebrow treatment retired with the details/summary default */
.aw-fd-account__btn { font-family: var(--font1-mono); font-size: 12px;
  letter-spacing: 0.05em; text-transform: none; color: var(--sic-stone);
  background: none; border: none; cursor: pointer; }
.aw-fd-account__btn:hover { color: var(--sic-ink); }
.aw-fd-account__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 9;
  min-width: 240px; padding: 12px 14px; background: var(--sic-paper);
  border: 1px solid var(--rule); box-shadow: 0 2px 14px var(--ink-wash);
  display: grid; gap: 10px; text-align: left; }
.aw-fd-account__email { color: var(--sic-stone); font-size: 11px;
  font-family: var(--font-code); word-break: break-all; }
.aw-fd-account__role { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--muted); font-family: var(--font-ui); }
.aw-fd-account__item { font-family: var(--font-code); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sic-ink);
  text-decoration: none; background: none; border: none; cursor: pointer;
  text-align: left; padding: 0; }
.aw-fd-account__item:hover { color: var(--sic-gold); }
.aw-fd-account__sep { border-top: 1px solid var(--guide); }

/* ---- the sign-in gate: where a no-relation link lands ---- */
.aw-fd-gate { text-align: center; padding: 64px 24px; max-width: 520px; margin: 0 auto; }
.aw-fd-gate__mark { font-family: var(--font-code); font-size: 26px; font-weight: 700;
  color: var(--sic-gold); }
.aw-fd-gate__h { font-family: var(--font2); font-weight: 600; font-size: 21px;
  margin: 14px 0 8px; text-wrap: balance; }
.aw-fd-gate__p { font-family: var(--font-ui); color: var(--ink-soft); font-size: 14px;
  max-width: 44ch; margin: 0 auto 20px; }
.aw-fd-gate__note { font-size: 12px; color: var(--ink-faint); margin-top: 14px;
  font-family: var(--font-ui); }

/* ---- mobile: geometry only — the identity has no mobile dialect
   (r5.2). VA center channel: ownership reserve = 2 steps (48px, replies
   keep their parent's width: one step in, one reserved); replies 1:1
   (24px). One drawer grammar rises from the floor for every overlay. ---- */
@media (max-width: 720px) {
  .aw-call { padding: 7px 16px; max-width: 100%; }
  .aw-call--absorbed { padding: 11px 22px; }
  .aw-call__t { font-size: 12px; }
  .aw-call__snip { font-size: 14px; }
  .aw-call__meta { font-size: 10px; }
  .aw-call__speech { font-size: 16px; }
  .aw-call__speech--sys { font-size: 14px; }
  .aw-stub { font-size: 10px; padding-left: 16px; }
  .aw-stub--mine { padding: 2px 16px 2px 0; }

  /* VA geometry: theirs end 2 steps short of the right edge; yours start
     2 steps in from the left; replies step 1:1 */
  .aw-fd-room > .aw-call:not(.aw-call--mine),
  .aw-fd-room > div > .aw-call:not(.aw-call--mine),
  .aw-fd-room > .aw-brk:not(.aw-brk--mine),
  .aw-fd-room .aw-th-msg:not(.aw-th-msg--mine) { margin-right: 48px; }
  .aw-fd-room > .aw-call--mine,
  .aw-fd-room > .aw-brk--mine,
  .aw-fd-room .aw-th-msg--mine { margin-left: 48px; }
  .aw-fd-room .aw-th-replies { padding-left: 24px; }
  .aw-fd-room .aw-th-replies--mine { padding-left: 0; padding-right: 24px; }

  /* the + menu rises as the drawer (one grammar from the floor) */
  .aw-fd-plusmenu { position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    min-width: 0; z-index: 30; border: none; border-top: 2px solid var(--sic-ink);
    padding: 16px 0 20px; }
  .aw-fd-plusmenu::before { content: ""; display: block; width: 36px; height: 3px;
    background: var(--mark); margin: 0 auto 14px; }
  .aw-fd-empty__doors { flex-direction: column; gap: 14px; }
  .aw-fd-empty__doors .aw-call { width: 100%; max-width: 100%; }
  .aw-srcrow { flex-wrap: wrap; }
  .aw-srcrow__hears { flex-basis: 100%; order: 3; }
}

/* ---- width-gated forms: [E]'s doors are a cta row on desktop and
   closed-bracket door objects on mobile (r5.2 ruling 25) ---- */
.aw-only-mobile { display: none; }
@media (max-width: 720px) {
  .aw-only-mobile { display: flex; }
  .aw-only-desktop { display: none; }
}
/* the mono '+' renders via sans until the Avenue subset lands its fixed
   glyph everywhere (r5 ruling 16 — the font asset fix rode task-545 for
   live+sales; this guard covers any straggler surface) */
.aw-glyph-sans { font-family: var(--font-ui); }

/* ---- the drawer sheet (mobile overlay grammar: paper, grab handle,
   over the dimmed room — rail, + menu, MCP, connect flow all share it) ---- */
.aw-sheet__grab { display: none; }
@media (max-width: 720px) {
  .aw-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-top: 2px solid var(--sic-ink); background: var(--sic-paper);
    padding: 16px 16px 20px; max-height: 82vh; overflow-y: auto; }
  .aw-sheet__grab { display: block; width: 36px; height: 3px;
    background: var(--mark); margin: 0 auto 14px; }
}

/* ======================================================================
 * THE REVIEW INBOX (task-701.07) — the feed as an inbox of positions,
 * grouped by call; comp surface /live/styleguide (ruled 9/22: full width,
 * no left/right, the r10 wireframes in the r5 language). The card itself is
 * aw-row--pos (row.css); the one-word pill is aw-chip--pill (chip.css); the
 * reject act is aw-btn--danger (btn.css); the in-place composer is
 * aw-composer--inline (composer.css). Everything below is new selectors —
 * the July feed (aw-call, aw-stub, aw-fd-*) is untouched.
 * ====================================================================== */

/* the inbox column: a size container, so a row answers to the column it
   sits in (the phone layout comes from the column's width — a 390px frame
   on the styleguide renders what a phone renders) */
.aw-inbox {
  container: aw-inbox / inline-size;
  display: flex; flex-direction: column; gap: var(--feed-row-gap); width: 100%;
}

/* ---- the pill line: pills in the ruled order, then plain text. Inline
   flow, not flex: a rejection's why is prose and wraps as prose ---- */
.aw-pills {
  font-family: var(--font1-mono); font-size: 11px; line-height: 2; color: var(--sic-stone);
}
.aw-pills > * { margin-right: 7px; }
.aw-pills > :last-child { margin-right: 0; }
.aw-pills__why { color: var(--sic-ink); }
/* the review word's people, a phrase after the whole pill row ("rejected by
   <name>: <why>" — her feed walk, 2026-09-27: every pill before the text) */
.aw-pills__by { color: var(--sic-ink); }
.aw-pills__reads { margin-left: 5px; }

/* ---- the diff: + and − statements; the quote is witnessed speech (serif),
   the speaker and place are mono meta; the place is the theatre link ---- */
.aw-diff { display: flex; flex-direction: column; gap: 7px; }
.aw-diff__line {
  position: relative; padding-left: 20px;
  font-family: var(--font2); font-size: 15px; line-height: 1.5; color: var(--sic-ink);
}
.aw-diff__sign {
  position: absolute; left: 0; top: 0;
  font-family: var(--font1-mono); font-size: 13px; line-height: 1.75;
}
.aw-diff__line--rem { color: var(--sic-stone); }
.aw-diff__line--rem .aw-diff__sign { color: var(--sic-red); }
.aw-diff__who {
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  margin-left: 4px; white-space: nowrap;
}
.aw-diff__loc {
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px;
  white-space: nowrap;
}
.aw-diff__loc:hover { color: var(--sic-gold); }
.aw-diff__more {
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); padding-left: 20px;
}
/* "and N more" opens the rest in place (Scarlet, 2026-09-28: "agree,
   expand in place"): a real text button that rides above the card's door,
   so a click anywhere else on the card still opens the position page */
.aw-diff__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-left: 20px;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-diff__foot .aw-diff__more {
  position: relative; z-index: 2; padding: 0;
  background: none; border: 0; cursor: pointer;
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-diff__foot .aw-diff__more:hover { color: var(--sic-ink); }
.aw-diff__foot .aw-diff__more:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
/* past what the row carries, the open card's last line links the page */
.aw-diff__page {
  position: relative; z-index: 2;
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-diff__page:hover { color: var(--sic-gold); }
.aw-diff__page:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }

/* ---- the consequence line ---- */
.aw-cons {
  font-family: var(--font-ui); font-size: 13px; color: var(--sic-stone); margin: 0;
}
.aw-cons b { color: var(--sic-ink); font-weight: 600; }

/* ---- the action bar: reject · suggest · accept — the row's only
   buttons; the act taken stays marked (aria-pressed), its words in its act
   row under the diff — the status span is "sending..." and the not-chosen
   quiet bar only ---- */
.aw-actbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 3px; }
.aw-actbar__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.aw-actbar .aw-btn { font-size: 13px; padding: 5px 14px; }
.aw-actbar .aw-btn[aria-pressed="true"] { border-style: solid; background: var(--ink-wash); }
.aw-actbar .aw-btn--danger[aria-pressed="true"] { background: var(--red-tint); }
/* the current act, once it cannot be repeated (accept), stays highlighted —
   disabled but never faded (Scarlet, 2026-09-25) */
.aw-actbar .aw-btn[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }
/* accept is already solid (--strong), so solid + a 5% wash left the current
   accept all but indistinguishable from an idle one: the current accept
   gets an ink edge, doubled, in both themes (tokens only) */
.aw-actbar .aw-btn--strong[aria-pressed="true"] {
  border-color: var(--sic-ink); box-shadow: inset 0 0 0 1px var(--sic-ink);
}
.aw-actbar__status { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-actbar--rejected .aw-actbar__status { color: var(--sic-red); }
.aw-actbar--accepted .aw-actbar__status { color: var(--sic-ink); }

/* ---- the meeting header: the call as group header — the name alone on
   its first line; then when · stream · people · its state or counts · its
   controls (Scarlet's feed walk, 2026-09-27: "maybe they should always be
   on the next line? Date first") ---- */
.aw-mh {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 16px 0 8px; border-bottom: 1px solid var(--rule);
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-mh__name {
  flex-basis: 100%;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--sic-ink);
}
/* the name as a link to the call itself (its theatre) — the name's own ink,
   underlined only under the pointer or the keyboard */
.aw-mh__title { color: inherit; text-decoration: none; }
.aw-mh__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.aw-mh__title:focus-visible, .aw-mh__chev:focus-visible {
  outline: 2px solid var(--sic-gold); outline-offset: 1px;
}
/* the call's own fold: a chevron before the name — ▸ folded, ▾ open */
.aw-mh__chev {
  font: inherit; color: var(--sic-stone); background: none; border: 0;
  padding: 0 6px 0 0; cursor: pointer;
}
.aw-mh__chev:hover { color: var(--sic-ink); }
.aw-mh__ctl { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.aw-mh .aw-fd-cta { font-size: 12px; padding: 3px 11px; }
/* the header's lines (701.26), each on its own row under the header: the
   card's note is prose in the UI face (the card's words carry '…', which
   the mono face draws as one dot); the press's status is mono, like the
   action bar's; loud = something a person has to fix or a refusal. A
   refusal can name a long path with no space in it: the line breaks
   anywhere rather than widen the page on a phone */
.aw-mh__note, .aw-mh__status, .aw-mh__slot { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
.aw-mh__note { font-family: var(--font-ui); font-size: 13px; color: var(--sic-stone); }
.aw-mh__status { color: var(--sic-stone); }
.aw-mh__note--loud, .aw-mh__status--loud { color: var(--sic-red); }

/* ---- one call on the grouped feed: comp B (Scarlet, 2026-09-28: "let's
   try mock b for separation … yea please on gutter date"). A heavy rule
   above each call and more space above it than between its rows; at
   desktop the call's date sits in a left gutter beside its header, the
   header's second line reads the stream then the people, and the rows
   align past the gutter. The header's markup is unchanged: this wrapper
   lays it out ---- */
.aw-inbox__call {
  display: flex; flex-direction: column; gap: var(--feed-row-gap);
  margin-top: var(--feed-call-space);
  padding-left: var(--feed-gutter);
  border-top: var(--brk-stroke) solid var(--sic-ink);
}
.aw-inbox__call > .aw-mh {
  position: relative; padding-top: var(--feed-date-top); border-bottom: 0;
}
.aw-inbox__call > .aw-mh > .aw-mh__when {
  position: absolute; top: var(--feed-date-top); left: calc(-1 * var(--feed-gutter));
  width: calc(var(--feed-gutter) - var(--feed-gutter-gap));
  font-size: var(--feed-date-size); line-height: var(--feed-date-leading); color: var(--sic-ink);
}
/* the gutter's date: the day on its first line, the time under it, no dot */
.aw-inbox__call > .aw-mh > .aw-mh__when .aw-mh__wsep { display: none; }
.aw-inbox__call > .aw-mh > .aw-mh__when .aw-mh__time { display: block; }

/* ---- the inbox with nothing to show: said in the feed's bracket voice ---- */
.aw-inbox-state { text-align: center; padding: 34px 16px; }
.aw-inbox-state__word {
  font-family: var(--font1-mono); font-size: 12.5px; color: var(--sic-stone); margin: 0;
}
.aw-inbox-state__word::before { content: "[ "; }
.aw-inbox-state__word::after  { content: " ]"; }
.aw-inbox-state__note { font-family: var(--font-ui); font-size: 13px; color: var(--sic-stone); margin: 8px 0 0; }
.aw-inbox-state--loading .aw-inbox-state__word { animation: aw-pulse var(--motion-moon) ease-in-out infinite; }
.aw-inbox-state--error .aw-inbox-state__word { color: var(--sic-red); }
.aw-inbox-state .aw-fd-cta { margin-top: 14px; }

/* ---- the inbox's toolbar (task-701.08): stream ▾ · group by · unread |
   relevant | all · sort — mono text buttons, the current one pressed; the
   stream popover is the aw-fd-scope grammar, hung from the left ---- */
.aw-inbox-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
  padding: 2px 0 10px; border-bottom: 1px solid var(--rule);
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-inbox-bar__ctl { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aw-inbox-bar__opt {
  font: inherit; color: var(--sic-stone); background: none; border: 0; padding: 0; cursor: pointer;
}
.aw-inbox-bar__opt:hover { color: var(--sic-ink); }
.aw-inbox-bar__opt--on { color: var(--sic-ink); text-decoration: underline; text-underline-offset: 3px; }
.aw-inbox-bar__opt:focus-visible, .aw-inbox-bar .aw-fd-scope__btn:focus-visible {
  outline: 2px solid var(--sic-gold); outline-offset: 1px;
}
.aw-inbox-bar .aw-fd-scope__btn { padding: 0; letter-spacing: 0.08em; }
/* one line at desktop (Scarlet, 2026-09-28: 'collapse calls' wrapped under
   the sort): the stream's label is what gives — it clips with an ellipsis
   (whole in the button's title), the ▾ stays; the controls never shrink.
   Below that width the bar wraps, as it always has */
.aw-inbox-bar__stream { min-width: 0; }
.aw-inbox-bar .aw-fd-scope__btn {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  max-width: 100%; min-width: 0; white-space: nowrap;
}
.aw-inbox-bar__streamlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) {
  .aw-inbox-bar { flex-wrap: nowrap; }
  .aw-inbox-bar__ctl { flex: none; }
  .aw-inbox-bar__stream { flex: 0 1 auto; }
}
.aw-inbox-bar .aw-fd-scope__pop { left: 0; transform: none; }
/* the listing's counts could not be read (task-701 Q15): one plain line
   under the sort control; the rows carry no reads line */
.aw-inbox-bar__note { font-family: var(--font-ui); font-size: 12px; color: var(--sic-stone); margin: 6px 0 0; }
/* the foot of a paged listing: its one door */
.aw-inbox__more { align-self: center; }

/* ---- phone: geometry only, from the column's width ---- */
@container aw-inbox (max-width: 520px) {
  .aw-diff__line { font-size: 14px; }
  .aw-diff__who { display: block; margin-left: 0; white-space: normal; }
  .aw-actbar__acts { width: 100%; }
  .aw-actbar .aw-btn { flex: 1 1 auto; text-align: center; padding: 7px 10px; }
  .aw-mh__ctl { margin-left: 0; width: 100%; }
  .aw-inbox-bar { gap: 6px 14px; }
}

/* ---- phone: comp B's gutter folds away, and the date leads the header's
   second line again (Scarlet, 2026-09-28) ---- */
@container aw-inbox (max-width: 600px) {
  .aw-inbox__call { padding-left: 0; }
  .aw-inbox__call > .aw-mh > .aw-mh__when {
    position: static; width: auto; font-size: inherit; line-height: inherit; color: inherit;
  }
  .aw-inbox__call > .aw-mh > .aw-mh__when .aw-mh__wsep { display: inline; }
  .aw-inbox__call > .aw-mh > .aw-mh__when .aw-mh__time { display: inline; }
}

/* aw-field — labeled input. Ancestor: live.css .lv-field */

.aw-field { display: block; max-width: 520px; }
.aw-field__label {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sic-stone); margin-bottom: 6px;
}
.aw-field input {
  width: 100%; background: transparent; color: var(--sic-ink);
  border: none; border-bottom: 1.5px dashed var(--edge);
  font-family: var(--font2); font-size: 16px; padding: 6px 2px; outline: none;
  transition: border-bottom-color var(--motion-sun);
}
.aw-field input:focus { border-bottom-color: var(--sic-ink); }
.aw-field--error input { border-bottom-color: var(--sic-red); }
.aw-field__hint { margin-top: 5px; font-size: 12px; color: var(--sic-stone); }
.aw-field--error .aw-field__hint { color: var(--sic-red); }

/* --area — multi-line textarea (paste transcripts). Ancestor: live.css
   .lv-paste textarea. */
.aw-field--area textarea {
  width: 100%; background: transparent; color: var(--sic-ink);
  border: 1.5px dashed var(--edge);
  font-family: var(--font2); font-size: 15px; line-height: 1.5;
  padding: 10px; outline: none; resize: vertical;
  transition: border-color var(--motion-sun);
}
.aw-field--area textarea:focus { border-color: var(--sic-ink); }

/* --select — native select styled as a dashed underline field.
   Ancestor: live.css .lv-dest select. */
.aw-field__selectwrap { position: relative; display: block; }
.aw-field__selectwrap::after {
  content: "▾"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-code); font-size: 10px; color: var(--sic-stone);
  pointer-events: none;
}
.aw-field--select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  background: transparent; color: var(--sic-ink);
  border: none; border-bottom: 1.5px dashed var(--edge);
  font-family: var(--font2); font-size: 16px; padding: 6px 22px 6px 2px;
  outline: none; cursor: pointer;
  transition: border-bottom-color var(--motion-sun);
}
.aw-field--select select:focus { border-bottom-color: var(--sic-ink); }

/* --check — checkbox with a mono label. Ancestor: live.css .lv-engine. */
.aw-field--check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--sic-stone);
}
.aw-field--check:hover { color: var(--sic-ink); }
/* reset the base .aw-field input rule (full-width dashed text input) for the box */
.aw-field--check input {
  width: auto; border: none; accent-color: var(--sic-gold); margin: 0;
}

/* aw-footer — page close. Ancestor: live.css footer-left status pattern.
   Numerology: XXI The World (realization) — 21px padding closes the page. */

.aw-footer {
  border-top: 1px solid var(--rule);
  background: var(--room);
  padding: 21px 0;
}
.aw-footer--sticky { position: sticky; bottom: 0; z-index: 60; }

/* inner column matches aw-header__inner / aw-page (960 content-box) */
.aw-footer__inner {
  box-sizing: content-box; max-width: var(--landing-max); margin: 0 auto;
  padding: 0 var(--landing-gutter);
  display: flex; align-items: center; gap: 21px; flex-wrap: wrap;
}

.aw-footer__status { display: grid; gap: 6px; margin-right: auto; max-width: 560px; }
.aw-footer__label {
  font-family: var(--font-code); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sic-stone);
}
.aw-footer__body { font-family: var(--font2); font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.aw-footer__links {
  display: flex; gap: 21px;
  font-family: var(--font-code); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.aw-footer__links a {
  color: var(--sic-stone); text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-footer__links a:hover { color: var(--sic-ink); }

/* aw-header — the brand bar. Ancestor: live.css/chrome.css .ls-brand.
   Static by default (composable/styleguide-safe); --fixed pins it. */

.aw-header {
  background: var(--room);
  border-bottom: 1px solid var(--rule);
}
.aw-header--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 80; }

.aw-header__inner {
  box-sizing: content-box; max-width: var(--landing-max); margin: 0 auto;
  padding: 14px var(--landing-gutter);
  /* ancestor geometry (.ls-brand-inner): total height 14+32+14+1 = 61px,
     the offset live.css body{padding-top:61px} was built against */
  min-height: 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.aw-header__wordmark {
  justify-self: start; text-decoration: none; border: none;
  font-family: var(--font1-mono);
  font-size: 18px; letter-spacing: 0.01em;
  line-height: 1; color: var(--sic-ink);
}
.aw-header__wordmark sup {
  vertical-align: baseline; font-size: 0.62em; position: relative;
  top: -0.9em; margin-left: 1px;
}
.aw-header__center {
  justify-self: center; display: flex; gap: 24px;
  /* r5 comp [C]: the center line is lowercase Avenue Mono, not the
     uppercase eyebrow (task-545 visual walk) */
  font-family: var(--font1-mono); font-size: 12px; line-height: 1;
  letter-spacing: 0.05em; color: var(--sic-stone);
  max-width: min(34vw, 460px); overflow: hidden; white-space: nowrap;
  padding: 0 18px;
}
/* the center is a flex row, so text-overflow must clip on the CHILDREN —
   a flex container's own ellipsis rule never fires (task-485: the theater
   meta line was running under the pass dots) */
.aw-header__center > * {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-header__right {
  justify-self: end; line-height: 1;
  font-family: var(--font-code); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sic-stone);
}

/* r5 chrome (task-545, comp [C]): bracketed mono tags — [settings],
   [ read-only ], the account name — lowercase Avenue Mono, never the
   uppercase eyebrow treatment */
.aw-header__tag {
  font-family: var(--font1-mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: none; color: var(--sic-stone);
  background: none; border: none; cursor: pointer; padding: 0;
}
span.aw-header__tag { cursor: default; }
button.aw-header__tag:hover { color: var(--sic-ink); }

/* outside-click scrim for the account paper box / mobile sheet — lives
   inside the header's stacking context, under the popovers */
.aw-header__scrim { position: fixed; inset: 0; z-index: 1; }

/* mobile: ☰ replaces the desktop tags; the paper sheet folds the center
   line and the menu under it (comp [C], fourth life) */
.aw-header__burger { display: none; font-size: 15px; }
.aw-header__sheet {
  /* absolute within the fixed header — anchors under whatever height the
     bar resolves to at this breakpoint */
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--sic-paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 14px var(--ink-wash);
  padding: 18px 20px; display: grid; gap: 14px;
  text-transform: none; letter-spacing: 0.05em; text-align: left;
}
.aw-header__sheet-line {
  font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone);
}
.aw-header__sheet .aw-header__tag { text-align: left; width: fit-content; }

@media (max-width: 800px) {
  .aw-header__inner { padding: 12px 20px; grid-template-columns: 1fr auto; }
  .aw-header__center { display: none; }
  /* descendant selector so the hide outranks single-class display rules
     that load later (a later single-class rule tied and won by order) */
  .aw-header__inner .aw-header__desktop { display: none; }
  .aw-header__burger { display: inline-block; }
}

/* aw-label — eyebrow/annotation text. Ancestor: live.css .eyebrow */

.aw-label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sic-stone);
}
.aw-label--mono { font-family: var(--font-code); font-size: 10.5px; }
.aw-label--gold { color: var(--sic-gold); }
.aw-label--red  { color: var(--sic-red); }
.aw-label--ink  { color: var(--sic-ink); }

/* separator dot between label segments (eyebrow rows) */
.aw-label__sep { color: var(--mark); padding: 0 4px; }

/* aw-lane — conversation swimlane: message column + annotation gutter.
   Ancestors: live.css .lv-row / .lv-msgcol / .exp-notes */

.aw-lane { display: flex; gap: 26px; margin: 22px 0; align-items: flex-start; }
.aw-lane--mine { flex-direction: row-reverse; }

.aw-lane__main {
  flex: 0 1 34rem; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.aw-lane--mine .aw-lane__main { align-items: flex-end; }

.aw-lane__notes { flex: 1 1 0; min-width: 0; padding-top: 4px; }
.aw-lane__notes:empty { display: none; }
.aw-lane--mine .aw-lane__notes { text-align: right; }
.aw-lane__note {
  border-top: 1px dashed var(--rule);
  padding: 7px 0 0; margin: 0 0 10px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}

/* aw-msg — conversation message: aw-card with tail + speaker attribution.
   Ancestors: live.css .lv-row / .exp-card / .exp-who */

.aw-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 34rem; }
.aw-msg--mine { align-items: flex-end; }
.aw-msg__who {
  margin-top: 7px;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
}
.aw-msg__who b { font-weight: 600; }

/* ======================================================================
 * A NARRATION AS A SENTENCE DIFF (task-701.39) — the inbox row, the
 * position page and the narrative page draw a narration one sentence per
 * line: kept sentences plain, added ones marked + and highlighted, removed
 * ones gray and struck, in place (Scarlet, 2026-09-28: "we want to support
 * the sentence-by-sentence diff format, not paragraph"). The + is the
 * line's ::before, so every diff drawn with .aw-narr__line.is-add carries
 * it — ui.narration/diff-lines and position-page/narration-compare alike.
 * Tokens only (the literal gate).
 * ====================================================================== */

.aw-narr__line.is-add::before {
  content: "+";
  display: inline-block; width: 1.1em; margin-left: -1.1em;
  font-family: var(--font1-mono); font-weight: 600; color: var(--sic-gold);
}
.aw-sdiff,
.aw-np__cmp--diff .aw-narr { padding-left: 1.1em; }
/* a plain narration marks nothing, so it keeps no gutter for the + */
.aw-narration.is-plain .aw-sdiff,
.aw-row__narr.is-plain .aw-sdiff { padding-left: 0; }

/* a position's own narration: the lines, then the quiet note a plain one
   carries ("narrated since this change") */
.aw-narration { display: flex; flex-direction: column; gap: 6px; }
.aw-narration__note { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }

/* the inbox row: three lines under the frame, smaller than the frame, the
   links riding above the card's door */
.aw-row__narr { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 0; }
.aw-row__narr .aw-narr { gap: 2px; }
.aw-row__narr .aw-narr__line { font-size: 13px; line-height: 1.5; }
.aw-row__narr a { position: relative; z-index: 2; }
.aw-row__narr-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-row__narr-more { color: var(--sic-stone); text-decoration: underline; text-underline-offset: 3px; }
.aw-row__narr-more:hover { color: var(--sic-gold); }
.aw-row__narr-more:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }

/* ======================================================================
 * THE NARRATIVE PAGE · THE STRATUM PAGE, WIRED (task-701.13) — the states a
 * real history read has that 701.11's comp (position.css) did not draw:
 * a generation whose narration could not be read, the line that says why a
 * generation has no triggering positions, the generation a locator
 * addressed, the 'read further back' door, and a narration reference that
 * names no page (a statement, an actor). Tokens only (the literal gate).
 * ====================================================================== */

/* a generation whose narration is unavailable: the frame goes dashed, the
   reason reads in the failure colour */
.aw-np-gen.is-unavailable { border-style: dashed; }
.aw-np-gen__note.is-unavailable { color: var(--sic-red); }

/* the generation the locator addressed (…@gN) */
.aw-np-gen.is-focus { border-color: var(--sic-gold); }

/* why no position triggered it — quiet, and set apart from the cards */
.aw-np-gen__note.is-none-in-branch,
.aw-np-gen__note.is-run-unrecorded,
.aw-np-gen__note.is-partial { font-style: italic; }

/* older generations: the window line and its door */
.aw-np__window { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* a reference with no page of its own is not a link */
.aw-np__ref:not([href]) { text-decoration-style: dotted; cursor: help; }
.aw-np__ref:not([href]):hover { color: inherit; }

/* 701.23's summary quotes the first added sentence whole and leaves the
   width to the consumer: a closed generation clamps it to three lines (the
   whole sentence is in the comparison once it opens) */
.aw-np-gen:not(.is-open) .aw-np-gen__what {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* aw-notification — outbound notification card (task-445). The channel
   surface the product reaches an attendee through: email, or a text message.
   One of the few components where a literal card frame IS the depicted
   product surface. --sms shifts the body into the message-bubble register. */

.aw-notification {
  border: 1px solid var(--border);
  overflow: hidden; background: var(--card);
  max-width: 420px;
}
.aw-notification__bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--ink-wash); border-bottom: 1px solid var(--guide);
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sic-stone);
}
.aw-notification__body {
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font2); font-size: 14px; color: var(--ink-soft);
}
.aw-notification__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: var(--font-ui); font-size: 12px;
}
.aw-notification__from { color: var(--sic-stone); }
.aw-notification__to { font-weight: 600; color: var(--sic-ink); }
.aw-notification__lead { color: var(--sic-ink); }

.aw-notification__reply {
  align-self: flex-start; cursor: pointer;
  background: none; border: 1px dashed var(--edge-strong);
  padding: 5px 13px;
  font-family: var(--font-ui); font-size: 13px; color: var(--sic-ink);
  transition: border-color var(--motion-sun), background var(--motion-sun);
}
.aw-notification__reply:hover { background: var(--gold-tint); border-color: var(--sic-gold); }

/* --sms: the text-message register — UI face, bubble-shaped body copy */
.aw-notification--sms { max-width: 340px; }
.aw-notification--sms .aw-notification__body { font-family: var(--font-ui); font-size: 13px; }

/* aw-page / aw-section — the page scaffold. Ancestors: live.css .lv main
   column, .sg-section rule-top rhythm (19 grid). */

.aw-page {
  box-sizing: content-box; max-width: var(--landing-max); margin: 0 auto;
  padding: 38px var(--landing-gutter) 114px;
  position: relative; z-index: 1;
}
.aw-section { border-top: 1px solid var(--rule); padding-top: 19px; margin-top: 38px; }
.aw-section__title {
  font-family: var(--font2); font-weight: 300; font-size: 26px; margin: 0 0 6px;
}
.aw-section__sub {
  font-family: var(--font-ui); font-size: 13px; color: var(--sic-stone); margin-bottom: 19px;
}

/* aw-perspective — the full-depth perspective reading surface (task-445):
   what an explicit-share recipient opens. Strata as labeled groups of entry
   lines; kind chips carry the color-is-data vocabulary. Renders directly on
   the page ground — the perspective is a reading surface, not a card. */

.aw-perspective { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }

.aw-perspective__title {
  font-family: var(--font2); font-weight: 300; font-size: 22px;
  color: var(--sic-ink);
}
.aw-perspective__meta {
  font-family: var(--font-code); font-size: 11px; color: var(--sic-stone);
  margin-top: -8px;
}

.aw-perspective__stratum {
  border-top: 1px solid var(--rule); padding-top: 9px;
  display: flex; flex-direction: column; gap: 7px;
}
.aw-perspective__label {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone);
}
.aw-perspective__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.aw-perspective__text {
  font-family: var(--font2); font-size: 14px; color: var(--ink-soft);
}

/* aw-phasestrip — bottom-docked extraction phase indicator (task-369;
   Scarlet's placement ruling 2026-07-09: "on the bottom would probably be
   nice"). A thin persistent strip, passes lighting up as data comes back —
   all-lit on replay. Phase names are system-grain, tier-safe.
   Ancestor: P4 wireframes artifact v3 §5 footer strip; live.css .lv-rail. */

.aw-phasestrip {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding: 9px 18px;
  font-family: var(--font-code); font-size: 11.5px;
  color: var(--ink-faint);
  background: var(--room);
}
.aw-phasestrip__phase { white-space: nowrap; }
.aw-phasestrip__phase--done { color: var(--muted); }
.aw-phasestrip__phase--failed { color: var(--sic-red); }
.aw-phasestrip__phase--pending { color: var(--ink-faint); }
.aw-phasestrip__phase--pending::after {
  content: "…"; animation: aw-pulse 1.4s ease-in-out infinite;
}
.aw-phasestrip__terminal { color: var(--sic-gold); white-space: nowrap; }
.aw-phasestrip__note { margin-left: auto; white-space: nowrap; }

/* left-sidebar placement (2026-07-10): a column, no strip border/background —
   the sidebar container supplies its own rhythm between blocks. */
.aw-phasestrip--vertical {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  border-top: none; padding: 0; background: transparent; flex-wrap: nowrap;
}
.aw-phasestrip--vertical .aw-phasestrip__phase,
.aw-phasestrip--vertical .aw-phasestrip__terminal,
.aw-phasestrip--vertical .aw-phasestrip__note { white-space: normal; }
.aw-phasestrip--vertical .aw-phasestrip__note { margin-left: 0; }

/* ======================================================================
 * THE POSITION PAGE · THE NARRATIVE PAGE (task-701.11; comp C, Scarlet's
 * rulings 2026-09-28) — drawn in the r5 language the inbox uses: mono
 * meta, sans frames and derived text (a narration is derived), serif only
 * for witnessed speech (the statements). The acts, the pill line, the act
 * rows and the cards are 701.07's frozen families (feed.css, row.css,
 * composer.css, btn.css, chip.css) — nothing here restyles them except
 * where a page context needs a margin.
 *
 * Comp C: the sidebar sits LEFT in the shell's own column (the chrome's
 * aw-chrome__body / __side / __main grammar — chrome.css draws the
 * column; this file only says what the position page does with it), the
 * main column at the shell's width; a tab strip Position · Statements ·
 * Narratives over three labelled sections, the two after the first under
 * a heavy rule. The change is ONE bounded block (the row's closed bracket)
 * with the review box at its end, a rule above it; the review's compact
 * buttons also sit in the bar beside next unread (2026-09-28 dev walk).
 *
 * Geometry answers to the page's OWN width (size containers):
 *   aw-pp       the page — the shell body above 800px (chrome.css's own
 *               breakpoint), the sidebar after the main column below it
 *   aw-inbox    the main column also answers to 701.07's container name, so
 *               the frozen phone rules for the action bar, the act rows and
 *               the cards apply here unchanged
 * Tokens only (the literal gate).
 * ====================================================================== */

.aw-pp, .aw-np {
  container: aw-pp / inline-size;
  display: flex; flex-direction: column; gap: 18px; width: 100%;
  color: var(--sic-ink);
}
/* the position route's main is the feed's own column: .lv's --landing-max,
   centered, at the same gutters as the feed and the theatre (Scarlet,
   2026-09-28: "the center container should be the same width as the feed
   container and be centered and the sidebar should hug it") — only its
   top and bottom padding are the page's own */
main.lv.lv-positionpage { padding-top: 0; padding-bottom: 0; }

/* ---- the header bar: tags, then next unread ---- */
.aw-pp-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 10px 0 9px; border-bottom: 1px solid var(--rule);
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
/* over the tab strip the strip carries the rule — no double line at the
   top (Scarlet, 2026-09-28) */
.aw-pp-bar.is-over-tabs { border-bottom: none; padding-bottom: 0; }
.aw-pp-bar__kind { color: var(--sic-ink); text-transform: lowercase; }
.aw-pp-bar__crumb b { color: var(--sic-ink); font-weight: 500; }
.aw-pp-bar__nav { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
.aw-pp-bar__link {
  color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-pp-bar__link:hover { color: var(--sic-gold); }
.aw-pp-bar__link.is-quiet { color: var(--sic-stone); text-decoration: none; }

/* ---- the shell body: the main column, the sidebar hanging beside it ----
   THE THEATRE'S SIDEBAR GEOMETRY ("should match the theatre sidebar",
   Scarlet 2026-09-28; theatre.css .aw-th-railcol, the same tokens): the
   main column is the whole centered column and never shrinks; the sidebar
   sits in the window's left margin — hugging the column --rail-gap away
   once the margin holds its full --rail-w, pinned --rail-edge from the
   window's edge and narrower while it does not — and below 1424px, where
   the theatre folds its rail, it follows the page. */
.aw-chrome__body.aw-pp__shell { display: block; position: relative; width: 100%; }
.aw-pp__shell > .aw-pp__side {
  position: absolute; top: 0; bottom: 0; height: auto; overflow: visible;
  box-sizing: content-box; padding: 0;
  width: min(var(--rail-w), calc((100vw - var(--landing-max)) / 2 - 2 * var(--rail-edge)));
  left: max(calc(-1 * (var(--rail-w) + var(--rail-gap))), calc(var(--rail-edge) - (100vw - var(--landing-max)) / 2));
  border-right: 1px solid var(--rule);
}
/* the column scrolls with the page; the sidebar in it stays in view, as the
   theatre's rail does (sticky under the header) */
.aw-pp__side > .aw-pp-side {
  position: sticky; top: 76px; margin: 18px 0;
  max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 16px;
}
.aw-pp__shell > .aw-pp__main { max-width: none; padding: 20px 0 114px; }
.aw-pp__main {
  container: aw-pp-main aw-inbox / inline-size;
  display: flex; flex-direction: column; gap: 0; min-width: 0;
  padding-top: 20px;
}
.aw-pp__side { min-width: 0; }
.aw-pp__note {
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--sic-stone);
  margin: 18px 0 0; border-top: 1px dashed var(--guide); padding-top: 10px;
}

/* ---- the tab strip ---- */
.aw-pp-tabs {
  display: flex; gap: var(--pp-tab-gap); border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.aw-pp-tabs__tab {
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: var(--pp-tab-pad) 0 11px; text-decoration: none;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft);
}
.aw-pp-tabs__tab:hover { color: var(--sic-ink); }
.aw-pp-tabs__tab.is-current {
  color: var(--sic-ink); font-weight: 600;
  box-shadow: inset 0 calc(-1 * var(--brk-stroke)) 0 var(--sic-ink);
}
.aw-pp-tabs__n { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-pp-tabs__tab:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }

/* ---- a section: its label, then its body; the second and third under a
   heavy rule; anchored below the fixed header ---- */
.aw-pp-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 72px; }
.aw-pp-pos { padding-top: 24px; gap: 16px; }
.aw-pp-sts, .aw-pp-narrs {
  margin-top: var(--pp-section-space); padding-top: var(--pp-section-pad);
  border-top: var(--brk-stroke) solid var(--sic-ink);
}
.aw-pp-sec__label {
  font-family: var(--font-code); font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sic-ink); margin: 0;
}
.aw-pp-sec__sub { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--sic-stone); }
.aw-pp-sec__quiet { font-family: var(--font1-mono); font-size: 11.5px; line-height: 1.6; color: var(--sic-stone); margin: 0; }
/* the old mono section head — the styleguide's optometrist record still draws it */
.aw-pp-sec__head {
  font-family: var(--font1-mono); font-size: 11px; font-weight: 400; color: var(--sic-stone);
  margin: 0; text-transform: none;
}

/* ---- the head: frame, the position's own narration, the state line ---- */
.aw-pp-head { display: flex; flex-direction: column; gap: 12px; }
.aw-pp-head__frame {
  font-family: var(--font-ui); font-size: 21px; line-height: 1.3; font-weight: 600;
  margin: 0; max-width: 60ch; text-wrap: balance;
}
.aw-pp-head__frame.is-elided { color: var(--sic-stone); font-weight: 400; font-style: italic; }
.aw-pp-head__narration { display: flex; flex-direction: column; gap: 8px; }
.aw-pp-head__narrmeta { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }
.aw-pp-head__narr { max-width: 78ch; }
.aw-pp-head__narr .aw-narr__line { font-size: 15px; line-height: 1.55; color: var(--sic-ink); }
.aw-pp-head__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.aw-pp-head__read { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }

/* ---- a narration, one sentence per line (Scarlet, 2026-09-28) ---- */
.aw-narr { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.aw-narr__line {
  margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
}
.aw-narr__line.is-rem { color: var(--sic-stone); }

/* ---- the acts: the review box's bar — a rule above, none below — the
   composer, the act rows ---- */
.aw-pp-acts {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 0 0; border-top: 1px solid var(--rule);
}
.aw-pp-acts__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aw-pp-acts__bar .aw-actbar { margin-top: 0; }
.aw-pp-acts__label { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-pp-acts__note {
  font-family: var(--font1-mono); font-size: 11.5px; line-height: 1.6; color: var(--sic-stone); margin: 0;
}
.aw-pp-acts__list { display: grid; gap: 9px; border-top: 1px dashed var(--guide); padding-top: 10px; }
.aw-pp-acts__item { display: grid; gap: 4px; }
.aw-pp-acts__earlier { display: grid; gap: 6px; }
.aw-pp-acts__earlier-label {
  font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-stone); margin: 4px 0 0;
}
.aw-pp-acts__earlier .aw-pp-acts__list { border-top-style: dotted; }
/* an act on an earlier revision stays on record, marked superseded */
.aw-pp-acts .aw-act.is-superseded .aw-act__head,
.aw-pp-acts .aw-act.is-superseded .aw-act__comment,
.aw-pp-st__acts .aw-act.is-superseded .aw-act__head,
.aw-pp-st__acts .aw-act.is-superseded .aw-act__comment { color: var(--sic-stone); }
.aw-pp-acts .aw-act.is-superseded .aw-act__word,
.aw-pp-st__acts .aw-act.is-superseded .aw-act__word { color: var(--sic-stone); text-decoration: line-through; }

/* ---- what came of a comment (W27) ---- */
.aw-pp-follow {
  font-family: var(--font1-mono); font-size: 11px; line-height: 1.6; color: var(--sic-stone);
  padding-left: 14px; border-left: 1px dashed var(--guide);
}
.aw-pp-follow__label { color: var(--sic-stone); }
.aw-pp-follow__word, .aw-pp-follow__results { color: var(--sic-ink); }
.aw-pp-follow__link {
  font-family: var(--font-ui); font-size: 12.5px; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-pp-follow__link:hover { color: var(--sic-gold); }
.aw-pp-follow--pending .aw-pp-follow__word { color: var(--sic-stone); animation: aw-pulse var(--motion-moon) ease-in-out infinite; }
.aw-pp-follow--failed .aw-pp-follow__word { color: var(--sic-red); }
.aw-pp-follow--ambiguous .aw-pp-follow__word { color: var(--sic-terr); }

/* ---- the review in two places, one change (Scarlet, 2026-09-28): the
   compact buttons top right beside next unread, and the ONE review box at
   the end of the change block ---- */
.aw-pp-bar__review { display: inline-flex; align-items: center; }
.aw-pp-bar__review .aw-actbar { margin-top: 0; gap: 4px 8px; }
.aw-pp-bar__review .aw-actbar__acts { gap: 6px; }
.aw-pp-bar__review .aw-actbar .aw-btn {
  font-size: var(--pp-bar-btn-size); padding: var(--pp-bar-btn-pad-y) var(--pp-bar-btn-pad-x);
}
.aw-pp-review { display: flex; flex-direction: column; gap: 12px; }

/* ---- the change as ONE bounded block, drawn like the inbox row's diff:
   the closed bracket (the aw-row--pos grammar) around what this call
   added and displaced, the review at its end ---- */
.aw-pp-change {
  --pp-change-ink: var(--sic-ink);
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--pp-change-pad-y) var(--pp-change-pad-x);
}
.aw-pp-change::before, .aw-pp-change::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--brk-arm);
  pointer-events: none;
  background:
    linear-gradient(var(--pp-change-ink), var(--pp-change-ink)) 0 0 / var(--brk-stroke) 100%,
    linear-gradient(var(--pp-change-ink), var(--pp-change-ink)) 0 0 / var(--brk-arm) var(--brk-stroke),
    linear-gradient(var(--pp-change-ink), var(--pp-change-ink)) 0 100% / var(--brk-arm) var(--brk-stroke);
  background-repeat: no-repeat;
}
.aw-pp-change::before { left: 0; }
.aw-pp-change::after { right: 0; transform: scaleX(-1); }
.aw-pp-change__head { display: flex; flex-direction: column; gap: 3px; }
.aw-pp-change__what {
  margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sic-ink);
}
.aw-pp-change__call { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aw-pp-change__name {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
a.aw-pp-change__name:hover { color: var(--sic-gold); }
span.aw-pp-change__name { text-decoration: none; }
.aw-pp-change__date { font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone); }
.aw-pp-change__rows { display: flex; flex-direction: column; gap: 8px; }

/* ---- what was there before this call — open, never folded (2026-09-29) ---- */
.aw-pp-before { display: flex; flex-direction: column; gap: 14px; }
.aw-pp-before__head { margin: 0; font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--sic-ink); }
.aw-pp-before__calls { display: flex; flex-direction: column; gap: 18px; }

/* ---- a statement's text names it in the comment (Scarlet, 2026-09-28) ---- */
.aw-pp-st__cite {
  display: inline; margin: 0; padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.aw-pp-st__cite:hover .aw-pp-st__q { color: var(--sic-gold); }
.aw-pp-st__cite:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
.aw-pp-st.is-named .aw-pp-st__q { background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--sic-gold); }

/* ---- the narratives this change re-narrated ---- */
.aw-pp-narrs { gap: 18px; }
.aw-pp-narr { display: flex; flex-direction: column; gap: 10px; }
.aw-pp-narr + .aw-pp-narr { padding-top: 18px; border-top: 1px solid var(--rule); }
.aw-pp-narr__title { margin: 0; font-family: var(--font-ui); font-size: 20px; line-height: 1.3; font-weight: 600; }
.aw-pp-narr__kind { font-weight: 400; color: var(--sic-stone); }
.aw-pp-narr__link { color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px; }
.aw-pp-narr__link:hover { color: var(--sic-gold); }
.aw-pp-narr__meta { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }
.aw-pp-narr__what, .aw-pp-narr__summary {
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--sic-ink);
}
.aw-pp-narr__summary { color: var(--sic-stone); font-size: 12.5px; }
.aw-pp-narr__what b { font-weight: 600; }
.aw-pp-narr__state { font-family: var(--font1-mono); font-size: 11.5px; color: var(--sic-stone); margin: 0; }
.aw-pp-narr__state.is-failed { color: var(--sic-red); }
.aw-pp-narr .aw-np__views { margin-left: 0; }

/* ---- the comparison: old | new, stacked new-over-old on the position
   page, or one column with the marks ---- */
.aw-np__cmp--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.aw-np__cmp--stacked { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 78ch; }
.aw-np__col { min-width: 0; }
.aw-np__colhead { font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-stone); margin: 0 0 4px; }
.aw-np__narr { max-width: 70ch; }
.aw-np__cmp--stacked .aw-np__narr { max-width: none; }
.aw-np__cmp--stacked .aw-np__col--before .aw-narr__line { color: var(--sic-stone); }
.aw-np__none { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }
.aw-np__ref { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.aw-np__ref:hover { color: var(--sic-gold); }
.aw-np__add {
  text-decoration: none; color: var(--sic-ink);
  background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--sic-gold);
}
.aw-np__rem { color: var(--sic-stone); text-decoration: line-through; text-decoration-color: var(--sic-red); }
del.aw-np__rem, ins.aw-np__add { font: inherit; }

/* ---- the optometrist box (the styleguide's record only) ---- */
.aw-pp-opt__prompt {
  margin: 0; padding: 10px 13px; border: 1px solid var(--rule); background: var(--ink-wash);
  font-family: var(--font-code); font-size: 12px; line-height: 1.6; color: var(--sic-ink);
  overflow-wrap: anywhere;
}
.aw-pp-opt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aw-pp-opt__row .aw-btn { font-size: 13px; padding: 5px 14px; }
.aw-pp-opt__row .aw-btn[data-copy="copied"] { border-style: solid; }
.aw-pp-opt__status { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-ink); }
.aw-pp-opt__status.is-failed { color: var(--sic-red); }
.aw-pp-opt__hint { font-family: var(--font1-mono); font-size: 10.5px; line-height: 1.6; color: var(--sic-stone); }

/* ---- the statements, grouped by call ---- */
.aw-pp-sts { gap: 18px; }
.aw-pp-call { display: flex; flex-direction: column; gap: 8px; }
.aw-pp-call + .aw-pp-call { padding-top: 10px; }
.aw-pp-call__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.aw-pp-call__name {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
a.aw-pp-call__name:hover { color: var(--sic-gold); }
span.aw-pp-call__name { text-decoration: none; }
.aw-pp-call__date { flex: none; font-family: var(--font1-mono); font-size: 12.5px; color: var(--sic-ink); }
.aw-pp-call__meta { margin: -6px 0 0; font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-pp-call__rows { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }

.aw-pp-st { position: relative; padding-left: var(--pp-sign-gutter); }
.aw-pp-st__sign {
  position: absolute; left: 0; top: 0;
  font-family: var(--font1-mono); font-size: 13px; line-height: 1.75; color: var(--sic-ink);
}
.aw-pp-st.is-displaced .aw-pp-st__sign { color: var(--sic-red); }
.aw-pp-st__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aw-pp-st__say { margin: 0; font-family: var(--font2); font-size: 15px; line-height: 1.5; }
.aw-pp-st__q { color: var(--sic-ink); }
del.aw-pp-st__q { color: var(--sic-stone); text-decoration-color: var(--sic-red); }
.aw-pp-st.is-displaced .aw-pp-st__say { color: var(--sic-stone); }
.aw-pp-st__who {
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin-left: 4px; white-space: nowrap;
}
.aw-pp-st__loc { color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px; }
a.aw-pp-st__loc:hover { color: var(--sic-gold); }
span.aw-pp-st__loc { text-decoration: none; }
.aw-pp-st__note { margin: 0; font-family: var(--font1-mono); font-size: 11px; line-height: 1.5; color: var(--sic-stone); }
.aw-pp-st.is-displaced .aw-pp-st__note { color: var(--sic-red); }
/* the lines around a statement, always shown (witnessed speech — serif) */
.aw-pp-st__ctx { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--guide); }
.aw-pp-st__ctxline { margin: 0; font-family: var(--font2); font-size: 13px; line-height: 1.45; color: var(--sic-stone); }
.aw-pp-st__ctxwho { font-family: var(--font1-mono); font-size: 10.5px; }
/* a statement's own acts (701.12 R1): the bar, its composer, its act rows */
.aw-pp-st__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.aw-pp-st__acts .aw-pp-acts__list { border-top: none; padding-top: 0; }

/* ---- the sidebar: people · reliance · room · narratives ---- */
.aw-pp-side { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.aw-pp-side__sec { display: flex; flex-direction: column; gap: 0; }
.aw-pp-side__head {
  font-family: var(--font-code); font-size: 10px; font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone); margin: 0 0 8px;
}
.aw-pp-side__quiet {
  font-family: var(--font1-mono); font-size: 11px; line-height: 1.5; color: var(--sic-stone); margin: 0;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.aw-pp-side__quiet.is-failed { color: var(--sic-red); }

.aw-pp-person {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px;
  padding: 10px 0; border-top: 1px solid var(--border); align-items: baseline;
}
.aw-pp-person__name { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.35; }
.aw-pp-person__state { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-pp-person.is-unread .aw-pp-person__state { color: var(--sic-ink); }
.aw-pp-person.is-accepted .aw-pp-person__state { color: var(--sic-ink); }
.aw-pp-person.is-changes-requested .aw-pp-person__state { color: var(--sic-blue); }
.aw-pp-person.is-rejected .aw-pp-person__state { color: var(--sic-red); }
.aw-pp-person__footing {
  grid-column: 1 / -1; font-family: var(--font-ui); font-size: 14px; line-height: 1.4; color: var(--ink-soft);
}

.aw-pp-use {
  font-family: var(--font-ui); font-size: 14px; line-height: 1.4; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.aw-pp-rooms { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.aw-pp-rooms__link {
  font-family: var(--font-ui); font-size: 14px; line-height: 1.4; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}

.aw-pp-nars { display: flex; flex-direction: column; gap: 22px; }
.aw-pp-nar { display: flex; flex-direction: column; gap: 8px; padding-top: 11px; border-top: 1px solid var(--rule); }
.aw-pp-nar__title {
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--sic-ink);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
a.aw-pp-nar__title:hover { color: var(--sic-gold); }
span.aw-pp-nar__title { text-decoration: none; }
.aw-pp-nar__sibs { list-style: none; margin: 0; padding: 0 0 0 12px; display: flex; flex-direction: column; }
.aw-pp-nar__sib { padding: 9px 0; border-top: 1px solid var(--border); }
.aw-pp-nar__sib:last-child { padding-bottom: 0; }
.aw-pp-nar__sib-link {
  display: block; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.4; color: var(--sic-ink);
  text-decoration: none;
}
.aw-pp-nar__sib-link:hover { color: var(--sic-gold); }
.aw-pp-nar__none {
  margin: 0; padding: 9px 0 0 12px; border-top: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--sic-stone);
}

/* ---- the narrative page ---- */
.aw-np__head { display: flex; flex-direction: column; gap: 6px; }
.aw-np__label { font-family: var(--font-ui); font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0; }
.aw-np__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-np__gens { container: aw-np-gens aw-inbox / inline-size; display: flex; flex-direction: column; gap: 12px; }
.aw-np-gen {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--rule);
}
.aw-np-gen.is-open { border-color: var(--edge-strong); }
.aw-np-gen__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-np-gen__n { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--sic-ink); }
.aw-np-gen__what { margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; }
.aw-np-gen__what b { font-weight: 600; }
.aw-np-gen__trig { display: flex; flex-direction: column; gap: 8px; border-top: 1px dotted var(--rule); padding-top: 8px; }
.aw-np-gen__trighead { font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-stone); margin: 0; }
.aw-np-gen__rows { display: flex; flex-direction: column; gap: 8px; }
.aw-np-gen__note { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }
.aw-np__views { display: inline-flex; gap: 10px; margin-left: auto; }
.aw-np__view {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-np__view[aria-pressed="true"] { color: var(--sic-ink); text-decoration-style: solid; }
.aw-np__view:hover { color: var(--sic-ink); }
.aw-np__view:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
.aw-np__quiet { font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); margin: 0; }
.aw-np__foot {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--rule); padding-top: 10px;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
.aw-np__foot p { margin: 0; }
.aw-np__foot a { color: var(--sic-ink); text-decoration: underline dashed; text-underline-offset: 3px; }

/* ---- the margin cannot hold the sidebar (the theatre's fold, 1423px):
   it follows the main column, at the page's own gutter ---- */
@media (max-width: 1423px) {
  /* stretch: the chrome body's align-items: start would shrink the main
     column to its content in a flex column */
  .aw-chrome__body.aw-pp__shell { display: flex; flex-direction: column; align-items: stretch; }
  .aw-pp__shell > .aw-pp__side {
    position: static; width: auto; order: 2;
    border-right: none; border-top: 1px solid var(--rule); padding: 20px 0 40px;
  }
  .aw-pp__side > .aw-pp-side { position: static; margin: 0; max-height: none; overflow: visible; padding-right: 0; }
  .aw-pp__shell > .aw-pp__main { padding-bottom: 24px; }
}

/* ---- phone: the same stacking (chrome.css hides the shell's own column
   below 800px; the position page keeps its sidebar after the page) ---- */
@media (max-width: 800px) {
  .aw-pp__shell > .aw-chrome__side { display: block; }
  .aw-pp-head__frame, .aw-np__label { font-size: 18px; }
}
@container aw-pp-main (max-width: 520px) {
  .aw-np__cmp--split { grid-template-columns: minmax(0, 1fr); }
  .aw-pp-st__who { white-space: normal; display: block; margin-left: 0; }
}
@container aw-np-gens (max-width: 520px) {
  .aw-np__cmp--split { grid-template-columns: minmax(0, 1fr); }
  .aw-np__views { margin-left: 0; }
  .aw-np-gen { padding: 10px 11px; }
}

/* aw-rail — checkpoint/progress rail. Ancestor: live.css .lv-rail */

.aw-rail {
  display: flex; gap: 0; list-style: none; padding: 0; margin: 0;
  border-bottom: 1px solid var(--border);
}
.aw-rail--column { flex-direction: column; gap: 3px; border-bottom: none; }

.aw-rail li {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 10px 18px 12px 0; position: relative;
}
.aw-rail--column li { padding: 5px 0; }
.aw-rail li::before { content: "○"; margin-right: 7px; color: var(--ink-faint); }
.aw-rail li.done { color: var(--sic-ink); }
.aw-rail li.done::before { content: "●"; color: var(--sic-ink); }
.aw-rail li.failed { color: var(--sic-red); }
.aw-rail li.failed::before { content: "✕"; color: var(--sic-red); }
.aw-rail li.pending { color: var(--sic-stone); }
.aw-rail li.pending::before { content: "◐"; color: var(--sic-gold); animation: aw-pulse var(--motion-moon) ease-in-out infinite; }
.aw-rail li.guard { color: var(--sic-gold); cursor: help; }
.aw-rail li.guard::before { content: "◆"; color: var(--sic-gold); }

/* aw-row — list row (calls, inbox, runs). Ancestors: live.css .lv-call,
   .lv-inbox-row. task-528 r4: rows are hairline furniture on the white
   room — selection speaks gold (the system's selection color), never blue. */

.aw-row {
  display: block; width: 100%; text-align: left;
  background: transparent; cursor: pointer;
  border: none; border-top: 1px solid var(--border);
  /* 10px gutters keep the date/title off the hover & --on wash edges */
  padding: 14px 10px;
  transition: background var(--motion-sun);
}
.aw-row:hover { background: var(--ink-wash); }
.aw-row--on { background: var(--gold-tint); }
.aw-row:last-child { border-bottom: 1px solid var(--border); }

.aw-row__title { font-family: var(--font2); font-size: 15px; line-height: 1.35; color: var(--sic-ink); }
.aw-row__meta {
  font-family: var(--font-code); font-size: 9.5px; color: var(--sic-stone);
  margin-top: 3px; letter-spacing: 0.06em;
}

/* --dated: 3-slot catalogue/call row — date · title+meta · status chip */
.aw-row--dated {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 12px; align-items: baseline;
}
.aw-row__date {
  font-family: var(--font-code); font-size: 9.5px; color: var(--sic-stone);
  letter-spacing: 0.06em; white-space: nowrap;
  /* a date that refuses to compact clips inside its slot — never overlaps
     the title (caught on dev 2026-07-09: a raw Date toString ran over) */
  overflow: hidden; text-overflow: ellipsis;
}
.aw-row__main { min-width: 0; }

/* --action: third slot is a btn (extract affordance), not a status chip.
   The button is the affordance, so the row itself doesn't invite a click. */
.aw-row--action { cursor: default; }
.aw-row--action:hover { background: transparent; }
.aw-row--action .aw-btn { justify-self: end; white-space: nowrap; }

/* --pos: the review inbox's position card (task-701.07). A closed object in
   the r5 language (feed.css: a call is held CLOSED) — full width, no
   left/right hang (Scarlet 9/22: the review inbox drops the July feed's
   right-means-mine rule). Read = a hairline closed bracket; unread = the r5
   long-dash stroke at full weight (unread is the ONLY emphasis); the ●
   variant keeps the hairline and marks the title instead (both ship for
   her walk). The whole card is the door: a stretched link under everything,
   with the locate links, the action bar and the composer riding above it.
   Every selector here is scoped to .aw-row--pos — the dated/action rows and
   every existing aw-row render exactly as before. */
.aw-row.aw-row--pos {
  --pos-ink: var(--mark);
  --pos-w: 1px;
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  width: 100%;
  border: none;
  padding: 14px 26px 16px;
  cursor: pointer;
  transition: background var(--motion-sun);
}
.aw-row.aw-row--pos::before, .aw-row.aw-row--pos::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--brk-arm);
  pointer-events: none;
  background:
    linear-gradient(var(--pos-ink), var(--pos-ink)) 0 0 / var(--pos-w) 100%,
    linear-gradient(var(--pos-ink), var(--pos-ink)) 0 0 / var(--brk-arm) var(--pos-w),
    linear-gradient(var(--pos-ink), var(--pos-ink)) 0 100% / var(--brk-arm) var(--pos-w);
  background-repeat: no-repeat;
}
.aw-row.aw-row--pos::before { left: 0; }
.aw-row.aw-row--pos::after  { right: 0; transform: scaleX(-1); }

/* unread (default mark): the long-dash stroke — the not-yet rhythm of
   .aw-call--unread (--brk-dash on, --brk-dash-gap off), arms solid */
.aw-row.aw-row--pos.is-unread { --pos-ink: var(--sic-ink); }
.aw-row.aw-row--pos.is-unread:not(.is-dot) { --pos-w: var(--brk-stroke); }
.aw-row.aw-row--pos.is-unread:not(.is-dot)::before,
.aw-row.aw-row--pos.is-unread:not(.is-dot)::after {
  background:
    repeating-linear-gradient(180deg,
      var(--pos-ink) 0 var(--brk-dash),
      transparent var(--brk-dash) calc(var(--brk-dash) + var(--brk-dash-gap)))
      0 0 / var(--pos-w) 100%,
    linear-gradient(var(--pos-ink), var(--pos-ink)) 0 0 / var(--brk-arm) var(--pos-w),
    linear-gradient(var(--pos-ink), var(--pos-ink)) 0 100% / var(--brk-arm) var(--pos-w);
  background-repeat: no-repeat;
}
/* the ● variant: hairline frame, the dot + ink title carry unread */
.aw-row.aw-row--pos.is-unread.is-dot { --pos-ink: var(--mark); }
.aw-row__dot { color: var(--sic-gold); font-size: 0.72em; vertical-align: 0.12em; }

/* the door's hover doctrine (the aw-call door, her walk 2026-07-23): the
   stroke goes gold over the faint gold wash */
.aw-row.aw-row--pos:hover,
.aw-row.aw-row--pos:has(> .aw-row__cover:focus-visible) {
  --pos-ink: var(--sic-gold); background: var(--gold-tint);
}
.aw-row__cover { position: absolute; inset: 0; z-index: 1; }
.aw-row__cover:focus-visible { outline: none; }
.aw-row--pos .aw-diff__loc,
.aw-row--pos .aw-actbar,
.aw-row--pos .aw-composer { position: relative; z-index: 2; }

/* the frame line: the position's question. Read = soft ink; unread = ink */
.aw-row__frame {
  font-family: var(--font-ui); font-size: 15.5px; line-height: 1.4;
  color: var(--ink-soft); margin: 0;
}
.aw-row--pos.is-unread .aw-row__frame { color: var(--sic-ink); font-weight: 600; }

/* the review marks — colour on the frame; the pills carry the words.
   Declared after unread so a state's colour holds on an unread row while
   the unread weight and dash stay. */
.aw-row.aw-row--pos.is-accepted .aw-row__frame,
.aw-row.aw-row--pos.is-accepted .aw-diff__line { color: var(--sic-stone); }
.aw-row.aw-row--pos.is-rejected { --pos-ink: var(--sic-red); background: var(--red-tint); }
.aw-row.aw-row--pos.is-contested { --pos-ink: var(--sic-terr); }
.aw-row.aw-row--pos.is-rejected:hover,
.aw-row.aw-row--pos.is-contested:hover { --pos-ink: var(--sic-gold); }

/* the acts — every act is ONE row in one format, the same on the collapsed
   card and the expanded one: `<word> by <name> · <comment>`; the head
   (word by name ·) stays whole and a long comment wraps under ITSELF; an
   accept carries no comment (Scarlet, 2026-09-25); a small date ends the
   row when the caller passes one (her decision 6b, 2026-09-27) */
.aw-row__acts {
  display: grid; gap: 7px;
  border-top: 1px dashed var(--guide); padding-top: 9px;
}
.aw-act {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px; align-items: baseline;
}
.aw-act__head {
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  white-space: nowrap;
}
.aw-act__who { color: var(--sic-ink); }
/* an act an AI submitted on the person's behalf (701.16): the footing reads
   in the head's voice and may wrap — the head's word-by-name stays whole */
.aw-act__footing { white-space: normal; }
.aw-act--accept .aw-act__word { color: var(--sic-ink); }
.aw-act--request-changes .aw-act__word { color: var(--sic-blue); }
.aw-act--reject .aw-act__word { color: var(--sic-red); }
.aw-act__comment {
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.45;
  color: var(--ink-soft); min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* the act's day (act-row :when): a third column, so it ends the row's
   first line whether or not a comment sits between */
.aw-act:has(> .aw-act__date) { grid-template-columns: auto minmax(0, 1fr) auto; }
.aw-act__date {
  grid-column: 3; justify-self: end; white-space: nowrap;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
}
/* the collapsed card clamps a long comment to three lines (parent default,
   2026-09-25); the full text is on expand and on the position page, and
   stays in the DOM for assistive tech. The expanded card never clamps.
   Specificity beats the phone rule's `.aw-act__comment { display: block }`,
   so the clamp holds at every width. */
.aw-act.is-clamped .aw-act__comment {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* the fold (Scarlet, 2026-09-25): a collapsed card shows frame · pills ·
   act rows · expand; the text button rides above the card's door so the
   rest of the card still opens the position page */
.aw-row__toggle {
  align-self: flex-start; position: relative; z-index: 2;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-row__toggle:hover { color: var(--sic-ink); }
.aw-row__toggle:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }

/* the card's note (task-701 hardening, position-row :note): a quiet line
   under the acts — an older change's link to the position's current
   revision, a refused act's reason (red). Its link rides above the card's
   door, like the fold's button. */
.aw-row__notes { display: grid; gap: 4px; }
.aw-row__note {
  margin: 0; font-family: var(--font1-mono); font-size: 11.5px;
  color: var(--sic-stone); overflow-wrap: anywhere;
}
.aw-row__note.is-alert { color: var(--sic-red); }
.aw-row__note a {
  position: relative; z-index: 2;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.aw-row__note a:hover { color: var(--sic-ink); }
.aw-row__note a:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }

/* ---- phone, from the inbox column's width. These live HERE, after the
   rules they adjust: the component bundle concatenates families
   alphabetically (feed.css before row.css), and a container query adds no
   specificity — the same rules in feed.css were silently overridden. ---- */
@container aw-inbox (max-width: 520px) {
  .aw-row.aw-row--pos { padding: 12px 18px 14px; }
  .aw-row__frame { font-size: 14.5px; }
  /* too narrow for the hanging comment: the head, then the comment */
  .aw-act { display: block; }
  .aw-act__sep { display: none; }
  .aw-act__comment { display: block; margin-top: 2px; }
  .aw-act__date { margin-left: 4px; }
  .aw-act__comment + .aw-act__date { display: block; margin: 2px 0 0; }
}

/* aw-share-panel — who can see this object, and adding someone.
   Numerology: XVII The Star (finding one's place, giving) — the 17 grid
   governs sharing surfaces. Full share UX rides task-337.02.03. */

.aw-share-panel {
  background: var(--sic-paper); border: none;
  padding: 17px; display: grid; gap: 17px; max-width: 460px;
}
.aw-share-panel__title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sic-stone);
}
.aw-share-panel__row {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--guide); padding: 10px 0;
}
.aw-share-panel__who { font-family: var(--font2); font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aw-share-panel__remove {
  margin-left: auto; background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.aw-share-panel__remove:hover { color: var(--sic-red); }
.aw-share-panel__add { display: flex; gap: 10px; align-items: flex-end; }
.aw-share-panel__add .aw-field { flex: 1; }

/* sg-* — the /live/styleguide review surface's own chrome (dev/staging only).
   Not a product component family; the guide needs rows and specimen frames. */

.sg { max-width: var(--landing-max); margin: 0 auto; padding: 38px var(--landing-gutter) 114px; }
.sg-intro { font-family: var(--font2); color: var(--muted); max-width: 60ch; margin-bottom: 38px; }

.sg-section { border-top: 1px solid var(--rule); padding-top: 19px; margin-top: 38px; }
.sg-section > h2 {
  font-family: var(--font2); font-weight: 300; font-size: 26px;
  margin: 0 0 6px;
}
.sg-ancestor { font-family: var(--font-code); font-size: 11px; color: var(--sic-stone); margin-bottom: 19px; }

.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; margin-bottom: 19px; }
.sg-specimen {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  border: 1px dashed var(--border); padding: 19px 19px 13px;
  min-width: 150px;
}
.sg-name { font-family: var(--font-code); font-size: 10px; color: var(--sic-stone); letter-spacing: 0.08em; }

.sg-swatch { width: 57px; height: 38px; border: 1px solid var(--border); }
.sg-token-val { font-family: var(--font-code); font-size: 10px; color: var(--sic-stone); }

/* theme toggle — styleguide chrome only (aw-header right slot) */
.sg-header-right { display: inline-flex; align-items: center; gap: 13px; }
.sg-theme-toggle {
  background: none; cursor: pointer;
  border: 1px dashed var(--edge-soft);
  padding: 3px 10px;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
  transition: border-color var(--motion-sun), color var(--motion-sun);
}
.sg-theme-toggle:hover { border-color: var(--sic-ink); color: var(--sic-ink); }

/* THE THEATRE DESIGN LANGUAGE (task-441, ratified r3–r6).
 *
 * ONE unit — the MESSAGE; one connector — the REPLY. Everything the theatre
 * shows is a message; every relation between messages is a reply. Anatomy:
 * the name line sits ABOVE the bubble, icons/annotations BELOW it.
 *
 * Footing typography — serif (--font2) is reserved for WITNESSED HUMAN SPEECH.
 * Positions and narratives (derived) and the [AI] speak sans (--font-ui);
 * a verbatim quote inside derived text drops back to serif.
 *
 * Three message kinds:
 *   expression  — witnessed: serif, hairline --border edge, --card fill.
 *   position /  — derived, a "message of the graph": sans semibold in a bubble
 *   narrative     with the STACKED edge (a box-shadow offset — a message
 *                 visibly holding messages); conviction word in gold.
 *   [AI]        — dashed --edge-soft bubble, sans; the mark is the wordmark's
 *                 [AI] brackets (gold, --font-code), never an avatar.
 *
 * Ground rule (task-528 r4) — ONE white ROOM (--room) below the header;
 * witnessed speech wears the drawn square bracket (no box), derived/system
 * output wears PAPER (--sic-paper, sharp corners, flat). Stroke vocabulary:
 * solid=witnessed · dashed=not-yet · double=absorbed · gold-dashed=this-call ·
 * gold-solid=for-you · red-dashed=failed. The ” quote glyph marks WITNESSED /
 * QUOTED content (quote-chips, reply-count markers), never the actor.
 *
 * The family shares the aw-th-* prefix (the bare aw-msg / aw-rail names belong
 * to other families). Every color / edge / font resolves through a token.
 * The .is-hover / .is-active / .is-focus companion classes exist so the
 * styleguide can render the mechanical state matrix; they carry no new rules,
 * they only borrow the pseudo-class declarations.
 *
 * MATERIAL AMENDMENT (2026-07-17, the end-to-end design pass, tasks 441/446/442
 * — ruling record in those tasks' notes; ratified comps archived at
 * docs/design/artifact-archive/2026-07-17-*):
 *   - cards carry the DEPLOYED material: soft elevation + iMessage tail
 *     corners (12/12/12/4 left speaker, 12/12/4/12 mine); the ground is the
 *     paper with the landing guide grid (the page owns the grid, not this file).
 *   - HOVER DOCTRINE: background-fill hover ONLY where the card itself is the
 *     action (--actionable); a card whose actions live inside gets border-only
 *     hover (--hasctas) — the fill belongs to the CTA within.
 *   - TWO VIEWS, FOUR LEVELS: the conversation view shows expressions +
 *     positions (ONE reply layer; position anatomy = frame · digest ·
 *     under-line); narratives + strata live in the STRATUM VIEW. Multi-tier
 *     nesting under a quote is retired.
 *   - HIGHLIGHTING GRAMMAR, one rule everywhere: --in (gold dashed underline)
 *     = this call, anchors in place · --out (ink dashed) = another call,
 *     navigates with history back · --elided (faint dashed) = no access,
 *     request-access CTA in place, never fetches.
 *   - dims stay GLYPHS; their tooltip sits UNDERNEATH with a little arrow
 *     (the deployed tag-popover treatment).
 *   - pass dots re-voiced: filled ink = completed · empty outline = not yet ·
 *     dashed gold ring = retrying on its own · red = failed. Needing the user
 *     is never a dot — it is a CTA on the card. */

/* ---- the message: name line ABOVE, bubble, icons BELOW ---- */
.aw-th-msg { max-width: 620px; margin-top: 20px; }
.aw-th-msg--mine { margin-left: auto; }

.aw-th-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin: 0 4px 4px;
}
.aw-th-msg--mine > .aw-th-name,
.aw-th-replies--mine .aw-th-name,
.aw-th-above--mine .aw-th-name { justify-content: flex-end; }

.aw-th-who { font-weight: 650; }
.aw-th-who--scarlet { color: var(--sic-terr); }
.aw-th-who--tony    { color: var(--sic-blue); }
.aw-th-who--sys     { color: var(--sic-gold); }
.aw-th-who--red     { color: var(--sic-red); }
.aw-th-who--terr    { color: var(--sic-terr); }
.aw-th-who--gold    { color: var(--sic-gold); }
.aw-th-who--blue    { color: var(--sic-blue); }
.aw-th-who--mint    { color: var(--sic-mint); }
.aw-th-who--stone   { color: var(--sic-stone); }

.aw-th-kind { font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; }
.aw-th-conv { font-weight: 500; color: var(--sic-gold); }
.aw-th-arrow { color: var(--ink-faint); }
.aw-th-aimark {
  flex: none; font-family: var(--font-code); font-size: 11.5px; font-weight: 700;
  color: var(--sic-gold); letter-spacing: 0.02em; line-height: 1;
}

.aw-th-below {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-faint); margin: 4px 4px 0;
}
.aw-th-msg--mine > .aw-th-below,
.aw-th-replies--mine .aw-th-below { justify-content: flex-end; }

/* ---- expression: witnessed human speech — the drawn square bracket is the
   boundary (task-528 r4, white room). No box, no shadow: stroke carries
   state via the shared --brk-* props (dashed = not-yet, double = absorbed,
   gold = this-call/selected, red = failed — feed composes onto these).
   Mine closes right: bracket direction + alignment replace the tail. ---- */
.aw-th-exp {
  --brk-stroke: var(--sic-ink);
  --brk-style: solid;
  --brk-w: 2px;
  position: relative;
  padding: 2px 0 2px calc(18px + var(--brk-w));
  border-left: var(--brk-w) var(--brk-style) var(--brk-stroke);
  background: transparent;
  font-family: var(--font2); font-size: 14.5px; line-height: 1.55;
  transition: background var(--motion-sun);
}
.aw-th-exp::before, .aw-th-exp::after {
  content: ""; position: absolute; left: 0; width: 14px; height: 0;
  border-top: var(--brk-w) var(--brk-style) var(--brk-stroke);
}
.aw-th-exp::before { top: 0; }
.aw-th-exp::after  { bottom: 0; }
.aw-th-msg--mine > .aw-th-exp,
.aw-th-replies--mine .aw-th-exp {
  border-left: none;
  border-right: var(--brk-w) var(--brk-style) var(--brk-stroke);
  padding: 2px calc(18px + var(--brk-w)) 2px 0;
  text-align: right;
}
.aw-th-msg--mine > .aw-th-exp::before, .aw-th-msg--mine > .aw-th-exp::after,
.aw-th-replies--mine .aw-th-exp::before, .aw-th-replies--mine .aw-th-exp::after {
  left: auto; right: 0;
}

/* ---- position / narrative: derived — a made thing, so it wears PAPER
   (the document surface on the white room; sharp corners, flat) ---- */
.aw-th-pos {
  border: 1px solid transparent; padding: 13px 17px 11px;
  background: var(--sic-paper); font-family: var(--font-ui); font-weight: 600;
  font-size: 14.5px; line-height: 1.5;
  transition: border-color var(--motion-sun), background var(--motion-sun);
}
.aw-th-pos--center { text-align: center; }
/* a verbatim quote inside derived text drops back to serif */
.aw-th-pos em, .aw-th-ai em { font-family: var(--font2); font-style: italic; }

/* ---- [AI]: system voice — paper document with the gold [ai] mark in the
   name line; dashed edges now mean NOT-YET, so the [AI] no longer wears one ---- */
.aw-th-ai {
  border: 1px solid transparent; padding: 10px 14px;
  background: var(--sic-paper); font-family: var(--font-ui); font-size: 13.5px;
  line-height: 1.5; color: var(--ink-soft);
}

/* ---- hover doctrine: fill only where the card IS the action; on
   expressions the STROKE goes gold (bracket = the state carrier) ---- */
.aw-th--actionable { cursor: pointer; }
.aw-th--actionable:hover, .aw-th--actionable.is-hover,
.aw-th--actionable:focus-visible, .aw-th--actionable.is-focus {
  --brk-stroke: var(--sic-gold);
  border-color: var(--sic-gold); background: var(--gold-tint); outline: none;
}
.aw-th--hasctas:hover, .aw-th--hasctas.is-hover,
.aw-th--hasctas:focus-visible, .aw-th--hasctas.is-focus {
  --brk-stroke: var(--sic-gold);
  border-color: var(--sic-gold); outline: none;
}

/* ---- selection algebra: rest · for-you (gold solid edge) · selected (fill) ---- */
.aw-th-msg--for-you > .aw-th-ai,
.aw-th-reply--for-you > .aw-th-ai { border-left: 2px solid var(--sic-gold); }
.aw-th-msg--selected > .aw-th-pos,
.aw-th-msg--selected > .aw-th-ai,
.aw-th-reply--selected > .aw-th-pos,
.aw-th-reply--selected > .aw-th-ai { background: var(--gold-target); border-color: var(--sic-gold); }
/* witnessed expressions select too (task-514 #1): gold stroke + fill wash */
.aw-th-msg--selected > .aw-th-exp,
.aw-th-reply--selected > .aw-th-exp {
  --brk-stroke: var(--sic-gold);
  background: linear-gradient(to right, var(--gold-target), transparent 80%);
}
.aw-th-msg--mine.aw-th-msg--selected > .aw-th-exp {
  background: linear-gradient(to left, var(--gold-target), transparent 80%);
}

/* ---- the reply: elbow + spine, aligned under the parent's edge ---- */
.aw-th-replies { position: relative; margin-top: 2px; padding-left: 34px; }
.aw-th-replies--mine { padding-left: 0; padding-right: 34px; }
/* G1 SQUARE elbows, FINAL (r5.1 ruling 19): per-reply square corners for
   singles and stacks alike, the single case's breathing room extended to
   stacks. The rounded radius is retired; the shared spine/gutter was tried
   (G2) and reverted — it read as chrome, the square corner was the
   load-bearing part. */
.aw-th-reply { position: relative; margin-top: 16px; }
.aw-th-reply + .aw-th-reply { margin-top: 26px; }
.aw-th-reply::before {
  content: ""; position: absolute; left: -20px; top: -12px; width: 16px; height: 26px;
  border-left: 2px solid var(--guide); border-bottom: 2px solid var(--guide);
}
.aw-th-replies--mine > .aw-th-reply::before {
  left: auto; right: -20px; border-left: none; border-right: 2px solid var(--guide);
}
.aw-th-reply .aw-th-exp, .aw-th-reply .aw-th-ai { font-size: 13.5px; }

/* ---- quote-chip: a reply out of thread carries its parent along ---- */
.aw-th-qchip {
  display: flex; gap: 7px; align-items: center; width: 100%; text-align: left;
  border: 1px solid var(--guide); padding: 4px 10px; margin: 3px 0 5px;
  font-size: 12px; color: var(--muted); background: var(--ink-wash); cursor: pointer;
}
.aw-th-qchip:hover, .aw-th-qchip.is-hover { border-color: var(--sic-gold); }
.aw-th-qchip:active, .aw-th-qchip.is-active { background: var(--gold-tint); }
.aw-th-qchip:focus-visible, .aw-th-qchip.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-qchip__mark { color: var(--sic-gold); font-family: var(--font2); font-weight: 700; }
.aw-th-qchip__text { font-family: var(--font-ui); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- presence marker: the collapsed thread's witness ---- */
.aw-th-marker {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--sic-gold); background: var(--gold-tint);
  padding: 1px 9px 1px 6px; font-family: var(--font-ui); font-size: 11.5px;
  color: var(--sic-ink); cursor: pointer;
}
.aw-th-marker:hover, .aw-th-marker.is-hover { background: var(--gold-target); }
.aw-th-marker:active, .aw-th-marker.is-active { background: var(--gold-target); }
.aw-th-marker:focus-visible, .aw-th-marker.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-marker__mark { color: var(--sic-gold); font-family: var(--font2); font-weight: 700; }

/* ---- verbs: expand · collapse · climb — always on a message, never chrome ---- */
.aw-th-verb {
  display: inline-flex; align-items: center; gap: 5px; border: none; background: none;
  padding: 2px 4px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--muted);
}
.aw-th-verb:hover, .aw-th-verb.is-hover { color: var(--sic-ink); background: var(--ink-wash); }
.aw-th-verb:active, .aw-th-verb.is-active { background: var(--gold-tint); }
.aw-th-verb:focus-visible, .aw-th-verb.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-verb__q { color: var(--sic-gold); font-family: var(--font2); font-weight: 700; }
.aw-th-verb b { color: var(--sic-ink); font-weight: 600; }
.aw-th-verb svg { width: 9px; height: 6px; stroke: currentColor; fill: none; stroke-width: 2; }
.aw-th-verb__chev--up { transform: rotate(180deg); }

/* ---- the climb: the narrative reached locally, shown above ---- */
.aw-th-above { position: relative; margin: 0 0 14px 34px; }
.aw-th-above::after {
  content: ""; position: absolute; left: -20px; bottom: -12px; width: 16px; height: 12px;
  border-left: 2px solid var(--guide); border-top: 2px solid var(--guide); border-top-left-radius: 10px;
}
.aw-th-above--mine { margin: 0 34px 14px 0; }
.aw-th-above--mine::after {
  left: auto; right: -20px; border-left: none; border-right: 2px solid var(--guide);
  border-top-left-radius: 0; border-top-right-radius: 10px;
}

/* ---- receipt: what the graph did with what you just said ---- */
.aw-th-receipt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.aw-th-receipt b { color: var(--sic-ink); font-weight: 600; }

/* ---- [AI] thinking: dots on the Moon's time, in the bubble it speaks from ---- */
.aw-th-thinking { display: inline-flex; gap: 3px; padding: 6px 2px; }
.aw-th-thinking__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) {
  .aw-th-thinking__dot { animation: aw-th-pulse var(--motion-moon) infinite ease-in-out; }
  .aw-th-thinking__dot:nth-child(2) { animation-delay: 0.2s; }
  .aw-th-thinking__dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes aw-th-pulse { 50% { opacity: 0.3; } }
}

/* ---- pass-dots: header pass-status (a dot per pass, gold for retrying) ---- */
.aw-th-passdots {
  display: inline-flex; gap: 5px; align-items: center;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone);
}
.aw-th-passdots__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sic-ink); }
.aw-th-passdots__dot--todo { background: transparent; border: 1px solid var(--mark); }
.aw-th-passdots__dot--retry { width: 8px; height: 8px; background: transparent;
  border: 1.5px dashed var(--sic-gold); }
.aw-th-passdots__dot--fail { background: var(--sic-red); }

/* ---- timeline rail: anchored to recording time; NEVER moves on expand ----
   Speaker-colored ticks; gold beads mark for-you items (wayfinding only —
   the CTAs stay visible inline). --sticky pins it to the viewport. */
.aw-th-railwrap { position: relative; }
.aw-th-rail { position: relative; height: 100%; }
.aw-th-rail--sticky { position: sticky; top: 0; }
.aw-th-rail__line { position: absolute; left: 26px; top: 0; bottom: 0; width: 2px;
  background: var(--guide); border-radius: 2px; }
.aw-th-rail__silence { position: absolute; left: 22px; width: 10px; background: var(--ink-wash); border-radius: 4px; }
.aw-th-rail__tick { position: absolute; left: 20px; width: 14px; height: 2.5px; border-radius: 2px; background: var(--mark); }
.aw-th-rail__tick--scarlet { background: var(--sic-terr); }
.aw-th-rail__tick--tony    { background: var(--sic-blue); }
.aw-th-rail__tick--terr    { background: var(--sic-terr); }
.aw-th-rail__tick--blue    { background: var(--sic-blue); }
.aw-th-rail__tick--red     { background: var(--sic-red); }
.aw-th-rail__tick--gold    { background: var(--sic-gold); }
.aw-th-rail__tick--stone   { background: var(--sic-stone); }
.aw-th-rail__bead {
  position: absolute; left: 21.5px; width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--sic-gold); background: var(--gold-tint); cursor: pointer;
}
.aw-th-rail__bead:hover, .aw-th-rail__bead.is-hover { background: var(--gold-target); }
.aw-th-rail__bead:active, .aw-th-rail__bead.is-active { background: var(--gold-target); }
.aw-th-rail__bead:focus-visible, .aw-th-rail__bead.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-rail__time { position: absolute; left: 36px; font-family: var(--font-code);
  font-size: 9.5px; color: var(--ink-faint); transform: translateY(-50%); }

/* ---- aw-th-ab-chips: the [AI]'s clarifying options as reply-chips ----
   A/B (or N-way) options inside the [AI]'s bubble, each with a gold letter
   key. QUIETER than the bubble that holds them (task-514 #5, her nit
   2026-07-20): bubble-family radius — the 999px pill reads wrong on
   multi-line labels — hairline rule edge, soft ink, left-aligned. Answered:
   the chosen chip holds the gold FILL (same "selected" fill), the others
   dim, all become inert. */
.aw-th-ab-chips { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.aw-th-ab-chips__opt {
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft);
  background: none; border: 1px solid var(--rule);
  padding: 7px 12px; cursor: pointer; text-align: left; line-height: 1.45;
}
.aw-th-ab-chips__opt:hover, .aw-th-ab-chips__opt.is-hover { background: var(--ink-wash); border-color: var(--edge); }
.aw-th-ab-chips__opt:active, .aw-th-ab-chips__opt.is-active { background: var(--gold-tint); }
.aw-th-ab-chips__opt:focus-visible, .aw-th-ab-chips__opt.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-ab-chips__opt:disabled { cursor: default; }
.aw-th-ab-chips__opt--chosen { background: var(--gold-target); border-color: var(--sic-gold); color: var(--sic-ink); font-weight: 600; }
.aw-th-ab-chips__opt--dimmed { opacity: 0.45; }
.aw-th-ab-chips__key { color: var(--sic-gold); font-weight: 700; margin-right: 5px; }

/* ---- aw-th-dim-icons: dimensional glyph strip (muted idle, gold hot) ----
   The tooltip sits UNDERNEATH the glyph with a little arrow — the deployed
   tag-popover treatment (dashed edge, soft shadow). The full dimensional
   story (value, marker, reading) lives in the pop, never inline. */
.aw-th-dim-icons { display: inline-flex; gap: 6px; align-items: center; }
.aw-th-dim-icons__glyph { position: relative; }
.aw-th-dim-icons__glyph svg { display: block; width: 13px; height: 13px;
  stroke: var(--ink-faint); fill: none; stroke-width: 1.6; }
.aw-th-dim-icons__glyph--hot svg { stroke: var(--sic-gold); }
.aw-th-dim-icons__glyph:hover svg, .aw-th-dim-icons__glyph.is-hover svg { stroke: var(--sic-ink); }
.aw-th-dim-icons__pop {
  display: none; position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%); z-index: 9; min-width: 200px; max-width: 280px;
  background: var(--sic-paper); border: 1px dashed var(--edge-soft);
  padding: 8px 11px; font-family: var(--font-ui); font-size: 11.5px; line-height: 1.45;
  color: var(--ink-soft); box-shadow: 0 2px 14px var(--ink-wash); text-align: left;
}
.aw-th-dim-icons__pop b { color: var(--sic-ink); font-weight: 650; }
.aw-th-dim-icons__pop::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--edge-soft);
}
.aw-th-dim-icons__glyph:hover .aw-th-dim-icons__pop,
.aw-th-dim-icons__glyph.is-hover .aw-th-dim-icons__pop,
.aw-th-dim-icons__glyph:focus-visible .aw-th-dim-icons__pop { display: block; }

/* ---- aw-th-passline: the passes as they arrive (count · ✓ · retry gold) ---- */
.aw-th-passline { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.aw-th-passline__pass { font-family: var(--font-code); font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px; }
.aw-th-passline__pass b { color: var(--sic-ink); font-weight: 600; }
.aw-th-passline__pass--retry { color: var(--sic-gold); }

/* ---- aw-th-delivery: measured-prosody byline, read off the recording ---- */
.aw-th-delivery { font-family: var(--font-code); font-size: 11px; color: var(--ink-faint); }

/* ---- aw-th-composer-send: the one-verb composer (empty → typing → sent) ----
   One dashed field, one ink Send pill; identical everywhere. The "sent" state
   is a witnessed expression + receipt, rendered with the message grammar. */
.aw-th-composer-send { display: flex; gap: 10px; align-items: center;
  border-top: 1px solid var(--guide); margin-top: 26px; padding-top: 16px; }
.aw-th-composer-send__field {
  flex: 1; border: 1.5px dashed var(--edge-soft); padding: 10px 14px;
  color: var(--sic-ink); font-size: 14px; font-family: var(--font-ui); background: transparent;
}
.aw-th-composer-send__field::placeholder { color: var(--ink-faint); }
.aw-th-composer-send__field:focus { outline: none; border-color: var(--sic-ink); }
.aw-th-composer-send__field--typing { color: var(--sic-ink); border-color: var(--edge); font-family: var(--font2); }
.aw-th-composer-send__btn {
  flex: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--room); background: var(--sic-ink); border: none;
  padding: 9px 22px; cursor: pointer;
}
.aw-th-composer-send__btn:focus-visible, .aw-th-composer-send__btn.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
.aw-th-composer-send__btn:active, .aw-th-composer-send__btn.is-active { opacity: 0.85; }
.aw-th-composer-send__btn:disabled { cursor: default; opacity: 0.35; }

/* ================================================================
 * THE TWO-VIEW GRAMMAR (TM7, ratified 2026-07-17)
 * Conversation view = expressions + positions, ONE reply layer.
 * Stratum view = narratives + strata in context. The under-line is the
 * door up; position links in stratum digests are the doors back down.
 * ================================================================ */

/* ---- the stage: the conversation's column; opposite messages overlap
   through the middle band (message width 66% of an 820 stage) ---- */
.aw-th-stage { max-width: 820px; margin: 0 auto; }
/* on the r5 page the conversation breathes with the full column — the
   brackets stay ch-capped, ownership splits across the whole room */
.aw-th-page .aw-th-stage { max-width: none; margin: 0; }
.aw-th-stage .aw-th-msg { max-width: 66%; }

/* ---- the title block: source eyebrow · serif title · one meta line —
   top-left, OUTSIDE the conversation; the rail breathes below it ---- */
.aw-th-title { padding: 22px 0 18px; }
.aw-th-title__src { font-family: var(--font-code); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sic-stone); }
.aw-th-title__h { font-family: var(--font2); font-weight: 600; font-size: 24px;
  line-height: 1.15; margin: 4px 0 3px; }
.aw-th-title__meta { font-size: 12.5px; color: var(--muted); }

/* ---- the highlighting grammar: one rule everywhere ----
   --in = this call (gold dashed, anchors in place) · --out = another call
   (ink dashed, navigates, back returns) · --elided = no access (faint,
   request-access CTA in place, never fetches). */
.aw-th-ref { color: var(--sic-ink); background: none; border: none; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline dashed;
  text-underline-offset: 3px; }
.aw-th-ref--in { text-decoration-color: var(--sic-gold); }
.aw-th-ref--in:hover, .aw-th-ref--in.is-hover { background: var(--gold-tint); }
.aw-th-ref--out { text-decoration-color: var(--mark); }
.aw-th-ref--out:hover, .aw-th-ref--out.is-hover { text-decoration-color: var(--sic-ink); }
.aw-th-ref--elided { color: var(--ink-faint); text-decoration-color: var(--ink-faint); }
.aw-th-ref--elided:hover, .aw-th-ref--elided.is-hover { color: var(--muted); }
.aw-th-ref:focus-visible, .aw-th-ref.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }

/* ---- position anatomy: frame · digest · under-line ---- */
.aw-th-frame { font-family: var(--font-ui); font-weight: 650; font-size: 15px; line-height: 1.4; }
.aw-th-frame__link { color: inherit; text-decoration: none; cursor: pointer; }
.aw-th-frame__link:hover, .aw-th-frame__link.is-hover { text-decoration: underline dashed;
  text-underline-offset: 4px; text-decoration-color: var(--sic-gold); }
.aw-th-digest { margin-top: 9px; border-top: 1px dashed var(--guide); padding-top: 9px;
  font-family: var(--font2); font-weight: 400; font-size: 13.5px; line-height: 1.62;
  color: var(--ink-soft); }
.aw-th-under { margin-top: 10px; border-top: 1px dashed var(--guide); padding-top: 9px;
  display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); font-family: var(--font-ui); font-weight: 400; }
.aw-th-under__kind { flex: none; font-family: var(--font-code); font-size: 10px;
  letter-spacing: 0.11em; text-transform: uppercase; }
.aw-th-under__name { font-family: var(--font2); font-style: italic; color: var(--ink-soft); }
/* the passage reply's door up: a narrative's name links to its page
   (task-701 integration) */
a.aw-th-under__name { text-decoration: underline dotted; text-underline-offset: 2px; }
a.aw-th-under__name:hover { color: var(--sic-ink); }

/* ---- the collapse stub: the presence marker under the ORIGIN card —
   collapse always leaves the way back visible ---- */
.aw-th-stub { display: inline-flex; align-items: center; gap: 5px; border: none;
  background: none; padding: 2px 4px; margin: 4px 4px 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.aw-th-stub:hover, .aw-th-stub.is-hover { color: var(--sic-ink); background: var(--ink-wash); }
.aw-th-stub:focus-visible, .aw-th-stub.is-focus { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-stub b { color: var(--sic-ink); font-weight: 600; }

/* ---- the cast: actors enter as the conversation's first exchange —
   witnessed presence, so they wear the bracket: yours closes right ---- */
.aw-th-actor { position: relative; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--sic-ink); background: transparent; }
.aw-th-actor::before, .aw-th-actor::after {
  content: ""; position: absolute; left: 0; width: 14px; height: 0;
  border-top: 2px solid var(--sic-ink);
}
.aw-th-actor::before { top: 0; }
.aw-th-actor::after  { bottom: 0; }
.aw-th-msg--mine > .aw-th-actor { border-left: none; border-right: 2px solid var(--sic-ink);
  padding: 2px 20px 2px 0; text-align: right; }
.aw-th-msg--mine > .aw-th-actor::before,
.aw-th-msg--mine > .aw-th-actor::after { left: auto; right: 0; }
.aw-th-actor__name { font-family: var(--font2); font-weight: 600; font-size: 15px; }
.aw-th-actor__stats { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* ---- the stratum view: the destination gather navigates to — derived,
   so paper (sharp, flat) ---- */
.aw-th-stratum { border: 1px solid transparent; padding: 13px 17px;
  background: var(--sic-paper); font-family: var(--font-ui);
  transition: border-color var(--motion-sun), background var(--motion-sun); }
.aw-th-stratum__name { font-family: var(--font-code); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sic-stone); }
.aw-th-stratum__frame { font-weight: 650; font-size: 16px; line-height: 1.35; margin-top: 3px; }
.aw-th-back { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone); background: none; border: none;
  cursor: pointer; padding: 2px 0; }
.aw-th-back:hover, .aw-th-back.is-hover { color: var(--sic-ink); }
/* origin marker in the stratum view: the call's name in gold, nothing more */
.aw-th-origin { color: var(--sic-gold); font-weight: 700; }

/* ---- rail additions: clickable ticks + the viewport bracket ("you") ---- */
.aw-th-rail__tick { cursor: pointer; }
.aw-th-rail__tick:hover, .aw-th-rail__tick.is-hover { height: 4px; }
.aw-th-rail__here { position: absolute; left: 14px; width: 26px;
  border: 2px solid var(--sic-gold); opacity: 0.55; pointer-events: none; }
.aw-th-rail__herelabel { position: absolute; left: 38px; font-family: var(--font-code);
  font-size: 9.5px; color: var(--sic-gold); transform: translateY(-50%); }

/* ---- composer: the deployed footer, r5 [F] — ONE dashed enclosure
   holding + · the field · the mono [commit] tag (the gold ask-box, ink
   Send pill and round attach retired with the r5 dock; task-544) ---- */
.aw-th-composer-send--tall { align-items: center; gap: 12px;
  border: 1.5px dashed var(--mark); padding: 7px 17px;
  margin-top: 0; border-top-style: dashed; }
.aw-th-composer-send--tall .aw-th-composer-send__field {
  border: none; padding: 8px 0; }
.aw-th-composer-send--tall .aw-th-composer-send__field:focus { border: none; }
.aw-th-composer-send--tall .aw-th-composer-send__btn {
  background: none; color: var(--sic-stone); font-family: var(--font-code);
  font-size: 12px; font-weight: 400; letter-spacing: 0.05em; padding: 4px 2px; }
.aw-th-composer-send--tall .aw-th-composer-send__btn:hover:not(:disabled) { color: var(--sic-ink); }
.aw-th-composer-send__attach { flex: none; border: none; background: none;
  color: var(--sic-ink); font-family: var(--font-ui); font-size: 15px; line-height: 1;
  padding: 4px 2px; cursor: pointer; }
.aw-th-composer-send--tall .aw-th-composer-send__btn { font-family: var(--font1-mono); }
.aw-th-composer-send__attach:hover, .aw-th-composer-send__attach.is-hover {
  color: var(--sic-gold); }
.aw-th-composer-send__attach:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }

/* ---- the pulled-out quote (TM8 v2): the words come FIRST, as plain text
   with the gold block-quote rule — no pill, no chrome. Hover is textual
   (a quiet highlight); click navigates per the ref grammar. ---- */
.aw-th-quoteblock { font-family: var(--font2); font-size: 15.5px; line-height: 1.5;
  color: var(--sic-ink); border-left: 2px solid var(--sic-gold);
  padding-left: 11px; margin: 4px 0 2px; cursor: pointer;
  transition: background var(--motion-sun); }
.aw-th-quoteblock:hover, .aw-th-quoteblock.is-hover,
.aw-th-quoteblock:focus-visible { background: var(--gold-tint); outline: none; }
.aw-th-quoteblock__src { font-size: 11.5px; color: var(--muted);
  font-family: var(--font-ui); padding-left: 13px; }

/* ---- the merge room's check line (a fact, not a gate — the repo never
   waits on reviews; Merge is live on green checks) ---- */
.aw-th-check { font-family: var(--font-code); font-size: 11px; color: var(--muted);
  display: inline-flex; gap: 5px; align-items: center; }
.aw-th-check b { color: var(--sic-ink); }

/* ---- the dims MARK (2026-07-17 v2 ruling: ONE icon for all dimensions,
   ONE tooltip) — a single quiet glyph after the byline; the under-tooltip
   lists every dimensional reading as rows. Replaces the per-dimension
   glyph strip as the default (aw-th-dim-icons remains for dense/desktop
   analysis surfaces). ---- */
.aw-th-dims-mark { position: relative; display: inline-flex; cursor: default; }
.aw-th-dims-mark svg { display: block; width: 13px; height: 13px;
  stroke: var(--ink-faint); fill: none; stroke-width: 1.6; }
.aw-th-dims-mark--hot svg { stroke: var(--sic-gold); }
.aw-th-dims-mark:hover svg, .aw-th-dims-mark.is-hover svg { stroke: var(--sic-ink); }
.aw-th-dims-mark__pop { display: none; position: absolute; top: calc(100% + 9px);
  left: 50%; transform: translateX(-50%); z-index: 9; min-width: 230px; max-width: 300px;
  background: var(--sic-paper); border: 1px dashed var(--edge-soft);
  padding: 9px 12px; font-family: var(--font-ui); font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft); box-shadow: 0 2px 14px var(--ink-wash); text-align: left; }
.aw-th-dims-mark__pop::before { content: ""; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-bottom-color: var(--edge-soft); }
.aw-th-dims-mark__row { display: flex; gap: 8px; align-items: baseline; }
.aw-th-dims-mark__row + .aw-th-dims-mark__row { margin-top: 4px; }
.aw-th-dims-mark__kind { flex: none; font-family: var(--font-code); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sic-stone); min-width: 62px; }
.aw-th-dims-mark__row b { color: var(--sic-ink); font-weight: 650; }
.aw-th-dims-mark:hover .aw-th-dims-mark__pop, .aw-th-dims-mark.is-hover .aw-th-dims-mark__pop,
.aw-th-dims-mark:focus-visible .aw-th-dims-mark__pop { display: block; }

/* ==== the theatre PAGE frame (task-485 rebuild, carried through the merge) ==
   ONE room below the aw-header: the page is --room; brackets and paper
   sit on it, nothing below the header changes color. The rail column is viewport-fixed
   via sticky — it never moves when threads expand. Mobile (M·A): the rail
   steps aside; pass-dots live in the header. */
/* the conversation column IS the feed's column, ALWAYS, and the rail is
   an ACTUAL SIDEBAR (r7 redline + her mock, 2026-07-26): the theatre
   claims the full 960 container; the rail lives in the viewport's left
   band — pinned toward the viewport edge (16px) when the margin is
   tight, narrowing down to ~200px (rows already one-line ellipsize),
   and hugging the content column (28px gap) once a huge screen leaves
   ≥ its full width of margin. The column NEVER shrinks for the rail —
   only below ~1424px (rail would drop under 200px) does it fold to the
   rail-line + drawer. Geometry: content-left = (100vw − 960)/2, so
   pinned-left relative to the column is 16px − content-left, and the
   hug position is −(264+28). The numbers are tokens (--rail-w, --rail-gap,
   --rail-edge, --landing-max) shared with the position page's sidebar, so
   the two pages cannot drift apart. */
.aw-th-cols { position: relative; }
.aw-th-railcol { position: absolute; top: 0; bottom: 0;
  width: min(var(--rail-w), calc((100vw - var(--landing-max)) / 2 - 2 * var(--rail-edge)));
  left: max(calc(-1 * (var(--rail-w) + var(--rail-gap))), calc(var(--rail-edge) - (100vw - var(--landing-max)) / 2)); }
.aw-th-railcol { border-right: 1px solid var(--rule); }
.aw-th-railcol .aw-th-rail { margin: 18px 0; }
.aw-th-railcol .aw-th-rail--sticky { top: 76px; }
/* breathing room inside the container — indent-0 papers, reactions and
   left expressions never touch the column edge (r7 redline) */
.aw-th-flowcol { padding: 6px 24px 26px; min-width: 0; }
.aw-th-flow { padding-bottom: 8px; }
/* the deployed dock treatment (task-514 #4, after .lv-batchbar): the stuck
   composer is a FULL-BLEED opaque band — content scrolling under it meets
   an edge, never shows through beside the input — and sits above the rail
   z-band. The inner width re-centers to the stage via the side padding. */
.aw-th-composer-row { position: sticky; bottom: 0; z-index: 6;
  background: var(--room);
  margin: 20px calc(-50vw + 50%) 0;
  /* the inner width re-centers to the padded 960 column (960 − 2×24) */
  padding: 10px max(calc((100vw - 912px) / 2), 30px) 14px;
  border-top: 1px solid var(--guide); }
.aw-th-composer-row .aw-th-below { margin-bottom: 8px; }
.aw-th-composer-row .aw-th-composer-send { border-top: none; margin-top: 0;
  padding-top: 0; }
/* the r5 dock composer is a closed dashed ENCLOSURE — the divider-era
   clobber above must not behead it (top edge cut + vertical squish,
   Scarlet's walk 2026-07-23) */
.aw-th-composer-row .aw-th-composer-send--tall {
  border-top: 1.5px dashed var(--mark); padding-top: 7px; }
.aw-th-digest--quiet { color: var(--ink-faint); font-style: italic; }
.aw-th-digest__note { color: var(--ink-faint); }
/* the pin-to-bottom sentinel (task-514 #3): at desktop nothing is fixed
   at the floor, so the end is the end */
.aw-th-endsentinel { scroll-margin-bottom: 0; }

/* ---- the two full-screen views (TM7): stratum view + node view ----------
   Navigations, never morphs: the under-line / frame click pushes history,
   back returns. The arrived-from narrative wears the gold dashed edge; the
   origin call's name is gold (aw-th-origin). */
.aw-th-view { max-width: 760px; margin: 0 auto; padding: 18px 24px 40px; }
.aw-th-view__caption { font-family: var(--font-code); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 22px 0 10px; }
.aw-th-view .aw-th-msg { max-width: 100%; }
.aw-th-elidedline { display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-code); font-size: 11px; color: var(--ink-faint); }

/* ==== r5 devices (task-543; sic-identity-program rulings 11–30; comps 535
   [T1·r2]/[S]/[O]/[M] · 516 T·e/T·g/C·s · 547 [M-T]/[M-S]/[M-O]/[M-M]) ==== */

/* ---- the theatre page wears the comps' exact type + geometry (redline
   2026-07-22, full-pass): serif 17px witnessed speech in 52ch brackets with
   15px arms and 22px inset; the name line lives INSIDE the bracket, mono
   stone ('tony · 00:14' — ruling 9: mono carries names, meta, eyebrows);
   meta/below lines are mono stone; papers cap at 56ch. Page-scoped so the
   feed's composition on the same devices is untouched. ---- */
.aw-th-page .aw-th-msg { max-width: none; }
/* r7c redline (2026-07-26): the message columns carry the FEED's card
   width (660px) — in the 960 column the left and right bands overlap
   through the middle, the chat crossing TM6 asks for */
.aw-th-page .aw-th-exp { padding: 2px 0 2px 22px; max-width: 660px;
  font-size: 17px; line-height: 1.5; }
.aw-th-page .aw-th-exp::before, .aw-th-page .aw-th-exp::after { width: 15px; }
.aw-th-page .aw-th-msg--mine > .aw-th-exp,
.aw-th-page .aw-th-msg--mine .aw-th-vf .aw-th-exp,
.aw-th-page .aw-th-replies--mine .aw-th-exp {
  padding: 2px 22px 2px 0; }
/* mine-side blocks anchor at the RIGHT edge of their (shrink-wrapped)
   message — a ch-capped block otherwise sits left while its replies run
   wider (redline 2026-07-22: "right aligned reply isn't all the way
   right" — the parent bracket was the thing off the edge) */
.aw-th-page .aw-th-msg--mine > .aw-th-exp,
.aw-th-page .aw-th-msg--mine .aw-th-vf > .aw-th-exp {
  margin-left: auto; }
/* the iMessage rule (r8d): a right-anchored bubble SHRINK-WRAPS to its
   words and reads left-aligned once it wraps — the bubble hugs the right
   edge, the text reads like text */
.aw-th-page .aw-th-msg--mine > .aw-th-exp,
.aw-th-page .aw-th-msg--mine .aw-th-vf > .aw-th-exp {
  width: fit-content; text-align: left; }
.aw-th-exp--namein .aw-th-name {
  margin: 0 0 4px; font-family: var(--font1-mono); font-size: 11.5px;
  color: var(--sic-stone); }
.aw-th-exp--namein .aw-th-name .aw-th-who,
.aw-th-exp--namein .aw-th-name .aw-th-aimark {
  font-weight: 400; color: var(--sic-stone); font-family: var(--font1-mono);
  font-size: 11.5px; }
.aw-th-page .aw-th-msg--mine .aw-th-exp--namein .aw-th-name {
  justify-content: flex-end; }
.aw-th-page .aw-th-below { font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-stone); }
/* r7d: reply-level blocks carry the parent width minus the 56px reply
   step (660 − 56 = 604) — outer edges align with the parent, the feed's
   reply geometry */
.aw-th-page .aw-th-pos { max-width: 604px; }
.aw-th-page .aw-th-reply .aw-th-exp { max-width: 604px; }
.aw-th-page .aw-th-reply .aw-th-exp { font-size: 13.5px; }
/* comp reply geometry: 26×30 square elbow in --mark, content at 56px */
.aw-th-page .aw-th-replies { padding-left: 56px; }
.aw-th-page .aw-th-replies--mine { padding-left: 0; padding-right: 56px; }
.aw-th-page .aw-th-reply::before { left: -36px; top: -14px;
  width: 26px; height: 30px;
  border-left: 1.5px solid var(--mark); border-bottom: 1.5px solid var(--mark); }
.aw-th-page .aw-th-replies--mine > .aw-th-reply::before { left: auto; right: -36px;
  border-left: none; border-right: 1.5px solid var(--mark); }
/* mine-side replies mirror: content hugs the right edge with its elbow */
.aw-th-page .aw-th-replies--mine .aw-th-reply { text-align: right; }
.aw-th-page .aw-th-replies--mine .aw-th-reply .aw-th-pos { margin-left: auto;
  text-align: left; }
.aw-th-page .aw-th-replies--mine .aw-th-reply > .aw-th-exp { margin-left: auto;
  width: fit-content; text-align: left; }

/* ---- the waypoint rail (ruling 14): positions-only, fixed marker column,
   one-line ellipsis, active = ink text + gold marker, NO caret; reviews &
   reactions beneath; the key at the BOTTOM. ---- */
.aw-th-wrail { position: sticky; top: 76px; padding: 26px 20px;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-th-wrail__head { color: var(--sic-ink); margin: 0 0 12px; }
.aw-th-wrail__head:not(:first-child) { margin-top: 24px; }
.aw-th-wrail__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; }
.aw-th-wrail__item { display: flex; gap: 8px; align-items: baseline;
  width: 100%; white-space: nowrap; overflow: hidden;
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; }
.aw-th-wrail__item:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
/* hover on the clickable waypoints (redline 2026-07-23): text takes ink,
   the marker takes gold — the active vocabulary, previewed */
button.aw-th-wrail__item:hover { color: var(--sic-ink); }
button.aw-th-wrail__item:hover .aw-th-wrail__mk { color: var(--sic-gold); }
.aw-th-wrail__mk { flex: none; width: 3ch; }
.aw-th-wrail__tx { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-th-wrail__item--active { color: var(--sic-ink); }
.aw-th-wrail__item--active .aw-th-wrail__mk { color: var(--sic-gold); }
.aw-th-wrail__item--open { color: var(--sic-gold); cursor: default; }
.aw-th-wrail__item--arrived { color: var(--sic-gold); cursor: default; }
.aw-th-wrail__item--arrived .aw-th-wrail__mk { color: var(--sic-ink); }
/* task-701.15 (W6): a position row reads in words — its word and
   'relevant' on the first line, its frame on the second, one line each */
.aw-th-wrail__item--pos { flex-direction: column; align-items: flex-start;
  gap: 2px; }
.aw-th-wrail__item--pos .aw-th-wrail__tx { width: 100%; }
.aw-th-wrail__words { color: var(--sic-stone); }
.aw-th-wrail__word { color: var(--sic-ink); }
.aw-th-wrail__item--pos[data-word="mentioned"] .aw-th-wrail__word { color: var(--sic-stone); }
.aw-th-wrail__relevant { color: var(--sic-gold); }
.aw-th-wrail__item--pos.aw-th-wrail__item--active .aw-th-wrail__word,
button.aw-th-wrail__item--pos:hover .aw-th-wrail__word { color: var(--sic-gold); }
/* r6 redline (2026-07-23): a position's reviews & reactions intersperse
   UNDER it — indented past the marker column, gold (the waiting/graph
   vocabulary), one line each like every rail row */
.aw-th-wrail__sublist { list-style: none; margin: 4px 0 0; padding: 0 0 0 2ch;
  display: flex; flex-direction: column; gap: 5px; }
.aw-th-wrail__sublist .aw-th-wrail__item { font-size: 10px; }
.aw-th-wrail__item--reaction { color: var(--sic-gold); }
.aw-th-wrail__item--reaction .aw-th-wrail__mk { color: var(--sic-gold); }
.aw-th-wrail__sublist button.aw-th-wrail__item { cursor: pointer; }
/* run-group states (R-S, ruling 33): gold where it waits on you, red names
   the failed-open dim, pending stays faint; only jump rows are buttons */
span.aw-th-wrail__item { cursor: default; }
.aw-th-wrail__item--done { color: var(--sic-stone); }
.aw-th-wrail__item--pending { color: var(--ink-faint); }
.aw-th-wrail__item--fail { color: var(--sic-red); }

/* ---- the anchor: the 'call · line' a link lands on wears the
   selection's gold fill ---- */
.aw-th-msg--anchored { scroll-margin-top: 96px; }

/* ---- task-701.42: the call page (Scarlet, 2026-09-29, on comp C rev 10:
   "yes good … build it"). One position selected: its row — the feed's
   frozen card (row.css), full width in the conversation — at its first
   line; its statements whole, in ink, full width, `who · line N` inside
   the bracket, the observation word at the end; every other passage one
   of 701.41's lines, and each other position collapsed at its own first
   line to its frame and pills. Read and unread is bold and not bold,
   never red. ---- */
.aw-th-selrow { container: aw-inbox / inline-size; margin: 22px 0 6px;
  scroll-margin-top: 96px; text-align: left; }
.aw-th-selrow .aw-row { margin: 0; }
.aw-th-selrow > .aw-th-under { margin: 8px 26px 0; }
.aw-th-selrow + .aw-th-replies { margin-bottom: 8px; }
/* the selected position's statements: the passage itself — full width, in
   ink; the viewer's own on the right, hugging it (the iMessage rule) */
.aw-th-page .aw-th-msg--stmt { margin: 14px 0; }
.aw-th-page .aw-th-msg--stmt + .aw-th-msg--stmt { margin-top: 18px; }
.aw-th-page .aw-th-msg--stmt > .aw-th-exp { max-width: none; }
.aw-th-page .aw-th-msg--stmt.aw-th-msg--mine > .aw-th-exp { max-width: var(--th-stmt-mine-max); }
.aw-th-stmt__line { color: var(--sic-ink); text-decoration: underline dashed;
  text-underline-offset: 3px; }
.aw-th-stmt__line:hover { color: var(--sic-gold); }
.aw-th-stmt__line:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
/* the observation word ends the passage and opens its evidence: the last
   paragraph runs inline so the word sits at the end of its words */
.aw-th-msg--stmt > .aw-th-exp > p:last-of-type { display: inline; }
.aw-th-word { background: none; border: none; padding: 0 0 0 4px; margin: 0;
  cursor: pointer; font-family: var(--font1-mono); font-size: 11.5px;
  color: var(--sic-stone); text-decoration: underline dotted;
  text-underline-offset: 3px; white-space: nowrap; }
.aw-th-word:hover, .aw-th-word[aria-expanded="true"] { color: var(--sic-ink); }
.aw-th-word:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-evid { margin: 4px 0 0; padding-left: 24px; font-family: var(--font1-mono);
  font-size: 11px; line-height: 1.6; color: var(--sic-stone); }
.aw-th-msg--mine > .aw-th-evid { padding: 0 24px 0 0; text-align: right; }
.aw-th-evid__region { color: var(--sic-ink); }
.aw-th-evid__q { quotes: none; font-family: var(--font2); font-size: 13px; color: var(--sic-ink); }
/* a line under a second position names it; a click selects it */
.aw-th-also { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0 24px; }
.aw-th-also--mine { justify-content: flex-end; margin: 4px 24px 0 0; }
.aw-th-erun > .aw-th-also { margin: 0 0 4px; }
.aw-th-also__to { max-width: 100%; min-width: 0; background: none; border: none;
  padding: 0; cursor: pointer; font-family: var(--font1-mono); font-size: 11px;
  line-height: 1.6; color: var(--sic-ink); text-decoration: underline dashed;
  text-underline-offset: 3px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: left; }
.aw-th-also__to:hover { color: var(--sic-gold); }
.aw-th-also__to:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
/* another position, collapsed at its first line: frame + pills, no
   narration. Unread: bold, ink bracket. Read: regular, gray, the bracket
   and pills faint. */
.aw-th-crow { --crow-ink: var(--rule); position: relative; display: flex;
  flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box;
  margin: 6px 0 10px; padding: 9px 20px 10px; background: transparent;
  border: none; cursor: pointer; text-align: left; font: inherit;
  color: var(--sic-stone); transition: background var(--motion-sun); }
.aw-th-crow::before, .aw-th-crow::after { content: ""; position: absolute;
  top: 0; bottom: 0; width: var(--brk-arm); pointer-events: none;
  background:
    linear-gradient(var(--crow-ink), var(--crow-ink)) 0 0 / 1px 100%,
    linear-gradient(var(--crow-ink), var(--crow-ink)) 0 0 / var(--brk-arm) 1px,
    linear-gradient(var(--crow-ink), var(--crow-ink)) 0 100% / var(--brk-arm) 1px;
  background-repeat: no-repeat; }
.aw-th-crow::before { left: 0; }
.aw-th-crow::after { right: 0; transform: scaleX(-1); }
.aw-th-crow--unread { --crow-ink: var(--sic-ink); color: var(--sic-ink); }
.aw-th-crow:hover { --crow-ink: var(--sic-gold); background: var(--gold-tint); }
.aw-th-crow:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
.aw-th-crow__frame { font-family: var(--font-ui); font-size: 14px; line-height: 1.4;
  font-weight: 400; }
.aw-th-crow--unread .aw-th-crow__frame { font-weight: 700; }
.aw-th-crow__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.aw-th-crow__pill { display: inline-block; font-family: var(--font1-mono);
  font-size: 10.5px; line-height: 1.5; letter-spacing: 0.02em; padding: 1px 7px;
  color: var(--sic-stone); border: 1px solid var(--rule); }
.aw-th-crow--unread .aw-th-crow__pill--kind { color: var(--sic-gold);
  border-color: var(--sic-gold); border-style: dashed; }
.aw-th-crow--unread .aw-th-crow__pill--rev { color: var(--sic-ink); border-color: var(--sic-ink); }
.aw-th-crow--unread .aw-th-crow__pill--todo { color: var(--sic-gold);
  border-color: var(--sic-gold); border-style: dashed; }
.aw-th-crow--unread .aw-th-crow__pill--rel { color: var(--sic-gold); border-color: var(--sic-gold); }
/* what the selected change displaced: struck one-liners after its span */
.aw-th-gone { width: var(--th-run-width); margin: var(--th-run-space) auto; }
.aw-th-gone__line { margin: 0; font-family: var(--font1-mono);
  font-size: var(--th-line-mono); line-height: 1.55; color: var(--sic-stone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-th-gone__line del { text-decoration-color: var(--sic-stone); }
.aw-th-gone__line i { font-family: var(--font2); font-style: normal;
  font-size: var(--th-line-words); }
.aw-th-gone__loc { color: var(--sic-stone); text-decoration: underline dashed;
  text-underline-offset: 3px; }
.aw-th-gone__loc:hover { color: var(--sic-ink); }
.aw-th-gone__note { margin: 2px 0 0; font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-stone); }
/* the page head: the room's caption, the fold on its right */
.aw-th-callhead { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: baseline; gap: 8px 16px; margin: 0 0 26px; }
.aw-th-callhead > .aw-th-datehead { grid-column: 2; margin: 0; }
.aw-th-callhead > .aw-th-layers { grid-column: 3; justify-self: end; }
.aw-th-layers { display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font1-mono); font-size: 12px; color: var(--sic-stone); }
.aw-th-layers button { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--sic-stone); }
.aw-th-layers button:hover { color: var(--sic-ink); }
.aw-th-layers button[aria-pressed="true"] { color: var(--sic-ink);
  text-decoration: underline; text-underline-offset: 4px; }
.aw-th-layers button:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 2px; }
/* the rail's positions are the selector: frame (bold while unread), its
   meta, the review word with its names, the viewer's own act; the one the
   page holds on the gold selection wash */
.aw-th-wrail__pitem { box-sizing: border-box; display: flex; flex-direction: column;
  gap: 3px; width: calc(100% + 16px); margin: 0 -8px; padding: 8px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; text-align: left; font: inherit; color: var(--sic-stone); }
.aw-th-wrail__pitem:hover { color: var(--sic-ink); }
.aw-th-wrail__pitem:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-wrail__pitem--selected { background: var(--gold-target); }
.aw-th-wrail__pframe { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-family: var(--font-ui);
  font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--ink-soft); }
.aw-th-wrail__pitem--unread .aw-th-wrail__pframe { font-weight: 700; color: var(--sic-ink); }
.aw-th-wrail__pitem--selected .aw-th-wrail__pframe { color: var(--sic-ink); }
.aw-th-wrail__pmeta, .aw-th-wrail__prev, .aw-th-wrail__pyou { font-size: 10.5px;
  line-height: 1.5; white-space: normal; }
.aw-th-wrail__prev { color: var(--sic-ink); }
.aw-th-wrail__prev--todo { color: var(--sic-gold); }

/* ---- the one-line runs (task-701.41: the July r5 rulings 17/18 — "every
   expression read into nothing stays ON the page as one tight line" —
   restored by Scarlet 2026-09-29, without the run's header). Every passage
   that changed nothing reads as one line, names at the OUTER edges, the
   consecutive ones sharing a centred 3/5 column (a run may be one line).
   A click opens a line in place in the muted register — its
   bracket in the rule colour, its words in stone, at the page's passage
   size (July declared 13.5px here, which the page's passage rule always
   outranked; the size she saw and ruled on is the page's) — and a click on
   the opened passage folds it back. ---- */
.aw-th-erun { display: flex; flex-direction: column; gap: 0;
  width: var(--th-run-width); margin: var(--th-run-space) auto; }
.aw-th-eline { display: block; width: 100%; border: none; background: none;
  padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--font1-mono); font-size: var(--th-line-mono); color: var(--sic-stone);
  line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-th-eline:hover { color: var(--sic-ink); }
.aw-th-eline:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-eline i { font-family: var(--font2); font-style: normal; font-size: var(--th-line-words); }
.aw-th-eline--mine { text-align: right; }
.aw-th-eline__who { opacity: 0.75; }
/* the opened passage: a click anywhere on it closes it; its name line is
   the keyboard's button (expression :name-toggle), drawn exactly as the
   plain name line — the button's own chrome goes, the .aw-th-name rules
   (colour, size, margins, the flex row) carry through */
.aw-th-erun__full { cursor: pointer; margin: var(--th-line-open-space) 0; }
.aw-th-name--toggle { width: 100%; border: none; background: none; padding: 0;
  font-family: inherit; font-weight: inherit; font-style: inherit;
  line-height: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
.aw-th-name--toggle:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-erun__full--mine { text-align: right; }
.aw-th-erun__full--mine .aw-th-name { justify-content: flex-end; }
.aw-th-exp--muted { --brk-stroke: var(--rule); color: var(--sic-stone); }
/* mine closes right and hugs the run's right edge, reading left once it
   wraps (the iMessage rule, r8d) */
.aw-th-erun__full--mine .aw-th-exp--muted { border-left: none;
  border-right: var(--brk-w) var(--brk-style) var(--brk-stroke);
  padding: 2px calc(18px + var(--brk-w)) 2px 0;
  width: fit-content; margin-left: auto; text-align: left; }
.aw-th-erun__full--mine .aw-th-exp--muted::before,
.aw-th-erun__full--mine .aw-th-exp--muted::after { left: auto; right: 0; }

/* ---- T·dim (ruling 32): the how-layer as annotation — mono readings on a
   hairline rule, verbatim signal spans in serif (witnessed speech quoted
   back); behind the one-toggle family, the ONLY thing that reflows ---- */
.aw-th-dimhint { border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--sic-stone); }
.aw-th-dimhint:hover { color: var(--sic-ink); }
.aw-th-dimhint:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-dimblock { border-top: 1px solid var(--rule); margin: 8px 0 0;
  padding-top: 8px; max-width: 52ch; }
.aw-th-dimrow { margin: 0 0 4px; font-family: var(--font1-mono);
  font-size: 11px; line-height: 1.6; color: var(--sic-stone); }
.aw-th-dimrow b { color: var(--sic-ink); font-weight: 400; }
.aw-th-dimrow i { font-family: var(--font2); font-style: normal;
  font-size: 12.5px; color: var(--sic-ink); }
.aw-th-msg--mine .aw-th-dimblock { margin-left: auto; text-align: right; }

/* ---- the r5 paper: the derived document carries its own mono eyebrow ----
   [kind · title] left, tags right; body prose is sans at reading weight;
   a narrative minted this call wears the double top rule (ruling 20). */
.aw-th-paper { font-weight: 400; }
.aw-th-paper__ey { display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: nowrap; align-items: baseline;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  margin: 0 0 9px; }
.aw-th-paper__eylink { border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--sic-ink); text-align: left; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-th-paper__tags { flex: none; }
.aw-th-paper__eylink:hover { color: var(--sic-gold); }
.aw-th-paper__eylink:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-paper__tags { display: inline-flex; gap: 10px; align-items: baseline;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
.aw-th-paper__tag { border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--sic-stone); }
.aw-th-paper__tag:hover { color: var(--sic-ink); }
.aw-th-paper__tag:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-paper__tagnote { color: var(--sic-stone); }
.aw-th-paper__body { font-family: var(--font-ui); font-size: 14.5px;
  font-weight: 400; line-height: 1.55; margin: 0 0 6px; }
.aw-th-paper--mint { border-top: 4px double var(--sic-ink); }

/* ---- the read-through member line (ruling 13): document order, the
   two-view underline grammar, the stepper walking members ---- */
.aw-th-memline { font-family: var(--font1-mono); font-size: 10.5px;
  color: var(--sic-stone); margin: 10px 0 0; font-weight: 400; }
.aw-th-memline__ref { color: var(--sic-ink); cursor: pointer;
  text-decoration: underline; text-decoration-style: dashed;
  text-underline-offset: 3px; }
.aw-th-memline__ref--in { text-decoration-color: var(--sic-gold); }
.aw-th-memline__ref--out { text-decoration-color: var(--sic-ink); }
.aw-th-memline__ref--elided { color: var(--ink-faint);
  text-decoration-color: var(--rule); }
.aw-th-stepper { display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-ink);
  border: 1px solid var(--mark); padding: 3px 8px; margin-left: 10px; }
.aw-th-stepper__b { border: none; background: none; padding: 0 2px;
  cursor: pointer; font: inherit; color: inherit; }
.aw-th-stepper__b:hover { color: var(--sic-gold); }

/* ---- the viewfinder (ruling 13): corner marks + [ member n/m ] on the
   stepper's target ---- */
.aw-th-vf { position: relative; }
.aw-th-vf__marks { position: absolute; inset: -7px -10px -7px -8px;
  pointer-events: none; }
.aw-th-vf__marks::before, .aw-th-vf__marks::after { content: "";
  position: absolute; right: 0; width: var(--vf-arm); height: var(--vf-arm);
  border-right: 1.5px solid var(--sic-ink); }
.aw-th-vf__marks::before { top: 0; border-top: 1.5px solid var(--sic-ink); }
.aw-th-vf__marks::after { bottom: 0; border-bottom: 1.5px solid var(--sic-ink); }
.aw-th-vf__tag { position: absolute; right: -8px; top: -19px;
  font-family: var(--font1-mono); font-size: 9.5px; color: var(--sic-ink); }
.aw-th-msg--mine .aw-th-vf__marks::before, .aw-th-msg--mine .aw-th-vf__marks::after {
  right: auto; left: 0; border-right: none; border-left: 1.5px solid var(--sic-ink); }
.aw-th-msg--mine .aw-th-vf__tag { right: auto; left: -8px; }

/* ---- the room captions ---- */
.aw-th-datehead { font-family: var(--font1-mono); font-size: 11.5px;
  color: var(--sic-stone); text-align: center; margin: 0 0 26px; }

/* ---- the dock is FIXED to the viewport floor (Scarlet, 2026-07-23 —
   sticky sat at the end of short boot-time content and jumped on load;
   same call as the feed dock, one grammar). The flow column reserves the
   dock's height so the last item scrolls clear; the share (no composer)
   reserves nothing. ---- */
/* ONE fixed floor stack (r8e): rail-line + dock ride together, flush —
   no hardcoded offset between them, whatever height the dock takes */
.aw-th-floor { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6;
  display: flex; flex-direction: column; }
.aw-th-page .aw-th-composer-row { position: static; margin: 0; width: 100%;
  padding: 10px max(var(--landing-gutter), calc((100vw - var(--landing-max)) / 2)) 14px; }
/* task-701.15 (514 #4): no composer rides the floor (W31) — at desktop the
   flow keeps its own 26px foot; below the rail's breakpoint it reserves the
   rail line's height (see the 1423px block) */

/* ---- first-contact orientation, three lives (D-O, ruling 36) ---- */
.aw-orient { font-family: var(--font-ui); font-size: 13px;
  color: var(--sic-stone); border-bottom: 1px solid var(--rule);
  padding: 8px 0 12px; margin: 0 0 22px; }
.aw-orient b { color: var(--sic-ink); font-weight: 600; }
.aw-orient__cta { font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-ink); text-decoration: none; white-space: nowrap; }
.aw-orient__cta:hover { color: var(--sic-gold); }
.aw-orient--state { text-align: center; }
.aw-orient__mono { font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-ink); }

/* ---- the review lenses (D-L, ruling 35): the chart through both — cards
   are the click targets, only the affected span moves ---- */
.aw-th-lenspair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 12px; }
.aw-th-lens { background: var(--card); border: 1px solid var(--rule);
  padding: 11px 14px; cursor: pointer;
  transition: border-color var(--motion-sun), background var(--motion-sun); }
.aw-th-lens:hover { border-color: var(--edge); }
.aw-th-lens:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-lens__tag { display: block; font-family: var(--font1-mono);
  font-size: 10px; color: var(--sic-stone); margin: 0 0 6px; }
.aw-th-lens__chart { font-family: var(--font2); font-size: 14px;
  line-height: 1.55; margin: 0; color: var(--sic-ink); font-weight: 400; }

/* ---- hub-reaction papers (R-X): the graph reacts, in the idiom ---- */
.aw-th-rxpaper { margin-top: 14px; }

/* ---- the after-call room (comp [T1·r2]) ---- */
.aw-th-aftercall { border-top: 1px solid var(--rule); margin-top: 34px;
  padding-top: 26px; }
/* the [AI] reaction in a correspondence thread: reply width (604), the
   thread's own anchor side — and its TEXT aligns against the message it
   answers (reply-to-mine reads left, reply-to-theirs reads right: the
   back-and-forth texture, r8c) */
.aw-th-page .aw-th-reply .aw-th-ai { max-width: 604px; }
.aw-th-page .aw-th-replies--mine .aw-th-reply .aw-th-ai { margin-left: auto;
  text-align: left; }
.aw-th-page .aw-th-replies:not(.aw-th-replies--mine) .aw-th-reply .aw-th-ai {
  text-align: right; }
/* the graph-reactions door INSIDE the commit reaction (r8d): a bracket
   chip in the mono register */
.aw-th-rxlinkrow { margin-top: 10px; }
.aw-th-rxlink { border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-ink); }
.aw-th-rxlink:hover { color: var(--sic-gold); }
.aw-th-rxlink:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
/* the reactions page (r8: the graph's reaction as a whole and in part) */
.aw-th-rxview .aw-th-pos { max-width: none; }
.aw-th-rxview .aw-th-rxpaper { margin-top: 18px; }
.aw-th-rxview__lead { font-family: var(--font-ui); font-size: 15.5px;
  line-height: 1.7; color: var(--sic-ink); margin: 18px 0 6px; }

/* ---- GitHub state as ONE deliberate mono line (r7 redline 2026-07-26:
   the reaction-box treatment read as an afterthought; the rail's run
   group is the status home, this line carries the ACT). The left stroke
   keeps the lifecycle vocabulary — gold-dashed = waits on YOU · double =
   merged · solid = committed; red lives in the state text only. */
.aw-th-prline { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px; padding: 8px 0 8px 22px; margin-top: 20px; width: 100%;
  border-left: var(--brk-stroke) solid var(--sic-ink);
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone); }
/* full-width git row: the act (merge chip / receipt / note) flushes to
   the right edge (r8d redline) */
.aw-th-prline > :last-child { margin-left: auto; }
.aw-th-prline--waiting { border-left-style: dashed; border-left-color: var(--sic-gold); }
.aw-th-prline--merged { border-left-style: double; border-left-width: 5px; }
.aw-th-prline__link { color: var(--sic-ink); text-decoration: underline;
  text-underline-offset: 3px; }
.aw-th-prline__link:hover { color: var(--sic-gold); }
.aw-th-prline .aw-th-check { font-size: 11px; }
.aw-th-check--red { color: var(--sic-red); }
.aw-th-refchain { font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-stone); }
.aw-th-mergechip { border: 1px solid var(--mark); background: none;
  padding: 4px 10px; cursor: pointer;
  font-family: var(--font1-mono); font-size: 11.5px; color: var(--sic-ink); }
.aw-th-mergechip--gold { border-color: var(--sic-gold); background: var(--gold-tint); }
.aw-th-mergechip:disabled { cursor: default; color: var(--sic-stone); }
.aw-th-mergechip:focus-visible { outline: 2px solid var(--sic-gold); outline-offset: 1px; }
.aw-th-prstub { display: block; border: none; background: none; cursor: pointer;
  border-left: 2px solid var(--rule); padding: 2px 0 2px 22px; margin-top: 20px;
  font-family: var(--font1-mono); font-size: 11px; color: var(--sic-stone);
  text-align: left; }
.aw-th-prstub:hover { color: var(--sic-ink); }
.aw-th-targetline { font-family: var(--font1-mono); font-size: 11px; }
.aw-th-targetline__branch { color: var(--sic-ink);
  text-decoration: underline; text-decoration-style: dashed;
  text-decoration-color: var(--sic-ink); text-underline-offset: 3px; }
.aw-th-targetline__repo { color: var(--sic-stone); }

/* ---- the stratum view as digest prose (ruling 15, comp [S]) ---- */
.aw-th-sview { padding-top: 30px; }
.aw-th-sview .aw-th-datehead { margin: 18px 0 26px; }
.aw-th-sdigest__paper { max-width: 66ch; }
.aw-th-sdigest .aw-th-digest { border-top: none; margin-top: 0; padding-top: 0;
  font-family: var(--font-ui); font-size: 15.5px; line-height: 1.75;
  color: var(--sic-ink); }
.aw-th-sview__under { font-family: var(--font1-mono); font-size: 11px;
  color: var(--sic-stone); margin: 18px 0 0; }
.aw-th-sview__key { font-family: var(--font1-mono); font-size: 10px;
  color: var(--sic-stone); margin: 26px 0 0; }

/* the MCP sheet (comp [M]) moved into the shared chrome as "ask your AI"
   (design/components/ask-ai.css; task-701, 2026-09-28) */

/* ---- mobile rail line + the one drawer grammar (rulings 21/22) ---- */
.aw-th-railline { display: none; }
.aw-th-drawer__scrim { position: fixed; inset: 0; z-index: 88;
  background: var(--scrim); }
.aw-th-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 89;
  border-top: 2px solid var(--sic-ink); background: var(--sic-paper);
  padding: 16px 16px 20px; min-height: 34vh; max-height: 70vh;
  overflow-y: auto; touch-action: pan-y; }
.aw-th-drawer__grab { width: 36px; height: 3px; background: var(--mark);
  margin: 0 auto 14px; }
.aw-th-drawer .aw-th-wrail { position: static; padding: 0; }

/* ---- the object viewer's mesh foot-band (comp [O]): the threshold back
   out to the product — the ONLY place the mesh enters the theatre ---- */
.aw-th-footband { display: grid; grid-template-columns: 1fr clamp(90px, 16%, 190px);
  border-top: 1px solid var(--rule); margin-top: 40px; }
.aw-th-footband__inner { padding: 24px 40px 30px; display: flex;
  align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.aw-th-footband__tag { font-family: var(--font1-mono); font-size: 12px;
  letter-spacing: 0.05em; color: var(--sic-stone); }
.aw-th-footband__cta { font-family: var(--font-ui); font-size: 14.5px;
  color: var(--sic-ink); text-decoration: none; display: inline-block;
  border: 1.5px solid var(--edge-strong); padding: 9px 19px; }
.aw-th-footband__cta:hover { border-color: var(--sic-gold); background: var(--gold-tint); }
.aw-th-footband__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* below ~1424 the sidebar band would drop under 200px: the column keeps
   its full width and the rail folds to the rail-line + drawer — the one
   sheet grammar (r7 redline: the column never shrinks) */
@media (max-width: 1423px) {
  .aw-th-railcol { display: none; }
  /* the rail line rides the (fixed) dock; the drawer rises from the floor */
  .aw-th-railline { display: flex; justify-content: space-between;
    align-items: center; width: 100%; border: none; cursor: pointer;
    background: var(--room); border-top: 1px solid var(--rule);
    padding: 9px 16px; margin: 0;
    font-family: var(--font1-mono); font-size: 10.5px; color: var(--sic-ink); }
  /* the rail line alone rides the floor now (task-701.15): reserve its
     height plus a breath, so the last message scrolls clear (514 #4) */
  .aw-th-flowcol:has(.aw-th-railline) { padding-bottom: 72px; }
  .aw-th-endsentinel { scroll-margin-bottom: 48px; }
  .aw-th-railline__open { color: var(--sic-gold); }
}

@media (max-width: 720px) {
  .aw-th-flowcol { padding: 6px 14px 20px; }
  .aw-th-passdots { gap: 3px; }
  .aw-th-passdots__dot { width: 5px; height: 5px; }
  .aw-th-view { padding: 12px 14px 30px; }
  /* VA center-channel geometry (rulings 21/23): base ownership reserve = 2
     steps, replies keep their parent's width shifted one step — "the reply
     column is the center channel". One 24px step everywhere. */
  .aw-th-stage .aw-th-msg { max-width: none; }
  .aw-th-stage > div > .aw-th-msg:not(.aw-th-msg--mine),
  .aw-th-stage > .aw-th-msg:not(.aw-th-msg--mine) { margin-right: 48px; }
  .aw-th-stage > div > .aw-th-msg--mine,
  .aw-th-stage > .aw-th-msg--mine { margin-left: 48px; margin-right: 0; }
  /* names sit at the edge their stroke is on — both sides (ruling 23) */
  .aw-th-msg--mine > .aw-th-name,
  .aw-th-msg--mine .aw-th-exp--namein .aw-th-name,
  .aw-th-replies--mine .aw-th-name { flex-direction: row-reverse; }
  .aw-th-page .aw-th-exp { font-size: 16px; padding-left: 16px; }
  .aw-th-page .aw-th-msg--mine > .aw-th-exp,
  .aw-th-page .aw-th-msg--mine .aw-th-vf .aw-th-exp,
  .aw-th-page .aw-th-replies--mine .aw-th-exp { padding: 2px 16px 2px 0; }
  .aw-th-page .aw-th-exp::before, .aw-th-page .aw-th-exp::after { width: 12px; }
  .aw-th-page .aw-th-replies { padding-left: 24px; }
  .aw-th-page .aw-th-replies--mine { padding-left: 0; padding-right: 24px; }
  .aw-th-page .aw-th-reply::before { left: -16px; top: -10px; width: 12px; height: 24px; }
  .aw-th-page .aw-th-replies--mine > .aw-th-reply::before { left: auto; right: -16px; }
  /* the one-line runs: one step, symmetric (ruling 21 mobile) */
  .aw-th-erun { width: auto; margin-left: var(--th-run-inset); margin-right: var(--th-run-inset); }
  /* task-701.42: the call page on a phone — the fold is the page; the
     displaced lines take the runs' margins; the head stacks */
  .aw-th-gone { width: auto; margin-left: var(--th-run-inset); margin-right: var(--th-run-inset); }
  .aw-th-callhead { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .aw-th-callhead > .aw-th-datehead, .aw-th-callhead > .aw-th-layers { grid-column: 1; justify-self: center; }
  .aw-th-selrow > .aw-th-under { margin: 8px 16px 0; }
  /* the lens pair stacks (D-L at phone width) */
  .aw-th-lenspair { grid-template-columns: 1fr; }
  /* foot-band stacks (comp [M-O]) */
  .aw-th-footband { grid-template-columns: 1fr; }
  .aw-th-footband__inner { padding: 16px; flex-direction: column;
    align-items: flex-start; gap: 12px; }
  .aw-th-footband__img { height: 56px; }
}

/* ------------------------------------------------- the walkthrough overlay
   (task-553, r5.4 rev 4): ONE card at a time — the instructing card is
   paper with an ink border; the viewfinder corners mark the one target;
   the tick runs card-edge → target; everything else drops to .38. The
   hero is fixed in the lower corner and dims nothing. */
.aw-th-page { position: relative; }
.aw-wk-dim { opacity: .38; transition: opacity .25s ease; }
.aw-wk-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.aw-wk-card { position: absolute; width: 340px; max-width: calc(100vw - 32px);
  background: var(--sic-paper); border: 1.5px solid var(--sic-ink);
  padding: 14px 16px; pointer-events: auto; }
.aw-wk-card--hero { position: fixed; left: 50%; top: 92px; right: auto;
  bottom: auto; transform: translateX(-50%); width: 500px;
  max-width: calc(100vw - 32px); z-index: 8; padding: 20px 24px 18px; }
.aw-wk-card--hero .aw-wk-card__body { font-size: 15px; line-height: 1.55; }
.aw-wk-card__ey { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin: 0 0 7px; display: flex;
  justify-content: space-between; letter-spacing: 0.04em; }
.aw-wk-card__body { font-family: var(--font-ui); font-size: 13.5px;
  line-height: 1.5; color: var(--sic-ink); margin: 0 0 10px; }
.aw-wk-card__body b { font-weight: 600; }
.aw-wk-card__mcp { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin: 0 0 10px; line-height: 1.5; }
.aw-wk-card__row { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
.aw-wk-card__fwd { display: flex; align-items: center; gap: 12px; }
.aw-wk-card__next { font-family: var(--font-ui); font-size: 13px;
  color: var(--sic-ink); background: none; border: 1.5px solid var(--sic-ink);
  padding: 6px 14px; cursor: pointer; }
.aw-wk-card__skip { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); background: none; border: none; padding: 0;
  cursor: pointer; }
.aw-wk-vf { position: absolute; pointer-events: none; }
.aw-wk-vf::before, .aw-wk-vf::after { content: ""; position: absolute;
  right: 0; width: var(--vf-arm); height: var(--vf-arm);
  border-right: 1.5px solid var(--sic-ink); }
.aw-wk-vf::before { top: 0; border-top: 1.5px solid var(--sic-ink); }
.aw-wk-vf::after { bottom: 0; border-bottom: 1.5px solid var(--sic-ink); }
.aw-wk-tick { position: absolute; width: 22px; height: 14px;
  border-left: 1.5px solid var(--sic-ink); border-top: 1.5px solid var(--sic-ink);
  pointer-events: none; }
@media (max-width: 760px) {
  /* the r5.2 floor grammar: the card docks to the floor, full width; the
     viewfinder still marks the target above */
  .aw-wk-card, .aw-wk-card--hero { position: fixed; left: 0; right: 0;
    top: auto; bottom: 0; transform: none; width: auto; max-width: none;
    border-left: none; border-right: none; border-bottom: none; z-index: 8;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .aw-wk-tick { display: none; }
}

/* ---- voice profile (task-563): the actor node as the [D-V] page ------- */
/* any actor name is a door — the delegated nav on the theatre root */
.aw-th-page .aw-th-who { cursor: pointer; }
.aw-th-page .aw-th-who:hover { text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* the voice arc — dated digest-delta entries, newest gold */
.aw-th-varc { margin-top: 22px; }
.aw-th-varc__entry { border: 1px solid var(--sic-rule); background: var(--sic-white);
  padding: 12px 14px 13px; margin: 0 0 12px; }
.aw-th-varc__entry--newest { border-color: var(--sic-gold);
  background: linear-gradient(to right, var(--sic-gold-tint), var(--sic-white) 70%); }
.aw-th-varc__ey { font-family: var(--font-code); font-size: 11px;
  color: var(--sic-stone); display: flex; justify-content: space-between;
  gap: 10px; margin: 0 0 7px; }
.aw-th-varc__entry--newest .aw-th-varc__ey { color: var(--sic-gold); }
.aw-th-varc__gen { opacity: .75; }
.aw-th-varc__body { font-size: 13.5px; line-height: 1.55; margin: 0; }

/* voice profile round 2 (563 redline): header-width page, roster head,
   trait rows w/ bracket receipts */
.aw-th-view--voice { max-width: var(--landing-max); }
.aw-th-vhead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; border-bottom: 1px solid var(--sic-rule); padding: 4px 0 10px;
  margin-bottom: 14px; }
.aw-th-vhead__roster { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.aw-th-vhead__label { font-family: var(--font-code); font-size: 11px;
  letter-spacing: .05em; color: var(--sic-stone); }
.aw-th-vhead .aw-th-who--current { border-bottom: 2px solid var(--sic-ink); }
.aw-th-vhead__back { font-family: var(--font-code); font-size: 12px;
  color: var(--sic-ink); cursor: pointer; white-space: nowrap; }
.aw-th-vhead__back:hover { text-decoration: underline; }
.aw-th-vtraits { margin-top: 22px; border-top: 1px solid var(--sic-rule); }
.aw-th-vtrait { display: grid; grid-template-columns: 140px minmax(0,1fr) minmax(0,1.3fr);
  gap: 16px; align-items: baseline; padding: 13px 0 14px;
  border-bottom: 1px solid var(--sic-rule); }
.aw-th-vtrait__dim { font-family: var(--font-code); font-size: 12.5px; color: var(--sic-ink); }
.aw-th-vtrait__n { display: block; font-size: 10.5px; color: var(--sic-stone); margin-top: 3px; }
.aw-th-vtrait__lean { font-size: 12.5px; color: var(--sic-stone);
  font-variant-numeric: tabular-nums; }
.aw-th-vtrait__receipt { position: relative; font-family: var(--font2);
  font-size: 14.5px; line-height: 1.5; border-left: 2px solid var(--sic-ink);
  padding-left: 12px; }
.aw-th-vtrait__receipt::before, .aw-th-vtrait__receipt::after { content: "";
  position: absolute; left: 0; width: 11px; height: 0;
  border-top: 2px solid var(--sic-ink); }
.aw-th-vtrait__receipt::before { top: 0; }
.aw-th-vtrait__receipt::after { bottom: 0; }
.aw-th-vtrait__src { display: block; font-family: var(--font-code);
  font-size: 10.5px; color: var(--sic-stone); margin-top: 5px; cursor: pointer; }
.aw-th-vtrait__src:hover { color: var(--sic-ink); }
@media (max-width: 760px) {
  .aw-th-vtrait { grid-template-columns: 1fr; gap: 6px; }
}

/* voice profile r5: lean lead, absent dims, folded arc spine */
.aw-th-vtrait__lean b { font-weight: 600; }
.aw-th-vtrait__rest { display: block; color: var(--sic-stone); font-size: 12.5px;
  margin-top: 3px; font-variant-numeric: tabular-nums; }
.aw-th-vtrait--absent { opacity: .72; }
.aw-th-vtrait--absent .aw-th-vtrait__receipt { border-left-color: var(--sic-rule);
  font-family: var(--font-ui); font-size: 13px; color: var(--sic-stone); }
.aw-th-vtrait--absent .aw-th-vtrait__receipt::before,
.aw-th-vtrait--absent .aw-th-vtrait__receipt::after { border-top-color: var(--sic-rule); }
.aw-th-varc__entry--fold { border-color: var(--sic-rule); }
.aw-th-varc__entry--fold .aw-th-varc__body { color: var(--sic-stone); }
.aw-th-varc__more { font-family: var(--font-code); font-size: 10.5px; color: var(--sic-ink);
  cursor: pointer; white-space: nowrap; margin-left: 4px; }
.aw-th-varc__more:hover { text-decoration: underline; }
.aw-th-varc__foot { font-family: var(--font-code); font-size: 11px; color: var(--sic-stone);
  margin: 10px 0 0; }

/* the voice page's paper spans its container — the page-scoped 56ch pin
   (aw-th-page .aw-th-pos, the r5 call-width ruling) squeezed it to ~510px
   inside the 960 column; the PROSE keeps its reading measure instead */
.aw-th-view--voice .aw-th-pos { max-width: none; }
.aw-th-view--voice .aw-th-sdigest .aw-th-digest { max-width: 64ch; }

/* ---------------------------------------- P-1a + the refraction page
   (task-553, r5.6 rev 2): select is a click, expand is a door (dashed —
   it leads somewhere not-yet-read), footnotes are real house-format
   narrative citations, stacked. The refraction page: intent → both
   readings → trajectory → standing near → receipts. */
.aw-th-fnstack { margin-top: 16px; border-top: 1px solid var(--rule);
  max-width: 78ch; }
.aw-th-fn { padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.aw-th-fn p { font-family: var(--font-ui); font-size: 13px;
  color: var(--sic-ink); margin: 0 0 6px; }
.aw-th-fn blockquote { font-family: var(--font2); margin: 6px 0;
  padding-left: 12px; border-left: 2px solid var(--sic-ink);
  font-size: 13.5px; }
.aw-th-fn__h { font-family: var(--font-code); font-size: 10.5px;
  color: var(--sic-ink); margin: 0 0 6px; }
.aw-th-fn__m { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin: 6px 0 0; }
.aw-th-rf { padding-top: 30px; }
.aw-th-rf__sect { font-family: var(--font-code); font-size: 11px;
  color: var(--sic-ink); margin: 26px 0 10px; }
.aw-th-rf__ctx p { font-family: var(--font-ui); font-size: 13.5px;
  margin: 0 0 6px; max-width: 72ch; }
.aw-th-rf__dim { color: var(--sic-stone); }
.aw-th-rf__chips { display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; }
.aw-th-rf__chip { font-family: var(--font-code); font-size: 10.5px;
  border: 1px solid var(--mark); padding: 3px 9px; color: var(--sic-ink); }
.aw-th-rf__chip--gold { border-color: var(--sic-gold);
  background: var(--gold-tint); }
.aw-th-rf__arrow { color: var(--sic-stone); }
.aw-th-lenspair--page .aw-th-lens { cursor: default; }
.aw-th-footband__tagcol { display: flex; flex-direction: column; gap: 6px; }
.aw-th-footband__sub { font-family: var(--font-code); font-size: 10.5px;
  color: var(--sic-ink); text-decoration: underline dashed var(--mark);
  text-underline-offset: 3px; }
.aw-wk-tick--l { border-left: none; border-right: 1.5px solid var(--sic-ink); }
/* her demo-day redline: the voice-profile prose fills its paper */
.aw-th-view .aw-th-paper .aw-th-digest,
.aw-th-view .aw-th-paper p { max-width: none; }
/* P-3: the introspect gap reaction — dashed, in place, bare tool label */
.aw-th-gap { border: 1.5px dashed var(--mark); padding: 11px 14px;
  margin-top: 10px; }
.aw-th-gap__h { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin: 0 0 6px; }
.aw-th-gap__b { font-family: var(--font-ui); font-size: 13px;
  color: var(--sic-ink); margin: 0 0 6px; }
.aw-th-gap__m { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin: 0 0 8px; }
.aw-th-gap__door { font-family: var(--font-code); font-size: 10.5px;
  color: var(--sic-ink); text-decoration: underline dashed var(--mark);
  text-underline-offset: 3px; }
/* demo-day redlines, round 2 */
.aw-th-fnref { font-family: var(--font-code); font-size: 0.72em;
  color: var(--sic-stone); margin-left: 2px; }
.aw-th-rf { max-width: 960px; margin: 0 auto; }
.aw-th-rf .aw-th-lenspair--page { max-width: none; }
/* a walkthrough-lit target reads ACTIVE, never faint — the rail case */
.aw-th-railcol .aw-wk-lit, .aw-th-railcol .aw-wk-lit * {
  color: var(--sic-ink); opacity: 1; }
/* the stratum head reads as ONE line: back left, the narrative right */
.aw-th-sview__head { display: flex; align-items: baseline; gap: 16px; }
.aw-th-sview__head .aw-th-datehead { flex: 1; margin: 0; }
/* task-571: the narrative arc on the stratum page (per the ruled mock) */
.aw-th-arc__sect { font-family: var(--font-code); font-size: 11px;
  color: var(--sic-ink); margin: 30px 0 14px; }
.aw-th-arc__note { font-family: var(--font-code); font-size: 10px;
  color: var(--sic-stone); margin-left: 10px; }
.aw-th-arc { border-top: 1px solid var(--rule); }
.aw-th-arc__row { display: grid; grid-template-columns: 13ch minmax(0,1fr);
  gap: 18px; padding: 13px 0 15px; border-bottom: 1px solid var(--rule);
  align-items: baseline; }
.aw-th-arc__d { font-family: var(--font-code); font-size: 11px;
  color: var(--sic-stone); white-space: nowrap; }
.aw-th-arc__d b { display: inline-block; border: 1px solid var(--mark);
  padding: 2px 8px; font-weight: 400; color: var(--sic-ink); }
.aw-th-arc__row--now .aw-th-arc__d b { border-color: var(--sic-gold);
  background: var(--gold-tint); }
.aw-th-arc__q { font-family: var(--font2); font-style: italic;
  font-size: 13.5px; line-height: 1.55; margin: 0; max-width: 66ch;
  padding-left: 12px; border-left: 2px solid var(--mark); }
@media (max-width: 700px) { .aw-th-arc__row { grid-template-columns: 1fr; } }

/* aw-toast — transient notice. Numerology: XX Judgement (the call) times
   the notification breathe at 2.0s. */

.aw-toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sic-paper); border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(27,27,27,0.08);
  padding: 10px 20px;
  font-family: var(--font-ui); font-size: 14px; color: var(--sic-ink);
}
.aw-toast--ok { border-color: rgba(205,163,73,0.5); }
.aw-toast--error { border-color: var(--sic-red); }
.aw-toast--calling { animation: aw-toast-breathe 2.0s ease-in-out infinite; }

@keyframes aw-toast-breathe {
  0%, 100% { box-shadow: 0 2px 14px rgba(27,27,27,0.08); }
  50% { box-shadow: 0 2px 19px rgba(205,163,73,0.35); }
}

/* fw-* — the /live/wireframes surface's own chrome (dev/staging only).
   Not a product component family; this page lays out the seven product flows
   as sequences of surface states, in the product's design language.
   Whole-flow-at-a-glance (her review, 2026-07-14): states flex-WRAP into
   rows — no horizontal scroll track anywhere; the page body never scrolls
   sideways (task-445). States render their components directly on the page
   ground — no card frame unless the depicted thing genuinely is a card.
   Colors and fonts are tokens only; px is spacing/geometry, per the
   styleguide's own precedent. */

.fw { max-width: 1180px; margin: 0 auto; padding: 34px var(--landing-gutter) 114px; }
.fw-intro { font-family: var(--font2); color: var(--muted); max-width: 64ch; margin-bottom: 24px; }

.fw-toc {
  display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 12px;
  font-family: var(--font-code); font-size: 11px;
}
.fw-toc a { color: var(--sic-stone); text-decoration: none; border-bottom: 1px dashed var(--edge-soft); }
.fw-toc a:hover { color: var(--sic-ink); border-color: var(--sic-ink); }

/* one flow = a rule-topped section with a stable anchor id */
.fw-flow { border-top: 1px solid var(--rule); padding-top: 19px; margin-top: 38px; scroll-margin-top: 76px; }
.fw-flow__num {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
}
.fw-flow__title { font-family: var(--font2); font-weight: 300; font-size: 26px; margin: 2px 0 6px; }
.fw-flow__desc { font-family: var(--font2); color: var(--ink-soft); max-width: 70ch; margin-bottom: 16px; }
.fw-flow__actor {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.04em;
  color: var(--sic-terr);
}

/* the hero (flow 1) — heavier gold rule, larger type, wider states */
.fw-flow--hero { border-top-width: 2px; border-top-color: var(--sic-gold); }
.fw-flow--hero .fw-flow__num { color: var(--sic-gold); }
.fw-flow--hero .fw-flow__title { font-size: 38px; }
.fw-flow--hero .fw-flow__desc { font-size: 17px; }

/* the state sequence — WRAPS, never scrolls (whole flow at a glance) */
.fw-track {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 26px 0;
  padding: 6px 2px 14px;
}
.fw-state {
  flex: 0 1 auto; min-width: 230px; max-width: 330px;
  display: flex; flex-direction: column; gap: 10px;
}
.fw-flow--hero .fw-state { min-width: 280px; max-width: 390px; }

.fw-state__step {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--sic-stone);
}
/* components render directly on the page ground — no card frame here
   (her review, 2026-07-14: "I want to see the actual components") */
.fw-state__frame {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
}
.fw-state__frame > * { max-width: 100%; }
.fw-state__cap { font-family: var(--font2); font-size: 14px; color: var(--ink-soft); }

/* the connector between states — rides the wrap */
.fw-arrow {
  flex: 0 0 auto; align-self: center; padding: 0 12px;
  font-family: var(--font-ui); font-size: 22px; color: var(--ink-faint);
}

/* resolution-layer control: expressions <-> positions <-> narratives <-> strata */
.fw-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fw-seg__sep { color: var(--ink-faint); font-size: 12px; }

/* small vertical stacks + quiet notes inside a state */
.fw-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fw-note { font-family: var(--font-code); font-size: 10px; color: var(--sic-stone); }
.fw-footnotes { display: flex; flex-direction: column; gap: 6px; }

/* cross-flow reference ("joins the spine") */
.fw-xref { font-family: var(--font-code); font-size: 11px; }
.fw-xref a { color: var(--sic-blue); text-decoration: none; border-bottom: 1px dashed var(--blue-edge); }
.fw-xref a:hover { border-bottom-style: solid; }

/* the guide's own header chrome (theme toggle in the aw-header right slot) */
.fw-header-right { display: inline-flex; align-items: center; gap: 13px; }
.fw-theme-toggle {
  background: none; cursor: pointer;
  border: 1px dashed var(--edge-soft); padding: 3px 10px;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
  transition: border-color var(--motion-sun), color var(--motion-sun);
}
.fw-theme-toggle:hover { border-color: var(--sic-ink); color: var(--sic-ink); }

@media (max-width: 767px) {
  .fw-flow--hero .fw-flow__title { font-size: 30px; }
  .fw-state { min-width: 100%; max-width: 100%; }
  .fw-arrow { display: none; }
}

/* aw-xcard — the position/narrative pairing under a message (task-377):
   "what we heard" (the position — statements read within their frame) and
   "where it lands" (the narrative it moves). Context, not an action — sits
   above aw-ab, independent of it (a segment can have one, both, or neither).
   Ancestor: P4 wireframes artifact v3 §4/§5 (.xcard / .xrow / .xlabel / .xval). */

.aw-xcard {
  border: 1px dashed var(--edge-soft);
  margin: 10px 0; padding: 12px 16px;
  background: var(--sic-paper); font-family: var(--font-ui);
}
.aw-xcard__row { margin: 5px 0; font-size: 14px; }
.aw-xcard__row:first-child { margin-top: 0; }
.aw-xcard__row:last-child { margin-bottom: 0; }
/* the label+text line — fixed 2026-07-10: this used to BE .aw-xcard__row,
   with :node as a flex sibling squeezed onto the same line (read as a
   cramped side panel, not a stacked reaction). :node now renders as its
   own block below (.aw-xcard__rownode), indented to align under the value
   text, not beside the label. */
.aw-xcard__rowmain { display: flex; gap: 8px; align-items: baseline; }
.aw-xcard__rownode { margin: 6px 0 0 112px; }
.aw-xcard__label {
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sic-gold); min-width: 104px; flex-shrink: 0;
}
.aw-xcard__val { color: var(--sic-ink); }

/* the digest-regen delta reaction (task-317) — async, 1-10 min after
   commit, so it renders only when it's actually landed. Dashed gold
   border + more bottom padding (Scarlet, 2026-07-10: "a little bit more
   of a call out... more padding underneath") — a real callout, not just
   a tinted background. Labeled with its own hub name (aw-xcard__reaction-
   head) so the tie to "which narrative is this reacting to" is explicit,
   not inferred from proximity to the row above it. */
.aw-xcard__reaction {
  background: var(--gold-tint); border: 1px dashed var(--sic-gold);
  padding: 9px 12px 14px; margin: 8px 0; font-size: 13.5px; color: var(--ink-soft);
}
.aw-xcard__reaction-head {
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-gold); margin-bottom: 5px;
}