/* ===========================================================================
 * Shared focus-ring tokens for all four item renderers.
 * ===========================================================================
 * One canonical :focus-visible visual across McItem, AnalogyItem, PassageItem,
 * PassageEditItem so the keyboard a11y indicator is identical across surfaces
 * and matches whatever theme accent is active.
 *
 * Token: 2px solid outline in the theme accent, 2px offset, 4px radius to
 * match the choice card corners. Falls back to a sensible warm orange if
 * --accent isn't set.
 *
 * Targets the renderer-emitted class names directly (NOT surface-scoped
 * shims), so every host that consumes these renderers gets the ring for free.
 * Loaded once globally from index.html.
 * --------------------------------------------------------------------------- */

:root {
  --item-focus-color: var(--accent, #B86E3E);
  --item-focus-width: 2px;
  --item-focus-offset: 2px;
}

/* Choice buttons across all four renderers */
.mc-choice:focus-visible,
.ai-choice:focus-visible,
.pi-choice:focus-visible,
.pei-choice:focus-visible {
  outline: var(--item-focus-width) solid var(--item-focus-color);
  outline-offset: var(--item-focus-offset);
  border-radius: 10px;
}

/* Eliminate buttons (right-side affordance on each choice row) */
.mc-elim:focus-visible,
.ai-elim:focus-visible,
.pi-elim:focus-visible,
.pei-elim:focus-visible {
  outline: var(--item-focus-width) solid var(--item-focus-color);
  outline-offset: var(--item-focus-offset);
  border-radius: 6px;
}

/* Submit buttons owned by the renderer (testlet mode) */
.mc-submit:focus-visible,
.pi-submit:focus-visible,
.pei-submit:focus-visible {
  outline: var(--item-focus-width) solid var(--item-focus-color);
  outline-offset: var(--item-focus-offset);
}

/* High-contrast / forced-colors fallback — system focus colors win there. */
@media (forced-colors: active) {
  .mc-choice:focus-visible,
  .ai-choice:focus-visible,
  .pi-choice:focus-visible,
  .pei-choice:focus-visible,
  .mc-elim:focus-visible,
  .ai-elim:focus-visible,
  .pi-elim:focus-visible,
  .pei-elim:focus-visible,
  .mc-submit:focus-visible,
  .pi-submit:focus-visible,
  .pei-submit:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}