/* ===========================================================================
 * 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, radius matching
 * the choice card corners. The values come from the app-wide --focus-* tokens
 * in shared-chrome.css; this sheet only re-shapes the radius per control.
 *
 * 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.
 * --------------------------------------------------------------------------- */

/* Aliases onto the app-wide ring tokens (shared-chrome.css) so the choice rows
   and every other focusable control stay one visual. The literals are the
   fallback for a host that loads this sheet without shared-chrome.css. */
:root {
  --item-focus-color: var(--focus-color, var(--accent, #B86E3E));
  --item-focus-width: var(--focus-width, 2px);
  --item-focus-offset: var(--focus-offset, 2px);
}

/* Choice buttons across all four renderers */
.mc-choice:focus-visible,
.an-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,
.an-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,
  .an-choice:focus-visible,
  .pi-choice:focus-visible,
  .pei-choice:focus-visible,
  .mc-elim:focus-visible,
  .an-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;
  }
}