/* ─────────────────────────────────────────────────────────
   diagram-system — one visual language across every style.

   Derived from seven references: a product tree with tinted
   cards and curved links; an editorial gantt on cream; a
   fan of hairline curves into one accent; a node editor on
   a dotted canvas; a dot plot with dashed averages; a
   McKinsey line chart with boxed callouts.

   What all seven actually agree on, which is less about
   colour than it first looks:

     1. NOTHING SITS ON WHITE. Every one has a tinted
        ground — warm cream, cool grey, dotted grey. White
        is what the *objects* are, not what the page is.
        That inversion is the single biggest change here.

     2. STRUCTURE IS HAIRLINE. Axes, dividers, gridlines,
        card borders: all one weight, all faint. Nothing in
        any reference has a heavy rule.

     3. OBJECTS ARE ROUNDED AND SOFT. Cards, pills, bars and
        badges all carry radius, and the two that use
        elevation use almost none of it — 1px and 2px, never
        a drop shadow you would notice on its own.

     4. EVERY LABEL IS A PAIR. A name at 600, and a quieter
        line under it carrying the number or the qualifier.
        Six of the seven do this and it is what makes them
        read as one family rather than six chart types.

     5. VALUES LIVE IN PILLS. A number that needs pointing
        at goes in a hairline capsule on the surface colour,
        never bare on the ground.

     6. NEUTRAL UNTIL IT MATTERS. Context is grey. Exactly
        one thing is the accent, and it is the thing the
        caption is about.

   What is deliberately NOT taken: the multi-hue palettes.
   Three of the references use five or more saturated hues
   to separate adjacent objects, and this site has two inks
   and one green. Every one of those hues is separating
   things that a row, a label or a position already
   separates — so the language keeps the *structure* of the
   references and holds the palette it already argued for.

   This file is a layer, not a rewrite: it sets tokens and
   then overrides the twelve styles' paint. Adopting it for
   real means folding these values back into each style's
   own stylesheet, which is a bigger job than a sample.
   ───────────────────────────────────────────────────────── */

.dg {
  /* ── Ground and surface ────────────────────────────────
     The inversion: the ground is tinted, the objects are white. Warm rather
     than neutral, from the gantt and McKinsey references — a cool grey ground
     under black text reads as a disabled state, and a warm one does not. */
  --dg-ground: #f4f3f0;
  --dg-ground-alt: #efeeea; /* alternating bands, one step down */
  --dg-surface: #ffffff;

  /* ── Ink ───────────────────────────────────────────────
     Four steps, and the gaps between them are deliberate: 60 is a sublabel,
     40 is an axis, 25 is a mark you are not meant to read individually. */
  --dg-ink: #16150f;
  --dg-ink-60: rgba(22, 21, 15, 0.6);
  --dg-ink-40: rgba(22, 21, 15, 0.4);
  --dg-ink-25: rgba(22, 21, 15, 0.25);
  --dg-ink-12: rgba(22, 21, 15, 0.12);

  /* ── Structure ─────────────────────────────────────────
     One weight for every rule in every style. If a line needs to be louder
     than this, it is not structure — it is a mark, and it belongs to a bar. */
  --dg-rule: rgba(22, 21, 15, 0.1);
  --dg-rule-strong: rgba(22, 21, 15, 0.18);
  --dg-hair: 1px;

  /* ── Accent ────────────────────────────────────────────
     The site's green, unchanged. The references would have five hues here and
     the notes above say why they are not taken. */
  --dg-accent: #60a000;
  --dg-accent-ink: #4a7c00;
  --dg-accent-wash: rgba(96, 160, 0, 0.12);
  --dg-accent-rule: rgba(96, 160, 0, 0.45);

  /* ── Shape ─────────────────────────────────────────────
     Two radii and nothing between them: a panel, and a capsule. Anything that
     is a *thing* — a node, a bar, a span, a pill — is a capsule. Anything that
     is a *frame* — a headline box, a card, a band — is a panel. */
  --dg-radius: 10px;
  --dg-pill: 100px;

  /* node-flow's own shadow, to the value. This is the separation mechanism:
     objects are filled and lifted, never outlined. A hairline border around a
     filled shape reads as a technical drawing; a shadow reads as an object,
     and the two favourites are both objects. */
  --dg-lift:
    0 1px 3px rgba(22, 21, 15, 0.1),
    0 1px 2px rgba(22, 21, 15, 0.06);

  /* ── Line ──────────────────────────────────────────────
     Three weights and no others. A connector is ink and confident; a boundary
     is a hairline; a guide is the dotted pattern step-area uses — 1 on, 4 off,
     round-capped, at 0.55. That dash is recognisable enough to mean one thing
     across every style: this line is a reference, not a measurement. */
  --dg-edge: 2px;
  --dg-guide-dash: 1 4;
  --dg-guide-opacity: 0.55;

  /* ── Port ──────────────────────────────────────────────
     Where a connector meets a thing: a white disc carrying the shadow, then a
     ring stroked inside its edge. node-flow's component exactly, and the
     clearest single mark in it — what makes a link read as plugged into a node
     rather than as pointing at one.

     Its radius is not a token, because it cannot be one. node-flow's pills
     take one port per side, so 4 always fits. bipartite stacks up to four on a
     single edge, and four 8-unit discs on one 26-unit edge touch — the
     thick-line reading its fan exists to prevent, reached from the other side.
     So the engine sets the radius from the fan and stops at node-flow's value:
     degree one and two get the real thing, and only the dense node shrinks. */

  /* ── Type ──────────────────────────────────────────────
     step-area's number, to the value. Nothing on an object is 400 weight. */
  --dg-num-size: 40px;
  --dg-num-weight: 600;
  --dg-num-track: -0.02em;
  --dg-label-weight: 600;

  color: var(--dg-ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;
}

/* ── The band ────────────────────────────────────────────
   Every figure sits on the ground, never on the page. */
.dg-band {
  background: var(--dg-ground);
  border-radius: var(--dg-radius);
  padding: 32px 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}
/* The FIGURE's svg, and only that one.
   `.dg-band svg` was wrong and wrong in a way this repo has already been
   bitten by: levels and map-tree are HTML, so their icons are <svg> elements
   *inside* the figure, and a rule written for "the drawing" sized every 24px
   glyph to the full band. The drawing is always a grandchild of the band —
   band > host div > svg — and an icon never is. */
.dg-band > div > svg,
.dg-band > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--dg-ink);
  max-width: var(--dg-figure-width, 640px);
  margin-inline: auto;
}

