/* ==================================================================
   Branding page (bf-* vocabulary) — Threshold settings surface.

   Token discipline (ADR-0035):
     The design-canon branding.css uses unprefixed token names
     (--paper, --advant, --r-3, --t-14, --f-mono, etc.). The live
     Threshold substrate prefixes every token --th-* (PR 51), so
     every reference below is mapped to its live name — same VALUE,
     no appearance change, no token re-declaration:

       --paper*      → --th-paper*          --r-N   → --th-radius-N
       --ink*        → --th-ink*            --r-pill → --th-radius-pill
       --line*       → --th-line*           --t-N   → --th-size-N
       --advant*     → --th-advant*         --f-X   → --th-f-X
       --marigold*   → --th-marigold*       --ok*   → --th-ok*
       --risk*       → --th-risk*           --warn* → --th-warn*
       --info*       → --th-info*           --sidenav-w → --th-chrome-sidenav-w
       --topbar-h    → --th-chrome-topbar-h

     --preview-w has no --th-* equivalent; defined locally below as
     --bf-preview-w on .bf-layout.

   Omitted from canon (already present in threshold-chrome.css):
     - :root token block + [data-theme="dark"] token overrides
       (owned by threshold-tokens.css)
     - Global reset (* { box-sizing }, html/body, body font/color rules,
       .serif / .mono utility atoms) — owned by threshold-chrome.css
     - .cc-* shell chrome (cc-shell, cc-sidenav, cc-nav-*, cc-topbar,
       cc-breadcrumb, cc-topbar-search, cc-theme-switch, cc-theme-opt,
       cc-icon-btn*, cc-page, cc-footer, cc-foot-*, cc-page-head,
       cc-tenant*, cc-user*, cc-main) — already in threshold-chrome.css
     - .cc-btn (+.is-primary/.is-ghost/.is-disabled) — threshold-chrome.css
     - .cc-pill (+.is-ok/.is-warn/.is-risk/.is-neutral + dark overrides)
       — threshold-chrome.css
     The .bf-dirty-dot copper (authoring-dirty indicator), .bf-dirtybar
     copper, .bf-group-label copper, and .bf-scope copper are all
     legitimate authoring-context uses of --th-marigold-deep per
     ADR-0035 Hard Rule 4 (copper = editorial/authoring accent).
   ================================================================== */

/* ==================================================================
   PAGE HEAD addons (dirty indicator)
   ================================================================== */
.bf-dirty-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--th-marigold-deep); display: inline-block; margin-left: 10px;
}
.bf-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.bf-savestate {
  font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-4);
  letter-spacing: 0.04em; margin-right: 6px;
}

.bf-dirtybar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 24px;
  background: var(--th-marigold-soft);
  border-bottom: 1px solid color-mix(in oklab, var(--th-marigold-deep) 30%, transparent);
  font-size: 12px; color: var(--th-marigold-deep); flex: none;
}
.bf-dirtybar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--th-marigold-deep); }
.bf-dirtybar .spacer { flex: 1; }
/* Contrast / save error surfaced inline in the dirty bar (risk-toned, not the copper). */
.bf-dirtybar-error { font-size: 11.5px; color: var(--th-risk); margin-right: 4px; }

/* ==================================================================
   LOAD / FAIL states (shell-level, pre-Ready)
   ================================================================== */
.bf-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 40px 24px; color: var(--th-ink-3); font-size: 13px;
}
.bf-loadfail {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 24px; padding: 16px;
  border: 1px solid var(--th-line); border-left: 3px solid var(--th-risk);
  border-radius: var(--th-radius-5); background: var(--th-paper-sunk);
  color: var(--th-ink-2);
}
.bf-loadfail > i { color: var(--th-risk); margin-top: 2px; }
.bf-loadfail-title { font-weight: 600; color: var(--th-ink); margin-bottom: 3px; }
.bf-loadfail-text { font-size: 12.5px; color: var(--th-ink-3); line-height: 1.5; }

/* ==================================================================
   LAYOUT — form + sticky preview
   ================================================================== */
.bf-layout {
  --bf-preview-w: 432px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bf-preview-w);
  gap: 30px;
  padding: 4px 24px 16px;
  align-items: start;
}
.bf-layout.is-collapsed { grid-template-columns: minmax(0, 1fr) 0; gap: 0; }
.bf-form { min-width: 0; max-width: 760px; }

