/* ============================================================
   DOFT 2026 — KEYBOARD FOCUS INDICATOR (WCAG 2.4.7 Focus Visible).
   MUST stay LAST in footer.jsp, after every page stylesheet and all 15 dated
   hotfix sheets. That position is the whole point of this file, not a habit.

   WHAT WAS BROKEN
   PR-3.4 "bug13" removed the refresh layer's :focus-visible ring (refresh.css:277)
   and the layer never got another one, while `outline: none / 0` stayed pinned across
   the stack. Measured in headless Chrome on the real 21-sheet cascade, a Tab through
   the /login card matched :focus-visible on every control and computed
   `outline-style: none` on all of them. Same for /signup. Both are the public funnel,
   so this was live for anyone who cannot use a mouse — motor-impaired users on
   keyboard or switch access, screen-magnifier users who need to see where the caret
   went, and anyone whose trackpad just died.

   WHY IT HAS TO LIVE HERE AND USE !important
   refresh.css cannot win. Every one of these loads after it and outranks or ties it:
     refresh-hotfix-20260727-darkmode.css:13-27   :is(button,.btn,.btn-doft,...):is(:focus,.focus,:active,...)  outline:0 !important  (0,4,1)
     refresh-hotfix-20260727-darkmode.css:55-66   :is(input.form-control,...,.bootstrap-select>.dropdown-toggle):is(:focus,:focus-within)  outline:0 !important  (0,3,2)
     refresh-hotfix-20260727-darkmode.css:79-103  dark filter zones x form controls :focus  outline:0 !important  (0,6,1)
     refresh-hotfix-20260725-round2.css:74-105    dark filter zones x form controls         outline:0 !important  (0,5,1)
     refresh-hotfix-20260728-darkmode-round5.css:628-634  post-load / bulk-post / post-truck controls  outline:none !important
   Despite the filenames, the first two blocks are NOT dark-gated: they fire in light
   mode as well, which is why the light theme had no ring either. All of them are right
   about the box-shadow glows they were written to kill, and none of them is touched
   here. Only the outline they took as collateral is given back, and only on
   :focus-visible. This file follows the layer's own house rule for the one focus ring
   it already ships (refresh-hotfix-20260728-darkmode-round6.css:310): same 2px solid
   --red-600 at 2px offset, same !important, same footer position.

   WHY :focus-visible AND NOT :focus
   bug13's actual complaint was a ring appearing where the user had CLICKED (the
   "John D." user-menu toggle). :focus-visible does not match a mouse click on a
   button, anchor or selectpicker, so that complaint stays satisfied. Verified with
   real CDP Input.dispatchMouseEvent: after a click, .matches(':focus-visible') is
   false and outline-style computes to none.

   WHY AN OUTLINE AND NOT box-shadow: var(--ring)
   Two measured reasons. (1) refresh-hotfix-20260727-darkmode-round3.css:219-222 kills
   box-shadow with !important on :is(button,.btn,a,input,select,textarea,.form-control)
   :is(:focus,:active,:focus-visible) across every loads/map/truck/driver page, so a
   shadow ring would be erased exactly where the dense grids are. (2) --ring is
   22%-alpha scarlet, which composites to 1.36:1 on #ffffff and 1.25:1 on the #14171c
   dark surface — under the 3:1 WCAG 1.4.11 asks of a focus indicator. The deleted ring
   was never a compliant one. Outlines also never affect layout, which matters in a
   35-56px grid row.

   COLOUR
   --red-600 re-points itself per theme (#f12908 light / #ff4524 dark, refresh.css:840),
   so one declaration covers both palettes:
     light  #f12908 on --surface #ffffff  4.15:1     on --canvas #f7f8fa  3.90:1
     dark   #ff4524 on --surface #14171c  5.24:1     on --canvas #0c0e12  5.64:1
   All four clear the 3:1 floor for a non-text focus indicator.

   Kill switch: same EnableRefreshDesign gate as the rest of the layer.
   ============================================================ */

html[data-refresh] body :is(
  a,
  button,
  .btn,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--red-600, #f12908) !important;
  /* --focus-offset lets a surface opt into an INSET ring without having to out-specify
     the !important above. refresh.css:300 sets it to -2px for the CMD-K palette field,
     which is borderless and full-bleed inside a --radius-lg overflow:hidden overlay:
     an outset ring there clips into a square bar across the rounded top corners, which
     is the real layout reason refresh.css:816 wrote `outline: none` in the first place.
     Inset, the same ring draws inside the field's own box and the corners stay intact. */
  outline-offset: var(--focus-offset, 2px) !important;
}

/* The two dark filter-zone blocks quoted above sit at (0,5,1) and (0,6,1), higher than the
   (0,4,2) of the general rule, so in DARK the loads/post filter bar's own fields and
   selectpickers still computed outline-style:none with the rule above alone — measured, not
   assumed. Restated here at (0,6,2), which is the same shape as the blocker plus `body`.
   Dark-scoped on purpose: in light both blockers are inert and the general rule already wins.
   Identical declaration; nothing about those blocks is changed. */
html[data-theme="dark"][data-refresh] body :is(
  .tbl-filter, .search-filter, .ctrl-block, .waypoint, .price,
  .add-card-block, .chat-app-form, .filter-block, .filters-block
) :is(
  input.form-control, input[type="text"], input[type="email"], input[type="number"],
  input[type="tel"], input[type="search"], textarea.form-control, select.form-control,
  .bootstrap-select > .dropdown-toggle, .input-group-text
):focus-visible {
  outline: 2px solid var(--red-600, #f12908) !important;
  outline-offset: var(--focus-offset, 2px) !important;
}

/* Windows High Contrast / forced-colors: let the OS draw its own indicator rather than
   forcing a brand colour the user has explicitly overridden. */
@media (forced-colors: active) {
  html[data-refresh] body :is(a, button, .btn, input, select, textarea,
                              [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid Highlight !important;
  }
}