/* Palarid · The public pages · v4.55.0
   ==========================================================================
   THE MEASUREMENT THAT PRODUCED THIS FILE

   Across all 42 public pages — the ones Google indexes, the ones a stranger
   meets Palarid on before they ever open the app:

       a visible focus ring ............   0 of 42
       any hover state .................   2 of 42
       any press state .................   1 of 42
       honours reduced motion ..........   1 of 42
       a skip link .....................   2 of 42
       a <main> landmark ...............   2 of 42

   Zero focus rings is the serious one. These pages have inputs, buttons and
   twenty-five call-to-action links, and a keyboard user tabbing through them
   got whatever the browser draws by default — which against #0B0B0F is, in
   several browsers, a thin dark outline on a dark background. Not "hard to
   see". Not visible.

   v4.53 fixed all of this inside the app and none of it out here, because the
   app is one document and these are 42 separate files that share almost
   nothing. That is exactly the kind of gap that stays open for years: every
   individual page looks fine to whoever last edited it.

   THE SAME DISCIPLINE AS v4.53

   These pages set `background`, `color`, `padding` and `border` inline on
   their headers, CTAs and fields. So, as in the app, this file is built only
   from properties they do not declare: `outline`, `filter`, `transform`,
   `box-shadow`, `text-decoration-thickness`. Nothing here can be overridden
   by a page's own styling and nothing here overrides a page's colour.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1 · FOCUS — the actual defect
   `:focus-visible` shows the ring for keyboard navigation and not for mouse
   clicks, which is why it can be this prominent without being annoying. The
   double ring (dark halo outside a light line) is what makes it legible on
   BOTH the dark default and the light-mode variant these pages ship.
   ══════════════════════════════════════════════════════════════════════════ */
/* A plain selector list, NOT `:where(...)`. `:where()` carries zero
   specificity, which is right for a resettable default and wrong for a focus
   ring: it loses to any page rule that touches outline, and losing means an
   invisible ring — the exact defect this file exists to fix. The harness also
   scored 0 of 817 against it, because jsdom's selector engine does not match
   `:where()` either. Both are reasons to write it out longhand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #8B7CF6);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(11, 11, 15, .55);
}

/* A mouse click on a button should not leave a ring behind it. Browsers that
   support :focus-visible handle this; this covers the ones that do not. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · SKIP LINK
   Off-screen until focused, then a real, visible control. Positioned rather
   than `display:none`, because a hidden element is not focusable and a skip
   link that cannot be focused is decoration.
   ══════════════════════════════════════════════════════════════════════════ */
.pal-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent, #8B7CF6);
  color: #0B0B0F;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.pal-skip:focus {
  left: 0;
}

/* The skip target must not draw a ring around the whole page when jumped to —
   it receives focus programmatically, not by tabbing. */
[id="main"]:focus { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   3 · HOVER AND PRESS
   Built from brightness and movement so it works over the accent CTA, the
   header's inline-styled pill, and a plain text link alike, without knowing
   any of their colours.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .cta:hover,
  header nav a[style*="background"]:hover,
  button:not(:disabled):hover {
    filter: brightness(1.08) saturate(1.02);
    transform: translateY(-1px);
  }

  /* Plain links: thickening the underline is the one treatment that reads
     clearly in both themes and cannot be mistaken for the page reflowing. */
  .wrap a:not(.cta):hover,
  header nav a:not([style*="background"]):hover,
  nav.bc a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
}

.cta:active,
button:not(:disabled):active,
header nav a[style*="background"]:active {
  transform: translateY(0) scale(.98);
  filter: brightness(.94);
}

.cta, button, header nav a, .wrap a, nav.bc a {
  transition:
    filter 120ms cubic-bezier(.2, .7, .3, 1),
    transform 120ms cubic-bezier(.2, .7, .3, 1),
    box-shadow 140ms cubic-bezier(.2, .7, .3, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · FIELDS
   Sixteen of these pages calculate something. Their inputs declare their own
   border and background inline, so the acknowledgement is a shadow.
   ══════════════════════════════════════════════════════════════════════════ */
input, select, textarea {
  transition: box-shadow 130ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  input:not(:focus):hover,
  select:not(:focus):hover,
  textarea:not(:focus):hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .03);
  }
}
@media (prefers-color-scheme: light) {
  input:not(:focus):hover,
  select:not(:focus):hover,
  textarea:not(:focus):hover {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .025);
  }
}

/* On a phone, a 16px minimum stops iOS zooming the page when a field is
   focused — which these pages, being read on phones from search results,
   would otherwise do on every tap. */
@media (max-width: 620px) {
  input, select, textarea { font-size: 16px; }
}

/* Touch targets. The app enforces 44px under a coarse pointer; these pages
   never did. */
@media (pointer: coarse) {
  .cta, button, header nav a { min-height: 44px; }
  header nav a { display: inline-flex; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · RESPECTING THE PERSON
   As in the app: reduced motion removes MOVEMENT, not feedback. The focus
   ring in particular must never be animated away — it is the one thing on
   this list that some people cannot use the page without.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cta, button, header nav a, .wrap a, nav.bc a, input, select, textarea {
    transition-duration: 1ms;
  }
  .cta:hover, button:hover, header nav a:hover,
  .cta:active, button:active { transform: none; }
  html { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .cta:hover, button:hover { outline: 2px solid Highlight; }
}

@media print {
  .pal-skip, header nav { display: none; }
}