/* ============================================================
   HWW FIGURES — wave 4 (Jon's brief, 2026-08-22)
   The drawing-set figure library. Additive layer over tokens.css,
   site.css, motion.css. No colour literals — var()/color-mix only.

   .wa-diagram      THE signature figure: Decompose → Decide → Recompose
                    run against a familiar function. Meant to be
                    recognizable without the logo.
   .before-after    the Renata register: a workday, before and after
   .findings-table  inherited role → conclusion → destination rows
   .flow-line       logic flows (traditional vs inverted planning)
   All entrances ride the existing m-reveal/m-child system.
   ============================================================ */

/* ---- the signature diagram ---------------------------------- */
.wa-diagram {
  margin: 0;
  border: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 60%, transparent);
  background: var(--hw-paper);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.wa-fig-label {
  font-family: var(--hw-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hw-field-grey);
  display: flex;
  justify-content: space-between;
  gap: var(--hw-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--hw-space-5);
}
.wa-stage {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 2px solid color-mix(in srgb, var(--hw-hairline) 55%, transparent);
  padding-bottom: var(--hw-space-6);
}
.wa-stage:last-of-type {
  padding-bottom: 0;
}
.wa-stage::before {
  /* the station marker on the drawing's spine */
  content: "";
  position: absolute;
  left: -6px;
  top: 0.35em;
  width: 10px;
  height: 10px;
  background: var(--hw-graphite);
}
.wa-stage.wa-decide::before {
  background: var(--hw-terracotta);
}
.wa-stage-code {
  display: block;
  font-family: var(--hw-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hw-graphite);
  font-weight: 600;
  margin-bottom: var(--hw-space-2);
}
.wa-stage.wa-decide .wa-stage-code {
  color: var(--hw-terracotta);
}
.wa-stage-note {
  font-family: var(--hw-font-serif);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 var(--hw-space-3);
}
/* the inherited-job block and the redesigned-role block */
.wa-block {
  display: inline-block;
  font-family: var(--hw-font-sans);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  letter-spacing: 0.01em;
  padding: var(--hw-space-2) var(--hw-space-4);
  border: 2px solid var(--hw-graphite);
  background: var(--hw-ground);
}
.wa-block.wa-role {
  border-color: var(--hw-terracotta);
  background: color-mix(in srgb, var(--hw-terracotta) 8%, var(--hw-paper));
}
/* work-unit chips */
.wa-units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-2);
  max-width: 46rem;
}
.wa-units li {
  font-family: var(--hw-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.7rem;
  background: var(--hw-ground);
  border: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 70%, transparent);
  border-left-width: 3px;
}
/* capacity assignment: DECIDE stage colours each unit's left edge */
.wa-units li[data-capacity="human"] {
  border-left-color: var(--hw-cap-human);
}
.wa-units li[data-capacity="ai"] {
  border-left-color: var(--hw-cap-ai);
}
.wa-units li[data-capacity="system"] {
  border-left-color: var(--hw-cap-system);
}
.wa-units li[data-capacity="hybrid"] {
  border-left-color: var(--hw-cap-hybrid);
}
.wa-units li[data-capacity="external"] {
  border-left-color: var(--hw-cap-external);
}
.wa-units li b {
  font-weight: 600;
  color: var(--hw-field-grey);
  margin-left: 0.5em;
}
/* the five capacity sources, as a legend */
.wa-capacities {
  list-style: none;
  margin: var(--hw-space-3) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-2) var(--hw-space-4);
  font-family: var(--hw-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--hw-graphite);
}
.wa-capacities li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.wa-capacities li::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  flex: none;
}
.wa-capacities li[data-capacity="human"]::before {
  background: var(--hw-cap-human);
}
.wa-capacities li[data-capacity="ai"]::before {
  background: var(--hw-cap-ai);
}
.wa-capacities li[data-capacity="system"]::before {
  background: var(--hw-cap-system);
}
.wa-capacities li[data-capacity="hybrid"]::before {
  background: var(--hw-cap-hybrid);
}
.wa-capacities li[data-capacity="external"]::before {
  background: var(--hw-cap-external);
}
/* the summary flow under the figure */
.wa-flow {
  font-family: var(--hw-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hw-field-grey);
  border-top: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 55%, transparent);
  padding-top: var(--hw-space-3);
  margin: var(--hw-space-5) 0 0;
}
.wa-footnote {
  font-family: var(--hw-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hw-field-grey);
  margin-top: var(--hw-space-2);
}
/* blocks inside stages carry no flow margin (kills the dangling spine tail) */
.wa-stage .wa-block {
  margin: 0;
}

