:root{
  color-scheme:light;
  --paper:#f8f5ed;
  --paper-warm:#fffaf2;
  --panel:#fffefd;
  --panel-tint:#fbf6eb;
  --ink:#1d1914;
  --muted:#6f6557;
  --faint:#8a8070;
  --rule:#d8d0c0;
  --rule-strong:#b9aa8f;
  --accent:#7b1f1f;
  --accent-2:#164c78;
  --code:#f5efe2;
  --shadow:rgba(70,52,33,.12);
  --shot-speed-gradient:linear-gradient(to right,#102865,#16834b 30%,#eed543 55%,#eb882c 75%,#b31d24);
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --radius-small:3px;
  --control-height:2rem;
  --instrument-size:8rem;
  --numeric-width:5.5rem;
  --focus-width:.125rem;
  --stale-opacity:.58;
  --disabled-opacity:.45;
  --type-ui:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --type-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-size:16px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.7),transparent 22rem),linear-gradient(90deg,rgba(120,90,40,.035),transparent 12%,transparent 88%,rgba(120,90,40,.035));z-index:-1}
header{max-width:min(100%,1600px);margin:0 auto;padding:1.45rem 1.25rem 1rem;border-bottom:1px solid var(--rule)}
h1{margin:.1rem 0 .35rem;font-size:clamp(1.6rem,3vw,2.35rem);font-weight:400;letter-spacing:-.035em;line-height:1.05}
.subtitle{color:var(--muted);margin:0;overflow-wrap:anywhere}
main{width:min(100%,1600px);margin:0 auto;padding:1.25rem}
.toc{display:flex;flex-wrap:wrap;gap:.38rem;margin:1rem 0 1.35rem}
.toc a{color:var(--accent);background:var(--paper-warm);border:1px solid var(--rule);border-radius:3px;padding:.2rem .48rem;text-decoration:none;font-size:.9rem;overflow-wrap:anywhere;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.toc a:hover,.toc a:focus-visible{border-color:var(--accent);background:#fff4df;outline:none}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:3px;margin:0 0 1.35rem;overflow:visible;box-shadow:0 2px 14px var(--shadow)}
.card h2{margin:0;padding:.8rem 1rem .65rem;border-bottom:1px solid var(--rule);font-size:1.35rem;font-weight:400;letter-spacing:-.018em;overflow-wrap:anywhere}
.card-overview{display:grid;grid-template-columns:max-content minmax(14rem,22rem);gap:.75rem;padding:.75rem;align-items:start;justify-content:start}
.card-overview-full{grid-template-columns:minmax(0,1fr)}
.visual-stack{display:grid;grid-template-columns:repeat(2,6.8rem);gap:.45rem;min-width:0}
.visual-panel{display:grid;grid-template-rows:6.35rem auto;align-items:center;justify-items:center;min-width:0;background:var(--panel-tint);border:1px solid var(--rule);border-radius:3px;padding:.2rem;color:var(--ink)}
.visual-panel svg{display:block;width:6.35rem;height:6.35rem;max-width:none;object-fit:contain;margin:0 auto}
.visual-caption{display:flex;align-items:center;justify-content:center;gap:.3rem;margin:.3rem 0 0;font-size:.8rem;line-height:1.2;color:var(--muted)}
.visual-caption strong{color:var(--ink);font-size:.82rem;font-variant:small-caps;font-weight:600;letter-spacing:.035em}
.tooltip,.wasm-app button.tooltip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:1.5rem;min-height:1.5rem;padding:.15rem;vertical-align:middle;border:0;background:transparent;color:var(--faint);font:inherit;cursor:help;text-decoration:none;outline-offset:2px}
.tooltip-mark{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid currentColor;border-radius:50%;opacity:.7;font:600 .65rem/1 var(--type-ui)}
.tooltip:hover .tooltip-mark,.tooltip:focus-visible .tooltip-mark{color:var(--accent);opacity:1}
.tooltip:focus-visible{outline:var(--focus-width) solid var(--accent);border-radius:50%}
.tooltip-panel{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(22rem,calc(100vw - 1rem));max-height:calc(100svh - 1rem);overflow:auto;overflow-wrap:anywhere;padding:.75rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);box-shadow:0 8px 24px #48341c2e;color:var(--ink);font:400 .85rem/1.45 var(--type-ui);text-align:left;white-space:pre-line}
.loading-spinner,.solve-form[aria-busy="true"] .solve-status::before,#quick-solve[aria-busy="true"]::before{content:"";display:inline-block;box-sizing:border-box;flex:0 0 auto;width:1.1em;height:1.1em;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:busy-spin .8s linear infinite}
@keyframes busy-spin{to{transform:rotate(1turn)}}
/* One spinner, beside the progress text; the button keeps its size and place. */
.solve-form[aria-busy="true"] .solve-status{display:flex;align-items:center;gap:.6rem}
@media(prefers-reduced-motion:reduce){.loading-spinner,.solve-form[aria-busy="true"] .solve-status::before,#quick-solve[aria-busy="true"]::before{animation:none}}
.info-panel{min-width:0;background:var(--panel-tint);border:1px solid var(--rule);border-radius:3px;padding:.5rem .65rem;color:var(--ink)}
.shot-data-panel{align-self:stretch;font-size:.9rem}
.info-table{display:grid;margin:0;gap:0}
.info-row{display:grid;grid-template-columns:minmax(6.75rem,.34fr) minmax(0,1fr);gap:.65rem;padding:.24rem 0;border-bottom:1px solid var(--rule);align-items:start}
.info-row:first-child{padding-top:0}
.info-row:last-child{padding-bottom:0;border-bottom:0}
.info-row dt{color:var(--faint);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-family:ui-sans-serif,system-ui,sans-serif}
.info-row dd{margin:0;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.scenario-context{margin:.65rem 0 0;padding:.55rem 0 0;border-top:1px solid var(--rule)}
.scenario-context summary{font-size:.82rem}
figure{min-width:0;margin:0;background:#f3ead8;padding:.75rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:2px;background:#fdfbf6}
.svg-viewer{display:grid;gap:.55rem;min-width:0}
.viewer-controls{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem 1.5rem;color:var(--muted);font:.85rem/1.4 var(--type-ui)}
.viewer-controls button{background:var(--paper-warm);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px;padding:.25rem .5rem;cursor:pointer}
.viewer-controls button:hover,.viewer-controls button:focus-visible{border-color:var(--accent);outline:none}
.viewer-controls label{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;overflow-wrap:anywhere}
.svg-frame{overflow:hidden;border-radius:2px;background:#fdfbf6;touch-action:pan-y;min-width:0;border:1px solid var(--rule)}
.svg-frame svg{display:block;max-width:100%;width:auto;height:auto;margin:0 auto;touch-action:pan-y}
.svg-frame .event-marker[data-event-label]{cursor:help}
.svg-frame svg.dragging{cursor:grabbing}
.viewer-control-group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;border:0;min-width:0}
.viewer-control-group legend,.playback-graphics legend{padding:0 0 .3rem;color:var(--muted);font-size:.75rem;font-weight:600}
.viewer-controls select,.ball-inspector select{min-height:2.25rem;max-width:100%;padding:.3rem .5rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit}
.viewer-layer-details{padding:0;font-size:.8rem}
.viewer-layer-details[open]{display:grid;gap:.5rem}
[data-viewer][data-interaction-mode="pan"] .svg-frame,[data-viewer][data-interaction-mode="pan"] .svg-frame svg{touch-action:none;cursor:grab}
.wasm-app .svg-frame{position:relative}
.table-toolbar{position:absolute;top:.45rem;right:.45rem;display:flex;align-items:center;gap:.15rem;padding:.15rem;border-radius:4px;background:#1d1914b3;opacity:.8}
.svg-frame:hover .table-toolbar,.table-toolbar:focus-within{opacity:1}
.table-toolbar button,.table-toolbar select{display:inline-grid;place-items:center;min-width:1.65rem;min-height:1.65rem;padding:0 .3rem;border:0;border-radius:3px;background:var(--paper-warm);color:var(--ink);font:600 .75rem/1 var(--type-ui);cursor:pointer}
.table-toolbar button:hover,.table-toolbar select:hover,.table-toolbar :focus-visible{background:#fff;outline:2px solid var(--accent-2);outline-offset:1px}
.wasm-app .svg-frame .table-toolbar svg,.table-toolbar svg{display:block;width:1rem;height:1rem;max-width:none;max-height:none;margin:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-inspect-ball]{pointer-events:visiblePainted;cursor:pointer;touch-action:none}
[data-inspect-ball]:focus-visible{outline:2px solid #ffec63;outline-offset:3px}
.playback-panel{display:grid;gap:.45rem;background:var(--paper-warm);border:1px solid var(--rule);border-radius:3px;padding:.5rem;color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif;font-size:.9rem}
.playback-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem .8rem}
.playback-controls button{display:inline-grid;place-items:center;min-height:2.25rem;background:var(--panel);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px;padding:.35rem .6rem;cursor:pointer;font:600 .8rem/1.2 var(--type-ui)}
.playback-controls button:hover,.playback-controls button:focus-visible{border-color:var(--accent);outline:none}
.playback-controls input[type="range"]{flex:1 1 16rem;accent-color:var(--accent)}
.playback-time{min-width:9rem;color:var(--ink);font-variant-numeric:tabular-nums}
.playback-event{flex:1 1 18rem;min-width:min(100%,18rem);color:var(--ink);overflow-wrap:anywhere}
.playback-event[data-event-state="hit"]{color:var(--accent);font-weight:700}
.playback-speed-control,.playback-trace-control{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink);white-space:nowrap}
.playback-speed-control input[type="range"]{flex:0 1 7rem;min-width:6rem}.playback-trace-control input[type="checkbox"]{accent-color:var(--accent)}
.playback-speed-value{min-width:3.2rem;font-variant-numeric:tabular-nums}
.playback-trace-control[hidden]{display:none}
.playback-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.playback-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
/* Play, Pause and Replay share one width and a left-anchored icon so neither
   the icon nor the buttons after it move when the label changes. */
.playback-actions [data-playback-play]{min-width:5.5rem;justify-content:flex-start;background:var(--accent-2);border-color:var(--accent-2);color:white}
.playback-icon{display:block;width:1rem;height:1rem;flex:none}
 [data-playback-play][aria-pressed="false"] .playback-icon-pause,
 [data-playback-play][aria-pressed="true"] .playback-icon-play{display:none}
.playback-graphics{display:flex;flex-wrap:wrap;gap:.5rem 1rem;min-width:0;border:0;padding:0;margin:0}
.playback-graphics label{display:flex;align-items:center;gap:.35rem;color:var(--ink)}
.playback-graphics input{accent-color:var(--accent-2)}
.playback-shot-status,.playback-timeline{grid-column:1 / -1}
.playback-details{grid-column:1 / -1;min-width:0;border-top:1px solid var(--rule);padding-top:.4rem}
.playback-options,.playback-landmark-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.playback-options{font-size:.78rem}
.playback-options>label{display:inline-flex;align-items:center;gap:.35rem}
.playback-options .playback-graphics legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.playback-landmark-actions{margin:0}
.playback-inspector-dialog{width:min(42rem,calc(100vw - 2rem));max-height:calc(100svh - 2rem);overflow:auto;padding:1rem;border:1px solid var(--rule-strong);border-radius:6px;background:var(--panel);color:var(--ink);box-shadow:0 12px 50px #0005}
.playback-inspector-dialog::backdrop{background:#10222a88}
.playback-inspector-dialog .ball-inspector{grid-template-columns:minmax(0,1fr);margin-bottom:1rem}
.playback-inspector-dialog h3{margin:0}
.playback-inspector-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.player-dialog #view-details-open,.player-dialog [data-playback-inspector-open]{display:none}
.playback-shot-status:empty{display:none}
.playback-timeline>label{display:grid;gap:.2rem;color:var(--muted);font-size:.8rem}
/* A shotless layout keeps view actions, but has no playback controls to show. */
.playback-panel[data-playback-empty] :is(.playback-actions,.playback-speed-control,.playback-time,.playback-timeline,.playback-details){display:none}
/* The ticker keeps its line when there is nothing to report. */
.playback-event{min-height:1.4em}
.playback-event:empty{visibility:hidden}
.playback-timeline input[type="range"]{width:100%;min-height:2rem;margin:0;accent-color:var(--accent-2)}
.playback-landmark-list{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:thin;padding:.25rem 0}
.playback-landmark-list button{flex:0 0 auto;font-size:.75rem;white-space:nowrap}
.playback-landmark-shot{border-bottom:3px solid var(--accent-2)!important}
.playback-landmark-list .event-current,.playback-landmark-navigation [aria-pressed="true"]{background:var(--accent-2);border-color:var(--accent-2);color:white}
.playback-landmark-navigation{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.3rem;font-size:.75rem}
.playback-landmark-navigation[hidden]{display:none}
.playback-controls button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.playback-event{font-size:.8rem;text-align:right}
.ball-inspector{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem 1rem;padding:.65rem;border:1px solid var(--rule);border-radius:var(--radius-small);background:var(--panel)}
.ball-inspector>label{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:600}
.ball-inspector-state{margin:0;color:var(--ink);font-size:.85rem;overflow-wrap:anywhere}
.ball-inspector-diagnostics{padding:0;font-size:.8rem}
.ball-inspector-diagnostics[open]{grid-column:1 / -1}
.ball-inspector-diagnostics dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem 1rem;margin:.5rem 0 0;font-variant-numeric:tabular-nums}
.ball-inspector-diagnostics dt{color:var(--muted)}
.ball-inspector-diagnostics dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
@media(max-width:720px){.playback-controls{grid-template-columns:minmax(0,1fr)}.playback-event{text-align:left;min-width:0}.ball-inspector{grid-template-columns:minmax(0,1fr)}.playback-speed-control{flex-wrap:wrap}.viewer-control-group{width:100%}}
@media(pointer:coarse){.viewer-controls button,.viewer-controls select,.playback-controls button,.ball-inspector select{min-height:2.75rem}}
.playback-help{margin:0;color:var(--muted);font-size:.84rem;line-height:1.35}
.playback-balls{pointer-events:none}
.playback-ball-label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.playback-ball-label.ball-number-label{font-family:Arial,sans-serif;font-weight:700}
.playback-heading{stroke:#111;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.playback-compare-ball{fill-opacity:.28;stroke:#111;stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:3 2.5}
.playback-speed-label{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;fill:#fff;stroke:#10151a;stroke-width:3px;stroke-linejoin:round;paint-order:stroke;pointer-events:none}
.playback-loop{align-items:center}
.previous-attempt{opacity:.45}
.previous-attempt .smooth-polyline{stroke-dasharray:7 6}
.playback-loop-range{color:var(--muted);font-variant-numeric:tabular-nums}
.downloads{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0 0;font-size:.9rem;color:var(--muted)}
.downloads a{overflow-wrap:anywhere}
details{padding:.85rem 1rem 1rem;min-width:0}
summary{cursor:pointer;color:var(--accent);font-weight:600}
pre{white-space:pre-wrap;overflow:auto;max-height:28rem;background:var(--code);border:1px solid var(--rule);border-radius:3px;padding:.85rem;color:var(--ink);overflow-wrap:anywhere}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;background:rgba(122,31,31,.06);border-radius:2px;padding:0 .12em}
pre code{background:transparent;padding:0}
.notes{margin:.25rem 0 0;padding-left:1.1rem;overflow-wrap:anywhere}
.notes li{margin:.16rem 0}
.event-log{padding-top:1rem}
.event-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.65rem}
.event-list li{min-width:0;background:#fffaf1;border:1px solid var(--rule);border-radius:3px;padding:.65rem;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.35rem .6rem;align-items:start}
.event-list li.event-current{border-color:var(--accent);box-shadow:inset .22rem 0 0 var(--accent)}
.event-badge{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;color:#fffaf1;background:var(--accent);border-radius:999px;padding:.05rem .45rem;cursor:help}
.event-time{color:var(--muted);white-space:nowrap}
.event-summary{min-width:0;overflow-wrap:anywhere}
.event-payload{grid-column:1 / -1;margin:.2rem 0 0;max-height:9rem;font-size:.82rem}
.cue-tip-marker{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.power-meter-needle,.power-meter-needle-halo,.power-meter-hub{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.power-meter-label{font-weight:800}.power-meter-label-medium{fill:#5a4300}.power-meter-label-redline{fill:#501212}
a{color:var(--accent)}
a:hover,a:focus-visible{color:#501212}
.gallery-controls{margin:0 0 1rem;padding:.75rem .85rem;background:var(--panel);border:1px solid var(--rule);border-radius:3px;box-shadow:0 2px 12px var(--shadow)}
.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.55rem;align-items:end}
.gallery-controls label{display:grid;gap:.2rem;color:var(--muted);font:700 .74rem/1.25 ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.055em}
.gallery-controls input,.gallery-controls select,.gallery-controls button,.viewer-controls select{width:100%;min-height:2rem;background:var(--paper-warm);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px;padding:.25rem .45rem;font:400 .9rem/1.2 ui-sans-serif,system-ui,sans-serif;text-transform:none;letter-spacing:0}
.gallery-controls button{cursor:pointer;font-weight:700}
.gallery-controls button:hover,.gallery-controls button:focus-visible,.gallery-controls input:focus-visible,.gallery-controls select:focus-visible,.viewer-controls select:focus-visible{border-color:var(--accent);outline:none}
.scenario-filter-count{margin:.55rem 0 0;color:var(--muted);font:.9rem/1.35 ui-sans-serif,system-ui,sans-serif}
.scenario-filter-count[data-filtered="true"]{color:var(--accent);font-weight:700}
.card[hidden],.toc a[hidden]{display:none!important}
@media (max-width:720px){header{padding:.95rem .85rem}main{padding:.75rem}.toc{gap:.35rem}.card{border-radius:2px}.card h2{padding:.75rem}.card-overview{grid-template-columns:1fr;padding:.65rem}.info-row{grid-template-columns:1fr;gap:.12rem}.info-row dd{text-align:left}figure{padding:.65rem}.viewer-controls{align-items:stretch}.viewer-controls button,.viewer-controls label{flex:1 1 auto;justify-content:center}}


/* Shared card workspace used by validation reports and the Wasm editor. */
.card-workspace{display:grid;grid-template-columns:1fr;gap:.85rem;padding:.85rem;align-items:start}
.card-workspace>.card-overview{display:grid;grid-template-columns:max-content minmax(14rem,22rem);gap:.75rem;padding:0;align-items:start;justify-content:start}
.card-workspace>.card-overview-full{grid-template-columns:1fr}
.card-workspace>.svg-viewer{margin:0;align-self:stretch}
.card-workspace>.event-log,.card-workspace>.scenario-details{grid-column:1 / -1;padding:.15rem 0 0}
.card-workspace figure,.card-workspace.svg-viewer{border:1px solid var(--rule);border-radius:3px}
.svg-frame svg[data-orientation="clockwise"]{width:100%;max-height:min(90vh,72rem)}
body.wasm-app main{width:100%;padding:.25rem .5rem 1rem}
/* The page's top-right corner: a compact language picker with a globe pictograph. */
.page-header{display:flex;justify-content:flex-end;padding:.35rem .5rem 0}
.locale-picker{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font:600 .78rem/1.2 var(--type-ui)}
.locale-icon{flex:none;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5}
.locale-picker select{min-height:1.75rem;padding:.15rem .35rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper-warm);color:var(--ink);font:inherit;cursor:pointer}
.locale-picker select:hover{border-color:var(--accent)}
.locale-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.locale-picker select{min-height:2.75rem}}
body.is-image-drop::after{content:"Drop a table photo to import it";position:fixed;inset:.75rem;z-index:50;display:grid;place-items:center;border:3px dashed var(--accent);border-radius:var(--radius-small);background:#fffdf6cc;color:var(--ink);font-size:1.3rem;font-weight:700;pointer-events:none}
html:lang(ja) body.is-image-drop::after{content:"台の写真をドロップして取り込みます"}
.wasm-app .app-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;align-items:start}
.wasm-app .app-shell>*{min-width:0}
.wasm-app .card{margin:0}
/* Scrolling the table into view leaves a little room above it, whole or fractional header. */
.wasm-app .wasm-report-card{scroll-margin-top:.5rem}
.wasm-app .workspace-panel{border:0;border-radius:var(--radius-small);background:var(--panel-tint)}
.wasm-app .workspace-panel .panel-body,.wasm-app .editor-panel .panel-body{display:grid;gap:.6rem;padding:0}
.wasm-app .workspace-panel>.panel-body{gap:0}
.wasm-app .editor-panel .panel-body{padding-top:.6rem}
.wasm-app .editor-workspace{display:grid;grid-template-columns:minmax(22rem,2fr) minmax(0,3fr);gap:.75rem;align-items:start}
.wasm-app .editor-workspace>*{min-width:0}
.wasm-app .workspace-tools{padding:0;background:var(--panel-tint)}
.wasm-app .workspace-tools .layout-settings{border-top:0}
.wasm-app .workspace-tools .snapshot-controls{grid-template-columns:minmax(0,1fr) auto}
.wasm-app .dsl-panel{padding:.75rem}
.wasm-app .dsl-panel textarea{field-sizing:content;min-height:9rem;max-height:70svh}
.wasm-app .dsl-reference{padding:0;font:.8rem/1.35 var(--type-ui)}
.wasm-app .dsl-reference summary{font-size:.78rem}
.wasm-app .dsl-reference .dsl-help{margin-top:.4rem}
@media(max-width:900px){.wasm-app .editor-workspace{grid-template-columns:minmax(0,1fr)}}
.editor-panel textarea{display:block;width:100%;min-height:clamp(12rem,28vh,20rem);resize:vertical;border:1px solid var(--rule);border-radius:3px;outline:0;padding:.75rem;background:#fffdf7;color:var(--ink);font:.88rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
.editor-panel textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px rgba(123,31,31,.12)}
.status{min-height:1.4rem;padding:0;border:0;background:transparent;color:var(--muted);font:.85rem/1.35 ui-sans-serif,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.status.ok{color:#1f6b31}.status.error{color:#8d1515}
.status.safe{color:#26658a}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem .65rem;border-bottom:1px solid var(--rule)}
.panel-heading-copy{min-width:0}
.panel-heading-copy p,.dsl-help{margin:.2rem 0 0;color:var(--muted);font:.8rem/1.35 ui-sans-serif,system-ui,sans-serif}
.panel-eyebrow{display:block;margin-bottom:.12rem;color:var(--accent-2);font:.68rem/1.2 ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.panel-header h2{margin:0;font-size:1.15rem;font-weight:400;letter-spacing:-.018em;overflow-wrap:anywhere}.controls{display:flex;gap:.45rem;flex-wrap:wrap}.controls button,.downloads button{background:var(--paper-warm);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px;padding:.32rem .6rem;cursor:pointer;font:700 .9rem/1.2 ui-sans-serif,system-ui,sans-serif}.controls button:hover,.controls button:focus-visible,.downloads button:hover,.downloads button:focus-visible{border-color:var(--accent);outline:none}.controls button:disabled,.downloads button:disabled{opacity:.45;cursor:not-allowed}
.empty-preview{margin:0;padding:2rem;color:var(--muted);text-align:center;line-height:1.45}
.wasm-app .wasm-report-card .card-workspace{padding:.4rem;gap:.4rem;grid-template-columns:minmax(0,1fr)}
.wasm-app .wasm-report-card .info-panel{align-self:start}
.wasm-app .wasm-report-card .svg-viewer{min-height:0;padding:0;border:0;background:transparent;grid-template-columns:minmax(0,1fr);gap:.4rem}
.wasm-app .wasm-report-card .svg-frame{min-height:0;display:grid;place-items:center;border:0;background:transparent}
.wasm-app .svg-frame svg,.wasm-app .svg-frame svg[data-orientation="clockwise"]{width:100%;height:auto;max-height:56svh;object-fit:contain}
@media (max-width:1180px){.app-shell{grid-template-columns:1fr}.editor-panel textarea{min-height:14rem}.card-workspace{grid-template-columns:1fr}.card-workspace>.event-log{grid-column:auto}.svg-frame svg[data-orientation="clockwise"]{max-height:none}}
@media (max-width:520px){.dsl-panel .panel-header{align-items:flex-start;flex-direction:column}.dsl-panel .controls{width:100%}.dsl-panel .controls button{flex:1 1 auto}}
@media (max-width:900px){.card-workspace>.card-overview{grid-template-columns:1fr}.visual-stack{grid-template-columns:repeat(2,minmax(6.4rem,1fr))}}
@media (max-width:520px){.visual-stack{grid-template-columns:1fr}.visual-panel svg{height:6.2rem}}

/* Editable shot instruments and their separate, read-only simulation result. */
.visually-hidden{position:absolute!important;width:.0625rem!important;height:.0625rem!important;padding:0!important;margin:-.0625rem!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.shot-settings{display:grid;gap:.6rem;min-width:0}
.wasm-app .shot-controls{--instrument-size:6rem;--numeric-width:6rem;container:shot-controls / inline-size;display:grid;gap:.85rem;padding:.85rem;border:0;border-radius:var(--radius-small);background:var(--panel-tint);font:400 .875rem/1.4 var(--type-ui)}
.wasm-app .shot-instrument-grid [data-instrument="tip"]{--instrument-size:8rem}
/* Title, render status, then the context readout pinned right: the status is
   always in flow, so its text appearing never moves the readout's help button. */
.wasm-app .shot-controls-heading{display:flex;flex-wrap:nowrap;align-items:center;gap:.3rem .75rem;min-width:0}
.wasm-app .shot-controls-heading h3,.wasm-app .layout-settings h3,.wasm-app .shot-history h3,.wasm-app .solve-heading h3,.wasm-app .panel-header h2,.wasm-app .robust-search-result-heading h4{margin:0;font:600 1rem/1.2 var(--type-ui);letter-spacing:normal}
.wasm-app .shot-controls-heading h3{flex:none}
.wasm-app .shot-controls-heading .shot-context-readout{order:2;flex:0 1 auto;min-width:0;margin-left:auto;justify-content:flex-end}
.wasm-app .shot-controls-heading .shot-context-readout>span{min-width:0;color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wasm-app .shot-controls-heading .shot-context-readout>button{flex:none}
.instrument-render-status{order:1;flex:1 1 8rem;min-width:0;min-height:1.4em;margin:0;color:var(--muted);font-size:.8rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.instrument-render-status[data-kind="pending"]{color:var(--accent-2)}
.instrument-render-status[data-kind="error"]{color:var(--accent)}
.wasm-app .shot-instrument-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:1rem;align-items:start}
.wasm-app .shot-instrument{min-width:0;margin:0;padding:.6rem 0 0;border:0;border-top:1px solid var(--rule);background:transparent}
.wasm-app .shot-instrument legend,.wasm-app .object-contact-instrument>figcaption{padding:0 .35rem 0 0;color:var(--ink);font:700 .875rem/1.4 var(--type-ui)}
.wasm-app .heading-instrument-layout,.wasm-app .tip-instrument-layout,.wasm-app .object-contact-layout{display:grid;grid-template-columns:var(--instrument-size) minmax(0,1fr);gap:.8rem;align-items:center;margin-top:.35rem}
.wasm-app .heading-instrument-layout{grid-template-columns:minmax(0,1fr)}
.wasm-app .instrument-fields,.wasm-app .tip-axis-controls{display:grid;width:100%;gap:.25rem;min-width:0}
.numeric-field,.axis-control{display:grid;gap:var(--space-1);min-width:0;color:var(--muted);font-weight:600}
.unit-input{display:flex;align-items:center;gap:var(--space-1);width:max-content;max-width:100%;color:var(--muted);font-weight:700;white-space:nowrap}
.unit-input input[type="number"]{width:var(--numeric-width)}
.wasm-app #speed-input{width:var(--numeric-width)}
.shot-controls input[type="number"]{min-height:2.5rem;max-width:100%;border:1px solid var(--rule-strong);border-radius:var(--radius-small);padding:.4rem .5rem;background:var(--paper-warm);color:var(--ink);font:400 1rem/1.2 var(--type-ui);font-variant-numeric:tabular-nums}
.shot-controls input[type="range"]{width:100%;min-height:var(--control-height);margin:0;accent-color:var(--accent)}
.shot-controls input:focus-visible,.shot-controls button:focus-visible,.controls button:focus-visible,.downloads button:focus-visible,.viewer-controls button:focus-visible,.playback-controls button:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--space-1);border-color:var(--accent)}
.shot-controls input:invalid{border-color:var(--accent)}
.shot-controls input:disabled,.shot-controls button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.instrument-help{margin:.5rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.45}
.tip-pad{display:block;width:var(--instrument-size);height:var(--instrument-size);border-radius:50%;cursor:crosshair;touch-action:none;user-select:none}
.tip-ball{fill:var(--panel);stroke:var(--rule-strong);stroke-width:.025}
.tip-axes{fill:none;stroke:var(--rule);stroke-width:.018}
.tip-pad .tip-axes{stroke:var(--accent-2);stroke-opacity:.25;stroke-width:.012}
.tip-limit-ring{fill:none;stroke:var(--accent-2);stroke-width:.025;stroke-dasharray:.07 .05}
.tip-pointer{fill:var(--accent-2);stroke:#fff;stroke-width:.04;filter:drop-shadow(0 .015px .02px #183b4660)}
.wasm-app .axis-control{grid-template-columns:minmax(0,1fr) auto;gap:0 .25rem;align-items:center}
.wasm-app .axis-control>label:first-child{grid-column:1;grid-row:1}
.wasm-app .axis-control>input[type="range"]{grid-column:1 / -1;grid-row:2;min-height:1.5rem}
.wasm-app .axis-control>.unit-input{grid-column:2;grid-row:1}
.wasm-app .axis-control input[type="number"]{width:var(--numeric-width)}
.wasm-app .shot-instrument-linear{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;align-content:start}
.wasm-app .shot-instrument-linear legend,.wasm-app .instrument-label-row,.wasm-app .shot-instrument-linear>input[type="range"],.wasm-app .shot-instrument-linear>.numeric-field{grid-column:1}
.wasm-app .shot-instrument-linear>.numeric-field{display:block}
.wasm-app [data-instrument="speed"]{grid-template-columns:minmax(0,1fr) auto;gap:.2rem .4rem}
.wasm-app [data-instrument="speed"]>.instrument-label-row{grid-column:1;grid-row:1}
.wasm-app [data-instrument="speed"]>.numeric-field{grid-column:2;grid-row:1}
.wasm-app #speed-input{width:3.5rem;min-height:1.75rem;padding:.2rem .3rem;font-size:.8rem}
.wasm-app #speed-hint{font-size:.75rem}
.wasm-app #speed-range{grid-column:1 / -1;grid-row:2;appearance:none;background:transparent;min-height:1.75rem;cursor:pointer}
#speed-range::-webkit-slider-runnable-track{height:.5rem;border-radius:1rem;background:var(--shot-speed-gradient)}
#speed-range::-moz-range-track{height:.5rem;border-radius:1rem;background:var(--shot-speed-gradient)}
#speed-range::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;margin-top:-.25rem;border:2px solid white;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
#speed-range::-moz-range-thumb{width:.75rem;height:.75rem;border:2px solid white;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.wasm-app .shot-instrument-grid>[data-instrument="elevation"]{grid-template-columns:minmax(0,1fr);gap:.3rem;align-items:center}
.wasm-app .shot-instrument-grid>[data-instrument="elevation"]>#elevation-control{grid-column:1;min-width:0}
.wasm-app .shot-instrument-grid>[data-instrument="elevation"]>.elevation-fields{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
.wasm-app .shot-instrument-grid #elevation-input{width:3.5rem;min-height:1.75rem;padding:.2rem .3rem;font-size:.8rem}
.wasm-app .shot-instrument-grid #elevation-reset{min-height:1.75rem;padding:.2rem .4rem;font-size:.7rem}
.instrument-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.instrument-label-row output{color:var(--accent-2);font-size:.85rem;font-weight:700}
.preview-heading{display:flex;min-width:0;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.preview-heading h2{padding:0;border:0}
.preview-state{color:var(--accent);font:700 .72rem/1.2 var(--type-ui);letter-spacing:.05em;text-transform:uppercase}
.preview-state.error{display:block;padding:.5rem .75rem;background:var(--paper-warm);border-bottom:1px solid var(--rule);font-size:.85rem;font-weight:400;line-height:1.4;letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}
.wasm-report-card.is-stale .card-workspace{opacity:var(--stale-opacity)}
.wasm-report-card[data-source-invalid="true"] .svg-frame{opacity:var(--stale-opacity);filter:saturate(.35)}

.wasm-app .object-contact-pad{display:block;width:var(--instrument-size);height:var(--instrument-size);max-width:100%}
.wasm-app .object-contact-pointer{fill:var(--accent-2);stroke:var(--panel);stroke-width:.035}
.wasm-app #object-contact-pointer[hidden]{display:none}
.wasm-app .object-contact-summary{margin:0;color:var(--ink);font-size:.875rem;line-height:1.45;overflow-wrap:anywhere}
.wasm-app .shot-controls[data-readonly="true"] input:disabled,.wasm-app .shot-controls[data-readonly="true"] button:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);cursor:default}
.wasm-app .shot-controls[data-readonly="true"] .tip-pad{cursor:default}
.wasm-app details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wasm-app .shot-history{margin:0}
.wasm-app .layout-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin-top:-.3rem;font:.8rem/1.35 var(--type-ui)}
.layout-actions button:not(.tooltip){min-height:1.75rem;padding:.2rem .55rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper-warm);color:var(--ink);font:600 .75rem/1.2 var(--type-ui);cursor:pointer}
.layout-actions button:not(.tooltip):hover{border-color:var(--accent)}
.layout-actions .history-undo{margin-left:auto;gap:.3rem}
.wasm-app .dsl-panel .panel-header{padding:0 0 .6rem}
.wasm-app .layout-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.wasm-app .app-shell>.wasm-report-card .shot-settings{gap:0}
/* Label above control. Each field starts at its longest option's width, so every
   choice reads in full, grows to share the row, and wraps to a new row rather than
   truncating. Fields never exceed the row, so a long option cannot widen the column. */
.wasm-app .layout-table-fields{display:flex;flex-wrap:wrap;align-items:end;gap:.5rem;padding:.5rem .5rem 0;border-radius:var(--radius-small) var(--radius-small) 0 0;background:var(--panel-tint);font:400 .82rem/1.4 var(--type-ui)}
.wasm-app .layout-table-fields label{display:grid;flex:1 1 auto;gap:.15rem;min-width:0;max-width:100%;color:var(--muted);font-weight:600}
.wasm-app .layout-table-fields select{width:100%;text-overflow:ellipsis}
.player-dialog .layout-table-fields{display:none}
.layout-import-actions>button:not(.text-button){flex:1 1 auto}
.text-button,.layout-settings .text-button{min-height:0;padding:.1rem .2rem;border:0;background:transparent;color:var(--muted);text-decoration:underline;font:inherit;cursor:pointer}
.text-button:hover{color:var(--accent)}
.layout-note,.layout-settings .layout-note{margin:0;color:var(--muted);font-size:.78rem;line-height:1.35}
.layout-move{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:.45rem}
.layout-move label{display:grid;gap:.25rem;min-width:0}
.wasm-app .controls>*{max-width:100%;min-width:0}
.wasm-app .controls label{overflow-wrap:anywhere}
.table-context{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem .75rem;font:.8rem/1.4 var(--type-ui)}
.table-context strong{color:var(--accent-2)}
/* The state text absorbs its own changes so the actions beside it hold still. */
.table-state-heading,.shot-context-readout{display:flex;align-items:center;gap:.25rem;min-width:0}
.table-state-heading{flex:1 1 auto}
.table-state-heading>strong{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.instrument-expand,.instrument-action,#return-to-source,.instrument-dialog-heading button{min-height:2.25rem;padding:.35rem .6rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper-warm);color:var(--ink);font:600 .8rem/1.3 var(--type-ui);cursor:pointer}
/* Simulate (drafts only) and Return share the last slot, so neither moves the row.
   Return only shows when it would do something; its slot stays reserved. */
#simulate-draft,#return-to-source{min-width:10rem}
#return-to-source:disabled{visibility:hidden}
.instrument-expand{display:inline-grid;place-items:center;vertical-align:middle;width:1.5rem;min-height:1.5rem;margin-left:.25rem;padding:.15rem;border-color:transparent;background:transparent;color:var(--muted)}
.instrument-expand svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#player-fullscreen{display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
#player-fullscreen svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.table-context [hidden]{display:none}
.instrument-expand:hover{color:var(--accent);border-color:var(--rule)}
@media(pointer:coarse){.instrument-expand{min-width:2.75rem}}
.tip-map{position:relative;padding:1.1rem 0}
.tip-direction{position:absolute;font-size:.7rem;font-weight:700;color:var(--muted)}
.tip-direction-follow{top:0;left:50%;transform:translateX(-50%)}
.tip-direction-draw{bottom:0;left:50%;transform:translateX(-50%)}
.cue-elevation{width:100%;min-width:0;touch-action:none}
.cue-elevation-graphic{display:block;width:100%;height:auto;aspect-ratio:320 / 120;border-radius:var(--radius-small);background:#f3f6f5}
/* The graphic mounts with the app module; its slot is reserved from the first frame. */
#elevation-control:empty{aspect-ratio:320 / 120}
.cue-elevation-level{fill:none;stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:4 4}
.cue-elevation-cloth{fill:#377d70;stroke:#225a51;stroke-width:1}
.cue-elevation-rail{fill:#5b3a2a;stroke:#3d251a;stroke-width:1}
.cue-elevation-ball{fill:#f7f2e4;stroke:#a59b82;stroke-width:1}
.cue-elevation-ball-shine{fill:#fff;fill-opacity:.7}
.cue-elevation-arc{fill:none;stroke:var(--accent-2);stroke-width:1.5;stroke-dasharray:3 2}
.cue-elevation-badge{fill:var(--accent-2);font:700 13px var(--type-ui);pointer-events:none}
.cue-elevation[data-obstructed="true"] .cue-elevation-badge{fill:#8d1515}
.cue-elevation-blocked{fill:#8d1515;fill-opacity:.1;stroke:#8d1515;stroke-opacity:.4;stroke-width:1;stroke-dasharray:2 3}
.cue-elevation-blocked[hidden]{display:none}
/* The note keeps its line while hidden, so guidance appearing never moves the graphic. */
.cue-elevation-note{min-height:1.4em;margin:0 0 .15rem;color:var(--muted);font:11px/1.4 var(--type-ui)}
.cue-elevation-note[hidden]{display:block;visibility:hidden}
.cue-elevation[data-obstructed="true"] .cue-elevation-note{color:#8d1515}
.cue-elevation-handle{fill:none;stroke:transparent;stroke-width:26;stroke-linecap:round;touch-action:none;cursor:ns-resize;outline:none}
.cue-elevation-handle:active{cursor:grabbing}
.cue-elevation-handle:focus-visible{stroke:var(--accent);stroke-opacity:.18}
.cue-elevation[data-readonly="true"] .cue-elevation-handle{pointer-events:none;cursor:default}
#elevation-mode{display:inline-block;min-width:3.6rem;min-height:1.4em;padding:.05rem .45rem;border:1px solid var(--rule-strong);border-radius:1rem;color:var(--muted);font:600 .68rem/1.4 var(--type-ui);letter-spacing:.02em;text-align:center}
/* The badge keeps its slot when hidden so the elevation field never slides. */
#elevation-mode[hidden]{display:inline-block;visibility:hidden}
#elevation-mode:empty::before{content:"\a0"}
.elevation-fields{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.shot-results{border-top:1px solid var(--rule);padding-top:.75rem}
.shot-results>h3{margin:0 0 .5rem;font-size:.85rem;font-weight:600}
.shot-results>h3 span{margin-left:.5rem;font-weight:400;color:var(--muted)}
.shot-results[hidden]{display:none}
.object-contact-instrument{margin:0;padding:.6rem .75rem;background:var(--panel);border:1px solid var(--rule);border-radius:3px}
.wasm-app .object-contact-layout{--instrument-size:4.5rem;max-width:45rem}
.instrument-dialog{width:min(44rem,calc(100vw - 2rem));max-height:calc(100svh - 2rem);overflow:auto;padding:1rem;border:1px solid var(--rule-strong);border-radius:6px;background:var(--panel);color:var(--ink);box-shadow:0 12px 50px #0005}
.instrument-dialog::backdrop{background:#10222a88}
.instrument-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.instrument-dialog-heading h3{margin:0;font-size:1.1rem}
.instrument-dialog-body{--instrument-size:14rem;--numeric-width:14rem}
.instrument-dialog .instrument-expand{display:none}
.instrument-dialog .shot-instrument{padding-top:.75rem}
.wasm-app .instrument-dialog .heading-instrument-layout{grid-template-columns:1fr;justify-items:center}
/* The heading in degrees is a precision control: only the expanded aim editor shows it,
   inside the picker below the offset slider, caption left and field right. */
.wasm-app .shot-instrument-grid .heading-field-row{display:none}
.wasm-app .heading-field-row .numeric-field{grid-template-columns:auto auto;justify-content:space-between;align-items:center}
.instrument-dialog .cue-elevation-graphic{max-height:55svh}
#layout-selection{min-width:0;margin:0;padding:0;border:0}
#layout-selection legend{padding:0;color:var(--muted);font-weight:600}
#layout-selection-options{display:flex;flex-wrap:wrap;gap:.25rem .75rem}
#layout-selection-options label{display:flex;align-items:center;gap:.4rem;min-height:2.5rem}
@container shot-controls (max-width:66rem){.wasm-app .shot-instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}}
@container shot-controls (max-width:35rem){
  .wasm-app .shot-instrument-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "speed" "tip" "elevation";gap:.6rem}
  .wasm-app [data-instrument="heading"]{grid-area:heading}
  .wasm-app [data-instrument="tip"]{grid-area:tip}
  .wasm-app [data-instrument="speed"]{grid-area:speed}
  .wasm-app [data-instrument="elevation"]{grid-area:elevation}
  .wasm-app .instrument-dialog .tip-instrument-layout{grid-template-columns:1fr;justify-items:center}
  .wasm-app .instrument-dialog .tip-map{width:var(--instrument-size)}
}
@media (max-width:720px){body.wasm-app main{padding:.4rem .4rem .75rem}.wasm-app .layout-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.wasm-app .layout-fields form{grid-column:1 / -1}.wasm-app .shot-controls{padding:.75rem}.wasm-app .shot-controls-heading{flex-wrap:wrap}.wasm-app .shot-controls-heading .instrument-render-status{order:3;flex-basis:100%}.table-context{justify-content:flex-start}.wasm-app .svg-frame svg,.wasm-app .svg-frame svg[data-orientation="clockwise"]{max-height:56svh}}

/* Tip axes follow the cue-ball view: side above, follow/draw to the right. The height
   column shares the outer rows, so its caption, value and slider line up with the side
   caption, the side slider and the ball. */
.wasm-app .tip-instrument-layout{grid-template-columns:var(--instrument-size) 5rem;justify-content:center;gap:.25rem .6rem;align-items:center}
.wasm-app .tip-instrument-layout .tip-map{grid-column:1;grid-row:3}
.wasm-app .tip-axis-controls,.wasm-app .tip-axis-controls .axis-control{display:contents}
.wasm-app .tip-side-control>label:first-child{grid-column:1;grid-row:1;justify-self:start;font-size:.75rem}
.wasm-app .tip-side-control>.unit-input{grid-column:1;grid-row:1;justify-self:end}
.wasm-app .tip-axis-controls .tip-height-control{display:grid;grid-column:2;grid-row:1 / 4;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;align-self:stretch;justify-items:center}
.wasm-app .tip-height-control>label:first-child{grid-column:1;grid-row:1;font-size:.75rem}
.wasm-app .tip-height-control>.unit-input{grid-column:1;grid-row:2}
.wasm-app .tip-axis-controls input[type="number"]{width:4rem;min-height:2rem;padding:.2rem .3rem;font-size:.85rem}
.wasm-app #tip-side-range{grid-column:1;grid-row:2;width:var(--instrument-size);min-height:1.5rem}
.wasm-app #tip-height-range{grid-column:1;grid-row:3;writing-mode:vertical-lr;direction:rtl;width:1.5rem;height:100%;min-height:0;justify-self:center}
.wasm-app #tip-center{grid-column:1 / -1;grid-row:4;justify-self:center;min-height:1.75rem;padding:.2rem .5rem;font-size:.75rem}
@media (pointer:coarse){.wasm-app .shot-controls input[type="range"],.wasm-app .shot-controls button,.instrument-dialog-heading button,#return-to-source{min-height:2.75rem}.tooltip,.wasm-app button.tooltip{min-width:2.75rem;min-height:2.75rem}}

/* Skip links stay clipped until focused, then show at the top left of the page. */
.skip-links a{position:absolute;left:.5rem;top:.5rem;z-index:10;padding:.4rem .7rem;border-radius:4px;background:var(--paper-warm);color:var(--accent);font:600 .9rem/1.2 var(--type-ui)}
.skip-links a:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Keep the table and shot settings ahead of optional analysis on every screen. */
.wasm-app .app-shell>.wasm-report-card{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;align-items:start;padding:.4rem .2rem}
.wasm-app .app-shell>.wasm-report-card>.table-context{grid-column:1 / -1;grid-row:2}
.wasm-app .app-shell>.wasm-report-card :is(.contact-picker-row,#preview,.card-workspace,.svg-viewer){display:contents}
.wasm-app .app-shell>.wasm-report-card :is(.svg-frame,.empty-preview){grid-column:1;grid-row:1;min-width:0;align-self:start}
/* The placeholder reserves the table's own aspect ratio, so the first render,
   a reset and a failure notice all keep the page below the table in place.
   The default matches the sample carom table (1880 × 1022) until a real ratio
   is recorded. The tolerance picker wraps #preview in its row, so no child combinator. */
.wasm-app .app-shell>.wasm-report-card #preview>.empty-preview{display:grid;place-content:center;gap:.5rem;width:100%;aspect-ratio:var(--table-aspect, 1880 / 1022);max-height:56svh}
/* While loading, also hold the playback controls' height (measured on the sample
   layout per breakpoint) so the table actions do not jump down when they arrive. */
.wasm-app .app-shell>.wasm-report-card #preview>.empty-preview.loading-state{margin-bottom:var(--boot-playback-reserve, 22rem)}
@media (min-width:720px){.wasm-app .app-shell>.wasm-report-card{--boot-playback-reserve:14rem}}
@media (min-width:1000px){.wasm-app .app-shell>.wasm-report-card{--boot-playback-reserve:9.9rem}}
/* The shortcut legend joins the playback controls; until then it would share the
   table-state row and draw over "Loading simulator". */
.wasm-app .app-shell>.wasm-report-card>.keyboard-legend{visibility:hidden}
.wasm-app .app-shell>.wasm-report-card .shot-settings{grid-column:1;grid-row:3}
.wasm-app .app-shell>.wasm-report-card .playback-panel{grid-column:1 / -1;grid-row:2}
.wasm-app .app-shell>.wasm-report-card :is(.report-secondary,.contact-picker,.shot-results,.shot-uncertainty-panel,.shot-tolerance-panel,.position-runway-panel){grid-column:1 / -1}
/* Compact shortcut help stays beside the table actions. */
.keyboard-legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin:0;color:var(--muted);font:400 .78rem/1.5 var(--type-ui)}
.keyboard-legend .letter-shortcuts{display:inline-flex;align-items:center;gap:.3rem;color:var(--ink)}
.playback-controls>.keyboard-legend{grid-column:1 / -1;order:7;flex:1 1 100%}
/* Transient notices stack downward from the top right, over everything, and take
   no page layout: nothing on the page may move because a notice appeared. */
.notice-stack:popover-open{position:fixed;inset:.6rem .6rem auto auto;left:auto;bottom:auto;display:grid;gap:.35rem;justify-items:end;width:max-content;max-width:min(22rem,calc(100vw - 1.2rem));margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none}
.notice{display:flex;align-items:baseline;gap:.4rem;max-width:100%;padding:.35rem .6rem;border:1px solid var(--rule-strong);border-radius:4px;background:var(--paper-warm);box-shadow:0 2px 6px #1d191433;color:var(--ink);font:400 .8rem/1.35 var(--type-ui);overflow-wrap:anywhere}
.notice-count{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.notice[data-leaving="true"]{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .notice{animation:notice-in .12s ease-out}
  .notice[data-leaving="true"]{transition:opacity .3s ease-out}
  @keyframes notice-in{from{opacity:0;transform:translateY(-.3rem)}to{opacity:1;transform:none}}
}
.wasm-app .playback-panel{gap:.3rem;padding:.25rem 0 0;border:0;background:transparent}
/* Reserve the state column at every width, so pending text cannot move actions. */
.wasm-app .playback-controls>.table-context>.table-state-heading{flex:0 0 10rem}
.wasm-app .playback-timeline>label{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem}
.wasm-app .playback-details{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;padding:0;border-top:0}
.wasm-app :is(.playback-options,.playback-graphics){column-gap:.75rem}
.wasm-app .playback-details>.playback-landmarks{flex:1 1 100%}
.wasm-app .playback-details>.playback-event{flex:1 1 12rem;min-width:0;text-align:left}
.live-webcam-panel{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:.55rem;max-width:30rem;margin:.6rem 0;padding:.65rem;border:1px solid var(--rule);background:var(--paper-warm);font-size:.85rem;line-height:1.4}
.live-webcam-panel video{display:block;width:100%;max-height:12rem;object-fit:contain;background:#111;transform:none}
.live-webcam-preview{position:relative;overflow:hidden}
.live-webcam-preview video{max-height:none}
#live-webcam-crop-outline{position:absolute;inset:0;border:2px solid #ffda63;box-shadow:0 0 0 100vmax #0009;pointer-events:none}
.live-webcam-crop-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.live-webcam-crop-inputs input{width:4.5rem;max-width:100%}
.live-webcam-panel fieldset{min-width:0;padding:.5rem;border:1px solid var(--rule)}
.live-webcam-panel p,.live-webcam-near-table p{margin:0;overflow-wrap:anywhere}
.live-webcam-panel label{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.live-webcam-panel select{max-width:100%;min-width:0}
.live-webcam-panel .controls,.live-webcam-near-table .controls{display:flex;flex-wrap:wrap;gap:.4rem}
.live-webcam-near-table{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;flex:1 1 100%;gap:.4rem;padding:.55rem;border:1px solid var(--rule);background:var(--paper-warm);font-size:.85rem}
.live-webcam-prompt{display:grid;gap:.35rem;padding:.5rem;border:2px solid var(--accent-2);border-radius:var(--radius-small);background:var(--panel)}
.live-webcam-prompt #live-webcam-prompt-title{font-weight:700}
.live-webcam-panel[hidden],.live-webcam-panel [hidden],.live-webcam-near-table[hidden],.live-webcam-prompt[hidden]{display:none}
@media(max-width:520px){.live-webcam-panel .controls button,.live-webcam-near-table .controls button{flex:1 1 auto;min-height:2.5rem}}
@media (min-width:1000px){
  /* Rows size to the table and playback; the spanning settings column pushes
     its surplus into the empty third row rather than between them. */
  .wasm-app .app-shell>.wasm-report-card{grid-template-columns:minmax(0,1fr) 20rem;grid-template-rows:auto auto minmax(0,1fr);gap:.5rem;padding:.5rem .3rem}
  .wasm-app .app-shell>.wasm-report-card .svg-frame>svg{width:100%;height:auto;max-height:calc(100svh - 12.5rem);object-position:left top}
  .wasm-app .app-shell>.wasm-report-card .shot-settings{grid-column:2;grid-row:1 / 4}
  .wasm-app .app-shell>.wasm-report-card .shot-controls{--numeric-width:4.5rem;padding:.5rem;gap:.5rem}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument{padding-top:.45rem}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:.5rem}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid>.shot-instrument{grid-area:auto}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact{grid-template-columns:minmax(0,1fr) auto;gap:.35rem .5rem}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact>*{grid-column:1 / -1}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact .contact-picker-target-label{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.4rem}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact [data-contact-selector]{min-height:2rem;padding:.2rem 1.6rem .2rem .4rem}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact .contact-picker-readouts{grid-column:1;justify-content:start;min-width:0}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact .contact-picker-status{display:block;min-height:1.5rem}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact .contact-picker-status:empty{border-color:transparent;background:transparent}
  .wasm-app .app-shell>.wasm-report-card .contact-picker-compact .contact-picker-range-label{grid-column:2;justify-self:end}
  .wasm-app .playback-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
  .wasm-app .playback-actions{order:0;flex:0 0 auto}
  .wasm-app .playback-shot-status{order:1;flex:1 1 auto;min-width:0}
  /* A zero-height break keeps transport and status on the first line even when
     the scrubber would fit beside them. */
  .wasm-app .playback-controls::before{content:"";order:2;flex:0 0 100%;height:0}
  /* The time readout sits at the end of the scrubbing line after the speed:
     a presentation-hold suffix only shortens the timeline beside it. */
  .wasm-app .playback-timeline{order:3;flex:1 1 12rem;min-width:0}
  .wasm-app .playback-speed-control{order:4;flex:0 0 auto}
  .wasm-app .playback-time{order:5;flex:0 1 auto;min-width:5.5rem;max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wasm-app .playback-details{order:6;flex:1 1 100%}
  .wasm-app .playback-controls>.table-context{order:7;flex:1 1 auto;justify-content:flex-start}
  .wasm-app .playback-controls>.keyboard-legend{order:8;flex:0 0 auto;margin-left:auto}
  .wasm-app .app-shell>.wasm-report-card :is(.playback-panel,.keyboard-legend),.wasm-app .app-shell>.wasm-report-card>.table-context{grid-column:1;grid-row:2}
}
/* Short, wide viewports trade table width for a two-up settings column so every
   instrument stays above the fold. The tall aim and cue-strike pads share the
   first row, the short speed and elevation strips the second. */
@media (min-width:1280px) and (max-height:1060px){
  .wasm-app .app-shell>.wasm-report-card{grid-template-columns:minmax(0,1fr) 32rem}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"heading tip" "speed elevation";gap:.5rem .9rem}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid>[data-instrument="heading"]{grid-area:heading}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid>[data-instrument="tip"]{grid-area:tip}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid>[data-instrument="speed"]{grid-area:speed}
  .wasm-app .app-shell>.wasm-report-card .shot-instrument-grid>[data-instrument="elevation"]{grid-area:elevation}
}

/* One bounded solve surface; game-specific metrics retain their own presentation. */
.solve{container:solve / inline-size;display:grid;gap:var(--space-2);padding:var(--space-3);font:400 .85rem/1.4 var(--type-ui)}
.solve-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.solve-heading h3,.robust-search-result-heading h4{margin:0;color:var(--ink);font:600 1rem/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.012em}
.solve-heading p{margin:var(--space-1) 0 0;color:var(--muted);font-size:.78rem}
.solve-heading>span{flex:0 0 auto;color:var(--accent-2);font-size:.7rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
.solve-form{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-2) var(--space-3)}
.solve-form>:is(p,details,#solve-pool-options){flex:1 1 100%}
.solve-fields,.solve-actions{display:contents}
.solve-fields>label{flex:0 1 13rem}
/* Button pickers for who is shooting: the carom cue ball, the eight-ball group. */
.turn-picker{flex:0 1 10rem;display:grid;gap:.3rem;align-content:start}
.turn-picker-wide{flex-basis:17rem}
.turn-picker[hidden]{display:none}
.turn-picker>.controls{display:flex;gap:.3rem}
.turn-picker button{flex:1;white-space:nowrap}
.turn-picker button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fffaf2}
.solve-actions>button{min-width:6rem}
.solve-actions>.solve-autoplay{align-self:center;margin-top:1.2rem}
.solve-actions>.solve-status{flex:1 1 14rem;align-self:center;margin-top:1.2rem;display:flex;align-items:center;height:4.05rem;overflow-y:auto}/* Fixed, not min: the status text changes with every source edit, and a row that grows moves every control below this panel. Three lines hold the longest shipped message; anything longer scrolls rather than reflowing the page. */
.solve-form label{display:grid;gap:var(--space-1);min-width:0;color:var(--muted);font-size:.85rem;font-weight:600}
.solve-form label[hidden]{display:none}
.solve-form input:not([type="checkbox"]),.solve-form select,.solve-form button,.candidate-select-button{min-height:var(--control-height);border:1px solid var(--rule-strong);border-radius:var(--radius-small);padding:var(--space-1) var(--space-2);background:var(--paper-warm);color:var(--ink);font:600 .82rem/1.2 var(--type-ui)}
.solve-form input:not([type="checkbox"]),.solve-form select{width:100%;font-weight:400;font-variant-numeric:tabular-nums}
.solve-form button,.candidate-select-button{cursor:pointer}
#solve-button,#quick-solve,#image-import-apply,#image-import-estimate{border-color:var(--accent);background:var(--accent);color:#fffaf2}
/* Sized for "Solving…", its spinner and the S hint, so the row never shifts when a solve starts. */
#quick-solve{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:8rem}
#quick-solve[aria-busy="true"]{opacity:1;cursor:progress}
/* Visible shortcut hints: instrument legends (1–4), table Solve (S) and draft Simulate (Space). */
.shortcut-key,#quick-solve::after,#simulate-draft::after{display:inline-block;min-width:1.1em;margin:0 .25rem;padding:0 .25em;border:1px solid currentColor;border-radius:3px;font:600 .68rem/1.35 var(--type-ui);text-align:center;opacity:.6;vertical-align:.1em}
#quick-solve::after{content:"S";margin:0}
#simulate-draft{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}
#simulate-draft[hidden]{display:none}
#simulate-draft::after{content:"Space";margin:0}
.solve-form :focus-visible,.candidate-select-button:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--space-1)}
.solve-form :disabled,.candidate-select-button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.beta-tag{display:inline-block;margin-left:.2em;padding:0 .45em;border:1px solid currentColor;border-radius:999px;color:var(--accent-2);font:700 .68em/1.5 var(--type-ui);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.solve-help{margin:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.solve-status{min-height:1.35rem;padding:0;color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.status:empty,.layout-settings #layout-status:empty,#baseline-status:empty{display:none}
.solve-status[data-kind="running"]{color:var(--accent-2)}
.solve-status[data-kind="ok"]{color:#1f6b31}
.solve-status[data-kind="safe"]{color:#26658a}
.robust-search-results[hidden]{display:none}
.solve-status[data-kind="error"]{color:#8d1515}
/* Result tone: a toned icon beside a short label; green success, yellow neutral, warning or stale, red failure. */
[data-result-tone="success"]{--result-tone:#1f6b31;--result-icon-ink:#fff}
[data-result-tone="neutral"],[data-result-tone="warning"],[data-result-tone="stale"]{--result-tone:#8a6100;--result-icon-bg:#e8b400;--result-icon-ink:#2b1f00}
[data-result-tone="failure"]{--result-tone:#8d1515;--result-icon-ink:#fff}
.solve-status[data-result-tone],.robust-search-metrics dd[data-result-tone],#two-way-status[data-result-tone],#two-way-lab p[data-result-tone]{display:flex;align-items:center;gap:.45em;color:var(--result-tone)}
[data-result-tone]::before{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--result-icon-bg,var(--result-tone));color:var(--result-icon-ink);font:800 .95em/1 var(--type-ui)}
[data-result-tone="success"]::before{content:"✓" / ""}
[data-result-tone="neutral"]::before{content:"–" / ""}
[data-result-tone="warning"]::before{content:"!" / ""}
[data-result-tone="failure"]::before{content:"✕" / ""}
[data-result-tone="stale"]::before{content:"↻" / ""}
/* Reliability: one bar split by visit outcome, then a toned legend with the counts. */
.reliability-bar{display:flex;height:.75rem;margin:var(--space-2) 0;border-radius:999px;overflow:hidden;background:var(--rule)}
.reliability-bar>span{flex:0 1 0;min-width:0}
[data-bar-tone="success"]{background:#1f6b31}[data-bar-tone="failure"]{background:#8d1515}[data-bar-tone="warning"]{background:#e8b400}
.reliability-legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);font-size:.85rem}
.reliability-legend>div{display:flex;align-items:center;gap:.35em}
.reliability-legend dt{color:var(--muted);font-weight:600}
.reliability-legend dd{margin:0;font-weight:700}
.robust-search-results{display:grid;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--rule)}
.solve[data-result-stale="changed"] .robust-search-results{opacity:var(--stale-opacity)}
.robust-search-result-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.robust-search-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--space-2);margin:0}
.robust-search-metrics[hidden]{display:none}
.robust-search-metrics>div{min-width:0;padding:.35rem 0;border-bottom:1px solid var(--rule)}
.robust-search-metrics dt{color:var(--muted);font-size:.8rem;font-weight:600}
.robust-search-metrics dd{margin:var(--space-1) 0 0;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.robust-ranked-details{padding:0}
.robust-ranked-details h5{display:flex;flex-wrap:wrap;gap:.25rem .6rem;margin:0;font-size:.85rem;font-weight:600}
.robust-ranked-details h5 span{color:var(--muted);font-weight:400}
.solve-diagnostics summary{cursor:pointer;font-size:.8rem;font-weight:600}
/* A scannable, scrollable list: one summary line per shot, its four parameter
   diagrams behind a disclosure, and the list itself bounded so a long result
   never pushes the rest of the page out of reach. */
.robust-ranked-details ol{display:grid;gap:.4rem;margin:.5rem 0;padding:0;list-style:none;font-size:.85rem;max-height:60svh;overflow-y:auto;overscroll-behavior:contain}
.robust-ranked-details li{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;align-items:center;gap:.4rem .6rem;padding:.4rem .5rem;border:1px solid var(--rule);background:var(--panel)}
.robust-ranked-details li[hidden]{display:none}
/* Explicit columns: the lazily loaded thumbnail cannot move the text when it
   arrives, and a row without one keeps the same shape. */
.candidate-headline{grid-column:2;grid-row:1;display:grid;gap:.15rem;min-width:0}
.candidate-family{margin:0;color:var(--ink);font-size:.85rem;line-height:1.35;overflow-wrap:anywhere}
.candidate-summary{display:flex;flex-wrap:wrap;gap:.1rem .75rem;min-width:0}
.candidate-cell{display:flex;align-items:baseline;gap:.3rem;min-width:0}
.candidate-cell-label{color:var(--muted);font-size:.75rem}
.candidate-cell-value{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.candidate-parameters{grid-column:1 / -1;grid-row:2}
.candidate-parameters>summary{cursor:pointer;color:var(--accent-2);font-size:.78rem;font-weight:600}
.candidate-parameters[open]>summary{margin-bottom:.4rem}
.candidate-actions{grid-column:3;grid-row:1;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.candidate-actions .candidate-select-button{border-color:var(--accent-2);background:var(--accent-2);color:white;font-weight:700}
.result-provenance{margin:0;padding:.5rem .65rem;border-left:3px solid var(--accent-2);background:var(--panel);color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.solve-diagnostics[open] summary{margin-bottom:.65rem}
#solve-settings-status{padding:.5rem .65rem;border-left:3px solid var(--accent);background:var(--panel)}
.candidate-select-button{padding:.35rem .55rem;white-space:nowrap}
.candidate-actions .candidate-select-button[aria-pressed="true"]{opacity:1;border-color:var(--accent);background:var(--accent);color:#fffaf2}
.solve-form .solve-autoplay{display:flex;align-items:center;letter-spacing:normal;text-transform:none;font-weight:400}
#solve-advanced,#solve-escape-options,.solve-diagnostics{padding:0}
#solve-advanced summary,#solve-escape-options summary{cursor:pointer;font-weight:700}
#solve-advanced .solve-help,#solve-escape-options .solve-help{margin-top:var(--space-2)}
.solve-seeds{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-2)}
@container solve (max-width:26rem){.solve-heading,.robust-search-result-heading{align-items:stretch;flex-direction:column}.solve-fields>label{flex-basis:100%}.solve-seeds{grid-template-columns:1fr}.robust-search-metrics{grid-template-columns:1fr}.candidate-actions button{flex:1;min-height:2.75rem}.solve-form input:not([type="checkbox"]),.solve-form select,.solve-form button{min-height:2.75rem;font-size:1rem}}
/* Narrow panel: the row keeps the thumbnail beside its text and drops the
   action to its own line, so the text is not squeezed into a third of the width. */
@container solve (max-width:26rem){
  .robust-ranked-details li{grid-template-columns:5rem minmax(0,1fr)}
  .candidate-picture{width:5rem}
  .candidate-actions{grid-column:1 / -1;grid-row:2;justify-content:stretch}
  .candidate-parameters{grid-row:3}
}

/* Visual setup, outcome inspection, and reversible shot comparisons. */
.layout-settings,.shot-history{padding:var(--space-3);font:400 .82rem/1.4 var(--type-ui);min-width:0}
.layout-settings h3,.shot-history h3,.shot-outcome h3,.shot-timeline h3{margin:0;font:600 1rem/1.2 Georgia,"Times New Roman",serif}
.workspace-section-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.layout-settings{display:grid;gap:.55rem}
.layout-help{padding:0}
.layout-help summary{font-size:.78rem}
.layout-settings p,.shot-history p,.shot-timeline p{margin:.5rem 0;color:var(--muted)}
/* Layout status text ranges from one to three lines; reserve the tallest so
   the history and snapshot controls below never move when it changes. */
.layout-settings #layout-status,.shot-history p{margin:0}
.layout-settings #layout-status{min-height:4.2em}
.shot-history #history-status:empty{display:none}
.layout-settings input,.layout-settings select,.layout-settings button,.layout-table-fields select,.shot-history input:not([type="checkbox"]),.shot-history select,.shot-history button{min-width:0;max-width:100%;min-height:2.25rem;padding:.35rem .5rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--paper-warm);color:var(--ink);font:inherit}
.layout-settings button,.shot-history button{cursor:pointer}
.layout-settings :disabled,.layout-table-fields :disabled,.shot-history :disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.layout-settings :focus-visible,.shot-history :focus-visible,.shot-timeline button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#layout-status[data-kind="error"]{color:#8d1515;font-weight:600}
.shot-history{margin:.75rem;display:grid;gap:.5rem}
.shot-history .controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.snapshot-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:.5rem}
.snapshot-controls label{color:var(--muted)}
/* Reserve both lines this status uses so toggling traces or a baseline never
   moves the snapshot controls beneath it. */
#baseline-status{min-height:2.8em}
/* The cue-strike limit notice appears only when a requested point is
   constrained. Reserve its box so the instrument, the settings column and the
   panels below never resize mid-drag; longer notices scroll inside it. */
.wasm-app .shot-instrument-grid #tip-limit-status{height:3.2em;overflow:auto;margin:0}
.wasm-app .shot-instrument-grid #tip-limit-status[hidden]{display:block;visibility:hidden}
.history-actions{padding-bottom:.25rem}
.shot-history label:has(input[type="checkbox"]){display:flex;align-items:center}
.shot-outcome{margin:.75rem;padding:.85rem;border-left:4px solid var(--accent-2);background:var(--panel-tint)}
.shot-outcome[data-outcome="score"]{border-color:#247647}
.shot-outcome[data-outcome="safe"],.shot-outcome[data-outcome="legal"]{border-color:#26658a}
.shot-outcome[data-outcome="miss"],.shot-outcome[data-outcome="foul"]{border-color:var(--accent)}
.shot-outcome[data-outcome="not-adjudicated"]{border-color:var(--rule-strong)}
.shot-outcome p{margin:.35rem 0}
.shot-outcome ul{margin:.45rem 0 0;padding-left:1.25rem;font:400 .8rem/1.4 var(--type-ui)}
.report-diagnostics{margin:0 .75rem .75rem}
.report-diagnostics .info-table{margin-top:.5rem}
.shot-timeline{min-width:0;padding:.75rem;background:var(--panel);border:1px solid var(--rule);font:400 .8rem/1.4 var(--type-ui)}
.shot-timeline ol{display:flex;gap:.5rem;overflow-x:auto;list-style:none;padding:.25rem;margin:0}
.shot-timeline li{flex:0 0 13rem}
.shot-timeline button{display:grid;gap:.35rem;width:100%;height:100%;padding:.65rem;text-align:left;border:1px solid var(--rule-strong);background:var(--paper-warm);color:var(--ink);border-radius:3px;font:inherit;cursor:pointer}
.shot-timeline button.event-current{border-color:var(--accent);box-shadow:inset 0 -.2rem var(--accent)}
.event-badge{border:0}
.svg-frame svg{cursor:default}
.svg-frame svg.dragging{cursor:grabbing}
.layout-ball{cursor:move;outline:none;touch-action:none}
.layout-ball-marker{stroke:#16313d;stroke-width:2;fill-opacity:.85}
.layout-artwork-ball .layout-ball-marker{fill:transparent;fill-opacity:1;stroke:transparent;pointer-events:all}
.layout-artwork-ball .ball-artwork{pointer-events:none;visibility:hidden}
.layout-artwork-start .layout-artwork-ball .ball-artwork{visibility:visible}
.layout-artwork-start .playback-ball-artwork,.layout-artwork-start .playback-ball-shadow{visibility:hidden}
.layout-ball-label{fill:#111;font:700 10px var(--type-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:1.5px}
.layout-selected .layout-ball-marker,.layout-ball:focus-visible .layout-ball-marker{stroke:#ffec63;stroke-width:4;filter:drop-shadow(0 0 3px #111)}
.layout-live-ghost{cursor:pointer;outline:none}
.layout-ball.is-live-retained{opacity:.5}
.layout-ball.is-live-retained .layout-ball-marker{stroke:#ffec63;stroke-width:2;stroke-dasharray:4 3}
.layout-live-ghost-shell{fill:#1c2b33;fill-opacity:.35;stroke:#ffec63;stroke-width:2;stroke-dasharray:5 4}
.layout-live-ghost:hover .layout-live-ghost-shell,.layout-live-ghost:focus-visible .layout-live-ghost-shell{fill-opacity:.55;stroke-width:4}
/* Aim guides are white rings and dashes, never ball-like filled discs: no ball
   set uses a hollow white ring, and it reads on every cloth colour. */
.layout-aim-line{stroke:#fff;stroke-opacity:.85;stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.layout-aim-handle{fill:none;stroke:#fff;stroke-width:3;pointer-events:all;filter:drop-shadow(0 0 1px #152e35) drop-shadow(0 0 1px #152e35);cursor:crosshair;outline:none;touch-action:none}
.layout-aim-handle:focus-visible{stroke:#ffec63;stroke-width:4}
.layout-contact-arc{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:3 5;opacity:.7;pointer-events:none}
.layout-contact-point{fill:#fff;stroke:#142e35;stroke-width:1;pointer-events:none}
.layout-contact-handle{fill:#fff;fill-opacity:.35;stroke:#fff;stroke-width:2;stroke-dasharray:5 3;cursor:grab;outline:none;touch-action:none}
.layout-contact-handle:focus-visible{stroke:#ffec63;stroke-width:3}
.layout-editing .layout-contact-handle{cursor:grabbing}
.layout-contact-release-zone{fill:none;stroke:#ffec63;stroke-opacity:.13;stroke-linecap:round}
.layout-contact[data-attachment="detached"] .layout-contact-handle{stroke:#ffb35c;fill:#ffb35c;fill-opacity:.18}
.layout-contact[data-attachment="detached"] .layout-aim-line{stroke:#ffb35c;stroke-dasharray:3 7}
.layout-contact.is-obstructed .layout-aim-line{stroke:#ff826e;stroke-dasharray:3 5}
.layout-ball-menu button{min-height:2.75rem;padding:.4rem .7rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation}
.layout-ball-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.layout-ball-menu{position:fixed;z-index:1000;width:15rem;max-width:calc(100vw - 8px);display:grid;gap:.5rem;padding:.6rem;border:1px solid var(--rule-strong);border-radius:4px;box-shadow:0 4px 18px #0005;background:var(--paper-warm);color:var(--ink);font:400 .85rem/1.4 var(--type-ui)}
.layout-ball-menu button{text-align:left}
.layout-ball-menu button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.layout-ball-menu small{color:var(--muted)}
.layout-ball-menu[hidden]{display:none}
.layout-position-tools{justify-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .65rem;border-top:1px solid var(--rule);background:var(--paper-warm);color:var(--ink);font:400 .8rem/1.4 var(--type-ui)}
.layout-position-tools>span{flex:1 1 16rem;min-width:0;overflow-wrap:anywhere}
.layout-position-tools>span:empty{display:none}
.layout-position-tools button{min-height:2.75rem;padding:.4rem .7rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation}
.layout-position-tools button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.layout-position-tools[hidden],.layout-position-tools [hidden],.layout-ball-menu button[hidden]{display:none}
.layout-position-travel-toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;cursor:pointer;touch-action:manipulation}
.layout-position-travel-toggle input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--accent)}
.layout-position-travel-toggle input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.layout-position-tools [data-position-cone-travel-status]{flex-basis:100%}
.layout-cone-angle-controls{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.25rem .6rem;min-width:0;border-top:1px solid var(--rule);padding-top:.5rem}
.layout-cone-angle-label{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .65rem;font-weight:600}
.layout-cone-angle-label output{font-weight:400;font-variant-numeric:tabular-nums}
.layout-cone-angle-controls input[type="range"]{width:100%;min-width:0;min-height:2.75rem;margin:0;accent-color:var(--accent-2);touch-action:none}
.layout-cone-angle-number{display:flex;align-items:center;gap:.2rem;white-space:nowrap}
.layout-cone-angle-controls input[type="number"]{width:5.5rem;min-width:0;max-width:100%;min-height:2.75rem;padding:.35rem .4rem;border:1px solid var(--rule-strong);border-radius:3px;background:var(--panel);color:var(--ink);font:400 1rem/1.2 var(--type-ui);font-variant-numeric:tabular-nums}
.layout-cone-angle-controls input[aria-invalid="true"]{border-color:var(--accent)}
.layout-cone-angle-controls :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.layout-cone-angle-controls p{grid-column:1 / -1;margin:0;color:var(--muted);font-size:.75rem;overflow-wrap:anywhere}
.layout-cone-picker{pointer-events:none;touch-action:none}
.layout-cone-picker-arc{fill:none;stroke:#ffec63;stroke-width:2;stroke-dasharray:3 4;pointer-events:none}
.layout-cone-picker-arc-target{fill:none;stroke:transparent;stroke-width:44;pointer-events:stroke;cursor:crosshair;touch-action:none}
.layout-cone-picker-spoke{stroke:#ffec63;stroke-width:2;stroke-dasharray:5 4;pointer-events:none}
.layout-cone-picker-handle{fill:#ffec6333;stroke:#ffec63;stroke-width:2;pointer-events:all;cursor:grab;outline:none;touch-action:none}
.layout-cone-picker-dot{fill:#ffec63;stroke:#16313d;stroke-width:2;pointer-events:none}
.layout-cone-picker-handle:hover,.layout-cone-picker-handle:focus-visible{fill:#ffec6366;stroke:#fff;stroke-width:3}
.layout-cone-picker-dragging .layout-cone-picker-handle,.layout-cone-picker-dragging .layout-cone-picker-arc-target{cursor:grabbing}
@media(max-width:380px){.layout-cone-angle-controls{column-gap:.35rem}.layout-cone-angle-controls input[type="number"]{width:4.5rem}.layout-cone-angle-controls button{padding-inline:.4rem}}
.layout-safety-legend{flex:1 1 100%;min-width:0}
.layout-safety-legend ul{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0;list-style:none}
.layout-safety-legend li{display:flex;align-items:center;gap:.4rem;max-width:100%;min-width:0;overflow-wrap:anywhere}
/* Swatches match the map: fill ramps in scale order with the darker rim every zone has. */
.layout-safety-swatch{display:inline-block;flex:0 0 2.2rem;width:2.2rem;height:.8rem;border-radius:2px;box-shadow:inset 0 0 0 1.5px #0000005c}
.layout-safety-swatch-partial{background:linear-gradient(to right,#f05a28,#ffc43d)}
.layout-safety-swatch-full{background:linear-gradient(to right,#d6f06c,#24d67a)}
.layout-safety-swatch-containment{background:repeating-linear-gradient(135deg,#e5383b 0 3px,transparent 3px 6px)}
.layout-safety-scale{margin:.3rem 0 0;color:var(--muted);font-size:.8em}
.layout-safety-legend details{margin-top:.4rem;padding:0}
.layout-safety-legend summary{width:fit-content;max-width:100%;overflow-wrap:anywhere}
.layout-safety-legend summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.layout-safety-legend p{margin:.5rem 0 0;overflow-wrap:anywhere}
.layout-position-travel{pointer-events:none}
.layout-position-travel path{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.layout-position-travel-outline{stroke:#082b38;stroke-width:7}
.layout-position-travel-line{stroke:#7ff5ff;stroke-width:3}
.layout-position-region{opacity:.65}
.layout-position-gradient{width:100%;height:100%;background:conic-gradient(from var(--cone-from) at var(--cone-apex),#ffe24c 0deg,#26e878 var(--cone-half),#ffe24c var(--cone-span),#ffe24c 360deg)}
.layout-position-line{stroke:#fff4a1;stroke-width:2;stroke-dasharray:6 4}
.layout-position-ghost{fill:#fff;fill-opacity:.2;stroke:#fff;stroke-width:2;stroke-dasharray:4 3}
.layout-position-pocket{fill:#ffec63;fill-opacity:.6;stroke:#fff;stroke-width:2;cursor:pointer;outline:none;touch-action:manipulation}
.layout-position-pocket:hover,.layout-position-pocket:focus-visible{fill-opacity:1;stroke:#183b46;stroke-width:4;filter:drop-shadow(0 0 3px #fff)}
.layout-pending{opacity:.55;pointer-events:none}
/* The thumbnail leads its summary row instead of taking a full-width block. */
.candidate-picture{display:block;grid-column:1;grid-row:1;width:7rem;max-width:100%}
.candidate-picture[hidden]{display:none}
.candidate-thumbnail{display:block;width:100%;height:3.4rem;border:1px solid var(--rule-strong);border-radius:3px;background:#075870}
@media(max-width:720px){.wasm-app .layout-fields fieldset{grid-column:1 / -1}.snapshot-controls{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:520px){.shot-history .controls>*{max-width:100%}.shot-history input:not([type="checkbox"]),.shot-history select{width:100%}.shot-timeline li{flex-basis:11rem}}
@media(pointer:coarse){.layout-actions button,.layout-settings input:not([type="checkbox"]),.layout-settings select,.layout-settings button,.shot-history input:not([type="checkbox"]),.shot-history select,.shot-history button,.solve-form button,.solve-form select,.solve-form input:not([type="checkbox"]){min-height:2.75rem}}

/* Persistent cue-view contact picker, outside the replaceable table report. */
.contact-picker-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-width:0}
.contact-picker-row>#preview{min-width:0}
.contact-picker-row.has-contact-picker{grid-template-columns:minmax(0,1fr) 20rem}
.contact-picker{display:grid;gap:.6rem;min-width:0;padding:.85rem;border-left:1px solid var(--rule);background:var(--panel-tint);color:var(--ink);font:400 .85rem/1.4 var(--type-ui)}
.contact-picker[hidden]{display:none}
.contact-picker-heading{display:flex;align-items:start;justify-content:space-between;gap:.65rem}
.contact-picker-heading>div{min-width:0}
.contact-picker-heading h3{margin:0;font:700 1rem/1.3 var(--type-ui)}
.contact-picker-heading p{margin:.2rem 0 0;color:var(--muted);overflow-wrap:anywhere}
.contact-picker-heading button{min-height:2.75rem;padding:.4rem .75rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:600 .85rem/1.3 var(--type-ui);cursor:pointer;touch-action:manipulation}
.contact-picker-target-label{display:grid;gap:.3rem;max-width:100%;font-weight:600}
.contact-picker [data-contact-selector]{width:100%;max-width:28rem;min-width:0;min-height:2.75rem;padding:.35rem 1.6rem .35rem .5rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit}
.contact-picker-pad{display:block;justify-self:center;width:100%;max-width:300px;height:auto;aspect-ratio:300 / 280;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:#e7f0ed;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.contact-picker.is-interacting .contact-picker-pad{cursor:grabbing}
.contact-picker-axis{fill:none;stroke:#98b2aa;stroke-width:1;stroke-dasharray:3 5}
.contact-picker-ghost{fill:#fff;fill-opacity:.55;stroke:#355d6a;stroke-width:2;stroke-dasharray:5 3}
.contact-picker-approach{stroke:var(--accent-2);stroke-width:2;stroke-dasharray:6 4}
.contact-picker-normal{stroke:#355d6a;stroke-width:1;stroke-dasharray:2 3}
.contact-picker-dot{fill:var(--accent);stroke:#fff;stroke-width:2}
.contact-picker-cushion{stroke:#ffd166;stroke-width:2;stroke-linecap:round;opacity:.9}
/* 11 CSS px on screen at any pad size (svg-scale.js); narrow pads drop the middle caption. */
.contact-picker-direction{fill:#35574c;font:600 calc(11px * var(--svg-px, 1)) var(--type-ui);pointer-events:none}
.contact-picker-pad[data-svg-narrow] [data-contact-view]{display:none}
.contact-picker-readouts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 .5rem;color:var(--accent-2);font-weight:700;white-space:nowrap}
.contact-picker-readouts output{font-variant-numeric:tabular-nums}
.contact-picker-range-label{font-weight:600}
.contact-picker input[type="range"]{width:100%;min-height:2.75rem;margin:-.35rem 0;accent-color:var(--accent-2);touch-action:pan-y}
.contact-picker-number-label{display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:var(--muted);font-weight:600}
.contact-picker-number-label>span{display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.contact-picker input[type="number"]{width:6.5rem;min-height:2.75rem;padding:.35rem .5rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:400 1rem/1.2 var(--type-ui);font-variant-numeric:tabular-nums}
.contact-picker input[aria-invalid="true"]{border-color:var(--accent)}
.contact-picker :focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:2px}
.contact-picker-help{margin:0;color:var(--muted);font-size:.75rem;line-height:1.4}
.contact-picker-status{height:3.9rem;overflow:auto;margin:0;padding:.45rem .55rem;border:1px solid var(--rule);border-radius:var(--radius-small);background:var(--panel);color:var(--muted);font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}
/* Status boxes keep a fixed height whether empty or full so that changing text
   never moves the controls below them; long text scrolls inside the box. */
.contact-picker [data-contact-obstruction]{height:2.95rem}
.contact-picker [data-contact-obstruction]:empty{border-color:transparent;background:transparent}
.contact-picker-status[data-kind="error"]{color:#8d1515;border-color:#c68b8b}
.contact-picker-status[data-kind="ok"]{color:#1f6b31}
.contact-picker-correction{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:600;cursor:pointer}
.contact-picker-correction[hidden]{display:none}
.contact-picker-correction input{width:1.1rem;height:1.1rem;accent-color:var(--accent-2)}
.contact-picker[data-corrected="true"] .contact-picker-readouts{white-space:normal}
.contact-picker[data-corrected="true"] .contact-picker-status{height:auto;min-height:3.9rem}
.contact-picker[data-corrected="true"] .contact-picker-approach{opacity:.35}
.contact-aim-path{fill:none;stroke:#1688d4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.contact-aim-actual-ghost{fill:none;stroke:#1688d4;stroke-width:1.5;pointer-events:none}
.contact-aim-actual-point{fill:#1688d4;stroke:#fff;stroke-width:1.5;pointer-events:none}
.layout-contact .contact-aim-path{stroke:#65d7ff}
.layout-contact .contact-aim-actual-ghost{stroke:#65d7ff}
.layout-contact .contact-aim-actual-point{fill:#65d7ff}
@media(max-width:800px){.contact-picker-row.has-contact-picker{grid-template-columns:minmax(0,1fr)}.contact-picker{border-left:0;border-bottom:1px solid var(--rule)}}
#heading-contact{width:100%;min-width:0}
.contact-picker-compact{gap:.45rem;padding:0;border:0;background:transparent}
.contact-picker [hidden]{display:none}
.contact-picker-compact .contact-picker-heading h3,.contact-picker-compact [data-contact-done]{display:none}
.contact-picker-compact .contact-picker-heading p{margin:0;font-size:.8rem}
.contact-picker-compact .contact-picker-range-label{white-space:nowrap}
/* Free aim and a stale source leave the compact picker without a target. Keep
   the pad and slider slots so the heading, cue-strike and elevation controls
   below them never move; they stay hidden from view and assistive tech. */
.contact-picker-compact :is(.contact-picker-pad,[data-contact-range],.contact-picker-range-label)[hidden]{display:block;visibility:hidden}
.contact-picker-compact .contact-picker-readouts{min-height:1.5rem;white-space:nowrap}
.contact-picker-compact .contact-picker-readouts output{min-width:0;overflow:hidden;text-overflow:ellipsis}
.contact-picker-compact .contact-picker-status{height:2.95rem;padding:.35rem .45rem}
.contact-picker-compact .contact-picker-status:empty{border-color:transparent;background:transparent}
/* The full picker stacks both statuses; the compact one shares a single slot.
   An error outranks a blocked path, which outranks guidance. */
.contact-picker-statuses{display:contents}
.contact-picker-compact .contact-picker-statuses{display:grid;min-width:0}
.contact-picker-compact .contact-picker-statuses>.contact-picker-status{grid-area:1 / 1;min-width:0}
.contact-picker-compact .contact-picker-statuses:has([data-contact-status][data-kind="error"]) [data-contact-obstruction],
.contact-picker-compact .contact-picker-statuses:has([data-contact-obstruction]:not(:empty)) [data-contact-status]:not([data-kind="error"]){visibility:hidden}
.contact-picker-compact[data-editable="false"] .contact-picker-pad{cursor:default}
.contact-picker-compact[data-editable="false"] :is(input,select){opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);cursor:default}
.shot-instrument-grid .contact-picker-compact :is(.contact-picker-heading,.contact-picker-help,.contact-picker-correction,.contact-picker-number-label,[data-contact-heading]){display:none}
.shot-instrument-grid .contact-picker-compact .contact-picker-target-label{gap:.2rem;font-size:.8rem}
.shot-instrument-grid .contact-picker-compact .contact-picker-pad{max-width:12rem}
.shot-instrument-grid .contact-picker-compact .contact-picker-range-label{font-size:.8rem}
.instrument-dialog [data-instrument="heading"]>legend{display:none}
.instrument-dialog #heading-contact{max-width:36rem}
.instrument-dialog .contact-picker-compact .contact-picker-pad{max-width:24rem}

/* Durable desired geometry and authoritative simulation feedback, outside preview replacement. */
.position-runway-panel{grid-column:1 / -1;order:2;display:grid;gap:.65rem;min-width:0;padding:.85rem;border-top:1px solid var(--rule);background:var(--panel-tint);color:var(--ink);font:400 .85rem/1.4 var(--type-ui)}
.position-runway-panel[hidden]{display:none}
.position-runway-heading{display:flex;align-items:start;justify-content:space-between;gap:.75rem}
.position-runway-heading h3{margin:0;font:600 1rem/1.2 var(--type-ui)}
.position-runway-panel p{margin:0;overflow-wrap:anywhere}
.position-runway-heading p{margin-top:.3rem;color:var(--muted)}
.position-runway-controls{display:flex;flex-wrap:wrap;gap:.75rem}
.position-runway-controls label{display:grid;flex:1 1 12rem;gap:.3rem;min-width:0;font-weight:600}
.position-runway-panel select,.position-runway-panel button{min-height:2.75rem;max-width:100%;padding:.4rem .65rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit;touch-action:manipulation}
.position-runway-panel button{cursor:pointer;flex-shrink:0}
.position-runway-panel select:disabled{opacity:var(--disabled-opacity)}
.position-runway-panel :focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:2px}
.position-runway-help{color:var(--muted);font-size:.78rem}
.position-runway-feedback{padding:.55rem .65rem;border:1px solid var(--rule);border-radius:var(--radius-small);background:var(--panel);color:var(--ink)}
.position-runway-feedback[data-kind="success"]{color:#1f6b31;border-color:#6d9973}
.position-runway-feedback[data-kind="pending"]{color:var(--accent-2)}
.position-runway-feedback:is([data-kind="scratch"],[data-kind="miss"],[data-kind="outside"],[data-kind="geometry-changed"]){color:var(--accent)}
.position-runway-overlay{pointer-events:none}
.position-runway-landing{fill:#64efff;fill-opacity:.26;stroke:#b8faff;stroke-width:2.5;stroke-linejoin:round}
.position-runway-approach{stroke:#b8faff;stroke-width:3;stroke-dasharray:9 6}
.position-runway-cone .position-runway-approach{stroke-dasharray:none}
.position-runway-arrow{fill:none;stroke:#b8faff;stroke-width:3;stroke-linejoin:round}
.position-runway-along{stroke:#fff;stroke-width:3}
.position-runway-across{stroke:#ffdc6b;stroke-width:3;stroke-dasharray:2 4}
.position-runway-center{fill:#fff;stroke:#123540;stroke-width:1.5}
.position-runway-label{fill:#fff;stroke:#123540;stroke-width:3;paint-order:stroke fill;stroke-linejoin:round;font:600 11px var(--type-ui)}
.position-runway-label-across{fill:#ffdc6b}
@media(max-width:520px){.position-runway-heading{flex-wrap:wrap}.position-runway-heading button{width:100%}.position-runway-controls label{flex-basis:100%}}

/* Photo review stays outside replaceable engine reports and owns no DSL state. */
.image-import-dialog{width:min(96vw,90rem);max-width:none;max-height:92dvh;box-sizing:border-box;padding:1.25rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:400 .9rem/1.5 var(--type-ui);overflow:auto}
.image-import-dialog::backdrop{background:#071e2dbb}
.image-import-heading,.image-import-service,.image-import-ball-heading,.image-import-progress{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.image-import-heading{position:sticky;top:-1.25rem;z-index:3;padding:.6rem 0;background:var(--panel)}
.image-import-heading h2{margin:0;font-size:1.4rem}
.image-import-dialog h3{margin:1rem 0 .5rem}
.image-import-dialog p{margin:.5rem 0;overflow-wrap:anywhere}
.image-import-dialog details{padding:0}
.image-import-dialog summary{cursor:pointer;padding:.45rem 0;font-weight:600}
.image-import-dialog details[open]>summary{margin-bottom:.3rem}
.image-import-compact-note,#image-import-dimensions{font-size:.8rem;color:var(--muted)}
.image-import-setup{border-bottom:1px solid var(--rule)}
.image-import-dialog button,.image-import-dialog select,.image-import-dialog input:not([type="checkbox"]){box-sizing:border-box;min-height:2.75rem;max-width:100%;padding:.45rem .65rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit}
.image-import-dialog button{cursor:pointer}
.image-import-dialog :disabled{opacity:var(--disabled-opacity);cursor:default}
.image-import-dialog :focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:3px}
.image-import-dialog [hidden]{display:none!important}
.image-import-dialog input[aria-invalid="true"]{border-color:#ac2222;outline:1px solid #ac2222}
.image-import-controls{display:flex;align-items:end;flex-wrap:wrap;gap:.75rem;margin:.75rem 0}
.image-import-controls>label{display:grid;gap:.3rem;flex:1 1 13rem;min-width:0}
.image-import-controls input,.image-import-controls select{width:100%}
.image-import-video{display:block;max-width:100%;max-height:55vh;margin:1rem auto;background:#17262b}
.image-import-review-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(20rem,1fr);align-items:start;gap:1.1rem}
.image-import-visual{position:sticky;top:3.6rem;min-width:0}
.image-import-photo-figure{position:relative;min-width:0;margin:0;padding:.4rem;border:1px solid var(--rule);background:var(--panel-tint)}
.image-import-loupe{position:absolute;z-index:2;width:11rem;height:11rem;border:2px solid #ffdc6b;border-radius:50%;box-shadow:0 4px 14px #0008;background:#15272c;pointer-events:none}
.image-import-photo-figure figcaption{margin-bottom:.35rem;font-size:.8rem;font-weight:600}
.image-import-topdown-figure{min-width:0;margin:0 0 .5rem;padding:.4rem;border:1px solid var(--rule);background:var(--panel-tint)}
.image-import-topdown-figure figcaption{margin-bottom:.3rem;font-size:.8rem;font-weight:600}
#image-import-topdown{display:block;width:100%;height:auto;max-height:10rem}
.image-import-topdown-rail{fill:#5a3a22}
.image-import-topdown-cloth{fill:#1b6b45}
.image-import-topdown-ball circle.image-import-topdown-spread{fill:#ffdc6b;fill-opacity:.18;stroke:#ffdc6b;stroke-width:3;stroke-dasharray:12 8}
.image-import-topdown-ball{cursor:pointer}
.image-import-topdown-ball circle{stroke:#0a1a12;stroke-width:3}
.image-import-topdown-ball text{fill:#fff;stroke:#0a1a12;stroke-width:6;paint-order:stroke fill;font-weight:700}
.image-import-topdown-ball.is-selected circle{stroke:#ffdc6b;stroke-width:9}
.image-import-topdown-ball.is-stale{opacity:.5}
.image-import-topdown-ball:focus-visible{outline:none}
.image-import-topdown-ball:focus-visible circle{stroke:#ff6a16;stroke-width:9}
#image-import-photo,.image-import-preview-details img{display:block;width:100%;height:auto;max-height:min(54dvh,max(12rem,calc(92dvh - 22rem)));object-fit:contain;background:#15272c}
.image-import-preview-details img{max-height:35dvh}
#image-import-photo.is-editable{touch-action:none;user-select:none;-webkit-user-select:none}
#image-import-photo.is-adding{cursor:crosshair}
.image-import-boundary{fill:none;stroke:#ffdc6b;stroke-width:2;stroke-dasharray:7 4;pointer-events:none}
.image-import-corner{fill:#ffdc6b;fill-opacity:.85;stroke:#17262b;stroke-width:1;cursor:move}
.image-import-ball{fill:#25d4ec;fill-opacity:.08;stroke:#65edff;stroke-width:2;cursor:move}
.image-import-ball.is-selected{stroke:#ffdc6b;stroke-width:3}
.image-import-predicted{fill:none;stroke:#fff;stroke-width:1.25;stroke-dasharray:3 2;opacity:.9}
.image-import-radius{fill:#fff;stroke:#17384a;stroke-width:1.5;cursor:ew-resize}
.image-import-label{fill:#fff;stroke:#142933;stroke-width:2;paint-order:stroke fill;pointer-events:none}
.image-import-corner:focus,.image-import-ball:focus,.image-import-radius:focus{stroke:#ff6a16;stroke-width:4;outline:none}
.image-import-dialog>section>fieldset{min-width:0;margin:.5rem 0;padding:0;border:0}
.image-import-corners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
.image-import-corners fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;min-width:0;margin:0;padding:.5rem;border:1px solid var(--rule)}
.image-import-corners label,.image-import-ball-detail label,.image-import-add-fields label{display:grid;gap:.2rem;min-width:0;font-size:.8rem}
.image-import-corners input,.image-import-ball-detail input,.image-import-add-fields input{width:100%;min-width:0;font-variant-numeric:tabular-nums}
.image-import-ball-panel{min-width:0}
.image-import-ball-heading h3{margin:0}
.image-import-balls{display:grid;gap:.25rem;max-height:clamp(8rem,calc(92dvh - 34rem),24rem);overflow-y:auto;scrollbar-gutter:stable}
.image-import-ball-row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;align-items:center;gap:.35rem;padding:.2rem;border:1px solid transparent;border-radius:var(--radius-small)}
.image-import-ball-row.is-selected{border-color:var(--accent);background:var(--panel-tint)}
.image-import-ball-row button,.image-import-ball-row select{min-width:0;min-height:2.25rem;padding:.25rem .4rem}
.image-import-ball-row button[aria-pressed="true"]{background:var(--accent);color:var(--panel)}
.image-import-ball-detail{min-width:0;margin:.7rem 0 .25rem;padding:.5rem;border:1px solid var(--rule)}
.image-import-ball-detail legend{font-weight:600}
.image-import-ball-fields,.image-import-add-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.image-import-ball-detail details{font-size:.8rem;color:var(--muted)}
.image-import-identity-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .5rem}
.image-import-identity-chip{display:inline-flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:.2rem .55rem;border-radius:999px;font-size:.85rem}
.image-import-identity-chip.is-suggested{font-weight:700;border-color:var(--accent)}
.image-import-identity-chip.is-used{opacity:.72}
.image-import-identity-chip small{font-weight:400;color:var(--muted)}
.image-import-identity-chip[aria-pressed="true"]{background:var(--accent);color:var(--panel)}
.image-import-identity-chip[aria-pressed="true"] small{color:inherit}
.ball-swatch{display:inline-block;flex:0 0 auto;width:1rem;height:1rem;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0005}
.ball-swatch.is-stripe{background:linear-gradient(#fff 0 28%,var(--swatch) 28% 72%,#fff 72%)}
.image-import-add-fields>button{grid-column:1/-1}
.image-import-actions{position:sticky;bottom:-1.25rem;z-index:3;margin-top:.5rem;padding:.6rem 0;background:var(--panel);border-top:1px solid var(--rule-strong)}
.image-import-actions>.controls{margin:0}
.image-import-actions details{font-size:.8rem}
.image-import-actions details[open]{max-height:25dvh;overflow:auto}
.image-import-actions #image-import-blockers{padding:.4rem;margin:0}
.image-import-actions .image-import-more{position:relative;font-size:inherit}
.image-import-actions .image-import-more[open]{max-height:none;overflow:visible}
.image-import-more>summary{display:inline-flex;align-items:center;min-height:2.75rem;padding:.45rem .65rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);cursor:pointer;list-style:none}
.image-import-more>summary::-webkit-details-marker{display:none}
.image-import-more-menu{position:absolute;bottom:calc(100% + .3rem);left:0;z-index:4;display:grid;gap:.3rem;min-width:14rem;padding:.4rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);box-shadow:0 4px 14px #0003}
.image-import-progress p:empty{display:none}
.image-import-issue-list{max-height:18dvh;overflow:auto;margin:.2rem 0 0;padding:0;list-style:none;font-size:.85rem}
.image-import-issue-list li{padding:.25rem .5rem;margin:.2rem 0;border-left:3px solid #986600;background:#fff5d6;color:#563b00}
.image-import-issue-list li[data-tone="error"]{border-color:#a32626;background:#fff0ee;color:#801b1b}
.image-import-issue-list li[data-tone="pending"]{border-color:var(--rule-strong);background:var(--panel-tint);color:var(--ink)}
.image-import-issue-list .text-button{color:inherit;text-align:left;min-height:2rem}
.image-import-issue-list .text-button+.text-button{margin-left:.6rem}
.image-import-issue-tag{grid-column:1/-1;padding:0 .25rem .25rem;font-size:.75rem;font-weight:600}
.image-import-dialog [data-review-state="error"]:not(svg *),.image-import-dialog input[aria-invalid="true"],.image-import-dialog select[aria-invalid="true"]{background:#fff0ee;color:#801b1b;box-shadow:inset 0 0 0 2px #b32d2d;border-radius:3px}
.image-import-dialog [data-review-state="warning"]:not(svg *){background:#fff5d6;color:#563b00;box-shadow:inset 0 0 0 2px #986600;border-radius:3px}
.image-import-dialog [data-review-state="pending"]:not(svg *){background:var(--panel-tint)}
#image-import-photo [data-review-state="error"]{stroke:#ff493d;stroke-width:4;stroke-dasharray:5 2;fill:#ff493d;fill-opacity:.12}
#image-import-photo [data-review-state="warning"]{stroke:#ffc144;stroke-width:3;stroke-dasharray:6 3}
#image-import-photo [data-review-state].is-selected{stroke-width:6}
#image-import-photo [data-review-state]:focus{stroke:#fff;stroke-width:5;outline:none}
.image-import-dialog [data-review-state] :focus-visible,.image-import-issue-list :focus-visible{outline:3px solid #154f91;outline-offset:2px}
.image-import-save-dialog{width:min(90vw,34rem);max-height:85dvh;box-sizing:border-box;overflow:auto;padding:1.2rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit}
.image-import-save-dialog::backdrop{background:#071e2dbb}
.image-import-save-choice{display:flex;align-items:start;gap:.6rem;margin:1rem 0}
.image-import-save-choice input{flex:none;margin:.3rem 0}
#image-import-save-fields>label{display:grid;gap:.3rem;margin:.7rem 0}
#image-import-save-fields input,#image-import-save-fields textarea{width:100%;box-sizing:border-box;min-width:0}
#image-import-save-fields textarea{padding:.5rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit;resize:vertical}
#image-import-status,#image-import-blockers{padding:.65rem;border:1px solid var(--rule);background:var(--panel-tint)}
#image-import-blockers:empty{display:none}
#image-import-status[data-kind="error"]{color:#8d1515;border-color:#c68b8b}
#image-import-status[data-kind="ok"]{color:#1f6b31;border-color:#6d9973}
.image-import-captures{display:grid;gap:.6rem;padding-left:1.5rem}
.image-import-captures li{display:flex;align-items:start;gap:.5rem;flex-wrap:wrap}
.image-import-captures li>button:first-child{flex:1 1 16rem;text-align:left;overflow-wrap:anywhere}
.image-import-captures button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.image-import-joint-preview{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--panel-tint)}
#image-import-multi,#image-import-joint-review{margin:1rem 0;padding:1rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small)}
#image-import-photo-blockers,#image-import-fit-blockers{color:var(--muted)}
@media(max-width:900px){.image-import-review-grid{grid-template-columns:minmax(0,1fr)}.image-import-visual{position:static}#image-import-photo{max-height:40dvh}.image-import-balls{max-height:none;overflow:visible}.image-import-ball-detail{position:sticky;top:4rem;z-index:2;background:var(--panel)}.image-import-corners{grid-template-columns:repeat(2,minmax(0,1fr))}.image-import-dialog{padding:.8rem}.image-import-heading{top:-.8rem}.image-import-actions{bottom:-.8rem}.image-import-service{align-items:start;flex-wrap:wrap}}
@media(pointer:coarse){.image-import-ball-row button,.image-import-ball-row select{min-height:2.75rem}}
@media(max-width:420px){.image-import-heading{align-items:start}.image-import-heading h2{font-size:1.15rem}.image-import-controls>label{flex-basis:100%}.image-import-actions>.controls{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:.4rem}.image-import-actions button,.image-import-more>summary{padding:.4rem;font-size:.8rem}}
/* Narrow screens: the sticky bar keeps one action row, the status and the first issue. */
.image-import-issue-toggle{display:none}
@media(max-width:900px){.image-import-issue-toggle:not([hidden]){display:inline;min-height:auto;padding:0 .4rem;font-size:.8rem}#image-import-requirements:not(.is-expanded) .image-import-issue-list li:not(:first-child){display:none}#image-import-blockers{display:inline}.image-import-actions{padding:.4rem 0}}

/* Fixed-stroke path frequency, separate from geometric guides. */
.shot-uncertainty-panel{grid-column:1/-1;order:3;display:grid;gap:.6rem;min-width:0;padding:.85rem;border-top:1px solid var(--rule);background:var(--panel-tint);font:400 .85rem/1.4 var(--type-ui)}
.shot-uncertainty-panel p{margin:0}
.shot-uncertainty-panel small{font:400 .75rem/1.3 var(--type-ui);color:var(--muted)}
.uncertainty-disclosure>summary{cursor:pointer;font-weight:600}
.uncertainty-body{display:grid;gap:.6rem;margin-top:.6rem}
.uncertainty-toggles[hidden]{display:none}
.shot-uncertainty-panel p{overflow-wrap:anywhere}
.shot-uncertainty-panel p:empty{display:none}
.uncertainty-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),14rem));gap:.6rem}
.uncertainty-controls label{display:grid;gap:.2rem;min-width:0}
.uncertainty-controls select,.uncertainty-controls input{min-width:0;width:100%}
.uncertainty-toggles{display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.uncertainty-toggles label{display:flex;align-items:center;gap:.35rem}
.uncertainty-toggles input{flex:none}
.shot-uncertainty-panel details[hidden]{display:none}
.uncertainty-path-density{image-rendering:auto}
.uncertainty-nominal{stroke-width:2;stroke-opacity:.95;stroke-linejoin:round;stroke-linecap:round}
.uncertainty-nominal.uncertainty-unresolved,.uncertainty-nominal.uncertainty-rejected{stroke-dasharray:5 3}
.shot-uncertainty-panel :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
@media(max-width:520px){.shot-uncertainty-panel .controls{width:100%}.shot-uncertainty-panel .controls button{flex:1}.uncertainty-toggles{display:grid}}

/* Focused player: reuse the live viewer and stroke instruments, without editors. */
body.player-open{overflow:hidden}
.player-dialog{inset:0;width:100%;height:100%;width:100dvw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--panel);color:var(--ink)}
.player-dialog::backdrop{background:var(--panel)}
.wasm-app .player-dialog .wasm-report-card{display:grid;grid-template-columns:minmax(0,1fr) 14rem;grid-template-rows:auto auto minmax(0,1fr);width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:auto;background:var(--panel)}
.player-dialog #preview-state{grid-column:1 / -1}
.player-dialog #preview,.player-dialog .contact-picker-row{grid-column:1;grid-row:3;min-width:0;min-height:0}
.player-dialog .shot-settings{display:contents}
.player-dialog .contact-picker-row{display:block}
.player-dialog .contact-picker-row>#preview{height:100%}
.wasm-app .player-dialog .card-workspace{height:100%;min-height:0;display:block}
.wasm-app .player-dialog .svg-viewer{height:100%;grid-template-rows:minmax(6rem,1fr) auto}
/* The diagram itself, not the toolbar icons layered over it. */
.wasm-app .player-dialog .svg-frame>svg{width:100%;height:100%;max-height:none}
.wasm-app .player-dialog .shot-controls{grid-column:2;grid-row:3;min-height:0;overflow:auto;padding:.65rem;align-content:start;gap:.6rem}
.wasm-app .player-dialog .shot-instrument-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:.65rem}
.wasm-app .player-dialog .shot-instrument{grid-area:auto;--instrument-size:6rem}
.wasm-app .player-dialog .tip-instrument-layout{grid-template-columns:var(--instrument-size);justify-content:center}
.player-dialog .tip-pad{pointer-events:none}
.player-dialog .report-secondary,.player-dialog .layout-actions,.player-dialog #return-to-source,.player-dialog #simulate-draft,
.player-dialog .contact-picker,.player-dialog .shot-results,.player-dialog [data-instrument="heading"],
.player-dialog .shot-controls input,.player-dialog .shot-controls button,.player-dialog .tip-axis-controls,
.player-dialog .numeric-field,.player-dialog .elevation-fields,.player-dialog .playback-graphics,
.player-dialog .playback-help,.player-dialog .playback-landmark-navigation{display:none}
.player-dialog .shot-controls-heading h3{font-size:.85rem}
.player-dialog .playback-panel{max-height:45dvh;overflow:auto}
@media(max-width:720px) and (min-height:500px){
  .wasm-app .player-dialog .wasm-report-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto}
  .wasm-app .player-dialog .shot-controls{grid-column:1;grid-row:4;max-height:25dvh;padding:.4rem}
  .wasm-app .player-dialog .shot-instrument-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .wasm-app .player-dialog .shot-instrument{--instrument-size:4rem}
  .player-dialog .shot-controls-heading{display:none}
  .player-dialog .playback-event,.player-dialog .playback-shot-status,.player-dialog .playback-landmark-list{display:none}
}
@media(max-height:500px){
  .wasm-app .player-dialog .wasm-report-card{grid-template-columns:minmax(0,1fr) 10rem}
  .wasm-app .player-dialog .shot-instrument{--instrument-size:4rem}
  .player-dialog .shot-controls-heading,.player-dialog .playback-event,.player-dialog .playback-landmark-list{display:none}
}
.wasm-app .player-dialog [data-instrument="speed"] .numeric-field,
.wasm-app .player-dialog [data-instrument="elevation"] .numeric-field{display:block}
.wasm-app .player-dialog .elevation-fields{display:flex}
.wasm-app .player-dialog #speed-input,.wasm-app .player-dialog #elevation-input{display:block;width:5rem;min-height:0;padding:0;border:0;background:transparent;appearance:textfield;pointer-events:none;color:var(--ink)}
.player-dialog #speed-input::-webkit-inner-spin-button,.player-dialog #elevation-input::-webkit-inner-spin-button{display:none}
.wasm-app .player-dialog .ball-inspector,
.wasm-app .player-dialog .shot-uncertainty-panel,
.wasm-app .player-dialog .position-runway-panel{display:none}
@media(max-height:500px){
  .player-dialog .table-context{padding:.25rem .65rem}
  .player-dialog .playback-controls{display:flex;flex-wrap:wrap;gap:.25rem .5rem}
  .player-dialog .playback-actions{flex:1 1 100%}
  .player-dialog .playback-timeline{flex:1 1 14rem}
  .player-dialog .playback-shot-status{display:none}
  .player-dialog .playback-time{min-width:0}
}

/* Sampled native pot tolerance; the contact picker is read-only in this mode. */
.shot-tolerance-panel{grid-column:1/-1;order:1;display:grid;gap:.65rem;min-width:0;padding:.85rem;border-top:1px solid var(--rule);background:var(--panel-tint);font:400 .85rem/1.4 var(--type-ui)}
.shot-tolerance-panel[hidden]{display:none}
.shot-tolerance-panel h3,.shot-tolerance-panel p{margin:0}
.shot-tolerance-panel h3{font:600 1rem/1.3 var(--type-ui)}
.shot-tolerance-panel p,.shot-tolerance-panel li{overflow-wrap:anywhere}
.shot-tolerance-panel ul{margin:0;padding-left:1.3rem;max-height:10rem;overflow:auto}
.shot-tolerance-panel ul:empty{display:none}
.tolerance-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.6rem;align-items:end}
.tolerance-controls label{display:grid;gap:.25rem;min-width:0}
.tolerance-controls input,.tolerance-controls select,.shot-tolerance-panel button{min-width:0;min-height:2.75rem;padding:.35rem .5rem;border:1px solid var(--rule-strong);border-radius:var(--radius-small);background:var(--panel);color:var(--ink);font:inherit}
.tolerance-controls input[type="range"]{width:100%;padding:0;accent-color:#14764d}
.tolerance-controls input[aria-invalid="true"]{border-color:#a52b32}
.shot-tolerance-panel :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.shot-tolerance-panel [data-tolerance-status]{font-weight:600}
.tolerance-legend,.shot-tolerance-panel [data-tolerance-resolution]{font-size:.8rem;color:var(--muted)}
.tolerance-window{stroke:#14844b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.tolerance-ghost-window{stroke-opacity:.65;stroke-width:6}
.tolerance-contact-window{stroke:#075e30;stroke-width:5}
.tolerance-sample{stroke-width:.7;stroke:#fff}
.tolerance-pot{fill:#07823d}
.tolerance-miss{fill:#65716c;fill-opacity:.6}
.tolerance-unresolved{fill:#e58b12;stroke:#593600}
.tolerance-rejected{fill:#c43442}
.tolerance-current-line{stroke:#176cb2;stroke-width:1.5;stroke-dasharray:5 4}
.tolerance-current-ghost{fill:#fff;fill-opacity:.18;stroke:#176cb2;stroke-width:2;stroke-dasharray:5 3}
.tolerance-current-marker{stroke:#07518d;stroke-width:3}
.contact-picker[data-mode="tolerance"] .contact-picker-pad{cursor:default;touch-action:pan-y}
.contact-picker[data-mode="tolerance"] .contact-picker-range-label,
.contact-picker[data-mode="tolerance"] [data-contact-range],
.contact-picker[data-mode="tolerance"] .contact-picker-number-label,
.contact-picker[data-mode="tolerance"] .contact-picker-ghost,
.contact-picker[data-mode="tolerance"] .contact-picker-normal,
.contact-picker[data-mode="tolerance"] .contact-picker-dot,
.contact-picker[data-mode="tolerance"] .contact-picker-approach{display:none}
.contact-picker[data-mode="tolerance"] .contact-picker-status{height:auto;min-height:3.9rem}
.contact-picker-row{container-type:inline-size}
.contact-picker[data-mode="tolerance"] .contact-picker-pad{max-width:20rem;justify-self:center}
.contact-picker[data-mode="tolerance"] [id$="-limits"]{display:none}
@container(max-width:48rem){
  .contact-picker-row:has(.contact-picker:not([hidden]))>#preview{grid-column:1/-1}
  .contact-picker:not([hidden],.contact-picker-compact){grid-column:1/-1;border-left:0;border-bottom:1px solid var(--rule)}
}
.wasm-app .player-dialog .shot-tolerance-panel{display:none}
@media(max-width:520px){.shot-tolerance-panel .workspace-section-heading{align-items:start;flex-wrap:wrap}.shot-tolerance-panel .workspace-section-heading button{flex:1}.tolerance-controls{grid-template-columns:minmax(0,1fr)}}

.contact-visual-panel{overflow:hidden}
.contact-visual-panel svg{border-radius:2px;background:#efe4c9}
.contact-table-plane{fill:#d8c89f;stroke:#9a8557;stroke-width:1}
.contact-shot-guide{fill:none;stroke:var(--accent-2);stroke-width:1.5;stroke-dasharray:4 4;opacity:.8}
.contact-shot-arrow{fill:var(--accent-2);opacity:.85}
.contact-line-of-centers{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2.5 3;opacity:.58}
.contact-ball-shadow{fill:#4b3c2b;opacity:.2}
.contact-ball-shell{stroke:#29251f;stroke-width:1.4}
.contact-ball-stripe{pointer-events:none}
.contact-ball-number-disc{fill:#f8f4e8;stroke:#29251f;stroke-width:.55}
.contact-ball-number{fill:#171512;font:700 8px/1 ui-sans-serif,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.contact-ball-ghost{opacity:.58}
.contact-ball-ghost .contact-ball-shell{fill-opacity:.3;stroke-width:1.8;stroke-dasharray:4 3}
.contact-ball-ghost .contact-ball-stripe{opacity:.38}
.contact-point{fill:var(--accent);stroke:#fff8e8;stroke-width:1}
.contact-view-label{fill:var(--faint);font:700 6px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.11em;text-anchor:middle}
.contact-visual-stack .visual-caption{flex-wrap:wrap;font-variant-numeric:tabular-nums}
.contact-overview{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}

/* Two-Way is a separate evidence workflow, not a Runout visit. */
.solve[data-mode="two-way"] #solve-form .solve-fields>label:not(#solve-pool-mode-control),
.solve[data-mode="two-way"] #solve-form>.solve-actions,
.solve[data-mode="two-way"] #solve-form>details,
.solve[data-mode="two-way"] #solve-settings-status,
.solve[data-mode="two-way"] #robust-search-results,
.solve[data-mode="two-way"] #pool-search-results{display:none}
#two-way-lab{min-width:0}
#two-way-lab h4,#two-way-lab h5,#two-way-lab h6{margin:1rem 0 .5rem;font-size:1rem}
#two-way-lab p{font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}
#two-way-lab fieldset{min-width:0;margin:.8rem 0;padding:.75rem;border:1px solid var(--rule)}
#two-way-lab legend{font-size:.85rem;font-weight:700}
.two-way-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin:.6rem 0}
#two-way-lab label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;min-width:0}
#two-way-lab input,#two-way-lab select{max-width:100%;min-width:0;width:100%}
.two-way-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
#two-way-lab button{min-height:2.5rem;white-space:normal}
.two-way-candidate{margin:1rem 0;padding:.8rem;border:1px solid var(--rule);border-radius:.3rem}
.two-way-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;font-size:.8rem}
.two-way-counts dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700}
.two-way-replay{border-top:1px solid var(--rule);padding:.5rem 0}
#two-way-lab pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto;font-size:.75rem}
.two-way-badge{font-weight:700;border-left:3px solid var(--accent);padding-left:.5rem}
#two-way-lab [role="status"]{overflow-wrap:anywhere}
/* Native select arrows paint inside the right padding; keep truncated option text clear of them. */
.wasm-app select:not(.table-toolbar select){padding-right:1.6rem}