/* Figures — restored census, ship pipeline, feedback loop and rosters.
   Built on the 2026-09-07 editorial system: 1px rules, mono microtype,
   ink/paper/gold/blue. No new fonts, no new colors, no rounded corners. */

/* ---------------------------------------------------------------
   1. THE CENSUS — the hero count band (5 humans, 11 agents)
   Lives on the ink hero, above the team photograph.
   --------------------------------------------------------------- */
.census {
  border-top: 1px solid var(--darkline);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
}

.census div {
  padding: 30px 26px 34px 0;
  min-width: 0;
}

.census div + div {
  border-left: 1px solid var(--darkline);
  padding-left: 26px;
}

.census .figure {
  display: block;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-weight: 550;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.census .figure-unit {
  font-size: 0.42em;
  letter-spacing: 0.02em;
  color: #b9bec7;
  padding-left: 6px;
  vertical-align: 0.42em;
  font-weight: 500;
}

.census .figure-name {
  display: block;
  font: 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e4e7ec;
  margin-top: 18px;
}

.census .figure-note {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #aeb4bd;
  margin-top: 8px;
  max-width: 24ch;
}

/* ---------------------------------------------------------------
   2. THE SHIP PIPELINE — every change walks this rail
   --------------------------------------------------------------- */
.pipeline {
  margin-top: 44px;
}

.pipeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.pipeline-head .micro {
  color: var(--blue);
}

.pipeline-head .pipeline-legend {
  font: 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.pipeline-legend .swatch {
  width: 11px;
  height: 11px;
  background: var(--gold);
  border: 1px solid var(--ink);
  display: inline-block;
}

.pipeline-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 50px;
  padding-top: 38px;
}

.pipeline-stage {
  position: relative;
  min-width: 0;
  padding: 0 28px 0 0;
}

/* Each stage carries its own length of rail; together they read as one line. */
.pipeline-stage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--line);
}

.pipeline-stage:nth-child(4n + 1)::before {
  left: 6px;
}

.pipeline-stage:nth-child(4n)::before {
  right: calc(100% - 7px);
}

.pipeline-stage .node {
  position: relative;
  z-index: 1;
  display: block;
  width: 13px;
  height: 13px;
  background: var(--paper);
  border: 1px solid var(--ink);
  margin-bottom: 22px;
}

.pipeline-stage .stage-no {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 12px var(--mono);
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 11px;
  min-height: 21px;
}

.gate-mark {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 8px;
  white-space: nowrap;
}

.pipeline-stage h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.pipeline-stage p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
}

/* A gate is a stage that can stop the line. */
.pipeline-stage.is-gate .node {
  background: var(--gold);
}

/* The human gate is the end of the line, not a step in it. */
.pipeline-stage.is-human .node {
  background: var(--ink);
}

.pipeline-stage.is-human .gate-mark {
  background: var(--ink);
  color: var(--paper);
}

.pipeline-foot {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.pipeline-foot strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---------------------------------------------------------------
   3. THE FEEDBACK LOOP — hourly, until it reaches a person
   --------------------------------------------------------------- */
.loop {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}

.loop-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.loop-head h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  max-width: 17ch;
  margin: 0;
}

.loop-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34ch;
  margin: 0;
}

.loop-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.loop-step {
  position: relative;
  min-width: 0;
  padding: 0 18px 0 0;
}

/* The connector between steps: solid while the machine runs. */
.loop-step .tick {
  display: block;
  height: 3px;
  background: var(--blue);
  margin-bottom: 18px;
  position: relative;
}

.loop-step .tick::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 0;
  bottom: 0;
  width: 18px;
  background: var(--blue);
}

.loop-step .clock {
  display: block;
  font: 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 11px;
}

.loop-step h4 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.loop-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 28ch;
}

/* The wait: the machine has done everything it is allowed to do. */
.loop-step.is-wait .tick,
.loop-step.is-wait .tick::after {
  background: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--gold) 0,
    var(--gold) 7px,
    transparent 7px,
    transparent 14px
  );
}

.loop-step.is-wait .clock {
  color: #8c6220;
}

.loop-step.is-wait h4 {
  color: #8c6220;
}

/* The close: only a person gets here. */
.loop-step.is-human .tick,
.loop-step.is-human .tick::after {
  background: var(--ink);
}

.loop-step.is-human .clock {
  color: var(--ink);
}

.loop-step.is-last {
  padding-right: 0;
}

.loop-step.is-last .tick::after {
  display: none;
}

.loop-rails {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  font-size: 14px;
  line-height: 1.6;
}

.loop-rails dt {
  font: 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  padding-top: 3px;
}

