.package-workshop {
  --plate-paper: var(--surface);
  --plate-edge: color-mix(in srgb, var(--surface) 82%, var(--ink));
  --plate-field: color-mix(in srgb, var(--surface) 90%, var(--accent));
  --plate-ink: var(--ink);
  --plate-muted: var(--muted);
  --plate-rule: var(--rule);
  --plate-accent: var(--accent);
}
.package-workshop .workshop-svg.iso-svg { display: block; width: 100%; height: auto; min-width: 0; overflow: visible; }
.package-workshop .workshop-svg path,
.package-workshop .workshop-svg circle,
.package-workshop .workshop-svg rect,
.package-workshop .workshop-svg line,
.package-workshop .workshop-svg polygon { vector-effect: non-scaling-stroke; }

/* Shared plate surfaces: a literal document/archive face with a thin offset
   depth edge on its top and right, not a generic flat UI card. */
.package-workshop .plate-paper { fill: var(--plate-paper); }
.package-workshop .plate-edge { fill: var(--plate-edge); stroke: none; }
.package-workshop .plate-outline { stroke: var(--plate-rule); stroke-width: 1; fill: none; }
.package-workshop rect.plate-outline { fill: var(--plate-paper); }

/* Type: filenames and callouts live on the illustration itself. */
.package-workshop .plate-title { font: 600 17px/1.2 ui-monospace, Menlo, Consolas, monospace; fill: var(--plate-ink); }
.package-workshop .plate-label { font: 600 15px/1.3 ui-monospace, Menlo, Consolas, monospace; fill: var(--plate-ink); }
.package-workshop .plate-small { font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; fill: var(--plate-muted); }
.package-workshop .plate-code { font: 13px/1.3 ui-monospace, Menlo, Consolas, monospace; fill: var(--plate-ink); }
.package-workshop .plate-muted { fill: var(--plate-muted); }

/* Rules, leaders and terminals connect a label to the thing it describes. */
.package-workshop .plate-rule { stroke: var(--plate-rule); stroke-width: 1; fill: none; }
.package-workshop .plate-terminal { fill: var(--plate-accent); stroke: none; }
.package-workshop .plate-accent { fill: var(--plate-accent); stroke: var(--plate-accent); }
.package-workshop line.plate-accent,
.package-workshop path.plate-accent { fill: none; stroke: var(--plate-accent); stroke-width: 1.4; }

/* A highlightable field row inside a document face. */
.package-workshop .plate-field { fill: transparent; stroke: none; }
.package-workshop [data-selected-part="true"] .plate-field { fill: var(--plate-field); }
.package-workshop [data-selected-part="true"] .plate-label,
.package-workshop [data-selected-part="true"] .plate-code,
.package-workshop [data-selected-part="true"] .plate-terminal,
.package-workshop [data-selected-part="true"] .plate-accent { fill: var(--plate-accent); }
.package-workshop [data-selected-part="true"] line.plate-accent,
.package-workshop [data-selected-part="true"] path.plate-accent { stroke: var(--plate-accent); }

/* Route emphasis: the overview stays route-neutral until a stage is chosen. */
.package-workshop [data-stage][data-skipped="true"] { opacity: 0.32; }
.package-workshop [data-stage][data-active="true"] .plate-title,
.package-workshop [data-stage][data-active="true"] .plate-label { fill: var(--plate-accent); }
.package-workshop [data-stage][data-active="true"] .plate-outline,
.package-workshop [data-stage][data-active="true"] rect.plate-outline { stroke: var(--plate-accent); }

.package-workshop [data-stage],
.package-workshop .plate-title,
.package-workshop .plate-label,
.package-workshop .plate-outline,
.package-workshop .plate-field { transition: opacity 220ms ease-out, fill 220ms ease-out, stroke 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .package-workshop [data-stage],
  .package-workshop .plate-title,
  .package-workshop .plate-label,
  .package-workshop .plate-outline,
  .package-workshop .plate-field { transition: none; }
}