/* aswritten live surface.
   Design tokens come from /live/assets/tokens.css (generated from
   design/tokens.css — the single source; see task-346). index.html links
   tokens.css before this file. */

@font-face {
  font-family: 'Avenue X';
  src: url('/live/assets/fonts/avenue-x.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Avenue Mono';
  src: url('/live/assets/fonts/avenue-mono.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; }

/* author display values (grid/flex) must never defeat the hidden attribute */
[hidden] { display: none !important; }

body {
  background: var(--room);
  color: var(--sic-ink);
  font-family: var(--font-ui);
  min-height: 100vh;
}

/* the guide grid retired with the paper ground (task-528 r4: white room;
   paper is the document surface, not the page) */

/* ------------------------------------------------- header
   The brand bar is now the aw-header component (design/components/header.css,
   bundled into components.css). Only the fixed-header body offset and the
   account dropdown — which rides inside aw-header__right — remain here. */
body { padding-top: 61px; }

/* account dropdown */
.ls-acct { position: relative; }
.ls-acct summary {
  list-style: none; cursor: pointer; color: var(--sic-stone);
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.ls-acct summary::-webkit-details-marker { display: none; }
.ls-acct summary:hover { color: var(--sic-ink); }
.ls-acct-menu {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 90;
  min-width: 220px; padding: 12px 14px;
  background: var(--sic-paper); border: 1px solid var(--rule);
  box-shadow: 0 2px 14px rgba(27,27,27,0.08);
  display: grid; gap: 10px; text-transform: none; letter-spacing: 0.04em;
}
.ls-acct-email { color: var(--sic-stone); font-size: 11px; word-break: break-all; }
.ls-acct-menu a, .ls-acct-menu button {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-ink); text-align: left;
  background: none; border: none; cursor: pointer; padding: 0;
}
.ls-acct-menu a:hover, .ls-acct-menu button:hover { color: var(--sic-gold); }

/* ------------------------------------------------- shared
   Main container matches the header/landing: 960 content-box, centered. */
.lv {
  position: relative; z-index: 1;
  box-sizing: content-box;
  max-width: var(--landing-max, 960px);
  margin: 0 auto;
  padding: 48px var(--landing-gutter, 56px) 120px;
}

.eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sic-stone); display: flex; gap: 10px; margin-bottom: 22px;
}
.eyebrow .sep { color: var(--mark); }

.lv-title {
  font-family: var(--font2); font-weight: 225; font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 18px; max-width: 20ch;
}
.lv-lead { font-family: var(--font2); font-size: 18px; color: var(--ink-soft); max-width: 52ch; margin-bottom: 34px; }

.sec-eye h2 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sic-stone); font-weight: 600; margin-bottom: 14px;
}

