/* KeypadTest - controller tester (scoped under .ct) */
.ct{box-sizing:border-box;width:100%;color:var(--text);display:flex;flex-direction:column;gap:12px;min-height:1500px}
.ct *,.ct *::before,.ct *::after{box-sizing:border-box}
.ct--drift{min-height:1650px}
.ct-noscript{padding:12px;border:1px solid var(--warn);border-radius:8px;color:var(--warn)}
.ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;min-width:0}
.ct-box h3{margin:0 0 8px}
.ct-top{order:1}.ct-main{order:2}.ct-sticks{order:3}.ct-drift{order:4}.ct-vib{order:5}.ct-raw{order:6}
.ct--drift .ct-drift{order:2}.ct--drift .ct-main{order:3}.ct--drift .ct-sticks{order:4}
.ct button,.ct select{font:inherit;font-size:16px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;min-height:44px;cursor:pointer}
.ct button:hover{border-color:var(--accent)}
.ct button[aria-pressed=true]{border-color:var(--accent);background:var(--key-tested)}
.ct button:disabled{opacity:.5;cursor:not-allowed}
.ct button:focus-visible,.ct select:focus-visible,.ct input:focus-visible,.ct summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-status{margin:0 0 10px;min-height:3em}
@media (max-width:480px){.ct-status{min-height:8em}}
.ct-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.ct-pick{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--muted)}
.ct-pick[hidden]{display:none}
.ct-skin{display:flex;gap:6px}
.ct-count{margin-left:auto;align-self:center}
.ct-count b{color:var(--accent);font-variant-numeric:tabular-nums}
.ct-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0 0}
.ct-info div{min-width:0}
.ct-info dt{font-size:.8rem;color:var(--muted)}
.ct-info dd{margin:0;overflow-wrap:anywhere;min-height:1.5em}
.ct-info div:first-child dd{min-height:6em}
.ct-stage{width:100%;max-width:640px;margin:0 auto;aspect-ratio:520/340}
.ct-stage svg{display:block;width:100%;height:100%}
.ct .cb{fill:var(--key-bg);stroke:var(--key-border);stroke-width:2;transition:fill .05s}
.ct .cb.tested{fill:var(--key-tested);stroke:var(--accent)}
.ct .cb.on{fill:var(--key-pressed);stroke:var(--key-pressed)}
.ct .cbody{fill:var(--surface-2);stroke:var(--border);stroke-width:2}
.ct .cl{fill:var(--key-text);font:600 13px var(--font);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ct .cdot{fill:var(--accent);stroke:none}
.ct-trig{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 16px;margin-top:8px}
.ct-tbar{display:grid;grid-template-columns:auto 1fr 4ch;gap:10px;align-items:center;min-height:44px}
.ct-tbar b{font-variant-numeric:tabular-nums;text-align:right}
.ct-meter{height:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;overflow:hidden}
.ct-meter i{display:block;height:100%;width:0;background:var(--accent)}
.ct-dz{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px}
.ct-dz input{flex:1 1 160px;min-height:44px;accent-color:var(--accent)}
.ct-plots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.ct-plot{margin:0;text-align:center}
.ct-plot figcaption{font-weight:600;margin-bottom:4px}
.ct-plot canvas{width:100%;max-width:300px;aspect-ratio:1;height:auto;background:var(--bg);border:1px solid var(--border);border-radius:50%}
.ct--drift .ct-plot canvas{max-width:380px}
.ct-read{margin:6px 0 0;font:.85rem var(--mono);color:var(--muted);overflow-wrap:anywhere}
.ct-plots[hidden],.ct-axes[hidden]{display:none}
.ct-axes{display:grid;gap:6px}
.ct-axrow{display:grid;grid-template-columns:7ch 1fr 8ch;gap:10px;align-items:center;font:.85rem var(--mono)}
.ct-axrow .ct-meter{position:relative}
.ct-axrow .ct-meter i{position:absolute;top:0;width:3px;background:var(--accent)}
.ct-circ{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ct-circ p{flex:1 1 100%;margin:4px 0 0;min-height:3em}
.ct-dprog{margin:10px 0}
.ct-dmsg{min-height:1.6em;margin:0}
.ct-dres{list-style:none;padding:0;margin:8px 0 0;min-height:110px}
.ct-dres li{padding:8px 12px;margin-bottom:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.ct-dres li.ok{border-color:var(--accent)}.ct-dres li.warn{border-color:var(--warn)}.ct-dres li.bad{border-color:var(--danger)}
.ct-vmsg{margin:0 0 8px;color:var(--muted);min-height:3em}
.ct-vbtns{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:56px;gap:8px;min-height:120px}
.ct-vbtns button{padding:6px}
.ct-raw summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.ct-rawgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 12px;font:.82rem var(--mono)}
.ct-rawgrid span{display:flex;justify-content:space-between;gap:6px}
@media (max-width:480px){.ct-box{padding:10px 12px}.ct-count{margin-left:0;flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.ct .cb{transition:none}}