/* ==========================================================================
   FortHound accessibility base — loaded first by every page.
   Owns the two things that must never drift per-surface: keyboard focus
   visibility and WCAG-conformant semantic colour. Everything else belongs in
   product.css (consoles), styles.css (SOC Tower) or the page's own <style>.
   ========================================================================== */

:root{
  /* Semantic colours darkened to clear WCAG AA (4.5:1) at the 11-12px sizes
     they are actually rendered at. The originals failed measurably:
       warn on white   2.76:1   -> 4.56:1
       warn in a pill  2.45:1   -> 4.54:1
       ok on white     3.46:1   -> 4.61:1
       bad on white    4.20:1   -> 4.53:1
     Small status pills carry real meaning in a security product; they cannot
     be the least readable text on the page. */
  --ok:#1a8654;   --ok-bg:#e5f5ec;   --ok-ink:#197d4f;
  --warn:#a56914; --warn-bg:#fbf0dd; --warn-ink:#996112;
  --bad:#de3432;  --bad-bg:#fbe5e5;  --bad-ink:#cd2321;
  /* Ink on a filled --ok/--warn/--bad surface. Marketing and login never load
     product.css and never go dark, so this stays white here. */
  --on-accent:#fff;
  --focus:#2b4a86;
}

/* Keyboard focus, applied at zero specificity via :where() so component styles
   still control colour and radius, but nothing can silently remove the ring.
   Before this there were no focus-visible rules anywhere and twelve blanket
   `outline:none` declarations — keyboard and screen-magnifier users had no way
   to tell where they were. */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:9px;
}
/* Dark surfaces need a light ring to stay visible. */
:where(.login-hero,.top,.adv,footer,.dark) :where(a,button,input,[tabindex]):focus-visible{
  outline-color:#cfe0ff;
}

/* Respect the OS motion preference across every surface. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* Skip link — the consoles put a long nav before the main region. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#161a20;
  padding:10px 16px;border-radius:0 0 10px 0;font:600 14px Inter,system-ui,sans-serif;
  box-shadow:0 8px 24px rgba(20,30,60,.18)}
.skip-link:focus{left:0}

/* ---- Houndy (mounted by suite.js) ----
   The mascot rides top-right of each console, in a different mood per product.

   WHY THIS LIVES IN base.css AND NOT product.css
   suite.js mounts him on every page, but phishing and training never load
   product.css — so the rule silently did not apply there and the raw 512px
   portrait dropped into the page at full size. Chrome injected by a global
   script needs its CSS in the globally-loaded sheet, or every new page has to
   remember a stylesheet link it otherwise would not need.

   For the same reason the values below are literal rather than var(--s4) and
   friends: those tokens are defined in product.css only, so referencing them
   here would reintroduce exactly the bug this move fixes. The navy is
   hard-coded honestly — it is theme-invariant by design.

   WHY A CHIP AND NOT A CUTOUT
   The portraits are lit on near-black, so a bare cutout looks pasted onto a
   white card in light mode. The navy plate is the surface the photograph was
   lit for, and it does not flip with the theme, so he reads the same in both.

   The plate is decorative and aria-hidden in the markup — the console's own
   heading already names the product. */
.main.has-houndy{position:relative}
.fh-houndy{position:absolute;top:20px;right:16px;width:64px;height:64px;border-radius:14px;
  overflow:hidden;background:#2b4a86;border:1px solid #3f63a8;
  box-shadow:0 1px 2px rgba(20,30,60,.05),0 8px 28px rgba(20,30,60,.07);
  flex:none;pointer-events:none;z-index:5}
.fh-houndy img{width:100%;height:100%;object-fit:cover;object-position:46% 26%;display:block}
/* A whisper of shadow across the bottom edge so the chip sits in the page
   rather than on it. */
.fh-houndy::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,18,36,.45));pointer-events:none}
/* Keep the first heading clear of him rather than letting text run underneath. */
.main.has-houndy > :first-child{padding-right:84px}
@media(max-width:900px){
  .fh-houndy{width:46px;height:46px;border-radius:11px;top:12px;right:12px}
  .main.has-houndy > :first-child{padding-right:58px}
}