/* ============================================================
   Ludumina Labs — §02  LUMI, the real-time AI guidance layer.
   Owner: lumi-builder.  All rules scoped to [data-section="lumi"].
   ============================================================ */

[data-section="lumi"] {
  --acc: var(--cy);                      /* per-moment accent, driven by JS */
  --acc-soft: rgba(63, 224, 208, 0.16);
  --pad: clamp(1rem, 1.35vw, 1.4rem);
  /* pinned-rig geometry — JS refines --lm-pin-top against the real viewport */
  --lm-pin-top: 84px;
  --lm-run: 1440px;
  position: relative;
  isolation: isolate;
  /* `clip` on one axis only: a clip container is not a scroll container, so
     the pinned rig below still resolves its sticky offsets against the
     viewport. `overflow: clip` on both axes would work too, but keeping y
     visible removes any doubt across engines. */
  overflow-x: clip;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10, 13, 30, 0.85) 28%, rgba(10, 13, 30, 0.85) 72%, transparent 100%);
}

/* soft accent bloom behind the rig; hue follows the active moment.
   The bloom clips itself so the section never needs an overflow that would
   turn into a scrollport and break the pin. */
[data-section="lumi"] .lm-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
[data-section="lumi"] .lm-aura::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(1500px, 130vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--acc-soft) 0%, transparent 62%);
  opacity: 0.9;
  transition: background 1.1s var(--ease);
}

/* ---------------- lede ---------------- */

[data-section="lumi"] .lm-lede {
  display: grid;
  grid-template-columns: minmax(0, 62ch) 1fr;
  align-items: start;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
[data-section="lumi"] .lm-lede__p {
  font-size: clamp(1.02rem, 1.28vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-80);
  text-wrap: pretty;
}
[data-section="lumi"] .lm-lede__p strong { color: var(--ink); font-weight: 600; }
[data-section="lumi"] .lm-lede__p em { color: var(--cy); font-style: normal; }
[data-section="lumi"] .lm-lede__sig {
  justify-self: end;
  align-self: end;
  color: var(--ink-60);
  letter-spacing: 0.28em;
  white-space: nowrap;
  padding-bottom: 0.35rem;
}
[data-section="lumi"] .lm-lede__sig span { color: var(--acc); margin-inline: 0.35em; }

/* ---------------- rig shell ----------------

   .lm-track is a plain scroll runway: its own height is the rig plus
   --lm-run of padding. The rig sticks to the top of the viewport for
   exactly that runway, so each of the four moments gets a long hold with
   the whole causal chain framed. Nothing captures the wheel; the reader
   scrolls normally and the rig simply holds still while they do.
   JS adds .is-pinned only when the whole rig actually fits on screen. */

[data-section="lumi"] .lm-track { position: relative; }

/* The runway MUST be in-flow content, not padding: Chrome measures a sticky
   element's travel against its containing block's CONTENT box, so
   `padding-bottom` on the track buys exactly zero pin — measured, not
   assumed. A block-level ::after is real content and pins correctly. */
[data-section="lumi"].is-pinned .lm-track::after {
  content: "";
  display: block;
  height: var(--lm-run);
}
[data-section="lumi"].is-pinned .lm-rig {
  position: sticky;
  top: var(--lm-pin-top);
}

[data-section="lumi"] .lm-rig {
  position: relative;
  padding: clamp(0.85rem, 1.2vw, 1.2rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-both);
  --notch: 22px;
}

[data-section="lumi"] .lm-rig__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 0 0.5rem clamp(0.85rem, 1.2vw, 1.1rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(0.85rem, 1.2vw, 1.2rem);
}
[data-section="lumi"] .lm-rig__label { color: var(--ink-60); }

[data-section="lumi"] .lm-steps {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
  margin-inline: auto;
  flex-wrap: wrap;
}
[data-section="lumi"] .lm-step {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-40);
  padding-bottom: 0.35em;
  border-bottom: 1px solid transparent;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
[data-section="lumi"] .lm-step__n { opacity: 0.6; }
[data-section="lumi"] .lm-step.is-on {
  color: var(--acc);
  border-bottom-color: var(--acc);
}
[data-section="lumi"] .lm-step.is-on .lm-step__n { opacity: 1; }

[data-section="lumi"] .lm-rig__scrollhint {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink-40);
  white-space: nowrap;
}
[data-section="lumi"] .lm-rig__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
  animation: lm-breathe 2.4s var(--ease) infinite;
}
@keyframes lm-breathe { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* shown only when motion is reduced — replaces the scroll hint */
[data-section="lumi"] .lm-rig__still { display: none; color: var(--ink-40); white-space: nowrap; }

/* ---------------- disclosure, on the rig chrome ----------------
   It sits with the capture badge and the running timecode it disclaims,
   inside the pinned frame, so it is on screen for every moment. */

[data-section="lumi"] .lm-rig__foot {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: clamp(0.7rem, 1vw, 1rem);
  padding: clamp(0.6rem, 0.9vw, 0.8rem) 0.5rem 0.1rem;
  border-top: 1px solid var(--line);
}
[data-section="lumi"] .lm-rig__foot-k {
  flex: none;
  color: var(--acc);
  opacity: 0.85;
  transition: color 0.6s var(--ease);
}
[data-section="lumi"] .lm-rig__foot-t {
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.44);
  text-wrap: pretty;
}

