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

.kt-stage{padding:1rem}
@media(max-width:520px){.kt-stage{padding:0.75rem}}
.kt-bar{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;justify-content:space-between;margin:0 0 0.625rem}
.kt-chips{gap:0.375rem}
.kt-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}

/* the focusable test area: a dashed mat until it has focus, then solid accent */
.kt-area{border:2px dashed var(--line-2);border-radius:0.75rem;background:var(--surface-2);padding:0.625rem;outline:none;cursor:text}
.kt-area:focus{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kt-hint{display:flex;align-items:center;gap:0.625rem;margin:0 0 0.5rem;font-size:0.875rem;color:var(--ink-2);line-height:1.4}
.kt-hint b{color:var(--ink)}
.kt-dot{flex:none;width:0.75rem;height:0.75rem;border-radius:50%;background:var(--signal);animation:kt-pulse 1.6s ease-out infinite}
.kt-hint.ok .kt-dot{animation:none;background:var(--ok)}
@keyframes kt-pulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 0.625rem transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.kt-dot{animation:none}}

/* the drawn keyboard (SVG) */
.kt-kb{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.kt-cap{fill:var(--surface);stroke:var(--line-2);stroke-width:1.25;transition:fill .08s}
.kt-kb text{font-family:var(--mono);font-size:13px;fill:var(--ink-2);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.kt-kb text.sm{font-size:10px}
.kt-kb text.xs{font-size:8.5px}
.kt-k.done .kt-cap{fill:var(--accent-soft);stroke:var(--accent)}
.kt-k.done text{fill:var(--accent)}
.kt-k.on .kt-cap{fill:var(--signal);stroke:var(--ink)}
.kt-k.on text{fill:var(--signal-ink);font-weight:600}
.kt-k.chat .kt-cap{stroke:var(--bad);stroke-width:3}
.kt-k.os .kt-cap{stroke-dasharray:4 3}
.kt-extra{margin:0.5rem 0 0;font-family:var(--mono);font-size:0.75rem;color:var(--muted);overflow-wrap:anywhere}

.kt-stats{margin-top:0.75rem}
.kt-stats .stat{padding:0.5rem 0.75rem}
.kt-stats .v small{font-size:0.8125rem;font-weight:500;color:var(--muted)}
.kt-stats .v.bad{color:var(--bad)}
.kt-last .v{font-family:var(--mono);font-size:1rem;line-height:2.0625rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;margin-top:0.75rem}
.kt-status{font-size:0.8125rem;color:var(--muted)}

/* the three result panels */
.kt-grid{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:760px){.kt-grid{grid-template-columns:1fr 1fr}.kt-logp{grid-column:1/-1}}
@media(min-width:1100px){.kt-grid{grid-template-columns:1fr 1fr 1.6fr}.kt-logp{grid-column:auto}}
.kt-panel{padding:1rem 1.125rem;min-width:0}
.kt-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}
.kt-sec small{text-transform:none;letter-spacing:0;font-size:0.75rem;opacity:.85}
.kt-help{margin:0 0 0.625rem;font-size:0.875rem;color:var(--ink-2);line-height:1.5}
.kt-verdict{margin:0 0 0.5rem;font-size:0.9375rem;line-height:1.5}
.kt-verdict b{font-size:1.25rem;margin-right:0.25rem}
.kt-verdict.bad{color:var(--bad);font-weight:600}
.v-nkro,.v-6kro{color:var(--ok)}
.v-low{color:var(--warn)}
.kt-small{margin:0 0 0.25rem;font-size:0.8125rem;color:var(--muted);overflow-wrap:anywhere}
.kt-small span{font-family:var(--mono);color:var(--ink-2)}
.kt-thr{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;margin:0 0 0.625rem}
.kt-thr input{width:5rem}
.kt-hits{margin:0;padding-left:1.25rem;font-family:var(--mono);font-size:0.8125rem}
.kt-hits b{color:var(--bad)}
.kt-logwrap{max-height:16rem;overflow:auto;border:1px solid var(--line);border-radius:0.5rem;margin:0 0 0.625rem}
.kt-log{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.75rem}
.kt-log th{position:sticky;top:0;background:var(--surface-2);font-weight:500;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:0.3125rem 0.5rem;border-bottom:1px solid var(--line)}
.kt-log td{padding:0.25rem 0.5rem;border-bottom:1px solid var(--line);white-space:nowrap}
.kt-log tr.ev-up td{color:var(--muted)}
.kt-log tr.ev-down td:first-child{color:var(--accent);font-weight:600}
.kt-log tbody:empty::after{content:"Press a key in the test area.";display:block;padding:0.5rem;color:var(--muted)}
.kt-reserved kbd{font-size:0.8125rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}