/* ==========================================================================
   AlignIQx interactive presentation
   Built on the AlignIQX design system (Edition 02). Every colour, size and
   spacing value below resolves to a token from design-system/tokens.
   Rules kept in view throughout: radius 0 (controls 6px), no shadows, one
   angle at 65 degrees rising (295deg in CSS), no icons, no emoji.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--navy-900);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Stage. Authored at a fixed 1600 x 900 and scaled to fit, so a frame grabbed
   during capture is identical to what is on screen.
   -------------------------------------------------------------------------- */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--navy-900);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
  background: var(--bg-section-a);
  overflow: hidden;
}

#scene-layer { position: absolute; inset: 0; }

.scene {
  position: absolute;
  inset: 0;
  padding: 76px 88px 80px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  will-change: opacity;
}
.scene.is-live { opacity: 1; }

/* Grounds, one per scene, taken from the background tokens. */
.g-hero      { background: var(--bg-hero); }
.g-a         { background: var(--bg-section-a); }
.g-b         { background: var(--bg-section-b); }
.g-navy      { background: var(--bg-navy-fade); }
.g-panelfade { background: var(--bg-panel-fade); }
.g-deep      { background: var(--navy-900); }

/* The plot grid. Behind hero and data regions only, never behind body copy. */
.plotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--plot-grid);
  background-size: var(--plot-grid-size);
  opacity: 0.55;
  pointer-events: none;
}

/* The submark as a large, quiet watermark. Never in the same view as a
   full lockup — scenes that use it carry no other mark. */
.watermark {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 720px;
  opacity: var(--watermark-opacity);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.eyebrow.cy { color: var(--signal-cyan); }
.eyebrow.faint { color: var(--text-faint); }

.display, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-medium);
  margin: 0;
}
.display { font-size: var(--size-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: var(--weight-light); }
.h1 { font-size: var(--size-h1); line-height: var(--lh-tight); letter-spacing: var(--track-h1); font-weight: var(--weight-light); }
.h2 { font-size: var(--size-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); }
.h3 { font-size: var(--size-h3); line-height: var(--lh-heading); }
.h4 { font-size: var(--size-h4); line-height: var(--lh-heading); }
.h5 { font-size: var(--size-h5); line-height: var(--lh-heading); }

.lead { font-size: var(--size-lead); line-height: var(--lh-lead); color: var(--text-lead); font-weight: 300; max-width: var(--measure-lead); margin: 0; }
.body { font-size: var(--size-body-lg); line-height: var(--lh-body); color: var(--text-body); max-width: var(--measure-body); margin: 0; }
.body-sm { font-size: var(--size-body-sm); line-height: var(--lh-ui); color: var(--text-muted); max-width: var(--measure-body); margin: 0; }
.note { font-family: var(--font-mono); font-size: var(--size-mono-sm); line-height: 1.6; letter-spacing: 0.04em; color: var(--text-faint); max-width: var(--measure-note); margin: 0; }
.mono { font-family: var(--font-mono); font-size: var(--size-mono); color: var(--text-body); }
.cy { color: var(--signal-cyan); }
.bl { color: var(--align-blue); }
.strong { color: var(--text-strong); }
.muted { color: var(--text-muted); }

/* The 84 x 3 gradient bar. Rationed — one hero element per view. */
.rule { width: 84px; height: var(--rule-height); background: var(--rule-gradient); flex: none; }
.rule-wide { width: 100%; height: 1px; background: var(--border-rule); }

/* --------------------------------------------------------------------------
   Structure: the hairline grid replaces tables, dividers and card shadows.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-panel);
  padding: var(--panel-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.panel.tight { padding: var(--card-pad); }
.panel.flush { padding: 0; }

.hairgrid {
  display: grid;
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
.hairgrid > * {
  background: var(--surface-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.metric-label { font-family: var(--font-mono); font-size: var(--size-eyebrow); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-muted); }
.metric-value { font-family: var(--font-mono); font-size: 46px; font-weight: 500; color: var(--text-strong); line-height: 1; letter-spacing: -0.01em; }
.metric-value.sm { font-size: 34px; }
.metric-cap { font-size: var(--size-caption); color: var(--text-faint); line-height: 1.45; }
.metric-delta { font-family: var(--font-mono); font-size: var(--size-mono-sm); letter-spacing: 0.08em; color: var(--signal-cyan); }

/* --------------------------------------------------------------------------
   Controls. The only elements in the system that take a radius.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  font-weight: 500;
  padding: 13px 26px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary { background: var(--action-fill); color: var(--action-ink); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: transparent; color: var(--text-body); border-color: var(--navy-300); }
.btn-secondary:hover { color: var(--text-strong); border-color: var(--align-blue); }
.btn:active { filter: brightness(0.92); }
.btn:focus-visible { outline: 1px solid var(--signal-cyan); outline-offset: 2px; border-radius: var(--radius-control); }

/* --------------------------------------------------------------------------
   Persistent chrome
   -------------------------------------------------------------------------- */
#chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
#chrome.on { opacity: 1; }
#chrome-logo { position: absolute; left: 88px; top: 34px; width: 128px; opacity: 0.72; }
#chrome-act {
  position: absolute; right: 88px; top: 36px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--text-faint);
}
#chrome-act-num { color: var(--signal-cyan); }
#chrome-count {
  position: absolute; right: 88px; bottom: 46px;
  font-family: var(--font-mono); font-size: var(--size-mono-sm);
  letter-spacing: 0.14em; color: var(--text-faint);
}

