/* Chameleon UI · focus + keyboard-nav layer */
:root{--cui-focus:var(--cui-primary)}
/* WCAG 2.4.7/2.4.11/2.4.13 ring — 2px min, offset so it never sits under the element, halo for 3:1 on any surface */
:where(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],
[role=menuitem],[role=option],[role=switch],[contenteditable=true]):focus-visible{
  outline:2px solid var(--cui-focus);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cui-focus) 35%,transparent);border-radius:4px}
/* skip link — off-screen until focused */
.cui-skip{position:absolute;left:var(--cui-sp-2);top:-5rem;z-index:1000;padding:.6rem 1rem;min-height:44px;
  display:inline-flex;align-items:center;border-radius:var(--cui-radius);background:var(--cui-primary);
  color:var(--cui-bg);font-weight:600;transition:top .15s ease}
.cui-skip:focus{top:var(--cui-sp-2)}
/* screen-reader-only (visible label without visual weight) */
.cui-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a programmatically-focused landmark (skip target, dialog panel) shouldn't show a lingering ring */
[tabindex="-1"]:focus{outline:none}
/* dialog — the canonical focus-trap surface (author adds role=dialog aria-modal=true aria-labelledby=…) */
.cui-dialog[hidden]{display:none}
.cui-dialog{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:var(--cui-sp-4);
  background:color-mix(in srgb,#000 55%,transparent)}
.cui-dialog__panel{background:var(--cui-surface);border:1px solid var(--cui-line);
  border-radius:var(--cui-radius);padding:var(--cui-sp-6);width:100%;max-width:min(32rem,100%);
  max-height:90dvh;overflow:auto}
/* roving group (toolbar/menu/tablist): one item tabbable at a time, arrows move focus */
[data-cui-roving]{display:flex;flex-wrap:wrap;gap:var(--cui-sp-2)}
[data-cui-roving][data-orientation=vertical]{flex-direction:column}
@media(prefers-reduced-motion:reduce){.cui-skip{transition:none}}