/* /touch-screen-test/ 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){.ts-head h1{margin-bottom:0.25rem}.ts-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}

.ts-grid{display:grid;gap:1rem}
@media(min-width:860px){.ts-grid{grid-template-columns:1.35fr 1fr;align-items:start}}
.ts-stage,.ts-side{padding:1.125rem;min-width:0}
@media(max-width:520px){.ts-stage,.ts-side{padding:0.875rem}}

/* a small picture of the grid: filled cells, one flagged, a few still empty */
.ts-preview{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1.5rem;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:0.625rem;background:var(--line);overflow:hidden;margin:0 0 0.875rem}
.ts-preview i{display:block;background:var(--surface)}
.ts-preview i.f{background:var(--accent)}
.ts-preview i.x{background:var(--bad);opacity:.6}
@media(min-width:860px){.ts-preview{grid-auto-rows:2.5rem}}

.ts-start{width:100%;justify-content:center;font-size:1.0625rem;padding:0.875rem 1rem}
.ts-chips{gap:0.375rem;margin:0.75rem 0 0}
.ts-chips .chip{padding:0.375rem 0.75rem;font-size:0.8125rem}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
kbd{font-family:var(--mono);font-size:0.8125em;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}
.ts-note{margin:0.75rem 0 0;font-size:0.8125rem;color:var(--muted);line-height:1.55}
.ts-status{margin:0.5rem 0 0;font-size:0.8125rem;color:var(--muted)}
.ts-status:empty{display:none}
.ts-nofs{margin:0.875rem 0 0;padding:0.75rem 0.875rem;border:1px solid var(--line);border-left:0.25rem solid var(--warn);border-radius:0.5rem;background:var(--surface-2);font-size:0.875rem;line-height:1.55}
.ts-nofs p{margin:0 0 0.375rem}
.ts-nofs ol{margin:0;padding-left:1.25rem}
.ts-nofs li{margin:0.125rem 0}

.ts-sec{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 0.5rem}
.ts-sec + *{margin-top:0}
.ts-summary{margin:0 0 1rem}
.ts-help{margin:0;font-size:0.875rem;color:var(--ink-2);line-height:1.55}
.ts-res{margin:0 0 0.5rem;padding-left:1.125rem;font-size:0.9rem;line-height:1.55}
.ts-legend{list-style:none;margin:0;padding:0;font-size:0.875rem;line-height:1.5;color:var(--ink-2)}
.ts-legend li{display:flex;gap:0.5rem;align-items:flex-start;margin:0 0 0.375rem}
.ts-legend li > i{flex:0 0 1rem;height:1rem;margin-top:0.125rem;border-radius:0.1875rem;border:1px solid var(--line-2)}
.ts-legend .lg-f{background:var(--accent)}
.ts-legend .lg-x{background:var(--bad);opacity:.6}
.ts-legend .lg-m{border:2px dashed var(--warn)}
.ts-legend .lg-g{border:0;border-top:3px dashed var(--bad);border-radius:0;height:0;margin-top:0.5rem}

/* ------------------------------------------------------------- the test surface */
html.ts-locked,html.ts-locked body{overflow:hidden;overscroll-behavior:none}
.ts-screen{position:fixed;inset:0;z-index:1000;background:var(--surface);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;overflow:hidden;overscroll-behavior:none}
.ts-screen[hidden]{display:none}
.ts-surf{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.ts-hud{position:absolute;left:0.5rem;right:0.5rem;bottom:max(0.5rem,env(safe-area-inset-bottom));max-width:40rem;margin:0 auto;padding:0.5rem 0.625rem;border:1px solid var(--line-2);border-radius:0.75rem;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);transition:opacity .2s}
.ts-hud,.ts-hud .chip{-webkit-tap-highlight-color:transparent}
.ts-hud[data-pos="top"]{bottom:auto;top:max(0.5rem,env(safe-area-inset-top))}
.ts-hud.touching{opacity:.15;pointer-events:none}
.ts-modes,.ts-bar{display:flex;flex-wrap:wrap;gap:0.375rem}
.ts-hud .chip{padding:0.3125rem 0.625rem;font-size:0.8125rem}
.ts-hud .chip[hidden]{display:none}
.ts-read{margin:0.375rem 0 0.125rem;font-family:var(--mono);font-size:0.75rem;line-height:1.45;color:var(--ink)}
.ts-tip{margin:0 0 0.375rem;font-size:0.75rem;line-height:1.45;color:var(--muted)}
.ts-tip:empty{display:none}
#leave{margin-left:auto}

@media(prefers-reduced-motion:reduce){.ts-hud{transition:none}}