#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(143,163,188,0.14); }
#progress-fill { height: 100%; width: 0; background: var(--rule-gradient); }

/* --------------------------------------------------------------------------
   Opening gate
   -------------------------------------------------------------------------- */
#gate {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg-hero);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vh, 64px) clamp(24px, 5vw, 64px);
  overflow-y: auto;
  transition: opacity 420ms var(--ease);
}
#gate.out { opacity: 0; pointer-events: none; }
#gate-inner { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: clamp(11px, 2.2vh, 24px); }
#gate-logo { width: clamp(148px, 21vh, 232px); margin-bottom: clamp(0px, 1.2vh, 12px); }
#gate h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4.7vh, 52px); line-height: var(--lh-tight); letter-spacing: var(--track-h1); color: var(--text-strong); margin: 0; max-width: 18ch; }
.gate-lead { font-size: clamp(14px, 1.9vh, 17px); line-height: var(--lh-body); color: var(--text-lead); max-width: 62ch; margin: 0; }
#gate-actions { display: flex; gap: 14px; margin-top: clamp(2px, 1.2vh, 12px); flex-wrap: wrap; }
#gate .btn { padding: clamp(9px, 1.5vh, 13px) 26px; }
.gate-note { font-family: var(--font-mono); font-size: var(--size-mono-sm); letter-spacing: 0.06em; color: var(--text-faint); margin: 0; }
.kbd { border: 1px solid var(--border-strong); padding: 1px 7px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Transport
   -------------------------------------------------------------------------- */
#controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: rgba(4,9,16,0.82);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-hairline);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
#controls.on { opacity: 1; transform: translateY(0); }
#controls.hide { opacity: 0; transform: translateY(100%); }

.ctl {
  font-family: var(--font-mono); font-size: var(--size-mono-sm);
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-control);
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ctl:hover { color: var(--text-strong); border-color: var(--navy-300); }
.ctl:focus-visible { outline: 1px solid var(--signal-cyan); outline-offset: 2px; }
.ctl-play { min-width: 104px; }

#ctl-rail { flex: 1; display: flex; gap: 2px; align-items: stretch; height: 26px; margin: 0 8px; min-width: 0; }
.rail-seg { flex: 1 1 0; min-width: 0; background: rgba(143,163,188,0.16); border: none; padding: 0; cursor: pointer; position: relative; transition: background var(--dur) var(--ease); }
.rail-seg:hover { background: rgba(143,163,188,0.34); }
.rail-seg.done { background: var(--navy-350); }
.rail-seg.now { background: var(--signal-cyan); }
.rail-seg.actstart { margin-left: 9px; }
.rail-seg:focus-visible { outline: 1px solid var(--signal-cyan); outline-offset: 2px; }

#rail-tip {
  position: fixed; z-index: 31; bottom: 62px;
  background: var(--navy-900); border: 1px solid var(--border-strong);
  padding: 7px 12px; pointer-events: none; opacity: 0;
  font-family: var(--font-mono); font-size: var(--size-mono-sm);
  letter-spacing: 0.06em; color: var(--text-body); white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
#rail-tip.on { opacity: 1; }

/* --------------------------------------------------------------------------
   Scene furniture
   -------------------------------------------------------------------------- */
.s-head { display: flex; flex-direction: column; gap: 16px; flex: none; margin-bottom: 30px; }
.s-head .rule { margin-bottom: 4px; }
.s-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-9); }

