@charset "utf-8";
/* ==========================================================================
   page-demo-lead-intake.css
   Page-scoped styles for demos/lead-intake.html
   Everything here reads the band theme variables from core.css — no fixed
   colours, so each rule works on dark, void and light bands alike.

   1.  Hero .......................... .lixhero
   2.  Hero figure ................... .lixfig
   3.  Guided run — shell ............ .lixrun .lixpanel .lixprog
   4.  Guided run — stage grid ....... .lixstage .lixcol
   5.  Left column ................... .lixblock .lixdl .lixrec
   6.  Centre column ................. .lixscene .lixchat .lixmsg
   7.  Right column .................. .lixrail .lixres
   8.  Run states .................... [data-only] [data-run-state] [data-fill]
   9.  Timeline + controls ........... .lixtl .lixctrl
   10. Activity ledger ............... .lixled
   11. Bilingual pair ................ .lixpair .lixcode
   12. Review notice ................. .lixreview
   13. Example tabs .................. .lixex
   14. Qualification gate ............ .lixgate
   15. Rules + human control ......... .lixrules .lixcontrol .lixnever
   16. Before / after ................ .lixba
   17. The spine ..................... .lixspine
   18. Other demonstrations .......... .lixother
   19. Final CTA ..................... .cta .lixcta__line
   20. Responsive .................... 1280 / 1140 / 1080 / 900 / 768 / 560 / 400
   21. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

.lixhero {
  position: relative;
  overflow: hidden;
}

.lixhero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(var(--s-10), 5vw, var(--s-20));
}

.lixhero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  max-width: 40rem;
}

/* two-column hero: display-1 would run to five lines in half the page,
   so this hero sets its headline one step down the same scale */
.lixhero__title {
  margin: 0;
  max-width: 19ch;
  font-size: var(--t-display-2);
  text-wrap: balance;
}

.lixhero__title > span {
  display: block;
}

/* light band: the accent inks DOWN toward navy — never up into cyan */
.lixhero__accent {
  background-image: linear-gradient(96deg, var(--blue) 0%, var(--blue-deep) 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--blue-deep);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lixhero__accent { -webkit-text-fill-color: transparent; }
}

.lixhero__lead {
  margin: 0;
  max-width: 46ch;
}

