/* Office-Ready Git: static explainer diagrams (window.Diagrams, js/diagrams.js)
   Theme: dark-first Tokenova tokens (css/tokens.css). Every colour below is a token; the diagram
   "plate" is the brand ground (--paper), boxes are the brand's slate cards (--panel on --rule-strong).
   SPEC-GAP: each <svg> carries its natural width as style="--d-w:Wpx"; sizing policy lives here
   (fluid up to the natural width, never below 72% of it, so 12px labels stay >= ~9px on a phone and
   the .diagram-scroll wrapper scrolls instead). A host that wants thumbnails can set min-width:0.
   SPEC-GAP: accent-coloured strokes and arrowheads use --accent-text (the readable purple on the dark
   ground); --accent itself is only used as a fill, with --accent-ink text on it.
   Vocabulary matches css/graph.css: station dots, rings for merge commits, filled branch pills with
   --on-line text, dashed origin/* pills, the mint HEAD marker, notched release tags. */

/* ---------- figure ---------- */
.diagram {
  margin: var(--sp-5) 0;
  padding: 0;
  min-width: 0;
}
.diagram-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.diagram svg,
svg.d-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--d-w, 720px);
  min-width: calc(var(--d-w, 720px) * 0.72);
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font-body);
  overflow: visible;
}
.diagram figcaption {
  margin-top: var(--sp-2);
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.diagram figcaption b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin-right: 0.3em;
}
.diagram-missing .diagram-scroll {
  color: var(--bad);
  background: var(--bad-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
@media (max-width: 520px) {
  .diagram-scroll { padding: var(--sp-2); }
}

/* ---------- shapes ---------- */
.d-box { fill: var(--panel); stroke: var(--rule-strong); stroke-width: 1.5px; }
.d-zone { fill: var(--panel-2); stroke: var(--rule); stroke-width: 1px; }
.d-code { fill: var(--panel-2); stroke: var(--rule-strong); stroke-width: 1px; }
.d-rule { fill: none; stroke: var(--rule-strong); stroke-width: 1.25px; }
.d-edge {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-arrow {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-thick { stroke-width: 2.5px; }
.d-dash { stroke-dasharray: 5 4; stroke-linecap: butt; }
.d-stem { fill: none; stroke-width: 2px; }

/* commits: station dots, rings (merge commits), ghosts */
.d-dot { stroke: var(--paper); stroke-width: 2.5px; }
.d-in-box.d-dot { stroke: var(--panel); }
.d-ring { fill: var(--paper); stroke-width: 3.5px; }
.d-hollow { fill: var(--paper); stroke-width: 2.5px; }
.d-focus { fill: none; stroke: var(--accent-text); stroke-width: 2px; stroke-dasharray: 4 3; }
.d-ghost { opacity: 0.4; stroke-dasharray: 4 3; }
.d-ghost.d-edge { stroke-width: 3px; stroke-dasharray: 6 5; stroke-linecap: butt; }
.d-fade { opacity: 0.5; }

/* ---------- text ---------- */
.d-svg text { font-family: var(--font-body); stroke: none; }
.d-svg tspan { stroke: inherit; }
.d-label { fill: var(--ink); font-size: 13px; }
.d-small { fill: var(--ink-2); font-size: 12px; }
.d-title { fill: var(--ink); font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.d-svg .d-mono { font-family: var(--font-mono); }
.d-svg .d-12 { font-size: 12px; }
.d-b { font-weight: 700; }
.d-caps { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; fill: var(--ink-2); }
.d-svg text.d-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.d-svg text.d-halo2 { paint-order: stroke; stroke: var(--panel-2); stroke-width: 4px; stroke-linejoin: round; }
.d-strike { text-decoration: line-through; }

/* ---------- colour classes: stroke on shapes ---------- */
.d-main { stroke: var(--l-main); }
.d-feature { stroke: var(--l-feature); }
.d-team { stroke: var(--l-team); }
.d-fix { stroke: var(--l-fix); }
.d-release { stroke: var(--l-release); }
.d-remote { stroke: var(--l-remote); }
.d-ink { stroke: var(--ink-2); }
.d-accent { stroke: var(--accent-text); }
.d-muted { stroke: var(--muted); }
.d-ok { stroke: var(--ok); }
.d-bad { stroke: var(--bad); }
.d-warn { stroke: var(--warn); }

/* ... and fill on text / tspans */
text.d-main, tspan.d-main { fill: var(--l-main); }
text.d-feature, tspan.d-feature { fill: var(--l-feature); }
text.d-team, tspan.d-team { fill: var(--l-team); }
text.d-fix, tspan.d-fix { fill: var(--l-fix); }
text.d-release, tspan.d-release { fill: var(--l-release); }
text.d-accent, tspan.d-accent { fill: var(--accent-text); }
text.d-muted, tspan.d-muted { fill: var(--muted); }
text.d-ok, tspan.d-ok { fill: var(--ok); }
text.d-bad, tspan.d-bad { fill: var(--bad); }
text.d-warn, tspan.d-warn { fill: var(--warn); }

/* ---------- fills ---------- */
.d-main-fill { fill: var(--l-main); }
.d-feature-fill { fill: var(--l-feature); }
.d-team-fill { fill: var(--l-team); }
.d-fix-fill { fill: var(--l-fix); }
.d-release-fill { fill: var(--l-release); }
.d-remote-fill { fill: var(--l-remote); }
.d-ink-fill { fill: var(--ink-2); }
.d-accent-mark { fill: var(--accent-text); }
.d-accent-fill { fill: var(--accent); }
.d-muted-fill { fill: var(--muted); }
.d-ok-fill { fill: var(--ok); }
.d-bad-fill { fill: var(--bad); }
.d-warn-fill { fill: var(--warn); }
.d-ok-soft { fill: var(--ok-soft); }
.d-bad-soft { fill: var(--bad-soft); }
.d-warn-soft { fill: var(--warn-soft); }
.d-accent-soft { fill: var(--accent-soft); }
.d-tint { fill-opacity: 0.16; }
.d-signal { fill: var(--signal); stroke: var(--paper); stroke-width: 2px; }
.d-svg .d-signal-ink { fill: var(--signal-ink); }
.d-svg .d-on-line { fill: var(--on-line); }
.d-svg .d-accent-ink { fill: var(--accent-ink); }

/* lettered stations (A, B, C′) used by the teaching graphs */
.d-stn-t { font-family: var(--font-mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.d-svg .d-stn-t.d-muted { fill: var(--muted); }
.d-ghost + .d-stn-t { opacity: 0.7; }

/* ---------- pills (same look as the animated graphs) ---------- */
.d-pill-t { font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.d-pill { stroke: var(--paper); stroke-width: 2px; }
.d-pill-remote { fill: var(--paper); stroke-width: 1.5px; stroke-dasharray: 4 3; }
/* Nudge filled marks toward --ink so --on-line text keeps its contrast in both themes. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .d-pill.d-main-fill, .d-stn.d-main-fill { fill: color-mix(in srgb, var(--l-main) 88%, var(--ink)); }
  .d-pill.d-feature-fill, .d-stn.d-feature-fill { fill: color-mix(in srgb, var(--l-feature) 88%, var(--ink)); }
  .d-pill.d-team-fill, .d-stn.d-team-fill { fill: color-mix(in srgb, var(--l-team) 88%, var(--ink)); }
  .d-pill.d-fix-fill, .d-stn.d-fix-fill { fill: color-mix(in srgb, var(--l-fix) 88%, var(--ink)); }
  .d-pill.d-release-fill, .d-stn.d-release-fill { fill: color-mix(in srgb, var(--l-release) 88%, var(--ink)); }
  .d-pill.d-remote-fill { fill: color-mix(in srgb, var(--l-remote) 88%, var(--ink)); }
}