/*
 * SVG graphic classes for assets/js/calc/ui/svg.js drawings (T31, D-068). Loaded by the Resources
 * calculators and by the wizard, whose lens simulation draws the same graphics (D-080).
 */

.calc-svg {
  font-family: var(--font-body);
}

.cs-text { fill: var(--color-ink); font-size: 13px; }
.cs-text--small { font-size: 12px; }
.cs-text--axis { fill: var(--color-ink-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cs-text--muted { fill: var(--color-ink-muted); }
.cs-text--strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.cs-text--eyebrow { fill: var(--color-ink-muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.cs-text--accent { fill: var(--color-accent); font-weight: 700; }
.cs-text--ok { fill: var(--color-success); font-weight: 700; }
.cs-text--bad { fill: var(--color-danger); font-weight: 700; }
.cs-text--dim { fill: var(--color-ink); font-size: 12px; }
.cs-text--on-dark { fill: var(--color-on-dark); }
/* Light outline behind labels that sit on top of drawing marks. */
.cs-halo { paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }

.cs-line { stroke: var(--color-ink); stroke-width: 1.5; fill: none; }
.cs-shape { fill: var(--color-paper-dim); stroke: var(--color-ink); stroke-width: 1.5; }
.cs-grid { stroke: var(--color-line); stroke-width: 1; }
.cs-axis { stroke: var(--color-ink-muted); stroke-width: 1; }
.cs-ref { fill: none; stroke: var(--color-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.cs-ref--ok { fill: none; stroke: var(--color-success); stroke-width: 1.5; stroke-dasharray: 5 3; }
.cs-ref--bad { fill: none; stroke: var(--color-danger); stroke-width: 1.5; stroke-dasharray: 5 3; }
.cs-marker { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.cs-crosshair { stroke: var(--color-ink-muted); stroke-width: 1; pointer-events: none; }
.cs-hit { fill: transparent; stroke: none; }
.cs-dim { stroke: var(--color-ink-muted); stroke-width: 1; fill: none; }
.cs-dim-ext { stroke: var(--color-ink-muted); stroke-width: 0.75; }
.cs-arrowhead { fill: var(--color-ink-muted); }
.cs-arrowhead--accent { fill: var(--color-accent); }
.cs-hatch-line { stroke: var(--color-accent); stroke-width: 1.2; opacity: 0.45; }

.cs-series { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cs-series--ink { fill: none; stroke: var(--color-ink); stroke-width: 2; }
.cs-series--muted { fill: none; stroke: var(--color-ink-muted); stroke-width: 2; stroke-dasharray: 5 3; }
.cs-area { fill: var(--color-accent); opacity: 0.12; stroke: none; }
.cs-dot { fill: var(--color-accent); stroke: #fff; stroke-width: 2; }

.cs-box { fill: #fff; stroke: var(--color-line); stroke-width: 1.5; }
.cs-box--accent { stroke: var(--color-accent); stroke-width: 2; }
.cs-pipe { fill: var(--color-accent); opacity: 0.8; }
.cs-bar { stroke: none; }
.cs-bar--ok { fill: var(--color-success); opacity: 0.85; }
.cs-bar--bad { fill: var(--color-ink-muted); opacity: 0.35; }

/* Optics drawings */
.cs-sensor { fill: var(--color-surface-dark); stroke: var(--color-ink); stroke-width: 1.5; }
.cs-sensor-area { fill: var(--color-paper-dim); stroke: var(--color-ink); stroke-width: 1.5; }
.cs-pixel { fill: none; stroke: var(--color-line); stroke-width: 1; }
.cs-pixel--strong { stroke: var(--color-ink-muted); stroke-opacity: 0.55; }
.cs-pixel--hit { fill: var(--color-accent); fill-opacity: 0.18; stroke: var(--color-accent); stroke-width: 1; }
.cs-image-circle { fill: var(--color-accent); fill-opacity: 0.1; stroke: var(--color-accent); stroke-width: 2; }
.cs-vignette { fill: var(--color-surface-dark); opacity: 0.82; }
.cs-crop { fill: none; stroke: var(--color-success); stroke-width: 2; stroke-dasharray: 7 4; }
.cs-lens { fill: var(--color-accent); fill-opacity: 0.12; stroke: var(--color-accent); stroke-width: 1.5; }
.cs-ray { stroke: var(--color-accent); stroke-width: 1.25; fill: none; opacity: 0.85; }
.cs-ray--muted { stroke: var(--color-ink-muted); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.cs-cone { fill: var(--color-accent); opacity: 0.08; }
.cs-object { fill: var(--color-paper-dim); stroke: var(--color-ink); stroke-width: 1.5; }
.cs-feature { fill: var(--color-accent); fill-opacity: 0.55; stroke: var(--color-accent); stroke-width: 1.5; }
.cs-zone { fill: var(--color-success); opacity: 0.16; }
.cs-zone-edge { fill: none; stroke: var(--color-success); stroke-width: 1.5; stroke-dasharray: 5 3; }
.cs-focus { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.cs-ghost { fill: var(--color-ink-muted); opacity: 0.18; }
.cs-airy-stop { stop-color: var(--color-accent); }
.cs-ring { fill: none; stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.cs-smear { fill: var(--color-accent); }