/* Compass scope note */
.bf-scope {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 4px;
  border: 1px solid var(--th-line); border-left: 3px solid var(--th-marigold-deep);
  border-radius: var(--th-radius-5); background: var(--th-paper-sunk);
}
.bf-scope-ico {
  width: 30px; height: 30px; flex: none; border-radius: var(--th-radius-3);
  background: var(--th-marigold-soft); color: var(--th-marigold-deep);
  display: grid; place-items: center;
}
.bf-scope-eyebrow {
  font-family: var(--th-f-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--th-marigold-deep);
}
.bf-scope-text { font-size: 12.5px; color: var(--th-ink-2); line-height: 1.55; margin-top: 3px; }
.bf-scope-text b { color: var(--th-ink); font-weight: 600; }

/* Quick section nav */
.bf-quicknav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 12px 0 12px; margin-bottom: 4px;
  background: var(--th-paper);
  border-bottom: 1px solid var(--th-line-soft);
}
.bf-qn {
  font-size: 11.5px; color: var(--th-ink-3);
  padding: 4px 10px; border-radius: var(--th-radius-pill);
  border: 1px solid var(--th-line-2); background: var(--th-paper-sunk);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bf-qn:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.bf-qn .n { font-family: var(--th-f-mono); color: var(--th-ink-4); margin-right: 5px; }

/* ==================================================================
   SECTIONS + FIELDS
   ================================================================== */
.bf-section { padding: 26px 0; border-top: 1px solid var(--th-line); scroll-margin-top: 56px; }
.bf-section-head { margin-bottom: 18px; }
.bf-eyebrow {
  font-family: var(--th-f-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--th-ink-4);
}
.bf-section-title {
  font-family: var(--th-f-serif); font-weight: 500; font-size: var(--th-size-20);
  letter-spacing: -0.01em; color: var(--th-ink); margin: 5px 0 0;
}
.bf-section-desc { font-size: 12.5px; color: var(--th-ink-3); margin-top: 6px; max-width: 580px; line-height: 1.55; }

.bf-group-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--th-f-serif); font-style: italic; font-size: var(--th-size-15);
  color: var(--th-marigold-deep); margin: 22px 0 14px;
}
.bf-group-label::after { content: ""; flex: 1; height: 1px; background: var(--th-line); }
.bf-group-label.is-advanced { color: var(--th-ink-3); }

.bf-field { display: grid; gap: 6px; margin-bottom: 16px; }
.bf-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf-label { font-size: 12.5px; font-weight: 600; color: var(--th-ink); }
.bf-label .opt { font-weight: 400; color: var(--th-ink-4); font-size: 11px; margin-left: 7px; }
.bf-token {
  font-family: var(--th-f-mono); font-size: 10px; color: var(--th-ink-4);
  letter-spacing: 0.01em; white-space: nowrap;
}
.bf-hint { font-size: 11.5px; color: var(--th-ink-3); line-height: 1.45; }
.bf-input {
  width: 100%; font-family: var(--th-f-sans); font-size: 13.5px; color: var(--th-ink);
  background: var(--th-paper-sunk); border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-3); padding: 8px 10px; outline: none;
}
.bf-input:focus { border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft); }
.bf-input::placeholder { color: var(--th-ink-4); }
.bf-input:disabled, .bf-input.is-readonly {
  background: var(--th-paper-2); color: var(--th-ink-2); cursor: not-allowed;
}
.bf-field.is-muted { opacity: 0.5; }

.bf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.bf-grid-id { display: grid; grid-template-columns: 120px 1fr; gap: 16px 18px; }
.bf-readnote {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--th-ink-3);
}
.bf-lock { color: var(--th-ink-4); }

