/* ====================================================================
   Brandhunt · Scope — the crosshair command-center view
   Everything scoped under .bh-scope
   so it cannot leak into the rest of the app.
   ==================================================================== */

.bh-scope {
    /* Structural tokens — alias global tokens defined in styling.css so the
       scope participates in the project-wide [data-theme="dark"]
       toggle (set by useDarkMode on <html>). The ink/cream naming is kept
       so existing rules like `background: var(--bg-secondary)` don't need rewrites. */
    --ink-0:   var(--bg-page);          /* page background */
    --ink-1:   var(--bg-primary);       /* raised card */
    --ink-2:   var(--bg-secondary);     /* satellite/card surface */
    --ink-3:   var(--bg-muted);         /* satellite hover / deeper inset */
    --cream:   var(--text-primary);     /* main text */
    --cream-2: var(--text-secondary);   /* secondary text */
    --muted:   var(--text-muted);       /* tertiary text */
    --line:    var(--border);
    --line-2:  var(--border-subtle);

    /* Alpha-overlay tokens. Light defaults: dark-on-cream tints. The
       [data-theme="dark"] override below flips these to cream-on-dark. */
    --surface-soft:   rgba(44, 44, 42, 0.04);   /* most subtle tint (empty thumbs, bands) */
    --surface-mid:    rgba(44, 44, 42, 0.08);   /* button bg, sat-kind chip */
    --surface-strong: rgba(44, 44, 42, 0.18);   /* divider, scrollbar thumb */
    --muted-2:        rgba(44, 44, 42, 0.34);
    --neu-bg:         rgba(44, 44, 42, 0.07);
    --grid-tint:      rgba(44, 44, 42, 0.025);  /* .center::before grid lines */

    /* Card surfaces (alpha bgs used with backdrop-filter blur) */
    --card-bg:         rgba(255, 255, 255, 0.85);   /* satellite face */
    --card-bg-strong:  rgba(255, 255, 255, 0.94);   /* expanded-card face */
    --surface-overlay: rgba(245, 240, 235, 0.78);   /* top-bar, side-nav veil */
    --backdrop:        rgba(245, 240, 235, 0.55);   /* expand backdrop */
    --orb-veil:        rgba(255, 255, 255, 0.55);   /* orb inner highlight */
    --card-kiss:       4%;                          /* lens-hue gradient strength */

    /* Text-color RGB triplet — used wherever the code needs an alpha-text
       like color: rgba(var(--text-rgb), 0.85). Flips per theme so muted
       text reads correctly on both backgrounds. */
    --text-rgb: 44, 44, 42;
    /* Page-bg RGB triplet — used for veils over the page (top-bar, side
       nav, guard backdrop) where alpha varies per spot. */
    --page-rgb: 245, 240, 235;
    /* Card-bg RGB triplet — used for satellite/card surface backgrounds
       and their hover variants where alpha varies. */
    --card-rgb: 255, 255, 255;

    /* Accent system — oklch + hue-driven. Every lens now carries the same
       Brandhunt hunter-orange hue (45), so the whole stage reads as one
       brand; the hue var is kept so the machinery stays in place. */
    --accent-h:    45;
    --accent:      oklch(0.62 0.17 var(--accent-h));
    --accent-soft: oklch(0.62 0.17 var(--accent-h) / 0.13);
    --accent-line: oklch(0.62 0.17 var(--accent-h) / 0.35);
    --pos:         oklch(0.60 0.13 150);
    --pos-bg:      oklch(0.60 0.13 150 / 0.12);
    --warn:        oklch(0.62 0.13 50);
    --warn-bg:     oklch(0.62 0.13 50 / 0.12);

    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Display = card titles + data values. Inter — clean neutral grotesque,
       matches the Brandhunt design (Space Grotesk is gone). */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Serif accent — reserved for the orb monogram ONLY. */
    --font-serif:   'Instrument Serif', 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* The Scope runs CHROMELESS — styling.css hides the global navbar and
       footer whenever .bh-scope is on the page (body:has(.bh-scope)), so the
       stage owns the full viewport. The sidebar carries the brand mark and
       the profile menu instead. */
    position: relative;
    width: 100%;
    height: calc(100vh - var(--notification-height));
    min-height: calc(100vh - var(--notification-height));
    /* Dynamic viewport height — tracks the *visible* area as the mobile URL bar
       shows/hides, so nothing ever falls below the fold or grows a second
       scrollbar. (vh kept above as a fallback for browsers without dvh.) */
    height: calc(100dvh - var(--notification-height));
    min-height: calc(100dvh - var(--notification-height));
    background: var(--ink-0);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 12.5px;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* Dark-mode overrides. Structural ink/cream tokens already swap via the
   global cascade (--bg-page etc.). Only flip the alpha overlays (now
   cream-on-dark instead of dark-on-cream) and lift the accent lightness. */
[data-theme="dark"] .bh-scope {
    --surface-soft:   rgba(240, 235, 228, 0.04);
    --surface-mid:    rgba(240, 235, 228, 0.08);
    --surface-strong: rgba(240, 235, 228, 0.18);
    --muted-2:        rgba(240, 235, 228, 0.34);
    --neu-bg:         rgba(240, 235, 228, 0.07);
    --grid-tint:      rgba(240, 235, 228, 0.025);

    --card-bg:         rgba(38, 36, 33, 0.82);
    --card-bg-strong:  rgba(38, 36, 33, 0.94);
    --surface-overlay: rgba(16, 15, 13, 0.78);
    --backdrop:        rgba(8, 10, 18, 0.55);
    --orb-veil:        rgba(255, 255, 255, 0.15);
    --card-kiss:       5%;

    --text-rgb: 240, 235, 228;
    --page-rgb: 28, 26, 24;
    --card-rgb: 44, 42, 39;

    --accent:      oklch(0.72 0.17 var(--accent-h));
    --accent-soft: oklch(0.72 0.17 var(--accent-h) / 0.18);
    --accent-line: oklch(0.72 0.17 var(--accent-h) / 0.35);
    --pos:         oklch(0.80 0.13 150);
    --pos-bg:      oklch(0.80 0.13 150 / 0.14);
    --warn:        oklch(0.78 0.13 50);
    --warn-bg:     oklch(0.78 0.13 50 / 0.14);
}
.bh-scope * { box-sizing: border-box; }

/* ────────────── viewport + scaler ──────────────
   Originally a 1440×1000 design canvas with transform: scale() to fit. We
   dropped the fixed-canvas approach so the scope spans full viewport
   width (navbar logo edge → profile-pic edge). The grid inside .stage is
   already responsive (sidebar 240px + 1fr + watch rail 256px), so center
   expands naturally on wider screens. Orb + rings stay centered relative to
   the center column; satellite SLOT_VECTORS are absolute pixel offsets from
   that center, so wider columns just leave more breathing room. */
.bh-scope .viewport {
    position: absolute; inset: 0;
    background: var(--ink-0);
}
.bh-scope .scaler {
    width: 100%; height: 100%;
    /* Chromeless page — let the stage breathe on big displays. */
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
}

/* ────────────── Stage ────────────── */
.bh-scope .stage {
    position: absolute; inset: 0;
    background:
        radial-gradient(900px 700px at 55% 50%, oklch(0.72 0.15 var(--accent-h) / 0.07), transparent 70%),
        radial-gradient(1400px 1100px at 55% 50%, var(--bg-secondary), var(--ink-0) 80%);
    overflow: hidden;
    transition: background 1200ms cubic-bezier(.2,.7,.2,1);
    display: grid;
    padding: 14px;
    column-gap: 14px;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "side center";
}

/* ────────────── Sticky notes + stage toolbar ──────────────
   Persistent per-user, per-brand notes overlaid on the center stage. The layer
   is click-through so it never steals orb/satellite clicks — only the note
   cards opt back in to pointer events.
   .notes-toolbar doubles as the stage's only header row: Note (left, once
   loaded + logged in) and the page's Share/Track/Classic View actions (right,
   `topRightSlot`) — there used to be a separate empty bar above .center for
   just the actions; removed, everything lives on this one row now. */
.bh-scope .notes-layer {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 14;
}
.bh-scope .notes-toolbar {
    position: absolute; top: 14px; left: 16px; right: 16px;
    z-index: 15;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
}
.bh-scope .notes-toolbar__left {
    min-width: 0;
    display: flex; align-items: center; gap: 8px;   /* same gap as __actions so Note · Refresh don't touch */
}
.bh-scope .notes-toolbar__actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    min-width: 0;
}
/* Match Classic View's action row (t-btn-ghost: 12px UI font, 7px/12px
   padding) so switching views doesn't jump in scale. Scoped to this toolbar
   only — pill-btns elsewhere (mobile bar etc.) keep their default size. */
.bh-scope .notes-toolbar__actions .pill-btn {
    padding: 9px 15px;
    font: 500 12.5px/1.2 var(--font-ui);
    letter-spacing: 0;
}
.bh-scope .notes-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(var(--card-rgb), 0.75);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--muted-2);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bh-scope .notes-add:hover {
    border-color: oklch(0.7 0.13 var(--accent-h));
    color: oklch(0.55 0.16 var(--accent-h));
    background: rgba(var(--card-rgb), 0.92);
}
.bh-scope .notes-add__ic { font-size: 13px; }

/* Admin refresh — icon-only sibling of the Note pill. Filled with the active
   lens accent (same treatment as the Tracking pill's is-on state, and the
   same --accent-h-driven var, so it re-tints as the user changes section).
   While a refresh is in flight the ⟳ spins and the button goes inert so it
   can't double-fire. */
.bh-scope .bhs-refresh {
    padding: 7px 10px;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-0);
}
.bh-scope .bhs-refresh:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent-line);
    color: var(--accent);
}
.bh-scope .bhs-refresh__ic { font-size: 14px; display: inline-block; }
.bh-scope .bhs-refresh.is-refreshing { pointer-events: none; opacity: 0.7; }
.bh-scope .bhs-refresh.is-refreshing .bhs-refresh__ic { animation: bhs-refresh-spin 1s linear infinite; }
@keyframes bhs-refresh-spin { to { transform: rotate(360deg); } }

/* Notepad paper — a fixed warm palette (NOT the theme card vars) so notes read
   as beige/yellow paper, distinct from the dark glass satellite cards. */
.bh-scope .note-card {
    --note-bg:    #F8F0DC;   /* warm cream sheet — deliberately NOT the card glass */
    --note-edge:  #E6D9BC;
    --note-ink:   #38321F;
    --note-faint: #9C8F6B;

    position: absolute;
    width: 200px; min-height: 150px;
    display: flex; flex-direction: column;
    pointer-events: auto;
    border: 1px solid var(--note-edge);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--note-bg);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
[data-theme="dark"] .bh-scope .note-card {
    --note-bg:    #2A2418;   /* amber-tinted charcoal */
    --note-edge:  #453B26;
    --note-ink:   #F0E8D4;
    --note-faint: #A2946E;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.bh-scope .note-card__head {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px 6px;
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--note-edge) 60%, transparent);
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.bh-scope .note-card__head:active { cursor: grabbing; }
.bh-scope .note-card__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: oklch(0.62 0.17 var(--accent-h));
    flex-shrink: 0;
}
.bh-scope .note-card__label {
    flex: 1 1 auto;
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--note-faint);
}
.bh-scope .note-card__close {
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--note-faint);
    font-size: 16px; line-height: 1;
    cursor: pointer; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.bh-scope .note-card__close:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--note-edge) 45%, transparent);
}
.bh-scope .note-card__text {
    flex: 1 1 auto;
    width: 100%;
    border: none; outline: none; resize: vertical;
    padding: 10px 12px;
    background: transparent;
    color: var(--note-ink);
    font-family: var(--font-ui);
    font-size: 13px; line-height: 1.55;
    min-height: 110px;
}
.bh-scope .note-card__text::placeholder { color: var(--note-faint); }

