/* Team AI · a live operating surface.
 *
 * Two rules govern this sheet.
 *
 * 1. The accent is the colour of sync. Mint exists nowhere on this page until
 *    the visitor approves the request in act 7. Everything before that is
 *    neutral by construction, which is what makes the peak the largest visual
 *    change on the page. The two exceptions are deliberate: the focus ring,
 *    because accessibility outranks the conceit, and the primary action, which
 *    has to read as actionable from the first frame.
 * 2. This is app chrome, not a marketing bar. Type is set at surface scale.
 *    There is no display heading above 2.1rem anywhere on the page.
 */

:root {
  --sc-canvas:     #06080A;
  --sc-surface:    #0B0F11;
  --sc-ink:        #E9EEEA;
  --sc-ink-soft:   #8E9C95;
  --sc-accent:     #86EFAC;
  --sc-accent-ink: #04140C;

  --sc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --raised:  #101618;
  --raised-2:#151D1F;

  /* Paper. The surfaces holding the company's own material sit on the brand's
     own paper (#EDF1EE) so they lift off the dark ground, and the closing panel
     goes a stop brighter still so it is the brightest thing on the page. Light
     grounds cannot carry mint at 4.5:1, so the accent runs two stops on one
     hue: mint on dark, and a deep green of the same family on paper. That is
     the exact case taste.md licenses a two-stop accent for. */
  --panel:        #EDF1EE;
  --panel-head:   #E0E6E1;
  --panel-ink:    #0F1613;
  --panel-ink-soft: #4A554E;
  --panel-line:   rgba(15, 22, 19, 0.13);
  --panel-line-2: rgba(15, 22, 19, 0.24);
  --panel-line-3: rgba(15, 22, 19, 0.42);
  --accent-deep:  #0B6B3F;
  --panel-shadow: 0 2px 5px rgba(0, 0, 0, 0.34), 0 20px 44px -22px rgba(0, 0, 0, 0.8);
  --line:    rgba(233, 238, 234, 0.10);
  --line-2:  rgba(233, 238, 234, 0.20);
  --line-3:  rgba(233, 238, 234, 0.34);

  --bar-h:    46px;
  --status-h: 42px;
  --rail-w:   210px;
  --strip-h:  0px;
  --gut:      clamp(1rem, 3vw, 2.5rem);

  --r: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --edge: inset 0 1px 0 rgba(233, 238, 234, 0.06);
}

@media (max-width: 1079px) {
  :root { --rail-w: 0px; --strip-h: 40px; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(134, 239, 172, 0.28); color: #fff; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The engine's progress bar takes the accent by default. Not before sync. */
[data-sc-progress] { background: var(--line-3); }
body.is-approved [data-sc-progress] { background: var(--sc-accent); }

.skip {
  position: fixed; left: -9999px; top: 0; z-index: 200;
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 10px 16px; font: 500 13px/1 var(--sc-font-text);
}
.skip:focus { left: 8px; top: 8px; }

/* ── Shared type ─────────────────────────────────────────────────────── */

.mono {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.cap { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }

h1, h2, h3 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
  color: var(--sc-ink);
}
h1 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); max-width: 20ch; }
h2 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); max-width: 24ch; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

.body {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--sc-ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

.nums { font-variant-numeric: tabular-nums; color: var(--sc-ink); font-weight: 500; }

/* ── App chrome ──────────────────────────────────────────────────────── */

.sysbar {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--gut);
  padding: 0 var(--gut);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sysbar__id { display: flex; align-items: center; gap: 9px; flex: none; }
.mark {
  width: 13px; height: 13px; border-radius: 3px;
  border: 1.5px solid var(--line-3);
}
body.is-approved .mark { border-color: var(--sc-accent); }
.sysbar__name {
  font-family: var(--sc-font-display); font-size: 0.86rem;
  letter-spacing: -0.01em; color: var(--sc-ink-soft);
}
.sysbar__name b { color: var(--sc-ink); font-weight: 600; }
.sysbar__state {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  color: var(--sc-ink-soft); letter-spacing: 0.04em;
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sysbar__env {
  flex: none;
  font-family: var(--sc-font-mono); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--sc-ink); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-3); border-radius: 3px;
  padding: 5px 10px;
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.sysbar__env:hover { background: var(--raised-2); border-color: var(--sc-ink-soft); }
.sysbar__env:active { transform: translateY(1px); }
@media (max-width: 520px) {
  .sysbar__env { font-size: 0.55rem; letter-spacing: 0.08em; padding: 4px 7px; }
}
@media (max-width: 720px) { .sysbar__state { display: none; } }

.rail {
  position: fixed; z-index: 65;
  top: var(--bar-h); left: 0; bottom: var(--status-h);
  width: var(--rail-w);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  backdrop-filter: blur(14px);
}
.rail__cap {
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--sc-ink-soft);
  padding-left: 8px;
}
.rail__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rail__btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 5px;
  background: none; border: 0; cursor: pointer;
  color: var(--sc-ink-soft); font: 500 0.8rem/1.2 var(--sc-font-text);
  text-align: left;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.rail__btn:hover { background: var(--raised); color: var(--sc-ink); }