.pill {
  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; transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.pill:hover { border-color: var(--sic-ink); background: var(--ink-wash); }
.pill:disabled { opacity: 0.4; cursor: default; }
.pill-waiting { animation: lv-pulse 1.4s ease-in-out infinite; opacity: 1 !important; border-style: solid; color: var(--sic-stone); }
.pill-strong { border-style: solid; }

/* ------------------------------------------------- sign in */
/* the auth door (task-528 r4, comp B): the mesh gradient marks the
   threshold into the live experience — full-bleed band, white mono
   wordmark; the room begins below it */
.lv-authdoor {
  margin: -38px calc(-50vw + 50%) 38px;
  padding: 57px max(calc((100vw - var(--landing-max, 960px)) / 2), 24px) 30px;
  background: var(--sic-ink) url('/live/assets/images/mesh-threshold.jpg') center / cover no-repeat;
  display: flex; align-items: flex-end; min-height: 190px;
}
.lv-authdoor-wm {
  font-family: var(--font1-mono);
  font-size: clamp(34px, 5vw, 56px); line-height: 1; color: var(--room);
}
.lv-authdoor-wm sup { font-size: 0.5em; position: relative; top: -0.62em; }

.lv-signin { display: grid; gap: 22px; margin-top: 8px; }
.lv-signin-row { display: flex; align-items: center; gap: 16px; }
.lv-tokenalt summary {
  font-size: 13px; color: var(--sic-stone); cursor: pointer;
  text-decoration: underline dashed; text-underline-offset: 3px; width: fit-content;
}
.lv-tokenalt form { display: grid; gap: 16px; margin-top: 16px; }

/* ------------------------------------------------- intake */
.lv-step { margin: 38px 0; }
.lv-providers { display: flex; flex-wrap: wrap; gap: 12px; }
.lv-connectnote { margin-top: 12px; font-size: 13px; color: var(--sic-stone); }
.lv-connectnote a { color: var(--sic-stone); text-decoration: underline dashed; text-underline-offset: 3px; }
.lv-connectnote a:hover { color: var(--sic-ink); }

.lv-ffconnect { margin-top: 18px; display: grid; gap: 16px; max-width: 520px; }

.lv-paste { margin-top: 18px; display: grid; gap: 16px; max-width: 720px; }

.lv-dest { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lv-dest-note { font-size: 13px; color: var(--sic-stone); }
.lv-dest-empty { display: grid; gap: 16px; max-width: 620px; }
.lv-dest-empty .lv-dest-note { font-family: var(--font2); font-size: 15px; color: #3a3a38; }
.lv-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------- theater */
/* the theater page hugs the header (same 14px the logo gets inside it) and
   ends exactly at the sticky footer — no dead padding for it to unpin over */
.lv.lv-theaterpage { padding-top: 14px; padding-bottom: 0; }
/* the feed ends at the sticky composer for the same reason (task-514 #4 —
   the base .lv 120px bottom padding let the dock unpin and lift) */
.lv.lv-feedpage { padding-bottom: 0; }

/* footer-left: pipeline status while running, terminal status after.
   Status label in the landing hero-subtitle register; body in serif. */
.lv-footleft {
  display: grid; gap: 6px; align-self: center; margin-right: auto;
  flex: 1; max-width: 560px; padding-right: 30px;
}
.lv-status-label {
  display: block;
  font-family: var(--font-code); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sic-stone); margin-bottom: 4px;
}
.lv-status-body {
  display: block;
  font-family: var(--font2); font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
/* running: pulsing dot (something is in progress). terminal (replay
   complete / committed / failed): plain line, no animation — fixed
   2026-07-10, the dot was bleeding onto "replay complete" as if still
   live. Both render in the sidebar via run-status-block now. */
.lv-runstatus { position: relative; padding-left: 18px; font-size: 13px; }
.lv-runstatus .lv-status-body { font-size: 13px; }
.lv-runstatus::before {
  content: ""; position: absolute; top: 4px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sic-gold); animation: lv-pulse 1.2s ease-in-out infinite;
}
.lv-terminalline { font-size: 13px; }
.lv-terminalline .lv-status-body { font-size: 13px; }
.lv-terminalline.failed .lv-status-body { color: var(--sic-red); }

/* left gutter: target, checkpoint rail, reviewers meta — one column, so the
   pieces flow instead of overlapping. Fixed on wide screens, in-flow narrow. */
.lv-target {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone);
  margin-bottom: 14px; word-break: break-all;
}
@media (min-width: 1240px) {
  .lv-gutter {
    position: fixed; z-index: 4; left: 26px; top: 75px; bottom: 150px;
    width: 180px; display: flex; flex-direction: column; gap: 18px;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* meta pins to the gutter bottom when there is room, flows below when not */
  .lv-gutter .lv-meta { margin: 0; margin-top: auto; padding-top: 20px; }
  .lv-gutter .lv-meta .prose-meta { border: none; padding: 0; font-size: 10px; line-height: 1.6; }
}
/* status stack, left (2026-07-10 review — round two on the 07-09 ruling
   that put it at the bottom): PR heading + merge button, review stage,
   and the vertical aw-phasestrip (#phase-strip below) all live here now. */
.lv-prblock { display: flex; flex-direction: column; gap: 5px; }
.lv-prblock-num {
  font-family: var(--font2); font-size: 15px; font-weight: 600;
  color: var(--sic-ink); text-decoration: none;
}
.lv-prblock-num:hover { color: var(--sic-blue); }
.lv-prblock-meta {
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--sic-stone);
}
.lv-mergebtn {
  align-self: flex-start; font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 600; padding: 6px 14px; border-radius: 4px; margin-top: 2px;
  border: 1px solid var(--sic-gold); color: var(--sic-gold); background: var(--gold-tint);
  cursor: pointer;
}
.lv-mergebtn:disabled { cursor: default; }
.lv-mergebtn.conflict { border-color: var(--sic-red); color: var(--sic-red); background: var(--red-tint); cursor: pointer; }
.lv-mergebtn.merged { border-color: var(--rule); color: var(--sic-stone); background: transparent; }
#phase-strip { font-size: 11px; }
@keyframes lv-pulse { 50% { opacity: 0.35; } }

/* MCP connect, header-fixed (2026-07-10: moved off the bottom dock so it
   survives scroll, sidebar growth, every view switch — "that's really
   important for the demo"). A small status pill beside the account menu.
   #brand-user had no layout rule at all — <details> is block-level by
   default, so the icon was stacking ABOVE the account menu instead of
   sitting to its left; this is the actual fix, not just the icon's own
   margin (which can't do anything without a flex parent). */
#brand-user { display: flex; align-items: center; }
.lv-mcp-icon {
  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;
  margin-right: 14px;
}
.lv-mcp-icon:hover { background: var(--blue-tint); }
.lv-mcp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sic-blue); display: inline-block; }

/* the memory as the conversation it was — full container width so each
   message's extraction annotations get the opposite side */
.lv-post {
  font-family: var(--font2); font-size: 18px; line-height: 1.78;
  color: var(--sic-ink);
}
.prose-p { margin: 0 0 1.2em; }
.prose-h {
  font-family: var(--font2); font-weight: 300; letter-spacing: -0.01em;
  margin: 1.6em 0 0.6em; line-height: 1.2;
}
h2.prose-h { font-size: 32px; font-weight: 225; }
h3.prose-h { font-size: 24px; }
h4.prose-h, h5.prose-h { font-size: 19px; font-weight: 500; }
.prose-q {
  border-left: 2px solid rgba(27,27,27,0.25); padding-left: 18px;
  color: var(--ink-soft); font-style: italic; margin: 0 0 1.2em;
}
.prose-ul { margin: 0 0 1.2em; padding-left: 22px; }
.prose-meta {
  font-family: var(--font-code); font-size: 11.5px; color: var(--sic-stone);
  border: 1px dashed rgba(27,27,27,0.2); padding: 8px 12px; margin-bottom: 26px;
  word-break: break-word;
}