.lixhero__cta {
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

/* capability chips ------------------------------------------------------- */

/* Four claims, laid out as a deliberate 2 x 2 block. A wrapping flex row left
   the fourth pill orphaned on a line of its own; a two-column grid can never
   strand one, and the pills in a column share one width. */
.lixhero__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.lixhero__chips > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.lixhero__chips > li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* ── one disclosure, stated once, where the record is ─────────────────────
   This page used to carry the amber alert plate twice plus a scatter of
   per-figure and per-caption repeats, so the first thing the eye met was a
   row of error states. There is now a single notice, and it lives with the
   run it describes (§3). It is a quiet annotation rule, not an alert: amber
   on this page is reserved for the human decision gate. */
.lixstage__note {
  border: 0;
  border-left: 2px solid var(--line-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.lixstage__note::before { content: none; }

.lixstage__note strong {
  font-weight: 600;
  color: var(--body);
}


/* ==========================================================================
   2. HERO FIGURE
   ========================================================================== */

.lixhero__figwrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lixhero__fighint { margin: 0 0 var(--s-3); }

.lixhero__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.lixfig {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* Two cuts of the same figure. The wide one is drawn for a desktop column;
   below 560px it is replaced — not shrunk — by a taller, narrower redraw
   with fewer elements and shorter labels, so no glyph is ever scaled under
   the ~9px legibility floor. The swap happens in §20. */
.lixfig--m { display: none; }

/* ── shared diagram kit, geometry contract (ART-DIRECTION §4) ──────────────
   Every colour resolves through a --rf-* diagram variable with a theme-token
   fallback, so nothing goes invisible when the band flips. ---------------- */

.lixfig__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--rf-label, var(--muted));
}

.lixfig__lbl--accent { fill: var(--rf-out, var(--accent)); }
.lixfig__lbl--human  { fill: var(--amber); }

.lixfig__ch {
  stroke: var(--rf-ch-1, var(--accent));
  stroke-width: 2.5;
}

.lixfig__port { fill: var(--rf-port, var(--accent)); }

.lixfig__out {
  stroke: var(--rf-out, var(--link));
  stroke-width: 3;
}

.lixfig__ring,
.lixfig__ring2 {
  stroke: var(--rf-ring, var(--line-strong));
  stroke-width: 1;
}

.lixfig__ring2 { opacity: .45; }

.lixfig__s0 { stop-color: var(--rf-node-0, #8CC7FF); }
.lixfig__s1 { stop-color: var(--rf-node-1, #1077D7); }
.lixfig__s2 { stop-color: var(--rf-node-2, #0B4F8A); }

.lixfig__plate {
  fill: var(--bg-card-2);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.lixfig__plate--own { fill: var(--bg-card-3); }

.lixfig__plate--hum {
  fill: color-mix(in srgb, var(--amber-bright, #E7A63A) 12%, transparent);
  stroke: var(--amber-bright, #E7A63A);
}

.lixfig__humdot { fill: var(--amber-bright, #E7A63A); }

.lixfig__hum {
  stroke: var(--amber-bright, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.lixfig__key,
.lixfig__val {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
}

.lixfig__key { fill: var(--muted); }
.lixfig__val { fill: var(--ink); letter-spacing: .4px; }

.lixfig__rule { stroke: var(--line-soft); stroke-width: 1; }

.lixfig__name {
  font-family: var(--font-display), sans-serif;
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}

/* the narrow cut draws its own type a step larger, because its viewBox is
   close to 1:1 with the phone — nothing here is scaled down to fit */
.lixfig--m {
  max-width: 340px;
  overflow: hidden;
}

.lixfig--m .lixfig__lbl { font-size: 11px; letter-spacing: .9px; }

.lixfig--m .lixfig__key,
.lixfig--m .lixfig__val { font-size: 11px; letter-spacing: .8px; }

.lixfig--m .lixfig__name { font-size: 16px; }

/* travelling packets — hidden unless their animation runs, so no stray dots */
.lixfig__pk {
  opacity: 0;
  offset-rotate: 0deg;
  fill: var(--rf-port, var(--accent));
  animation: lixpk 3.4s var(--e-inout) infinite;
}

.lixfig__pk--1 { offset-path: path("M24 50 C 108 50, 140 108, 194 108"); }

.lixfig__pk--2 {
  offset-path: path("M24 180 C 108 180, 140 108, 194 108");
  animation-delay: 1.4s;
}

@keyframes lixpk {
  0%   { offset-distance: 0%;   opacity: 0; }
  14%  { opacity: .95; }
  78%  { opacity: .95; }
  100% { offset-distance: 100%; opacity: 0; }
}

.lixfig__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: lixring 5.4s var(--e-inout) infinite;
}

@keyframes lixring {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.1);  opacity: 1; }
}


/* ==========================================================================
   3. GUIDED RUN — SHELL
   ========================================================================== */

.lixstage__note {
  margin: 0 0 var(--s-8);
  max-width: 84ch;
}

.lixrun {
  --lix-pane: 320px;
  position: relative;
}

.lixpanel {
  overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-lift);
}

.lixpanel__bar {
  flex-wrap: wrap;
  gap: var(--s-3);
}

.lixpanel__ex {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  color: var(--muted);
}

/* ── the player deck: transport + position + progress + scene chips ───────
   Sits directly on top of the dark stage and reads as one machine. -------- */

.lixdeck {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.lixctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
}

.lixbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 46px;
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    transform var(--d-1) var(--e-out);
}

.lixbtn:hover {
  background: var(--bg-card-3);
  border-color: var(--link);
}

.lixbtn:active { transform: translateY(1px); }

.lixbtn[hidden] { display: none; }

.lixbtn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.lixbtn:disabled:hover {
  background: var(--bg-card-2);
  border-color: var(--line-strong);
}

/* the one obvious thing to press */
.lixbtn--main {
  min-width: 7.5rem;
  padding: 0 var(--s-5);
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}

.lixbtn--main:hover {
  background: var(--blue-deep);
  border-color: transparent;
}

.lixpos {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 0 auto;
  padding-left: var(--s-3);
}

.lixpos__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixpos__v {
  font-family: var(--font-mono);
  font-size: var(--t-title-3);
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* run progress ----------------------------------------------------------- */

.lixprog {
  display: block;
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--line-strong);
  overflow: hidden;
}

.lixprog > i {
  display: block;
  height: 100%;
  min-width: 2%;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: linear-gradient(90deg, var(--link) 0%, var(--accent) 100%);
  transition: width var(--d-4) var(--e-out);
}


/* ==========================================================================
   4. GUIDED RUN — STAGE GRID
   ========================================================================== */

.lixstage {
  display: grid;
  grid-template-columns: minmax(0, var(--lix-pane)) minmax(0, 1fr);
  grid-template-areas: "left mid";
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.lixcol {
  min-width: 0;
  padding: var(--s-6) var(--s-6) var(--s-8);
}

.lixcol--left  { grid-area: left; }
.lixcol--mid   { grid-area: mid; }

.lixcol--mid {
  border-left: 1px solid var(--line);
}

.lixcol--left,
.lixcol--mid {
  display: flex;
  flex-direction: column;
}

.lixcol--left { gap: var(--s-6); }
.lixcol--mid  { gap: var(--s-5); }


/* ==========================================================================
   5. LEFT COLUMN — scenario + record
   ========================================================================== */

.lixblock {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* The record is the last thing in this pane and it is visibly still filling
   in, so it takes the slack instead of leaving a void of bare panel under it
   while the taller centre column runs on. */
.lixblock--rec {
  flex: 1 1 auto;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}

.lixblock--rec .record__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* definition rows -------------------------------------------------------- */

.lixdl {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Labels left, values left, on one shared axis. Pushing the values to the
   right edge opened a ragged gutter down the middle of the list — a fixed
   label column closes it and gives the values a single reading edge. */
.lixdl__row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  min-width: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.lixdl__row:first-child { padding-top: 0; }
.lixdl__row:last-child  { padding-bottom: 0; border-bottom: 0; }

.lixdl__row > dt {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixdl__row > dd {
  margin: 0;
  min-width: 0;
  text-align: left;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* the record that fills in ----------------------------------------------- */

.lixrec {
  display: flex;
  flex-direction: column;
}

/* the pane is narrow, so key over value reads far better than key | value */
.lixrec .record__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-block: var(--s-3);
}

.lixrec .record__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixrec .record__val {
  text-align: left;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}


/* ==========================================================================
   6. CENTRE COLUMN — scene + transcript
   ========================================================================== */

.lixscene {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 15rem;
}

.lixscene > .eyebrow { margin: 0; }

.lixscene__h {
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

/* the cause-and-effect strip: arrived → system did → record says → owner */

.lixflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.lixflow__c {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--bg-card);
}

/* the connector that makes it read as one chain */
.lixflow__c + .lixflow__c::before {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(var(--s-2) * -1);
  width: var(--s-2);
  height: 2px;
  background: var(--line-strong);
}

.lixflow__c--own {
  border-top-color: var(--link);
  background: var(--bg-card-2);
}

.lixflow__c--human { border-top-color: var(--amber); }

.lixflow__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixflow__v {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.lixflow__c--own .lixflow__v { font-weight: 600; }

.lixscene__next {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  color: var(--muted);
}

.lixscene__next::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--line-strong);
}

.lixscene__next--done {
  color: var(--ok-hi, var(--ok));
  font-weight: 600;
}

.lixscene__next--done::before { background: currentColor; }

/* chat panel ------------------------------------------------------------- */

.lixchat {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
  box-shadow: var(--shadow-card);
}

.lixchat__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}

.lixchat__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--accent);
}

.lixchat__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lixchat__name {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.lixchat__sub {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixchat__live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* message list ----------------------------------------------------------- */

.lixchat__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  /* head-room for the "Now" marker on the current step */
  padding: var(--s-2) 0 0;
  list-style: none;
  min-height: 4.5rem;
}

.lixmsgs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.lixmsg {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-xs) var(--r-sm) var(--r-sm) var(--r-xs);
  background: var(--bg-card);
}

.lixmsg__who {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixmsg__body {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.lixmsg__lang,
.lixmsg__tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--muted);
}

/* speaker variants — the label text carries the meaning, colour only echoes it */
.lixmsg--sys {
  background: transparent;
  border-left-color: var(--line-strong);
}
.lixmsg--sys .lixmsg__body { color: var(--body); }

.lixmsg--ai {
  border-left-color: var(--accent);
  background: var(--bg-card-2);
}
.lixmsg--ai .lixmsg__who  { color: var(--accent); }
.lixmsg--ai .lixmsg__lang { border-color: var(--accent); color: var(--accent); }
.lixmsg--ai .lixmsg__body { color: var(--ink); }

.lixmsg--lead {
  border-left-color: var(--link);
  background: var(--bg-card-2);
}
.lixmsg--lead .lixmsg__who  { color: var(--link); }
.lixmsg--lead .lixmsg__body { color: var(--ink); }
.lixmsg--lead .lixmsg__lang { border-color: var(--link); color: var(--link); }

.lixmsg--human {
  border-left-color: var(--amber);
  background: var(--bg-card-2);
}
.lixmsg--human .lixmsg__who  { color: var(--amber); }
.lixmsg--human .lixmsg__body { color: var(--ink); }
.lixmsg--human .lixmsg__tag  { border-color: var(--amber); color: var(--amber); }

/* the unreviewed-Spanish flag -------------------------------------------- */

.lixchat__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}




/* ==========================================================================
   8. RUN STATES
   Scenes and results carry [data-only="n"]; the player writes [data-run-index]
   on .lixrun. Transcript items carry [data-run-state].
   ========================================================================== */

.lixrun [data-only] { display: none; }

.lixrun[data-run-index="0"] [data-only="0"],
.lixrun[data-run-index="1"] [data-only="1"],
.lixrun[data-run-index="2"] [data-only="2"],
.lixrun[data-run-index="3"] [data-only="3"],
.lixrun[data-run-index="4"] [data-only="4"],
.lixrun[data-run-index="5"] [data-only="5"] {
  display: flex;
  animation: lixin var(--d-3) var(--e-out) both;
}

@keyframes lixin {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Transcript states. A transcript is a chronological log, so a scene that has
   not happened yet is simply not written; past scenes recede, and the current
   one is unmistakably foregrounded. --------------------------------------- */

.lixmsgs[data-run-state="future"] { display: none; }

.lixmsgs[data-run-state="past"] .lixmsg {
  opacity: .58;
  box-shadow: none;
  transition: opacity var(--d-3) var(--e-out);
}

.lixmsgs[data-run-state="past"]:hover .lixmsg { opacity: .85; }

.lixmsgs[data-run-state="current"] {
  position: relative;
  padding-left: var(--s-4);
  border-left: 2px solid var(--link);
}

.lixmsgs[data-run-state="current"]::before {
  content: "Now";
  position: absolute;
  z-index: 1;
  top: -.85rem;
  left: -2px;
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: var(--link);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--void, #05080c);
}

.lixmsgs[data-run-state="current"] .lixmsg {
  border-color: var(--line);
  background: var(--bg-card-3);
  box-shadow: var(--shadow-card);
  animation: lixin var(--d-3) var(--e-out) both;
}

/* The record and the ledger only ever show what has actually happened —
   rows that belong to a later scene are simply not written yet. ---------- */
.lixrun[data-run-index="0"] :is([data-fill="1"], [data-fill="2"], [data-fill="3"], [data-fill="4"], [data-fill="5"], [data-row="1"], [data-row="2"], [data-row="3"], [data-row="4"], [data-row="5"]),
.lixrun[data-run-index="1"] :is([data-fill="2"], [data-fill="3"], [data-fill="4"], [data-fill="5"], [data-row="2"], [data-row="3"], [data-row="4"], [data-row="5"]),
.lixrun[data-run-index="2"] :is([data-fill="3"], [data-fill="4"], [data-fill="5"], [data-row="3"], [data-row="4"], [data-row="5"]),
.lixrun[data-run-index="3"] :is([data-fill="4"], [data-fill="5"], [data-row="4"], [data-row="5"]),
.lixrun[data-run-index="4"] :is([data-fill="5"], [data-row="5"]) {
  display: none;
}

/* the row written by the scene now on screen */
.lixrun[data-run-index="1"] [data-fill="1"],
.lixrun[data-run-index="2"] [data-fill="2"],
.lixrun[data-run-index="3"] [data-fill="3"],
.lixrun[data-run-index="4"] [data-fill="4"],
.lixrun[data-run-index="5"] [data-fill="5"] {
  animation: lixin var(--d-3) var(--e-out) both;
}


/* ==========================================================================
   9. SCENE TIMELINE + CONTROLS
   ========================================================================== */

.lixtl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.lixtl__i { min-width: 0; }

.lixtl__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-top: 3px solid transparent;
  background: var(--bg-card);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--d-2) var(--e-out),
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.lixtl__b:hover {
  color: var(--ink);
  background: var(--bg-card-2);
  border-top-color: var(--link);
}

.lixtl__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.lixtl__n {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  color: var(--muted);
  transition: color var(--d-2) var(--e-out);
}

/* PAST — done, receded but still legible */
.lixrun[data-run-index="1"] .lixtl__i:nth-child(-n + 1) .lixtl__b,
.lixrun[data-run-index="2"] .lixtl__i:nth-child(-n + 2) .lixtl__b,
.lixrun[data-run-index="3"] .lixtl__i:nth-child(-n + 3) .lixtl__b,
.lixrun[data-run-index="4"] .lixtl__i:nth-child(-n + 4) .lixtl__b,
.lixrun[data-run-index="5"] .lixtl__i:nth-child(-n + 5) .lixtl__b {
  border-top-color: var(--link);
  background: var(--bg-card-2);
  color: var(--body);
}

.lixrun[data-run-index="1"] .lixtl__i:nth-child(-n + 1) .lixtl__n,
.lixrun[data-run-index="2"] .lixtl__i:nth-child(-n + 2) .lixtl__n,
.lixrun[data-run-index="3"] .lixtl__i:nth-child(-n + 3) .lixtl__n,
.lixrun[data-run-index="4"] .lixtl__i:nth-child(-n + 4) .lixtl__n,
.lixrun[data-run-index="5"] .lixtl__i:nth-child(-n + 5) .lixtl__n {
  color: var(--link);
}

/* CURRENT — the one scene on screen, unmistakable */
.lixrun[data-run-index="0"] .lixtl__i:nth-child(1) .lixtl__b,
.lixrun[data-run-index="1"] .lixtl__i:nth-child(2) .lixtl__b,
.lixrun[data-run-index="2"] .lixtl__i:nth-child(3) .lixtl__b,
.lixrun[data-run-index="3"] .lixtl__i:nth-child(4) .lixtl__b,
.lixrun[data-run-index="4"] .lixtl__i:nth-child(5) .lixtl__b,
.lixrun[data-run-index="5"] .lixtl__i:nth-child(6) .lixtl__b {
  border-top-color: var(--blue);
  background: var(--bg-card-3);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--blue);
}

.lixrun[data-run-index="0"] .lixtl__i:nth-child(1) .lixtl__n,
.lixrun[data-run-index="1"] .lixtl__i:nth-child(2) .lixtl__n,
.lixrun[data-run-index="2"] .lixtl__i:nth-child(3) .lixtl__n,
.lixrun[data-run-index="3"] .lixtl__i:nth-child(4) .lixtl__n,
.lixrun[data-run-index="4"] .lixtl__i:nth-child(5) .lixtl__n,
.lixrun[data-run-index="5"] .lixtl__i:nth-child(6) .lixtl__n {
  color: var(--link);
}


/* ==========================================================================
   10. ACTIVITY LEDGER
   ========================================================================== */

.lixled {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}

/* At scene 1 the ledger holds a single row, which used to leave the whole
   foot of the dark band as raw unstyled black. The plate now holds a modest
   reserve and is closed by a footer strip, so the empty space belongs to the
   ledger and reads as a log waiting to be written. */
.lixled > .scroll-x {
  flex: 1 1 auto;
  min-height: 12rem;
}

.lixled__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-card-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
}

.lixled__foot-k {
  padding: 2px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixled__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.lixled__table caption {
  caption-side: top;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lixled__table th {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.lixled__table td {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
  vertical-align: top;
}

.lixled__table tbody tr:last-child td { border-bottom: 0; }

.lixled__table td:first-child {
  width: 1%;
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lixled__table td:nth-child(2) { color: var(--ink); }


/* ==========================================================================
   11. BILINGUAL PAIR
   ========================================================================== */

.lixpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}

.lixpair__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-8);
  border-top: 2px solid var(--line-strong);
}

.lixpair__card--es { border-top-color: var(--accent); }

.lixpair__card > p { margin: 0; }

.lixpair__line {
  font-family: var(--font-display);
  font-size: var(--t-title-1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}

.lixpair__card > p:last-child {
  max-width: 52ch;
  line-height: 1.6;
}

.lixcode {
  padding: 1px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-card-2);
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink);
  white-space: nowrap;
}


/* ==========================================================================
   12. REVIEW NOTICE
   ========================================================================== */

.lixreview {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  column-gap: var(--s-12);
  row-gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-8);
  padding: var(--s-7, var(--s-8));
  border-left: 2px solid var(--amber);
}

.lixreview > p { margin: 0; }

.lixreview > :nth-child(1) { grid-column: 1; grid-row: 1; }
.lixreview > :nth-child(2) { grid-column: 1; grid-row: 2; }
.lixreview > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.lixreview > :nth-child(4) { grid-column: 2; grid-row: 3; }

/* This sentence had been set at near-headline scale, so an internal caveat
   competed with the section heading above it. It is a lede, not a headline:
   same words, one step below the body-copy heading tier. */
.lixreview__lede {
  font-family: var(--font-display), sans-serif;
  font-size: var(--t-base, 1rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}

.lixreview > .small {
  max-width: 70ch;
  color: var(--body);
  line-height: 1.7;
}


/* ==========================================================================
   13. EXAMPLE TABS
   ========================================================================== */

.lixex {
  margin-top: var(--s-16);
  padding-top: var(--s-10);
  border-top: 1px solid var(--line);
}

.lixex__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-8);
  margin-bottom: var(--s-6);
}

.lixex__head > p { margin: 0; }
.lixex__head > p:last-child { max-width: 58ch; }

.lixex__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}

.lixex__tab {
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--d-2) var(--e-out),
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.lixex__tab:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

.lixex__tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--bg-card-3);
  color: var(--ink);
  font-weight: 600;
}

.lixex__panel {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
  padding: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.lixex__panel[hidden] { display: none; }

.lixdl--light .lixdl__row { padding: var(--s-3) 0; }

.lixex__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: 0 0 0 var(--s-10);
  border-left: 1px solid var(--line);
  list-style: none;
}

.lixex__lines > li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink);
}

.lixex__lines > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lixex__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   14. QUALIFICATION GATE DIAGRAM
   ========================================================================== */

.lixgate {
  margin: var(--s-4) 0 var(--s-16);
}

.lixgate__hint { margin: 0 0 var(--s-3); }

/* This figure is a wide one: beat the 680px house cap on inline SVG. The
   min-width keeps every label at or above the ~9px legibility floor — below
   that the diagram scrolls sideways rather than being squashed. */
.lixgate .scroll-x > .lixgate__svg {
  display: block;
  width: 1240px;
  max-width: 100%;
  min-width: 60rem;
  height: auto;
  margin-inline: auto;
}

/* Same kit, same geometry contract as the hero figure. Colour by variable
   only, so the diagram survives a band flip. ----------------------------- */

.lixgate__box rect {
  fill: var(--bg-card-2);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.lixgate__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--rf-label, var(--muted));
}