.rail__btn:active { transform: translateY(1px); }
.rail__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-3); flex: none;
  transition: background var(--sc-d-base) var(--sc-ease-out);
}
.rail__label { flex: 1 1 auto; }
.rail__state {
  font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.rail__item.is-synced .rail__dot { background: var(--sc-accent); }
.rail__item.is-synced .rail__state { color: var(--sc-accent); }
.rail__foot {
  margin-top: auto;
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--sc-ink-soft); padding-left: 8px;
}
body.is-approved .rail__foot { color: var(--sc-accent); }

@media (max-width: 1079px) {
  .rail {
    top: var(--bar-h); bottom: auto; left: 0; right: 0; width: auto;
    height: var(--strip-h);
    flex-direction: row; align-items: center; gap: 4px;
    padding: 0 var(--gut);
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__cap, .rail__foot, .rail__state { display: none; }
  .rail__list { flex-direction: row; gap: 2px; }
  .rail__btn { white-space: nowrap; padding: 5px 9px; font-size: 0.74rem; }
}

.statusbar {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  height: var(--status-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gut) 0 calc(var(--rail-w) + var(--gut));
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.statusbar p { font-size: 0.66rem; letter-spacing: 0.07em; white-space: nowrap; }
.statusbar__clock { display: flex; align-items: center; gap: 7px; }
.statusbar .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-3);
  animation: pulse 2.6s ease-in-out infinite;
}
body.is-approved .statusbar .dot { background: var(--sc-accent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.statusbar__state { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
body.is-approved .statusbar__state { color: var(--sc-accent); }

.statusbar__cta {
  flex: none;
  font: 500 0.74rem/1 var(--sc-font-text);
  color: var(--sc-ink); text-decoration: none;
  padding: 8px 13px; border-radius: 5px;
  background: var(--raised-2);
  border: 1px solid var(--line-3);
  box-shadow: var(--edge);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.statusbar__cta:hover { background: #1B2426; border-color: var(--sc-ink-soft); }
.statusbar__cta:active { transform: translateY(1px); }
body.is-approved .statusbar__cta {
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border-color: var(--sc-accent); font-weight: 600;
}
@media (max-width: 480px) { .statusbar__cta { padding: 7px 10px; font-size: 0.68rem; } }

/* ── Act shell ───────────────────────────────────────────────────────── */

main { padding-left: var(--rail-w); }

.pad {
  height: 100%;
  padding: calc(var(--bar-h) + var(--strip-h) + 22px) var(--gut) calc(var(--status-h) + 22px);
  display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 26px);
  max-width: 1500px; margin: 0 auto;
}
.flowact { padding-block: clamp(3rem, 7vh, 5.5rem); }
.flowact--tight { padding-top: clamp(1.5rem, 3vh, 3rem); }
.flowact .pad { height: auto; padding-block: 0; }

/* ── Paper surfaces ──────────────────────────────────────────────────────
   A panel that holds the company's own material is paper: it lifts off the
   dark ground, and it is where the reader's eye goes. The system's own chrome
   stays dark around it.

   Redefining --sc-ink on a subtree does not re-ink text that merely inherits
   its colour, so `color` is restated here alongside the tokens. Everything
   inside resolves the tokens at its own level and comes out dark. */

.paper {
  background: var(--panel);
  border: 1px solid var(--panel-line-2);
  border-radius: var(--r);
  box-shadow: var(--panel-shadow);
  color: var(--panel-ink);

  --sc-ink:      var(--panel-ink);
  --sc-ink-soft: var(--panel-ink-soft);
  --sc-accent:   var(--accent-deep);
  --line:        var(--panel-line);
  --line-2:      var(--panel-line-2);
  --line-3:      var(--panel-line-3);
  --raised:      var(--panel-head);
  --raised-2:    var(--panel-head);
  --edge:        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* The label that says a panel holds a made-up company, set as part of the
   panel's own title rather than as a sentence somewhere else on the page. */
.tag {
  font-family: var(--sc-font-mono);
  font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sc-ink-soft);
  border: 1px solid var(--line-3);
  border-radius: 3px;
  padding: 2px 5px;
  margin-left: 8px;
  vertical-align: 0.08em;
  white-space: nowrap;
}

/* ── 1 · Activity ────────────────────────────────────────────────────── */

.masthead { display: flex; flex-direction: column; gap: 8px; }

#act-activity .pad { justify-content: center; }
.panes {
  flex: 0 0 auto;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* On a phone the stage is one viewport minus three bars, so a three-column
   grid of full lists overflows and the centred pad pushes the headline off the
   top of the screen. All three departments stay, each showing its first row and
   its own real totals, which is what the act is actually saying. */
@media (max-width: 860px) {
  .panes { grid-template-columns: 1fr; }
  #act-activity .pad { justify-content: flex-start; }
}

.panes .pane--all { display: none; }
.pane { display: flex; flex-direction: column; overflow: hidden; }
.pane__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.pane__tag { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; }
.pane__list { list-style: none; padding: 4px; }
.pane__foot {
  padding: 9px 13px; border-top: 1px solid var(--line);
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.13em;
}

.row {
  display: flex; gap: 11px; align-items: baseline;
  padding: 9px 9px; border-radius: 5px;
}
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
.row__t { flex: none; font-size: 0.66rem; }
.row__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__what { font-size: 0.86rem; color: var(--sc-ink); }
.row__src { font-size: 0.64rem; }

.ticker { display: flex; flex-direction: column; gap: 6px; }
.ticker p { font-size: 0.76rem; line-height: 1.55; max-width: 68ch; letter-spacing: 0.02em; }

/* These two lines crossfade, so only one is ever being read. Stacking them
   returns the height the EXAMPLE note took, which is what keeps act 1 inside a
   short stage. Same move as the peak's copy pair. */
@media (max-height: 790px) {
  .ticker { position: relative; min-height: 4.4rem; }
  .ticker > p { position: absolute; inset: 0 0 auto 0; }
}
@media (max-width: 860px) {
  .ticker { position: relative; min-height: 5.6rem; }
  .ticker > p { position: absolute; inset: 0 0 auto 0; }
}

/* ── 2 · Working surfaces into the core · one act ─────────────────────────
   Five windows on one progress value:
     pan    0    to 0.42   the rail travels laterally, page-driven
     drift  0.44 to 0.66   the cards sink, shrink and fade out
     chip   0.52 to 0.68   the labels fade in where they land
     merge  0.70 to 0.88   the labels converge into the core
     iris   0.74 to 0.92   the core opens on the point they converge on
   Splitting them is the point. Run together, or split across two acts, the
   moves cancel and nothing reads.                                          */

#act-surfaces .stage {
  display: flex; align-items: center;
  --pPan:  max(0, min(1, calc(var(--sc-p, 0) / 0.42)));
  --pChip: max(0, min(1, calc((var(--sc-p, 0) - 0.585) / 0.075)));
  --pB:    max(0, min(1, calc((var(--sc-p, 0) - 0.70) / 0.18)));
}

.lanes {
  display: flex; align-items: stretch; gap: 12px;
  padding: 0 var(--gut);
  height: auto;
  transform: translate3d(var(--railx, 0px), 0, 0);
  will-change: transform;
}
.lane {
  flex: none; width: clamp(15rem, 21vw, 30rem);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 9px;
  transform-origin: center center;
  will-change: transform, opacity;
}
/* Identity state, held for one frame while the travel is measured. */
.stage.is-measuring .lane,
.stage.is-measuring .core__slot { transform: none !important; }
.lane--lead, .lane--note {
  width: clamp(18rem, 30vw, 44rem);
  justify-content: center; padding-left: 0;
}
.lane--note { border-left: 1px solid var(--line); padding-left: 24px; }
.lane__held { font-size: 0.78rem; color: var(--sc-ink-soft); }
.lane__list { list-style: none; display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.lane__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; box-shadow: inset 0 1px 0 var(--line);
}
.lane__item { font-size: 0.82rem; color: var(--sc-ink); }
.lane__state { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; flex: none; }
.lane__closing { font-size: 1rem; color: var(--sc-ink); max-width: 26ch; line-height: 1.45; }

/* The status line sits just above the labels, because it is describing what is
   happening under it. It stays out of the way while the rail is still panning. */
.core__cap {
  position: absolute; left: 0; right: 0;
  top: calc(50% - 116px);
  text-align: center; font-size: 0.66rem;
  /* Sits just above the labels, then lifts clear as the core opens under it. */
  transform: translateY(calc(var(--pB) * -128px));
  opacity: var(--pChip);
  pointer-events: none;
}

.core__slots {
  position: absolute; inset: calc(var(--bar-h) + var(--strip-h)) 0 var(--status-h) 0;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 14px; padding: 0 var(--gut);
  pointer-events: none;
}
.core__slot {
  padding: clamp(12px, 1.5vw, 17px) clamp(16px, 2vw, 24px);
  transform: translate(calc(var(--dx, 0) * var(--pB) * 96%),
                       calc(var(--dy, 0) * var(--pB) * 118%))
             scale(calc(1 - var(--pB) * 0.34));
  opacity: calc(var(--pChip) * (1 - var(--pB) * 0.94));
}
.core__slot .mono {
  font-size: clamp(0.66rem, 0.6rem + 0.22vw, 0.78rem);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--sc-ink);
}

.core__panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; border-radius: 12px;
  width: min(46rem, calc(100% - var(--gut) * 2));
}
.core__inner { padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.docked {
  list-style: none; display: flex; flex-wrap: wrap; gap: 7px 18px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line);
}
.docked__item {
  display: flex; align-items: center; gap: 7px;
  opacity: 0.22;
  transition: opacity 300ms var(--sc-ease-out);
}
.docked__item.is-in { opacity: 1; }
.docked__item .mono { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* Reduced motion: the rail's travel is the navigation, so it is handed back as
   an ordinary scroll region rather than zeroed, and every layer is simply
   present. */
@media (prefers-reduced-motion: reduce) {
  .lanes {
    transform: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; max-width: 100%;
  }
  .lane { transform: none; opacity: 1; scroll-snap-align: center; }
  .core__slot { transform: none; opacity: 1; }
  .core__cap { opacity: 1; }
  .docked__item { opacity: 1; }
  .step__tick::after, .out__tick::after, .docked__tick::after, .queue__tick::after {
    transition: none;
  }
  .step.is-on, .step.is-on .step__tick,
  .out.is-done, .out.is-done .out__tick { animation: none; }
  .gate__arm { background: color-mix(in oklab, var(--accent-deep) 32%, transparent); }
}

/* ── 4 · Contents index ──────────────────────────────────────────────── */

.idx__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.idx { border-top: 1px solid var(--line); }
.idx__row { border-bottom: 1px solid var(--line); }
.idx__sum {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 4px; cursor: pointer; list-style: none;
}
.idx__sum::-webkit-details-marker { display: none; }
.idx__n { flex: none; font-size: 0.64rem; }
.idx__name {
  flex: 1 1 auto;
  font-family: var(--sc-font-display); font-size: 1.02rem; font-weight: 500;
  letter-spacing: -0.012em; color: var(--sc-ink);
}
.idx__cue {
  flex: none; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.idx__row:hover .idx__cue, .idx__row[open] .idx__cue { color: var(--sc-ink); }
.idx__row[open] .idx__cue { visibility: hidden; }
.idx__body { padding: 0 4px 18px 44px; max-width: 66ch; }
@media (max-width: 600px) { .idx__body { padding-left: 4px; } }

/* ── 5 · Request ─────────────────────────────────────────────────────── */

.req { justify-content: center; gap: clamp(18px, 3vh, 34px); }
.req__card { border-radius: 12px; max-width: 42rem; width: 100%; overflow: hidden; }
.req__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; background: var(--raised); border-bottom: 1px solid var(--line);
}
.req__id { font-size: 0.66rem; letter-spacing: 0.1em; }
.req__title {
  font-family: var(--sc-font-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.015em; padding: 18px 18px 4px;
}
.req__steps { list-style: none; padding: 8px 18px 20px; display: flex; flex-direction: column; }

.step {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 9px; margin: 0 -9px;
  border-radius: 6px;
}
.step + .step { border-top: 1px solid var(--line); }
/* An empty box that becomes a ticked box. A square that fills solid reads as a
   colour change; a checkmark reads as a step being completed, which is what
   these are. One pattern for every checkable row on the page. */
.step__tick, .out__tick, .docked__tick, .queue__tick {
  position: relative; flex: none;
  border-radius: 3px;
  border: 1.5px solid var(--line-3);
  transition: border-color 300ms var(--sc-ease-out);
}
.step__tick::after, .out__tick::after, .docked__tick::after, .queue__tick::after {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 0.30em; height: 0.62em;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 260ms var(--sc-ease-out);
}

.step__tick {
  margin-top: 2px;
  width: 20px; height: 20px; font-size: 20px;
  color: var(--sc-ink);
}
.step__tick::after { border-width: 0 2.5px 2.5px 0; }
.step.is-on .step__tick { border-color: var(--sc-ink); }
.step.is-on .step__tick::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }

/* Each row completing gets a beat of its own: the box springs past its own size
   and settles, and the row it belongs to lights and fades. Without it four
   checkmarks appear in near silence and the reader misses three of them. */
.step.is-on .step__tick { animation: tickPop 460ms var(--sc-ease-out); }
.step.is-on { animation: rowPop 1000ms var(--sc-ease-out); }
.out.is-done .out__tick { animation: tickPop 460ms var(--sc-ease-out); }
.out.is-done { animation: rowPop 1000ms var(--sc-ease-out); color: var(--accent-deep); }

@keyframes tickPop {
  0%   { transform: scale(0.72); }
  52%  { transform: scale(1.24); }
  100% { transform: scale(1); }
}
@keyframes rowPop {
  0% {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 36%, transparent);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 12px color-mix(in oklab, currentColor 0%, transparent);
  }
}
.step__mid { display: flex; flex-direction: column; gap: 2px; }
.step__label {
  font-size: 0.9rem; font-weight: 500; color: var(--sc-ink-soft);
  transition: color 320ms var(--sc-ease-out);
}
.step.is-on .step__label { color: var(--sc-ink); }
.step__detail { font-size: 0.68rem; }

.req__note { display: flex; flex-direction: column; gap: 10px; max-width: 42rem; }
.req__note .mono { font-size: 0.76rem; letter-spacing: 0.03em; }

/* ── 6 · Authored silence ────────────────────────────────────────────── */

.hold {
  height: 60vh; height: 60svh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gut);
}
.hold__line {
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  letter-spacing: 0.08em; text-align: center; color: var(--sc-ink-soft);
}
.caret {
  display: inline-block; width: 7px; height: 1em; margin-left: 7px;
  background: var(--line-3); vertical-align: text-bottom;
  animation: blink 1.15s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ── 7 · The peak: sync ──────────────────────────────────────────────── */

.sync { justify-content: center; gap: clamp(12px, 2vh, 22px); }
.sync__copy { display: flex; flex-direction: column; gap: 8px; }

.gate {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: 10px;
  transition: border-color 420ms var(--sc-ease-out), background 420ms var(--sc-ease-out);
}
.gate__record { flex: 1 1 100%; display: flex; flex-direction: column; gap: 3px; }
.gate__title {
  font-family: var(--sc-font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.012em;
}
.gate__meta { font-size: 0.66rem; }
/* The button was a green rectangle nobody read as a call to press. It now sits
   inside a ring that fills as the act advances, so the control is visibly
   counting down to its own release. Pressing it is still the direct route and
   fires immediately; continuing to scroll reaches the same place, which is what
   a reader who never clicks anything should also get to see. */
.gate__arm {
  flex: 0 0 auto; position: relative;
  margin-inline: auto;
  padding: 3px; border-radius: 9px;
  background: conic-gradient(from -90deg,
    var(--accent-deep) calc(var(--fill, 0) * 360deg),
    color-mix(in oklab, var(--accent-deep) 32%, transparent) 0);
  transition: background 90ms linear;
}
.gate__arm::after {
  content: ""; position: absolute; inset: -6px; border-radius: 13px;
  border: 1px solid color-mix(in oklab, var(--accent-deep) 45%, transparent);
  opacity: calc(1 - var(--fill, 0));
  animation: armPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
body.is-approved .gate__arm { background: transparent; }
body.is-approved .gate__arm::after { display: none; }
@keyframes armPulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.05); opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) { .gate__arm::after { animation: none; } }

.gate__btn {
  flex: none; cursor: pointer;
  font: 600 0.86rem/1 var(--sc-font-text);
  color: #FFFFFF; background: var(--accent-deep);
  border: 1px solid var(--accent-deep); border-radius: 6px;
  padding: 14px 30px; font-size: 0.94rem;
  transition: filter var(--sc-d-fast) var(--sc-ease-out), transform 90ms var(--sc-ease-out);
}
.gate__btn:hover { filter: brightness(1.08); }
.gate__btn:active { transform: translateY(1px); }
.gate__btn:disabled {
  cursor: default; filter: none;
  background: transparent; color: var(--sc-accent);
  border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.gate__stamp { flex: 1 0 100%; font-size: 0.66rem; letter-spacing: 0.05em; text-align: center; }
.gate.is-approved {
  border-color: color-mix(in oklab, var(--accent-deep) 45%, transparent);
  background: color-mix(in oklab, var(--accent-deep) 6%, var(--panel));
}
.gate.is-approved .gate__stamp { color: var(--accent-deep); }
.gate.is-flashed, .dept.is-flashed { animation: flash 900ms var(--sc-ease-out); }
@keyframes flash {
  0%   { box-shadow: 0 0 0 2px color-mix(in oklab, var(--sc-ink) 55%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

.depts {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Same reason at the peak, and here the count of departments IS the point, so
   all three stay and the deliverable lists collapse into the summary line each
   pane already computes from them. */
.dept__sum { display: none; padding: 10px 13px; font-size: 0.66rem; }
@media (max-width: 860px) {
  .depts { grid-template-columns: 1fr; }
  .dept__list { display: none; }
  .dept__sum { display: block; }
}
.dept {
  overflow: hidden;
  transition: border-color 520ms var(--sc-ease-out), background 520ms var(--sc-ease-out);
}
.dept__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; background: var(--raised); border-bottom: 1px solid var(--line);
}
.dept__state { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.13em; }
.dept__list { list-style: none; padding: 5px; }
.out { display: flex; align-items: baseline; gap: 11px; padding: 9px 8px; border-radius: 6px; }
.out + .out { border-top: 1px solid var(--line); }
.out__tick {
  width: 17px; height: 17px; font-size: 17px;
  align-self: center; color: var(--accent-deep);
}
.out__what {
  flex: 1 1 auto; font-size: 0.84rem; color: var(--sc-ink-soft);
  transition: color 420ms var(--sc-ease-out);
}
.out__state { flex: none; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; }

.dept.is-synced {
  border-color: color-mix(in oklab, var(--accent-deep) 42%, transparent);
  background: color-mix(in oklab, var(--accent-deep) 7%, var(--panel));
}
.dept.is-synced .dept__state, .dept.is-synced .dept__sum { color: var(--accent-deep); }
.out.is-done .out__what { color: var(--sc-ink); }
.out.is-done .out__tick { border-color: var(--accent-deep); }
.out.is-done .out__tick::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.out.is-done .out__state { color: var(--accent-deep); }

.sync__tally { font-size: 0.7rem; letter-spacing: 0.08em; }
body.is-approved .sync__tally .nums { color: var(--sc-accent); }

/* ── 8 · The run ─────────────────────────────────────────────────────── */

.run__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.run {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
@media (max-width: 760px) { .run { grid-template-columns: 1fr; } }
.phase {
  padding: clamp(18px, 2.6vw, 28px);
  display: flex; flex-direction: column; gap: 7px;
}
.phase + .phase { border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .phase + .phase { border-left: 0; border-top: 1px solid var(--line); }
}
.phase .body { font-size: 0.88rem; }

/* ── 9 · The close ───────────────────────────────────────────────────── */

.close { justify-content: center; align-items: center; gap: clamp(14px, 2.5vh, 26px); }

/* The closer. A stop brighter than the paper panels, so it is the brightest
   surface on the page, and the only act that centres. taste.md's warning is
   about centring EVERY act; one centred act at the end is the resolve. */
.paper--white {
  --panel: #FFFFFF;
  --panel-head: #F2F5F2;
  --panel-line: rgba(15, 22, 19, 0.11);
  --panel-line-2: rgba(15, 22, 19, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.36), 0 34px 70px -26px rgba(0, 0, 0, 0.9);
}
.close__panel {
  border-radius: 14px;
  padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 44px);
  max-width: 44rem; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.close__panel h2 { max-width: 18ch; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); }

.starter {
  display: flex; flex-wrap: wrap; gap: 9px;
  align-items: center; justify-content: center;
  width: 100%; max-width: 30rem;
}
.starter label {
  flex: 1 0 100%; font-size: 0.6rem; text-align: center;
  text-transform: uppercase; letter-spacing: 0.16em;
}
.starter input {
  flex: 1 1 16rem; min-width: 0;
  background: var(--panel-head);
  border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--sc-ink); caret-color: var(--accent-deep);
  font: 400 0.9rem/1 var(--sc-font-text);
  padding: 13px 14px;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.starter input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 78%, transparent); }
.starter input:hover, .starter input:focus { border-color: var(--line-3); }
.starter__go {
  flex: none; cursor: pointer;
  font: 500 0.82rem/1 var(--sc-font-text);
  color: var(--sc-ink); background: transparent;
  border: 1px solid var(--line-3); border-radius: 6px;
  padding: 13px 17px;
  transition: background var(--sc-d-fast) var(--sc-ease-out);
}
.starter__go:hover { background: var(--panel-head); }
.starter__go:active { transform: translateY(1px); }

.queue { list-style: none; display: flex; flex-direction: column; width: 100%; max-width: 30rem; text-align: left; }
.queue:empty { display: none; }
.queue__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; box-shadow: inset 0 1px 0 var(--line);
}
.queue__tick {
  width: 16px; height: 16px; font-size: 16px;
  align-self: center; color: var(--sc-accent);
}
.queue__row.is-done .queue__tick { border-color: var(--sc-accent); }
.queue__row.is-done .queue__tick::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.queue__what { flex: 1 1 auto; font-size: 0.86rem; }
.queue__state { flex: none; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; }
.queue__row.is-done .queue__state { color: var(--sc-accent); }

/* The one action, on the brightest surface on the page. The deep stop of the
   page's own accent, because mint on white is a 1.4:1 button. */
.cta {
  align-self: center; margin-top: 4px;
  font: 600 1rem/1 var(--sc-font-text);
  color: #FFFFFF; background: var(--accent-deep);
  border: 1px solid var(--accent-deep); border-radius: 8px;
  padding: 17px 30px; text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 107, 63, 0.4), 0 10px 22px -12px rgba(11, 107, 63, 0.9);
  transition: filter var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { filter: brightness(1.12); }
.cta:active { transform: translateY(1px); }

.foot { justify-content: center; text-align: center; }

.foot {
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline;
  padding-top: 4px;
}
.foot .mono { font-size: 0.64rem; }
.foot a { color: var(--sc-ink-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--sc-ink); }
.foot__note { flex: 1 0 100%; max-width: 58ch; line-height: 1.55; letter-spacing: 0.02em; }

/* ── The phone stage ─────────────────────────────────────────────────────
   A pinned stage on a phone is one viewport minus the system bar, the
   department strip and the status bar, which is about 670px on a 390x844
   screen. Three panes of desktop density measure 974px in that space, so the
   pad's centring silently pushes the headline off the top: the one screen that
   has to carry the positioning line loses it. These rules re-cut the two dense
   acts for that budget rather than scaling them down.  */

@media (max-width: 860px) {
  #act-activity .pad, .sync { gap: 12px; }
  .panes { gap: 8px; }

  /* One combined log reads better than three cropped ones at this width. */
  .panes .pane { display: none; }
  .panes .pane--all { display: flex; }
  /* The combined log shows as many records as the stage can hold whole. A
     phone stage is one viewport minus three bars, so the count steps down with
     the screen rather than being clipped; the panel's own footer still states
     the real total either way. */
  .pane--all .row:nth-child(n + 6) { display: none; }
  .pane__head, .pane__foot { padding: 8px 12px; line-height: 1.3; }
  .row { padding: 8px; }

  .masthead { gap: 6px; }
  .ticker { gap: 4px; }
  .ticker p { font-size: 0.7rem; line-height: 1.5; }

  /* The two copy lines here crossfade, so only one is ever being read. Laying
     them on top of each other in a fixed block gives the act back the 120px
     the phone stage does not have. */
  .sync__copy { position: relative; min-height: 7.4rem; }
  .sync__copy h2, .sync__copy .body { position: absolute; inset: 1.5rem 0 auto 0; }
  .sync__copy h2 { font-size: 1.2rem; }
  .sync__copy .body { font-size: 0.85rem; }

  .gate { padding: 12px 14px; gap: 10px; }
  .gate__title { font-size: 0.92rem; }
  .gate__record { flex: 1 0 100%; }
  .gate__arm { width: 100%; padding: 2px; }
  .gate__btn { width: 100%; padding: 11px 16px; }
  .gate__stamp { line-height: 1.5; }
  .dept__head { padding: 7px 12px; }
  .dept__sum { padding: 7px 12px; font-size: 0.62rem; }
  .depts { gap: 8px; }
}

/* A short phone has roughly 460px of stage. The department heads already carry
   the state the peak is about, so the summary line steps aside there. */
@media (max-width: 860px) and (max-height: 800px) {
  .dept__sum { display: none; }
  .gate__btn { padding: 9px 16px; }
  .gate { gap: 7px; padding: 11px 14px; }
  .gate__stamp { font-size: 0.62rem; }
  .sync__copy { min-height: 6rem; }
}

@media (max-height: 800px) { .pane--all .row:nth-child(n + 5) { display: none; } }
@media (max-height: 700px) { .pane--all .row:nth-child(n + 4) { display: none; } }
@media (max-height: 640px) { .pane--all .row:nth-child(n + 3) { display: none; } }

/* ── Short viewports: the surface is dense, so give it room ──────────── */

/* The peak carries the most content of any act, so it is the one that runs out
   of stage first. Measured overflow at 1024x768 was 18px and at 360x640 was 5px
   before these two rules. */
/* The peak carries the most content of any act and the centred control row
   costs it 30px, so a short desktop needs the whole act tightened rather than
   one value nudged. */
@media (max-height: 820px) {
  .sync { gap: 8px; }
  .gate { gap: 8px; padding: 11px 16px; }
  .gate__record { gap: 2px; }
  .gate__btn { padding: 11px 26px; font-size: 0.9rem; }
  .gate__arm { padding: 2px; }
  .depts { gap: 10px; }
  .sync__copy .body { font-size: 0.88rem; }
  .out { padding: 6px 8px; }
  .dept__head { padding: 7px 13px; }
  .dept__list { padding: 4px; }
  .sync__tally { font-size: 0.66rem; }
}

/* The peak's heading and its body cross-fade, so on a short desktop they stack
   in one block the way they already do on a phone, and the act gets back the
   60px the centred control row and the taller button spent. */
@media (min-width: 861px) and (max-height: 810px) {
  .sync__copy { position: relative; min-height: 6.6rem; }
  .sync__copy h2, .sync__copy .body { position: absolute; inset: 1.7rem 0 auto 0; }
}
/* 320x568 leaves about 400px of stage. Every current phone clears without this;
   it is here so the oldest small screen still lands whole rather than clipped. */
@media (max-height: 600px) {
  .pane--all .row:nth-child(n + 2) { display: none; }
  .depts .tag { display: none; }
  .gate { padding: 10px 12px; gap: 7px; }
  .gate__meta { display: none; }
  .gate__title { font-size: 0.86rem; }
  .gate__btn { padding: 9px 14px; font-size: 0.78rem; }
  .gate__stamp { font-size: 0.58rem; }
  .dept__head { padding: 6px 10px; }
  .dept__state { font-size: 0.5rem; }
  .depts { gap: 6px; }
  .sync__copy { min-height: 4.6rem; }
  .sync { gap: 8px; }
  .close__panel { padding: 16px; gap: 10px; }
  .foot__note { display: none; }
  h1 { font-size: 1.18rem; }
  #act-activity .pad { gap: 9px; }
  .masthead { gap: 4px; }
  .ticker { min-height: 4.1rem; }
  .ticker p { font-size: 0.66rem; line-height: 1.45; }
}
@media (max-height: 740px) {
  .sync__copy h2 { font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem); }
}
@media (max-height: 660px) {
  .depts { gap: 6px; }
  .sync { gap: 8px; }
  .gate { padding: 10px 13px; }
  .sync__copy { min-height: 5.4rem; }
}

@media (max-height: 700px) {
  .pad { gap: 10px; }
  .row { padding: 7px 8px; }
  .out { padding: 7px 8px; }
  .body { font-size: 0.88rem; }
}