/* ---------------- three-panel grid ---------------- */

[data-section="lumi"] .lm-grid {
  display: grid;
  grid-template-columns: 1.32fr 34px minmax(0, 1fr) 34px 1.16fr;
  gap: clamp(0.5rem, 0.9vw, 1rem);
  align-items: stretch;
}

[data-section="lumi"] .lm-panel {
  --notch: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad);
  background: rgba(5, 6, 15, 0.62);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-both);
}
[data-section="lumi"] .lm-panel__hd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: var(--pad);
  border-bottom: 1px solid var(--line);
}
[data-section="lumi"] .lm-panel__n {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #04121A;
  background: var(--acc);
  padding: 0.15em 0.5em 0.1em;
  transition: background 0.6s var(--ease);
}
[data-section="lumi"] .lm-panel__t {
  font-family: var(--f-display);
  font-size: clamp(0.66rem, 0.78vw, 0.78rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--ink);
}

/* ---------------- connector flow ---------------- */

[data-section="lumi"] .lm-flow {
  position: relative;
  align-self: stretch;
  min-height: 34px;
}
[data-section="lumi"] .lm-flow__rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
}
[data-section="lumi"] .lm-flow__arrow {
  position: absolute;
  right: 2px; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid var(--acc);
  border-right: 1px solid var(--acc);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.85;
}
[data-section="lumi"] .lm-flow__pip {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
  animation: lm-pip 2.6s linear infinite;
}
[data-section="lumi"] .lm-flow__pip--b { animation-delay: 1.3s; }
@keyframes lm-pip {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

/* ---------------- 01 · capture panel ---------------- */

/* The source is a 1.9:1 phone capture with in-game text baked into the frame.
   Any cover-crop slices that text mid-word, which reads as sloppy rather than
   authentic — so the frame is letterboxed, never cropped. The box sits at 2:1,
   between the clip (1.90:1) and the poster (2.31:1), so both letterbox by only
   a few pixels and every baked-in caption stays whole. */
[data-section="lumi"] .lm-cap__media {
  position: relative;
  aspect-ratio: 2 / 1;
  /* Panel 01's content is shorter than panel 02's and the grid stretches all
     three to match. Let the footage take some of the slack — it is the hero
     asset — but cap it so the letterbox matte stays a thin frame, not a void. */
  flex: 1 1 auto;
  max-height: 300px;
  overflow: hidden;
  background: #02030A;
  clip-path: var(--clip-tr);
  --notch: 12px;
}
[data-section="lumi"] .lm-cap__vid {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  background: #02030A;
  filter: saturate(1.15) contrast(1.08) brightness(1.05);
}
[data-section="lumi"] .lm-cap__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 44%, rgba(5, 6, 15, 0.62) 100%),
    linear-gradient(180deg, rgba(5, 6, 15, 0.55) 0%, transparent 26%, transparent 62%, rgba(5, 6, 15, 0.8) 100%);
}
[data-section="lumi"] .lm-cap__scan {
  position: absolute; left: 0; right: 0; height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(63, 224, 208, 0.07) 55%, transparent);
  animation: lm-scan 5.2s linear infinite;
}
@keyframes lm-scan { 0% { top: -26%; } 100% { top: 100%; } }