/* unsegmented text between messages — connective tissue, centered */
.exp-gap {
  color: rgba(27,27,27,0.42); font-size: 15px; line-height: 1.65;
  max-width: 38rem; margin: 24px auto;
}
.exp-gap .prose-p, .exp-gap .prose-q, .exp-gap .prose-ul { margin-bottom: 0.8em; }

/* ── the conversation flow ─────────────────────────────────────────────
   Each expression is a message in the group chat the memory actually was.
   Your words: right-aligned, gold-bordered (the landing's ls-msg-user
   polarity). Other speakers: left, white card, color-coded label under.
   The extraction rides the OPPOSITE side of each bubble, in the landing's
   beat-text voice (dashed rule + small serif). */
.lv-row {
  display: flex; gap: 26px; margin: 22px 0; align-items: flex-start;
}
.lv-row.mine { flex-direction: row-reverse; }
.lv-row.lit { animation: card-in .6s ease; }
@keyframes card-in { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lv-msgcol {
  flex: 0 1 34rem; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.lv-row.mine .lv-msgcol { align-items: flex-end; }

.exp-card {
  background: var(--sic-paper); border: 1px solid transparent;
  padding: 15px 20px; cursor: pointer; position: relative;
  transition: border-color .2s, background .2s;
}
.lv-row.mine .exp-card {
  border-color: rgba(205,163,73,0.65);           /* landing user-bubble gold */
}
.exp-card.lit { animation: card-in .6s ease; }
.exp-card:hover { border-color: var(--sic-gold); background: var(--gold-tint); }
.exp-card.chat { cursor: default; }
.exp-card.chat:hover { border-color: transparent; background: var(--sic-paper); }
.lv-row.mine .exp-card.chat:hover { border-color: rgba(205,163,73,0.65); }
.exp-card.error { border-color: var(--sic-red); }
.exp-card.sel {
  background: rgba(205,163,73,0.13);
  border-color: var(--sic-gold);
}
.exp-card.noted { border-left: 3px solid var(--sic-gold); }
.exp-text { font-size: 17px; line-height: 1.65; }
.exp-text .prose-p:last-child { margin-bottom: 0; }

/* speaker label under the bubble — nice little text, color-coded */
.exp-who {
  margin-top: 7px;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone);
}
.exp-who b { font-weight: 600; }

/* extraction annotations beside the bubble — the landing's beat-text voice */
.exp-notes { flex: 1 1 0; min-width: 0; padding-top: 4px; }
.exp-notes:empty { display: none; }
.lv-row.mine .exp-notes { text-align: right; }
.exp-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);
  animation: card-in .5s ease;
}
.exp-tag {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; margin-right: 4px;
}
.exp-note-text { color: #55534f; }
.exp-note.bounce { color: var(--sic-ink); }
.exp-note .gloss {
  display: inline-block; text-align: left; margin: 8px 0 0; cursor: pointer;
  background: none; border: 1px dashed rgba(27,27,27,0.35); padding: 7px 10px;
  font-family: var(--font2); font-size: 13.5px; max-width: 560px;
}
.exp-note .gloss:hover { border-color: var(--sic-ink); background: rgba(205,163,73,0.08); }
/* the picked answer (one per ambiguity — :batch/answer replaces, same-click withdraws) */
.exp-note .gloss.on {
  border: 1px solid var(--sic-gold); background: var(--gold-target);
  color: var(--sic-ink);
}

/* speaker-line tags (task-377 declutter, 2026-07-10): footing/conviction/
   dimension observations as compact chips instead of stacked boxes.
   HOVER reveals a footnote-style popover — pure CSS, no click/state (her
   literal ask; an earlier click-based pass didn't actually respond to
   hovering, which is what she tried). Dashed border + soft shadow so it
   reads as commentary/annotation, not another chat bubble — solid border
   + heavy shadow read too much like a second message. */
.speaker-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.tag-wrap { position: relative; display: inline-block; }
.tag-chip {
  display: inline-flex; align-items: center; font-family: var(--font-code);
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--rule);
  color: var(--sic-stone); background: var(--card); cursor: default;
}
.tag-chip:hover { border-color: var(--sic-gold); color: var(--sic-gold); background: var(--gold-tint); }
.tag-popover {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: 9px; z-index: 3;
  background: var(--card); border: 1px dashed var(--edge-soft); border-radius: 5px;
  padding: 9px 12px; width: 250px; box-shadow: 0 2px 8px var(--ink-wash);
  font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
}
.tag-wrap:hover .tag-popover { display: block; }
.tag-popover::before {
  content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
  background: var(--card); border-left: 1px dashed var(--edge-soft); border-top: 1px dashed var(--edge-soft);
  transform: rotate(45deg);
}
.tag-popover__head {
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-gold); margin-bottom: 4px;
}

/* "what we heard" (object view only) — a quiet line, not a card */
.what-heard { font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft); margin: 2px 0; }

/* "where it lands," unified — position lineage + narrative placement +
   resolve's referent bindings, one list, one grammar (task-377 declutter,
   2026-07-10 — her catch: "extends" was rendering from two disconnected
   places). Lives in .exp-notes, ABOVE the residual flat notes. */
