/* ============================ FOCUS LAYER (World 1) ============================
   Loaded last, on purpose.

   The glass upgrade restyled the buttons with rules like `.btn-accent,.btn-wide:not(.dark){box-shadow:...}`.
   That selector has the same specificity as `.btn-wide:focus-visible` and sits later in the file, so it
   silently won the cascade and the keyboard focus ring stopped rendering. Two other controls removed
   their own indicator without adding a replacement: `.ft-field input:focus-visible{outline:none}` and
   `.cg-input input:focus-visible{box-shadow:none}`.

   Rather than patch each of those in place, where the next visual pass can quietly break them again,
   every ring lives here, in the last stylesheet, at a specificity nothing upstream can beat (the
   leading `html` adds an element to the selector). A focus ring is only ever painted for keyboard
   users, so this changes nothing about the approved design for anyone using a mouse.

   Verified with real Tab presses by _src/qa_focus.js.
   ============================================================================== */

:root{
  --fx-ring:rgba(42,143,255,.55);      /* azure, the studio signature */
  --fx-ring-wide:rgba(42,143,255,.28);
  --fx-ink:#1E7BE6;
}

/* Base: anything focusable that has no bespoke treatment below. */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html summary:focus-visible,
html [tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--fx-ink);
  outline-offset:3px;
  border-radius:8px;
}

/* Controls whose ring was being overridden by a later, equally specific rule. A ring drawn with
   box-shadow sits flush against the pill instead of squaring off a rounded button. */
html .btn:focus-visible,
html .btn-wide:focus-visible,
html .btn-accent:focus-visible,
html .btn-ghost:focus-visible,
html .btn-light:focus-visible,
html .btn-dark:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--fx-ring),0 0 0 7px var(--fx-ring-wide);
}

/* Nav CTA: the ring belongs on the inner pill, which is the shape the user sees. */
html .nav-book:focus-visible{outline:none;box-shadow:none}
html .nav-book:focus-visible .nav-book-btn{box-shadow:0 0 0 3px var(--fx-ring),0 0 0 7px var(--fx-ring-wide)}

/* Large cards and portals: a soft ring, offset so it clears the artwork. */
html .hero-case.portal:focus-visible,
html .ft-ai:focus-visible,
html .svcx-portal:focus-visible,
html .case-card:focus-visible,
html .art-card:focus-visible{
  outline:2px solid var(--fx-ink);
  outline-offset:4px;
}

/* Concierge: launcher and the message field. Both previously set their indicator to none. */
html .cg:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--fx-ring),0 0 0 7px var(--fx-ring-wide),0 18px 44px rgba(6,26,54,.18);
}
html .cg-input input:focus-visible{
  /* No second ring inside the capsule: the capsule itself carries the focus
     indicator (.cg-input:focus-within in concierge.css draws one crisp primary
     line + halo). Two nested pills read as a rendering glitch, not as focus. */
  outline:none;
  box-shadow:none;
}
html .cg-panel button:focus-visible,
html .cg-panel a:focus-visible{outline:2px solid var(--fx-ink);outline-offset:2px}

/* Footer: the subscribe field had outline:none and nothing in its place. */
html .ft-field input:focus-visible{
  outline:2px solid var(--fx-ink);
  outline-offset:-2px;
  border-radius:999px;
}
html .ft-field button:focus-visible,
html .ft-book:focus-visible{outline:none;box-shadow:0 0 0 3px var(--fx-ring),0 0 0 7px var(--fx-ring-wide)}
html .lg-top:focus-visible{outline:2px solid var(--fx-ink);outline-offset:3px;border-radius:999px}

/* Intake and booking controls keep the pill shape. */
html .cf-chip:focus-within,
html .cf-chip:has(input:focus-visible){outline:2px solid var(--fx-ink);outline-offset:2px;border-radius:999px}
html .book-day:focus-visible,
html .book-slot:focus-visible{outline:2px solid var(--fx-ink);outline-offset:2px}

/* High contrast preference: thicken the ring rather than relying on the tinted glass version. */
@media (prefers-contrast:more){
  html a:focus-visible,html button:focus-visible,html input:focus-visible,
  html [tabindex]:not([tabindex="-1"]):focus-visible{outline-width:3px}
  html .btn:focus-visible,html .btn-wide:focus-visible,html .cg:focus-visible{
    outline:3px solid var(--fx-ink);outline-offset:3px;box-shadow:none}
}

/* ============================ TARGET SIZE (WCAG 2.5.8 Minimum, AA) ============================
   The footer consent control was the smallest thing on the page: a 13px checkbox inside a label set
   in 11px at line-height 1.5, so the row a visitor actually has to hit measured 16.5px tall against a
   24px minimum. The label is the real target (it wraps the input), so the fix is vertical padding on
   the label rather than a bigger box: the checkbox keeps its size, the sentence keeps its place, the
   row simply stops being thinner than a fingertip. The privacy link inside the sentence is exempt
   under the inline exception, and the legal row below already clears 24px between its two lines.

   It lives here rather than in css/wf-footer.css because that file is a shared component, copied
   into both worlds by _wf-nav/inject-footer.py and overwritten on every sync. The leading `html`
   keeps it above the component, which is linked after this stylesheet. */
html .wff .wff-agree{padding:4px 0;min-height:24px}