/* ---- the recompose register --------------------------------
   The Decide stage renders eight named units at high resolution;
   before this block the Recompose stage rendered a single empty
   placeholder, so the figure argued that allocation is the method
   and coherence is a slogan. This gives recomposition the same
   resolution: what was retained, what the role gained that the
   inherited job did not carry, who is accountable, and who may stop
   the machine. Label column + reading column, hairline separated.
   No text-transform on the bodies: they can contain "Ai".        */
.wa-rebuild {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 48ch);
  /* Shrink the box to its columns so the container's top rule is the same
     length as every row rule beneath it. The gutter is carried as padding
     on the label cell rather than as column-gap, so each row rule runs
     unbroken across both columns instead of splitting at the gutter. */
  width: fit-content;
  max-width: 100%;
  margin: var(--hw-space-4) 0 0;
  border-top: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 55%, transparent);
}
.wa-rebuild dt {
  font-family: var(--hw-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hw-field-grey);
  padding: var(--hw-space-3) var(--hw-space-4) 0 0;
}
.wa-rebuild dt,
.wa-rebuild dd {
  border-bottom: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 40%, transparent);
}
.wa-rebuild dd {
  font-family: var(--hw-font-serif);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  padding: var(--hw-space-3) 0 var(--hw-space-3);
}

/* the widened register carries the distinctive claim: recomposition
   ADDS work rather than collecting residue. Plan Blue = systems. */
.wa-rebuild .wa-rebuild-add {
  color: var(--hw-plan-blue);
}
/* The accent bar hangs in the gutter via a positioned pseudo-element
   rather than a negative margin, so this row's box - and therefore its
   rule - is exactly as wide as every other row in the register. */
.wa-rebuild dd.wa-rebuild-add {
  color: var(--hw-graphite);
  position: relative;
}
.wa-rebuild dd.wa-rebuild-add::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--hw-space-3));
  top: var(--hw-space-3);
  bottom: var(--hw-space-3);
  width: 3px;
  background: var(--hw-plan-blue);
}
/* terracotta earns its reserve here: an actual stopping condition */
.wa-rebuild .wa-rebuild-stop {
  color: var(--hw-terracotta);
}
.wa-rebuild dt.wa-rebuild-stop,
.wa-rebuild dd.wa-rebuild-stop {
  border-bottom: 0;
}
.wa-rebuild dd.wa-rebuild-stop {
  color: var(--hw-graphite);
}
.wa-rebuild dd.wa-rebuild-stop::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.55em;
  background: var(--hw-terracotta);
}
@media (max-width: 47.9375rem) {
  .wa-rebuild {
    grid-template-columns: minmax(0, 1fr);
  }
  .wa-rebuild dt {
    padding-bottom: var(--hw-space-1);
    border-bottom: 0;
  }
  .wa-rebuild dd {
    padding-top: 0;
  }
  .wa-rebuild dd.wa-rebuild-add::before {
    left: calc(-1 * var(--hw-space-2));
  }
}

/* the two laws that land the figure.
   Each law is marked with a terracotta square of its own; the eyebrow
   tick is field-grey (see motion.css) rather than sharing
   a coloured side bar: a border above 1px contradicts the hairline rule
   (tokens.css; Brand v1.2 §12), and one bar for two laws read as a single
   quotation instead of two separate statements. The marker hangs inside the
   block, so nothing overflows the sheet margin at narrow widths. */
