/* ============================ 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{
  outline:2px solid var(--fx-ink);
  outline-offset:2px;
  border-radius:999px;
  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}
}