/* 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-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; }
}

/* 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; } }

/* 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; }

/* 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 (task-446, ratified rounds r1–r10, 2026-07-17; comps
 * archived at docs/design/artifact-archive/2026-07-17-feed-comps-r*.html;
 * canonical ruling record in task-446 notes).
 *
 * The feed is the product's FIRST PAGE: every conversation the org has —
 * calls arriving off connectors, uploads, session memories, PRs — as
 * MESSAGES in the theatre's grammar, interspersed by date. Feed rows ARE
 * aw-th messages: this family adds only the feed's own states and pieces;
 * anatomy (name above · bubble · status below), sides, threads, and hover
 * doctrine come from aw-th-*.
 *
 * The rulings this file encodes:
 *   - RIGHT = MINE OR I'M IN IT — calls, uploads, memories, connectors
 *     alike; the reply gutter mirrors to its parent's side (aw-th-replies).
 *   - OUTLINE = ABSORPTION: dashed = unread (its actions live INSIDE the
 *     dashed edge); solid = read, wearing the positions DOUBLE-STACK (the
 *     reading folded behind the call); dashed red = the reading failed.
 *   - NO FILTERS, EVER: the composer + agent replace them (search runs
 *     against the actual extractions; answers come back as messages).
 *   - CONNECTORS ARE FEED ITEMS: connection events are the feed's oldest
 *     messages; calls arrive as their interspersed replies; config rows
 *     live under the connection line. GitHub nests INSIDE connector setup.
 *   - the repo mark is PLAIN TEXT after the dot separator (opacity hover,
 *     links to the repo) — never a bordered chip.
 *   - needing the user is a CTA on the card, never a dot. */

/* ---- feed states on the message bubble (compose with aw-th-exp) ---- */
.aw-fd-msg--unread > .aw-th-exp { --brk-style: dashed; }
.aw-fd-msg--unread > .aw-th-ai { border: 1.5px dashed var(--edge-strong); }
.aw-fd-msg--unread > .aw-th-exp.aw-th--hasctas:hover,
.aw-fd-msg--unread > .aw-th-exp.aw-th--hasctas.is-hover {
  --brk-stroke: var(--sic-ink);
}
/* read = absorbed into the graph: the DOUBLE stroke (the [[ ]] nesting) */
.aw-fd-msg--read > .aw-th-exp { --brk-style: double; --brk-w: 5px; }
.aw-fd-msg--read > .aw-th-exp.aw-th--actionable:hover,
.aw-fd-msg--read > .aw-th-exp.aw-th--actionable.is-hover {
  --brk-stroke: var(--sic-gold);
}
.aw-fd-msg--failed > .aw-th-exp { --brk-stroke: var(--sic-red); --brk-style: dashed;
  background: linear-gradient(to right, var(--red-tint), transparent 70%); }

/* ---- row content: serif title (two-line clamp), meta line, verbs ---- */
.aw-fd-title { font-family: var(--font2); font-weight: 600; font-size: 15px;
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.aw-fd-sub { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 2px; }
.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; }

/* ---- the repo mark: plain text after the dot separator ---- */
.aw-fd-repo { font-family: var(--font-code); 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(--font-code); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin: 20px 4px 0; text-align: center; }
.aw-fd-datehead::before { content: "[ "; }
.aw-fd-datehead::after  { content: " ]"; }

/* ---- connector item: the connection event as a feed message ---- */
.aw-fd-conn { display: flex; align-items: center; gap: 8px; font-weight: 650;
  font-size: 14px; font-family: var(--font-ui); }
.aw-fd-conn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sic-gold); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .aw-fd-conn__dot--live { animation: aw-fd-breathe var(--motion-moon) ease-in-out infinite; }
  @keyframes aw-fd-breathe { 50% { opacity: 0.35; } }
}
.aw-fd-conn__dot--setup { background: transparent; border: 1.5px dashed var(--sic-gold);
  width: 8px; height: 8px; }
.aw-fd-config { margin-top: 9px; border-top: 1px dashed var(--guide); padding-top: 9px;
  display: grid; gap: 6px; font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 400; color: var(--ink-soft); }
.aw-fd-config__row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aw-fd-config__key { font-family: var(--font-code); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sic-stone); min-width: 64px; }
.aw-fd-config__code { font-family: var(--font-code); font-size: 11.5px;
  background: var(--ink-wash); padding: 1px 7px; }

/* ---- month fold: backfilled history, collapsed by month (task-497) ---- */
.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; }

/* ---- the agent's narrowed state: a sentence, never a filter bar ---- */
.aw-fd-showing { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-family: var(--font-ui); color: var(--muted); padding: 10px 4px;
  border-bottom: 1px solid var(--guide); }
.aw-fd-showing b { color: var(--sic-ink); font-weight: 650; }

/* ---- for-you badge: the aggregate at feed distance (repo rows, scope) ---- */
.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 empty room: the [AI]'s one instruction, buttons beside ---- */
.aw-fd-empty { text-align: center; padding: 54px 24px 46px; max-width: 640px; margin: 0 auto; }
.aw-fd-empty__mark { font-family: var(--font-code); font-size: 26px; font-weight: 700;
  color: var(--sic-gold); }
.aw-fd-empty__h { font-family: var(--font2); font-weight: 600; font-size: 22px;
  margin: 14px 0 8px; text-wrap: balance; }
.aw-fd-empty__p { font-family: var(--font-ui); color: var(--ink-soft); font-size: 14px;
  max-width: 50ch; margin: 0 auto; }