/* Section divider: the 65 degree cut, computed for 1600 x 900 (run 419.7px). */
.divider { justify-content: center; }
.divider-cut {
  position: absolute; inset: 0;
  background: var(--bg-panel-fade);
  clip-path: polygon(0 0, 736px 0, 316px 100%, 0 100%);
}
.divider-inner { position: relative; display: flex; flex-direction: column; gap: 26px; max-width: 900px; }
.divider-num { font-family: var(--font-mono); font-size: 116px; font-weight: 400; line-height: 1; color: var(--navy-350); letter-spacing: -0.02em; }

/* Two-up and three-up layouts */
.cols { display: grid; gap: var(--grid-gap-lg); }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Position description (scene 03)
   -------------------------------------------------------------------------- */
.jd {
  background: var(--surface-panel);
  border: 1px solid var(--border-panel);
  display: grid;
  grid-template-columns: 300px 1fr;
}
.jd-side { padding: 32px; border-right: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 22px; }
.jd-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.jd-field { display: flex; flex-direction: column; gap: 5px; }
.jd-field .k { font-family: var(--font-mono); font-size: var(--size-eyebrow); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-faint); }
.jd-field .v { font-size: var(--size-body-sm); color: var(--text-body); }

/* Responsibility rows — the objects that move in scene 05 */
.resp { display: flex; align-items: flex-start; gap: 16px; padding: 13px 16px; background: var(--surface-card); border-left: 2px solid transparent; }
.resp .n { font-family: var(--font-mono); font-size: var(--size-mono-sm); letter-spacing: 0.12em; color: var(--text-faint); flex: none; padding-top: 3px; width: 22px; }
.resp .t { font-size: var(--size-body-sm); line-height: 1.5; color: var(--text-body); }

/* --------------------------------------------------------------------------
   The transfer board (scene 05)
   -------------------------------------------------------------------------- */
.board { display: grid; grid-template-columns: 1fr 96px 1fr; gap: 0; flex: 1; min-height: 0; }
.board-col { display: flex; flex-direction: column; min-height: 0; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--border-rule); margin-bottom: 16px; }
.board-title { font-family: var(--font-display); font-size: var(--size-h5); font-weight: 500; color: var(--text-strong); }
.board-count { font-family: var(--font-mono); font-size: var(--size-mono-sm); letter-spacing: 0.14em; color: var(--text-faint); }
.board-list { position: relative; flex: 1; min-height: 0; }
.board-mid { position: relative; }
.board-mid::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--border-hairline);
}

/* A responsibility card, absolutely positioned so it can be flown across. */
.card-resp {
  position: absolute; left: 0; width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-left: 2px solid var(--navy-300);
  padding: 12px 16px;
  display: flex; gap: 14px; align-items: flex-start;
  will-change: transform, opacity;
}
.card-resp.moved { border-left-color: var(--signal-cyan); background: rgba(46,107,230,0.14); }
.card-resp .n { font-family: var(--font-mono); font-size: var(--size-mono-sm); letter-spacing: 0.1em; color: var(--text-faint); flex: none; padding-top: 2px; width: 20px; }
.card-resp.moved .n { color: var(--signal-cyan); }
.card-resp .t { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.card-resp .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-cyan); margin-top: 5px; display: block; }
.card-resp.new { border-left-color: var(--align-blue); background: rgba(46,107,230,0.1); }
.card-resp.new .tag { color: var(--align-blue-60); }

.verdict {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-mono); font-size: var(--size-mono-sm);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal-cyan);
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Before / after figures (scene 07)
   -------------------------------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr 240px 1fr; align-items: center; gap: 0; padding: 20px 26px; background: var(--surface-card); }