.wa-laws {
  margin: var(--hw-space-5) 0 0;
}
.wa-laws p {
  position: relative;
  padding-left: var(--hw-space-4);
  font-family: var(--hw-font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  max-width: 40ch;
}
.wa-laws p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--hw-terracotta);
}
.wa-laws p + p {
  margin-top: var(--hw-space-3);
}

/* ---- the Renata register: a workday, before and after -------- */
.before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  border-top: 2px solid var(--hw-graphite);
}
.before-after > div {
  padding-top: var(--hw-space-3);
}
.before-after h3 {
  font-family: var(--hw-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hw-field-grey);
  margin: 0 0 var(--hw-space-3);
}
.before-after .ba-after h3 {
  color: var(--hw-terracotta);
}
.before-after ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.before-after li {
  font-family: var(--hw-font-serif);
  font-size: 1rem;
  line-height: 1.55;
  padding: var(--hw-space-1) 0;
  border-bottom: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 40%, transparent);
}
.before-after li:last-child {
  border-bottom: 0;
}
.ba-quote {
  font-family: var(--hw-font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  max-width: 44ch;
  margin: var(--hw-space-5) 0 0;
}
.ba-tag {
  font-family: var(--hw-font-sans);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  margin-top: var(--hw-space-3);
  color: var(--hw-terracotta);
}

/* ---- findings rows: inherited → conclusion → destination ----- */
.findings-table {
  border-top: 2px solid var(--hw-graphite);
}
.findings-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: var(--hw-space-3) var(--hw-space-4);
  padding: var(--hw-space-3) 0;
  border-bottom: var(--hw-hairline-w) solid
    color-mix(in srgb, var(--hw-hairline) 50%, transparent);
  align-items: baseline;
}
.findings-row .f-inherited {
  font-family: var(--hw-font-sans);
  font-weight: 700;
}
.findings-row .f-move {
  font-family: var(--hw-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--hw-field-grey);
  line-height: 1.6;
}
.findings-row .f-destination {
  font-family: var(--hw-font-sans);
  font-weight: 800;
  font-stretch: 85%;
  color: var(--hw-terracotta);
}
.findings-row .f-destination::before {
  content: "→ ";
  color: var(--hw-field-grey);
  font-weight: 400;
}

/* ---- logic flows: traditional vs inverted -------------------- */
.flow-line {
  font-family: var(--hw-font-mono);
  font-size: clamp(0.78rem, 1.15vw, 0.95rem);
  letter-spacing: 0.08em;
  line-height: 2;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: var(--hw-space-1);
}
.flow-line.muted {
  color: var(--hw-field-grey);
}
.flow-line.muted .flow-label,
.flow-line .flow-label {
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-right: var(--hw-space-3);
}
.flow-line b {
  font-weight: 600;
  color: var(--hw-terracotta);
}
/* The separator carries the direction of the flow, so it is text and needs
   4.5:1. --hw-hairline is declared NON-TEXT ONLY in tokens.css (3.01:1) and
   at 90% read 2.64:1 on cream; --hw-field-grey is the metadata ink at 5.19:1. */
.flow-line .flow-sep {
  color: var(--hw-field-grey);
  margin: 0 0.4em;
}

/* ---- responsive ---------------------------------------------- */
@media (max-width: 47.9375rem) {
  .before-after {
    grid-template-columns: 1fr;
  }
  .before-after .ba-after {
    border-top: var(--hw-hairline-w) solid
      color-mix(in srgb, var(--hw-hairline) 55%, transparent);
    margin-top: var(--hw-space-3);
  }
  .findings-row {
    grid-template-columns: 1fr;
    gap: var(--hw-space-1);
  }
}

/* ---- print: figures are ink on paper ------------------------- */
@media print {
  .wa-diagram {
    border-color: var(--hw-graphite);
  }
}