/* ====================================================================
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 ). 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(44, 42, 39, 0.82);
--card-bg-strong: rgba(44, 42, 39, 0.94);
--surface-overlay: rgba(28, 26, 24, 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 {
--paper: #f6edcf; /* warm beige-yellow sheet */
--paper-edge: #e6d8a8; /* slightly deeper edge */
--paper-ink: #34301f; /* dark warm ink */
--paper-faint: #8d8259; /* muted label / placeholder */
--paper-rule: rgba(120, 96, 40, 0.16); /* ruled lines */
position: absolute;
width: 200px; min-height: 150px;
display: flex; flex-direction: column;
pointer-events: auto;
border: 1px solid var(--paper-edge);
border-radius: 4px;
background: var(--paper);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.bh-scope .note-card__head {
display: flex; align-items: center; gap: 7px;
padding: 7px 9px;
/* Tear-off strip across the top of the pad. */
background: linear-gradient(var(--paper-edge), color-mix(in srgb, var(--paper-edge) 55%, var(--paper)));
border-bottom: 1px solid var(--paper-edge);
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(--paper-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(--paper-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: #b3402a;
background: rgba(120, 96, 40, 0.12);
}
.bh-scope .note-card__text {
flex: 1 1 auto;
width: 100%;
border: none; outline: none; resize: vertical;
padding: 6px 10px;
background: transparent;
/* Ruled lines aligned to the 24px line-height, like a legal pad. */
background-image: repeating-linear-gradient(
var(--paper) 0px, var(--paper) 23px,
var(--paper-rule) 23px, var(--paper-rule) 24px);
background-position: 0 6px;
color: var(--paper-ink);
font-family: var(--font-sans, inherit);
font-size: 13px; line-height: 24px;
min-height: 110px;
}
.bh-scope .note-card__text::placeholder { color: var(--paper-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 — 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-loader {
width: 420px;
padding: 28px 32px;
border-radius: 24px;
background: rgba(var(--card-rgb), 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--accent-line);
box-shadow: 0 0 0 1px var(--accent-soft), 0 24px 64px -16px rgba(0,0,0,0.7);
display: flex; flex-direction: column; gap: 14px;
animation: bhs-orb-loader-in 320ms cubic-bezier(.2,.7,.2,1);
pointer-events: auto;
}
@keyframes bhs-orb-loader-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.bh-scope .orb-loader-inits {
font: 400 36px/1 var(--font-serif);
color: var(--text-primary);
letter-spacing: 0.02em;
text-shadow: 0 0 24px var(--accent-soft);
}
.bh-scope .orb-loader-domain {
font: 400 11px/1 var(--font-mono);
color: var(--accent);
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.bh-scope .orb-loader-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 7px;
}
.bh-scope .orb-loader-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 .orb-loader-steps > li.is-done { color: var(--cream-2); }
.bh-scope .orb-loader-steps > li.is-active { color: var(--text-primary); }
.bh-scope .orb-loader-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 .orb-loader-steps > li.is-active .orb-loader-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 .orb-loader-steps > li.is-done .orb-loader-step-ic {
background: var(--accent);
color: var(--ink-0);
border-color: var(--accent);
}
/* 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;
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 overlay — the default 480px shows barely
two rows once the featured CEO tier is in place. */
.bh-scope .expanded-card.is-org { height: min(680px, 92%); }
.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 .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;
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(140px, 1fr));
gap: 10px;
}
.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) */
.bh-scope .exp-org-grid {
display: grid;
/* 260px (was 220px) so the email result + Get-email action fit without
crushing the name/title column. */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.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; }
.bh-scope .exp-org-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 6px;
}
/* Featured CEO tier — echoes the collapsed card's pyramid (accent card on
top, roster below), with a connector stem carrying the org-chart feel. */
.bh-scope .exp-org-cell.is-ceo {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 16px 14px 14px;
max-width: 420px;
margin: 0 auto;
background: var(--accent-soft);
border-color: var(--accent-line);
}
.bh-scope .exp-org-cell.is-ceo .exp-org-avi {
width: 44px; height: 44px;
font-size: 13px;
background: var(--accent-soft);
border-color: var(--accent-line);
color: var(--accent);
}
.bh-scope .exp-org-cell.is-ceo .exp-row-title { font-size: 14.5px; }
.bh-scope .exp-org-cell.is-ceo .exp-org-meta {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.bh-scope .exp-org-cell.is-ceo .exp-org-tags { justify-content: center; }
.bh-scope .exp-org-cell.is-ceo .exp-email { align-items: center; 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); }
.bh-scope .exp-email__hint {
font: 400 9.5px/1.3 var(--font-mono);
color: var(--muted-2);
}
.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);
}
/* ─────────────────────────────────────────────────────────────────────
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 for
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 .orb-loader { width: min(420px, 92%); }
/* 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; } }