.lixgate__lbl--accent { fill: var(--rf-out, var(--accent)); }

.lixgate__lbl--human {
  fill: var(--amber);
  letter-spacing: .4px;
  font-size: 11.5px;
}

.lixgate__idx {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  fill: var(--rf-out, var(--link));
}

.lixgate__ttl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  fill: var(--ink);
}

.lixgate__ch {
  stroke: var(--rf-ch-1, var(--accent));
  stroke-width: 2.5;
}

.lixgate__port { fill: var(--rf-port, var(--accent)); }

.lixgate__ring,
.lixgate__ring2 {
  stroke: var(--rf-ring, var(--line-strong));
  stroke-width: 1;
}

.lixgate__ring2 { opacity: .4; }

.lixgate__hum {
  stroke: var(--amber-bright, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.lixgate__exc {
  fill: color-mix(in srgb, var(--amber-bright, #E7A63A) 12%, transparent);
  stroke: var(--amber-bright, #E7A63A);
  stroke-width: 1;
}

/* MOBILE CUT of the gate: the same three checks and the same exception
   branch, stacked instead of strung out, in a viewBox the phone can render
   at roughly 1:1. Swapped in under 560px (§20) — the wide figure is not
   shrunk, it is replaced. */
.lixgate__svg--m {
  display: none;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
}

.lixgate__svg--m .lixgate__lbl { font-size: 11px; letter-spacing: .9px; }
.lixgate__svg--m .lixgate__lbl--human { font-size: 11px; letter-spacing: .4px; }
.lixgate__svg--m .lixgate__idx { font-size: 11px; letter-spacing: 1px; }
.lixgate__svg--m .lixgate__ttl { font-size: 12.5px; letter-spacing: .8px; }


/* ==========================================================================
   15. RULES + HUMAN CONTROL
   ========================================================================== */

.lixrules { margin-bottom: var(--s-12); }

/* the aside is a short list — let it end where it ends instead of stretching
   into a tall empty box */
.lixcontrol { align-items: start; }

.lixcontrol__card,
.lixnever {
  display: flex;
  flex-direction: column;
}

.lixcontrol__card > h3 { text-wrap: balance; }

.lixcontrol__card > p.small {
  max-width: 62ch;
  line-height: 1.65;
}

.lixcontrol__rail { margin-top: var(--s-8); }

.lixnever {
  background: var(--bg-card-2);
  border-color: var(--line-strong);
}

.lixnever__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lixnever__list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.lixnever__list > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lixnever__list > li::before {
  content: "";
  width: 12px;
  height: 1px;
  margin-top: .72em;
  background: var(--amber);
}


/* ==========================================================================
   16. BEFORE / AFTER
   ========================================================================== */

.lixba { align-items: stretch; }

.lixba__card {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--line-strong);
}

.lixba__card--manual { border-top-color: var(--amber); }
.lixba__card--system { border-top-color: var(--link); }

.lixba__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lixba__list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.lixba__list > li > svg {
  flex: none;
  margin-top: .2em;
}

.lixba__card--manual .lixba__list > li > svg { color: var(--amber); }
.lixba__card--system .lixba__list > li > svg { color: var(--link); }


/* ==========================================================================
   17. THE SPINE
   ========================================================================== */

.lixspine {
  margin-top: var(--s-20);
  padding-top: var(--s-12);
  border-top: 1px solid var(--line);
}

.lixspine__head { margin-bottom: var(--s-8); }

.lixspine__head .display-3 { text-wrap: balance; }

.lixspine__grid { align-items: stretch; }

.lixspine__tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-left: 2px solid var(--line-strong);
}

.lixspine__tile--human { border-left-color: var(--amber); }

.lixspine__v {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}


/* ==========================================================================
   18. OTHER DEMONSTRATIONS
   ========================================================================== */

.lixother { margin-top: var(--s-2); }

.lixother__c {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 11rem;
  color: var(--body);
  text-decoration: none;
}

.lixother__c h3,
.lixother__c p {
  text-decoration: none;
}

.lixother__c h3 {
  margin: 0;
  color: var(--ink);
}

.lixother__c p:last-child {
  margin: 0;
  color: var(--body);
}

.lixother__c--now {
  border-color: var(--accent);
  background: var(--bg-card-2);
  cursor: default;
}

.lixother__c--now .card__index { color: var(--accent); }

.lixother__c--now::after {
  content: "You are here";
  align-self: flex-start;
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   19. FINAL CTA
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
}

.cta .shell {
  position: relative;
  z-index: 1;
}

.lixcta__line {
  margin: var(--s-2) auto 0;
  max-width: 32ch;
  font-size: var(--t-title-1);
  line-height: 1.3;
  color: var(--muted);
}


/* ==========================================================================
   19b. CONSOLE LEGIBILITY
   The guided run is a demonstration, not an admin screenshot. Every tier
   inside the dark panel sat at the bottom of the scale, so from a normal
   viewing distance the whole stage greyed out into 9px chrome. Each tier
   moves up exactly one step — micro to xs, sm to base — and the panel keeps
   its hierarchy while becoming readable across a desk.
   ========================================================================== */

.lixdl__row > dt,
.lixrec .record__key,
.lixflow__k,
.lixmsg__who,
.lixchat__sub,
.lixchat__live,
.lixled__table caption,
.lixled__table th {
  font-size: var(--t-xs);
}

.lixdl__row > dd,
.lixrec .record__val,
.lixflow__v,
.lixmsg__body,
.lixled__table {
  font-size: var(--t-base, 1rem);
}

.lixmsg__body { line-height: 1.6; }

.lixrec .record__row { padding-block: var(--s-3); }

/* the transport reads as the control surface it is */
.lixpos__k { font-size: var(--t-xs); }

/* The dark band used to run on for a screen-height of empty black under the
   ledger. It closes shortly after the last thing in it. */
#stage.band { padding-block-end: clamp(var(--s-12), 7vw, var(--s-16)); }


/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {
  .lixrun { --lix-pane: 280px; }
  .lixcol { padding: var(--s-5); }
  .lixflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lixflow__c + .lixflow__c::before { display: none; }
}

@media (max-width: 1140px) {
  /* the scene and transcript take the full width; the record sits beneath */
  .lixstage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mid" "left";
  }
  .lixcol--mid {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .lixflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lixscene { min-height: 0; }
}

@media (max-width: 1080px) {
  .lixhero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }
  .lixhero__copy { max-width: none; }
  .lixhero__title { max-width: 18ch; }
  .lixhero__figure { padding: var(--s-5); }

  .lixex__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  .lixex__lines {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--s-6);
  }

  .lixreview {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-4);
  }
  .lixreview > :nth-child(1),
  .lixreview > :nth-child(2),
  .lixreview > :nth-child(3),
  .lixreview > :nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  .lixtl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lixpair { grid-template-columns: minmax(0, 1fr); }
  .lixreview { padding: var(--s-6); }
}

