/* VoidVision launcher controller focus ring (owned by the controller lane).
   Everything here is inert until a controller drives (html[data-pad-active=true]).
   Colours come from the shared tokens (tokens.css); the fallbacks are the signature theme. */

/* ---------- focus ring: two-tone so it reads on light (Paper) and dark themes alike ---------- */
#vv-pad-ring{position:fixed;inset:auto;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;
  pointer-events:none;z-index:2147483646;box-sizing:border-box;border-radius:var(--vv-radius-s,8px);display:none!important;
  transition:left var(--vv-dur-1,120ms) var(--vv-ease-out,cubic-bezier(.2,.8,.2,1)),top var(--vv-dur-1,120ms) var(--vv-ease-out,cubic-bezier(.2,.8,.2,1)),
    width var(--vv-dur-1,120ms) var(--vv-ease-out,cubic-bezier(.2,.8,.2,1)),height var(--vv-dur-1,120ms) var(--vv-ease-out,cubic-bezier(.2,.8,.2,1))}
html[data-pad-active=true] #vv-pad-ring[data-on=true]{display:block!important}
#vv-pad-ring::backdrop{display:none}
#vv-pad-ring::before{content:'';position:absolute;inset:0;border-radius:inherit;border:3px solid var(--vv-focus,#5ff5f6);
  box-shadow:var(--vv-focus-ring,0 0 0 2px var(--vv-bg,#05070d)),inset 0 0 0 1px var(--vv-bg,#05070d),0 0 18px -4px var(--vv-focus,#5ff5f6)}
#vv-pad-ring.vv-pad-deny::before{border-color:var(--vv-warn,#ffb347);animation:vv-pad-deny var(--vv-dur-3,320ms) var(--vv-ease-in-out,ease-in-out)}
@keyframes vv-pad-deny{25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-2px 0}}
.vv-pad-ring-hint{position:absolute;left:0;top:calc(100% + 8px);display:none;max-width:min(340px,calc(100vw - 32px));width:max-content;padding:6px 10px;
  border-radius:var(--vv-radius-s,6px);background:var(--vv-raised,#101826);color:var(--vv-ink,#eef6ff);border:1px solid var(--vv-edge-strong,#5ff5f680);
  box-shadow:var(--vv-shadow-2,0 8px 24px #0008);font:600 var(--vv-fs-1,12px)/var(--vv-lh-body,1.4) var(--vv-font-ui,system-ui,sans-serif);white-space:normal}
#vv-pad-ring[data-hint=true] .vv-pad-ring-hint{display:block}
#vv-pad-ring[data-hint-pos=above] .vv-pad-ring-hint{top:auto;bottom:calc(100% + 8px)}
/* the native outline would double the ring while a pad drives */
html[data-pad-active=true] [data-pad-focus]{outline:none!important}

/* ---------- toast + screen-reader live region ---------- */
#vv-pad-toast{position:fixed;inset:auto;left:50%;bottom:max(18px,env(safe-area-inset-bottom));translate:-50% 0;margin:0;z-index:2147483647;display:none;
  padding:10px 16px;border-radius:var(--vv-radius-m,10px);border:1px solid var(--vv-edge-strong,#5ff5f680);background:var(--vv-raised,#101826);color:var(--vv-ink,#eef6ff);
  box-shadow:var(--vv-shadow-2,0 8px 24px #0008);font:600 var(--vv-fs-2,13px)/1.3 var(--vv-font-ui,system-ui,sans-serif);pointer-events:none;max-width:calc(100vw - 32px)}
#vv-pad-toast[data-on=true]{display:block}
.vv-pad-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---------- [data-pad-hint] glyph chips (glyph text lives in --vv-pad-g-* set by pad-nav.js) ---------- */
vv-pad-chip{display:none}
html[data-pad-active=true] vv-pad-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;margin-inline-start:.45em;padding:0 .35em;
  border-radius:999px;background:var(--vv-ink,#eef6ff);color:var(--vv-bg,#05070d);font:700 .78em/1 var(--vv-font-ui,system-ui,sans-serif);vertical-align:middle;letter-spacing:0}
vv-pad-chip[data-act=confirm]::before{content:var(--vv-pad-g-confirm,"A")}
vv-pad-chip[data-act=back]::before{content:var(--vv-pad-g-back,"B")}
vv-pad-chip[data-act=menu]::before{content:var(--vv-pad-g-menu,"Menu")}
vv-pad-chip[data-act=view]::before{content:var(--vv-pad-g-view,"View")}
vv-pad-chip[data-act=tabs]::before{content:var(--vv-pad-g-tabs,"LB/RB")}
vv-pad-chip[data-act=scroll]::before{content:var(--vv-pad-g-scroll,"RS")}
vv-pad-chip[data-act=x]::before{content:var(--vv-pad-g-x,"X")}
vv-pad-chip[data-act=y]::before{content:var(--vv-pad-g-y,"Y")}

/* ---------- controller sheets: keyboard, listbox, colour picker, help ---------- */
.vv-pad-sheet{width:min(720px,calc(100vw - 16px));max-height:calc(100dvh - 16px);margin:auto;padding:0;overflow:auto;box-sizing:border-box;
  border-radius:var(--vv-radius-l,14px);border:1px solid var(--vv-edge-strong,#5ff5f680);background:var(--vv-surface,#0b1220);color:var(--vv-ink,#eef6ff);
  box-shadow:var(--vv-shadow-3,0 24px 70px #000a);font:var(--vv-fs-2,14px)/var(--vv-lh-body,1.4) var(--vv-font-ui,system-ui,sans-serif)}
.vv-pad-sheet::backdrop{background:var(--vv-scrim,#02040acc)}
.vv-pad-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.vv-pad-sheet-head h2{margin:0;font:700 var(--vv-fs-3,16px)/var(--vv-lh-tight,1.2) var(--vv-font-display,var(--vv-font-ui,system-ui));letter-spacing:var(--vv-track-caps,.04em)}
.vv-pad-sheet-body{display:grid;gap:12px;padding:8px 18px 14px}
.vv-pad-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 18px 14px;border-top:1px solid var(--vv-edge,#ffffff1f);color:var(--vv-ink-2,#c3cfdc);font-size:var(--vv-fs-1,12px)}
.vv-pad-legend-item{display:inline-flex;align-items:center;gap:4px}
.vv-pad-glyph{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;padding:0 .4em;border-radius:999px;box-sizing:border-box;
  background:var(--vv-ink,#eef6ff);color:var(--vv-bg,#05070d);font:700 12px/1 var(--vv-font-ui,system-ui,sans-serif)}
.vv-pad-sheet button{min-height:44px;padding:8px 12px;border-radius:var(--vv-radius-s,8px);border:1px solid var(--vv-edge,#ffffff2a);background:var(--vv-surface-2,#131c2c);
  color:var(--vv-ink,#eef6ff);font:600 var(--vv-fs-2,14px)/1.1 var(--vv-font-ui,system-ui,sans-serif);cursor:pointer}
.vv-pad-sheet button.primary{background:var(--vv-accent,#5ff5f6);color:var(--vv-accent-ink,#05070d);border-color:transparent}
.vv-pad-sheet button:disabled{opacity:.5;cursor:not-allowed}
.vv-pad-sheet button[aria-pressed=true],.vv-pad-sheet button[aria-selected=true],.vv-pad-sheet button[aria-checked=true]{border-color:var(--vv-focus,#5ff5f6);box-shadow:inset 0 0 0 1px var(--vv-focus,#5ff5f6)}
/* keyboard */
.vv-osk-field{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:var(--vv-radius-s,8px);border:1px solid var(--vv-edge-strong,#5ff5f680);
  background:var(--vv-bg,#05070d);font:600 var(--vv-fs-4,18px)/1.2 var(--vv-font-mono,ui-monospace,monospace);overflow:hidden;white-space:pre}
.vv-osk-field[data-empty=true] .vv-osk-text{color:var(--vv-ink-3,#8b99a8)}
.vv-osk-caret{width:2px;height:1.2em;margin-left:2px;background:var(--vv-focus,#5ff5f6);animation:vv-pad-caret 1s steps(1) infinite}
@keyframes vv-pad-caret{50%{opacity:0}}
.vv-osk-keys{display:grid;gap:6px}
.vv-osk-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.vv-osk-key{padding:0!important;font-size:var(--vv-fs-3,16px)!important}
.vv-osk-bottom{grid-template-columns:1.2fr 1fr .7fr 2fr 1.3fr 1.2fr 1.2fr}
/* listbox */
.vv-pad-listbox{display:grid;gap:6px;max-height:min(60dvh,520px);overflow:auto;padding:2px}
.vv-pad-option{text-align:start}
/* colour */
.vv-pad-color-top{display:flex;align-items:center;gap:12px}
.vv-pad-color-preview{width:64px;height:40px;border-radius:var(--vv-radius-s,8px);border:1px solid var(--vv-edge-strong,#ffffff55)}
.vv-pad-color-hex{font:600 var(--vv-fs-3,16px)/1 var(--vv-font-mono,ui-monospace,monospace)}
.vv-pad-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.vv-pad-swatch{min-height:40px!important;border:2px solid var(--vv-edge,#ffffff33)!important}
.vv-pad-color-slider{display:grid;grid-template-columns:7em 1fr;align-items:center;gap:10px}
.vv-pad-sheet-actions{display:flex;justify-content:flex-end;gap:8px}
/* help */
.vv-pad-help{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center}
.vv-pad-help dt{justify-self:end}.vv-pad-help dd{margin:0}
.vv-pad-help-note{margin:0;color:var(--vv-ink-2,#c3cfdc)}

@media (max-width:520px){.vv-osk-row{gap:4px}.vv-osk-keys{gap:4px}.vv-pad-sheet-body{padding:6px 10px 10px}.vv-pad-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vv-osk-bottom{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-height:480px){.vv-pad-sheet button{min-height:34px}.vv-osk-field{min-height:36px}.vv-pad-legend{padding:6px 18px 8px}}
@media (prefers-reduced-motion:reduce){#vv-pad-ring{transition:none}#vv-pad-ring.vv-pad-deny::before,.vv-osk-caret{animation:none}}
html[data-vv-motion-level=off] #vv-pad-ring,html[data-vv-motion-level=calm] #vv-pad-ring{transition:none}
html[data-vv-motion-level=off] .vv-osk-caret,html[data-vv-motion-level=off] #vv-pad-ring.vv-pad-deny::before{animation:none}