/* /gamepad-tester/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
@media(max-width:520px){.gp-head h1{margin-bottom:0.25rem}.gp-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.gp-duo{grid-template-columns:minmax(0,1.2fr) minmax(22rem,.8fr)}}
.gp-stage{padding:1rem}
@media(max-width:520px){.gp-stage{padding:0.75rem}}

/* the first thing a visitor sees: the press-a-button prompt */
.gp-prompt{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1rem;margin:0 0 0.75rem;border:2px dashed var(--line-2);border-radius:0.75rem;background:var(--surface-2)}
.gp-prompt b{display:block;font-size:1.0625rem}
.gp-prompt small{display:block;color:var(--muted);font-size:0.8125rem;line-height:1.45;margin-top:0.125rem}
.gp-prompt.ok{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.gp-pulse{flex:none;width:0.875rem;height:0.875rem;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal);animation:gp-pulse 1.6s ease-out infinite}
.gp-prompt.ok .gp-pulse{animation:none;background:var(--ok)}
@keyframes gp-pulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 0.75rem transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.gp-pulse{animation:none}}

.gp-bar{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;justify-content:space-between;margin:0 0 0.5rem}
.gp-bar .chip{padding:0.375rem 0.625rem;font-size:0.8125rem}
.gp-pads .chip{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-id{margin:0 0 0.25rem;font-family:var(--mono);font-size:0.75rem;color:var(--muted);overflow-wrap:anywhere}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* the drawn controller (SVG): shapes take the site's tokens */
.gp-svg{display:block;width:100%;max-width:40rem;height:auto;margin:0 auto}
.gp-body{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1.5}
.gp-shape,.gp-well,.gp-tbase{fill:var(--surface);stroke:var(--line-2);stroke-width:1.25}
.gp-lit,.gp-tfill{fill:var(--signal)}
.gp-svg text{font-family:var(--mono);font-size:9px;fill:var(--ink-2);text-anchor:middle;pointer-events:none}
.gp-svg .gp-face{font-size:11px;font-weight:600}
.gp-svg .gp-small{font-size:8px;fill:var(--muted)}
.gp-svg .gp-tiny{font-size:7px;fill:var(--muted)}
.gp-svg .gp-b.on text,.gp-svg .gp-trig.on text{fill:var(--signal-ink)}
.gp-svg .gp-b.on .gp-shape{stroke:var(--ink)}
.gp-trail{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.gp-dot{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.gp-svg.off .gp-dot{fill:var(--line-2)}

/* number lists under the drawing */
.gp-readout{display:grid;gap:0.75rem;margin-top:0.75rem}
@media(min-width:640px){.gp-readout{grid-template-columns:2fr 1fr}}
.gp-sec{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:1.125rem 0 0.375rem}
.gp-readout .gp-sec{margin-top:0}
.gp-sec small{text-transform:none;letter-spacing:0;font-size:0.75rem;opacity:.85}
.gp-tests>.gp-sec:first-child{margin-top:0}
.gp-btns,.gp-axes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:0.25rem;font-family:var(--mono);font-size:0.75rem}
.gp-axes{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}
.gp-btns li,.gp-axes li{display:flex;justify-content:space-between;gap:0.25rem;padding:0.25rem 0.375rem;border:1px solid var(--line);border-radius:0.3125rem;background:var(--surface);min-width:0}
.gp-btns li span:first-child,.gp-axes li span:first-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-btns li.on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.gp-btns li.on span:first-child{color:var(--signal-ink)}
.gp-btns li.chat{box-shadow:inset 0 0 0 2px var(--bad)}
.gp-btns:empty::after,.gp-axes:empty::after{content:"—";color:var(--muted)}
.gp-note{margin:0.75rem 0 0;font-size:0.8125rem;color:var(--warn)}

/* tests panel */
.gp-tests{padding:1rem 1.125rem}
.gp-help{margin:0 0 0.5rem;font-size:0.875rem;color:var(--ink-2);line-height:1.5}
.gp-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;margin:0.25rem 0 0.5rem}
.gp-status{font-size:0.875rem;color:var(--muted)}
.gp-status.bad{color:var(--bad);font-weight:600}
.btn:disabled,.chip:disabled{opacity:.55;cursor:default;filter:none}
.gp-meter{height:0.375rem;border-radius:0.25rem;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin:0 0 0.5rem}
.gp-meter span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.gp-table{width:100%;border-collapse:collapse;font-size:0.8125rem;margin:0.25rem 0 0.5rem}
.gp-table th{font-family:var(--mono);font-weight:500;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:0.25rem 0.375rem;border-bottom:1px solid var(--line)}
.gp-table td{padding:0.375rem;border-bottom:1px solid var(--line);font-family:var(--mono);vertical-align:top}
.gp-table td.v-none{color:var(--ok);font-weight:600}
.gp-table td.v-slight{color:var(--warn);font-weight:600}
.gp-table td.v-drifting{color:var(--bad);font-weight:600}
.gp-thr{margin:0 0 0.25rem;font-size:0.8125rem;color:var(--muted);line-height:1.5}

.gp-sticks{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin:0.25rem 0}
.gp-sticks figure{margin:0;text-align:center}
.gp-sticks figcaption{font-size:0.8125rem;color:var(--muted);margin-top:0.25rem}
.gp-xy{display:block;font-family:var(--mono);font-size:0.75rem;color:var(--ink-2)}
.gp-big{display:block;width:100%;max-width:11rem;height:auto;margin:0 auto}
.gp-ring{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1.5}
.gp-cross{stroke:var(--line);stroke-width:1}
.gp-dz{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3}
.gp-secs path{fill:var(--surface-2);stroke:var(--line);stroke-width:0.75}
.gp-secs path.hit{fill:var(--signal);opacity:.55}
.gp-big .gp-trail{stroke-width:2}
.gp-big .gp-dot{stroke-width:2}