/* Segmented control */
.bf-seg { display: inline-flex; border: 1px solid var(--th-line-2); border-radius: var(--th-radius-5); overflow: hidden; background: var(--th-paper-sunk); }
.bf-seg.is-full { display: flex; }
.bf-seg-opt {
  flex: 1; padding: 7px 14px; font-family: var(--th-f-sans);
  font-size: 12.5px; font-weight: 500; color: var(--th-ink-2);
  background: transparent; border: none; border-left: 1px solid var(--th-line-2);
  cursor: pointer; white-space: nowrap; text-align: center; line-height: 1.3;
}
.bf-seg-opt:first-child { border-left: none; }
.bf-seg-opt:hover:not(.is-active) { background: var(--th-paper-2); color: var(--th-ink); }
.bf-seg-opt.is-active { background: var(--th-advant); color: var(--th-advant-fg); }
.bf-seg-sub { display: block; font-family: var(--th-f-mono); font-size: 9px; opacity: 0.8; font-weight: 400; margin-top: 2px; }

/* Switch (derive toggles) */
.bf-switch {
  width: 30px; height: 17px; border-radius: 999px; background: var(--th-line-2);
  position: relative; border: none; cursor: pointer; flex: none; padding: 0;
  transition: background 120ms;
}
.bf-switch.is-on { background: var(--th-advant); }
.bf-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--th-paper-sunk);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: left 120ms;
}
.bf-switch.is-on::after { left: 15px; }
.bf-toggle-row { display: flex; align-items: center; gap: 8px; }
.bf-toggle-row .t-label { font-size: 11.5px; color: var(--th-ink-3); }

/* Color field */
.bf-color { display: flex; align-items: center; gap: 10px; }
.bf-swatch {
  width: 26px; height: 26px; border-radius: var(--th-radius-3);
  border: 1px solid var(--th-line-2); cursor: pointer; flex: none; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.bf-swatch:hover { border-color: var(--th-ink-4); }
.bf-hex {
  width: 130px; font-family: var(--th-f-mono); font-size: 12.5px; color: var(--th-ink);
  background: var(--th-paper-sunk); border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-3); padding: 7px 10px; outline: none;
}
.bf-hex:focus { border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft); }
.bf-hex.is-readonly { background: var(--th-paper-2); color: var(--th-ink-2); width: 180px; }
.bf-color-spacer { flex: 1; }

.bf-contrast {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--th-f-mono); font-size: 10.5px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--th-radius-pill); border: 1px solid transparent;
}
.bf-contrast .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bf-contrast.is-ok   { background: var(--th-ok-soft);   color: oklch(40% 0.10 155); }
.bf-contrast.is-risk { background: var(--th-risk-soft); color: oklch(42% 0.14 25); }
[data-theme="dark"] .bf-contrast.is-ok   { color: oklch(82% 0.12 155); background: oklch(22% 0.045 155); }
[data-theme="dark"] .bf-contrast.is-risk { color: oklch(82% 0.13 25);  background: oklch(24% 0.06 25); }

/* Resolved-check contrast callout */
.bf-checkbox-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-top: 4px;
  border: 1px dashed var(--th-line-2); border-radius: var(--th-radius-3);
  background: var(--th-paper); font-size: 11.5px; color: var(--th-ink-3);
}
.bf-checkbox-note.is-active { border-style: solid; border-color: var(--th-line); background: var(--th-paper-sunk); }
.bf-checkbox-note .lbl { color: var(--th-ink-2); }
.bf-checkbox-note .lbl b { color: var(--th-ink); font-weight: 600; }

/* Color picker popover (P6 — bespoke HSV, Layout A: SV square + horizontal hue bar).
   The .bf-picker shell is canon-verbatim; the SV/hue internals are the approved extrapolation. */
.bf-picker {
  margin-top: 8px; width: 248px;
  border: 1px solid var(--th-line-2); border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk); box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 12px;
  position: relative; z-index: 30;
}
.bf-picker-sv {
  position: relative; height: 128px; border-radius: var(--th-radius-3);
  border: 1px solid var(--th-line-2); cursor: crosshair; touch-action: none;
  user-select: none;
}
.bf-picker-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4); pointer-events: none;
}
.bf-picker-hue {
  position: relative; height: 14px; margin-top: 10px; border-radius: 7px; cursor: ew-resize;
  touch-action: none; user-select: none;
  background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.bf-picker-knob {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); pointer-events: none;
}
/* Full-screen click-outside catcher behind the in-flow popover. */
.bf-picker-backdrop { position: fixed; inset: 0; z-index: 20; background: transparent; }

/* ==================================================================
   LOGO slots
   ================================================================== */
