/* ==========================================================================
   work.css: Systems (WS-2). Sections: #positions, #ies, #rtd, #sdp, #builds,
   #stack, #lifecycle, #next. Shared pieces (and the .next ticket) live in base.css.
   Order: Sections, Animations, then Media queries (mobile first).
   The monitor loops run only under .is-live, which work.js sets while a monitor
   is on screen, the tab is visible, FREEZE is off, and motion is allowed.
   ========================================================================== */

/* ----- #positions: the flagship table (stacked rows below 768) -------------- */
.pos, .pos tbody, .pos td, .pos th { display: block; }
.pos { width: 100%; border-collapse: collapse; text-align: left; }
.pos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pos tbody tr {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) var(--pad-panel);
  border-top: 1px solid var(--c-line);
}
.pos tbody tr:first-child { border-top: 0; }
.pos td, .pos th { grid-column: 2; font-weight: 400; }
.pos .pos-code {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color var(--dur-2) var(--ease-snap);
}
.pos-name { font-size: var(--fs-h3); }
.pos .pos-name { font-weight: 500; }
.pos-name a { color: var(--c-text); text-decoration: none; transition: color var(--dur-2) var(--ease-snap); }
.pos-name a::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the system */
.pos-name a:focus-visible { outline: none; }
.pos-name a:focus-visible::after { outline: 2px solid var(--c-amber); outline-offset: -2px; }
.pos-stack, .pos-status { color: var(--c-text-2); }
.pos-status .led { margin-right: var(--sp-2); }
/* The column name shows as a micro label above the value in the stacked layout */
.pos-stack::before, .pos-status::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pos-status { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; }

/* ----- #ies, #rtd, #sdp: text and monitor ----------------------------------- */
.sys-text { display: grid; align-content: start; gap: var(--sp-4); }
/* The code never outranks the page h1: it stops at the h1 size, in text-2 */
.sys-code {
  margin-block: var(--sp-3) var(--sp-2);
  color: var(--c-text-2);
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: min(var(--fs-code), var(--fs-h1));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.sys-text .copy { color: var(--c-text-2); }
.facts .chip { border-color: var(--c-amber-line); color: var(--c-amber); }
.mon-body { display: grid; align-content: center; }

/* IES, EA monitor: one row per pair; data-ph is the phase of the pair cycle */
.ies-row {
  display: grid;
  grid-template-columns: minmax(3.75rem, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(4rem, 1.4fr) minmax(3.5rem, 1fr);
  align-items: center;
  min-height: var(--hit);
  border-top: 1px solid var(--c-line);
}
.ies-head { min-height: var(--head-h); border-top: 0; }
.ies-row > :nth-child(n+2):nth-child(-n+4) { justify-self: center; }
.ies-row > :last-child { justify-self: end; }
.ies-pair { color: var(--c-text-2); }
.tf { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-2); }
[data-ph="1"] > :nth-child(2) .tf, [data-ph="2"] > :nth-child(-n+3) .tf { background: var(--c-amber); box-shadow: 0 0 6px var(--c-glow); }
:is([data-ph="3"], [data-ph="4"]) .tf { background: var(--c-bull); box-shadow: 0 0 6px var(--c-bull-glow); }
.risk { display: flex; gap: 2px; }
.risk i { width: 0.625rem; height: 0.375rem; background: var(--c-line-2); transform-origin: 0 50%; }
.risk .on { background: var(--c-text-2); }
.risk i:nth-child(2) { --k: 1; }
.risk i:nth-child(3) { --k: 2; }
.exec {
  display: inline-block;
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-ph="2"] .exec { color: var(--c-amber); }
:is([data-ph="3"], [data-ph="4"]) .exec { color: var(--c-bull); }
/* On SENT the risk bar resizes to the pair's size */
.is-live [data-ph="3"] .risk .on { animation: seg-in var(--dur-3) var(--ease-settle) calc(var(--k, 0) * 60ms) both; }

/* RTD, feed monitor: redacted rows, CSS only */
.rtd > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: center;
  min-height: var(--hit);
  border-top: 1px solid var(--c-line);
}
.rtd > div:first-child { border-top: 0; }
.rtd dd { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* UPDATES: 24 cells; one lit cell steps along the strip, four steps a second */
.rtd-strip {
  position: relative;
  flex: 1;
  height: 0.75rem;
  overflow: hidden;
  background: linear-gradient(to right, var(--c-line-2) calc(100% - 2px), transparent 0) 0 0 / calc(100% / 24) 100%;
}
.rtd-strip i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% / 24);
  background: linear-gradient(to right, var(--c-amber) calc(100% - 2px), transparent 0);
  transform: translateX(800%);
}
.is-live .rtd-strip i { animation: rtd-step 6s steps(24) infinite; }
.rtd-bars i { height: 0.75rem; background: var(--c-line-2); transform-origin: 0 50%; }
.rtd-bars i:nth-child(1) { width: 34%; }
.rtd-bars i:nth-child(2) { width: 20%; }
.rtd-bars i:nth-child(3) { width: 27%; }
.rtd-pnl i:first-child { width: 46%; }
/* Three periods that share no factor, so the bars never sync */
.is-live .rtd-bars i { animation: rtd-bar 1.7s steps(3) infinite alternate; }
.is-live .rtd-bars i:nth-child(2) { animation-duration: 2.3s; }
.is-live .rtd-bars i:nth-child(3) { animation-duration: 2.9s; }
.is-live .rtd-pnl i { animation-duration: 3.7s; }
.rtd-alerts span, .rtd-link { display: inline-flex; align-items: center; gap: 0.375rem; }
.rtd-alerts .led { opacity: 0.3; }
.rtd-alerts span:first-child .led { opacity: 1; }
.is-live .rtd-alerts .led { animation: rtd-alert 3.6s step-end infinite; }
.is-live .rtd-alerts span:nth-child(2) .led { animation-delay: 1.2s; }
.is-live .rtd-alerts span:nth-child(3) .led { animation-delay: 2.4s; }
.is-live .rtd-alerts span:first-child .led { opacity: 0.3; }
.rtd-link { color: var(--c-bull); }
.is-live .rtd-ws { animation: blink 500ms var(--ease-blink) infinite; }