/* ── One user unit, one pixel ────────────────────────────
   Every style writes its type in literal pixels — 13 for a label, 16 for a
   node, 40 for a headline number, 56 for the dial's — and those numbers are
   the design. They are only true at 1:1. An SVG has no intrinsic size beyond
   its viewBox, so any cap expressed in rem silently rescales the type: a
   68rem cap on a 640-unit drawing is 1.70x, which turns a 13px caption into a
   22px one sitting next to 16px prose.

   Worse, it rescales each figure by a different amount, because the viewBox
   width is a per-figure decision — 640 normally, 700 when a bipartite needs
   the gutter, 760 when a funnel has six columns. Three figures on one page
   came out with labels at 18.6, 20.2 and 22.1 pixels, all of them meant to be
   the same size.

   So the cap is the viewBox width in pixels, and diagram-boot.js sets
   --dg-figure-width from the drawing it just made. A figure nothing measured
   falls back to 640, which is what all but three of them are. */ 
/* map-tree's icons are NOT restated here, and that is the fix rather than an
   omission. It sizes each glyph individually — 9px for the plug, 13.5 for the
   battery, 15 for the signal box, each one the Font Awesome vector's own
   aspect ratio at 12px tall. A blanket `width: auto` here overrode all of
   them, and on an <svg> `auto` does not mean "its own size", it means the
   default 300x150. The `> div >` scoping above is what protects them; nothing
   else should reach in.

   levels gets an explicit restatement because 34px is its own value and a
   second copy of it here is cheap insurance against the rule above drifting. */
.dg-band .lv-icon {
  width: 34px;
  height: 34px;
  max-width: none;
  margin-inline: 0;
}

