/* The instruments (next/dials.js draws and moves them): used by the Samanvay page, its loading screen, and the homepage's Samanvay hover. NO NUMBERS: each instrument shows its
   reading by shape alone. Colours are variables, so a light slide re-colours them (.beat[data-tone="paper"] below). The --sv-* tokens are the Samanvay palette (the owner's
   references; the lighter blue is derived: see next/samanvay.css). */
:root { --sv-navy: #111A2E; --sv-navy-2: #1A2640; --sv-navy-3: #26345A; --sv-blue: #2457D6; --sv-blue-lt: #8FA8F0; --sv-light: #F5F7FC; --sv-char: #242124; --sv-body: #C4CDE2; --sv-label: #AAB6D2; }

.sv-w { --d-track: var(--sv-navy-3); --d-arc: var(--sv-blue-lt); --d-needle: var(--sv-light); --d-tick: rgba(143, 168, 240, .38); --d-cap: var(--sv-label); --d-fill: rgba(143, 168, 240, .2);
  margin: 0; text-align: center; }
.beat[data-tone="paper"] .sv-w { --d-track: #D5DBEA; --d-arc: var(--sv-blue); --d-needle: var(--sv-char); --d-tick: rgba(36, 87, 214, .35); --d-cap: #5C5862; --d-fill: rgba(36, 87, 214, .14); }
.sv-w__g { position: relative; width: 100%; aspect-ratio: 1; }
.sv-w svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sv-w use, .sv-w path { fill: none; stroke-linecap: round; }
.sv-w figcaption { margin-top: 4px; font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--d-cap); }

/* shared strokes */
.sv-w__ticks { stroke: var(--d-tick); stroke-width: 1.2; }
.sv-w__inner { fill: none; stroke-dasharray: 1 5; }
.sv-w__track { stroke: var(--d-track); stroke-width: 7; fill: none; }
.sv-w__val { stroke: var(--d-arc); stroke-width: 7; fill: none; stroke-dasharray: 100; transition: stroke-dashoffset var(--sv-t, 1s) cubic-bezier(.4, 0, .2, 1); }
.sv-w__needle, .sv-w__rot, .sv-w__mark { transform-box: view-box; transition: transform var(--sv-t, 1s) cubic-bezier(.4, 0, .2, 1); }
.sv-w__needle { transform-origin: 60px 62px; }
.sv-w__needle path { stroke: var(--d-needle); stroke-width: 2; }
.sv-w__hub { fill: var(--d-needle); }
.sv-w__rot { transform-origin: 60px 60px; }
.sv-w__rot--h { transform-origin: 60px 78px; }

/* lamps and dots: they switch */
.sv-w__seg { stroke: var(--d-track); stroke-width: 6; stroke-linecap: butt; transition: stroke .5s ease; }
.sv-w__seg.on { stroke: var(--d-arc); }
.sv-w__dot { fill: var(--d-track); transition: fill .5s ease; }
.sv-w__dot.on { fill: var(--d-arc); }

/* a tank, and a marker on a track */
.sv-w__trk { fill: var(--d-track); }
.sv-w__fill { fill: var(--d-arc); transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--sv-t, 1s) cubic-bezier(.4, 0, .2, 1); }
.sv-w__frame { fill: none; stroke: var(--d-tick); stroke-width: 1.4; }
.sv-w__mark path { stroke: none; }
.sv-w__mark--v path { fill: var(--d-needle); }
.sv-w__band { fill: var(--d-fill); stroke: var(--d-tick); stroke-width: 1; }
.sv-w__mark--h .sv-w__stem { stroke: var(--d-needle); stroke-width: 2; fill: none; }
.sv-w__mark--h .sv-w__cap { fill: var(--d-needle); stroke: none; }
.sv-w--slider .sv-w__track { stroke-width: 4; }

/* bars */
.sv-w__base { stroke: var(--d-tick); stroke-width: 1.4; }
.sv-w__bar { fill: var(--d-arc); transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--sv-t, 1s) cubic-bezier(.4, 0, .2, 1); }
.sv-w__bar--h { transform-origin: 0 50%; }

/* radar and the line */
.sv-w__poly { fill: var(--d-fill); stroke: var(--d-arc); stroke-width: 2; stroke-linejoin: round; }
.sv-w__pt { fill: var(--d-needle); }
.sv-w__line { stroke: var(--d-arc); stroke-width: 2.4; stroke-linejoin: round; }
.sv-w path.sv-w__area { fill: var(--d-fill); stroke: none; }