/*
 * THE V3 LOOK, AS THIS APP WEARS IT. Hand-written, and only the bridge between the copied look
 * (`v3-look.css`, `v3-components.css`, never edited here) and what this app already loads.
 *
 * Fonts: the look names `Guton` and `Inter` literally, but this app self-hosts them through next/font,
 * which registers hashed family names behind variables. Guton is the root layout's `--font-display`; Inter
 * is loaded by `components/pty/v3/fonts.ts` as `--font-v3-body`. The literal names stay as fallbacks.
 *
 * The pass the year skin's hue is not set here: the look's `[data-skin="pty"]` already reads the PTY
 * ladder's own `--brand-hue`, which the token tier declares and the Hub's brand CSS overrides.
 */
[data-site="v3"] {
  --v3-font-display: var(--font-display), Guton, Inter, system-ui, sans-serif;
  --v3-font-body:
    var(--font-v3-body), Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

/*
 * WHILE V2 IS THE DEFAULT. A v3 page renders inside a document stamped `data-site="v2"` (so the pages not
 * yet redrawn keep their styling), and wherever a v2 stylesheet is loaded its three element-level rules
 * reach into the V3 root: `html[data-site="v2"] footer` (a dark ground), `footer a`, and
 * `:focus-visible` (an outline offset and a 6px radius that beat the look's own). These restore the look,
 * one specificity step above them. They go when v2 retires.
 */
html [data-site="v3"] footer.v3-footer {
  background: transparent;
  color: var(--v3-soft);
  border-top: 0;
  font-size: 14px;
}
html [data-site="v3"] .v3-footer a {
  color: inherit;
}
html [data-site="v3"] .v3-footer a:hover {
  color: var(--v3-ink);
}
html [data-site="v3"] .v3-footer .v3-footer__legal a {
  color: var(--v3-soft);
}
html [data-site="v3"] .v3-footer .v3-footer__help a {
  color: var(--v3-link);
}
html [data-site="v3"] :focus-visible {
  outline: var(--v3-focus-ring) solid var(--v3-ring);
  outline-offset: var(--v3-focus-offset);
}
html [data-site="v3"] .v3-btn:focus-visible {
  border-radius: var(--v3-radius-pill);
  outline: 2px solid var(--v3-anchor-top);
  outline-offset: 3px;
}
html [data-site="v3"] .v3-btn--tertiary:focus-visible {
  border-radius: 6px;
}
html [data-site="v3"] .v3-chip:focus-visible,
html [data-site="v3"] .v3-pill:focus-visible {
  border-radius: var(--v3-radius-pill);
}
html [data-site="v3"] .v3-input:focus-visible {
  border-radius: var(--v3-radius-button);
}
html [data-site="v3"] a.v3-card:focus-visible {
  border-radius: 12px;
}
html [data-site="v3"] a.v3-coach:focus-visible {
  border-radius: var(--v3-radius-well);
}

/*
 * A NON-V3 COMPONENT INSIDE A V3 PAGE (the booking panel, built on the app's Tailwind kit). The look's base
 * reset is unlayered, so it beats every layered Tailwind utility on the elements it names. `v3-foreign`
 * hands those elements back to the layers below.
 */
[data-site="v3"] .v3-foreign :where(button, input, select, textarea, a) {
  font: revert-layer;
  color: revert-layer;
}
[data-site="v3"] .v3-foreign :where(img, svg) {
  display: revert-layer;
}

/*
 * On the apex a V3 block sits inside the season tree, whose `.pty-season a { color: inherit }` outranks the
 * look's button colours on a link. Restored for the three button kinds.
 */
html [data-site="v3"] a.v3-btn {
  color: var(--v3-on-anchor);
}
html [data-site="v3"] a.v3-btn--secondary {
  color: var(--v3-l-800);
}
html [data-site="v3"] a.v3-btn--tertiary {
  color: var(--v3-link);
}

/* A testimonial's name links to the speaker's profile; it reads as the name until hovered. */
[data-site="v3"] .v3-quote__name a {
  color: inherit;
  text-decoration: none;
}
[data-site="v3"] .v3-quote__name a:hover {
  color: var(--v3-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}