/* FocusBorder.kt — the app's standard focus treatment for a clickable row or card: a surfaceVariant
   fill and a 1.5 `outline` border on the element's own shape.
   focusVisualsEnabled() shows it only while the last input was a key; :focus-visible is the browser's
   equivalent of exactly that rule, so touch and mouse never see the ring. */
:where(a, button, input, [tabindex]):focus { outline: none; }

:where(a, button, input, [tabindex]):focus-visible,
.card:focus-visible, li.row:focus-visible, .gcard:focus-visible,
.gchip:focus-visible, .story:focus-visible {
  outline: none;
  background-color: var(--md-surface-variant);
  box-shadow: 0 0 0 1.5px var(--md-outline);
}
/* Each keeps its own corner radius, as focusBorder(shape) does. */
.card:focus-visible { border-radius: 12px; }
li.row:focus-visible { border-radius: 8px; }
.gcard:focus-visible { border-radius: 20px; }
.gchip:focus-visible { border-radius: 20px; }
.story:focus-visible { border-radius: 16px; }
.iconbtn:focus-visible, .swatch:focus-visible, .sw:focus-visible { border-radius: 50%; }
.tab:focus-visible, .chip:focus-visible, .btn:focus-visible { border-radius: 999px; }
.searchbox:focus-visible { box-shadow: 0 0 0 2px var(--md-primary); }

/* Keyboard users need a way past the rails; the app has no equivalent because a D-pad moves
   spatially, but a linear Tab order does not. */
.skip {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 16px 16px;
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: 14px; font-weight: 500; transition: top 120ms ease;
}
.skip:focus { top: 0; }