/* ─────────────────────────────────────────────────────────────────
   css/author-keyboard-nav.css

   Phase E WYSIWYG polish — focus ring for the keyboard-focused tile.
   Visually distinct from the multi-select blue ring + the a11y
   violation red ring so authors can tell the three apart at a
   glance.
   ───────────────────────────────────────────────────────────────── */

.tile.kbd-focused {
  outline: 3px solid #F59E0B;     /* amber-500 — matches builder accent */
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}

/* Browsers paint a native focus ring on :focus — let the kbd-focused
   class supersede it for consistency with click-driven selection. */
.tile:focus {
  outline: none;
}
.tile:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 3px;
}