/* levels is HTML, so it caps itself rather than through the svg rule. */
.dg-band > div > .lv-heading,
.dg-band > div > .lv-grid {
  max-width: 56rem;
  margin-inline: auto;
}
.dg-band--dots {
  background-color: var(--dg-ground);
  background-image: radial-gradient(var(--dg-ink-12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}

/* ═══════════════════════════════════════════════════════
   THE TWELVE, IN THE LANGUAGE node-flow AND step-area
   ALREADY SPEAK

   Those two were not restyled to match a system — the
   system was read off them. Both were recreated from real
   product UI, and what they share is a vocabulary the other
   ten were missing:

     OBJECTS ARE FILLED CAPSULES WITH A SHADOW.
     Never an outlined box. A hairline around a filled shape
     reads as a technical drawing; a fill plus a shadow reads
     as a thing. This is the correction to the first pass,
     which outlined everything and came out flat.

     THE ACCENT IS A SOLID FILL WITH WHITE TEXT.
     Not a wash. A wash is only ever the area under a line.

     CONNECTORS ARE INK, 2px, WITH WHITE PORTS.
     node-flow and map-tree both do this and it is what makes
     a link read as a real connection rather than a leader.

     GUIDES ARE DOTTED 1-4, ROUND-CAPPED, AT 0.55.
     step-area's pattern, used everywhere a line is a
     reference rather than a measurement.

     NUMBERS ARE 40/600 TABULAR OVER A 13px GREY CAPTION.
     step-area's pair, wherever a figure has a headline
     quantity.

     EVERY CAP IS ROUND.
   ═══════════════════════════════════════════════════════ */

/* ── Objects: filled, lifted, capsule ──────────────────── */
.dg .fn-band,
.dg .bar-bar,
.dg .st-band,
.dg .gt-bar,
.dg .ag-box {
  fill: var(--dg-surface);
  stroke: none;
  filter: drop-shadow(0 1px 2px rgba(22, 21, 15, 0.1))
    drop-shadow(0 1px 1px rgba(22, 21, 15, 0.06));
}
/* Capsule ends on anything that reads as a bar. Half the drawn height, so the
   end is a true semicircle rather than a rounded corner. */
.dg .bar-bar { rx: 8; }
.dg .gt-bar { rx: 8; }
.dg .st-band { rx: 10; }
.dg .ag-box { rx: 10; }

/* The accent: solid fill, white text. Never a wash on an object. */
.dg .st-band--defect,
.dg .gt-row--on .gt-bar {
  fill: var(--dg-accent);
  stroke: none;
}
.dg .st-band--defect + text {
  fill: #fff;
}

/* Unmeasured: the guide dash, never a fill. */
.dg .fn-gap,
.dg .st-band--open,
.dg .bar-range,
.dg .gt-bar--open {
  fill: none;
  stroke: var(--dg-ink-40);
  stroke-width: 1;
  stroke-dasharray: var(--dg-guide-dash);
  stroke-linecap: round;
  opacity: var(--dg-guide-opacity);
  filter: none;
  rx: 8;
}

/* ── Structure: boundaries hairline, guides dotted ─────── */
.dg .fn-rule,
.dg .cl-base-rule,
.dg .sa-base,
.dg .ag-frame {
  stroke: var(--dg-rule-strong);
  stroke-width: 1;
  fill: none;
}
.dg .fn-divider,
.dg .gt-divider,
.dg .bar-axis,
.dg .st-axis,
.dg .sa-guides path,
.dg .sa-lead,
.dg .bar-ref {
  stroke: var(--dg-ink-40);
  stroke-width: 1;
  stroke-dasharray: var(--dg-guide-dash);
  stroke-linecap: round;
  opacity: var(--dg-guide-opacity);
  fill: none;
}

/* ── Connectors: ink, 2px, round-capped, white ports ───── */
/* node-flow's stroke, to the value: 2px, black, round-capped. bipartite ran at
   1.5 and read as a thinner relative of the same diagram rather than the same
   diagram. A link and an edge are the same claim — these two things are
   attached — so they are the same line. */
.dg .nf-edge,
.dg .bp-link {
  stroke: var(--dg-ink);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.dg .bp-link--held,
.dg .bp-link--unknown {
  stroke: var(--dg-ink-40);
  stroke-dasharray: var(--dg-guide-dash);
  opacity: var(--dg-guide-opacity);
}
.dg .bp-link--focus {
  stroke: var(--dg-accent);
  stroke-width: 2;
}

/* Ports, as node-flow's component rather than an impression of it: a white
   disc carrying the shadow, then a ring stroked inside its edge. The radius is
   set per node by the engine — node-flow's 4 wherever the fan allows it, less
   where a node carries four links on one edge. */
.dg .bp-port-disc {
  fill: var(--dg-surface);
  stroke: none;
  filter: drop-shadow(0 1px 3px rgba(22, 21, 15, 0.1))
    drop-shadow(0 1px 2px rgba(22, 21, 15, 0.06));
}
.dg .bp-port-ring {
  fill: none;
  stroke: var(--dg-ink);
}
.dg .bp-port-disc--dim {
  filter: none;
}
.dg .bp-port-ring--dim {
  stroke: var(--dg-ink-40);
  opacity: var(--dg-guide-opacity);
}

/* step-area's dot is NOT a port and does not take this. It is the terminus of
   a leader — the end of a line that points at something — rather than the
   place two things meet. Filled, no ring, and it stays that way, because the
   distinction is the whole reason the port mark means anything. */

/* ── bipartite nodes become capsules, like node-flow's ─── */
/* node-flow's pill, with its shadow value rather than an approximation of it,
   and the capsule radius following the taller node height. */
.dg .bp-node {
  fill: var(--dg-surface);
  stroke: none;
  rx: 17;
  filter: drop-shadow(0 1px 3px rgba(22, 21, 15, 0.1))
    drop-shadow(0 1px 2px rgba(22, 21, 15, 0.06));
}
.dg .bp-node--out {
  fill: none;
  stroke: var(--dg-ink-40);
  stroke-dasharray: var(--dg-guide-dash);
  stroke-linecap: round;
  opacity: var(--dg-guide-opacity);
  filter: none;
}

/* ── Type: the label pair, everywhere ──────────────────── */
.dg .fn-t,
.dg .bar-t,
.dg .st-t,
.dg .gt-label,
.dg .cl-cat,
.dg .ag-t,
.dg .bp-t {
  fill: var(--dg-ink);
  font-weight: var(--dg-label-weight);
}
.dg .fn-t--dim,
.dg .bar-t--dim,
.dg .st-t--dim,
.dg .gt-label--dim,
.dg .ag-t--dim,
.dg .bp-t--dim,
.dg .cl-note,
.dg .dl-caption {
  fill: var(--dg-ink-60);
  font-weight: 400;
}
.dg .gt-tick,
.dg .cl-tick,
.dg .bar-axis-t,
.dg .st-axis-t,
.dg .ag-axis {
  fill: var(--dg-ink-40);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* The headline quantity, step-area's pair applied wherever there is one. */
.dg .dl-value,
.dg .ag-t--live {
  font-size: var(--dg-num-size);
  font-weight: var(--dg-num-weight);
  letter-spacing: var(--dg-num-track);
  font-variant-numeric: tabular-nums;
}
.dg .ag-t--live {
  font-size: 15px;
  fill: var(--dg-accent-ink);
}

/* ── The accent, everywhere it is a mark rather than a fill ── */
.dg .ag-live rect {
  fill: var(--dg-accent);
  rx: 1.5;
}
.dg .ag-idle rect {
  fill: var(--dg-ink-12);
  rx: 1.5;
}
.dg .dl-idle line {
  stroke: var(--dg-ink-12);
  stroke-linecap: round;
}
.dg .dl-live line {
  stroke: var(--dg-accent);
  stroke-linecap: round;
}
.dg .dl-live .dl-mid { stroke: #84b82e; }
.dg .dl-live .dl-lead { stroke: var(--dg-accent-ink); }


/* ── columns, restated as step-area's sibling ────────────
   The two make the same kind of claim: a quantity is a top edge, and the
   number sits above it. They were not drawing it the same way — step-area put
   the quantity in a 5px round-capped edge over a wash, and columns put it in a
   3px rule over a solid block, which read as a bar chart with a line on it.

   Now: the mark is step-area's edge, the gap under it is step-area's wash, and
   the block underneath goes quiet. That also fixes the thing that made the
   multi-zone figure read as bars — with the mark floating and the gap washed,
   a column with no measured base no longer looks like a filled bar to the top.
   It looks like what it is: an asserted level with nothing under it. */

/* Where the thing actually sits. Quiet, because it is the half a reader is
   meant to compare *against* rather than read first. */
.dg .cl-base {
  fill: var(--dg-ink-12);
  stroke: none;
  rx: 2;
}

/* The asserted level — step-area's edge, to the value: 5 units, round-capped.
   The engine draws it as a 3-unit rect, so the height and radius come from
   here rather than from a stroke. */
.dg .cl-mark-rule {
  fill: var(--dg-ink);
  height: 5;
  rx: 2.5;
}
.dg .cl-col--on .cl-mark-rule {
  fill: var(--dg-accent);
}

/* The distance between the two: step-area's wash, not a solid fill. This is
   the one place the system allows a wash, and the reason holds here — it is
   the area under a line rather than an object. */
.dg .cl-gap {
  fill: var(--dg-accent-wash);
  stroke: none;
}

/* The number, in step-area's pair rather than a caption inside a fill. */
.dg .cl-value {
  fill: var(--dg-ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dg .cl-value--on {
  fill: var(--dg-accent-ink);
}
.dg .cl-cat {
  fill: var(--dg-ink-60);
  font-weight: 400;
}

/* The axis, dotted like every other guide on the page. It was a column of
   plain numbers, which is the most chart-like thing in the figure. */
.dg .cl-tick {
  fill: var(--dg-ink-40);
}

/* ── step-area is already the reference; only its ink moves ── */
.dg .sa-value { font-weight: var(--dg-num-weight); }

/* ── levels: the ladder, in the same ink ───────────────── */
.dg .lv-heading { color: var(--dg-ink); }
.dg .lv-eyebrow,
.dg .lv-icon {
  color: var(--dg-accent-ink);
  stroke: var(--dg-accent-ink);
}
/* The dividers were invisible at --dg-rule. They are the only thing separating
   four columns of prose, so they take the stronger hairline. */
.dg .lv-divider { border-left-color: var(--dg-rule-strong); }
.dg .lv-summary,
.dg .lv-p { color: var(--dg-ink-60); }
.dg .lv-title {
  font-weight: var(--dg-label-weight);
  color: var(--dg-ink);
}
/* The axis LINE, not its container — `.lv-axis` is the flex row the ring, the
   line and the dot sit in, so a background on it paints a bar the full height
   of the row instead of a 1.5px rule. */
.dg .lv-axis-line { background: var(--dg-rule-strong); }

/* map-tree is not restyled. It is one of the two the language was read off,
   and its link colours are computed from the product's own signal ladder. */

/* ── The band's own figure, and nothing nested in it ───── */
/* The FIGURE's svg, and only that one.
   `.dg-band svg` was wrong and wrong in a way this repo has already been
   bitten by: levels and map-tree are HTML, so their icons are <svg> elements
   *inside* the figure, and a rule written for "the drawing" sized every 24px
   glyph to the full band. The drawing is always a grandchild of the band —
   band > host div > svg — and an icon never is. */
.dg-band > div > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--dg-ink);
  /* Capped and centred. Without this a 640-unit viewBox stretches to the full
     band on a wide screen and a funnel comes out 500px tall — the aspect ratio
     is fixed, so width is the only handle on height. The references are airy
     because of their margins, not because their figures are enormous. */
  max-width: 44rem;
  margin-inline: auto;
}
/* map-tree's icons are NOT restated here, and that is the fix rather than an
   omission. It sizes each glyph individually — 9px for the plug, 13.5 for the
   battery, 15 for the signal box, each one the Font Awesome vector's own
   aspect ratio at 12px tall. A blanket `width: auto` here overrode all of
   them, and on an <svg> `auto` does not mean "its own size", it means the
   default 300x150. The `> div >` scoping above is what protects them; nothing
   else should reach in.

   levels gets an explicit restatement because 34px is its own value and a
   second copy of it here is cheap insurance against the rule above drifting. */
.dg-band .lv-icon {
  width: 34px;
  height: 34px;
  max-width: none;
  margin-inline: 0;
}

/* levels is HTML, so it caps itself rather than through the svg rule. */
.dg-band > div > .lv-heading,
.dg-band > div > .lv-grid {
  max-width: 56rem;
  margin-inline: auto;
}
.dg-band--dots {
  background-color: var(--dg-ground);
  background-image: radial-gradient(var(--dg-ink-12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}

/* ═══════════════════════════════════════════════════════
   THE TWELVE STYLES, RESTATED IN THE LANGUAGE ABOVE
   Paint only. Every geometry number stays where it was.
   ═══════════════════════════════════════════════════════ */

/* ── Rule 5: a value that needs pointing at, in a pill ──── */
.dg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--dg-hair) solid var(--dg-rule-strong);
  border-radius: var(--dg-pill);
  background: var(--dg-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--dg-ink);
}
.dg-pill--on {
  border-color: var(--dg-accent-rule);
  background: var(--dg-accent-wash);
  color: var(--dg-accent-ink);
}