/* four corner registration ticks */
[data-section="lumi"] .lm-cap__ticks {
  position: absolute; inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--acc), var(--acc)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--acc), var(--acc)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--acc), var(--acc)) 100% 100% / 1px 14px no-repeat;
  opacity: 0.75;
}
[data-section="lumi"] .lm-cap__hud {
  position: absolute;
  left: 14px; right: 14px; bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
[data-section="lumi"] .lm-cap__rec { display: flex; align-items: center; gap: 0.55em; }
/* Steady, not blinking: a pulsing red dot is the grammar of a live recording
   light, and this is replayed footage. */
[data-section="lumi"] .lm-cap__rec i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mg);
  box-shadow: 0 0 9px var(--mg);
  opacity: 0.85;
}
[data-section="lumi"] .lm-cap__tc { font-variant-numeric: tabular-nums; color: var(--acc); }

[data-section="lumi"] .lm-meta {
  margin-top: var(--pad);
  border-top: 1px solid var(--line);
}
[data-section="lumi"] .lm-meta__row {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-section="lumi"] .lm-meta dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  padding-top: 0.15em;
}
[data-section="lumi"] .lm-meta dd {
  margin: 0;
  font-size: 0.815rem;
  line-height: 1.45;
  color: var(--ink-80);
}
[data-section="lumi"] .lm-cap__note {
  margin-top: var(--pad);
  padding-top: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}

/* ---------------- 02 · signal panel ---------------- */

/* The scope traces three of the seven channels. Naming them, and labelling the
   axis, is what stops it being set dressing: the keys use the same channel
   names as the list below, the snapshot and the citation chips. */
[data-section="lumi"] .lm-scope { margin-bottom: 0.9rem; }
[data-section="lumi"] .lm-scope__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  padding-bottom: 0.45rem;
}
[data-section="lumi"] .lm-scope__key li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-40);
}
[data-section="lumi"] .lm-scope__key li::before {
  content: "";
  width: 12px; height: 2px;
  background: currentColor;
}
[data-section="lumi"] .lm-scope__key .is-a { color: var(--acc); transition: color 0.6s var(--ease); }
[data-section="lumi"] .lm-scope__key .is-b { color: rgba(255, 255, 255, 0.34); }
[data-section="lumi"] .lm-scope__key .is-c { color: rgba(255, 255, 255, 0.2); }

[data-section="lumi"] .lm-scope__box { position: relative; }
/* sat on top of the traces before — a dark chip keeps both readable */
[data-section="lumi"] .lm-scope__ax {
  position: absolute;
  right: 4px;
  padding: 0 3px;
  background: rgba(5, 6, 15, 0.78);
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  pointer-events: none;
}
[data-section="lumi"] .lm-scope__ax--t { top: 2px; }
[data-section="lumi"] .lm-scope__ax--b { bottom: 1px; }

[data-section="lumi"] .lm-sig__scope {
  width: 100%;
  height: 46px;
  display: block;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

/* column header — answers "0.78 of what?" before the eye reaches the numbers */
[data-section="lumi"] .lm-chs__hd {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-40);
}

[data-section="lumi"] .lm-chs__note {
  padding-top: 0.5rem;
  font-size: 0.665rem;
  line-height: 1.45;
  color: var(--ink-40);
  text-wrap: pretty;
}

[data-section="lumi"] .lm-chs { display: grid; gap: 1px; }
[data-section="lumi"] .lm-ch {
  --v: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(56px, 8vw, 92px) 2.4rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0 0.25rem 0.5rem;
  transition: background 0.5s var(--ease);
}
/* cited-by-Lumi marker */
[data-section="lumi"] .lm-ch::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 2px;
  background: var(--acc);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform 0.5s var(--ease);
}
[data-section="lumi"] .lm-ch.is-cited::before { transform: scaleY(1); }
[data-section="lumi"] .lm-ch.is-cited { background: rgba(255, 255, 255, 0.038); }

[data-section="lumi"] .lm-ch__k {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.4s var(--ease);
}
[data-section="lumi"] .lm-ch.is-hot .lm-ch__k { color: var(--ink); }
[data-section="lumi"] .lm-ch.is-cited .lm-ch__k { color: var(--acc); }

