/* GENERATED at build from ds/illustration/diagram.css. Do not edit. */
/* ═══════════════════════════════════════════════════════════════
   hcd.ai diagram system — the shipping stylesheet.
   Single source of truth for tokens, type roles and mark styles.
   No component file may declare a literal hex.
   ═══════════════════════════════════════════════════════════════ */

/* ── the plate: identical box metrics, registers differ only in token values ── */
.plate{border:1px solid;border-radius:0;padding:24px 24px 20px;position:relative;overflow:hidden;
       forced-color-adjust:none;print-color-adjust:exact;-webkit-print-color-adjust:exact;
       background:var(--plate);border-color:var(--plate-edge)}

.plate-a{
  --plate:#0a0a0a; --plate-edge:#242424; --surface:#151515;
  --grid:#2b2b2b;  --stroke:#5e5e5e;     --line:#767676;
  --ink-1:#f2f2f2; --ink-2:#a3a3a3;      --ink-3:#9c9c9c;
  --claim:#e8f700; --claim-2:#6de847;    --claim-text:#e8f700;
  --on-claim:#0a0a0a;
}
.plate-b{
  --plate:#f4f4f1; --plate-edge:#e2e2db; --surface:#ffffff;
  --grid:#dcdcd6;  --stroke:#6b6b63;     --line:#63635b;
  --ink-1:#0a0a0a; --ink-2:#3f3f39;      --ink-3:#54544d;
  --claim:#0e7490; --claim-2:#0e7490;    --claim-text:#0b5f76;
  --on-claim:#ffffff;
}

/* dot-grid field on the plate itself (A only — B uses a ruled field) */
.plate-a::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;background-position:center center}
.plate > *{position:relative}

