/* App-level additions on top of the design system (css/design/*). */

/* Links inside prose must not rely on color alone (WCAG 1.4.1, BP-045): underline any
   anchor sitting in body text. Buttons, nav, logos and card-level links are exempt. */
p > a:not(.bp-btn),
span > a:not(.bp-btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Screen-reader-only text for icon-only cells (BP-047). */
.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link (WCAG 2.4.1): visually hidden until focused. */
.bp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bp-brand);
  color: var(--bp-on-brand);
  border-radius: 0 0 var(--bp-r-sm) 0;
  font-weight: 600;
  text-decoration: none;
}

.bp-skip:focus {
  left: 0;
}

/* ---------- result-pill tooltips ----------
   Result pills with an explanation (data-bp-tip) are interactive: click/tap opens a popover
   (wired in bp.js). The affordance signals that subtly — a help cursor, a hover lift, a focus
   ring, and a faint info dot that fades in on hover/focus. */
.bp-badge[data-bp-tip] {
  cursor: help;
  position: relative;
  padding-right: 16px; /* room for the info dot */
  transition: filter var(--bp-dur), box-shadow var(--bp-dur);
}
.bp-badge[data-bp-tip]::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--bp-dur);
}
.bp-badge[data-bp-tip]:hover,
.bp-badge[data-bp-tip]:focus-visible {
  filter: brightness(0.97);
  box-shadow: var(--bp-shadow-sm);
}
.bp-badge[data-bp-tip]:hover::after,
.bp-badge[data-bp-tip]:focus-visible::after {
  opacity: 0.9;
}
.bp-badge[data-bp-tip]:focus-visible {
  outline: 2px solid var(--bp-brand);
  outline-offset: 2px;
}

/* The popover itself — a single floating element bp.js positions near the clicked pill. */
.bp-tip-pop {
  position: absolute;
  z-index: 200;
  max-width: 280px;
  padding: 8px 11px;
  background: var(--bp-surface);
  color: var(--bp-fg);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-sm);
  box-shadow: var(--bp-shadow-md);
  font-size: var(--bp-t-sm);
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}
@media (prefers-reduced-motion: reduce) {
  .bp-badge[data-bp-tip] { transition: none; }
  .bp-badge[data-bp-tip]::after { transition: none; }
}

/* ---------- locked teaser checks (home panel) ----------
   Paid-tier previews shown alongside the free checks to spark interest. The whole card is a
   link to pricing; the dashed border, brand rail and hover lift signal "there's more here —
   click to learn." */