.bf-logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bf-slot { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); background: var(--th-paper-sunk); overflow: hidden; }
.bf-slot-head {
  padding: 12px 14px; border-bottom: 1px solid var(--th-line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.bf-slot-title { font-size: 13px; font-weight: 600; color: var(--th-ink); }
.bf-slot-sub { font-size: 11px; color: var(--th-ink-3); }
.bf-slot-body { padding: 14px; display: grid; gap: 13px; }
.bf-drop {
  border: 1.5px dashed var(--th-line-2); border-radius: var(--th-radius-3);
  padding: 14px; text-align: center; background: var(--th-paper);
  position: relative;
}
/* P5: transparent full-cover file input so the canon drop chrome stays the visible
   surface while remaining clickable. The static canon prototype has no working input. */
.bf-drop-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.bf-drop .dz-ico { color: var(--th-ink-4); display: inline-flex; }
.bf-drop .dz-text { font-size: 12px; color: var(--th-ink-2); margin-top: 4px; }
.bf-drop .dz-text b { color: var(--th-advant-deep); font-weight: 600; cursor: pointer; }
.bf-drop .dz-formats { font-family: var(--th-f-mono); font-size: 9.5px; color: var(--th-ink-4); margin-top: 5px; }

.bf-prev-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bf-prev { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bf-prev-stage {
  border: 1px solid var(--th-line); border-radius: var(--th-radius-3);
  background: #ffffff; padding: 8px 12px; display: flex; align-items: center; min-width: 56px;
}
.bf-prev-cap { font-family: var(--th-f-mono); font-size: 9px; color: var(--th-ink-4); letter-spacing: 0.02em; }

/* The constructed wordmark / squaremark used in logo previews.
   These render the tenant's applicant-surface typography, so they
   use the applicant fonts directly (Source Serif 4 / Source Sans 3)
   rather than the --th-f-* tokens which resolve to Threshold's own
   type stack. */
.cmp-wordmark {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; white-space: nowrap;
}
.cmp-squaremark {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 600;
  display: grid; place-items: center; line-height: 1; color: #fff;
}

.bf-filemeta {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; background: var(--th-paper-2); border: 1px solid var(--th-line);
  border-radius: var(--th-radius-3); font-size: 11.5px;
}
.bf-filemeta .fm-ico { color: var(--th-ink-3); display: inline-flex; }
.bf-filemeta .fm-name { font-weight: 600; color: var(--th-ink); }
.bf-filemeta .fm-meta { font-family: var(--th-f-mono); font-size: 10px; color: var(--th-ink-3); }
.bf-filemeta .fm-remove { margin-left: auto; color: var(--th-ink-3); cursor: pointer; font-size: 11px; }
.bf-filemeta .fm-remove:hover { color: var(--th-risk); }

.bf-aspectwarn {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 11px; border-radius: var(--th-radius-3);
  background: var(--th-warn-soft); border: 1px solid color-mix(in oklab, var(--th-warn) 32%, transparent);
  font-size: 11px; color: oklch(42% 0.13 65); line-height: 1.45;
}
[data-theme="dark"] .bf-aspectwarn { color: oklch(84% 0.12 75); }
.bf-aspectwarn .aw-ico { flex: none; display: inline-flex; margin-top: 1px; }

/* ==================================================================
   SHAPE — radius preview
   ================================================================== */
.bf-num { width: 84px; }
.bf-num-suffix { position: relative; }
.bf-radius-prev { display: flex; align-items: flex-end; gap: 20px; margin-top: 8px; }
.bf-rp { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.bf-rp-box { border: 1.5px solid var(--th-advant); background: var(--th-advant-soft); }
.bf-rp-cap { font-family: var(--th-f-mono); font-size: 9px; color: var(--th-ink-4); text-align: center; }
.bf-rp-cap b { color: var(--th-ink-2); font-weight: 600; }

/* ==================================================================
   Collapsible (advanced sections)
   ================================================================== */
.bf-collapse { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); overflow: hidden; background: var(--th-paper-sunk); margin-bottom: 12px; }
.bf-collapse-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; cursor: pointer; width: 100%;
  background: transparent; border: none; text-align: left; font: inherit;
}
.bf-collapse-head:hover { background: var(--th-paper-2); }
.bf-collapse-titles { flex: 1; min-width: 0; }
.bf-collapse-title { font-size: 12.5px; font-weight: 600; color: var(--th-ink); }
.bf-collapse-desc { font-size: 11.5px; color: var(--th-ink-3); margin-top: 2px; }
.bf-collapse-chev { color: var(--th-ink-4); transition: transform 140ms; display: inline-flex; flex: none; }
.bf-collapse.is-open .bf-collapse-chev { transform: rotate(180deg); }
.bf-collapse-body { padding: 16px 14px; border-top: 1px solid var(--th-line); }

/* Chrome bundle rows (advanced chrome editing surface) */
.bf-bundle { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--th-line-soft); }
.bf-bundle:last-child { border-bottom: none; }
.bf-bundle-ico {
  width: 30px; height: 30px; flex: none; border-radius: var(--th-radius-3);
  background: var(--th-paper-2); border: 1px solid var(--th-line-2);
  color: var(--th-ink-3); display: grid; place-items: center;
}
.bf-bundle-body { flex: 1; min-width: 0; }
.bf-bundle-name { font-size: 12.5px; font-weight: 600; color: var(--th-ink); }
.bf-bundle-token { font-family: var(--th-f-mono); font-size: 9.5px; color: var(--th-ink-4); margin-left: 7px; font-weight: 400; }
.bf-bundle-desc { font-size: 11.5px; color: var(--th-ink-3); margin-top: 2px; }
.bf-tbd {
  font-family: var(--th-f-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--th-ink-4); border: 1px solid var(--th-line-2); border-radius: var(--th-radius-pill); padding: 3px 9px; flex: none;
}

/* Out-of-scope marker (design QA helper) */
.bf-oos {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--th-f-mono); font-size: 9.5px; color: var(--th-ink-4); letter-spacing: 0.02em;
}
.bf-oos::before { content: "⌗"; font-size: 11px; }