.land-item {
  border-top: 1px dashed var(--rule); padding: 7px 0; margin: 0 0 4px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}
.land-item:first-child { border-top: none; padding-top: 0; }
.land-label {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-gold);
}
.land-value { color: var(--sic-ink); }
.land-why { color: var(--ink-soft); }
.land-src { display: block; margin-top: 3px; font-family: var(--font-code); font-size: 10px; color: var(--ink-faint); }

/* per-message SPARQL: a quiet selector under the bubble */
.lv-sq-toggle {
  background: none; border: none; cursor: pointer; padding: 0; margin-top: 5px;
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone);
}
.lv-sq-toggle:hover { color: var(--sic-ink); }
.lv-sq {
  margin-top: 6px; padding: 9px 12px; max-width: 34rem; overflow-x: auto;
  font-family: var(--font-code); font-size: 10px; line-height: 1.55;
  color: var(--ink-soft); background: rgba(27,27,27,0.035);
  border: 1px dashed var(--rule); white-space: pre; text-align: left;
}
/* SPARQL that links several messages — connective tissue between them */
.lv-linkrow { max-width: 38rem; margin: 2px auto 20px; text-align: center; }
.lv-linkrow .lv-sq-toggle { color: #2E8B6A; }
.lv-linkrow .lv-sq-toggle:hover { color: var(--sic-ink); }
.lv-linkrow .lv-sq { margin: 6px auto 0; }

/* narrow: annotations fold under their bubble */
@media (max-width: 900px) {
  .lv-row, .lv-row.mine { flex-direction: column; gap: 6px; }
  .lv-row.mine { align-items: flex-end; }
  .exp-notes { width: 100%; max-width: 34rem; flex: none; }
  .lv-row.mine .exp-notes { text-align: right; }
}

/* top cards (pipeline-ordered run-level results) */
.lv-top { display: grid; gap: 12px; margin-bottom: 30px; max-width: 848px; }
.lv-top:empty { display: none; }

/* right gutter: SPARQL + pipeline notes (unsegmented spans, held) */
.lv-side { display: grid; gap: 10px; margin: 20px 0; }
@media (min-width: 1560px) {
  .lv-side {
    position: fixed; z-index: 4; top: 75px; right: 22px;
    width: calc((100vw - var(--landing-max, 960px)) / 2 - 100px);
    max-width: 280px; margin: 0;
    max-height: calc(100vh - 260px); overflow-y: auto;
  }
  .lv-side .lv-topcard { font-size: 11.5px; padding: 10px 12px; }
  .lv-side .lv-drawer pre { font-size: 10px; max-height: 260px; }
}

/* reviewers / frontmatter meta (lives in the left gutter column) */
.lv-meta { margin: 20px 0; }
.lv-meta:empty { display: none; }
.lv-meta .prose-meta { margin: 0; }

/* the memory title as page furniture — left-aligned, cards follow it
   (2026-07-10 review; the flow's own heading is stripped, doc-title
   renders it once) */
.lv-doctitle {
  font-family: var(--font2); font-size: 40px; font-weight: 225;
  letter-spacing: -0.01em; line-height: 1.18; text-align: left;
  margin: 0 0 22px; max-width: 848px; color: var(--sic-ink);
}

/* reviewer pills, far bottom left (name/email only — no phone numbers) */
.lv-revpills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; }
.lv-revpills-label {
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-stone); margin-right: 2px;
}
.lv-revpill {
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 2px 9px;
  background: var(--card); max-width: 100%; overflow-wrap: anywhere;
}
.lv-topcard {
  border: 1px solid rgba(27,27,27,0.14); background: rgba(255,255,255,0.6);
  padding: 13px 16px; font-size: 13.5px; animation: card-in .5s ease;
}
.lv-topcard .k, .lv-pending .k {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sic-stone); margin-bottom: 6px;
}
.lv-topcard .why, .lv-pending .why { color: var(--ink-soft); margin-top: 3px; }
.lv-topcard .crumbs {
  font-family: var(--font-code); font-size: 10.5px; color: var(--sic-stone);
  margin-top: 4px; word-break: break-word;
}
.lv-topcard.note { border-style: dashed; color: var(--sic-stone); }
.lv-topcard.held { border-color: var(--sic-gold); background: rgba(205,163,73,0.06); }

/* full-ink headings inside gaps: the document's structure is page furniture */
.exp-gap .prose-h { color: var(--sic-ink); }

/* minted IRIs on cards */
.exp-iri {
  font-family: var(--font-code); font-size: 11px; color: #2E8B6A;
  cursor: copy; border-bottom: 1px dashed rgba(46,139,106,0.5);
}

/* act three: the conversation with the perspective agent */
.lv-chat { display: flex; flex-direction: column; margin: 6px 0; }
.lv-chat-user { align-items: flex-end; }
.lv-chat-assistant { align-items: flex-start; }
.lv-chat-who {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone); margin-bottom: 3px;
}
.lv-chat-bubble {
  max-width: 34rem; background: var(--sic-paper);
  border: 1px solid transparent;
  padding: 12px 16px; font-family: var(--font2); font-size: 15px; line-height: 1.6;
}
.lv-chat-user .lv-chat-bubble { border-color: rgba(205,163,73,0.65); border-bottom-right-radius: 4px; }
.lv-chat-assistant .lv-chat-bubble { border-bottom-left-radius: 4px; }
.lv-chat-bubble.error { border-color: var(--sic-red); color: var(--sic-red); }
.lv-chat-bubble .prose-p:last-child { margin-bottom: 0; }