a.bp-result--teaser {
  text-decoration: none;
  cursor: pointer;
  border-style: dashed;
}
/* Hero: top-align the marketing copy with the top of the live-check panel (not centered). */
.bp-hero__grid { align-items: start; }
a.bp-result--teaser .bp-result__name { color: var(--bp-fg); }
a.bp-result--teaser .bp-result__icon { opacity: 0.75; }
a.bp-result--teaser::before { background: var(--bp-brand); opacity: 0.5; }
a.bp-result--teaser:hover,
a.bp-result--teaser:focus-visible {
  border-color: var(--bp-brand);
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}
a.bp-result--teaser:hover::before,
a.bp-result--teaser:focus-visible::before { opacity: 1; }
a.bp-result--teaser:hover .bp-teaser__cta,
a.bp-result--teaser:focus-visible .bp-teaser__cta { color: var(--bp-brand); }
a.bp-result--teaser:focus-visible { outline: 2px solid var(--bp-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a.bp-result--teaser:hover,
  a.bp-result--teaser:focus-visible { transform: none; }
}

/* ---------- first-party sponsor slot (home hero, BP-023) ----------
   One server-rendered sponsor card below the hero copy. Themed to the site with a faint brand
   wash + border so it reads as part of the page but stands apart from the surrounding copy. */
a.bp-sponsor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--bp-6);
  max-width: 46ch;
  padding: var(--bp-4) var(--bp-5);
  background: var(--bp-brand-softer);
  border: 1px solid var(--bp-brand-border);
  border-radius: var(--bp-r-lg);
  text-decoration: none;
  transition: box-shadow var(--bp-dur), transform var(--bp-dur), border-color var(--bp-dur);
}
.bp-sponsor__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bp-t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-brand-ink);
}
.bp-sponsor__headline { font-weight: 600; color: var(--bp-fg); }
.bp-sponsor__body { font-size: var(--bp-t-sm); color: var(--bp-fg-muted); }
.bp-sponsor__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--bp-t-sm);
  font-weight: 600;
  color: var(--bp-brand-ink);
}
a.bp-sponsor:hover,
a.bp-sponsor:focus-visible {
  border-color: var(--bp-brand);
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}
a.bp-sponsor:focus-visible { outline: 2px solid var(--bp-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a.bp-sponsor:hover,
  a.bp-sponsor:focus-visible { transform: none; }
}

/* ---------- branding accent picker (profile edit) ----------
   Each visible swatch is a span next to a visually-hidden radio. Drive the "selected" ring from
   the radio's :checked state (not a server-rendered inline border) so the indicator follows the
   user's click live while customizing — and still reflects the saved value on load. */
.bp-accent { display: flex; gap: 8px; align-items: center; }
.bp-accent__swatch {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: border-color var(--bp-dur);
}
.bp-accent input:checked + .bp-accent__swatch { border-color: var(--bp-fg); }
.bp-accent__default {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-pill);
  padding: 4px 8px;
  transition: border-color var(--bp-dur), color var(--bp-dur);
}
.bp-accent input:checked + .bp-accent__default { border-color: var(--bp-fg); color: var(--bp-fg); }
/* The real radios are visually hidden, so surface keyboard focus on the swatch itself. */
.bp-accent input:focus-visible + .bp-accent__swatch,
.bp-accent input:focus-visible + .bp-accent__default { outline: 2px solid var(--bp-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .bp-accent__swatch, .bp-accent__default { transition: none; }
}

/* ---------- environment banner (test only) ----------
   A loud "you are not in production" strip pinned above the sticky nav; rendered by
   _EnvironmentBanner only when the EnvironmentBanner setting is non-empty (test via IaC,
   never prod). The warn palette keeps it theme-aware without touching brand colors. */
:root { --bp-env-banner-h: 32px; }
.bp-env-banner {
  position: sticky;
  top: 0;
  z-index: 50; /* above .bp-nav (40) */
  height: var(--bp-env-banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-warn-strong);
  color: #fff;
  font-size: var(--bp-t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
/* The nav is sticky at top:0 — when the banner exists, park the nav just below it so the
   two never overlap while scrolled. */
body:has(.bp-env-banner) .bp-nav { top: var(--bp-env-banner-h); }

/* ---------- tenant-authored branding copy (bug bash round 1) ----------
   Branding fields are length-capped, but a maxed-out UNBROKEN string (no spaces) still can't
   wrap on its own — let it break anywhere rather than push the layout sideways. Scoped to the
   surfaces that render tenant copy: the check page's intro block, hero score copy, remediation
   card and logo word, plus the profile editor's live preview. */
[data-brand-preview] .bp-eyebrow,
[data-brand-preview] [data-bp-pv-title],
[data-brand-preview] [data-bp-pv-copy],
[data-brand-preview] [data-bp-pv-pass],
[data-brand-preview] .bp-logo__word,
.bp-center .bp-eyebrow,
.bp-center h1,
.bp-center p,
#heroCopy,
#remediation p,
.bp-logo__word { overflow-wrap: anywhere; }

/* ---------- MFA enrollment QR code ----------
   White backing regardless of theme or forced-dark mode (a dark-backed QR won't scan): the QR
   itself is an <img> data URI with a baked-in white background — auto-darkeners recolor markup
   but leave image content alone — and the card opts out of high-contrast overrides too. The
   image is viewBox-sized, so the container decides the rendered size. */
.bp-qr {
  background: #fff;
  padding: 12px;
  border-radius: var(--bp-r-sm);
  width: 196px;
  height: 196px;
  color-scheme: light;
  forced-color-adjust: none;
}
.bp-qr img { display: block; width: 100%; height: 100%; }