/* =============================================================================
   VerifyKit calculator: BioBench Labs look (C2 "Soft gradient", Figtree + Fraunces)
   -----------------------------------------------------------------------------
   The build copies this file to dist/verifykit/bbl-theme.css and links it at the
   END of <head> on every calculator page (site.config.js -> calculator.themeOverride),
   so it overrides the calculator's own styles.css and inline styles.
   It only re-maps the calculator's colour tokens, fonts and a few shapes. It never
   hides or moves the calculator's content, and the calculator folder itself
   (D:\bme\VerifyKit\calculator) is never edited.
   Colours match src/assets/css/theme.css. Contrast was checked for AA in both modes.
   ============================================================================= */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces/fraunces-latin-soft-normal.woff2") format("woff2"); }

/* Calculator tokens (index, selftest) and validation-report tokens (validation.html) */
:root {
  --bg: #faf7f5; --surface: #ffffff; --surface-2: #f4eff2; --fg: #241f22; --muted: #574e55; --line: #e6dfe6;
  --accent: #4a3d9c; --accent-fg: #ffffff; --accent-soft: #ece8f8; --focus: #4a3d9c;
  --ok: #2a6a3c; --ok-bg: #eaf4ec; --bad: #a3301f; --bad-bg: #fbebe7; --warn-bg: #fbf0dc; --warn-line: #c9944a;
  --plot-point: #4a3d9c; --plot-line: #8a8190; --plot-flag: #a3301f;
  --radius: 16px;
  --card: #ffffff; --badbg: #fbebe7; --docbg: #fbf0dc;
  --bbl-line-strong: #8a8190;
  --bbl-bar-bg: rgb(250 247 245 / 0.8);
  --bbl-page-bg:
    radial-gradient(38rem 26rem at 96% 0%, rgb(214 200 245 / 0.38), transparent 70%),
    radial-gradient(30rem 22rem at 0% 6%, rgb(248 200 168 / 0.26), transparent 70%),
    radial-gradient(40rem 30rem at 100% 70%, rgb(191 230 214 / 0.22), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121019; --surface: #1b1824; --surface-2: #221e2e; --fg: #f3f0f8; --muted: #c2bccf; --line: #2e2a3a;
    --accent: #c7befa; --accent-fg: #1a1440; --accent-soft: #241f3a; --focus: #c7befa;
    --ok: #8fd3a1; --ok-bg: #15261a; --bad: #f29c8a; --bad-bg: #2e1915; --warn-bg: #2b2214; --warn-line: #9c7a34;
    --plot-point: #c7befa; --plot-line: #77708a; --plot-flag: #f29c8a;
    --card: #1b1824; --badbg: #2e1915; --docbg: #2b2214;
    --bbl-line-strong: #77708a;
    --bbl-bar-bg: rgb(18 16 25 / 0.8);
    --bbl-page-bg:
      radial-gradient(38rem 26rem at 96% 0%, rgb(75 60 140 / 0.3), transparent 70%),
      radial-gradient(30rem 22rem at 0% 6%, rgb(138 75 58 / 0.2), transparent 70%),
      radial-gradient(40rem 30rem at 100% 70%, rgb(45 107 90 / 0.18), transparent 70%);
  }
}
:root[data-theme="dark"] {
  --bg: #121019; --surface: #1b1824; --surface-2: #221e2e; --fg: #f3f0f8; --muted: #c2bccf; --line: #2e2a3a;
  --accent: #c7befa; --accent-fg: #1a1440; --accent-soft: #241f3a; --focus: #c7befa;
  --ok: #8fd3a1; --ok-bg: #15261a; --bad: #f29c8a; --bad-bg: #2e1915; --warn-bg: #2b2214; --warn-line: #9c7a34;
  --plot-point: #c7befa; --plot-line: #77708a; --plot-flag: #f29c8a;
  --card: #1b1824; --badbg: #2e1915; --docbg: #2b2214;
  --bbl-line-strong: #77708a;
  --bbl-bar-bg: rgb(18 16 25 / 0.8);
  --bbl-page-bg:
    radial-gradient(38rem 26rem at 96% 0%, rgb(75 60 140 / 0.3), transparent 70%),
    radial-gradient(30rem 22rem at 0% 6%, rgb(138 75 58 / 0.2), transparent 70%),
    radial-gradient(40rem 30rem at 100% 70%, rgb(45 107 90 / 0.18), transparent 70%);
}

/* Type */
body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--bg);
  background-image: var(--bbl-page-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
h1, h2, .panel h2, section.block h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 100;
  font-weight: 580;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.12; font-weight: 560; }
h3, .field label, .field .label, .tabs [role="tab"][aria-selected="true"], details summary { font-weight: 650; }
.brand { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 600; letter-spacing: 0; color: var(--fg); font-size: 1.05rem; }
.result .big, .tile b, .price { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Shapes: pill buttons, soft cards */
.btn { border-radius: 999px; padding: 7px 16px; font-weight: 600; border-color: var(--bbl-line-strong); }
.btn.primary { border-color: var(--accent); }
.btn[aria-pressed="true"] { color: var(--fg); }
.field input, .field select, .field textarea, .rationale textarea, table.simple input { border-color: var(--bbl-line-strong); border-radius: 10px; background: var(--surface); }
.field input[readonly] { background: var(--surface-2); }
.panel, .card, .offer, details.helper, form.lead fieldset, .tile, .scroll { box-shadow: 0 1px 1px rgb(36 31 34 / 0.03), 0 14px 36px rgb(74 61 156 / 0.06); }
.result, .box, details.formula { border-radius: 14px; }
.tabs [role="tab"] { border-radius: 10px 10px 0 0; }
.disclaimer, .caveat { color: var(--fg); }
.callout { border-radius: 10px; }

/* Long URLs and SHA-256 hashes wrap instead of widening the page on phones */
main li a, .meta code, .callout code { overflow-wrap: anywhere; }
.kv > * { min-width: 0; overflow-wrap: anywhere; }

/* The BioBench Labs bar added by the site build */
.bbl-sitebar {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 8px 16px; font: 600 14px/1.4 "Figtree", system-ui, sans-serif;
  background: var(--bbl-bar-bg); color: var(--fg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bbl-sitebar a { color: var(--accent); text-underline-offset: 0.18em; }
.bbl-sitebar .bbl-home { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; font-size: 15px; }
.bbl-sitebar .bbl-home:hover { text-decoration: underline; }
.bbl-sitebar svg { width: 22px; height: 22px; flex: none; }
.bbl-sitebar nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* "Skip to main content", added by the site build like on every other page */
.bbl-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 8px 16px;
  font: 600 14px/1.4 "Figtree", system-ui, sans-serif; background: var(--accent); color: var(--accent-fg); border-radius: 8px; }
.bbl-skip:focus { top: 8px; }
#bbl-main:focus { outline: none; }

@media print {
  .bbl-sitebar { display: none !important; }
  body { background-image: none; }
}