@media (max-width: 768px) {
  .lixstage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mid" "left";
  }
  .lixcol--mid {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .lixchat__list { min-height: 0; }
  .lixscene { min-height: 0; }
  .lixflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lixex__lines > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }

  .lixgate { margin-bottom: var(--s-12); }
  .lixspine { margin-top: var(--s-12); padding-top: var(--s-10); }
  .lixex { margin-top: var(--s-12); }
}

/* Below this the hero figure would squash its labels under the ~9px floor,
   so it scrolls inside its own plate instead. */
@media (max-width: 700px) {
  .lixhero__figure {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .lixfig {
    min-width: 460px;
    max-width: none;
    margin-inline: 0;
    overflow: hidden;
  }
  .lixhero__fighint { margin: 0 0 var(--s-3); }
}

@media (max-width: 560px) {
  /* ── the mobile cuts take over ─────────────────────────────────────────
     Both diagrams swap to their narrow redraws here. Nothing scrolls
     sideways and nothing is scaled down, so the sideways-scroll hints go
     with them. */
  .lixhero__fighint,
  .lixgate__hint { display: none; }

  .lixhero__figure {
    justify-content: center;
    overflow-x: visible;
  }

  .lixfig--d { display: none; }
  .lixfig--m {
    display: block;
    min-width: 0;
    max-width: 340px;
    margin-inline: auto;
  }

  .lixgate > .scroll-x { display: none; }
  .lixgate__svg--m { display: block; }

  /* one column rather than a 2 x 2 that would overflow the phone */
  .lixhero__chips {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .lixhero__chips > li { padding: var(--s-2) var(--s-3); }

  .lixcol { padding: var(--s-4); }
  .lixchat { padding: var(--s-4); }
  .lixblock--rec { padding: var(--s-4); }

  .lixtl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lixflow { grid-template-columns: minmax(0, 1fr); }

  .lixctrl { padding: var(--s-4); }
  .lixbtn--main { flex: 1 1 auto; }
  .lixpos {
    flex: 1 0 100%;
    justify-content: flex-end;
    margin-left: 0;
    padding-left: 0;
  }

  .lixdl__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s-1);
  }

  .lixchat__head { flex-wrap: wrap; }

  /* the table is wider than the phone, so pin its caption to the left edge
     instead of letting it scroll out of reach */
  .lixled__table caption {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: min(100%, calc(100vw - var(--s-10)));
  }

  .lixex__panel { padding: var(--s-5); }
  .lixex__tab { padding: var(--s-3) var(--s-4); }
  .lixex__tabs { flex-direction: column; }
  .lixex__tab { text-align: left; }

  .lixpair__card { padding: var(--s-6); }
  .lixreview { padding: var(--s-5); }

  .lixled__table caption,
  .lixled__table th,
  .lixled__table td { padding-inline: var(--s-4); }
}