.bh-scope .stage::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(var(--text-rgb), 0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 14%, rgba(var(--text-rgb), 0.22) 50%, transparent 100%),
        radial-gradient(1px 1px at 32% 76%, rgba(var(--text-rgb), 0.28) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 62%, rgba(var(--text-rgb), 0.22) 50%, transparent 100%),
        radial-gradient(1px 1px at 56% 86%, rgba(var(--text-rgb), 0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 48%, rgba(var(--text-rgb), 0.16) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 38%, rgba(var(--text-rgb), 0.22) 50%, transparent 100%),
        radial-gradient(1px 1px at 5% 88%, rgba(var(--text-rgb), 0.16) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 92%, rgba(var(--text-rgb), 0.20) 50%, transparent 100%),
        radial-gradient(1px 1px at 44% 8%, rgba(var(--text-rgb), 0.18) 50%, transparent 100%);
    pointer-events: none;
    animation: bhs-tw 7s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes bhs-tw { 0% { opacity: .4 } 100% { opacity: .85 } }

/* ────────────── Sidebar (floating white panel) ────────────── */
.bh-scope .side {
    grid-area: side;
    background: var(--ink-1);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 14px 40px -24px rgba(35, 32, 29, 0.35);
    padding: 18px 16px 16px;
    display: flex; flex-direction: column; gap: 16px;
    z-index: 30;
    overflow: hidden;
}
.bh-scope .side-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 4px 6px;
    cursor: pointer;
    outline: none;
}
.bh-scope .side-brand__mark { width: 34px; height: 34px; flex-shrink: 0; }
/* Two-tone mark theme swap (charcoal ticks ↔ cream ticks). */
.bh-scope .side-brand__mark--dark { display: none; }
[data-theme="dark"] .bh-scope .side-brand__mark--default { display: none; }
[data-theme="dark"] .bh-scope .side-brand__mark--dark    { display: block; }
.bh-scope .side-brand__word {
    font: 800 19px/1 var(--font-ui);
    letter-spacing: -0.04em;
    color: var(--text-primary);
}
.bh-scope .side-brand__word em { font-style: normal; color: var(--accent); }
.bh-scope .new-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    border: 0; border-radius: 12px; padding: 12px 14px;
    font: 600 13.5px/1 var(--font-ui);
    letter-spacing: 0.005em;
    cursor: pointer; gap: 8px;
    box-shadow: 0 8px 20px -8px oklch(0.62 0.17 var(--accent-h) / 0.55);
    transition: filter 140ms, transform 140ms, box-shadow 140ms;
}
.bh-scope .new-btn:hover { filter: brightness(0.94); transform: translateY(-1px); }
.bh-scope .new-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bh-scope .new-btn__plus { font-size: 14px; line-height: 1; }

.bh-scope .nav { display: flex; flex-direction: column; gap: 1px; }
.bh-scope .nav-h {
    font: 500 10.5px/1 var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--muted-2); padding: 8px 8px 4px;
}
/* "Tracking" header — label left, live count right (per the Brandhunt design). */
.bh-scope .nav-h--tracking {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 8px;
    font: 600 12px/1 var(--font-ui);
    text-transform: none; letter-spacing: 0;
    color: var(--text-primary);
}
.bh-scope .nav-h--tracking .count {
    color: var(--muted-2);
    font: 500 11.5px/1 var(--font-mono);
}
.bh-scope .nav-i {
    padding: 7px 8px; border-radius: 6px;
    color: var(--text-primary); font-size: 12.5px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    text-decoration: none;
}
.bh-scope .nav-i:hover { background: var(--surface-mid); }
.bh-scope .nav-i.is-on { background: var(--accent-soft); color: var(--text-primary); font-weight: 500; }
.bh-scope .nav-i.is-disabled { color: var(--muted-2); cursor: not-allowed; }
.bh-scope .nav-i.is-disabled:hover { background: transparent; }
.bh-scope .nav-i .count { color: var(--muted-2); font: 500 11px/1 var(--font-mono); }

/* Tracked-brand list inside the sidebar — beneath the "Tracked" nav item.
   Each row shows logo (or fallback initials) + name. Click swaps the orb. */
.bh-scope .side-tracked-list {
    display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 6px;
    /* Cap at ~6 rows (≈36px each) so a long tracked list scrolls here instead
       of shoving the lens pills down the sidebar. */
    max-height: 216px;
    overflow-y: auto;
}
.bh-scope .side-tracked-list::-webkit-scrollbar { width: 4px; }
.bh-scope .side-tracked-list::-webkit-scrollbar-thumb {
    background: var(--surface-mid);
    border-radius: 2px;
}
.bh-scope .side-tracked-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--cream-2);
    cursor: pointer;
    text-align: left;
    font: 400 12px/1.2 var(--font-ui);
    transition: background 120ms, color 120ms;
    width: 100%;
    min-width: 0;
}
.bh-scope .side-tracked-item:hover {
    background: var(--surface-mid);
    color: var(--text-primary);
}
.bh-scope .side-tracked-item.is-active {
    background: var(--accent-soft);
    color: var(--text-primary);
    font-weight: 500;
}
.bh-scope .side-tracked-logo,
.bh-scope .side-tracked-fallback {
    width: 20px; height: 20px;
    border-radius: 5px;
    background: var(--ink-3);
    color: var(--text-primary);
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--line-2);
    display: grid; place-items: center;
    font: 600 9px/1 var(--font-display);
    letter-spacing: 0.02em;
}
.bh-scope .side-tracked-item.is-active .side-tracked-fallback {
    background: var(--accent);
    color: var(--ink-0);
    border-color: var(--accent);
}
.bh-scope .side-tracked-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .side-tracked-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-soft);
    flex-shrink: 0;
}

/* "How it works" — relocated from the header into the sidebar's open space.
   A wide, tall, calm card-button: icon badge + title + one-line hint. Sits just
   above the user footer (side-foot uses margin-top:auto to claim the bottom). */
.bh-scope .side-hiw {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    margin-top: auto;            /* float down into the open space below the lenses */
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    text-align: left;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, transform 150ms, box-shadow 150ms;
}
.bh-scope .side-hiw:hover {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(0,0,0,0.6);
}
.bh-scope .side-hiw__ic {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font: 600 14px/1 var(--font-mono);
}
.bh-scope .side-hiw__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-scope .side-hiw__title {
    font: 500 13px/1.1 var(--font-ui);
    color: var(--text-primary);
}
.bh-scope .side-hiw__sub {
    font: 400 11px/1.3 var(--font-ui);
    color: var(--muted);
}

/* ── Sticky-note spawner — dashed drop-zone card in the sidebar ── */
.bh-scope .side-note-box {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px;
    padding: 14px;
    border-radius: 14px;
    border: 1.5px dashed var(--accent-line);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 150ms, border-color 150ms;
}
.bh-scope .side-note-box:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.bh-scope .side-note-box__sticky {
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(160deg, #f9edaa, #eeda74);
    border-radius: 3px 3px 12px 3px;
    box-shadow: 0 4px 10px rgba(35, 32, 29, 0.2);
    transform: rotate(-5deg);
}
.bh-scope .side-note-box__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-scope .side-note-box__title { font: 600 13px/1 var(--font-ui); color: var(--accent); }
.bh-scope .side-note-box__sub { font: 400 11px/1.35 var(--font-ui); color: var(--muted); }

/* side-hiw above already claims the bottom slack; when it's absent the footer
   does. Both use margin-top:auto, and only one renders at a time per layout. */
.bh-scope .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.bh-scope .credits {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; background: var(--surface-soft);
}
.bh-scope .credits-row { display: flex; justify-content: space-between; font-size: 11.5px; }
.bh-scope .credits-label { color: var(--muted); }
.bh-scope .credits-val { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.bh-scope .credits-bar {
    height: 4px; background: var(--surface-mid); border-radius: 2px;
    margin: 8px 0 10px; overflow: hidden;
}
.bh-scope .credits-bar > span { display: block; height: 100%; background: var(--accent); }
.bh-scope .upgrade {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--line-2); background: transparent;
    border-radius: 6px; font: 500 11.5px/1 var(--font-ui);
    cursor: pointer; color: var(--text-primary);
}
.bh-scope .upgrade:hover { background: var(--surface-mid); }
/* ── Profile row (bottom-left) + upward menu — replaces the navbar's profile
      dropdown on this chromeless page. ── */
.bh-scope .side-user-wrap { position: relative; }
.bh-scope .side-user {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 140ms, border-color 140ms;
}
.bh-scope .side-user:hover,
.bh-scope .side-user.is-open {
    background: var(--surface-soft);
    border-color: var(--line);
}
.bh-scope .avi {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--ink-3); color: var(--text-primary);
    font: 600 13px/1 var(--font-display);
    display: inline-grid; place-items: center;
    border: 1px solid var(--line-2);
    flex-shrink: 0;
}
.bh-scope .avi--img { object-fit: cover; }
.bh-scope .user-meta {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.bh-scope .user-name {
    font: 600 12.5px/1.2 var(--font-ui);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .user-sub {
    color: var(--muted-2); font: 400 10.5px/1.2 var(--font-ui);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .side-user__chev {
    flex-shrink: 0;
    color: var(--muted-2);
    transition: transform 160ms;
}
.bh-scope .side-user__chev.is-flipped { transform: rotate(180deg); }

.bh-scope .side-user-menu {
    position: absolute;
    bottom: calc(100% + 8px); left: 0; right: 0;
    background: var(--ink-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 50px -16px rgba(35, 32, 29, 0.4);
    padding: 6px;
    z-index: 60;
    display: flex; flex-direction: column; gap: 2px;
    animation: bhs-menu-in 150ms ease-out;
}
@keyframes bhs-menu-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.bh-scope .side-user-menu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0; border-radius: 9px;
    background: transparent;
    font: 500 12.5px/1 var(--font-ui);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 120ms;
}
.bh-scope .side-user-menu__item:hover { background: var(--surface-mid); }
.bh-scope .side-user-menu__ic {
    width: 16px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--muted);
}
.bh-scope .side-user-menu__count {
    margin-left: auto;
    font: 500 10.5px/1 var(--font-mono);
    color: var(--muted-2);
}
.bh-scope .side-user-menu__item--admin .side-user-menu__ic { color: var(--accent); }
.bh-scope .side-user-menu__item--logout {
    margin-top: 4px;
    border-top: 1px solid var(--line-2);
    border-radius: 0 0 9px 9px;
    padding-top: 11px;
    color: var(--warn);
}
.bh-scope .side-user-menu__item--logout .side-user-menu__ic { color: var(--warn); }

/* Logged-out footer — the scope is public, so anon users get the auth pair. */
.bh-scope .side-auth { display: flex; gap: 8px; }
.bh-scope .side-auth__join {
    flex: 1;
    background: var(--accent); color: #fff;
    border: 0; border-radius: 10px; padding: 11px 10px;
    font: 600 12.5px/1 var(--font-ui);
    cursor: pointer;
}
.bh-scope .side-auth__join:hover { filter: brightness(0.94); }
.bh-scope .side-auth__login {
    flex: 1;
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--line); border-radius: 10px; padding: 11px 10px;
    font: 500 12.5px/1 var(--font-ui);
    cursor: pointer;
}
.bh-scope .side-auth__login:hover { background: var(--surface-mid); }

/* ────────────── Center ────────────── */
.bh-scope .center {
    grid-area: center;
    position: relative;
    /* Was overflow:hidden which silently clipped any satellite whose anchor
       offset pushed it past .center's edges. Now visible so cards always
       render fully; the scope root grows to whatever's needed. */
    overflow: visible;
    min-width: 0;
}
.bh-scope .center::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--grid-tint) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(700px 600px at 50% 50%, black 0%, transparent 80%);
    pointer-events: none;
}
.bh-scope .ct-actions { display: flex; gap: 6px; }
.bh-scope .pill-btn {
    background: rgba(var(--card-rgb), 0.92);
    border: 1px solid var(--line);
    color: var(--text-primary);
    padding: 8px 14px; border-radius: 999px;
    font: 500 12px/1 var(--font-ui); letter-spacing: 0.01em;
    box-shadow: 0 6px 18px -12px rgba(35, 32, 29, 0.35);
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}
.bh-scope .pill-btn:hover { background: var(--surface-mid); border-color: var(--line-2); }
.bh-scope .pill-btn.is-primary { background: var(--accent); color: var(--ink-0); border-color: var(--accent); }
.bh-scope .pill-btn.is-primary:hover { opacity: 0.92; background: var(--accent); }
.bh-scope .pill-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Track button — idle is outlined gold, tracked state is filled gold so it
   reads as "this brand is in your list". Hover on tracked subtly previews
   the untrack action without committing. */
.bh-scope .pill-btn--track {
    background: transparent;
    border-color: var(--accent-line);
    color: var(--accent);
}
.bh-scope .pill-btn--track:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.bh-scope .pill-btn--track.is-on {
    background: var(--accent);
    color: var(--ink-0);
    border-color: var(--accent);
}
.bh-scope .pill-btn--track.is-on:hover:not(:disabled) {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent-line);
}

/* Share button — public to all. Tinted with the accent so it reads as the
   primary "take this with you" action without shouting. Flips to a filled
   confirmation for ~1.8s after copying. */
.bh-scope .pill-btn--share {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}
.bh-scope .pill-btn--share:hover {
    background: var(--accent);
    color: var(--ink-0);
    border-color: var(--accent);
}
.bh-scope .pill-btn--share.is-copied,
.bh-scope .pill-btn--share.is-copied:hover {
    background: var(--accent);
    color: var(--ink-0);
    border-color: var(--accent);
}

/* ── The orbit wrapper — fixed design canvas, scaled by ScopeStage's `fit`
      so rings + orb + all satellites always land fully inside the viewport
      (no clipping, no scrollbars, any device). ── */
.bh-scope .orbit {
    position: absolute; inset: 0;
    transform-origin: 50% 50%;
    z-index: 2;
}

/* Crosshair target — soft concentric orange glow discs (replacing the old
   spinning dashed rings) with axis hairlines + tick marks. */