.aw-fd-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px; }
.aw-fd-empty__note { font-family: var(--font-ui); font-size: 12px; color: var(--ink-faint);
  margin-top: 16px; }
/* dead-link possibles (storage wall, gated drivers): visible, quieter */
.aw-fd-cta--possible { opacity: 0.75; }
.aw-fd-cta--live { border-style: solid; }

/* ---- 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; }
.aw-fd-account__btn { font-family: var(--font-code); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; 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); }

/* ---- the upload slot (task-399 MVP: conversations only) ----------------- */
.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 + menu (task-515 #2): connect a source · bring a transcript --- */
.aw-fd-plusmenu { position: absolute; left: 0; bottom: 100%; margin-bottom: 8px;
  display: grid; gap: 2px; padding: 6px;
  background: var(--sic-paper); border: 1px solid var(--edge);
  box-shadow: 0 2px 14px var(--ink-wash); z-index: 7; }
.aw-fd-plusmenu .aw-th-verb { text-align: left; }

/* acted-on collapse (task-515 #4): the reviewed row stands down — one
   quiet line, back to full presence on hover (still the theatre door) */
.aw-fd-row--acted { opacity: 0.55; }
.aw-fd-row--acted:hover, .aw-fd-row--acted.is-hover { opacity: 1; }

/* the standing sources line in the dock (task-515 #3 floor) */
.aw-fd-sourcesline {
  display: block; margin: 0 0 6px auto; text-align: right;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  background: none; border: none; cursor: pointer; padding: 0;
}
.aw-fd-sourcesline:hover, .aw-fd-sourcesline.is-hover { color: var(--sic-ink); }

/* 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;
  font-family: var(--font-code); font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; 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);
}
@media (max-width: 800px) {
  .aw-header__inner { padding: 12px 20px; grid-template-columns: 1fr auto; }
  .aw-header__center { display: none; }
}

/* 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; }

/* 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); border-radius: 8px;
  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; }

/* 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; }

/* 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); border-radius: 4px; 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-radius: 4px; 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; }
.aw-th-replies::before {
  content: ""; position: absolute; left: 14px; top: -4px; bottom: 14px;
  width: 2px; border-radius: 2px; background: var(--guide);
}
.aw-th-replies--mine::before { left: auto; right: 14px; }

.aw-th-reply { position: relative; margin-top: 12px; }
.aw-th-reply::before {
  content: ""; position: absolute; left: -20px; top: 2px; width: 16px; height: 12px;
  border-left: 2px solid var(--guide); border-bottom: 2px solid var(--guide);
  border-bottom-left-radius: 10px;
}
.aw-th-replies--mine > .aw-th-reply::before {
  left: auto; right: -20px; border-left: none; border-right: 2px solid var(--guide);
  border-bottom-left-radius: 0; border-bottom-right-radius: 10px;
}
.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; }
.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 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); border-radius: 6px; 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 — full-width rule above, double-height
   ask (dashed gold, the "ask the perspective" box), round attach, weighty Send */
.aw-th-composer-send--tall { align-items: stretch; }
.aw-th-composer-send--tall .aw-th-composer-send__field {
  border: 1.5px dashed var(--sic-gold); padding: 14px 16px 30px; }
.aw-th-composer-send--tall .aw-th-composer-send__btn { align-self: flex-end;
  font-size: 14.5px; font-weight: 650; padding: 11px 28px; }
.aw-th-composer-send__attach { flex: none; width: 44px; height: 44px; align-self: center;
  border: 1.5px dashed var(--edge-strong); background: none;
  color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
  transition: border-color var(--motion-sun), background var(--motion-sun); }
.aw-th-composer-send__attach:hover, .aw-th-composer-send__attach.is-hover {
  border-color: var(--sic-ink); color: var(--sic-ink); background: var(--ink-wash); }
.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. */
.aw-th-cols { display: grid; grid-template-columns: 58px minmax(0, 1fr);
  max-width: 1080px; margin: 0 auto; }
.aw-th-railcol { border-right: 1px solid var(--guide); }
.aw-th-railcol .aw-th-rail { margin: 18px 0; }
.aw-th-railcol .aw-th-rail--sticky { top: 76px; }
.aw-th-flowcol { padding: 6px 30px 26px; min-width: 0; }
.aw-th-flow { padding-bottom: 8px; }
.aw-th-threadfoot { display: flex; justify-content: flex-end; margin-top: 8px; }
.aw-th-ai--error { border: 1.5px dashed var(--sic-red); background: var(--red-tint); }
/* 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;
  padding: 10px max(calc((100vw - 820px) / 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; }
.aw-th-digest--quiet { color: var(--ink-faint); font-style: italic; }
.aw-th-digest__note { color: var(--ink-faint); }
/* the pin-to-bottom sentinel scrolls into view UNDER the stuck dock —
   the margin keeps the last real content clear of it (task-514 #3/#4) */
.aw-th-endsentinel { scroll-margin-bottom: 84px; }

/* ---- 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-arrived > .aw-th-pos { border-color: var(--sic-gold); border-style: dashed; }
.aw-th-elidedline { display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-code); font-size: 11px; color: var(--ink-faint); }

@media (max-width: 720px) {
  .aw-th-cols { grid-template-columns: 1fr; }
  .aw-th-railcol { display: none; }
  .aw-th-flowcol { padding: 6px 14px 20px; }
  .aw-th-stage .aw-th-msg { max-width: 88%; }
  .aw-th-passdots { gap: 3px; }
  .aw-th-passdots__dot { width: 5px; height: 5px; }
  .aw-th-view { padding: 12px 14px 30px; }
}

/* 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;
}