.plate .ptitle{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.plate .ptitle b{color:var(--ink-1);font-weight:500}

/* ── SVG token bindings. No literal hex below this point. ────────
   Strokes are locked to device pixels so a 2-unit outline is 2px at
   any container width — crispness AND 1.4.11 in one property.      */
.plate svg{display:block;width:100%;height:auto;forced-color-adjust:none}
.plate svg *{vector-effect:non-scaling-stroke}

.d-ink1{fill:var(--ink-1)}
.d-ink2{fill:var(--ink-2)}
.d-ink3{fill:var(--ink-3)}
.d-claim{fill:var(--claim-text)}
.d-onclaim{fill:var(--on-claim)}

/* type roles — 12-unit floor, values 13, node titles 17 */
.t-label{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:2.2px}
/* dense specimen rows: narrow by tracking, never by dropping below the 12px floor */
.t-label.is-tight{letter-spacing:1.2px}
.t-value{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;letter-spacing:1px}
.t-key  {font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:1.1px}
.t-node {font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:600}
/* single-glyph centred numerals: tracking would push text-anchor:middle off-centre */
.t-num  {font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:0}

/* surfaces — solid only. A pattern never sits beneath type. */
.d-node{fill:var(--surface);stroke:var(--stroke);stroke-width:2}
.d-node.is-claim{stroke:var(--claim)}
.d-panel{fill:var(--surface);stroke:var(--claim);stroke-width:2}

/* rules — 1-unit hairlines live on half-unit coordinates */
.d-grid{stroke:var(--grid);stroke-width:1;fill:none}
.d-axis{stroke:var(--stroke);stroke-width:1;fill:none}

/* series + connectors — pattern carries category, colour carries the claim */
.d-series{stroke:var(--line);stroke-width:2;fill:none;stroke-linecap:round}
.d-series.is-dotted{stroke-dasharray:1 5}
.d-series.is-dashed{stroke-dasharray:8 4}
.d-series.is-claim{stroke:var(--claim);stroke-width:3;stroke-dasharray:none;stroke-linejoin:round}
.d-link{stroke:var(--line);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:2 4}
.d-link.is-claim{stroke:var(--claim);stroke-dasharray:none}
.d-dot{fill:var(--line)}
.d-dot.is-claim{fill:var(--claim)}
.d-leader{stroke:var(--claim);stroke-width:1;fill:none;stroke-dasharray:3 3}
.d-ring{fill:var(--plate);stroke:var(--claim);stroke-width:2}
.d-chip{fill:var(--claim)}


/* ── promoted from the component sets, 2026-08-18 ────────────────
   Reviewed and lifted after the four component builds. Every one
   resolves through the existing tokens; none introduces a colour. */

/* stroke-only pictogram / frame line (actors) */
.d-glyph{stroke:var(--stroke);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.d-glyph.is-claim{stroke:var(--claim)}
/* layering: a foreground glyph filled with the plate colour occludes what sits behind it */
.d-glyph.is-knockout{fill:var(--plate)}

/* annotation layer — neutral by default; only the mark carrying the argument takes .is-claim */
.d-marker{fill:var(--surface);stroke:var(--stroke);stroke-width:2}
.d-marker.is-claim{stroke:var(--claim)}
.d-leader.is-quiet{stroke:var(--ink-3)}
.d-dim{stroke:var(--ink-3);stroke-width:1;fill:none}
.d-dim.is-claim{stroke:var(--claim)}
.d-bracket{stroke:var(--ink-3);stroke-width:1;fill:none}
.d-bracket.is-claim{stroke:var(--claim)}
.d-break{stroke:var(--ink-3);stroke-width:1;fill:none}
.d-note{fill:var(--surface);stroke:var(--ink-3);stroke-width:2}
.d-note.is-claim{stroke:var(--claim)}
.d-wash{fill:var(--claim);opacity:.12}
/* .d-wash is a HIGHLIGHT on a large shape. .d-fill is STATE on a small one:
   .12 over a 20-unit tile is indistinguishable from the plate. Both are drawn
   to the shape's outline, never inset. Promoted from the 100x plates
   2026-08-25; see composition.md §22. */
.d-fill{fill:var(--claim);opacity:.22}

/* ── mobile legibility, promoted 2026-08-25 ─────────────────────
   Every plate under 700px is wrapped in .pscroll with a .phint below it.
   660 is derived from the smallest label on a 686-unit canvas:
   10.5 x (660/686) = 10.1px, the floor for legible mono caps.
   Re-derive it if the canvas width or smallest label size changes.
   See composition.md §24.                                          */
.pscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.pscroll:focus-visible{outline:2px solid var(--claim);outline-offset:2px}
.phint{display:none;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
@media (max-width:700px){.pscroll>svg{min-width:660px}.phint{display:block}}

/* ── review-surface helper: pin a plate so its viewBox renders 1:1.
      Chrome = 24px padding x2 + 1px border x2 = 50px.               */
.plate.w300{width:350px;max-width:100%}
.plate.w360{width:410px;max-width:100%}
.plate.w440{width:490px;max-width:100%}
.plate.w560{width:610px;max-width:100%}
.plate.w720{width:770px;max-width:100%}

/* ── composition layer, promoted 2026-08-22 ──────────────────────
   Every rule below was paid for in review rounds on the 100x plates.
   The reasoning, and the layout rules that are not expressible as
   CSS, live in composition.md beside this file. Read it first.      */

/* plate metrics as tokens, so a generator can solve vertical centring
   instead of guessing. The visible box is the PLATE, not the viewBox:
   air_above = --ptitle-mb + content_top
   air_below = (viewBox_height - content_bottom) + --plate-pad-bottom */
.plate{--plate-pad-x:24px; --plate-pad-top:24px; --plate-pad-bottom:20px; --ptitle-mb:16px}

/* hairlines are FILLS, not strokes. A 1-unit stroke under a scaled
   viewBox splits across two device rows at half opacity: it reads as
   blurred and lighter than the 2-unit box outlines next to it. Use a
   rect at 1.2 units (1.0 can round away to nothing) with crispEdges. */
.d-hair{fill:var(--stroke)}
.d-hair.is-quiet{fill:var(--ink-3)}
.d-hair.is-claim{fill:var(--claim)}

/* the missing claim variants. Anything that can carry the argument
   needs one, or it silently falls back to neutral and reads as a bug
   in the drawing rather than a gap in the stylesheet.               */
.d-axis.is-claim{stroke:var(--claim)}
.d-grid.is-claim{stroke:var(--claim)}

/* legend type. The 12-unit floor governs labels inside the drawing;
   legend text sits below it and tightens its word spaces by half so
   each entry reads as one unit.                                     */
.t-legend{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:500;
  letter-spacing:1.6px;word-spacing:-3.9px}
/* legend swatch: 9 units square with a ONE-unit outline. Two units at
   that size eats half the swatch and reads as a solid block.        */
.d-swatch{fill:var(--surface);stroke:var(--stroke);stroke-width:1}
.d-swatch.is-claim{stroke:var(--claim)}
/* a pattern fill does not read at swatch size: one diagonal does */
.d-slash{stroke:var(--claim);stroke-width:1;fill:none}

/* build-up sets: one master geometry, earlier frames are the master
   minus elements. These are the three states, one shape.            */
.d-ghost{fill:none;stroke:var(--grid);stroke-width:1;stroke-dasharray:4 5}