.bh-scope .ring {
    position: absolute; left: 50%; top: 50%;
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
.bh-scope .ring.r1 {
    width: 330px; height: 330px;
    background: radial-gradient(circle,
        oklch(0.68 0.17 var(--accent-h) / 0.20) 0%,
        oklch(0.68 0.17 var(--accent-h) / 0.10) 55%,
        transparent 74%);
}
.bh-scope .ring.r2 {
    width: 490px; height: 490px;
    background: radial-gradient(circle, transparent 58%,
        oklch(0.68 0.17 var(--accent-h) / 0.07) 70%,
        transparent 82%);
    box-shadow: inset 0 0 0 1px oklch(0.62 0.17 var(--accent-h) / 0.14);
}
.bh-scope .ring.r3 {
    width: 650px; height: 650px;
    box-shadow: inset 0 0 0 1px oklch(0.62 0.17 var(--accent-h) / 0.08);
}
/* Tick marks — N/S on r2, E/W on r3, echoing the crosshair logo. */
.bh-scope .ring.r2::before, .bh-scope .ring.r2::after {
    content: ""; position: absolute; width: 2px; height: 16px;
    background: var(--accent); left: 50%; transform: translateX(-50%);
    top: -8px; opacity: .85; border-radius: 1px;
}
.bh-scope .ring.r2::after { top: auto; bottom: -8px; }
.bh-scope .ring.r3::before, .bh-scope .ring.r3::after {
    content: ""; position: absolute; height: 2px; width: 16px;
    background: var(--accent); top: 50%; transform: translateY(-50%);
    left: -8px; opacity: .85; border-radius: 1px;
}
.bh-scope .ring.r3::after { left: auto; right: -8px; }
/* Axis hairlines through the target center. */
.bh-scope .cross {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
.bh-scope .cross--v {
    width: 1px; height: 780px;
    background: linear-gradient(to bottom,
        transparent, oklch(0.62 0.17 var(--accent-h) / 0.28) 18% 82%, transparent);
}
.bh-scope .cross--h {
    height: 1px; width: 1020px;
    background: linear-gradient(to right,
        transparent, oklch(0.62 0.17 var(--accent-h) / 0.28) 18% 82%, transparent);
}

/* orb */
.bh-scope .orb-wrap {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}
.bh-scope .orb {
    position: relative;
    width: 210px; height: 210px; border-radius: 50%;
    /* Clean white disc dead-center of the target — the brand logo is the
       bullseye (per the Brandhunt design), not a tinted glass sphere. */
    background: var(--ink-1);
    box-shadow:
        0 0 0 1px var(--line-2),
        0 18px 50px -18px rgba(35, 32, 29, 0.30),
        0 0 90px 18px var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    color: var(--text-primary);
    pointer-events: auto;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms;
    animation: bhs-orbBreath 5s ease-in-out infinite alternate;
}
@keyframes bhs-orbBreath {
    0%   { box-shadow: 0 0 0 1px var(--line-2), 0 18px 50px -18px rgba(35,32,29,0.30), 0 0 70px 10px var(--accent-soft); }
    100% { box-shadow: 0 0 0 1px var(--line-2), 0 18px 50px -18px rgba(35,32,29,0.30), 0 0 110px 24px var(--accent-soft); }
}
.bh-scope .orb.is-over {
    transform: scale(1.05);
    box-shadow:
        0 0 0 1.5px var(--accent),
        0 0 120px 24px var(--accent-soft),
        inset 0 0 60px rgba(255,255,255,0.12);
}
.bh-scope .orb .orb-logo {
    width: 96px; height: 96px;
    object-fit: contain;
    border-radius: 18px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
    user-select: none;
    -webkit-user-drag: none;
}
.bh-scope .orb .initials {
    font-family: var(--font-serif);
    font-size: 64px; line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-shadow: 0 0 24px var(--accent-soft);
}
.bh-scope .orb .domain {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.06em;
    margin-top: 6px;
    color: rgba(var(--text-rgb), 0.85);
}
/* Company-facts chip — industry · Public · headcount, hanging below the
   target. (The old "brand score · momentum" chip was removed — the Brand
   Snapshot card carries the score.) */
.bh-scope .orb-meta {
    position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%);
    background: rgba(var(--card-rgb), 0.9);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: 6px 16px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: 0.03em;
    color: var(--cream-2);
    white-space: nowrap;
}

/* In-orb loader — the live discovery loader (BrandLoader, compact) replaces
   the orb + satellites while we re-analyze a tracked brand from the sidebar.
   Sidebar, lens dock, and watch rail stay live so the user doesn't lose
   context. */
.bh-scope .orb-wrap--loader {
    pointer-events: auto;
    width: min(560px, 92vw);
    animation: bhs-orb-loader-in 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes bhs-orb-loader-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bh-scope .bfl {
    --bfl-card: rgba(var(--card-rgb), 0.85);
    --bfl-line: var(--line);
}
.bh-scope .bfl-brand,
.bh-scope .bfl-stream,
.bh-scope .bfl-rail {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ripple from lens drop */
.bh-scope .ripple {
    position: absolute; left: 50%; top: 50%;
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 4;
    animation: bhs-ripple 900ms ease-out forwards;
}
@keyframes bhs-ripple {
    to { transform: translate(-50%, -50%) scale(4.2); opacity: 0; border-width: 1px; }
}

/* ────────────── Satellite cards ────────────── */
.bh-scope .satellite {
    position: absolute; left: 50%; top: 50%;
    /* Widened 240 → 300px (the orbit auto-scales to fit, so wider cards cost
       nothing on small screens and carry visibly more data on big ones). */
    width: 300px;
    max-height: 260px;
    /* Warm card surface + faint top-down lens-hue kiss so each lens leaves
       a subtle accent fingerprint on its cards. Stop is short (60%) so the
       hue reads only at the top edge. */
    background:
        linear-gradient(
            180deg,
            oklch(from var(--accent) l c h / var(--card-kiss)) 0%,
            transparent 60%
        ),
        var(--card-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 13px 15px;
    box-shadow: 0 10px 30px -20px rgba(35, 32, 29, 0.35);
    color: var(--text-primary);
    pointer-events: auto;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition:
        transform 600ms cubic-bezier(.2,.7,.2,1),
        opacity 400ms,
        border-color 200ms,
        background 200ms,
        box-shadow 200ms;
    will-change: transform;
    z-index: 10;
    animation: bhs-satIn 500ms cubic-bezier(.2,.7,.2,1);
}
@keyframes bhs-satIn {
    from { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.85); }
    to   { opacity: 1; }
}
.bh-scope .satellite:hover {
    border-color: var(--line-2);
    background: rgba(var(--card-rgb), 0.92);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45);
}
.bh-scope .sat-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
}
.bh-scope .sat-title {
    font: 600 14px/1.2 var(--font-display);
    letter-spacing: -0.01em;
    margin: 0;
}
.bh-scope .sat-sub {
    /* Inter, sentence case — the mono/uppercase treatment was hard to read. */
    font: 400 11px/1.35 var(--font-ui);
    color: var(--muted);
    margin-top: 2px;
}

/* "Tap to expand" chip — the affordance used to hide as muted text inside
   .sat-sub and nobody noticed it. Now it's a small accent-tinted pill under
   the title that re-tints with the active lens (--accent-h), breathes gently
   to catch the eye, and lights up fully when the card is hovered. */
.bh-scope .sat-expand-chip {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
    background: oklch(0.65 0.13 var(--accent-h) / 0.12);
    border: 1px solid oklch(0.65 0.13 var(--accent-h) / 0.3);
    animation: bhs-expand-chip-breathe 2.6s ease-in-out infinite;
}
.bh-scope .sat-expand-chip__ic {
    font-size: 11px;
    line-height: 1;
}
@keyframes bhs-expand-chip-breathe {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.65 0.13 var(--accent-h) / 0); }
    50%      { box-shadow: 0 0 10px 0 oklch(0.65 0.13 var(--accent-h) / 0.45); }
}
.bh-scope .satellite.is-expandable:hover .sat-expand-chip {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-0);
    animation: none;
}
/* The expanded overlay / dimmed states shouldn't keep pulsing behind it. */
.bh-scope .satellite.is-dimmed .sat-expand-chip { animation: none; }
.bh-scope .sat-kind {
    font: 500 9px/1 var(--font-mono);
    color: var(--muted-2);
    letter-spacing: 0.08em;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.bh-scope .sat-body { flex: 1; min-height: 0; overflow: hidden; }
/* Content-heavy (expandable) cards soft-fade their bottom edge instead of a
   hard chop, signalling "there's more — tap to expand". Where content fits,
   the fade lands in empty space and is invisible. */
.bh-scope .satellite.is-expandable .sat-body {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

/* ────────────── Micro atoms ────────────── */
.bh-scope .pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    font: 600 10.5px/1.4 var(--font-ui);
}
.bh-scope .pill.pos { background: var(--pos-bg); color: var(--pos); }
.bh-scope .pill.warn { background: var(--warn-bg); color: var(--warn); }
.bh-scope .pill.neu { background: var(--neu-bg); color: var(--muted); }

/* Signals list */
.bh-scope .signals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.bh-scope .sig-row {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
}
.bh-scope .sig-row:last-child { border-bottom: 0; }
.bh-scope .sig-label { color: var(--cream-2); }
.bh-scope .sig-val { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Metrics grid */
.bh-scope .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bh-scope .metric {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--surface-soft);
}
/* Label: clean sentence-case Inter (was tiny uppercase mono that wrapped to
   two cramped lines). Bigger, looser, far easier to scan. */
.bh-scope .metric-label {
    font: 500 10.5px/1.3 var(--font-ui);
    color: var(--cream-2);
    letter-spacing: 0.005em;
}
/* Value: Inter, tabular so digits align; legible where the serif wasn't. */
.bh-scope .metric-val {
    font: 600 20px/1.1 var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.bh-scope .metric-delta {
    font: 500 10.5px/1 var(--font-ui);
    margin-top: 2px; color: var(--muted);
}
.bh-scope .metric-delta.is-up { color: var(--pos); }
.bh-scope .metric-delta.is-down { color: var(--warn); }

/* sparkline */
.bh-scope .spark {
    display: block; width: 100%; height: 30px; margin-top: 4px;
}

/* donut + legend */
.bh-scope .donut-wrap { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.bh-scope .legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.bh-scope .legend > li {
    display: grid; grid-template-columns: 8px 1fr auto;
    align-items: center; gap: 6px;
    font-size: 10.5px;
}
.bh-scope .legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.bh-scope .legend .name { color: var(--cream-2); }
.bh-scope .legend .val { color: var(--text-primary); font: 500 10.5px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }

/* Org chart — tiers wrap into a 2-up grid so peer cards keep a readable
   width inside the 240px satellite instead of crushing into one row. */
.bh-scope .org { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bh-scope .org-tier { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bh-scope .org-card {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
    flex: 1 1 calc(50% - 6px);
    max-width: 100%;
}
.bh-scope .org-card.is-ceo { background: var(--accent-soft); border-color: var(--accent-line); flex: 1 1 100%; text-align: center; }
.bh-scope .org-card .name {
    /* Bold, dark, Inter — names are the anchor of the card (per the design). */
    font: 600 12px/1.25 var(--font-ui); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bh-scope .org-card .title {
    font: 400 10.5px/1.35 var(--font-ui); color: var(--cream-2);
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Featured (CEO) card — orange name, like the design's Pia Landrum tier. */
.bh-scope .org-card.is-ceo .name { color: var(--accent); font-size: 13px; }
.bh-scope .org-more {
    font: 400 10.5px/1.3 var(--font-ui); color: var(--muted);
    text-align: center;
}

/* News list */
.bh-scope .news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-scope .news-list > li { display: grid; grid-template-columns: 4px 1fr; gap: 8px; align-items: flex-start; }
.bh-scope .news-list .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.bh-scope .news-title { font: 500 11.5px/1.35 var(--font-ui); color: var(--text-primary); }
.bh-scope .news-src { font: 400 10.5px/1.45 var(--font-ui); color: var(--muted-2); margin-top: 1px; }

/* Role list */
.bh-scope .role-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-scope .role-list > li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bh-scope .role-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.bh-scope .role-time { font: 400 10.5px/1.3 var(--font-ui); color: var(--muted); white-space: nowrap; }

/* Competitor table */
.bh-scope .comp-table { width: 100%; border-collapse: collapse; }
.bh-scope .comp-table th { font: 600 10px/1.2 var(--font-ui); color: var(--cream-2); text-align: left; padding: 4px 0; border-bottom: 1px solid var(--line); }
.bh-scope .comp-table th:nth-child(2), .bh-scope .comp-table th:nth-child(3) { text-align: right; }
.bh-scope .comp-table td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--cream-2); }
.bh-scope .comp-table td:nth-child(2), .bh-scope .comp-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }
.bh-scope .comp-table tr:last-child td { border-bottom: 0; }
.bh-scope .comp-table tr.is-self td { color: var(--text-primary); }
.bh-scope .comp-table tr.is-self td:first-child { font-weight: 500; }
.bh-scope .comp-table tr.is-self .accent-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: 5px; vertical-align: middle;
}

/* Rec list */
.bh-scope .rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bh-scope .rec-list > li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.bh-scope .rec-ic {
    width: 18px; height: 18px; border-radius: 5px;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center;
    font: 500 10px/1 var(--font-mono);
}

/* Visual palette swatches */
.bh-scope .swatch-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 4px;
}
.bh-scope .swatch {
    aspect-ratio: 1/1; border-radius: 6px; border: 1px solid var(--line);
}

/* Tech stack chips */
.bh-scope .tech-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bh-scope .tech-chip {
    font: 500 10.5px/1.4 var(--font-ui);
    padding: 2px 8px; border-radius: 999px;
    background: var(--surface-mid); color: var(--text-primary);
    border: 1px solid var(--line);
}
/* Secondary chip variant — specialties / aesthetic descriptors. Accent-tinted
   so they read as a distinct group from the plain industry/font chips. */
.bh-scope .tech-chip.is-spec {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--text-primary);
}

/* Brand-snapshot synthesized summary (Overview lens) — clamped so the card
   keeps its height; the full text lives in the admin view. */
.bh-scope .snap-summary {
    margin: 0;
    font: 400 11px/1.5 var(--font-ui);
    color: var(--cream-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Shared pulse used by the orb-loader's active step. */
@keyframes bhs-pulse { 50% { opacity: 0.5; } }

/* ────────────── Lens dock ────────────── */
/* ── Lens picker (left sidebar, below Comparisons) ───────────────────────── */
.bh-scope .side-lens {
    display: flex; flex-direction: column; gap: 10px;
    flex: 0 0 auto;       /* natural height — pills wrap, footer sits below */
}
.bh-scope .side-lens-divider {
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px;
}
.bh-scope .side-lens-divider::before,
.bh-scope .side-lens-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, var(--line-2), transparent);
}
.bh-scope .side-lens-divider span {
    font-size: 9px; color: var(--accent); opacity: 0.85;
}
.bh-scope .side-lens-hint { padding: 0 4px; }
.bh-scope .side-lens-hint-title {
    font: 600 12px/1 var(--font-ui);
    color: var(--text-primary);
}
/* Pills flow naturally side by side and wrap — content-width, so the rows
   stagger into an organic mosaic rather than a rigid full-width column. */
.bh-scope .lens-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 1px;
}
.bh-scope .lens-chip {
    --lh: var(--accent-h);
    display: flex; align-items: center; gap: 6px;
    /* Tightened from 9px 14px 9px 9px so all 10 admin-tab pills fit one row
       on a standard desktop (≥1280px). Drop the ring-icon size below too. */
    padding: 7px 11px 7px 7px;
    background: rgba(var(--card-rgb), 0.85);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: grab;
    transition: transform 150ms, background 150ms, border-color 150ms;
    white-space: nowrap;
    user-select: none;
}
.bh-scope .lens-chip:hover {
    background: rgba(var(--card-rgb), 0.95);
    border-color: var(--line-2);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(0,0,0,0.5);
}
.bh-scope .lens-chip:active { cursor: grabbing; }
.bh-scope .lens-chip.is-active {
    border-color: oklch(0.62 0.17 var(--lh));
    background: oklch(0.62 0.17 var(--lh) / 0.13);
}
/* Chip icon — tiny crosshair target (ring + center dot), echoing the logo. */
.bh-scope .lens-chip .ring-icon {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle, oklch(0.62 0.17 var(--lh)) 0 30%, transparent 34%);
    border: 1.5px solid oklch(0.62 0.17 var(--lh) / 0.85);
    flex-shrink: 0;
}
.bh-scope .lens-chip .lens-label { font: 500 11.5px/1 var(--font-ui); color: var(--text-primary); }