/* pending batched notes */
.lv-pending {
  border: 1.5px dashed var(--sic-gold); background: rgba(205,163,73,0.05);
  padding: 14px 16px; font-size: 13.5px;
}
.lv-pending-actions { display: flex; gap: 10px; margin-top: 12px; }
.lv-pending-actions .pill { font-size: 12.5px; padding: 6px 14px; }

/* sparql drawer */
.lv-drawer { margin-top: 34px; border: 1px solid rgba(27,27,27,0.14); background: rgba(255,255,255,0.6); }
.lv-drawer-head {
  display: flex; justify-content: space-between; padding: 12px 16px; cursor: pointer;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sic-stone);
}
.lv-drawer-head:hover { color: var(--sic-ink); }
.lv-drawer pre {
  font-family: var(--font-code); font-size: 12px; line-height: 1.55;
  padding: 4px 16px 18px; overflow-x: auto; max-height: 380px; overflow-y: auto;
  color: #2d2d2b; border-top: 1px solid rgba(27,27,27,0.1);
}
.lv-checks { color: var(--sic-ink); }

/* committed */
.lv-committed {
  margin-top: 26px; border: 1.5px solid var(--sic-ink); padding: 22px 26px;
  background: rgba(255,255,255,0.75); animation: card-in .5s ease;
}
.lv-committed h3 { font-family: var(--font2); font-weight: 400; font-size: 20px; margin-bottom: 8px; }
.lv-committed .meta { font-family: var(--font-code); font-size: 12px; color: var(--sic-stone); margin-bottom: 12px; }
.lv-committed a.pill { text-decoration: none; display: inline-block; }
.lv-committed.failed { border-color: var(--sic-red); }
.lv-committed.failed h3 { color: var(--sic-red); }

/* thread + composer */
.lv-thread { margin-top: 30px; display: grid; gap: 14px; }
.lv-thread:empty { display: none; }
.th-item { border-left: 2px solid rgba(27,27,27,0.2); padding: 4px 0 4px 18px; }
.th-item .who { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sic-stone); margin-bottom: 4px; }
.th-item .msg { font-family: var(--font2); font-size: 15.5px; }
.th-item .chips { margin-top: 6px; display: flex; gap: 10px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sic-stone); }
.th-item .chips .on { color: var(--sic-ink); }
.th-item a { color: var(--sic-blue); font-size: 12px; }

/* sticky footer: pipeline status left, composer (the user's bubble) right */
.lv-batchbar {
  position: sticky; bottom: 0; z-index: 6;
  margin: 34px calc(-50vw + 50%) 0;
  padding: 14px max(calc((100vw - var(--landing-max, 960px)) / 2), var(--landing-gutter)) 20px;
  background: var(--sic-paper);
  border-top: 1px solid var(--rule);
  display: flex; gap: 18px; align-items: flex-end; justify-content: flex-end;
}
.lv-footright { display: grid; gap: 8px; justify-items: end; }
.lv-compose { display: flex; gap: 12px; align-items: flex-end; }

/* the staged batch as chips in the dock (Option A, her pick 2026-07-10 —
   replaces the top-of-doc #pending-notes block) */
.lv-bchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lv-bchip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft);
  background: var(--card); border: 1px dashed var(--sic-gold);
  border-radius: 4px; padding: 4px 8px;
}
.lv-bchip .src {
  font-family: var(--font-code); font-size: 9.5px; color: var(--sic-gold);
  text-transform: uppercase; letter-spacing: 0.05em; flex: none;
}
.lv-bchip .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-bchip .x { border: 0; background: none; cursor: pointer; color: var(--sic-stone);
               font-size: 12px; padding: 0 2px; flex: none; }
.lv-bchip .x:hover { color: var(--sic-ink); }

/* doc filters: sticky under the fixed header (body padding-top 61px) */
.lv-filterrow {
  position: sticky; top: 61px; z-index: 2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 10px; margin-bottom: 16px;
  background: var(--sic-paper); border-bottom: 1px dashed var(--rule);
}
.lv-filterlabel {
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sic-stone); margin-right: 2px;
}
.lv-fchip {
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; border: 1px solid var(--rule);
  background: var(--card); color: var(--sic-stone); padding: 3px 10px; cursor: pointer;
}
.lv-fchip:hover { border-color: var(--sic-gold); color: var(--sic-ink); }
.lv-fchip.on { border-color: var(--sic-gold); color: var(--sic-ink);
               background: var(--gold-target); }
.lv-row.lv-dimmed { opacity: 0.35; transition: opacity 0.15s ease; }

/* landing hero-sub register: quiet mono link, dashed underline */
.lv-mcp-link {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: var(--font-code); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sic-stone);
  text-decoration: underline dashed var(--rule); text-underline-offset: 4px;
}
.lv-mcp-link:hover { color: var(--sic-ink); text-decoration-color: var(--sic-blue); }