.loop-rails dd {
  margin: 0;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   4. ROSTERS — five humans, eleven agent roles
   --------------------------------------------------------------- */
.roster {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.roster-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.roster-band .micro {
  color: var(--blue);
}

.roster-band .count {
  font: 12px var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roster-grid > div {
  min-width: 0;
  padding: 22px 24px 24px 0;
  border-bottom: 1px solid var(--line);
}

.roster-grid > div + div {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

/* Restart the left border on each new row of three. */
.roster-grid > div:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}

.roster-name {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  display: block;
}

.roster-tag {
  display: inline-block;
  font: 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 9px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.roster-tag.is-claude {
  border-color: #c2872f;
  color: #8c6220;
}

.roster-tag.is-codex {
  border-color: var(--blue);
  color: var(--blue);
}

.roster-tag.is-human {
  border-color: var(--ink);
  color: var(--ink);
}

.roster-grid p {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Dark reading mode — matches the r3 theme's approach.
   --------------------------------------------------------------- */
@media screen and (prefers-color-scheme: dark) {
  .pipeline-stage .node {
    background: #191c22;
    border-color: #8b94a3;
  }

  .pipeline-stage h4,
  .loop-step h4,
  .roster-name {
    color: var(--reader-ink);
  }

  .pipeline-stage.is-gate .node {
    background: var(--gold);
    border-color: var(--gold);
  }

  .pipeline-stage.is-human .node {
    background: var(--reader-ink);
    border-color: var(--reader-ink);
  }

  .pipeline-stage.is-human .gate-mark {
    background: var(--reader-ink);
    color: #191c22;
  }

  .pipeline-foot strong {
    color: var(--reader-ink);
  }

  .loop-step.is-wait .clock,
  .loop-step.is-wait h4 {
    color: var(--gold);
  }

  .loop-step.is-human .tick,
  .loop-step.is-human .tick::after {
    background: var(--reader-ink);
  }

  .loop-step.is-human .clock {
    color: var(--reader-ink);
  }

  .roster-tag.is-claude {
    border-color: var(--gold);
    color: var(--gold);
  }

  .roster-tag.is-human {
    border-color: var(--reader-ink);
    color: var(--reader-ink);
  }

  .pipeline-stage p,
  .loop-step p,
  .roster-grid p,
  .loop-rails dd,
  .loop-head p,
  .pipeline-foot {
    color: var(--reader-copy);
  }
}

/* ---------------------------------------------------------------
   Responsive — the rails turn vertical rather than shrinking.
   --------------------------------------------------------------- */
@media (min-width: 721px) {
  .loop-step h4 {
    min-height: 42px;
  }
}

@media (max-width: 1050px) {
  .pipeline-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .pipeline-stage:nth-child(4n + 1)::before,
  .pipeline-stage:nth-child(4n)::before {
    left: 0;
    right: 0;
  }

  .pipeline-stage:nth-child(odd)::before {
    left: 6px;
  }

  .pipeline-stage:nth-child(even)::before {
    right: calc(100% - 7px);
  }

  .loop-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 34px;
  }

  .loop-step:nth-child(3n) .tick::after {
    display: none;
  }

  .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-grid > div:nth-child(3n + 1) {
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }

  .roster-grid > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .census {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .census div {
    padding: 22px 18px 24px 0;
    border-top: 1px solid var(--darkline);
  }

  .census div:nth-child(-n + 2) {
    border-top: 0;
  }

  .census div + div {
    padding-left: 18px;
  }

  .census div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .census .figure {
    font-size: 40px;
  }

  .census .figure-unit {
    display: block;
    padding-left: 0;
    vertical-align: baseline;
    font-size: 0.34em;
    margin-top: 6px;
  }

  .census .figure-name {
    margin-top: 13px;
  }

  .pipeline-head {
    flex-direction: column;
    gap: 10px;
  }

  .pipeline-rail,
  .loop-track {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding-top: 22px;
  }

  .pipeline-stage {
    padding: 20px 0 22px;
    border-top: 1px solid var(--line);
  }

  .pipeline-stage::before,
  .pipeline-stage:nth-child(n)::before {
    display: none;
  }

  .pipeline-stage .node {
    margin-bottom: 15px;
  }

  .pipeline-stage p {
    max-width: none;
  }

  .loop-step {
    padding: 0 0 22px;
  }

  .loop-step .tick {
    margin-bottom: 14px;
  }

  .loop-step .tick::after {
    display: none;
  }

  .loop-rails {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .roster-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-grid > div,
  .roster-grid > div + div,
  .roster-grid > div:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------------------------------------------------------------
   Print — the figures have to survive the PDF edition.
   --------------------------------------------------------------- */
@media print {
  .census {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #000;
  }

  .census .figure {
    color: #000;
  }

  .census .figure-name,
  .census .figure-note {
    color: #333;
  }

  .pipeline,
  .loop,
  .roster {
    break-inside: avoid;
  }

  .pipeline-rail,
  .loop-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 24px;
  }

  /* The A4 page box is ~794px, so the 1050px rail rules would otherwise still
     apply and cut the printed line into pairs. Reset parity first — equal
     specificity, so order decides. */
  .pipeline-stage:nth-child(odd)::before,
  .pipeline-stage:nth-child(even)::before {
    left: 0;
    right: 0;
  }

  .pipeline-stage:nth-child(4n + 1)::before {
    left: 6px;
  }

  .pipeline-stage:nth-child(4n)::before {
    right: calc(100% - 7px);
  }

  /* :not(.is-last) — equal specificity to the .is-last rule above, and this one
     comes later, so without it the final step would dangle a connector. */
  .loop-step:nth-child(3n):not(.is-last) .tick::after {
    display: block;
  }

  .loop-step:nth-child(4n) .tick::after {
    display: none;
  }
}