/* Sidebar pills size to their label so they tile side by side. */
.bh-scope .side-lens .lens-clear { align-self: flex-start; margin-top: 4px; }
.bh-scope .lens-clear {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; padding: 6px 10px;
    font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em;
    cursor: pointer; transition: color 150ms, border-color 150ms;
}
.bh-scope .lens-clear:hover { color: var(--text-primary); border-color: var(--line-2); }

/* drag ghost */
.bh-scope .ghost {
    position: absolute; pointer-events: none; z-index: 1000;
    transform-origin: top left;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55));
}

/* ────────────── Domain entry (idle / loading) ────────────── */
.bh-scope .entry-wrap {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 6;
}
.bh-scope .entry-card {
    width: 480px; max-width: 90%;
    background: rgba(var(--card-rgb), 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 28px 24px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
}
.bh-scope .entry-card .eyebrow {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent);
}
.bh-scope .entry-card h1 {
    font: 400 32px/1.05 var(--font-serif);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}
.bh-scope .entry-card h1 em { font-style: italic; color: var(--accent); }
.bh-scope .entry-card p {
    font: 400 12.5px/1.5 var(--font-ui);
    color: var(--cream-2);
    margin: 0;
}
.bh-scope .entry-input-row {
    display: flex; gap: 8px; margin-top: 4px;
}
.bh-scope .entry-input {
    flex: 1;
    background: rgba(var(--page-rgb), 0.7);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-primary);
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0.02em;
    outline: none;
}
.bh-scope .entry-input::placeholder { color: var(--muted-2); }
.bh-scope .entry-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bh-scope .entry-go {
    background: var(--accent);
    color: var(--ink-0);
    border: 0; border-radius: 10px;
    padding: 0 18px;
    font: 600 12px/1 var(--font-ui);
    cursor: pointer;
    letter-spacing: 0.02em;
}
.bh-scope .entry-go:hover { opacity: 0.92; }
.bh-scope .entry-go:disabled { opacity: 0.5; cursor: not-allowed; }
.bh-scope .entry-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-scope .entry-chip {
    font: 500 10.5px/1 var(--font-mono);
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--cream-2);
    cursor: pointer;
    letter-spacing: 0.02em;
}
.bh-scope .entry-chip:hover { background: var(--line); color: var(--text-primary); border-color: var(--line-2); }
.bh-scope .entry-error {
    font: 500 11px/1.4 var(--font-mono);
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid oklch(0.78 0.13 50 / 0.30);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 4px;
}

/* loading state — replaces entry card content */
.bh-scope .loading-card { padding: 28px; }
.bh-scope .loading-steps {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.bh-scope .loading-steps > li {
    display: grid; grid-template-columns: 22px 1fr;
    align-items: center; gap: 10px;
    font: 500 12px/1.4 var(--font-ui);
    color: var(--muted);
    transition: color 220ms;
}
.bh-scope .loading-steps > li.is-done { color: var(--cream-2); }
.bh-scope .loading-steps > li.is-active { color: var(--text-primary); }
.bh-scope .loading-steps .step-ic {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-mid);
    border: 1px solid var(--line);
    font: 500 11px/1 var(--font-mono);
}
.bh-scope .loading-steps > li.is-active .step-ic {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    animation: bhs-pulse 1.4s ease-in-out infinite;
}
.bh-scope .loading-steps > li.is-done .step-ic {
    background: var(--accent);
    color: var(--ink-0);
    border-color: var(--accent);
}

/* ====================================================================
   Unsaved-result navigation guard modal — rendered at page root so it
   floats above ANY view (scope orbit OR admin tabbed footprint).
   Token values inlined since this lives outside .bh-scope.
   ==================================================================== */

.bhs-guard-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: bhs-guard-fade 220ms ease-out;
    padding: 20px;
}
@keyframes bhs-guard-fade { from { opacity: 0; } to { opacity: 1; } }

.bhs-guard-modal {
    width: min(440px, 100%);
    background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 28px 22px;
    box-shadow: 0 32px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
    color: var(--text-primary);
    animation: bhs-guard-pop 280ms cubic-bezier(.2,.7,.2,1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@keyframes bhs-guard-pop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.bhs-guard-eyebrow {
    font: 500 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.62 0.17 45);
    margin-bottom: 10px;
}

.bhs-guard-title {
    font: 400 28px/1.15 'Instrument Serif', 'Times New Roman', serif;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.bhs-guard-title em {
    font-style: italic;
    color: oklch(0.62 0.17 45);
}

.bhs-guard-body {
    font: 400 13.5px/1.55 'Inter', sans-serif;
    color: var(--text-secondary);
    margin: 0 0 22px;
}
.bhs-guard-body b {
    color: var(--text-primary);
    font-weight: 500;
}

.bhs-guard-actions {
    display: flex; flex-direction: column; gap: 8px;
}
.bhs-guard-btn {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    font: 500 13px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, transform 100ms, opacity 150ms;
    border: 1px solid transparent;
    letter-spacing: 0.005em;
}
.bhs-guard-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bhs-guard-btn:not(:disabled):active { transform: translateY(1px); }

.bhs-guard-btn--primary {
    background: oklch(0.62 0.17 45);
    color: #07080c;
    font-weight: 600;
}
.bhs-guard-btn--primary:not(:disabled):hover {
    background: oklch(0.66 0.17 45);
}

.bhs-guard-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
.bhs-guard-btn--ghost:not(:disabled):hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.bhs-guard-btn--cancel {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    padding: 8px 14px;
    margin-top: 2px;
    font-size: 11.5px;
}
.bhs-guard-btn--cancel:not(:disabled):hover {
    color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────
   Tap-to-expand satellite cards (postsGrid / news / roles / competitors
   / locations / org). The overlay is a sibling of the satellite map inside
   `.center`, sized to ~720×480 with scrollable body. Other satellites dim.
   ───────────────────────────────────────────────────────────────────── */

.bh-scope .satellite.is-expandable {
    cursor: pointer;
}
.bh-scope .satellite.is-expandable:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5),
                0 0 0 1px var(--accent) inset;
}
.bh-scope .satellite.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
}
.bh-scope .satellite.is-dimmed {
    opacity: 0.15;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 220ms ease-out, filter 220ms ease-out;
}