/* connect-via-MCP panel */
.lv-mcp-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(27,27,27,0.28);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lv-mcp-panel {
  background: var(--sic-paper); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 8px 40px rgba(27,27,27,0.18);
  max-width: 640px; width: 100%; padding: 28px 32px;
  display: grid; gap: 16px;
}
.lv-mcp-panel .k {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sic-stone);
}
.lv-mcp-lead { font-family: var(--font2); font-size: 16px; line-height: 1.6; }
.lv-mcp-block { display: grid; gap: 6px; }
.lv-mcp-block > span {
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone);
}
.lv-mcp-block pre {
  font-family: var(--font-code); font-size: 12px; line-height: 1.5;
  background: var(--sic-paper); border: none;
  padding: 10px 12px; overflow-x: auto; margin: 0;
}
.lv-mcp-block p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.lv-mcp-block code { font-family: var(--font-code); font-size: 12px; color: var(--sic-ink); }
.lv-mcp-actions { display: flex; gap: 10px; justify-content: flex-end; }
.lv-mcp-actions .pill { text-decoration: none; font-size: 12.5px; }
.lv-batchbar textarea {
  width: min(560px, 62vw); resize: none; overflow: hidden;
  background: #fff; color: var(--sic-ink);
  border: 1px solid rgba(205,163,73,0.65);
  border-radius: 12px; border-bottom-right-radius: 4px;
  box-shadow: 0 2px 14px rgba(27,27,27,0.05);
  font-family: var(--font2); font-size: 15.5px; line-height: 1.55;
  padding: 12px 16px; outline: none;
  transition: border-color .15s;
}
.lv-batchbar textarea:focus { border-color: var(--sic-gold); }
.lv-selcount {
  font-family: var(--font-code); font-size: 11px; color: var(--sic-gold);
  white-space: nowrap; padding-bottom: 14px;
}
.lv-selcount:empty { display: none; }

/* flat home list + sources drawer (task-375): one interleaved date list;
   the connections stack lives in a left drawer once anything is connected */
/* the calls page uses the FULL .lv container (her call, 2026-07-10) — .lv
   is already content-box landing-max, i.e. exactly the header's width; the
   filter row and list span it edge to edge */
.lv-filterbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 16px 0 6px;
}
.lv-filtercluster { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-filtercluster--right { gap: 10px; }
.lv-filtercluster--right .aw-btn { margin-left: 6px; }
/* two selections, two registers: status = pill chips, source = quiet
   underlined text — each cluster under its own label */
.lv-filterlabel {
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: 2px;
}
.lv-srcfilter {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sic-stone);
  text-decoration: underline dashed; text-underline-offset: 3px;
}
.lv-srcfilter:hover { color: var(--sic-ink); }
.lv-srcfilter--on { color: var(--sic-ink); text-decoration: underline solid; }
.lv-src-overlay { align-items: stretch; justify-content: flex-start; padding: 0; }
.lv-srcdrawer {
  background: var(--sic-paper); border-right: 1px solid var(--rule);
  width: min(560px, 100vw); height: 100%; overflow-y: auto;
  padding: 22px 26px 48px;
}
.lv-srcdrawer-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
@media (max-width: 720px) {
  .lv-srcdrawer { width: 100vw; border-right: none; }
}

/* one sticky dock (task-369): the batch bar with the phase strip beneath —
   the dock owns the sticky full-bleed frame, the bar goes static inside */
.lv-dock { position: sticky; bottom: 0; z-index: 6; margin: 34px calc(-50vw + 50%) 0; }
.lv-dock .lv-batchbar { position: static; margin: 0; }
.lv-dock .aw-phasestrip {
  padding-left: max(calc((100vw - var(--landing-max, 960px)) / 2), var(--landing-gutter));
  padding-right: max(calc((100vw - var(--landing-max, 960px)) / 2), var(--landing-gutter));
}

/* review affordances (task-369) */
.lv-attestrow { margin: 8px 0 4px; }
.lv-reviewstage {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}

/* ---- two-view review viewer (task-337.06) ---- */

.lv-reviewer-banner {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--sic-gold); background: var(--gold-tint);
  padding: 11px 16px; font-size: 13px; color: var(--ink-soft);
  animation: card-in .5s ease;
}
.lv-reviewer-banner .lv-status-label {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sic-gold); white-space: nowrap;
}

