/* ==============================================================
   Homepage figure system (v3, 2026-09-15). Four primitives carry
   all nine figures so the page reads as one system:

     .fxs   a labelled scale plus lanes (figures 1, 4, 5, 7)
     .fxf   a phased step spine with approval gates (figures 2, 8)
     .fxl   a two column ledger with state chips (figures 3, 6)
     .fxd   the day docket, a coded replica of real work (hero)

   Rules that bind every figure here: words and numbers are HTML,
   never baked into art; comparisons share one scale; labels sit on
   the thing they name, so no legends; every animation shows the
   mechanism and has a finished static state; type floors are 1rem
   for running text and 0.875rem for labels; colors come from the
   tokens in standards.css.
   ============================================================== */

:root {
  --fx-gap: clamp(0.9rem, 1.6vw, 1.4rem);
  --fx-lane: 10px;
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- shared chrome ---------- */
.fx-note {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 1.5rem 0 0;
  max-width: 68ch;
}
.fx-note b { color: var(--ink); font-weight: 600; }
.fx-note em { font-style: normal; color: var(--crimson); font-weight: 600; }
.fx-lab {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: var(--label-track, 0.08em);
  text-transform: uppercase;
  color: var(--slate);
}
.fx-name { font-family: var(--font-text); font-size: 1rem; color: var(--ink); font-weight: 500; }
.fx-sub { font-family: var(--font-text); font-size: 1rem; color: var(--slate); }

/* ==============================================================
   .fxs  scale and lanes: figures 1, 4, 5 and 7
   ============================================================== */
/* one column system per figure, so the scale, the markers and the bars line up */
.fxs-wrap { position: relative; --fx-name: 11rem; --fx-state: 6rem; --fx-col: 0.9rem; }
.fxs-head, .fxs-row, .f5-lane, .f7-row {
  display: grid;
  grid-template-columns: var(--fx-name) minmax(0, 1fr) var(--fx-state);
  gap: var(--fx-col);
  align-items: center;
}
.fxs-head > .fxs-scale { grid-column: 2; }
.fxs-scale {
  position: relative;
  display: grid;
  border-bottom: 1px solid var(--illustration-200, #D9DFEA);
  padding-bottom: 0.45rem;
  margin-bottom: 0.9rem;
}
.fxs-scale span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--slate);
  position: relative;
}
.fxs-scale span::before {
  content: "";
  position: absolute;
  left: 0; bottom: -0.5rem;
  width: 1px; height: 0.35rem;
  background: var(--illustration-300, #B7C1D3);
}
.fxs-scale span:last-child { text-align: right; }
.fxs-scale span:last-child::before { left: auto; right: 0; }
/* bands, not points on a continuous scale: every label sits at the start of its band */
.fxs-scale.is-bands span:last-child { text-align: left; }
.fxs-scale.is-bands span:last-child::before { left: 0; right: auto; }
.fxs-scale.is-bands span + span { border-left: 1px solid var(--illustration-200, #D9DFEA); padding-left: 0.5rem; }

/* per figure column widths */
.f1-hire .fxs-wrap, .f1-exec .fxs-wrap { --fx-name: 9.4rem; --fx-state: 5.2rem; --fx-col: 0.7rem; }
.f5-wrap { --fx-name: 11rem; --fx-state: 6rem; }

.fxs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; position: relative; }
.fxs-row { min-height: 1.9rem; }
.fxs-track {
  position: relative;
  height: var(--fx-lane);
  border-radius: 5px;
  background: var(--illustration-100, #F5F7FC);
  box-shadow: inset 0 0 0 1px var(--illustration-200, #D9DFEA);
}
.fxs-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--s, 0%);
  width: var(--w, 0%);
  border-radius: 5px;
  background: var(--ink);
  transform-origin: left center;
}
.fxs-state {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: var(--label-track, 0.08em);
  text-transform: uppercase;
  min-width: 5.4em;
  text-align: right;
}
.fxs-state.is-done { color: var(--approve, #1E7F4F); }
.fxs-state.is-wait { color: var(--crimson); }
.fxs-foot {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--illustration-200, #D9DFEA);
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--slate);
}
.fxs-foot b { color: var(--ink); font-weight: 600; }

/* two panels that share one scale */
.fx-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fx-gap); align-items: start; }
.fx-panel {
  border: 1px solid var(--illustration-200, #D9DFEA);
  border-radius: 4px;
  padding: 1.2rem 1.2rem 1.1rem;
  background: var(--paper-raised, #FFFFFF);
}
.fx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.fx-panel-head b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--ink); }
.fx-panel-head span { font-family: var(--font-text); font-size: 1rem; color: var(--slate); }

.fx-panel.is-dark {
  background: var(--theater, #0B1626);
  border-color: #223452;
}
.fx-panel.is-dark .fx-panel-head b { color: #FFFFFF; }
.fx-panel.is-dark .fx-panel-head span,
.fx-panel.is-dark .fxs-scale span,
.fx-panel.is-dark .fxs-foot,
.fx-panel.is-dark .fx-name { color: var(--illustration-400, #9AA8C2); }
.fx-panel.is-dark .fx-name { color: var(--t-ink, #E9EDF4); }
.fx-panel.is-dark .fxs-scale { border-bottom-color: rgba(233, 237, 244, 0.22); }
.fx-panel.is-dark .fxs-scale span::before { background: rgba(233, 237, 244, 0.3); }
.fx-panel.is-dark .fxs-track { background: rgba(233, 237, 244, 0.1); box-shadow: none; }
.fx-panel.is-dark .fxs-fill { background: var(--on-dark-running, #E8B45A); }
.fx-panel.is-dark .fxs-state.is-done { color: var(--on-dark-approve, #43C99A); }
.fx-panel.is-dark .fxs-foot { border-top-color: rgba(233, 237, 244, 0.22); }
.fx-panel.is-dark .fxs-foot b { color: var(--t-ink, #E9EDF4); }

/* the close of business marker, positioned inside the track column */
.fxs-mark, .fxs-mark-lab {
  position: absolute;
  left: calc(var(--fx-name) + var(--fx-col) + (100% - var(--fx-name) - var(--fx-state) - var(--fx-col) * 2) * var(--xf, 1));
}
.fxs-mark { top: -0.4rem; bottom: -0.4rem; width: 2px; background: var(--crimson); z-index: 2; }
.fxs-mark-lab {
  top: -1.7rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: var(--label-track, 0.08em);
  text-transform: uppercase;
  color: var(--crimson);
}

/* figure 1 motion: each bar draws along the scale */
.fig.is-live .f1-hire .fxs-fill { animation: fxGrow 1.5s var(--fx-ease) both; animation-delay: calc(0.35s + var(--i, 0) * 1.5s); }
.fig.is-live .f1-exec .fxs-fill { animation: fxGrow 0.55s var(--fx-ease) both; animation-delay: calc(0.5s + var(--i, 0) * 0.06s); }
@keyframes fxGrow { from { width: 0; } to { width: var(--w); } }
.f1-hire .fxs-fill, .f1-exec .fxs-fill { width: var(--w); }
.fig:not(.is-live) .f1-hire .fxs-fill, .fig:not(.is-live) .f1-exec .fxs-fill { width: var(--w); }

/* the honesty line, carried inside the figure frame, not only in the caption */
.fx-illus {
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--illustration-500, #7E8CA5); margin: 0 0 1.1rem; max-width: 62ch; line-height: 1.5;
}

/* figure 4: one mark each, components named rather than sized */
.f4-cost { display: grid; gap: 1.4rem; }
.f4-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.f4-bar { position: relative; display: flex; height: 2.2rem; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--illustration-200, #D9DFEA); }
.f4-seg {
  display: flex; align-items: center; flex: 1 1 auto; padding: 0 0.9rem;
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--slate); background: var(--illustration-100, #F5F7FC);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f4-bar.is-exec { width: 50%; box-shadow: none; }
.f4-bar.is-exec .f4-seg { background: var(--ink); color: #FFFFFF; border: 0; }
.f4-parts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.f4-part {
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--illustration-200, #D9DFEA); border-radius: 2px; padding: 0.2rem 0.5rem;
}
.f4-half {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--crimson); line-height: 1;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.f4-half span { font-family: var(--font-text); font-size: 1rem; color: var(--slate); }
.f4-out { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--illustration-200, #D9DFEA); display: grid; gap: 1.2rem; }
.f4-folders { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.f4-folders i {
  width: 1.7rem; height: 1.35rem; border-radius: 1px 4px 2px 2px;
  border: 1.6px solid var(--illustration-400, #9AA8C2);
  border-top-width: 4px;
  display: block;
}
/* the caseload does not stop at the frame, so the last marks fade out of it */
.f4-folders.is-many { position: relative; flex-wrap: nowrap; overflow: hidden; max-width: 34rem; mask-image: linear-gradient(90deg, #000 76%, transparent 100%); }
.f4-folders.is-exec i { border-color: var(--approve, #1E7F4F); }
.fig.is-live .f4-folders.is-exec i { animation: fxPop 0.32s var(--fx-ease) both; animation-delay: calc(0.6s + var(--i, 0) * 0.045s); }
@keyframes fxPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* figure 5: where each case is picked up */
.f5-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.f5-lane { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; }
.f5-track { position: relative; height: 2.4rem; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--illustration-100, #F5F7FC) 0 1px, transparent 1px 22px); box-shadow: inset 0 0 0 1px var(--illustration-200, #D9DFEA); }
.f5-pos { position: absolute; top: 50%; left: var(--x, 0%); transform: translate(-50%, -50%); width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--paper-raised, #FFFFFF); border: 3px solid var(--ink); z-index: 2; }
.f5-run { position: absolute; top: 50%; left: var(--x, 0%); height: 6px; width: 0; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(90deg, var(--ink), var(--navy)); }
.fig.is-live .f5-run { animation: fxRun 1.5s var(--fx-ease) both; animation-delay: calc(0.6s + var(--i, 0) * 0.14s); }
@keyframes fxRun { from { width: 0; } to { width: var(--r, 20%); } }
.f5-run { width: var(--r, 20%); }
.f5-day { position: absolute; top: -0.5rem; bottom: -0.5rem; left: var(--x, 6%); width: 2px; background: var(--crimson); z-index: 3; }

/* figure 7: delays that go to zero */
.f7-wrap { --fx-name: 14rem; --fx-state: 7rem; }
.f7-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.f7-track { position: relative; height: var(--fx-lane); border-radius: 5px; background: var(--illustration-100, #F5F7FC); box-shadow: inset 0 0 0 1px var(--illustration-200, #D9DFEA); }
.f7-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; border-radius: 5px; background: var(--illustration-400, #9AA8C2); }
/* what the wait looks like today stays visible as an outline, so the finished frame still shows the change */
.f7-ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; border-radius: 5px; border: 1.5px dashed var(--illustration-300, #B7C1D3); }
.f7-row:first-child .f7-ghost::after {
  content: "The wait today";
  position: absolute; left: 100%; top: 50%; transform: translate(0.5rem, -50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; color: var(--illustration-500, #7E8CA5);
}
.fig.is-live .f7-row.is-zero .f7-fill { animation: fxShrink 1.1s var(--fx-ease) both; animation-delay: calc(0.5s + var(--i, 0) * 0.16s); }
@keyframes fxShrink { from { width: 55%; } to { width: 0; } }
.fig.is-live.is-done .f7-row.is-zero .f7-fill { width: 0; }
.f7-row.is-yours .f7-fill { background: var(--approve, #1E7F4F); }
.f7-row.is-court .f7-fill { background: var(--ink); }
.f7-val { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; min-width: 6.5em; text-align: right; color: var(--slate); }
.f7-row.is-zero .f7-val { color: var(--approve, #1E7F4F); }
.f7-zero { position: absolute; left: 0; top: -0.6rem; bottom: -0.6rem; width: 2px; background: var(--crimson); }

/* ==============================================================
   .fxf  phased steps with approval gates: figures 2 and 8
   ============================================================== */
.fxf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-gap); }
.fxf-phase { border-top: 3px solid var(--navy); padding-top: 0.9rem; }
.fxf-phase[data-phase]::before {
  content: attr(data-phase);
  display: block;
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--navy); margin-bottom: 0.9rem;
}
.fxf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.fxf-step { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.fxf-no { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--illustration-400, #9AA8C2); padding-top: 0.15rem; }
.fxf-step b { display: block; font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--ink); }
.fxf-step p { margin: 0.2rem 0 0; font-family: var(--font-text); font-size: 1rem; line-height: 1.5; color: var(--slate); }
.fxf-gate {
  display: inline-block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--crimson); border: 1.6px solid var(--crimson); border-radius: 2px; padding: 0.24rem 0.5rem;
}
.fig.is-live .fxf-step { animation: fxPop 0.4s var(--fx-ease) both; animation-delay: calc(0.3s + var(--i, 0) * 0.12s); }

/* figure 8: what a trigger covers */
.f8-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.f8-seg { border: 1px solid var(--illustration-200, #D9DFEA); border-radius: 3px; padding: 1rem; background: var(--paper-raised, #FFFFFF); }
.f8-seg.is-mid { border-color: var(--ink); border-width: 1.6px; }
.f8-seg b { display: block; font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; color: var(--slate); margin-bottom: 0.5rem; }
.f8-seg p { margin: 0; font-family: var(--font-text); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.f8-who { display: inline-block; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; color: var(--slate); }
.f8-brackets { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.f8-brace { grid-column: 2 / 3; border-top: 2px solid var(--illustration-400, #9AA8C2); padding-top: 0.5rem; font-family: var(--font-text); font-size: 1rem; color: var(--slate); text-align: center; }
.f8-brace.is-all { grid-column: 1 / -1; border-top-color: var(--crimson); color: var(--ink); font-weight: 600; margin-top: 0.6rem; }

/* ==============================================================
   .fxl  ledger rows with state chips: figures 3 and 6
   ============================================================== */
.fxl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fxl-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--illustration-200, #D9DFEA);
  border-radius: 3px;
  background: var(--paper-raised, #FFFFFF);
}
.fxl-row.is-gap { border-style: dashed; background: transparent; }
.fxl-tool { font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--ink); }
.fxl-does { font-family: var(--font-text); font-size: 1rem; line-height: 1.5; color: var(--slate); }
.fxl-chip {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--approve, #1E7F4F); border: 1.6px solid var(--approve, #1E7F4F); border-radius: 2px; padding: 0.24rem 0.55rem; white-space: nowrap;
}
.fxl-chip.is-crimson { color: var(--crimson); border-color: var(--crimson); }
.fig.is-live .fxl-row { animation: fxPop 0.36s var(--fx-ease) both; animation-delay: calc(0.25s + var(--i, 0) * 0.08s); }

/* figure 6: the desk split */
.f6 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fx-gap); }
.f6-col h4 {
  font-family: var(--font-text); font-size: 1rem; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--ink); margin: 0 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--illustration-200, #D9DFEA);
}
.f6-col.is-keep h4 { color: var(--approve, #1E7F4F); border-bottom-color: var(--approve, #1E7F4F); }
.f6-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.f6-item { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid var(--illustration-100, #F5F7FC); }
.f6-item span { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); position: relative; }
/* struck through on every line, including wrapped ones */
.f6-col.is-leave .f6-item span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.45s var(--fx-ease);
}
.fig.is-live .f6-col.is-leave .f6-item span { text-decoration-color: var(--crimson); transition-delay: calc(0.4s + var(--i, 0) * 0.16s); }
.f6-chip {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  border: 1.6px solid currentColor; border-radius: 2px; padding: 0.2rem 0.5rem; white-space: nowrap;
}
.f6-col.is-leave .f6-chip { color: var(--crimson); }
.f6-col.is-keep .f6-chip { color: var(--approve, #1E7F4F); }

/* ==============================================================
   .fxd  the day docket in the hero: a coded replica of real work
   ============================================================== */
.fxd { display: grid; gap: 0.9rem; }
.fxd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.fxd-when { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.2; color: #FFFFFF; }
.fxd-clock { font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--t-ink, #E9EDF4); letter-spacing: 0.02em; }
.fxd-clock span { font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); margin-left: 0.3rem; color: var(--illustration-400, #9AA8C2); }
.fxd-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fxd-row {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(233, 237, 244, 0.16);
  opacity: 0;
}
.fxd-row.is-on { opacity: 1; }
.fig-live .fxd-row.is-on, .fxd-row.is-on { transition: opacity 0.35s ease; }
.fxd-time { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--on-dark-running, #E8B45A); padding-top: 0.1rem; }
.fxd-case { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--t-ink, #E9EDF4); font-weight: 600; }
.fxd-what { display: block; margin-top: 0.2rem; font-family: var(--font-text); font-size: 1rem; line-height: 1.45; color: var(--illustration-300, #B7C1D3); }
.fxd-state {
  display: inline-block; margin-top: 0.45rem;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  color: var(--on-dark-approve, #43C99A); border: 1.4px solid var(--on-dark-approve, #43C99A); border-radius: 2px; padding: 0.16rem 0.45rem;
}
.fxd-row.is-pending { border-left: 2px solid var(--crimson-action, #D9342B); padding-left: 0.8rem; }
.fxd-row.is-pending .fxd-state { color: var(--on-dark-running, #E8B45A); border-color: var(--on-dark-running, #E8B45A); }
.fxd-approve {
  margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase;
  background: var(--crimson-action, #D9342B); color: #FFFFFF; border: 0; border-radius: 2px; padding: 0.4rem 0.9rem; cursor: pointer;
}
.fxd-approve:hover { background: var(--crimson, #C0292B); }
.fxd-done { display: inline-block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; color: var(--on-dark-approve, #43C99A); }
.fxd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; padding-top: 0.9rem; border-top: 1px solid rgba(233, 237, 244, 0.16); }
.fxd-tally b { font-family: var(--font-display); font-size: 1.6rem; color: var(--t-ink, #E9EDF4); display: block; line-height: 1; }
.fxd-tally span { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: var(--label-track, 0.08em); text-transform: uppercase; color: var(--illustration-400, #9AA8C2); }
.fxd-tally.is-zero b { color: var(--on-dark-approve, #43C99A); }
.fxd-ctl { margin-left: auto; display: flex; gap: 0.5rem; }

/* pausing a figure freezes its scene */
.fig.is-paused *, .fig.is-paused *::before, .fig.is-paused *::after { animation-play-state: paused !important; }

/* ---------- controls shared by every figure ---------- */
.fx-btn {
  font-family: var(--font-text); font-size: 0.875rem; letter-spacing: normal; text-transform: none;
  background: transparent; border: 1px solid var(--illustration-300, #B7C1D3); color: var(--ink);
  border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer;
}
.fx-btn:hover { border-color: var(--ink); }
.dark-card .fx-btn, .fx-panel.is-dark .fx-btn { color: var(--t-ink, #E9EDF4); border-color: rgba(233, 237, 244, 0.35); }
.dark-card .fx-btn:hover { border-color: var(--t-ink, #E9EDF4); }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .fx-two, .f6, .fxf, .f8-line, .f8-brackets { grid-template-columns: minmax(0, 1fr); }
  /* the outline is explained in the figure's closing line at this width */
  .f7-row:first-child .f7-ghost::after { display: none; }
  .f8-brace, .f8-brace.is-all { grid-column: 1 / -1; }
  /* the label and value columns collapse, so the scale and any marker run the full width */
  .fxs-wrap, .f1-hire .fxs-wrap, .f1-exec .fxs-wrap, .f5-wrap, .f7-wrap { --fx-name: 0rem; --fx-state: 0rem; --fx-col: 0rem; }
  .fxs-head { grid-template-columns: minmax(0, 1fr); }
  .fxs-head > span { display: none; }
  .fxs-row, .f5-lane, .f7-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.35rem;
    column-gap: 0.9rem;
  }
  .fxs-row .fx-name, .f5-lane .fx-name, .f7-row .fx-name { grid-column: 1; grid-row: 1; }
  .fxs-row .fxs-state, .f5-lane .fxs-state, .f7-row .f7-val { grid-column: 2; grid-row: 1; }
  .fxs-row .fxs-track, .f5-lane .f5-track, .f7-row .f7-track { grid-column: 1 / -1; grid-row: 2; }
  .f4-row { grid-template-columns: minmax(0, 1fr); }
  .fxl-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .fxl-tool { grid-column: 1; }
  .fxl-chip { grid-column: 2; grid-row: 1; }
  .fxl-does { grid-column: 1 / -1; }
  .fxd-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .fxd-time { padding-top: 0; }
}

/* ---------- reduced motion and the static frame: every figure shows its end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .fig .fxs-fill, .fig .f5-run, .fig .f7-fill, .fig .fxf-step, .fig .fxl-row, .fig .f4-folders i { animation: none !important; }
  .fig .f6-col.is-leave .f6-item span { text-decoration-color: var(--crimson); transition: none; }
  .fig.is-live .f7-row.is-zero .f7-fill { width: 0; }
}
body.is-static .fig .fxs-fill, body.motion-static .fig .fxs-fill,
body.is-static .fig .f5-run, body.motion-static .fig .f5-run,
body.is-static .fig .fxf-step, body.motion-static .fig .fxf-step,
body.is-static .fig .fxl-row, body.motion-static .fig .fxl-row,
body.is-static .fig .f4-folders i, body.motion-static .fig .f4-folders i { animation: none !important; opacity: 1; }
body.is-static .fig .f6-col.is-leave .f6-item span, body.motion-static .fig .f6-col.is-leave .f6-item span { text-decoration-color: var(--crimson); transition: none; }
body.is-static .fig .f7-row.is-zero .f7-fill, body.motion-static .fig .f7-row.is-zero .f7-fill { animation: none !important; width: 0; }
body.is-static .fxd-row, body.motion-static .fxd-row { opacity: 1; }