[data-section="lumi"] .lm-ch__track {
  position: relative;
  height: 9px;
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}
[data-section="lumi"] .lm-ch__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  background: var(--ink-40);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px);
  mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px);
  transition: background 0.4s var(--ease);
}
[data-section="lumi"] .lm-ch.is-hot .lm-ch__track i {
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
}
[data-section="lumi"] .lm-ch__v {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-40);
  transition: color 0.4s var(--ease);
}
[data-section="lumi"] .lm-ch.is-hot .lm-ch__v { color: var(--ink-80); }

/* snapshot readout */
[data-section="lumi"] .lm-snap {
  margin-top: auto;
  padding-top: var(--pad);
}
[data-section="lumi"] .lm-snap__hd {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink-60);
  padding-bottom: 0.6rem;
}
[data-section="lumi"] .lm-snap__pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc);
  opacity: 0.25;
}
[data-section="lumi"] .lm-snap.is-commit .lm-snap__pulse {
  opacity: 1;
  box-shadow: 0 0 10px var(--acc);
}
[data-section="lumi"] .lm-snap__body {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  padding: 0.5rem 0.7rem;
  transition: box-shadow 0.5s var(--ease);
}
[data-section="lumi"] .lm-snap.is-commit .lm-snap__body {
  box-shadow: inset 0 0 0 1px var(--acc);
}
[data-section="lumi"] .lm-snap__row {
  display: grid;
  grid-template-columns: minmax(0, 8.4rem) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.14rem 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  line-height: 1.4;
}
[data-section="lumi"] .lm-snap__row dt { color: var(--ink-40); letter-spacing: 0.03em; }
[data-section="lumi"] .lm-snap__row dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}
[data-section="lumi"] .lm-snap__row dd.is-changed { color: var(--acc); }

/* ---------------- 03 · guidance panel ---------------- */

[data-section="lumi"] .lm-gd {
  background:
    linear-gradient(190deg, var(--acc-soft) 0%, transparent 46%),
    rgba(5, 6, 15, 0.62);
  transition: background 1s var(--ease);
}
[data-section="lumi"] .lm-gd__who {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
[data-section="lumi"] .lm-gd__mark {
  position: relative;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--acc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--acc-soft);
  flex: none;
}
[data-section="lumi"] .lm-gd__mark i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
  animation: lm-breathe 3s var(--ease) infinite;
}
[data-section="lumi"] .lm-gd__name {
  font-family: var(--f-display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-section="lumi"] .lm-gd__role { margin-left: auto; }

/* The lines box absorbs whatever height the grid gives panel 03. Each line
   stretches to fill it and docks its citation chips to the bottom, so the
   chips always sit directly above BY DESIGN instead of leaving a void there. */
[data-section="lumi"] .lm-lines {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  align-content: stretch;
  padding-block: 0.5rem;
}
[data-section="lumi"] .lm-line {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
[data-section="lumi"] .lm-line.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.12s, 0.12s, 0s;
}
[data-section="lumi"] .lm-line__t {
  align-self: center;
  font-size: clamp(1.06rem, 1.5vw, 1.46rem);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
[data-section="lumi"] .lm-line__t::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--acc);
  margin-bottom: 0.85rem;
}

[data-section="lumi"] .lm-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1rem;
}
[data-section="lumi"] .lm-cites::before {
  content: "Grounded in";
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-40);
  width: 100%;
  margin-bottom: 0.15rem;
}
[data-section="lumi"] .lm-cites li {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--acc);
  padding: 0.28em 0.6em;
  background: var(--acc-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* ---- narrow-width echo of the cited channels ----
   Below 1100px panel 02 is no longer beside panel 03, so the channels a line
   cites can be a screen away. This restates them — same names, live values —
   inside the guidance panel, keeping the causal link intact. */
[data-section="lumi"] .lm-echo { display: none; }
[data-section="lumi"] .lm-echo li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.22em 0.6em;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font-family: var(--f-mono);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-40);
}
[data-section="lumi"] .lm-echo li i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--acc);
}
[data-section="lumi"] .lm-echo li.is-hot { color: var(--ink-80); }

[data-section="lumi"] .lm-gd__rule {
  margin-top: auto;
  padding-top: var(--pad);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}