.lv-leafbrowser { display: grid; gap: 14px; margin-top: 26px; }
.lv-leafbrowser-head {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sic-stone);
}
.lv-leaf {
  border: 1px solid rgba(27,27,27,0.14); background: rgba(255,255,255,0.6);
  padding: 13px 16px; font-size: 13.5px; animation: card-in .5s ease;
}
.lv-leafhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lv-leaflabel { font-weight: 600; color: var(--sic-ink); }
.lv-leafcount { font-size: 11.5px; color: var(--sic-stone); }
.lv-leafnodes { display: grid; gap: 8px; margin-top: 10px; }
.lv-leafnode { border-left: 2px solid var(--sic-mint); padding: 2px 0 2px 10px; }
.lv-leafnode-head { display: flex; align-items: baseline; gap: 8px; }
.lv-leafnode-label { color: var(--sic-ink); }
.lv-leafnode .why { color: var(--ink-soft); margin-top: 2px; font-size: 12.5px; }
.lv-kind {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sic-stone); border: 1px solid rgba(27,27,27,0.18);
  padding: 1px 6px; border-radius: 9px; white-space: nowrap;
}
.lv-leafquote {
  margin: 4px 0 0; padding-left: 10px; border-left: 2px solid var(--rule);
  color: var(--sic-stone); font-style: italic; font-size: 12.5px;
}
.lv-peer-slot {
  display: flex; align-items: center; gap: 8px;
  border-left: 2px solid rgba(27,27,27,0.14); padding: 2px 0 2px 10px;
}
.lv-peer-slot.locked { color: var(--sic-stone); opacity: 0.65; }
.lv-peer-slot.locked .lv-lock { font-size: 11px; filter: grayscale(1); }
.lv-peer-slot .lv-peer-note { font-size: 12px; font-style: italic; }
.lv-peer-cta {
  margin-top: 10px; padding: 8px 12px; font-size: 12.5px;
  border: 1px dashed var(--sic-gold); background: var(--gold-tint);
  color: var(--ink-soft);
}
.lv-lineage { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.lv-lineage .k {
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sic-stone); margin-bottom: 4px;
}
.lv-lineage .why { color: var(--ink-soft); font-size: 12.5px; }

.lv-mergectl { display: inline-flex; align-items: center; gap: 8px; }
.lv-merged { color: #2E8B6A; font-size: 12.5px; }
.lv-mergeerr { color: var(--sic-red); font-size: 12.5px; }

/* ---- anchored per-statement graph browser (gbrowse) ---- */

.gb-anchor { margin-top: 4px; }
.gb-explore {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sic-blue);
}
.gb-explore:hover { text-decoration: underline; }
.gb-root {
  margin-top: 6px; border-left: 2px solid var(--sic-blue);
  padding: 6px 0 6px 10px; background: rgba(74,122,255,0.03);
}
.gb-level { display: grid; gap: 6px; }
.gb-group { display: grid; gap: 2px; }
.gb-grouphead {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sic-stone); margin-top: 2px;
}
.gb-row { font-size: 12.5px; }
.gb-rowhead { display: flex; align-items: baseline; gap: 6px; }
.gb-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--sic-blue); width: 14px;
  flex: none; text-align: center;
}
.gb-toggle.blank { color: var(--sic-stone); cursor: default; }
.gb-label { color: var(--ink-soft); }
.gb-label.locked { color: var(--sic-stone); opacity: 0.65; font-style: italic; }
.gb-row .gb-level {
  margin: 4px 0 4px 6px; border-left: 1px solid var(--rule); padding-left: 10px;
}
.gb-note { font-size: 12px; color: var(--sic-stone); font-style: italic; }
.gb-lineage { font-size: 12px; color: var(--ink-soft); }

/* ---- digest narration inside the graph browser ---- */
.gb-digest { margin: 4px 0 2px; }
.gb-digest-text {
  margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #3d3d3b;
}
.gb-dlink {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--sic-blue); text-decoration: underline;
  text-decoration-color: rgba(74,122,255,0.4); text-underline-offset: 2px;
}
.gb-dlink:hover { text-decoration-color: var(--sic-blue); }
.gb-dlink-tree {
  margin: 8px 0 4px 8px; border-left: 1px solid var(--rule); padding-left: 10px;
}
.gb-rel {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sic-blue); border: 1px solid rgba(74,122,255,0.35);
  padding: 1px 5px; border-radius: 9px; white-space: nowrap;
}
.gb-date { font-family: var(--font-code); font-size: 10px; color: var(--sic-stone); white-space: nowrap; }