/* ── Token paywall — locked card + lens chip ─────────────────────────────── */
.bh-scope .satellite.is-locked {
    cursor: default;
}
/* No expand-hover glow on a locked card — just a soft accent edge. */
.bh-scope .satellite.is-locked:hover {
    border-color: var(--line-2);
    background: rgba(var(--card-rgb), 0.92);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45);
}
/* Corner badge becomes the lock indicator (keeps the .sat-kind pill shape). */
.bh-scope .sat-kind.is-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border-color: oklch(from var(--accent) l c h / 0.45);
    background: oklch(from var(--accent) l c h / 0.12);
    font-size: 11px;
}
.bh-scope .sat-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 4px 6px 8px;
    text-align: center;
}
.bh-scope .sat-lock-icon {
    font-size: 22px;
    color: var(--accent);
    opacity: 0.9;
    margin-bottom: 1px;
}
.bh-scope .sat-lock-title {
    font: 500 12px/1.2 var(--font-ui);
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.bh-scope .sat-lock-msg {
    font: 400 11px/1.5 var(--font-ui);
    color: var(--muted-2);
    max-width: 200px;
}
/* ── On-demand sections — dormant satellite, tap to activate ─────────────────
   Distinct from .is-locked (paywall/disabled): this card just hasn't fetched
   its data yet. Cursor stays a pointer, the border breathes gently in the
   lens's accent color to invite the tap, and it never looks "off limits". */
@keyframes bhs-orbit-breathe {
    0%, 100% { border-color: var(--line-2); box-shadow: 0 0 0 0 oklch(from var(--accent) l c h / 0); }
    50%      { border-color: oklch(from var(--accent) l c h / 0.55); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.10); }
}
.bh-scope .satellite.is-needs-load {
    cursor: pointer;
    animation: bhs-orbit-breathe 2.6s ease-in-out infinite;
}
.bh-scope .satellite.is-needs-load:hover {
    border-color: var(--accent);
    background: rgba(var(--card-rgb), 0.96);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45), 0 0 0 3px oklch(from var(--accent) l c h / 0.16);
    animation-play-state: paused;
}
.bh-scope .satellite.is-needs-load.is-fetching {
    cursor: wait;
    animation: bhs-orbit-breathe 1s ease-in-out infinite;
}
.bh-scope .sat-kind.is-load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border-color: oklch(from var(--accent) l c h / 0.45);
    background: oklch(from var(--accent) l c h / 0.12);
    font-size: 13px;
}
.bh-scope .sat-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 4px 6px 8px;
    text-align: center;
}
.bh-scope .sat-load-icon {
    font-size: 20px;
    color: var(--accent);
    opacity: 0.95;
    margin-bottom: 1px;
}
.bh-scope .sat-load.is-fetching .sat-load-icon {
    animation: bhs-pulse 1s ease-in-out infinite;
}
.bh-scope .sat-load-title {
    font: 600 12px/1.2 var(--font-ui);
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.bh-scope .sat-load-msg {
    font: 400 11px/1.5 var(--font-ui);
    color: var(--muted-2);
    max-width: 200px;
}
.bh-scope .sat-load-msg.is-error { color: var(--danger, #e5484d); }

/* Locked lens chip — disabled: not selectable, not draggable. */
.bh-scope .lens-chip.is-locked {
    cursor: not-allowed;
    opacity: 0.5;
}
.bh-scope .lens-chip.is-locked:hover {
    transform: none;
    border-color: var(--line);
    background: rgba(var(--card-rgb), 0.85);
    box-shadow: none;
}
.bh-scope .lens-chip .lens-lock {
    font-size: 11px;
    color: var(--muted-2);
    margin-left: 1px;
    flex-shrink: 0;
}

.bh-scope .expanded-backdrop {
    position: absolute;
    inset: 0;
    z-index: 50;
    /* Matches the sidebar and the card it sits behind — at 0 the blur reads as
       a hard rectangle pasted over the stage. */
    border-radius: 18px;
    background: var(--backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: bhs-expFade 200ms ease-out;
    cursor: zoom-out;
}
.bh-scope .expanded-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(720px, 90%);
    height: min(480px, 78%);
    transform: translate(-50%, -50%);
    /* Same warm + lens-kiss recipe as .satellite but on the stronger surface. */
    background:
        linear-gradient(
            180deg,
            oklch(from var(--accent) l c h / var(--card-kiss)) 0%,
            transparent 50%
        ),
        var(--card-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    padding: 18px 20px 14px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px var(--accent) inset;
    animation: bhs-expScale 260ms cubic-bezier(.2,.7,.2,1);
    color: var(--text-primary);
}
/* Roster-heavy modules get a taller AND wider overlay. The roster is capped at
   ten (APIFY_EMP_TOP), which is a leader plus a 3x3 grid — this is sized so all
   ten sit in view WITH their addresses fetched, since each cell grows by an
   address, a badge and the trace button once the emails land. */
.bh-scope .expanded-card.is-org {
    /* Sizes to its content and only then caps. A fixed height is what left a
       third of the overlay empty when the roster has no addresses fetched yet:
       the cards nearly double in height once emails land, and the tall value
       was set for that state. */
    height: auto;
    max-height: min(860px, 94%);
    width: min(1180px, 94%);
}
.bh-scope .expanded-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.bh-scope .bhm-card-trace {
    display: inline-block;
    margin-top: 8px;
}
.bh-scope .expanded-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.bh-scope .expanded-close {
    background: var(--surface-mid);
    border: 1px solid var(--line);
    color: var(--text-primary);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, border-color 150ms;
}
.bh-scope .expanded-close:hover {
    background: var(--line);
    border-color: var(--line-2);
}
.bh-scope .expanded-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}
.bh-scope .expanded-body::-webkit-scrollbar {
    width: 6px;
}
.bh-scope .expanded-body::-webkit-scrollbar-thumb {
    background: var(--surface-strong);
    border-radius: 3px;
}

@keyframes bhs-expFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bhs-expScale {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────
   Collapsed postsGrid satellite — 2×2 thumbnail preview
   ───────────────────────────────────────────────────────────────────── */

.bh-scope .posts-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 100%;
    width: 100%;
}
.bh-scope .posts-mini-cell {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1;
    position: relative;
}
.bh-scope .posts-mini-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bh-scope .posts-mini-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 14px/1 var(--font-display);
    color: var(--muted-2);
    background: linear-gradient(135deg, var(--surface-mid), var(--surface-soft));
}

/* ─────────────────────────────────────────────────────────────────────
   ExpandedBody — shared atoms (rows, titles, pills, tags)
   ───────────────────────────────────────────────────────────────────── */

.bh-scope .exp-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
    font: 400 12px/1.5 var(--font-ui);
}
.bh-scope .exp-row-title {
    font: 600 13px/1.3 var(--font-display);
    color: var(--text-primary);
    margin-bottom: 2px;
}
.bh-scope .exp-row-sub {
    font: 400 11px/1.45 var(--font-ui);
    color: var(--muted);
}

/* Brand Snapshot — full positioning summary in the expand modal */
.bh-scope .exp-snapshot { display: flex; flex-direction: column; gap: 14px; }
.bh-scope .exp-snapshot-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bh-scope .exp-snapshot-score {
    font: 600 40px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.bh-scope .exp-snapshot-max { font: 400 14px/1 var(--font-mono); color: var(--muted); margin-left: 2px; }
.bh-scope .exp-snapshot-label { font: 400 11px/1 var(--font-ui); color: var(--muted-2); }
.bh-scope .exp-snapshot-summary { margin: 0; font: 400 13px/1.6 var(--font-ui); color: var(--cream-2); }

/* AI Recommendations — full list in the expand modal */
.bh-scope .exp-recs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.bh-scope .exp-rec-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.bh-scope .exp-rec-row:first-child { padding-top: 0; }
.bh-scope .exp-rec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bh-scope .exp-rec-ic {
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center;
    font: 500 12px/1 var(--font-mono);
}
.bh-scope .exp-muted   { color: var(--muted-2); }
.bh-scope .exp-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-mid);
    border: 1px solid var(--line);
    font: 500 9.5px/1.3 var(--font-mono);
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bh-scope .exp-link-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: var(--surface-soft);
    color: var(--text-primary);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms, border-color 150ms;
}
.bh-scope .exp-link-btn:hover {
    background: var(--surface-mid);
    border-color: var(--accent);
}

/* Posts (expanded grid) */
.bh-scope .exp-post-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 3px;   /* the body scrolls; without this the first pill's top edge clips */
    margin-bottom: 12px;
}
.bh-scope .exp-post-filter {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bh-scope .exp-post-filter:hover { color: var(--text-primary); }
.bh-scope .exp-post-filter.is-active {
    background: oklch(from var(--accent) l c h / 0.18);
    border-color: var(--accent);
    color: var(--text-primary);
}
.bh-scope .exp-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.bh-scope .exp-post-filters__gap { flex: 1; }
.bh-scope .exp-post-cap {
    font: 400 11px/1.4 var(--font-ui); color: var(--cream-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-scope .exp-post-cell {
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 150ms;
}
.bh-scope .exp-post-cell:hover { transform: translateY(-2px); }
.bh-scope .exp-post-img {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.bh-scope .exp-post-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* No-image posts (text-only tweets, Reddit threads): show the post text/title
   instead of a blank channel label. Padding-top clears the channel badge. */
.bh-scope .exp-post-ph {
    width: 100%; height: 100%;
    padding: 30px 12px 12px;
    font: 500 12px/1.45 var(--font-mono);
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}
.bh-scope .exp-post-badge {
    position: absolute;
    top: 6px; left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--page-rgb), 0.7);
    backdrop-filter: blur(4px);
    color: var(--text-primary);
    font: 500 9px/1.4 var(--font-mono);
    letter-spacing: 0.06em;
}
.bh-scope .exp-post-meta {
    font: 400 10px/1.3 var(--font-mono);
    color: var(--muted);
    padding: 0 2px;
}

/* News (expanded list) */
.bh-scope .exp-news {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bh-scope .exp-news-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}
.bh-scope .exp-news-link {
    flex: 1;
    text-decoration: none;
    color: var(--text-primary);
    min-width: 0;
}
.bh-scope .exp-news-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Roles (expanded list) */
.bh-scope .exp-roles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bh-scope .exp-role-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}
.bh-scope .exp-row-l { flex: 1; min-width: 0; }

/* Competitors (expanded table) */
.bh-scope .exp-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 12px/1.4 var(--font-mono);
}
.bh-scope .exp-table thead th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bh-scope .exp-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--text-primary);
    vertical-align: middle;
}
.bh-scope .exp-table tbody tr:last-child td { border-bottom: 0; }
.bh-scope .exp-row-self td {
    background: var(--accent-soft);
    font-weight: 600;
}
.bh-scope .exp-avi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--surface-mid);
    border: 1px solid var(--line);
    font: 600 9px/1 var(--font-mono);
    color: var(--text-primary);
    margin-right: 8px;
    letter-spacing: 0.04em;
}

/* Locations (expanded) */
.bh-scope .exp-locations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bh-scope .exp-hq {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface-soft);
}
.bh-scope .exp-hq-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #0a0c14;
    font: 700 9px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.bh-scope .exp-country-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px 6px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}
.bh-scope .exp-country-name {
    font: 600 11px/1 var(--font-mono);
    color: var(--text-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bh-scope .exp-loc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bh-scope .exp-loc-row {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bh-scope .exp-loc-row-l { min-width: 0; flex: 1; }
.bh-scope .exp-loc-row .exp-tag { flex-shrink: 0; }
.bh-scope .exp-loc-more {
    padding: 6px 8px;
    font: 400 10px/1.4 var(--font-mono);
    color: var(--muted-2);
    text-align: center;
}

/* Org Chart (expanded grid) */
/* ── Leadership tree ───────────────────────────────────────────────────────
   The scrape has no reporting lines (see runOrgSection), so the tree branches
   on what the data really carries: the ranked leader on top, then one column
   per department derived from job titles. Connectors are drawn in CSS rather
   than SVG so they reflow with the columns. */
.bh-scope .exp-tree { padding-top: 2px; }
.bh-scope .exp-tree__top { display: flex; justify-content: center; }
.bh-scope .exp-tree__top .exp-org-cell.is-ceo {
    width: min(460px, 100%);
}
/* Vertical drop out of the leader into the horizontal bus. */
.bh-scope .exp-tree__trunk {
    width: 1px; height: 18px;
    margin: 0 auto;
    background: var(--accent-line);
}
.bh-scope .exp-tree__branches {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    min-width: 0;
}
/* The bus itself — spans only between the first and last branch so it never
   overhangs into empty space when a department is alone. */
.bh-scope .exp-tree__branches::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% / var(--exp-branches, 3)) / 2);
    right: calc((100% / var(--exp-branches, 3)) / 2);
    height: 1px;
    background: var(--line);
}
.bh-scope .exp-branch {
    /* Width tracks headcount (flex-grow is set inline from the branch size):
       departments are never evenly sized, and an equal split gives one column
       eight cards deep beside another holding one. The basis is a floor: on a
       roster of eight Product to one Operations, a purely proportional split
       leaves the small branch narrower than the button inside it. */
    flex-basis: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bh-scope .exp-branch__drop {
    width: 1px; height: 14px;
    margin: 0 auto;
    background: var(--line);
}
.bh-scope .exp-branch__head {
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
    padding-bottom: 2px;
}
.bh-scope .exp-branch__name {
    font: 600 9.5px/1.2 var(--font-mono);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-2);
}
.bh-scope .exp-branch__n {
    padding: 1px 5px; border-radius: 20px;
    font: 600 9px/1.3 var(--font-mono);
    color: var(--muted-2);
    background: var(--surface-mid);
}
/* Within a branch the people flow into as many columns as its width allows, so
   a large department reads as a block rather than a tall stack. Cards size to
   their own content — a fetched email lengthens one without dragging its row. */
.bh-scope .exp-branch__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    align-items: start;
    min-width: 0;
    gap: 8px;
}

@media (max-width: 900px) {
    .bh-scope .exp-tree__branches { flex-wrap: wrap; }
    .bh-scope .exp-tree__branches::before { display: none; }
    .bh-scope .exp-branch { flex: 1 1 260px; }
}
.bh-scope .exp-org-cell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}
.bh-scope .exp-org-avi {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--surface-mid);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 10px/1 var(--font-mono);
    color: var(--text-primary);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.bh-scope .exp-org-meta { flex: 1; min-width: 0; }
/* Titles run long — "Director Retail Stores EMEA – Central South (Germany Mid
   + South, Austria & Switzerland)" is three lines on its own. Two lines, and
   the full string stays on the title attribute. */
.bh-scope .exp-org-cell .exp-row-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bh-scope .exp-org-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
/* The action shares the tag row rather than claiming a line of its own. */
.bh-scope .exp-org-tags .exp-email__btn { margin-top: 0; }

/* Featured leader — a full-width banner rather than a tall centred card. As a
   card it stood ~180px high for one person and pushed the third roster row out
   of view; laid out horizontally it keeps the accent emphasis for a third of
   the height. */
.bh-scope .exp-org-cell.is-ceo {
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--accent-soft);
    border-color: var(--accent-line);
}
.bh-scope .exp-org-cell.is-ceo .exp-org-avi {
    width: 40px; height: 40px;
    font-size: 12px;
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}
.bh-scope .exp-org-cell.is-ceo .exp-row-title { font-size: 14px; }
.bh-scope .exp-org-cell.is-ceo .exp-row-sub { -webkit-line-clamp: 1; }
.bh-scope .exp-org-cell.is-ceo .exp-email { word-break: normal; }
.bh-scope .exp-org-stem {
    width: 1px;
    height: 16px;
    margin: 2px auto;
    background: var(--accent-line);
}

/* ── Email finder (Org Chart expanded) ─────────────────────────────────
   Two visually distinct result states, on purpose: a VERIFIED address was
   confirmed against the mail server, while a PROBABLE one is a ranked guess
   on a catch-all domain. Showing them identically would imply a certainty we
   don't have, so probable results are amber, italic and carry a reason. */