.ba-label { font-size: var(--size-body-sm); color: var(--text-body); }
.ba-label .sub { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-top: 5px; }
.ba-nums { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ba-from { font-family: var(--font-mono); font-size: 30px; color: var(--text-faint); }
.ba-arrow { font-family: var(--font-mono); font-size: 15px; color: var(--navy-300); letter-spacing: 0.1em; }
.ba-to { font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: var(--signal-cyan); min-width: 74px; text-align: left; }
.ba-to.down { color: var(--text-muted); }
.ba-bar { height: 8px; background: rgba(143,163,188,0.12); position: relative; }
.ba-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-hero-gradient); display: block; }
.ba-bar i.ctx { background: var(--chart-context); }

/* --------------------------------------------------------------------------
   Process portrait (scene 09)
   -------------------------------------------------------------------------- */
.flow { position: relative; flex: 1; min-height: 0; }
.flow-stage {
  position: absolute;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  padding: 9px 15px;
  display: flex; flex-direction: column; gap: 5px;
  overflow: hidden;
}
.flow-stage.lit { border-color: var(--signal-cyan); background: rgba(46,107,230,0.14); }
.flow-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--text-faint); }
.flow-stage.lit .flow-num { color: var(--signal-cyan); }
.flow-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--text-strong); line-height: 1.2; }
.flow-sub { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.flow-stage .flow-mode { margin-top: auto; }
.flow-mode { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--navy-300); }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* --------------------------------------------------------------------------
   Application screens. The real orchestrator modules — same information
   architecture, columns and controls — drawn on the brand's platform kit.
   -------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 216px 1fr;
  background: var(--navy-900);
  border: 1px solid var(--border-panel);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app-side { background: var(--deep-navy); border-right: 1px solid var(--border-panel); display: flex; flex-direction: column; padding: 18px 0; gap: 20px; }
.app-side img { width: 132px; margin: 0 20px; opacity: 0.86; }
.app-nav { display: flex; flex-direction: column; }
.app-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 20px; font-size: 13px; color: var(--text-faint);
  border-left: 2px solid transparent; text-decoration: none;
}
.app-nav a .i { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--navy-300); }
.app-nav a.on { color: var(--text-strong); background: var(--surface-hover); border-left-color: var(--signal-cyan); }
.app-nav a.on .i { color: var(--signal-cyan); }
.app-side-foot { margin-top: auto; padding: 0 20px; display: flex; flex-direction: column; gap: 5px; }

.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-section-b); }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 24px; border-bottom: 1px solid var(--border-panel); background: var(--deep-navy); flex: none; }
.app-top h2 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-strong); margin: 0; line-height: 1.2; }
.app-top .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.app-actions { display: flex; gap: 9px; align-items: center; }
.app-btn { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; padding: 8px 15px; border-radius: var(--radius-control); border: 1px solid var(--navy-300); background: transparent; color: var(--text-body); white-space: nowrap; }
.app-btn.pri { background: var(--action-fill); color: var(--action-ink); border-color: transparent; }
.app-btn.press { filter: brightness(0.92); }

.app-body { flex: 1; min-height: 0; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex: none; }
.app-input { background: var(--navy-900); border: 1px solid var(--border-panel); color: var(--text-body); font-family: var(--font-body); font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-control); min-width: 200px; }
.app-input.ph { color: var(--text-faint); }
.seg { display: flex; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
.seg button, .seg span { background: var(--surface-card); border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 12px; padding: 8px 13px 6px; }
.seg .on { background: var(--surface-hover); color: var(--text-strong); border-bottom-color: var(--signal-cyan); }
.app-bar .right { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); }

/* Statistic strip inside an app screen */
.app-stats { display: grid; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); flex: none; }
.app-stats > div { background: var(--surface-card); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.app-stats .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.app-stats .v { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--text-strong); line-height: 1; }
.app-stats .v.cy { color: var(--signal-cyan); }

