/* ── Someone Song — Focus ──
 *
 * One visible, brand-consistent focus indicator for every interactive element.
 *
 * Loaded LAST in main.css on purpose. Several components legitimately set
 * `outline: none` and draw their own focus border (.inp, .aa-card input), and
 * a few sit at the same specificity as the rules here — so source order is
 * what guarantees no control can end up with no indicator at all.
 *
 * :focus-visible rather than :focus, so clicking a button with the mouse does
 * not leave a ring behind, while keyboard and assistive-tech navigation always
 * shows one. Supported everywhere we target (Safari 15.4+).
 *
 * Ring colour/width live in _variables.css as --focus-ring / --focus-offset.
 */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The range thumb cannot take an outline, so the ring goes on the track and
   the thumb gets a matching halo. Previously this control had `outline: none`
   and no replacement at all — it was the one element with no indicator. */
input[type="range"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--brand-mid);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--brand-mid);
}

/* Two controls intentionally delegate their indicator to a wrapper that draws
   a ring via :focus-within (.chat-input-row, .refine-chat-wrap). Those keep
   their own treatment — the ring is still visible, just on the parent — so
   they are deliberately not overridden here. */

/* Windows High Contrast / forced-colors: honour the system focus colour
   instead of painting a brand ring the OS palette will discard. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}

/* ── Skip link ──
 * First tabbable element on every page. Off-screen until focused, so it costs
 * sighted users nothing and saves keyboard users the whole nav on every load.
 */
.skip-link {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  z-index: var(--z-skip);
  padding: var(--sp-12) var(--sp-20);
  background: var(--action);
  color: var(--action-fg);
  font-family: var(--fb);
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Programmatic focus on the <main> target shouldn't paint a ring around the
   whole page; the skip already moved the reader there. */
[tabindex="-1"]:focus { outline: none; }