/* SDP, copy matrix: 25 x 20 = 500 cells. The two gradients draw the same grid without JS */
.sdp { display: grid; justify-content: center; gap: var(--sp-4); }
.sdp-master { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); }
.sdp-grid {
  --p: 11px; /* pitch */
  --c: 4px; /* cell */
  width: calc(var(--p) * 25);
  height: calc(var(--p) * 20);
  background:
    linear-gradient(to right, transparent var(--c), var(--c-panel) 0) 0 0 / var(--p) var(--p),
    linear-gradient(var(--c-line-2) var(--c), transparent 0) 0 0 / var(--p) var(--p);
}
.sdp-grid.is-canvas { background: none; }
.sdp-grid canvas { width: 100%; height: 100%; }

/* ----- #builds: watchlist of builds ------------------------------------------ */
.builds, .steps, .rail { list-style: none; }
.build {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--pad-panel);
  border-top: 1px solid var(--c-line);
  transition: opacity var(--dur-4) var(--ease-settle), transform var(--dur-4) var(--ease-settle), background-color var(--dur-2) var(--ease-snap);
  transition-delay: var(--rd, 0ms), var(--rd, 0ms), 0ms;
}
.build:first-child { border-top: 0; }
.build-code { color: var(--c-text-3); transition: color var(--dur-2) var(--ease-snap); }
.build-link { display: flex; }

