/* ==========================================================================
   a11y-focus.css  -  shared keyboard focus indicators (WCAG 2.4.7 / 2.4.11)

   Loaded on every interactive page. Page stylesheets no longer contain
   "outline: none"; this file is the single source of truth for focus rings.

   - Rules use :where() so they have ZERO specificity: any page can still
     override a specific control by writing a normal selector.
   - :focus-visible = ring appears for keyboard use (and in text fields),
     not when a mouse user clicks a button/link.
   - Ring colour comes from --focus-ring so dark areas can swap it.
   ========================================================================== */

:root {
    --focus-ring: #7c5f3f;          /* brand tan, 5.9:1 on white */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* Dark surfaces (top bars, sidebars): use a light ring so it stays visible */
.hdr,
.topbar,
.sidebar,
.admin-sidebar {
    --focus-ring: #c4a882;          /* light tan, 6.5:1+ on the dark charcoal */
}

:where(a[href], area[href], button, summary, select, textarea,
       input:not([type="hidden"]),
       [role="button"], [role="link"], [role="tab"], [role="menuitem"],
       [contenteditable="true"],
       [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Fields: hug the border instead of floating away from it */
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
       select, textarea):focus-visible {
    outline-offset: 0;
}

/* Inputs that sit borderless inside table cells: draw the ring inside the cell
   so it is not clipped by the neighbouring cells */
:where(td, th) :where(input, select, textarea):focus-visible {
    outline-offset: -2px;
}

/* Programmatic focus on containers/headings (modals, skip targets) should not
   show a ring; they are not interactive controls */
:where([tabindex="-1"]):focus:not(:focus-visible) {
    outline: 0;
}

/* Windows High Contrast / forced-colors: let the system colour the ring */
@media (forced-colors: active) {
    :where(a[href], button, summary, select, textarea, input,
           [role="button"], [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }
}