/*
 * D-288 (owner, screenshot of a black ring round a clicked tab: "when I select something a black outline comes around it.
 * It should not. Look for these things around the website and fix it").
 * Cause: Bootstrap's `button:focus { outline: 5px auto -webkit-focus-ring-color }` (bootstrap.css) draws the browser's black
 * focus ring on every mouse click and tap; a few sections had patched it one by one with `outline: none`, which also hid it
 * from keyboard users.
 * Fix, site-wide (loaded on every page: layouts/partials/head, layouts/my-account and the standalone pages):
 *   1. no ring after a mouse click or a tap (:focus without :focus-visible), on any element;
 *   2. a brand-coral ring only when someone moves through the page with the keyboard (:focus-visible), so the site stays
 *      usable without a mouse; text fields keep their own focus styles;
 *   3. no grey flash on tap on phones.
 */
html body :focus:not(:focus-visible) { outline: none; }
html body .btn:focus:not(:focus-visible) { box-shadow: none; }
html body :focus-visible:not(input, textarea, select, [contenteditable="true"]) { outline: 2px solid #f05d49; outline-offset: 2px; }
html body :is(a, button, [role="button"], [role="tab"], label, summary) { -webkit-tap-highlight-color: transparent; }

/* D-312 (council UX-17): the "Skip to content" link (layouts/mainlayout). Hidden until a keyboard user tabs to it, then a
   coral pill over the header. The <main> it jumps to takes focus without a ring (it is not a control). */
.cy-skip { position: fixed; z-index: 100000; top: 10px; left: 12px; padding: 10px 16px; border-radius: 999px; background: #1d2333; color: #fff !important; font: 600 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform .15s ease; }
.cy-skip:focus, .cy-skip:focus-visible { transform: none; outline: 3px solid #f05d49; outline-offset: 2px; }
html body main#main:focus, html body main#main:focus-visible { outline: none; }