/* /css/plates.css: SVG classes for static plates and widgets (§2.3, §4.6). All colors come from these classes;
   plates never carry hex values or style="" attributes. Rocket strokes are always dashed 6 4; invariants are a
   double stroke (draw the path twice: .p-inv, then .p-inv-core on top); light carries an arrowhead. */

figure.plate { margin: var(--s-6) 0; }
/* Plates keep their authored size: give the <svg> a width attribute (e.g. width="320") to fix its scale, so
   15px labels stay 15px; without one it fills the column. It never exceeds the column. */
figure.plate > svg:not([width]), .plate-svg:not([width]) { width: 100%; }
figure.plate > svg, .plate-svg {
  display: block;
  max-width: min(100%, var(--measure));
  height: auto;
  margin: 0 auto;
  font-family: var(--font-sans);
  overflow: visible;
}
figure.plate.square > svg, .plate-svg.square { max-width: min(100%, 520px); aspect-ratio: 1; }
figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.plate-no {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  margin-right: .5em;
  font-variant-numeric: tabular-nums;
}

/* Paper */
.p-paper { fill: var(--surface); stroke: none; }
.p-grid-minor { fill: none; stroke: var(--grid-minor); stroke-width: .75; vector-effect: non-scaling-stroke; }
.p-grid-major { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Frames */
.p-axis-lab { fill: none; stroke: var(--c-lab); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.p-axis-rkt { fill: none; stroke: var(--c-rocket); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.p-arrow-lab { fill: none; stroke: var(--c-lab); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-arrow-rkt { fill: none; stroke: var(--c-rocket); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Light: gold, 45°, with an open mid-arrow (use marker-mid or a separate .p-light-arrow) */
.p-light { fill: none; stroke: var(--c-light); stroke-width: 1.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-light-arrow { fill: none; stroke: var(--c-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Invariants: 2px teal with a 0.75px --bg core, drawn as two paths. */
.p-inv { fill: none; stroke: var(--c-inv); stroke-width: 2.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-inv-core { fill: none; stroke: var(--surface); stroke-width: .75; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Worldlines */
.p-world { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.p-world-lab { fill: none; stroke: var(--c-lab); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.p-world-rkt { fill: none; stroke: var(--c-rocket); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.p-tick { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-tick-lab { fill: none; stroke: var(--c-lab); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-tick-rkt { fill: none; stroke: var(--c-rocket); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-now-lab { fill: none; stroke: var(--c-lab); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.p-now-rkt { fill: none; stroke: var(--c-rocket); stroke-width: 1.25; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }

/* Events: r = 5 dot with a 2px --bg halo; label up and right */
.p-event { fill: var(--ink); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.p-event-lab { fill: var(--c-lab); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.p-event-rkt { fill: var(--c-rocket); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.p-event-light { fill: var(--c-light); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.p-event-hollow { fill: var(--surface); stroke: var(--ink); stroke-width: 1.75; }

/* Labels */
.p-label { fill: var(--ink); font-family: var(--font-sans); font-size: 13px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.p-label-var { fill: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 15px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.p-label-lab { fill: var(--c-lab); }
.p-label-rkt { fill: var(--c-rocket); }
.p-label-light { fill: var(--c-light-text); }
.p-label-inv { fill: var(--c-inv); }
.p-label-frame { font-family: var(--font-sans); font-size: 11px; font-variant: small-caps; letter-spacing: .06em; text-transform: lowercase; }
.p-annot { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.p-leader { fill: none; stroke: var(--ink-muted); stroke-width: .75; vector-effect: non-scaling-stroke; }
.p-leader-end { fill: var(--ink-muted); stroke: none; }

/* Regions */
.p-fill-timelike { fill: var(--c-timelike); stroke: none; }
.p-fill-spacelike { fill: var(--c-spacelike); stroke: none; }
.p-fill-lab { fill: var(--tint-lab); stroke: none; }
.p-fill-rkt { fill: var(--tint-rocket); stroke: none; }
.p-fill-inv { fill: var(--tint-inv); stroke: none; }
.p-fill-you { fill: var(--tint-you); stroke: none; }

/* Shapes and accents */
.p-ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-ink-fill { fill: var(--ink); stroke: none; }
.p-muted { fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.p-dashed { stroke-dasharray: 6 4; }
.p-bad { fill: none; stroke: var(--c-bad); stroke-width: 2; stroke-linecap: round; }
.p-ok { fill: none; stroke: var(--c-ok); stroke-width: 2; stroke-linecap: round; }
.p-you { fill: none; stroke: var(--c-you); stroke-width: 2; stroke-linecap: round; }
.p-surface { fill: var(--surface); stroke: var(--rule); stroke-width: 1; }
.p-cast { color: var(--ink); }
.p-cast-lab { color: var(--c-lab); }
.p-cast-rkt { color: var(--c-rocket); }
.p-cast-light { color: var(--c-light); }
.p-cast-you { color: var(--c-you); }