/* /aim/ only: aim drills. One square field on the left, the drill ladder beside it, the result sheet under both.
   Narrow screens stack: field first, so a run needs no scrolling. The field is a clean sheet; the only things
   added on top of it are the short effects and a fine centre mark on the target.
   Shared pieces (.intro, .sheet, .sheet-h, .btn, .chips, kbd, code, .sr, the focus ring, the colour tokens and the
   fonts) come from site.css. The play field is .aim-field, because site.css uses .field for text inputs.
   One light look, like the rest of the site. Every colour is a token. */
:root { --target: var(--blue); --target-core: var(--sheet); --ghost: #8793a0; --mark: var(--ink); --line: var(--field); }

.tool { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.tool > * { min-width: 0; }
/* The field never grows taller than the window leaves room for, so the first view shows all of it. 334px is the distance from the
   top of the page to the top of the field inside the site's frame on a wide screen (327px) plus 7px; the prototype had 260px for
   its own, shorter header (253px plus 7px). */
.play { display: grid; gap: 10px; justify-items: stretch; width: min(100%, 640px, max(300px, calc(100dvh - 334px))); margin-inline: auto; }
.status { margin: 0; padding: 9px 12px; min-height: 44px; display: flex; align-items: center; background: var(--sheet); border: 1px solid var(--ink);
  font: 500 14.5px/1.35 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.status.flash { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.aim-field { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; background: var(--sheet); border: 1px solid var(--ink);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; overflow: hidden; }
.aim-field[data-phase="running"] { touch-action: none; }
.aim-field[data-phase="done"] { cursor: default; }
.aim-field svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.f-axis { stroke: var(--rule); stroke-width: 1; fill: none; }
.f-place { stroke: var(--ghost); stroke-width: 1.5; fill: none; }
.f-next { fill: none; stroke: var(--ghost); stroke-width: 2.5; stroke-dasharray: 9 7; }
/* The border line of the target is drawn INSIDE its radius (see drawTargets in ui.js), so the edge you see is the edge that counts. */
.f-cur { fill: var(--target); stroke: var(--ink); stroke-width: 2.5; }
.f-hair { stroke: var(--target-core); stroke-width: 1.5; fill: none; opacity: .8; }
.f-core { fill: var(--target-core); }
.f-dot { fill: var(--mark); opacity: .5; }
.f-miss { stroke: var(--bad); stroke-width: 3; fill: none; }
.aim-field.missed { border-color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
/* Effects: drawn after the click is timed, each under 250 ms, never in the way of a click (the svg takes no pointer events). */
.fx-ring { fill: none; stroke: var(--target); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: fx-ring 200ms ease-out forwards; }
.fx-time { font: 600 38px var(--mono); fill: var(--ink); stroke: var(--sheet); stroke-width: 7px; paint-order: stroke; text-anchor: middle; animation: fx-rise 220ms ease-out forwards; }
.fx-trace { stroke: var(--target); stroke-width: 4; stroke-linecap: round; animation: fx-fade 220ms linear forwards; }
.fx-miss { fill: none; stroke: var(--bad); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: fx-ring 200ms ease-out forwards; }
@keyframes fx-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
@keyframes fx-rise { 0% { transform: translateY(0); opacity: 1; } 65% { opacity: 1; } 100% { transform: translateY(-44px); opacity: 0; } }
@keyframes fx-fade { from { opacity: .55; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-ring, .fx-time, .fx-trace, .fx-miss { animation: none; display: none; } }
.done { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 10px 12px; background: var(--sheet); border: 1px solid var(--ink); color: var(--ink); cursor: default; }
.done-l { font: 600 12.5px var(--mono); color: var(--mute); display: block; }
.done-v { font: 600 16px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.done-a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mute); }
.under { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; color: var(--mute); }
.sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14.5px var(--sans); color: var(--ink); cursor: pointer; }
.sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.sw input:disabled, .sw input:disabled + span { cursor: not-allowed; color: var(--mute); }
.hint { margin: 0; font-size: 14px; color: var(--mute); }

.side { display: grid; gap: 14px; align-content: start; }
.opts { display: grid; gap: 10px; padding: 12px 14px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.opt-l { font: 500 13px var(--mono); color: var(--mute); min-width: 4.8em; }
.chips button { min-height: 40px; min-width: 52px; padding: 6px 12px; }
.chips button:disabled { color: var(--mute); background: none; cursor: not-allowed; text-decoration: line-through; }
.opt-note { margin: 0; font-size: 13.5px; color: var(--mute); }
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder li + li { border-top: 1px solid var(--rule); }
.ladder button { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: 0 6px; width: 100%; padding: 8px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.ladder button:hover { background: var(--tint); }
.ladder .n { font: 500 13px/1.7 var(--mono); color: var(--mute); }
.ladder .nm { font-weight: 500; color: var(--ink); font-size: 15.5px; }
.ladder .why { grid-column: 2; font-size: 13.5px; line-height: 1.4; color: var(--mute); }
.ladder button[aria-pressed="true"] { background: var(--ink); }
.ladder button[aria-pressed="true"] .n, .ladder button[aria-pressed="true"] .why { color: var(--rule); }
.ladder button[aria-pressed="true"] .nm { color: var(--sheet); font-weight: 600; }

.result-b { display: grid; gap: 18px; padding: 14px; }
.result-b > * { min-width: 0; margin: 0; }
.result-b p, .result-b pre, .result-b dl { margin: 0; }
.r-what { font: 500 13px var(--mono); color: var(--mute); }
.verdict { font-size: clamp(19px, 2.3vw, 25px); line-height: 1.3; font-weight: 600; color: var(--ink); max-width: 34em; text-wrap: balance; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--rule); }
.facts div { padding: 8px 12px; border-right: 1px solid var(--rule); margin-right: -1px; border-bottom: 1px solid var(--rule); margin-bottom: -1px; }
.facts dt { font: 500 12.5px var(--mono); color: var(--mute); }
.facts dd { margin: 2px 0 0; font: 500 17px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.facts dd small { display: block; font: 400 13px var(--sans); color: var(--mute); }
.h3 { font: 600 13px var(--mono); color: var(--ink); margin: 0 0 8px; }
.scroll { overflow-x: auto; }
/* Tables: the result tables are built by the script without thead or tbody; these rules replace the site's wider table rows. */
table { font-size: 14.5px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
th { font: 500 12.5px var(--mono); color: var(--mute); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num { font: 400 14.5px/1.5 var(--mono); color: var(--ink); }
.mv td:first-child { width: 34px; padding-right: 0; }
/* max-width: none, because site.css gives every svg max-width: 100%, which lets a narrow table squeeze the sketch to nothing. */
.mv svg { display: block; width: 26px; height: 26px; max-width: none; }
.g-box { fill: none; stroke: var(--rule); } .g-dot { fill: var(--ghost); } .g-line { stroke: var(--ink); stroke-width: .07; } .g-end { fill: var(--ink); }
.barcell { width: 38%; min-width: 90px; }
.bar { height: 14px; background: var(--blue); min-width: 2px; }
.slow .bar { background: var(--warn); }
.tag { font: 600 12px var(--mono); color: var(--warn); background: var(--warn-bg); padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.pm { display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pm > * { min-width: 0; }
.pm-t { display: grid; gap: 8px; }
.hitmap { display: block; width: 100%; max-width: 300px; height: auto; border: 1px solid var(--rule); background: var(--sheet); }
.hm-face { fill: var(--target); fill-opacity: .1; stroke: var(--ink); stroke-width: 2; }
.hm-half { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }
.hm-axis { stroke: var(--rule); stroke-width: 1; fill: none; }
.hm-lab { font: 500 11px var(--mono); fill: var(--mute); }
.hm-hit { fill: var(--mark); opacity: .55; }
.hm-miss { stroke: var(--bad); stroke-width: 2.5; fill: none; }
.hm-lean { stroke: var(--blue); stroke-width: 2; }
.hm-avg { fill: var(--sheet); stroke: var(--blue); stroke-width: 3.5; }
.lean { font-weight: 600; color: var(--ink); font-size: 16.5px; max-width: 30em; }
.series { position: relative; display: flex; align-items: flex-end; height: 96px; margin-top: 8px; border-bottom: 1px solid var(--line); max-width: 640px; }
.rep { display: flex; align-items: flex-end; gap: 2px; height: 100%; flex: 1 1 0; min-width: 0; padding: 0 1px; border-left: 1px solid var(--rule); }
.rep:first-child { border-left: 0; }
.cb { position: relative; flex: 1 1 0; min-width: 1px; min-height: 2px; background: var(--blue); border-radius: 2px 2px 0 0; }
.cb.miss { background: var(--bad); }
.cb.miss::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 2px; background: var(--bad); }
.medline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ink); pointer-events: none; }
.tp { display: grid; gap: 8px; }
.tp-val { font: 600 clamp(26px, 3.6vw, 36px)/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tp-val small { font: 500 15px var(--mono); color: var(--mute); margin-left: 6px; }
.tp-val.none { font-size: 17px; font-weight: 500; line-height: 1.4; max-width: 40em; }
.tp-note { font-size: 14.5px; color: var(--warn); background: var(--warn-bg); padding: 6px 10px; max-width: 46em; }
.formula { margin: 0; padding: 10px 12px; background: var(--note-bg); font: 400 13.5px/1.7 var(--mono); color: var(--ink); overflow-x: auto; white-space: pre; }
.small { font-size: 14px; color: var(--body); max-width: 46em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.empty { color: var(--mute); max-width: 44em; }
.how { padding: 4px 14px 14px; display: grid; gap: 0; }
.how dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.how dt { font: 600 13px var(--mono); color: var(--ink); padding-top: 12px; }
.how dd { margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: 14.5px; max-width: 62em; }
.how h3 { font: 600 13px var(--mono); color: var(--ink); margin: 16px 0 4px; }
.how ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; max-width: 62em; display: grid; gap: 6px; }

@media (max-width: 560px) {
  th, td { padding: 6px 5px; }
  .barcell { width: 26%; min-width: 44px; }
  .tag { display: inline-block; margin-left: 0; }
  /* On a phone each movement of the result takes two lines: the sketch and the name, then its figures under the name.
     The rows share the table's columns (subgrid), so the figures still line up; a long name or "not enough clicks yet" wraps. */
  #mv-t { display: grid; grid-template-columns: 34px auto minmax(24px, 1fr) auto auto auto; }
  #mv-t tr { display: grid; grid-column: 1 / -1; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); grid-template-columns: subgrid;
    align-items: center; border-bottom: 1px solid var(--rule); }
  #mv-t th, #mv-t td { border-bottom: 0; }
  #mv-t th { font-size: 11.5px; }
  #mv-t td.num { font-size: 13.5px; white-space: normal; }
  #mv-t tr > :first-child { grid-row: span 2; }
  #mv-t tr > :nth-child(2) { grid-column: 2 / -1; }
  #mv-t .barcell { width: auto; min-width: 0; }
}
@media (min-width: 700px) { .pm { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
@media (min-width: 900px) {
  /* The first column is as wide as the field (the same expression as .play), so a short window leaves no empty band beside it. */
  .tool { grid-template-columns: minmax(0, 640px) minmax(300px, 1fr);
    grid-template-columns: minmax(0, min(640px, max(300px, calc(100dvh - 334px)))) minmax(300px, 1fr); gap: 24px; align-items: start; }
  .play { margin-inline: 0; }
  .how dl { grid-template-columns: 11em minmax(0, 1fr); }
  .how dt { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
  .how dd { padding: 10px 0; margin: 0; }
}