[data-section="lumi"] .lm-gd__rule .micro {
  display: block;
  color: var(--ink-40);
  margin-bottom: 0.35rem;
}

/* ---------------- not-a-chatbot contrast ---------------- */

[data-section="lumi"] .lm-vs {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}
[data-section="lumi"] .lm-vs__hd {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
[data-section="lumi"] .lm-vs__h {
  font-size: clamp(1.5rem, 2.5vw, 2.45rem);
  letter-spacing: -0.015em;
}
[data-section="lumi"] .lm-vs__p {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}

[data-section="lumi"] .lm-vs__pair {
  display: grid;
  grid-template-columns: 1fr 3.5rem 1fr;
  align-items: stretch;
  gap: 0;
}
[data-section="lumi"] .lm-vs__op {
  align-self: center;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-40);
}

[data-section="lumi"] .lm-card {
  --notch: 16px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 1.8vw, 1.85rem);
  clip-path: var(--clip-both);
}
[data-section="lumi"] .lm-card--cold {
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-40);
}
[data-section="lumi"] .lm-card--hot {
  background:
    linear-gradient(200deg, var(--acc-soft), transparent 55%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background 1s var(--ease);
}
[data-section="lumi"] .lm-card__tag { color: var(--ink-40); margin-bottom: 0.85rem; }
[data-section="lumi"] .lm-card--hot .lm-card__tag { color: var(--acc); }
[data-section="lumi"] .lm-card__sees {
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.45;
  color: var(--ink-60);
  margin-bottom: 1.1rem;
}
[data-section="lumi"] .lm-card--hot .lm-card__sees { color: var(--ink); }

[data-section="lumi"] .lm-card__state {
  border-top: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
[data-section="lumi"] .lm-card__state > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.36rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--f-mono);
  font-size: 0.7rem;
}
[data-section="lumi"] .lm-card__state dt { color: var(--ink-40); }
[data-section="lumi"] .lm-card__state dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
[data-section="lumi"] .lm-card--cold .lm-card__state dd { color: rgba(255, 255, 255, 0.22); }
[data-section="lumi"] .lm-card--hot .lm-card__state dd { color: var(--ink); }

[data-section="lumi"] .lm-card__out {
  margin-top: auto;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}
[data-section="lumi"] .lm-card--hot .lm-card__out { color: var(--ink-80); }
[data-section="lumi"] .lm-card--hot .lm-card__out em { color: var(--acc); font-style: normal; }

[data-section="lumi"] .lm-close {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
[data-section="lumi"] .lm-quote { min-width: 0; }
[data-section="lumi"] .lm-quote p {
  font-size: clamp(0.98rem, 1.42vw, 1.42rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
[data-section="lumi"] .lm-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  color: var(--ink-40);
}

/* the two verified product lines, closing the section */
[data-section="lumi"] .lm-tenets {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-content: start;
}
[data-section="lumi"] .lm-tenets li {
  padding-left: 1.15rem;
  border-left: 1px solid var(--line-2);
  font-size: clamp(1rem, 1.22vw, 1.22rem);
  line-height: 1.45;
  color: var(--ink-80);
  text-wrap: pretty;
}
[data-section="lumi"] .lm-tenets .micro {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--acc);
  transition: color 0.8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  [data-section="lumi"] .lm-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "cap sig"
      "gd  gd";
    gap: clamp(0.6rem, 1.4vw, 1rem);
  }
  [data-section="lumi"] .lm-cap { grid-area: cap; }
  [data-section="lumi"] .lm-sig { grid-area: sig; }
  [data-section="lumi"] .lm-gd  { grid-area: gd; }
  [data-section="lumi"] .lm-flow { display: none; }
  [data-section="lumi"] .lm-lede { grid-template-columns: 1fr; }
  [data-section="lumi"] .lm-lede__sig { justify-self: start; }

  /* the cited channels travel with the line that cites them */
  [data-section="lumi"] .lm-echo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
  }
  [data-section="lumi"] .lm-lines { align-content: start; }
  [data-section="lumi"] .lm-line { grid-template-rows: auto auto; }
  [data-section="lumi"] .lm-line__t { align-self: start; }
}