.bh-scope .exp-email-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.bh-scope .exp-email-bar__note {
    font: 400 10.5px/1.3 var(--font-mono);
    letter-spacing: 0.02em;
}
/* Accent-tinted variant of the existing .exp-link-btn action. */
.bh-scope .exp-link-btn.is-paid {
    color: var(--accent);
    border-color: oklch(0.65 0.13 var(--accent-h) / 0.4);
    background: oklch(0.65 0.13 var(--accent-h) / 0.1);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.04em;
    cursor: pointer;
}
.bh-scope .exp-link-btn.is-paid:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-0);
}
.bh-scope .exp-link-btn.is-paid:disabled { opacity: 0.55; cursor: default; }
.bh-scope .exp-email__btn { margin-top: 8px; }

.bh-scope .exp-email {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 3px;
    font: 400 11.5px/1.35 var(--font-mono);
    word-break: break-all;
}
.bh-scope .exp-email__addr {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--line-2);
}
.bh-scope .exp-email__addr:hover { color: var(--accent); border-bottom-color: var(--accent); }
.bh-scope .exp-email__badge {
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.bh-scope .exp-email.is-verified .exp-email__badge { color: oklch(0.68 0.15 150); }
.bh-scope .exp-email.is-probable .exp-email__addr { font-style: italic; }
.bh-scope .exp-email.is-probable .exp-email__badge { color: oklch(0.72 0.14 75); }
/* The container breaks mid-word so a long address can't overflow its cell, but
   that must not apply to prose — it splits the sentence into "can't be v /
   erified" in the narrow two-column cells. */
.bh-scope .exp-email__hint {
    font: 400 9.5px/1.3 var(--font-mono);
    color: var(--muted-2);
    word-break: normal;
    overflow-wrap: break-word;
}
.bh-scope .exp-email.is-none {
    color: var(--muted-2);
    font-style: italic;
}
.bh-scope .exp-email__loading {
    margin-top: 8px;
    font: 400 11px/1 var(--font-mono);
    color: var(--muted-2);
}

/* ── "How we got this" — the email cascade's step-by-step account ──────────
   Collapsed by default: the address is the answer and this is the working-out.
   Each row is colour-coded by outcome so the shape of a lookup reads at a
   glance — where it passed, where it gave up, and what it cost to find out. */
/* width:100% because the CEO's .exp-org-meta is a centred column flex — an
   auto-width child there shrink-to-fits and the whole list collapses to its
   longest word. That cell also centres its text, and a step log is read down
   the left edge, so this opts back out. Every cell in this panel lands between
   260px and 390px wide, which is why the rows stack rather than run as columns:
   a four-column row leaves the detail about 160px, and that is what made this
   unreadable in the two-column half of the chart. */
.bh-scope .exp-trace { margin-top: 8px; width: 100%; text-align: left; }
.bh-scope .exp-trace__toggle {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 10px/1.2 var(--font-mono);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-2);
}
.bh-scope .exp-trace__toggle:hover { color: var(--accent); }
.bh-scope .exp-trace__count {
    font: 400 9.5px/1.2 var(--font-mono);
    letter-spacing: 0.02em; text-transform: none;
    color: var(--muted-2);
}
.bh-scope .exp-trace__list {
    margin: 8px 0 0; padding: 8px 0 2px;
    list-style: none;
    border-top: 1px solid var(--line-2);
}
.bh-scope .exp-trace__row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 8px; align-items: baseline;
    padding: 4px 0;
    font: 400 10.5px/1.4 var(--font-mono);
    color: var(--cream-2);
}
.bh-scope .exp-trace__n { color: var(--muted-2); text-align: right; }
.bh-scope .exp-trace__step { color: var(--text-primary); }
/* The verdict closes the first line, the detail runs full width underneath,
   indented to sit under the step it belongs to. */
.bh-scope .exp-trace__detail {
    grid-column: 2 / -1;
    padding-top: 1px;
    color: var(--muted-2);
    overflow-wrap: break-word;
}
.bh-scope .exp-trace__mark {
    font: 600 8.5px/1.4 var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted-2);
}
.bh-scope .exp-trace__cost { color: var(--muted-2); }
.bh-scope .exp-trace__row.is-pass .exp-trace__mark { color: var(--pos); }
.bh-scope .exp-trace__row.is-fail .exp-trace__mark { color: var(--warn); }
.bh-scope .exp-trace__row.is-info .exp-trace__mark { color: var(--accent); }
.bh-scope .exp-trace__row.is-skip { color: var(--muted-2); }

/* A row with no detail is the divider before a stored run's original steps. */
.bh-scope .exp-trace__row.is-info .exp-trace__detail:empty { display: none; }

/* The run that originally earned a stored answer — labelled, so its steps never
   read as duplicates of today's. */
.bh-scope .exp-trace__history {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-2);
}
.bh-scope .exp-trace__history-label {
    font: 600 9.5px/1.3 var(--font-mono);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-2);
}

/* ─────────────────────────────────────────────────────────────────────
   Maps — collapsed mini preview (satellite) + full map (expand overlay)
   ───────────────────────────────────────────────────────────────────── */

/* Collapsed satellite preview. Non-interactive: pointer-events:none lets the
   tap fall through to the satellite's expand handler instead of panning. */
.bh-scope .bhs-mini-map {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    pointer-events: none;
}
/* Leaflet injects inline z-indexes that can sit above our satellites; clamp
   the tile/control layer so cards and the expand overlay always win. */
.bh-scope .bhs-mini-map .leaflet-pane,
.bh-scope .bhs-mini-map .leaflet-control { z-index: 1 !important; }
.bh-scope .bhs-mini-map .leaflet-control-attribution {
    font-size: 8px;
    background: rgba(var(--card-rgb), 0.6);
}

/* Full map inside the expand overlay — interactive. */
.bh-scope .exp-mapwrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.bh-scope .exp-map-strip {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font: 400 11px/1 var(--font-mono);
    color: var(--muted);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.bh-scope .exp-map-strip b {
    font: 600 14px/1 var(--font-display);
    color: var(--text-primary);
    margin-right: 4px;
}
.bh-scope .exp-map {
    flex: 1;
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}
.bh-scope .exp-map .leaflet-control-attribution { font-size: 9px; }

/* Competitor revenue-growth cell (expanded table) */
.bh-scope .exp-growth { font-weight: 600; font-variant-numeric: tabular-nums; }
.bh-scope .exp-growth.is-up   { color: var(--pos); }
.bh-scope .exp-growth.is-down { color: var(--warn); }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — touch-first Scope. Activated by ScopeView when
   useIsMobile() is true (it swaps <ScopeStage/> for
   <ScopeMobile/> and adds .is-mobile on the root). All styles live
   under .bh-scope so they stay scoped, and reuse the same tokens +
   atoms (.orb recipe, .pill, .sig-row, .exp-*, …) as the desktop orbit.
   ════════════════════════════════════════════════════════════════════════ */

.bh-scope.is-mobile { font-size: 13px; }

.bh-scope .tfm {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background:
        radial-gradient(700px 520px at 50% 0%, oklch(0.82 0.13 var(--accent-h) / 0.10), transparent 70%),
        radial-gradient(1200px 900px at 50% 30%, var(--bg-secondary), var(--ink-0) 80%);
    overflow: hidden;
    transition: background 1200ms cubic-bezier(.2,.7,.2,1);
}

/* ── Top bar: breadcrumb + page actions ─────────────────────────────── */
.bh-scope .bhm-topbar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(var(--page-rgb), 0.5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 15;
    min-width: 0;
}
.bh-scope .bhm-crumbs {
    display: flex; align-items: center; gap: 6px;
    font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.08em;
    text-transform: uppercase;
    min-width: 0; overflow: hidden;
}
.bh-scope .bhm-crumb-dim { color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.bh-scope .bhm-crumb-sep { color: var(--muted-2); opacity: 0.5; }
.bh-scope .bhm-crumb-now { color: var(--accent); white-space: nowrap; }
.bh-scope .bhm-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bh-scope .bhm-actions .pill-btn { padding: 6px 9px; font-size: 10px; }

/* ── Scrollable content column ──────────────────────────────────────── */
.bh-scope .bhm-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Thin, themed scrollbar — the OS default rendered as a wide unstyled bar. */
    scrollbar-width: thin;
    scrollbar-color: var(--surface-strong) transparent;
}
.bh-scope .bhm-scroll::-webkit-scrollbar { width: 5px; }
.bh-scope .bhm-scroll::-webkit-scrollbar-track { background: transparent; }
.bh-scope .bhm-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-strong);
    border-radius: 3px;
}
.bh-scope .bhm-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── HERO: swipeable lens carousel ──────────────────────────────────── */
.bh-scope .bhm-hero {
    position: relative;
    /* Trimmed from a flat 330px — that left a lot of dead air above/below the
       orb. clamp scales the orbit to the phone: tighter on short screens, never
       cramped on tall ones. Chips are %-positioned so they pull in with it. */
    height: clamp(248px, 38vh, 300px);
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    border-bottom: 1px solid var(--line);
}
.bh-scope .bhm-hero-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}
.bh-scope .bhm-hero-track.is-dragging { transition: none; }
.bh-scope .bhm-slide {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    position: relative;
}
.bh-scope .bhm-hero-loading {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    padding: 16px;
}
.bh-scope .bhm-hero-loading .bfl { width: min(460px, 94%); }

