/* BlueDoor shared theme: fonts, tokens and base controls. Loaded by the app, verify page and landing pages.
   Published tokens (use these, not raw values):
   colour   --primary / --primary-ink (the ONE action colour: buttons, selected states, links), --bg, --bg-2, --card,
            --ink, --ink-2, --muted, --line, --line-strong, status pairs --hot/--hot-soft, --warn, --ok, --info
   type     --fs-xs 12 · --fs-sm 13 · --fs-md 14 (body) · --fs-lg 16 · --fs-xl 20 · --fs-2xl 28; --font-body, --font-display
   shape    --r-sm 8 · --r 12 · --r-lg 16 · --r-xl 24 · --r-pill; buttons --btn-h 40 · --btn-h-lg 48
   buttons  .btn (outline) · .btn.primary (the one filled style) · .btn.ghost · .btn.lg; nothing else */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/vendor/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/vendor/fonts/figtree-latin.woff2) format("woff2"); }
/* Wordmark (user pick #03, 2026-10-30): Plus Jakarta Sans ExtraBold, SIL Open Font License, self-hosted, latin, 800 only. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/vendor/fonts/plusjakartasans-800-latin.woff2) format("woff2"); }

:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-wordmark: "Plus Jakarta Sans", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;  /* the BlueDoor name next to the logo: 800, -0.02em */
  --bg: #ffffff; --bg-2: #f6f6f4; --card: #ffffff; --ink: #111111; --ink-2: #3d3d3d; --muted: #6f6f6f; --line: #ececea; --line-strong: #d9d9d6;
  --primary: #111111; --primary-ink: #ffffff; --accent: var(--primary); --accent-ink: var(--primary-ink); --accent-soft: #f0f0ee; --link: var(--ink);
  --hot: #d6453d; --hot-soft: #fdecea; --warn: #9a6400; --warn-soft: #fff4d6; --ok: #0b7a4b; --ok-soft: #e3f6ec; --info: #1a56db; --info-soft: #e8efff;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05); --shadow-lg: 0 24px 64px rgba(0,0,0,.22);
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
  --btn-h: 40px; --btn-h-lg: 48px;
  --map-bg: #e5e5e3;
}
:root[data-theme="dark"] {
  --bg: #0f0f0f; --bg-2: #171717; --card: #1a1a1a; --ink: #f2f2f2; --ink-2: #d0d0d0; --muted: #9a9a9a; --line: #262626; --line-strong: #383838;
  --primary: #f2f2f2; --primary-ink: #111111; --accent-soft: #262626;
  --hot: #ff6b63; --hot-soft: #3a1a18; --warn: #f0b35b; --warn-soft: #3a2a0c; --ok: #4cd394; --ok-soft: #0f3a28; --info: #8ab4ff; --info-soft: #1b2a47;
  --shadow: 0 1px 2px rgba(0,0,0,.5); --shadow-lg: 0 24px 64px rgba(0,0,0,.7);
  --map-bg: #262626;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-md)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.015em; }

/* buttons */
.btn { height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover { background: var(--bg-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.15); background: var(--primary); }
.btn.lg { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--fs-lg); }
.btn.soft { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.icon { width: var(--btn-h); padding: 0; }

/* chips: filter dropdowns and toggles */
.chip { position: relative; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); cursor: pointer; white-space: nowrap; font-weight: 500; font-size: var(--fs-sm); }
.chip:hover { border-color: var(--ink); }
.chip.on { border-color: var(--ink); background: var(--accent-soft); }
.chip select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.chip .caret { width: 14px; height: 14px; opacity: .7; }
.chip.toggle input { display: none; }

/* pills: small status labels */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--accent-soft); color: var(--ink-2); }
.pill.hot { background: var(--hot-soft); color: var(--hot); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.info { background: var(--accent-soft); color: var(--ink); }
.pill.na { color: var(--muted); font-weight: 500; }
.pill.yes { background: var(--warn-soft); color: var(--warn); } .pill.no { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--hot-soft); color: var(--hot); } .pill.meh { background: var(--warn-soft); color: var(--warn); }
.pill.sig { background: var(--accent-soft); color: var(--ink-2); font-weight: 500; } .pill.sig.hot { background: var(--hot-soft); color: var(--hot); font-weight: 600; }

/* score badge */
.score { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 9px; border-radius: var(--r-sm); font-weight: 800; font-size: var(--fs-md); background: var(--accent-soft); color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.score.hi { background: var(--ink); color: var(--bg); } .score.mid { background: var(--warn-soft); color: var(--warn); }

/* redacted fields: blurred placeholder with an unlock affordance */
.redacted { position: relative; display: inline-block; cursor: pointer; }
.redacted .blur { filter: blur(6px); user-select: none; pointer-events: none; opacity: .9; }
.redacted:hover .blur { filter: blur(5px); }
body.hide-pii .pii { filter: blur(7px); user-select: none; }