/* ----- #lifecycle (S5): steps and the ORDER panel ---------------------------- */
/* Below 1024 the panel is a 3rem bar under the top bar: the status word and a progress line */
.life { gap: 0; background: var(--c-panel); }
.order-panel { position: sticky; top: var(--topbar-h); z-index: 5; border-bottom: 1px solid var(--c-line); }
.order-panel .panel-head, .rail { display: none; }
.order-body { position: relative; display: flex; align-items: center; min-height: 3rem; padding-block: 0; background: var(--c-panel-2); }
.order-body::before {
  content: "Order status";
  margin-right: auto;
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.order-word { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.order-word span { display: inline-block; }
.order-panel[data-state="4"] .order-word { color: var(--c-bull); }
.order-panel[data-state="4"] .led { background: var(--c-bull); box-shadow: 0 0 6px var(--c-bull-glow); }
.rail-box { position: absolute; inset: auto 0 0; height: 2px; background: var(--c-line); }
/* --p is the progress (0 to 1) when no scrub runs; with a scrub GSAP writes the transform */
.rail-fill { position: absolute; inset: 0; background: var(--c-amber); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; }
.step { display: grid; align-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--pad-panel); border-top: 1px solid var(--c-line); }
.step:first-child { border-top: 0; }
.step .copy { color: var(--c-text-2); }
.step .fill-line { margin-top: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid var(--c-line-2); }
.step.is-on .chip { border-color: var(--c-amber); color: var(--c-amber); }

/* ----- Animations -------------------------------------------------------------- */
@keyframes seg-in { from { transform: scaleX(0); } }
@keyframes rtd-step { from { transform: translateX(0); } to { transform: translateX(2400%); } }
@keyframes rtd-bar { to { transform: scaleX(0.55); } }
@keyframes rtd-alert { 0% { opacity: 1; } 33.3% { opacity: 0.3; } }

/* ----- Media queries ----------------------------------------------------------- */
@media (hover: hover) {
  .pos tbody tr:hover, .build:hover { background: var(--c-panel-2); box-shadow: inset 2px 0 0 var(--c-amber); }
  .pos tbody tr:hover :is(.pos-code, a), .build:hover .build-code { color: var(--c-amber); }
}

@media (min-width: 23.5em) {
  .sdp-grid { --p: 13px; }
}

@media (min-width: 48em) {
  /* A real table again */
  .pos { display: table; }
  .pos thead { position: static; display: table-header-group; width: auto; height: auto; clip-path: none; }
  .pos tbody { display: table-row-group; }
  .pos tbody tr { display: table-row; }
  .pos tr > * { display: table-cell; padding: var(--sp-4) var(--sp-3); border-top: 1px solid var(--c-line); vertical-align: middle; }
  .pos thead tr > * { padding-block: var(--sp-2); border-top: 0; color: var(--c-text-3); font-weight: 500; }
  .pos tr > :first-child { padding-left: var(--pad-panel); }
  .pos tr > :last-child { padding-right: var(--pad-panel); white-space: nowrap; }
  .pos-stack::before, .pos-status::before { content: none; }

  .sdp { grid-template-columns: auto auto; align-items: center; gap: var(--sp-6); }
  .sdp-grid { --p: 15px; --c: 5px; }
  .nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  #positions, .sys { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sys-text { padding-block: var(--sp-6); }
  /* The EA and feed monitors fill their panel: the rows share its height */
  .mon-body { min-height: 17.5rem; align-content: stretch; }
  .ies, .rtd { display: grid; grid-auto-rows: minmax(var(--hit), 1fr); }
  .ies { grid-template-rows: var(--head-h); }
  .sdp { align-self: center; }
  /* The timeframe LEDs sit as one group; RISK takes the spare width */
  .ies-row { grid-template-columns: 7rem repeat(3, 4.5rem) minmax(4rem, 1fr) 5rem; min-height: 0; }
  .ies-row > :nth-child(5) { padding-left: var(--sp-5); }
  .tf { width: 10px; height: 10px; }
  .risk i { width: 0.75rem; }
  /* The three positions share the height of the panel */
  #positions .panel-body--flush { display: flex; flex-direction: column; }
  .pos { flex: 1; }
  .pos thead th { height: var(--head-h); }

  .build { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--sp-5); align-items: baseline; }

  /* The steps scroll past the sticky panel */
  .life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-column: 1; grid-row: 1; border-right: 1px solid var(--c-line); }
  .step { min-height: 40vh; }
  .order-panel { grid-column: 2; grid-row: 1; top: calc(var(--topbar-h) + 2rem); z-index: auto; align-self: start; }
  .order-panel .panel-head, .rail { display: flex; }
  /* The panel is as tall as one step, so it never leaves the screen before the last step does:
     the word at the center, the rail at the foot */
  .order-body {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: var(--sp-6);
    min-height: calc(40vh - var(--head-h));
    padding-block: var(--sp-6);
    background: none;
    container-type: inline-size;
  }
  .order-body::before { content: none; }
  /* 9 characters (CONFIRMED) at 112.5% width fit the panel at 14.5cqi */
  .order-word {
    font-family: var(--f-mono-112);
    font-stretch: 112.5%;
    font-size: min(var(--fs-code), 14.5cqi);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
  }
  .rail-box { position: relative; inset: auto; height: auto; margin-inline: var(--sp-5); background: none; }
  .rail-box::before { content: ""; position: absolute; inset: 4px 0 auto; height: 1px; background: var(--c-line-2); }
  .rail-fill { inset: 3.5px 0 auto; height: 2px; }
  .rail { justify-content: space-between; }
  .rail li {
    display: grid;
    justify-content: center; /* the node and its label hang centered on a zero-width anchor */
    justify-items: center;
    gap: var(--sp-2);
    width: 0;
    min-width: 0;
    color: var(--c-text-3);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .rail i { position: relative; z-index: 1; width: 9px; height: 9px; background: var(--c-panel); border: 1px solid var(--c-line-2); }
  .rail .on { color: var(--c-text); }
  .rail .on i { background: var(--c-amber); border-color: var(--c-amber); }
}

@media (min-width: 80em) {
  .nav-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}