/* ---- lane graph browser (task-337.06.01) — landing branch-graph idiom ---- */
.gbv-wrap { overflow-x: auto; margin-top: 6px; border: 1px solid var(--rule);
  background: #FCFBFA; border-radius: 3px; max-height: 340px; overflow-y: auto; }
.gbv { display: block; }
.gbv text { user-select: none; }
.gbv-lbl { font-family: var(--font2); font-size: 12.5px; fill: var(--sic-ink); cursor: pointer; }
.gbv-lbl:hover { fill: var(--sic-gold); }
.gbv-lbl.locked { fill: var(--sic-stone); font-style: italic; }
.gbv-tag { font-family: var(--font-code); font-size: 8.5px; letter-spacing: 0.1em;
  fill: var(--sic-stone); }
.gbv-cnt { font-family: var(--font-code); font-size: 9.5px; fill: var(--sic-stone); }
.gbv-chev { font-family: var(--font-code); font-size: 9px; fill: var(--sic-stone); }
.gbv-head { font-family: var(--font-code); font-size: 8.5px; letter-spacing: 0.12em;
  text-transform: uppercase; fill: var(--sic-stone); }
.gbv-phrase { font-family: var(--font2); font-style: italic; font-size: 12px;
  fill: var(--sic-stone); }
.gbv-note { font-family: var(--font2); font-style: italic; font-size: 12px;
  fill: var(--sic-stone); }
.gbv-lineage { font-family: var(--font2); font-size: 11.5px; fill: #4a4a48; }
.gbv-edge { fill: none; stroke-width: 1.25; stroke-opacity: 0.55; }
.gbv-edge.under { stroke-dasharray: 3 3; stroke-opacity: 0.4; }
.gbv-edge.ph { stroke-opacity: 0.25; }
.gbv-ln-gold { stroke: var(--sic-gold); } .gbv-ln-blue { stroke: var(--sic-blue); }
.gbv-ln-terr { stroke: var(--sic-terr); } .gbv-ln-stone { stroke: var(--sic-stone); }
.gbv-ln-red { stroke: var(--sic-red); }
.gbv-dt-gold { fill: var(--sic-gold); } .gbv-dt-blue { fill: var(--sic-blue); }
.gbv-dt-terr { fill: var(--sic-terr); } .gbv-dt-stone { fill: var(--sic-stone); }
.gbv-dt-red { fill: var(--sic-red); }
.gbv-hollow { fill: #FCFBFA; stroke-width: 1.4; }
.gbv-ring { fill: none; stroke-width: 1; stroke-opacity: 0.5; }
.gbv-node { cursor: pointer; }
.gb-fsbtn { margin-left: 14px; }

/* ---- fullscreen graph browser ---- */
.gbfs { position: fixed; inset: 0; z-index: 95; background: var(--sic-paper);
  display: flex; flex-direction: column; }
.gbfs-head { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--rule); }
.gbfs-crumbs { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-code); font-size: 10px; letter-spacing: 0.08em; }
.gbfs-crumb { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--sic-gold); font: inherit; }
.gbfs-crumb:hover { text-decoration: underline; }
.gbfs-crumb-sep { color: var(--sic-stone); }
.gbfs-crumb-cur { color: var(--sic-ink); }
.gbfs-close { margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--font-code); font-size: 12px; color: var(--sic-stone); }
.gbfs-close:hover { color: var(--sic-ink); }
.gbfs-body { flex: 1; display: flex; min-height: 0; }
.gbfs-canvas { flex: 1; min-width: 0; overflow: auto; padding: 14px; }
.gbfs-scale { transform-origin: 0 0; }
.gbfs-panel { width: 400px; max-width: 44vw; border-left: 1px solid var(--rule);
  overflow-y: auto; padding: 16px 20px 40px; background: #FCFBFA; }
.gbfs-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 18px; border-top: 1px solid var(--rule);
  font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sic-stone); }
.gbfs-legend svg { vertical-align: -3px; margin-right: 4px; }

/* ============================================================ *
 * Flocking lab (/live/flocking-lab) — task-366/444. Dev-gated
 * param-tuning surface for the murmuration visualization.
 * ============================================================ */
.flk-wrap { max-width: 1380px; margin: 0 auto; padding: 0 18px 60px;
  font-family: var(--font2); color: var(--sic-ink); background: var(--sic-paper); }
.flk-head { padding: 18px 0 8px; display: flex; flex-direction: column; gap: 5px; }
.flk-eyebrow { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sic-stone); }
.flk-head h1 { font-family: var(--font2); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.flk-dek { font-size: 13.5px; color: var(--muted); max-width: 72em; margin: 0; line-height: 1.5; }
.flk-bars { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; }
.flk-barlabel { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sic-stone); margin-right: 2px; }
.flk-layerbtn, .flk-chip, .flk-abtn {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px dashed var(--rule); color: var(--sic-stone); padding: 6px 11px; cursor: pointer; }
.flk-layerbtn:hover, .flk-chip:hover, .flk-abtn:hover { color: var(--sic-ink); border-color: var(--sic-ink); }
.flk-layerbtn.active { border: 1px solid var(--sic-ink); color: var(--sic-ink); }
.flk-chip { font-size: 10px; padding: 4px 9px; }
.flk-chip.on { border: 1px solid var(--sic-red); color: var(--sic-red); }
.flk-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.flk-grid { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 16px; align-items: start; margin-top: 8px; }
.flk-side { min-width: 0; }
.flk-center { min-width: 0; }
@media (max-width: 720px) { .flk-grid { grid-template-columns: 1fr; } }
.flk-panel { display: flex; flex-direction: column; }
.flk-grouphdr { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sic-stone); border-bottom: 1px dashed var(--rule); padding: 11px 0 4px; margin-bottom: 7px; }
.flk-lname { color: var(--sic-ink); }
.flk-ctl { margin-bottom: 7px; }
.flk-ctl label { display: flex; justify-content: space-between; font-family: var(--font-code);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sic-stone); }
.flk-val { color: var(--sic-ink); font-family: var(--font-code); }
.flk-ctl input[type=range] { width: 100%; accent-color: var(--sic-ink); height: 16px; margin: 0; background: transparent; display: block; }
.flk-lab { border: 1px solid var(--border); }
.flk-canvas { display: block; width: 100%; height: 470px; cursor: crosshair; }
.flk-legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em; color: var(--sic-stone); padding: 8px 2px 4px; }
.flk-stat { color: var(--sic-ink); }
.flk-actions { display: flex; gap: 10px; align-items: center; margin: 8px 0 6px; flex-wrap: wrap; }
.flk-values { font-family: var(--font-code); font-size: 11px; line-height: 1.55; color: var(--muted);
  background: none; border: 1px dashed var(--rule); padding: 10px 12px; white-space: pre-wrap;
  word-break: break-word; margin: 6px 0 0; max-height: 260px; overflow-y: auto; }