@media (max-width: 880px) {
  [data-section="lumi"] .lm-vs__hd { grid-template-columns: 1fr; align-items: start; }
  [data-section="lumi"] .lm-vs__pair { grid-template-columns: 1fr; gap: 0.75rem; }
  [data-section="lumi"] .lm-vs__op { padding: 0.35rem 0; }
  [data-section="lumi"] .lm-close { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
}

@media (max-width: 720px) {
  [data-section="lumi"] .lm-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cap" "sig" "gd";
  }
  /* Two tidy rows instead of a ragged wrap: label + hint on one line, then a
     2x2 rail that keeps every moment's NAME — "02 03 04" alone told the reader
     nothing about where the sequence was going. */
  [data-section="lumi"] .lm-rig__bar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.85rem 1rem;
  }
  [data-section="lumi"] .lm-rig__label { grid-area: 1 / 1; }
  [data-section="lumi"] .lm-rig__scrollhint,
  [data-section="lumi"] .lm-rig__still { grid-area: 1 / 2; justify-self: end; }
  [data-section="lumi"] .lm-steps {
    grid-area: 2 / 1 / 3 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin-inline: 0;
  }
  /* the active underline should hug its label, not span the grid cell */
  [data-section="lumi"] .lm-step { justify-self: start; }
  [data-section="lumi"] .lm-cap__media { aspect-ratio: 2 / 1; }
  [data-section="lumi"] .lm-ch { grid-template-columns: minmax(0, 1fr) 40% 2.4rem; }
  [data-section="lumi"] .lm-snap__row { grid-template-columns: minmax(0, 7.6rem) minmax(0, 1fr); }
  [data-section="lumi"] .lm-card__state > div { grid-template-columns: minmax(0, 7.6rem) minmax(0, 1fr); }
}

/* Michroma is a very wide face: below ~560px the shared h2 scale would push
   long words past the gutter. Cap our own display type so nothing clips. */
@media (max-width: 560px) {
  [data-section="lumi"] .section-head h2 { font-size: clamp(1rem, 5.5vw, 1.7rem); }
  [data-section="lumi"] .lm-vs__h { font-size: clamp(0.95rem, 5.1vw, 1.5rem); }
  [data-section="lumi"] .lm-quote p { font-size: clamp(0.9rem, 4vw, 1.2rem); }
  [data-section="lumi"] .lm-panel__t { font-size: clamp(0.6rem, 2.6vw, 0.72rem); }
  [data-section="lumi"] .lm-meta__row { grid-template-columns: 4.6rem 1fr; }
  /* keep the rig header on two clean rows at 390px */
  [data-section="lumi"] .lm-rig__label,
  [data-section="lumi"] .lm-rig__scrollhint,
  [data-section="lumi"] .lm-rig__still { font-size: 0.6rem; letter-spacing: 0.13em; }
  [data-section="lumi"] .lm-step { font-size: 0.6rem; letter-spacing: 0.12em; }
}

/* ============================================================
   REDUCED MOTION — hold ONE coherent moment, perfectly still.

   The previous build froze the channels on moment 03 but printed all four
   tutor lines. That refuted the one claim the rig exists to make: the visible
   line cited three channels that were cold, "step 3 / 4" sat above a line
   belonging to step 1, and "guidance_given: 2" sat above four lines. The rig
   now shows exactly the moment its numbers describe, and says so.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-section="lumi"] .lm-cap__scan,
  [data-section="lumi"] .lm-flow__pip,
  [data-section="lumi"] .lm-rig__dot,
  [data-section="lumi"] .lm-gd__mark i { animation: none; }
  [data-section="lumi"] .lm-cap__scan { display: none; }

  /* no pin, no runway: the rig is one static frame */
  [data-section="lumi"] .lm-track::after { display: none; }
  [data-section="lumi"] .lm-rig { position: relative; top: auto; }

  /* the hint would be a lie — nothing advances. Name the frozen moment. */
  [data-section="lumi"] .lm-rig__scrollhint { display: none; }
  [data-section="lumi"] .lm-rig__still { display: block; }

  /* the rolling trace has nothing to roll */
  [data-section="lumi"] .lm-scope { display: none; }

  [data-section="lumi"] .lm-line,
  [data-section="lumi"] .lm-line.is-on,
  [data-section="lumi"] .lm-ch__track i { transition: none; }
  [data-section="lumi"] .lm-line.is-on { transform: none; }
}