/* Warfighter Genetics · dial.css · Fig. 1, the Reticle dial (BUILD_SPEC §3, §5.1). Needs wfg.css.
   Hairlines and mono labels; red only for plotted ticks and the active marker. Load per page:
   head_extra: <link rel="stylesheet" href="/assets/css/dial.css?v={{asset_v}}"> */

.wfg-dial{position:relative;container-type:inline-size;--dial-band:var(--rule);--dial-ctl:var(--ctl-c)}
.wfg-dial .dial-tabs{margin-bottom:0}

/* Mode line */
.dial-mode{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:14px 0 0;max-width:none;font:400 12px/1.5 var(--f-mono);color:var(--fg-mid)}
.dial-mode-k{font-weight:500;color:var(--fg)}

/* Ring */
.dial-stage{margin-top:8px}
.dial-ring{position:relative;cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dial-ring svg{display:block;max-width:none;height:auto;margin-inline:auto;overflow:visible;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.dial-bars line{stroke:var(--dial-band);stroke-linecap:butt}
.dial-band path{fill:none;stroke:var(--dial-band);stroke-linecap:butt}
.dial-on path{fill:none;stroke:var(--fg-mid);stroke-opacity:.24;stroke-linecap:butt}
.dial-cut{stroke:var(--bg);stroke-width:2}
.dial-bound{stroke:var(--fg-mid);stroke-width:1}
.dial-bound.is-approx{stroke-dasharray:2 2}
.dial-grad line{stroke:var(--dial-ctl);stroke-width:1}
.dial-grad .is-wk{stroke:var(--fg-mid)}
.dial-wk text{fill:var(--fg-mid);font-size:11px;text-anchor:middle;dominant-baseline:central}
.dial-wk .dial-unit{fill:var(--fg);font-weight:500;letter-spacing:.06em;font-size:11px}
.dial-num rect{fill:var(--bg);stroke:var(--fg-mid);stroke-width:1}
.dial-num text{fill:var(--fg-mid);font-size:11px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.dial-num .is-on rect{stroke:var(--fg)}
.dial-num .is-on text{fill:var(--fg)}
.dial-tk{stroke:var(--signal);stroke-linecap:butt}
.dial-cur{stroke:var(--fg);stroke-width:1}
.dial-tk-on{stroke:var(--signal);stroke-linecap:butt}
.dial-lead circle{fill:var(--fg-mid)}
.dial-lead polyline{fill:none;stroke:var(--dial-ctl);stroke-width:1}
.dial-lead text{font-size:11.5px;fill:var(--fg-mid)}
.dial-lead .dial-l1{fill:var(--fg);font-weight:500}
.dial-lead .is-on polyline{stroke:var(--fg)}
.dial-lead .is-on circle,.dial-lead .is-on text{fill:var(--fg)}
.dial-hit{fill:transparent;stroke:none;pointer-events:all}

/* Centre: pipeline and length (copy deck "Ring center"), HTML over the SVG so type stays at true size */
.dial-center{position:absolute;margin:0;transform:translate(-50%,-50%);text-align:center;pointer-events:none;font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-wrap:balance}
.dial-c1{display:block;font-size:13px;line-height:19px;font-weight:500;color:var(--fg)}
.dial-c2{display:block;margin-top:6px;padding-top:7px;border-top:1px solid var(--line);font-size:11.5px;line-height:17px;color:var(--fg-mid)}
.is-wide .dial-c1{font-size:15px;line-height:22px}
.is-wide .dial-c2{font-size:12px;line-height:18px}
.dial-nb{white-space:nowrap}

.dial-foot{margin:6px auto 0;max-width:none;text-align:center;text-wrap:balance;font:400 12px/1.5 var(--f-mono);color:var(--fg-mid)}
.dial-foot a{color:inherit;text-decoration-color:var(--ctl-c)}
.dial-foot a:hover{color:var(--fg)}

/* Phase key (compact ring only; the wide ring labels its phases with leaders) */
.dial-key{display:grid;gap:6px;margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none;font:400 12.5px/20px var(--f-mono);color:var(--fg-mid)}
.dial-key li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:baseline}
.dial-key .cn{color:inherit}
.dial-key li.is-on{color:var(--fg)}
.is-wide .dial-key{display:none}

/* Readout under the ring */
.dial-body{display:grid;gap:28px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
@container (min-width:760px){.dial-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.dial-callout{width:100%;min-height:44px;padding:8px 0;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer;font-family:var(--f-mono)}
.dial-callout-t{flex:1 1 auto;min-width:0}
.dial-x{position:relative;flex:none;width:11px;height:11px;align-self:center;transform:translateY(0)}
.dial-x::before,.dial-x::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:var(--fg-mid)}
.dial-x::after{transform:rotate(90deg)}
.dial-callout[aria-expanded=true] .dial-x::after{transform:rotate(0)}
.dial-callout:hover .dial-x::before,.dial-callout:hover .dial-x::after{background:var(--fg)}
.dial-detail{padding:6px 0 4px 26px;border-left:0}
.dial-detail p{margin:0 0 10px;font-size:15px;line-height:23px}
.dial-detail p:last-child{margin-bottom:0}
.dial-wc{font-weight:500}
.dial-step{display:flex;align-items:center;gap:14px;margin-top:16px}
.dial-step .btn{min-height:40px;padding:0 14px;font-size:12px}
.dial-pos{font:400 12px/1.5 var(--f-mono);color:var(--fg-mid);min-width:11ch;text-align:center}

/* Legend */
.dial-legend{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.dial-legend li{display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;align-items:start;font-size:14px;line-height:22px}
.dial-g{display:block;overflow:visible}
.dial-g text{fill:var(--fg-mid);font:500 11px/1 var(--f-mono);text-anchor:middle}
.dial-g-tk{stroke:var(--signal);stroke-width:1.5}
.dial-g-ref{fill:none;stroke:var(--fg-mid);stroke-width:1;stroke-dasharray:2 2}
.dial-g-band{stroke:var(--dial-band);stroke-width:5}
.dial-g-grad{stroke:var(--ctl-c);stroke-width:1}
.dial-fn{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:20px;color:var(--fg-mid)}
.dial-count{margin:14px 0 0;font:500 12.5px/1.5 var(--f-mono);color:var(--fg)}

/* Text equivalent: every tick as text for screen readers (CONTRACTS), visually hidden (wfg.css .vh) */
.dial-note{margin:28px 0 0;font-size:14px;line-height:22px}
.dial-fail{margin:0}

/* Draw once: the band sweeps clockwise in 700 ms, ticks are drawn as it passes. Set by dial.js. */
.wfg-dial[data-draw=armed] .dial-arc,.wfg-dial[data-draw=armed] .dial-tk{stroke-dasharray:100 100;stroke-dashoffset:100}
.wfg-dial[data-draw=armed] .dial-act{visibility:hidden}
.wfg-dial[data-draw=run] .dial-arc{stroke-dasharray:100 100;animation:dial-draw var(--t,175ms) linear var(--d,0ms) both}
.wfg-dial[data-draw=run] .dial-tk{stroke-dasharray:100 100;animation:dial-draw 80ms linear var(--d,0ms) both}
.wfg-dial[data-draw=run] .dial-act{animation:dial-show 1ms linear 700ms both}
@keyframes dial-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes dial-show{from{visibility:hidden}to{visibility:visible}}
@media(prefers-reduced-motion:reduce){
.wfg-dial .dial-arc,.wfg-dial .dial-tk{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
.wfg-dial .dial-act{visibility:visible!important;animation:none!important}
}

@media print{
.wfg-dial .dial-step,.wfg-dial .dial-tabs,.wfg-dial .dial-hit{display:none!important}
.wfg-dial .dial-arc,.wfg-dial .dial-tk{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
.wfg-dial .dial-act{visibility:visible!important}
.dial-detail[hidden]{display:none}
}