/* Type specimen */
.bf-specimen { border: 1px solid var(--th-line); border-radius: var(--th-radius-3); background: var(--th-paper); padding: 14px 16px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.bf-specimen .sp-cap { font-family: var(--th-f-mono); font-size: 9px; color: var(--th-ink-4); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px; }
.bf-specimen-headline { font-size: 28px; color: var(--th-ink); line-height: 1; }
.bf-specimen-body { font-size: 15px; color: var(--th-ink-2); line-height: 1.5; }

/* ==================================================================
   LIVE PREVIEW PANEL (Compass — always light)

   The preview renders the APPLICANT surface (Compass) using the
   tenant's chosen brand tokens. The .bf-stage is always white/light
   regardless of Threshold's own theme, because applicant-facing
   Compass is light-only. The .cmp-* classes render applicant chrome
   and use applicant-specific fonts (Source Serif 4, Source Sans 3)
   directly, not Threshold tokens.
   ================================================================== */
.bf-preview { position: sticky; top: 12px; }
.bf-preview-cap {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.bf-preview-cap .pc-title { font-family: var(--th-f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-3); }
.bf-preview-cap .spacer { flex: 1; }
.bf-preview-cap .pc-toggle { font-size: 11px; color: var(--th-ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.bf-preview-cap .pc-toggle:hover { color: var(--th-ink); }
.bf-vp { display: inline-flex; border: 1px solid var(--th-line-2); border-radius: var(--th-radius-pill); overflow: hidden; background: var(--th-paper-sunk); }
.bf-vp-opt { border: none; background: transparent; padding: 3px 10px; font-family: var(--th-f-sans); font-size: 10.5px; font-weight: 500; color: var(--th-ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.bf-vp-opt:hover:not(.is-active) { color: var(--th-ink); }
.bf-vp-opt.is-active { background: var(--th-advant); color: var(--th-advant-fg); }
.bf-vp-opt svg { display: block; }

/* Scaled preview canvas */
.bf-canvas { transform-origin: top left; }
.bf-canvas.is-desktop .cmp-topbar { padding: 16px 44px; }
.bf-canvas.is-desktop .cmp-body { max-width: 760px; margin: 0 auto; padding: 34px 24px; }
.bf-canvas.is-desktop .cmp-h1 { font-size: 32px; }
.bf-canvas.is-desktop .cmp-signin { padding: 64px; }
.bf-canvas.is-desktop .cmp-signin-card { max-width: 340px; }
.bf-canvas.is-desktop .cmp-stats { gap: 16px; }

/* Browser chrome wrapper */
.bf-browser {
  border: 1px solid var(--th-line-2); border-radius: var(--th-radius-8); overflow: hidden;
  background: var(--th-paper-sunk); box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.bf-browser-bar { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--th-paper-2); border-bottom: 1px solid var(--th-line); }
.bf-dots { display: flex; gap: 5px; }
.bf-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--th-line-2); display: block; }
.bf-url { flex: 1; font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-3); background: var(--th-paper); border: 1px solid var(--th-line); border-radius: 999px; padding: 4px 12px; text-align: center; }
.bf-tabs { display: flex; background: var(--th-paper-sunk); border-bottom: 1px solid var(--th-line); }
.bf-tab {
  flex: 1; padding: 10px 8px; font-family: var(--th-f-sans); font-size: 11.5px; font-weight: 500;
  color: var(--th-ink-3); text-align: center; cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent;
}
.bf-tab.is-active { color: var(--th-ink); border-bottom-color: var(--th-marigold-deep); }
.bf-tab:hover:not(.is-active) { background: var(--th-paper-2); color: var(--th-ink-2); }

/* The Compass stage is ALWAYS light — applicant surface is light-only. */
.bf-stage { background: #ffffff; height: 552px; overflow: hidden; position: relative; }
.bf-stage-scroll { height: 100%; overflow: hidden; }

/* Compass preview chrome — applicant fonts used directly here */
.cmp-topbar { display: flex; align-items: center; gap: 11px; padding: 12px 16px; }
.cmp-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-family: "Source Serif 4", serif; font-weight: 700; font-size: 15px; }
.cmp-tb-name { font-family: "Source Serif 4", serif; line-height: 1.05; }
.cmp-tb-tag { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }
.cmp-body { padding: 18px 18px; }
.cmp-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cmp-h1 { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 24px; line-height: 1.1; margin: 7px 0 4px; }
.cmp-lede { font-family: "Source Sans 3", sans-serif; font-size: 12px; line-height: 1.5; }
.cmp-field { margin-top: 13px; }
.cmp-flabel { font-family: "Source Sans 3", sans-serif; font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.cmp-fbox { height: 34px; background: #fff; }
.cmp-btn { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; font-family: "Source Sans 3", sans-serif; font-size: 12.5px; font-weight: 600; cursor: default; }
.cmp-mfc { margin-top: 16px; padding: 13px 15px; }
.cmp-mfc-eyebrow { font-family: "Source Sans 3", sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.cmp-mfc-eyebrow .nd { width: 6px; height: 6px; border-radius: 50%; }
.cmp-mfc-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 16px; margin-top: 6px; }
.cmp-mfc-body { font-family: "Source Sans 3", sans-serif; font-size: 11.5px; line-height: 1.5; margin-top: 4px; }

/* Dashboard mock */
.cmp-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.cmp-stat { padding: 12px; }
.cmp-stat-k { font-family: "Source Sans 3", sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-stat-v { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 22px; margin-top: 5px; }
.cmp-prog { height: 6px; border-radius: 999px; margin-top: 18px; overflow: hidden; }
.cmp-prog > span { display: block; height: 100%; }
.cmp-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.cmp-step { display: flex; align-items: center; gap: 10px; font-family: "Source Sans 3", sans-serif; font-size: 12px; }
.cmp-check { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; }

/* Sign-in mock */
.cmp-signin { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; }
.cmp-signin-card { width: 100%; max-width: 260px; padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Preview label / warning bar */
.bf-preview-label {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 13px; border-top: 1px dashed var(--th-line);
  background: var(--th-paper-2); font-family: var(--th-f-mono);
  font-size: 9.5px; color: var(--th-ink-3); line-height: 1.5;
}
[data-theme="dark"] .bf-preview-label { background: var(--th-paper-3); }
.bf-preview-label .lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--th-warn); margin-top: 2px; flex: none; }
.bf-preview-label b { color: var(--th-ink-2); }

.bf-preview-collapsed {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 10px; border: 1px dashed var(--th-line-2); border-radius: var(--th-radius-5);
  color: var(--th-ink-3); font-size: 11px; text-align: center;
  writing-mode: vertical-rl; height: 220px; justify-content: center;
}