@media (max-width: 340px) {
  .lixtl { grid-template-columns: minmax(0, 1fr); }
  .lixmsg { padding: var(--s-3); }
}


/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lixfig__pk {
    animation: none;
    opacity: 0;
  }

  .lixfig__ring { animation: none; }

  .lixrun [data-only],
  .lixmsgs[data-run-state="current"] .lixmsg {
    animation: none !important;
  }

  /* the player does not auto-advance under reduced motion, so every scene,
     message and row is shown at once — nothing depends on the animation and
     the whole run reads as static content */
  .lixrun[data-run-index] [data-only] { display: flex; }
  .lixrun[data-run-index] .lixrec .record__row { display: grid; }
  .lixrun[data-run-index] .lixled__table tbody tr { display: table-row; }
  .lixrun[data-run-index] .lixmsgs[data-run-state="future"] { display: flex; }
  .lixrun[data-run-index] .lixmsgs[data-run-state="past"] .lixmsg { opacity: 1; }
  .lixrun[data-run-index] .lixscene + .lixscene {
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-soft);
  }
  .lixscene { min-height: 0; }
  .lixchat__list { min-height: 0; }

  .lixprog > i,
  .lixrec .record__row,
  .lixrec .record__val,
  .lixtl__b,
  .lixtl__n,
  .lixex__tab {
    transition: none;
  }
}