/* mini orbit */
.bh-scope .bhm-mini { position: absolute; inset: 0; }
.bh-scope .bhm-mini-ring {
    position: absolute; left: 50%; top: 50%;
    border: 1px solid var(--line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bh-scope .bhm-mini-ring.r-a { width: 210px; height: 210px; border-style: dashed; opacity: .5; animation: bhs-rspin 90s linear infinite; }
.bh-scope .bhm-mini-ring.r-b { width: 320px; height: 320px; opacity: .22; }

.bh-scope .bhm-mini-orb {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 124px; height: 124px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* White bullseye disc — matches the desktop target orb. */
    background: var(--ink-1);
    box-shadow: 0 0 0 1px var(--line-2), 0 12px 34px -14px rgba(35,32,29,0.3), 0 0 56px 8px var(--accent-soft);
    z-index: 6;
}
.bh-scope .bhm-mini-logo {
    width: 56px; height: 56px; object-fit: contain; border-radius: 13px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
    -webkit-user-drag: none;
}
.bh-scope .bhm-mini-inits {
    font: 400 38px/1 var(--font-serif); color: var(--text-primary);
    text-shadow: 0 0 18px var(--accent-soft);
}
.bh-scope .bhm-mini-snap {
    margin-top: 5px;
    font: 500 8px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent);
}
.bh-scope .bhm-mini-name {
    margin-top: 3px;
    font: 600 13px/1.1 var(--font-display); letter-spacing: -0.01em;
    color: var(--text-primary);
    max-width: 110px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* watered-down satellite chips — title only, float around the orb */
.bh-scope .bhm-chip {
    position: absolute; z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 41%;
    padding: 7px 10px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, oklch(from var(--accent) l c h / var(--card-kiss)) 0%, transparent 70%),
        var(--card-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    animation: bhs-satIn 460ms cubic-bezier(.2,.7,.2,1) backwards;
}
.bh-scope .bhm-chip:active { transform: scale(0.96); }
.bh-scope .bhm-chip-n {
    font: 500 8px/1 var(--font-mono); color: var(--muted-2); letter-spacing: 0.06em; flex-shrink: 0;
}
.bh-scope .bhm-chip-t {
    font: 600 10.5px/1.15 var(--font-display); letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .bhm-chip.is-locked { opacity: 0.6; }
.bh-scope .bhm-chip-lock { font-size: 11px; color: var(--muted-2); flex-shrink: 0; }

.bh-scope .bhm-chip.pos-1 { top: 10%;    left: 3%;  animation-delay: 40ms;  }
.bh-scope .bhm-chip.pos-2 { top: 7%;     right: 3%; animation-delay: 90ms;  }
.bh-scope .bhm-chip.pos-3 { top: 43%;    left: 0;   animation-delay: 140ms; }
.bh-scope .bhm-chip.pos-4 { top: 39%;    right: 0;  animation-delay: 190ms; }
.bh-scope .bhm-chip.pos-5 { bottom: 13%; left: 4%;  animation-delay: 240ms; }
.bh-scope .bhm-chip.pos-6 { bottom: 10%; right: 4%; animation-delay: 290ms; }

/* slide dots */
.bh-scope .bhm-dots {
    position: absolute; left: 0; right: 0; bottom: 8px;
    display: flex; justify-content: center; gap: 6px;
    z-index: 8; pointer-events: auto;
}
.bh-scope .bhm-dot {
    width: 6px; height: 6px; border-radius: 50%;
    border: 0; padding: 0;
    background: var(--surface-strong);
    transition: background 200ms, width 200ms;
}
.bh-scope .bhm-dot.is-on { background: var(--accent); width: 16px; border-radius: 3px; }

/* ── Full pre-expanded cards ────────────────────────────────────────── */
.bh-scope .bhm-cards {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px 14px 28px;
}
.bh-scope .bhm-card {
    background:
        linear-gradient(180deg, oklch(from var(--accent) l c h / var(--card-kiss)) 0%, transparent 42%),
        var(--card-bg-strong);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 15px 15px 16px;
    color: var(--text-primary);
    box-shadow: 0 10px 28px -18px rgba(0,0,0,0.5);
    scroll-margin-top: 12px;
    animation: bhs-tfmCardIn 420ms cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes bhs-tfmCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bh-scope .bhm-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding-bottom: 11px; margin-bottom: 13px;
    border-bottom: 1px solid var(--line);
}
.bh-scope .bhm-card-headl { min-width: 0; }
.bh-scope .bhm-card-eyebrow {
    font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px;
}
.bh-scope .bhm-card-title {
    margin: 0; font: 600 17px/1.15 var(--font-display); letter-spacing: -0.01em;
}
.bh-scope .bhm-card-sub {
    margin-top: 4px; font: 400 11.5px/1.4 var(--font-ui); color: var(--muted);
}
.bh-scope .bhm-card-kind {
    flex-shrink: 0;
    font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--muted-2);
    padding: 4px 8px; border-radius: 999px;
    background: var(--surface-soft); border: 1px solid var(--line);
    display: inline-flex; align-items: center;
}
.bh-scope .bhm-card-kind.is-lock { color: var(--accent); border-color: var(--accent-line); }
.bh-scope .bhm-card-body { font-size: 12.5px; }
/* Let map / scroll modules breathe at full width inside a card */
.bh-scope .bhm-card-body .exp-map { min-height: 240px; }

/* locked module card */
.bh-scope .bhm-card.is-locked { opacity: 0.96; }
.bh-scope .bhm-card-lock { text-align: center; padding: 18px 8px 10px; }
.bh-scope .bhm-card-lock-icon { font-size: 26px; color: var(--accent); }
.bh-scope .bhm-card-lock-title { margin-top: 8px; font: 600 14px/1.2 var(--font-display); }
.bh-scope .bhm-card-lock-msg { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; max-width: 280px; margin-left: auto; margin-right: auto; }

/* dormant (on-demand section) module card — mirrors .bhm-card-lock but
   inviting instead of disabled: accent border breathes, real button to fetch. */
.bh-scope .bhm-card.is-needs-load { border-color: oklch(from var(--accent) l c h / 0.35); }
.bh-scope .bhm-card.is-fetching { border-color: oklch(from var(--accent) l c h / 0.55); }
.bh-scope .bhm-load-btn {
    margin-top: 12px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid oklch(from var(--accent) l c h / 0.45);
    background: oklch(from var(--accent) l c h / 0.12);
    color: var(--accent);
    font: 600 12px/1 var(--font-ui);
    cursor: pointer;
}
.bh-scope .bhm-load-btn:active { background: oklch(from var(--accent) l c h / 0.22); }
.bh-scope .bhm-load-btn:disabled { opacity: 0.6; cursor: wait; }

.bh-scope .bhm-feedback {
    margin-top: 2px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px dashed var(--line-2);
    background: rgba(var(--page-rgb), 0.4);
    color: rgba(var(--text-rgb), 0.6);
    font: 500 12px/1 var(--font-ui);
    cursor: pointer;
}
.bh-scope .bhm-feedback:active { background: rgba(var(--page-rgb), 0.7); }

/* ── Bottom tab bar ─────────────────────────────────────────────────── */
.bh-scope .bhm-tabs {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    background: rgba(var(--page-rgb), 0.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 20;
}
.bh-scope .bhm-tabs-track {
    display: flex; gap: 7px;
    padding: 10px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bh-scope .bhm-tabs-track::-webkit-scrollbar { display: none; }
.bh-scope .bhm-tab {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--cream-2);
    font: 500 12px/1 var(--font-ui);
    cursor: pointer;
    transition: background 160ms, border-color 160ms, color 160ms;
}
.bh-scope .bhm-tab-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: oklch(0.70 0.13 var(--accent-h));
    opacity: 0.65;
}
.bh-scope .bhm-tab.is-on {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--text-primary);
}
.bh-scope .bhm-tab.is-on .bhm-tab-dot { opacity: 1; box-shadow: 0 0 8px oklch(0.70 0.13 var(--accent-h)); }
.bh-scope .bhm-tab.is-locked { opacity: 0.5; cursor: not-allowed; }
.bh-scope .bhm-tab-lock { font-size: 12px; color: var(--muted-2); }

/* ── Tablet / landscape ──────────────────────────────────────────────────────
   The touch layout now also runs above phone widths (tablets, and phones turned
   sideways — see useIsMobile in ScopeView). Portrait phones are < 600px,
   so this min-width block leaves them untouched and only kicks in on the wider
   surfaces: center the hero, cards, and tabs into a comfortable reading column
   instead of letting the single column stretch edge-to-edge. */
@media (min-width: 600px) {
    .bh-scope .bhm-hero,
    .bh-scope .bhm-cards,
    .bh-scope .bhm-tabs-track {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   Floating feedback pill — fixed bottom-right on the Brand Footprint app
   (Scope + Classic views). Replaces the old navbar "nav-feedback" CTA.
   Lives OUTSIDE .bh-scope (BrandFootprintPage renders it at page root).
   ════════════════════════════════════════════════════════════════════════ */
.bh-feedback {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 900;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 48px -18px rgba(35, 32, 29, 0.45);
    cursor: pointer;
    transition: transform 160ms, box-shadow 160ms;
}
.bh-feedback:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 56px -18px rgba(35, 32, 29, 0.5);
}
.bh-feedback__grip {
    color: var(--text-muted);
    font: 400 13px/1 var(--font-mono, monospace);
    letter-spacing: 0.05em;
    user-select: none;
}
.bh-feedback__ic { display: inline-flex; }
.bh-feedback__ic img { width: 26px; height: 26px; display: block; }
.bh-feedback__text {
    display: flex; flex-direction: column; gap: 3px;
    text-align: left;
}
.bh-feedback__text b {
    font: 600 13px/1 'Inter', sans-serif;
    color: var(--text-primary);
}
.bh-feedback__text span {
    font: 400 11px/1 'Inter', sans-serif;
    color: var(--text-muted);
}
.bh-feedback__send {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    font-size: 13px;
    box-shadow: 0 6px 14px -6px rgba(229, 80, 30, 0.6);
}
/* Mobile Scope keeps its own inline triggers; hide the pill there. */
@media (max-width: 1024px) { .bh-feedback { display: none; } }

/* module body loading state — data still streaming in */
.mod-streaming { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }
.mod-streaming-bar {
    display: block; height: 9px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(229,80,30,0.10) 25%, rgba(229,80,30,0.28) 50%, rgba(229,80,30,0.10) 75%);
    background-size: 200% 100%;
    animation: mod-streaming-sweep 1.3s ease-in-out infinite;
}
.mod-streaming-bar:nth-child(2) { animation-delay: 0.15s; }
.mod-streaming-bar:nth-child(3) { animation-delay: 0.3s; }
.mod-streaming-label { font: 400 10px/1.4 var(--font-mono); color: var(--text-muted); letter-spacing: 0.04em; }
@keyframes mod-streaming-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Org Chart placeholder — the roster streams in after the report is up, so the
   card keeps its own tier shape (name + title ghosts) while it waits */
.bh-scope .org-skeleton .org-card { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.bh-scope .org-skeleton .mod-streaming-bar { height: 8px; }
.bh-scope .org-skeleton .mod-streaming-bar.is-title { height: 6px; opacity: 0.7; }
.bh-scope .org-skeleton .org-more { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════
   Mobile Scope — Design D: radar hero + live ticker + lens bar +
   module tile grid + expanded pager + bottom app nav.
   Everything scoped under .bh-scope with a bhd- prefix.
   ════════════════════════════════════════════════════════════════════ */

@keyframes bhd-spin     { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bhd-fade-up  { from { opacity: 0; transform: translateY(14px) rotate(1.2deg) scale(0.96); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes bhd-slide-next { from { opacity: 0; transform: translateX(32px) rotate(0.6deg) scale(0.97); } to { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@keyframes bhd-slide-prev { from { opacity: 0; transform: translateX(-32px) rotate(-0.6deg) scale(0.97); } to { opacity: 1; transform: translateX(0) rotate(0) scale(1); } }
@keyframes bhd-zoom-in  { from { opacity: 0; transform: translate(-50%, -46%) scale(0.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bhd-ticker   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bhd-stamp    { from { opacity: 0; transform: rotate(-8deg) scale(1.7); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes bhd-particle { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
@keyframes bhd-blip     { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 oklch(0.62 0.17 var(--accent-h) / 0.5); } 50% { transform: translateX(-50%) scale(1.25); box-shadow: 0 0 0 7px oklch(0.62 0.17 var(--accent-h) / 0); } }

/* ── Header ── */
.bh-scope .bhd-top {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    z-index: 15;
}
.bh-scope .bhd-top-brand { display: inline-flex; align-items: center; gap: 7px; }
.bh-scope .bhd-top-mark { width: 18px; height: 18px; }
.bh-scope .bhd-top-word { font: 600 13px/1 var(--font-ui); color: var(--cream); }
.bh-scope .bhd-top-word em { color: var(--accent); font-style: normal; }
.bh-scope .bhd-actions { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.bh-scope .bhd-burst {
    position: absolute; left: 50%; top: 50%;
    border-radius: 50%; background: var(--accent);
    pointer-events: none; z-index: 30;
    animation: bhd-particle 600ms ease-out forwards;
}

/* ── Radar hero ── */
.bh-scope .bhd-hero {
    flex-shrink: 0;
    position: relative; height: 204px;
    display: grid; place-items: center;
    z-index: 1;
}
/* Ring/sweep layer clipped to the hero and faded at top + bottom so the
   radar never bleeds over the header or the ticker. */
.bh-scope .bhd-radar {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.bh-scope .bhd-ring {
    position: absolute; left: 50%; top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.bh-scope .bhd-ring--outer  { width: 300px; height: 300px; border: 1px solid var(--line); opacity: 0.5; }
.bh-scope .bhd-ring--dashed { width: 218px; height: 218px; border: 1px dashed var(--line); opacity: 0.7; animation: bhd-spin 60s linear infinite; }
.bh-scope .bhd-ring--inner  { width: 150px; height: 150px; border: 1px solid var(--line); }
.bh-scope .bhd-sweep {
    position: absolute; left: 50%; top: 50%;
    width: 300px; height: 300px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 78%, oklch(0.62 0.17 var(--accent-h) / 0.22) 100%);
    animation: bhd-spin 4.5s linear infinite;
}
.bh-scope .bhd-blip {
    position: absolute; left: 50%; top: calc(50% - 75px); /* rides the inner ring's top edge */
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: bhd-blip 2.4s ease-in-out infinite;
}
.bh-scope .bhd-hero-center { position: relative; text-align: center; }
.bh-scope .bhd-orb-wrap { position: relative; width: 92px; height: 92px; margin: 0 auto; }
.bh-scope .bhd-score-ring { position: absolute; left: -8px; top: -8px; transform: rotate(-90deg); }
.bh-scope .bhd-orb {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: grid; place-items: center;
    box-shadow: 0 10px 34px oklch(0.62 0.17 var(--accent-h) / 0.2);
    overflow: hidden;
}
.bh-scope .bhd-orb-logo { width: 58%; height: 58%; object-fit: contain; }
.bh-scope .bhd-orb-inits { font: 600 26px/1 var(--font-display); color: var(--cream); letter-spacing: -0.02em; }
.bh-scope .bhd-orb-domain { font: 500 8.5px/1.6 var(--font-mono); color: var(--muted); letter-spacing: 0.05em; }
.bh-scope .bhd-stamp {
    position: absolute; top: -4px; right: -74px;
    padding: 3px 8px;
    border: 1.5px solid var(--accent); border-radius: 4px;
    font: 600 8px/1 var(--font-mono); letter-spacing: 0.14em;
    color: var(--accent); background: var(--card-bg);
    white-space: nowrap;
    animation: bhd-stamp 420ms 700ms cubic-bezier(.2,.8,.25,1) both;
}
.bh-scope .bhd-hero-name-row {
    margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.bh-scope .bhd-hero-name { font: 600 15px/1 var(--font-display); color: var(--cream); }
.bh-scope .bhd-hero-meta { font: 500 9px/1.7 var(--font-mono); color: var(--muted-2); letter-spacing: 0.05em; }

/* ── Live signal ticker ── */
.bh-scope .bhd-ticker {
    flex-shrink: 0;
    overflow: hidden;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    z-index: 3;
}
.bh-scope .bhd-ticker-track {
    display: flex; width: max-content;
    animation: bhd-ticker 26s linear infinite;
}
.bh-scope .bhd-ticker-track span {
    font: 500 9px/1 var(--font-mono); color: var(--muted);
    letter-spacing: 0.1em;
    padding: 7px 0 7px 14px;
    white-space: nowrap;
}

/* ── Lens bar ── */
.bh-scope .bhd-lensbar {
    flex-shrink: 0;
    display: flex; gap: 8px;
    padding: 11px 14px 9px;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
}
.bh-scope .bhd-lensbar::-webkit-scrollbar { display: none; }
.bh-scope .bhd-lens-chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface-soft); color: var(--cream-2);
    padding: 8px 13px;
    font: 500 12px/1 var(--font-ui);
    cursor: pointer; white-space: nowrap;
    transition: all 150ms;
}
.bh-scope .bhd-lens-chip:active { transform: scale(0.94); }
.bh-scope .bhd-lens-chip.is-on {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ink-0);
    font-weight: 600;
}
.bh-scope .bhd-lens-chip.is-locked { opacity: 0.55; cursor: not-allowed; }
.bh-scope .bhd-lens-dot {
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink-0);
    margin-right: 6px;
}

/* ── Tile grid ── */
.bh-scope .bhd-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    z-index: 2;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-strong) transparent;
}
.bh-scope .bhd-grid {
    padding: 4px 12px 10px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
/* Lens changed by swipe — tiles slide in from the side the swipe came from. */
.bh-scope .bhd-grid.is-swipe-next .bhd-tile { animation-name: bhd-slide-next; }
.bh-scope .bhd-grid.is-swipe-prev .bhd-tile { animation-name: bhd-slide-prev; }
.bh-scope .bhd-tile {
    text-align: left;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card-bg);
    padding: 11px 12px;
    cursor: pointer; display: block;
    transition: transform 120ms, border-color 150ms;
    animation: bhd-fade-up 340ms cubic-bezier(.2,.8,.25,1) both;
}
.bh-scope .bhd-tile:active { transform: scale(0.96); }
.bh-scope .bhd-tile.is-hero {
    grid-column: 1 / -1;
    padding: 13px 14px;
    border-color: var(--accent-line);
    background:
        linear-gradient(180deg, oklch(0.62 0.17 var(--accent-h) / 0.06), transparent 60%),
        var(--card-bg);
}
.bh-scope .bhd-tile.is-locked { opacity: 0.75; }
.bh-scope .bhd-tile-top { display: flex; justify-content: space-between; align-items: center; }
.bh-scope .bhd-tile-num { font: 500 8.5px/1 var(--font-mono); color: var(--muted-2); letter-spacing: 0.07em; }
.bh-scope .bhd-tile-ic { font-size: 13px; color: var(--muted-2); }
.bh-scope .bhd-tile-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.bh-scope .bhd-tile-text { min-width: 0; display: block; }
.bh-scope .bhd-tile-title { display: block; font: 600 12.5px/1.25 var(--font-ui); color: var(--cream); margin-top: 7px; }
.bh-scope .bhd-tile-stat {
    display: block;
    font: 600 17px/1.15 var(--font-display);
    color: var(--accent);
    margin-top: 6px; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .bhd-tile.is-hero .bhd-tile-stat { font-size: 27px; }
.bh-scope .bhd-tile-lock { font-size: 15px; }
.bh-scope .bhd-tile-sub {
    display: block;
    font: 400 10px/1.4 var(--font-ui); color: var(--muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .bhd-tile-spark { flex-shrink: 0; overflow: visible; margin-bottom: 2px; }

/* ── Expanded module modal ── */
.bh-scope .bhd-modal-backdrop {
    position: absolute; inset: 0; z-index: 60;
    background: var(--backdrop, rgba(20, 16, 12, 0.5));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bh-scope .bhd-modal {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 61;
    width: calc(100% - 28px); max-width: 400px; max-height: 76%;
    display: flex; flex-direction: column;
    background: var(--card-bg-strong, var(--card-bg));
    border: 1px solid var(--line-2, var(--line));
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    animation: bhd-zoom-in 240ms cubic-bezier(.2,.8,.25,1);
}
.bh-scope .bhd-modal-head {
    flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--line);
}
.bh-scope .bhd-modal-headl { min-width: 0; }
.bh-scope .bhd-modal-eyebrow { font: 500 8.5px/1 var(--font-mono); color: var(--muted-2); letter-spacing: 0.07em; margin-bottom: 5px; }
.bh-scope .bhd-modal-close {
    border: 1px solid var(--line);
    background: var(--surface-soft);
    border-radius: 10px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    cursor: pointer; color: var(--cream);
    font-size: 17px; line-height: 1;
}
.bh-scope .bhd-modal-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
}
.bh-scope .bhd-modal-foot {
    flex-shrink: 0;
    display: flex; gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--line);
}
.bh-scope .bhd-modal-nav {
    flex: 1;
    border: 1px solid var(--line);
    background: var(--surface-soft); color: var(--cream-2);
    border-radius: 10px; padding: 10px;
    font: 500 12px/1 var(--font-ui);
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-scope .bhd-modal-nav.is-next {
    border-color: var(--accent-line, var(--line));
    background: var(--accent-soft); color: var(--accent);
    font-weight: 600;
}

/* ── Bottom app nav ── */
.bh-scope .bhd-nav {
    flex-shrink: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(var(--page-rgb), 0.72);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 8px 6px calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
}
.bh-scope .bhd-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: none; background: none;
    cursor: pointer; padding: 4px 0;
    border-radius: 10px;
    color: var(--muted);
    transition: transform 120ms;
}
.bh-scope .bhd-nav-item:active { transform: scale(0.92); }
.bh-scope .bhd-nav-item.is-on { color: var(--accent); }
.bh-scope .bhd-nav-item .material-icons { font-size: 21px; }
.bh-scope .bhd-nav-label { font: 500 9.5px/1 var(--font-ui); }

/* Motion is decorative everywhere here — respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
    .bh-scope .bhd-sweep,
    .bh-scope .bhd-ring--dashed,
    .bh-scope .bhd-blip,
    .bh-scope .bhd-ticker-track,
    .bh-scope .bhd-stamp,
    .bh-scope .bhd-burst,
    .bh-scope .bhd-tile,
    .bh-scope .bhd-grid.is-swipe-next .bhd-tile,
    .bh-scope .bhd-grid.is-swipe-prev .bhd-tile,
    .bh-scope .bhd-modal { animation: none; }
    .bh-scope .bhd-stamp { opacity: 1; transform: rotate(-8deg); }
}

/* ── Social lens — fixed layout + the Channels / wide Top Posts cards ──── */
/* Named-layout size flags (lensConfig NAMED_LAYOUTS → ScopeStage classes). */
.bh-scope .satellite.is-wide { width: 640px; max-height: 300px; }
.bh-scope .satellite.is-tall { max-height: 360px; }

/* Channels card */
.bh-scope .chan { display: flex; flex-direction: column; gap: 9px; }
.bh-scope .chan-hero { display: flex; align-items: center; gap: 12px; }
.bh-scope .chan-total { font: 600 26px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-primary); }
.bh-scope .chan-total-sub { margin-top: 4px; font: 400 10px/1.3 var(--font-mono); color: var(--muted-2); letter-spacing: 0.04em; }
.bh-scope .chan-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bh-scope .chan-row {
    display: grid;
    grid-template-columns: 8px 1fr auto auto 44px;
    grid-template-areas: "dot name val er age" "bar bar bar bar bar";
    align-items: center; column-gap: 8px; row-gap: 4px;
    font: 400 10.5px/1.3 var(--font-ui);
}
.bh-scope .chan-row .dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; }
.bh-scope .chan-name { grid-area: name; color: var(--cream-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bh-scope .chan-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.bh-scope .chan-link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.bh-scope .chan-go { font-size: 9px; opacity: 0; transition: opacity 120ms; }
.bh-scope .chan-link:hover .chan-go, .bh-scope .legend > li:hover .chan-go { opacity: 0.9; }
.bh-scope .chan-handle { font: 400 9.5px/1.2 var(--font-mono); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-scope .chan-val { grid-area: val; color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.bh-scope .chan-er { grid-area: er; min-width: 44px; text-align: right; }
.bh-scope .chan-er .pill { padding: 1px 6px; font-size: 9.5px; }
.bh-scope .chan-dash { color: var(--muted-2); }
.bh-scope .chan-age { grid-area: age; text-align: right; font: 400 9.5px/1 var(--font-mono); color: var(--muted-2); white-space: nowrap; }
.bh-scope .chan-nofeed { grid-column: er-start / age-end; grid-row: 1; text-align: right; font: 400 9.5px/1 var(--font-mono); color: var(--muted-2); letter-spacing: 0.04em; }
.bh-scope .chan-bar { grid-area: bar; height: 3px; border-radius: 2px; background: var(--surface-soft); overflow: hidden; }
.bh-scope .chan-bar > span { display: block; height: 100%; border-radius: 2px; opacity: 0.85; }
/* Social insight cards — crowd share, posting rhythm, topics + format mix */
.bh-scope .si { display: flex; flex-direction: column; gap: 9px; }
.bh-scope .si-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.bh-scope .si-bar > span { display: block; height: 100%; opacity: 0.9; }
.bh-scope .si-note { margin: 0; font: 400 10.5px/1.45 var(--font-ui); color: var(--cream-2); }
.bh-scope .si-note b { color: var(--text-primary); font-weight: 600; }
.bh-scope .si-days, .bh-scope .si-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bh-scope .si-days > span { text-align: center; font: 500 9px/1 var(--font-mono); color: var(--muted-2); }
.bh-scope .si-heat > span {
    height: 18px; border-radius: 4px; display: grid; place-items: center;
    font: 500 9.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.bh-scope .si-heat > .l0 { background: var(--surface-mid); }
.bh-scope .si-heat > .l1 { background: oklch(0.62 0.17 var(--accent-h) / 0.22); }
.bh-scope .si-heat > .l2 { background: oklch(0.62 0.17 var(--accent-h) / 0.45); }
.bh-scope .si-heat > .l3 { background: oklch(0.62 0.17 var(--accent-h) / 0.7); color: #fff; }
.bh-scope .si-heat > .l4 { background: var(--accent); color: #fff; }
.bh-scope .si-heat > .is-future { background: transparent; }
.bh-scope .si-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bh-scope .si-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px; background: var(--surface-mid);
    font: 400 10.5px/1.3 var(--font-ui); color: var(--cream-2);
}
.bh-scope .si-chip.is-big { background: var(--accent-soft); color: var(--text-primary); font-weight: 500; }
.bh-scope .si-chip em { font-style: normal; font: 500 9.5px/1 var(--font-mono); color: var(--muted-2); }
.bh-scope .si-mix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.bh-scope .si-mix > div { display: flex; flex-direction: column; gap: 3px; }
.bh-scope .si-mix b { font: 600 18px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-primary); }
.bh-scope .si-mix span { font: 400 9.5px/1.2 var(--font-mono); color: var(--muted-2); letter-spacing: 0.04em; }
.bh-scope .chan-reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.bh-scope .chan-reach-cell { display: flex; flex-direction: column; gap: 3px; }
.bh-scope .chan-reach-val { font: 600 15px/1 var(--font-display); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bh-scope .chan-reach-label { font: 400 8.5px/1.2 var(--font-mono); color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }

/* Top Posts — plain 2×2 thumbs by default; the wide card unlocks six cells
   with channel badge, likes overlay and a one-line caption. */
.bh-scope .posts-mini-thumb { position: absolute; inset: 0; }
.bh-scope .posts-mini-badge, .bh-scope .posts-mini-meta, .bh-scope .posts-mini-cap { display: none; }
.bh-scope .posts-mini-cell:nth-child(n+5) { display: none; }
/* minmax(0, 1fr): a plain 1fr lets an image's intrinsic width blow the
   first column up and shove the rest out of the card. */
/* auto-fit: four posts fill the row as four, six as six — never empty slots.
   Tracks cap at 150px so one or two posts don't balloon; the row centers. */
.bh-scope .satellite.is-wide .posts-mini { grid-template-columns: repeat(auto-fit, minmax(88px, 150px)); justify-content: center; gap: 10px; height: auto; }
.bh-scope .satellite.is-wide .posts-mini-cell,
.bh-scope .satellite.is-wide .posts-mini-cell:nth-child(n+5) {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    aspect-ratio: auto; background: transparent; border: 0; border-radius: 0; overflow: visible;
}
.bh-scope .satellite.is-wide .posts-mini-thumb {
    position: relative; inset: auto; aspect-ratio: 1;
    border-radius: 10px; overflow: hidden;
    background: var(--surface-soft); border: 1px solid var(--line);
    transition: transform 160ms ease, border-color 160ms ease;
}
.bh-scope .satellite.is-wide .posts-mini-thumb img,
.bh-scope .satellite.is-wide .posts-mini-thumb .posts-mini-ph { position: absolute; inset: 0; }
.bh-scope .satellite.is-wide .posts-mini-cell:hover .posts-mini-thumb { transform: translateY(-2px); border-color: var(--line-2); }
.bh-scope .satellite.is-wide .posts-mini-badge {
    display: inline-flex; position: absolute; top: 6px; left: 6px;
    padding: 2px 6px; border-radius: 999px;
    font: 600 8.5px/1.2 var(--font-mono); letter-spacing: 0.04em; color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.bh-scope .satellite.is-wide .posts-mini-meta {
    display: block; position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 7px 6px;
    font: 500 9.5px/1 var(--font-mono); color: #fff; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
}
.bh-scope .satellite.is-wide .posts-mini-cap {
    display: block; font: 400 10px/1.3 var(--font-ui); color: var(--cream-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}