/* Table */
.tbl { border: 1px solid var(--border-panel); background: var(--surface-panel); display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.tbl-head, .tbl-row { display: grid; gap: 14px; padding: 9px 18px; align-items: center; }
.tbl-head { border-bottom: 1px solid var(--border-panel); flex: none; }
.tbl-head span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.tbl-rows { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.tbl-row { border-bottom: 1px solid var(--border-hairline); will-change: opacity, transform; }
.tbl-row.hi { background: var(--surface-hover); }
.tbl-row .c { font-size: 12.5px; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-row .c.strong { color: var(--slate-200); }
.tbl-row .c.wrap { white-space: normal; line-height: 1.4; font-size: 11.5px; color: var(--text-muted); }
.tbl-row .c.m { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; }
.tbl-row .c.dim { color: var(--text-faint); }

/* Status pills. No red or green anywhere: cyan carries live and positive,
   muted slate carries everything else. */
.pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--border-hairline); color: var(--text-faint); display: inline-block; white-space: nowrap; }
.pill.live { color: var(--signal-cyan); border-color: rgba(41,197,246,0.4); background: rgba(41,197,246,0.08); }
.pill.pos { color: var(--align-blue-60); border-color: rgba(46,107,230,0.4); background: rgba(46,107,230,0.1); }
.pill.off { color: var(--text-faint); }

/* Score chip */
.score { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.score.hi { color: var(--signal-cyan); }
.score.md { color: var(--align-blue-60); }
.score.lo { color: var(--text-faint); }

/* Run progress line */
.runbar { height: 3px; background: rgba(143,163,188,0.14); position: relative; flex: none; }
.runbar i { position: absolute; inset: 0 auto 0 0; background: var(--rule-gradient); }

/* Live dot — a 1px cyan ring, not a filled pill */
.livedot { width: 6px; height: 6px; border: 1px solid var(--signal-cyan); background: var(--signal-cyan); display: inline-block; flex: none; }

/* Email composition preview */
.mail { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); flex: 1; min-height: 0; }
.mail > div { background: var(--surface-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.mail-h { display: flex; gap: 10px; align-items: baseline; }
.mail-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); width: 52px; flex: none; }
.mail-v { font-size: 12.5px; color: var(--text-body); }
.mail-v.cc { color: var(--signal-cyan); }
.mail-body { font-size: 12.5px; line-height: 1.65; color: var(--text-body); white-space: pre-wrap; }
.mail-body em { font-style: normal; color: var(--signal-cyan); }

/* Sequence steps */
.seqrow { display: grid; grid-template-columns: 104px 1fr 136px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-hairline); }

/* --------------------------------------------------------------------------
   Charts. One hero series, everything else in chart context navy.
   Square corners, flat fills, no shadows, no rounded bars.
   -------------------------------------------------------------------------- */
.chart { display: flex; align-items: flex-end; gap: 14px; height: 190px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 8px; height: 100%; }
.chart .bar { background: var(--chart-context); width: 100%; }
.chart .bar.hero { background: var(--chart-hero); }
.chart .bar.live { background: var(--chart-hero-gradient); }
.chart .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chart-axis); text-align: center; }
.chart .val { font-family: var(--font-mono); font-size: 13px; color: var(--text-body); text-align: center; }
.chart .val.hero { color: var(--signal-cyan); }

/* Feast-and-famine line (scene 18) */
.linechart { position: relative; height: 176px; }
.linechart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.fx { opacity: 0; will-change: opacity, transform; }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; }
.gap-s { gap: 10px; } .gap-m { gap: 18px; } .gap-l { gap: 28px; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }

/* Photography: anchors lower-left, dissolves into navy along the 65 degree
   rise. A fade, never a scrim, blur or capsule.

   The frame is full-bleed and the shaping is done by a mask on the 65 degree
   axis, so the picture has no edge of its own to give itself away — a cropped
   frame leaves a hard horizontal and vertical line wherever the tint has not
   yet reached full opacity. The mask closes by 46% of the gradient axis, which
   keeps the picture in the lower-left third and the upper right clear for type. */
.photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 26% 74%; display: block;
  -webkit-mask-image: linear-gradient(65deg, #000 0%, #000 18%, rgba(0,0,0,0.55) 32%, transparent 46%);
          mask-image: linear-gradient(65deg, #000 0%, #000 18%, rgba(0,0,0,0.55) 32%, transparent 46%);
}
.photo::after {
  content: ""; position: absolute; inset: 0; background: var(--bg-photo-fade);
  /* The tint is masked a little wider than the picture, so it covers the
     dissolve without flattening the section ground on the clear side. */
  -webkit-mask-image: linear-gradient(65deg, #000 0%, #000 30%, rgba(0,0,0,0.6) 48%, transparent 62%);
          mask-image: linear-gradient(65deg, #000 0%, #000 30%, rgba(0,0,0,0.6) 48%, transparent 62%);
}