/* Basecamp — v2 Slate Dark theme */
/* ── Welcome banner wrapper (uiOutput renders a plain div; make it non-flow) ─ */
[id$="map_welcome_banner"] {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 1000;
pointer-events: none;
}
/* ── Self-hosted fonts — served from /www/fonts/, no external DNS hop ──────
Downloaded from Google Fonts (SIL OFL license). Replaces the Google CDN
that was blocking first paint by ~200-350ms. */
@font-face {
font-family: 'DM Serif Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/DMSerifDisplay-Regular.v2.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900; /* variable font covers all weights */
font-display: swap;
src: url('fonts/Inter-variable.woff2') format('woff2');
}
/* ──────────────────────────────────────────────────────────────────────── */
/* ── CSS Custom Properties — change palette here, nowhere else ───────────── */
:root {
--bg: #100e0b;
--surface: #1a1810;
--surface-hi: #211e14;
--surface-top: #2a2418;
--border: #3a3020;
--border-hi: #504030;
--accent: #d4a843;
--accent-hi: #e8c870;
--accent-dim: rgba(212,168,67,0.15);
--text: #e8dcc8;
--text-2: #9a8e7a;
--text-3: #a09686;
--navbar: #0a0806;
--font-brand: 'DM Serif Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
--font-head: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
--font-ui: 'Inter', system-ui, sans-serif;
--font-data: 'Georgia', 'EB Garamond', serif;
/* ── Type scale — 7 stops. Use nothing outside these ──────────────────── */
--text-xs: 0.65rem; /* tags, uppercase chip labels, tiny metadata */
--text-sm: 0.75rem; /* secondary labels, badges, sidebar meta */
--text-md: 0.85rem; /* default UI text, stat values, card descriptions */
--text-base: 0.9rem; /* body copy, narrative text, form labels */
--text-lg: 1.1rem; /* card titles, section headings */
--text-xl: 1.5rem; /* panel headers, entity names, featured stats */
--text-2xl: clamp(2.5rem, 6vw, 4rem); /* hero display, big Teko numbers */
/* Letter-spacing: 0.08em on uppercase labels; 0 everywhere else */
/* ── Weight tokens ────────────────────────────────────────────────────── */
--fw-body: 400; /* running text */
--fw-label: 500; /* metric names, field labels */
--fw-semi: 600; /* secondary emphasis, nav items */
--fw-bold: 700; /* values, primary emphasis */
--fw-heavy: 800; /* featured numbers, grade letters */
/* ── Line-height tokens ───────────────────────────────────────────────── */
--lh-tight: 1.25; /* single-line numbers, chips */
--lh-snug: 1.4; /* stat label + value pairs */
--lh-normal: 1.55; /* body copy, descriptions */
--lh-loose: 1.7; /* long-form narrative text */
}
/* ── 3px top-of-page accent strip ────────────────────────────────────────── */
body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #d4a843, #8a6428);
z-index: 10000;
pointer-events: none;
}
/* ── Base dark theme (unconditional — app is always dark) ─────────────────── */
body {
background-color: var(--bg) !important;
color: var(--text) !important;
font-family: var(--font-body) !important;
font-size: 1rem;
/* Prevent content from being hidden under the fixed legal footer (~30px) */
padding-bottom: 36px !important;
}
/* ── Dark-mode scoped overrides (bslib toggle) ────────────────────────────── */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body > .container-fluid,
[data-bs-theme="dark"] {
background-color: var(--bg) !important;
color: var(--text) !important;
}
[data-bs-theme="dark"] .navbar {
background-color: var(--navbar) !important;
border-bottom: 1px solid rgba(212,168,67,0.15) !important;
}
[data-bs-theme="dark"] .card {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select {
background-color: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-bs-theme="dark"] select option:checked,
[data-bs-theme="dark"] select option:focus {
background: linear-gradient(var(--surface-hi), var(--surface-hi)) !important;
background-color: var(--surface-hi) !important;
color: var(--accent-hi) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 0.15rem var(--accent-dim) !important;
}
[data-bs-theme="dark"] dt { color: var(--accent) !important; }
[data-bs-theme="dark"] dd { color: var(--text) !important; }
[data-bs-theme="dark"] p:not(.section-label) { color: var(--text) !important; }
[data-bs-theme="dark"] .profile-list li { color: var(--text) !important; }
[data-bs-theme="dark"] hr { border-color: var(--border) !important; }
[data-bs-theme="dark"] small { color: var(--text-3) !important; }
[data-bs-theme="dark"] h1:not(.section-label),
[data-bs-theme="dark"] h2:not(.section-label),
[data-bs-theme="dark"] h3:not(.section-label),
[data-bs-theme="dark"] h4:not(.section-label),
[data-bs-theme="dark"] h5:not(.section-label),
[data-bs-theme="dark"] h6:not(.section-label) {
color: var(--text) !important;
}
[data-bs-theme="dark"] span { color: inherit; }
[data-bs-theme="dark"] .leaflet-container {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
}
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .control-label { color: var(--accent) !important; }
[data-bs-theme="dark"] .shiny-input-container .radio label,
[data-bs-theme="dark"] .shiny-input-container .checkbox label { color: var(--accent) !important; }
[data-bs-theme="dark"] .section-pill:not(.active),
[data-bs-theme="dark"] .nav-pills .nav-link:not(.active),
[data-bs-theme="dark"] .scope-pill-btn:not(.active) {
border-color: var(--border-hi) !important;
color: var(--text-2) !important;
background: var(--surface) !important;
}
[data-bs-theme="dark"] .section-pill:hover,
[data-bs-theme="dark"] .nav-pills .nav-link:hover,
[data-bs-theme="dark"] .scope-pill-btn:hover {
background: var(--surface-hi) !important;
color: var(--text) !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .scope-pill-btn.active {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
font-weight: 700 !important;
}
[data-bs-theme="dark"] a { color: var(--accent) !important; }
[data-bs-theme="dark"] a:hover { color: var(--accent-hi) !important; }
[data-bs-theme="dark"] .btn-warning {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--bg) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
background-color: var(--surface-hi) !important;
}
[data-bs-theme="dark"] .progress { background-color: var(--bg) !important; }
[data-bs-theme="dark"] .pill-bar {
background: var(--bg) !important;
border-bottom-color: var(--accent-dim) !important;
}
/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
background-color: var(--navbar) !important;
border-bottom: 1px solid rgba(212,168,67,0.15);
min-height: 56px;
padding: 0 1rem;
}
.navbar-brand {
color: var(--accent) !important;
font-family: var(--font-brand);
font-size: 1.15rem;
letter-spacing: 0.04em;
font-weight: 700;
margin-right: auto;
}
.bc-brand-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--accent);
font-family: var(--font-brand);
}
.bc-brand-logo {
width: 26px;
height: 26px;
object-fit: contain;
border-radius: 4px;
}
.bc-brand-scope {
display: flex;
gap: 0.2rem;
margin-left: 0.6rem;
padding-left: 0.7rem;
border-left: 1px solid var(--border);
}
/* Navbar: brand left, spacer pushes Peak Maps right */
.navbar .navbar-nav {
flex: 1;
display: flex;
align-items: center;
}
.nav-icon {
font-size: 0.75rem;
margin-right: 0.25rem;
opacity: 0.6;
display: inline-block;
transition: transform 0.2s, opacity 0.2s;
}
.navbar .nav-link:hover .nav-icon,
.navbar .nav-link.active .nav-icon,
.nav-pills .nav-link:hover .nav-icon,
.nav-pills .nav-link.active .nav-icon {
opacity: 1;
transform: scale(1.15);
}
.navbar .nav-link {
color: var(--text-3) !important;
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
padding: 0.9rem 1.1rem 0.75rem;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color 0.18s, border-color 0.18s, background 0.18s;
position: relative;
}
.navbar .nav-link:hover {
color: var(--text) !important;
background: rgba(212,168,67,0.06);
border-bottom-color: rgba(212,168,67,0.35);
}
.navbar .nav-link.active {
color: var(--accent) !important;
font-weight: 700;
border-bottom-color: var(--accent);
background: rgba(212,168,67,0.08);
}
.navbar .nav-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 15%;
right: 15%;
height: 8px;
background: var(--accent);
filter: blur(10px);
opacity: 0.45;
}
/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-brand) !important; color: var(--text) !important; }
h4, h5, h6 { font-family: var(--font-head) !important; color: var(--text) !important; letter-spacing: 0 !important; }
h4.section-label, h5.section-label, h6.section-label, p.section-label { letter-spacing: 0.09em !important; }
dt { color: var(--accent) !important; font-size: 0.85rem; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.02em; }
dd { color: var(--text) !important; font-size: 0.9rem; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
small { color: var(--text-3); }
hr { border-color: var(--border) !important; opacity: 1; }
label, .control-label {
color: var(--accent) !important;
font-size: 0.75rem;
font-family: var(--font-ui);
font-weight: 500;
}
.shiny-input-container .radio label,
.shiny-input-container .checkbox label { color: var(--accent) !important; }
a { color: var(--accent) !important; }
a:hover { color: var(--accent-hi) !important; }
:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 2px !important;
}
/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select, select {
background-color: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
border-radius: 3px !important;
font-family: var(--font-ui) !important;
}
select option:checked, select option:focus {
background: linear-gradient(var(--accent), var(--accent)) !important;
background-color: var(--accent) !important;
color: var(--bg) !important;
font-weight: 600;
}
.form-control:focus, .form-select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 0.15rem var(--accent-dim) !important;
}
/* ── Selectize dark-theme overrides ─────────────────────────────────────── */
.selectize-control .selectize-input {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
border-radius: 6px;
font-family: var(--font-ui);
padding: 8px 12px;
min-height: 40px;
box-shadow: none !important;
}
.selectize-control .selectize-input.focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(212,168,67,0.15) !important;
}
.selectize-control .selectize-input .item {
color: var(--text) !important;
}
.selectize-dropdown {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
max-height: 320px !important;
overflow-y: auto !important;
border-top: none !important;
border-radius: 0 0 6px 6px;
color: var(--text) !important;
font-family: var(--font-ui) !important;
}
.selectize-dropdown-content {
max-height: 300px !important;
overflow-y: auto !important;
}
.selectize-dropdown .option {
padding: 10px 14px;
color: var(--text) !important;
font-family: var(--font-ui) !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
background: var(--surface-hi) !important;
color: var(--accent-hi) !important;
}
.selectize-dropdown .optgroup-header {
color: var(--muted) !important;
background: var(--surface) !important;
font-family: var(--font-ui) !important;
}
/* ── Buttons ─────────────────────────────────────────────────────────────── */
button, .btn {
font-family: var(--font-ui) !important;
}
.btn-outline-secondary {
font-family: var(--font-ui) !important;
}
.btn-warning {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--bg) !important;
font-weight: 600;
font-family: var(--font-brand);
letter-spacing: 0.04em;
border-radius: 4px !important;
}
.btn-warning:hover {
background-color: var(--accent-hi) !important;
border-color: var(--accent-hi) !important;
}
.btn-outline-secondary {
border-color: var(--border) !important;
color: var(--text) !important;
border-radius: 4px !important;
}
.btn-outline-secondary:hover {
background-color: var(--surface-hi) !important;
color: var(--text) !important;
}
/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
border-radius: 5px !important;
}
.card-body { padding: 0.9rem !important; }
/* ── Progress / range slider ─────────────────────────────────────────────── */
.progress { background-color: var(--bg) !important; }
.irs--shiny .irs-bar { background: var(--accent) !important; border-color: var(--accent) !important; }
.irs--shiny .irs-handle { background: var(--accent) !important; border-color: var(--accent) !important; }
.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
background: var(--accent) !important;
font-family: var(--font-ui) !important;
}
/* ── Section label — pill-banner style ───────────────────────────────────── */
.section-label {
font-size: 0.75rem !important;
font-family: var(--font-ui);
font-weight: 700 !important;
color: var(--accent) !important;
letter-spacing: 0.09em;
text-transform: uppercase;
margin-top: 2.25rem;
margin-bottom: 0.85rem;
padding: 0.4rem 0.8rem 0.4rem 0.7rem !important;
background: rgba(212,168,67,0.13) !important;
border-left: 3px solid var(--accent) !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-radius: 0 4px 4px 0;
display: flex !important;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
overflow: hidden;
}
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--accent-dim), transparent);
display: block;
}
/* Subtle separator between individual feature items (clickable rows) */
.bc-clickable-row,
div[style*="cursor:pointer"] {
border-bottom: 1px solid rgba(255,255,255,0.04);
padding-bottom: 0.3rem;
}
.profile-list li {
border-bottom: 1px solid rgba(255,255,255,0.04);
padding-bottom: 0.3rem;
}
/* Per-tab accent colors on section label banners */
.section-label[data-section="general"] { color: #d4a843 !important; border-left-color: #d4a843 !important; background: rgba(212,168,67,0.13) !important; }
.section-label[data-section="population"] { color: #a78bfa !important; border-left-color: #a78bfa !important; background: rgba(167,139,250,0.13) !important; }
.section-label[data-section="economics"] { color: #5dbe8a !important; border-left-color: #5dbe8a !important; background: rgba(93,190,138,0.13) !important; }
.section-label[data-section="geography"] { color: #22d3ee !important; border-left-color: #22d3ee !important; background: rgba(34,211,238,0.13) !important; }
.section-label[data-section="military"] { color: #d47a7a !important; border-left-color: #d47a7a !important; background: rgba(248,113,113,0.13) !important; }
.section-label[data-section="university"] { color: #60a5fa !important; border-left-color: #60a5fa !important; background: rgba(96,165,250,0.13) !important; }
.section-label[data-section="culture"] { color: #e879f9 !important; border-left-color: #e879f9 !important; background: rgba(232,121,249,0.13) !important; }
.section-label[data-section="sports"] { color: #fb923c !important; border-left-color: #fb923c !important; background: rgba(251,146,60,0.13) !important; }
.section-label[data-section="crime"] { color: #d47a7a !important; border-left-color: #d47a7a !important; background: rgba(248,113,113,0.13) !important; }
.section-label[data-section="climate"] { color: #d4a843 !important; border-left-color: #d4a843 !important; background: rgba(212,168,67,0.13) !important; }
.section-label[data-section="housing"] { color: #fbbf24 !important; border-left-color: #fbbf24 !important; background: rgba(251,191,36,0.13) !important; }
.section-label[data-section="infrastructure"] { color: #94a3b8 !important; border-left-color: #94a3b8 !important; background: rgba(148,163,184,0.13) !important; }
.section-label[data-section="political"] { color: #f472b6 !important; border-left-color: #f472b6 !important; background: rgba(244,114,182,0.13) !important; }
/* ── Profile list ─────────────────────────────────────────────────────────── */
.profile-list {
padding-left: 1.2rem;
margin-bottom: 0.5rem;
}
.profile-list li {
color: var(--text);
font-size: 0.87rem;
margin-bottom: 0.4rem;
font-family: var(--font-body);
}
/* ── Photo frame treatment ────────────────────────────────────────────────── */
.profile-photo {
width: 100%;
border: 1px solid var(--border-hi);
border-radius: 5px;
box-shadow: inset 0 0 14px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
display: block;
}
/* ── Map ─────────────────────────────────────────────────────────────────── */
.leaflet-container {
background: var(--surface);
border-radius: 5px;
border: 1px solid var(--border);
}
/* Pre-promote map pane to its own GPU compositing layer so the browser doesn't
have to create one mid-animation (which causes a one-frame flash). */
.leaflet-map-pane {
will-change: transform;
}
/* Crisp cool tile filter — applied to individual tile imgs, NOT the pane.
Applying filter to the pane creates a GPU compositing layer that flickers
when Leaflet's drag/zoom code touches it on mousedown. Imgs are static. */
.leaflet-tile-pane img.leaflet-tile {
filter: brightness(0.92) contrast(1.04);
}
/* Subtle vignette */
.leaflet-container::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 100% 100% at 50% 50%,
transparent 55%,
rgba(13,17,23,0.25) 100%
);
pointer-events: none;
z-index: 400;
}
/* Map home button */
.leaflet-home-btn {
background: var(--surface);
border: 1px solid var(--border-hi);
border-radius: 4px;
pointer-events: all !important;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
transition: background 0.12s, color 0.12s;
padding: 0;
}
.leaflet-home-btn:hover { background: var(--surface-hi); color: var(--accent-hi); }
/* Sidebar highlight flash */
@keyframes np-flash-anim {
0%, 33% { background-color: rgba(212,168,67,0.18); border-radius: 5px; }
100% { background-color: transparent; border-radius: 5px; }
}
.np-flash { animation: np-flash-anim 3s ease-out forwards; }
/* ── Pill bar ─────────────────────────────────────────────────────────────── */
.pill-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem;
padding: 0.3rem 0.5rem 0.25rem;
background: var(--bg);
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid rgba(212,168,67,0.06);
}
/* ── Section pill tab buttons ─────────────────────────────────────────────── */
.section-pill {
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 12px;
border: 1px solid var(--border-hi);
color: var(--text-2);
cursor: pointer;
font-family: var(--font-ui);
font-style: normal;
font-weight: 500;
transition: all 0.15s ease;
line-height: 1.5;
white-space: nowrap;
position: relative;
}
/* Dim secondary pills (7th onward) */
.section-pill:nth-child(n+7) {
opacity: 0.5;
border-color: transparent;
}
.section-pill:nth-child(n+7):hover,
.section-pill:nth-child(n+7).active {
opacity: 1;
border-color: var(--border-hi);
}
.section-pill:hover {
background: rgba(212,168,67,0.08) !important;
color: var(--accent) !important;
border-color: var(--accent) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(212,168,67,0.08);
}
.section-pill.active {
background: var(--accent) !important;
color: var(--bg) !important;
border-color: var(--accent) !important;
font-weight: 700 !important;
box-shadow: 0 2px 16px rgba(212,168,67,0.3);
transform: translateY(-1px);
}
.section-pill:active {
transform: scale(0.95);
transition: transform 0.08s;
}
.section-pill-rich {
border-color: rgba(212,168,67,0.35);
}
.pill-star {
font-size: 0.52rem;
color: var(--accent);
margin-right: 0.15rem;
vertical-align: 0.06rem;
}
.section-pill.active .pill-star {
color: var(--bg);
}
/* ── navset_pill tabs ────────────────────────────────────────────────────── */
.nav-pills {
gap: 0;
flex-wrap: wrap;
justify-content: center;
padding: 0.5rem 0.5rem 0.45rem;
}
.nav-pills .nav-link {
font-size: 0.75rem;
padding: 7px 18px;
border-radius: 0;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-3);
background: transparent;
font-family: var(--font-ui);
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: color 0.15s, border-color 0.15s;
line-height: 1.5;
white-space: nowrap;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background: transparent !important;
color: var(--accent) !important;
border-color: transparent !important;
border-bottom: 2px solid var(--accent);
font-weight: 700;
box-shadow: none;
transform: none;
}
.nav-pills .nav-link:hover:not(.active) {
background: transparent !important;
color: var(--text) !important;
border-color: transparent !important;
border-bottom-color: rgba(212,168,67,0.35);
transform: none;
box-shadow: none;
}
.nav-pills .nav-link:active {
transform: none;
opacity: 0.85;
}
/* ── Scope switcher pills ─────────────────────────────────────────────────── */
.scope-switcher {
display: flex;
align-items: center;
gap: 0.30rem;
margin: 0 0.4rem;
}
.scope-pill-btn {
font-size: 0.75rem;
padding: 3px 12px;
border-radius: 3px;
border: 1px solid var(--border);
color: var(--text-2);
background: transparent;
cursor: pointer;
font-family: var(--font-ui);
font-style: normal;
font-weight: 500;
transition: all 0.18s ease;
line-height: 1.5;
white-space: nowrap;
}
.scope-pill-btn:hover {
background: var(--surface-hi);
color: var(--text);
border-color: var(--accent);
}
.scope-pill-btn.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
font-style: normal;
}
/* ── Collapsible sidebar ─────────────────────────────────────────────────── */
.sb-col {
flex: 0 0 16.5%;
min-width: 140px;
overflow: hidden;
transition: flex-basis 0.2s, min-width 0.2s;
}
.sb-collapsed {
flex-basis: 30px !important;
min-width: 30px !important;
}
.sb-collapsed .sb-content {
opacity: 0;
pointer-events: none;
}
.sb-toggle-wrap {
display: flex;
justify-content: flex-end;
padding: 0.25rem 0.25rem 0.1rem;
}
.sb-collapsed .sb-toggle-wrap { justify-content: center; }
.sb-toggle-btn {
background: var(--accent);
border: none;
color: var(--bg);
width: 22px;
height: 28px;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.12s;
}
.sb-toggle-btn:hover { background: var(--accent-hi); }
/* ── Region deselect tag (us-region scope) ─────────────────────────────────── */
.region-sel-tag {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.3rem;
padding: 0.22rem 0.5rem 0.22rem 0.6rem;
margin-bottom: 4px;
background: rgba(212,168,67,0.08);
border: 1px solid rgba(212,168,67,0.28);
border-radius: 4px;
min-height: 0;
}
.region-sel-name {
font-family: var(--font-brand);
font-size: 0.78rem;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.region-sel-x {
flex-shrink: 0;
background: none;
border: none;
color: var(--text-3);
font-size: 0.85rem;
line-height: 1;
padding: 0 2px;
cursor: pointer;
transition: color 0.12s;
}
.region-sel-x:hover { color: var(--text); }
/* ── Styled state list (native select, CSS-upgraded) ──────────────────────── */
.sb-col select.form-select,
.sb-col select.form-control,
.sb-col select {
background: var(--bg) !important;
border: none !important;
border-radius: 0 !important;
color: var(--text-2) !important;
font-size: 0.88rem !important;
font-family: 'EB Garamond', Georgia, serif !important;
padding: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.sb-col select.form-select option,
.sb-col select.form-control option,
.sb-col select option {
padding: 5px 8px;
border-radius: 0;
font-family: 'EB Garamond', Georgia, serif;
font-size: 0.88rem;
transition: background 0.1s;
}
.sb-col select.form-select option:hover,
.sb-col select.form-control option:hover,
.sb-col select option:hover {
background: rgba(212, 168, 67, 0.08) !important;
color: var(--accent) !important;
}
.sb-col select.form-select option:checked,
.sb-col select.form-control option:checked,
.sb-col select option:checked {
background: rgba(212, 168, 67, 0.15) !important;
color: var(--accent-hi) !important;
font-weight: 600;
}
.sb-col select.form-select:focus,
.sb-col select.form-control:focus,
.sb-col select:focus {
border: none !important;
box-shadow: none !important;
}
/* Sidebar region label — subdued */
.sb-col .control-label {
color: var(--text-3) !important;
font-size: 0.65rem !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600 !important;
}
/* Profile panel left border — visual separation from map */
[id$="prof_col"] {
border-left: 1px solid rgba(212, 168, 67, 0.1);
}
/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* ── Homepage ────────────────────────────────────────────────────────────── */
/* Zone 1 — The Crest */
.hp-crest {
min-height: 28vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2.5rem 1rem 2rem;
position: relative;
overflow: hidden;
}
.hp-crest::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, var(--bg) 100%);
pointer-events: none;
}
.hp-crest-icon {
font-size: 2rem;
color: var(--accent);
margin-bottom: 0.4rem;
font-family: var(--font-brand);
line-height: 1;
}
.hp-crest-title {
font-family: var(--font-brand);
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
text-shadow: 0 2px 20px rgba(0,0,0,0.7);
margin: 0 0 0.5rem;
line-height: 1;
}
.hp-crest-rule {
width: 60px;
height: 1px;
background: var(--accent);
margin: 0.5rem auto;
opacity: 0.7;
}
.hp-crest-tagline {
font-family: var(--font-ui);
font-weight: 300;
font-size: 1rem;
color: var(--text-2);
margin: 0 0 1.5rem;
}
.hp-crest-btns {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.hp-btn-primary {
font-family: var(--font-brand);
font-size: 0.85rem;
letter-spacing: 0.03em;
padding: 9px 28px;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
text-decoration: none !important;
}
.hp-btn-primary:hover { background: var(--accent-hi); color: var(--bg) !important; }
.hp-btn-ghost {
font-family: var(--font-ui);
font-size: 0.85rem;
padding: 6px 20px;
background: transparent;
color: var(--text-2);
border: 1px solid var(--border-hi);
border-radius: 4px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
text-decoration: none !important;
}
.hp-btn-ghost:hover { color: var(--text) !important; border-color: var(--accent); }
/* ── Home: State of the Day card ── */
.hp-sotd-card {
background: var(--surface);
border: 1px solid rgba(212,168,67,0.38);
border-radius: 6px;
padding: 0 1.3rem 0.9rem;
transition: border-color 0.15s;
}
.hp-sotd-card:hover { border-color: rgba(212,168,67,0.7); }
.hp-sotd-header {
padding: 1.1rem 0 0.85rem;
border-bottom: 1px solid rgba(212,168,67,0.12);
margin-bottom: 0.7rem;
}
.hp-sotd-eyebrow {
font-size: 0.65rem;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 0.3rem;
text-align: center !important;
display: block;
}
.hp-sotd-name {
font-family: var(--font-brand);
font-size: 2.2rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.1em;
line-height: 1;
margin-bottom: 0.28rem;
text-align: center !important;
display: block;
}
.hp-sotd-sub {
font-size: 0.74rem;
color: var(--text-2);
text-align: center !important;
display: block;
}
/* ── Home: Map Spotlight ── */
.hp-map-spotlight {
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hi) 55%, var(--surface) 100%);
border: 1px solid rgba(212,168,67,0.38);
border-radius: 6px;
padding: 1.1rem 1.3rem;
margin-bottom: 1rem;
}
.hp-spotlight-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.2rem;
flex-wrap: wrap;
}
.hp-spotlight-label {
font-size: 0.65rem;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 0.28rem;
}
.hp-spotlight-title {
font-size: 1.0rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.52rem;
line-height: 1.35;
}
.hp-spotlight-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.hp-tab-badge {
font-size: 0.65rem;
color: rgba(212,168,67,0.72);
border: 1px solid rgba(212,168,67,0.2);
border-radius: 3px;
padding: 0.1rem 0.42rem;
letter-spacing: 0.03em;
white-space: nowrap;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hp-tab-badge:hover {
background: rgba(212,168,67,0.12);
color: var(--accent);
border-color: rgba(212,168,67,0.45);
}
/* ── Home: Discovery cards ── */
.hp-disc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 0.75rem;
}
.hp-disc-card {
background: var(--surface);
border: 1px solid rgba(212,168,67,0.18);
border-radius: 5px;
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.32rem;
transition: border-color 0.15s;
}
.hp-disc-card:hover { border-color: rgba(212,168,67,0.45); }
.hp-disc-icon {
font-size: 1.35rem;
line-height: 1;
margin-bottom: 0.08rem;
}
.hp-disc-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.hp-disc-body {
font-size: 0.75rem;
color: var(--text-2);
line-height: 1.5;
flex: 1;
}
.hp-disc-btn {
margin-top: 0.4rem;
background: rgba(212,168,67,0.08);
border: 1px solid rgba(212,168,67,0.3);
color: var(--accent);
font-size: 0.67rem;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
padding: 0.2rem 0.55rem;
border-radius: 3px;
align-self: flex-start;
transition: background 0.12s;
}
.hp-disc-btn:hover { background: rgba(212,168,67,0.16); }
/* Zone 2 — Featured Dossiers */
.hp-featured-section {
padding: 0 1rem 1.5rem;
}
.hp-section-heading {
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hp-section-heading::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--border), transparent);
}
.hp-featured-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.hp-featured-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: all 0.18s ease;
position: relative;
}
.hp-featured-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,168,67,0.3);
}
.hp-featured-img-wrap {
height: 160px;
position: relative;
overflow: hidden;
background: var(--bg);
}
.hp-featured-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.88) contrast(1.02);
transition: filter 0.3s;
}
.hp-featured-card:hover .hp-featured-img-wrap img {
filter: brightness(0.95) contrast(1.02);
}
/* State abbr watermark */
.hp-featured-abbr {
position: absolute;
bottom: 6px;
right: 10px;
font-family: var(--font-brand);
font-size: 3.5rem;
font-weight: 700;
color: rgba(230,237,243,0.07);
line-height: 1;
pointer-events: none;
letter-spacing: 0.05em;
}
/* Accent stripe between image and body */
.hp-featured-body {
border-top: 2px solid var(--accent);
padding: 0.9rem 0.85rem 0.8rem;
}
.hp-featured-name {
font-family: var(--font-brand);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
margin-bottom: 0.18rem;
}
.hp-featured-sub {
font-family: var(--font-ui);
font-size: 0.75rem;
color: var(--text-3);
margin-bottom: 0.5rem;
}
.hp-featured-stats {
font-family: var(--font-ui);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: var(--accent);
margin-bottom: 0.65rem;
line-height: 1.7;
}
.hp-featured-cta {
display: block;
width: 100%;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: 4px;
padding: 5px 0;
font-family: var(--font-brand);
font-size: 0.75rem;
letter-spacing: 0.05em;
cursor: pointer;
text-align: center;
transition: background 0.12s;
}
.hp-featured-cta:hover { background: var(--accent-hi); }
/* Zone 3 — The Registry (v2 — instant search) */
.hp-registry-section {
margin-top: 0.5rem;
}
/* Search bar */
.reg-search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.reg-search-input {
flex: 1;
background: var(--surface) !important;
border: 1px solid rgba(212,168,67,0.25) !important;
border-radius: 5px !important;
color: var(--text) !important;
font-size: 0.85rem !important;
padding: 0.4rem 0.75rem !important;
font-family: var(--font-ui);
transition: border-color 0.15s;
}
.reg-search-input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(212,168,67,0.12) !important;
outline: none !important;
}
.reg-search-input::placeholder { color: var(--text-3) !important; }
.reg-count {
font-size: 0.75rem;
color: var(--text-3);
background: rgba(212,168,67,0.07);
border: 1px solid rgba(212,168,67,0.16);
border-radius: 3px;
padding: 0.12rem 0.4rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
/* Sort pills */
.reg-sort-pills {
display: flex;
gap: 0.22rem;
flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.reg-sort-pill {
font-family: var(--font-ui);
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
border-radius: 3px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.reg-sort-pill:hover { color: var(--text); border-color: rgba(212,168,67,0.4); }
.reg-sort-pill.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
/* Region pills */
.reg-region-pills {
display: flex;
gap: 0.2rem;
flex-wrap: wrap;
margin-bottom: 0.65rem;
}
.reg-region-pill {
font-family: var(--font-ui);
font-size: 0.65rem;
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid rgba(212,168,67,0.12);
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.reg-region-pill:hover { color: var(--text); }
.reg-region-pill.active {
background: rgba(212,168,67,0.12);
color: var(--accent);
border-color: rgba(212,168,67,0.35);
font-weight: 600;
}
/* Grid */
.reg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
}
/* Cards */
.hp-reg-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: all 0.14s ease;
position: relative;
padding: 0.5rem 0.6rem 0.45rem;
}
.hp-reg-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,168,67,0.2);
}
.rc-ghost {
position: absolute;
top: 3px; right: 3px;
pointer-events: none;
user-select: none;
}
.rc-flag-img {
width: 44px;
height: auto;
opacity: 0.55;
object-fit: contain;
display: block;
}
.rc-party-corner {
position: absolute;
bottom: 2px;
right: 3px;
font-size: 0.58rem;
font-weight: 800;
user-select: none;
pointer-events: none;
line-height: 1;
z-index: 2;
}
.rc-body { position: relative; z-index: 1; }
.rc-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.06rem;
}
.rc-abbr {
font-size: 0.58rem;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.1em;
}
.rc-party {
font-size: 0.58rem;
font-weight: 800;
}
.rc-name {
font-family: var(--font-brand);
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.15rem;
}
.rc-metrics {
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
color: var(--text-2);
display: flex;
gap: 0.3rem;
align-items: center;
}
.rc-metrics span { white-space: nowrap; }
.rc-hide { display: none !important; }
/* ── Homepage: View toggle (Grid | Rankings) ────────────────────────────── */
.hp-view-toggle {
display: flex;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.hp-view-btn {
font-family: var(--font-ui);
font-size: 0.75rem;
padding: 4px 14px;
background: transparent;
color: var(--text-3);
border: none;
cursor: pointer;
transition: all 0.12s;
line-height: 1.6;
}
.hp-view-btn.active { background: var(--accent); color: var(--bg); font-weight: 600; }
.hp-view-btn:hover:not(.active) { color: var(--text); }
/* ── Homepage: Rankings list view ───────────────────────────────────────── */
.hp-rankings-list { display: flex; flex-direction: column; gap: 0.28rem; }
.hp-rankings-row {
display: grid;
grid-template-columns: 2.6rem 1fr auto;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.65rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
}
.hp-rankings-row:hover { border-color: var(--accent); background: var(--surface-hi); }
.hp-rankings-rank {
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--accent);
text-align: right;
white-space: nowrap;
opacity: 0.75;
}
.hp-rankings-info { min-width: 0; }
.hp-rankings-name {
font-family: var(--font-brand);
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
display: flex;
align-items: baseline;
gap: 0.4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hp-rankings-abbr {
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 400;
color: var(--text-3);
letter-spacing: 0.08em;
}
.hp-rankings-bar-wrap {
height: 2px;
background: var(--border);
border-radius: 1px;
margin-top: 0.22rem;
}
.hp-rankings-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 1px;
opacity: 0.55;
transition: width 0.3s ease;
}
.hp-rankings-val {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-2);
white-space: nowrap;
text-align: right;
}
/* ── Sidebar feature hover + click indicator ─────────────────────────────── */
[id$="learning_sidebar"] div[onclick],
[id$="learning_sidebar"] li[onclick] {
position: relative;
padding-left: 0.7rem;
padding-right: 1.4rem !important;
transition: all 0.18s ease;
}
[id$="learning_sidebar"] div[onclick]:hover,
[id$="learning_sidebar"] li[onclick]:hover {
box-shadow: inset 4px 0 0 var(--accent), 0 0 8px rgba(212,168,67,0.06);
background: rgba(212,168,67,0.06);
}
/* ⌖ crosshair indicator */
[id$="learning_sidebar"] div[onclick]::after,
[id$="learning_sidebar"] li[onclick]::after {
content: '⌖';
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.65rem;
color: var(--accent);
opacity: 0.3;
transition: opacity 0.15s;
pointer-events: none;
}
[id$="learning_sidebar"] div[onclick]:hover::after,
[id$="learning_sidebar"] li[onclick]:hover::after {
opacity: 1;
}
/* ── Mobile state selector ─────────────────────────────────────────────── */
.mobile-state-bar {
display: none;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.5rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.mobile-state-bar select {
flex: 1;
background: var(--bg) !important;
color: var(--text) !important;
border: 1px solid var(--border-hi) !important;
border-radius: 4px;
padding: 0.35rem 0.5rem;
font-size: 0.85rem;
}
.mobile-state-bar .mobile-label {
font-size: 0.65rem;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
/* ── Compact SOTD (State of the Day) ───────────────────────────────────── */
.hp-sotd-compact:hover {
border-color: rgba(212,168,67,0.5) !important;
}
/* ── Enhanced map polygon hover glow ───────────────────────────────────── */
.leaflet-interactive:hover {
filter: drop-shadow(0 0 4px rgba(212,168,67,0.4));
}
/* ── Profile panel fade-in ────────────────────────────────────────────────── */
[id$="prof_col"] {
transition: opacity 0.3s ease;
}
/* ── Mobile Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
.tab-pane > .d-flex,
.tab-content > .tab-pane > .d-flex { flex-direction: column !important; }
.sb-col { display: none !important; }
/* Mobile state selector bar — visible when sidebar hidden */
.mobile-state-bar { display: flex !important; }
.leaflet.html-widget,
[id$="learning_map"],
[id$="quiz_map"] { height: 40vh !important; max-height: 300px; min-height: 180px; }
[id$="prof_col"] {
max-height: none !important;
flex: none !important;
overflow-y: auto !important;
padding: 0 0.5rem !important;
display: block !important; /* always show profile on mobile */
}
[id$="map_col"] { flex: none !important; width: 100% !important; }
.row > .col-sm-7,
.row > .col-sm-5 { flex: 0 0 100% !important; max-width: 100% !important; }
.scope-switcher { flex-wrap: wrap; gap: 0.2rem; justify-content: center; }
.pill-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
position: relative;
}
.pill-bar::-webkit-scrollbar { display: none; }
.nav-pills {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pills .nav-link { min-height: 36px; display: inline-flex; align-items: center; padding: 5px 12px; font-size: 0.75rem; }
.section-pill,
.scope-pill-btn { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 12px; }
.card-body { padding: 0.7rem !important; }
body > .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
.navbar-brand { font-size: 0.9rem; }
.bc-brand-scope { display: none; }
.navbar .nav-link { font-size: 0.75rem !important; padding: 0.7rem 0.6rem 0.55rem !important; }
.hp-featured-row { grid-template-columns: 1fr; }
.hp-crest-title { font-size: 2.2rem; }
.hp-crest { min-height: 22vh; }
.hp-disc-grid { grid-template-columns: 1fr 1fr; }
.hp-spotlight-inner { flex-direction: column; gap: 0.75rem; }
.hp-spotlight-inner .hp-btn-primary { align-self: flex-start; }
.hp-sotd-compact > div { flex-direction: column !important; gap: 0.5rem !important; }
.hp-sotd-compact > div > div:nth-child(2) { display: none; }
/* State hero banner smaller on mobile */
.state-hero-banner { height: 110px !important; }
/* Profile sections — tighter spacing */
.section-label { font-size: 0.75rem !important; }
/* Compare tab — full-width dropdowns */
.compare-dropdowns { flex-direction: column !important; gap: 0.3rem !important; }
/* Pill fade-mask scrollability hint */
.pill-bar::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 24px;
background: linear-gradient(90deg, transparent, var(--bg));
pointer-events: none;
}
}
@media (max-width: 480px) {
.leaflet.html-widget,
.html-widget[style*="75vh"],
[id$="learning_map"],
[id$="quiz_map"] { height: 45vh !important; max-height: 320px; min-height: 180px; }
.section-pill, .scope-pill-btn { font-size: 0.65rem; padding: 5px 9px; }
.nav-pills .nav-link { font-size: 0.75rem; padding: 4px 9px; letter-spacing: 0.04em; }
.card-body { padding: 0.5rem !important; }
body > .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
body { font-size: 14px; }
.hp-disc-grid { grid-template-columns: 1fr !important; }
.reg-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4rem; }
.reg-sort-pills { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reg-sort-pills::-webkit-scrollbar { display: none; }
.hp-registry-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
}
/* ── State hero banner ───────────────────────────────────────────────────── */
.state-banner {
position: relative; width: 100%; height: 200px;
overflow: hidden; border-radius: 5px; margin-bottom: 1rem;
background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0a0d12 100%);
animation: banner-in 0.35s ease forwards;
}
.state-banner-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.72) saturate(1.15);
}
.state-banner-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom,
rgba(13,17,23,0.15) 0%, rgba(13,17,23,0.55) 55%, rgba(13,17,23,0.88) 100%);
}
.state-banner-ghost {
position: absolute; bottom: -0.1em; right: -0.02em; z-index: 2;
font-family: var(--font-brand); font-size: 5rem; font-weight: 700;
color: rgba(212,168,67,0.07); line-height: 1; pointer-events: none;
white-space: nowrap; letter-spacing: 0.04em;
}
.state-banner-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 0.85rem 1rem; z-index: 3;
}
.state-banner-eyebrow {
font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); opacity: 0.75; margin-bottom: 0.2rem;
}
.state-banner-name {
font-family: var(--font-brand); font-size: 1.6rem; font-weight: 700;
color: #fff; line-height: 1; letter-spacing: 0.02em;
margin-bottom: 0.15rem; text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}
.state-banner-nick {
font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400;
color: var(--accent); margin-bottom: 0.55rem;
}
.state-banner-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.state-chip {
font-family: var(--font-ui); font-size: 0.65rem; font-weight: 500;
padding: 2px 9px; border-radius: 20px;
border: 1px solid rgba(212,168,67,0.45);
color: rgba(230,237,243,0.85); background: rgba(212,168,67,0.12);
white-space: nowrap;
}
@keyframes banner-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Peak Maps Site Switcher ─────────────────────────────────────────────── */
.pm-switcher { position: relative; }
.pm-trigger {
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.7);
font-size: 0.75rem;
font-family: var(--font-ui);
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.pm-trigger:hover {
border-color: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.95);
}
.pm-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
background: #0d1117;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 6px;
z-index: 10000;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.pm-dropdown::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.pm-switcher:hover .pm-dropdown { display: block; }
.pm-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none !important;
border-left: 3px solid transparent;
transition: background 0.12s;
}
.pm-logo { width: 22px; height: 22px; flex-shrink: 0; }
.pm-row-text {
display: flex;
align-items: baseline;
gap: 8px;
flex: 1;
min-width: 0;
}
.pm-name {
font-weight: 600;
font-size: 0.85rem;
color: rgba(255,255,255,0.9) !important;
}
.pm-sub {
font-size: 0.75rem;
color: rgba(255,255,255,0.6) !important;
margin-left: auto;
}
.pm-row-summit { border-left-color: #a78bfa; }
.pm-row-cfb { border-left-color: #f59e0b; }
.pm-row-basecamp { border-left-color: #5dbe8a; }
.pm-row-summit:hover { background: rgba(167,139,250,0.1) !important; }
.pm-row-cfb:hover { background: rgba(245,158,11,0.1) !important; }
.pm-row-basecamp:hover { background: rgba(34,197,94,0.1) !important; }
.pm-row-hub:hover { background: rgba(255,255,255,0.06) !important; }
.pm-current {
background: rgba(34,197,94,0.12);
pointer-events: none;
}
.pm-current .pm-name { color: #5dbe8a !important; }
.pm-row-hub { border-left-color: transparent; }
.pm-row-hub .pm-name { font-weight: 400; font-size: 0.75rem; }
.pm-divider {
border-color: rgba(212,168,67,0.2) !important;
margin: 4px 12px !important;
opacity: 1;
}
@media (max-width: 768px) {
.pm-dropdown { right: -10px; min-width: 230px; }
}
/* ── DataTables v2 dark theme ────────────────────────────────────────────── */
table.dataTable { background: var(--surface) !important; color: var(--text) !important; font-family: var(--font-ui) !important; }
table.dataTable thead th { background: var(--surface-top) !important; color: var(--text-2) !important; border-color: var(--border) !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-ui) !important; }
table.dataTable tbody tr { background: var(--surface) !important; }
table.dataTable tbody tr:hover > * { background: var(--surface-hi) !important; }
table.dataTable tbody td { border-color: var(--border) !important; font-size: 0.85rem; font-family: var(--font-ui) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; border-radius: 3px; font-family: var(--font-ui) !important; }
.dataTables_wrapper .dataTables_info { color: var(--text-3) !important; font-size: 0.75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--accent) !important; color: var(--bg) !important; border-color: var(--accent) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-hi) !important; color: var(--text) !important; }
/* ── Unified card design system (university tab first) ─────────────────── */
.card-name { font-size:1.0rem; font-weight:700 !important; line-height:1.3; display:block; text-align:center; margin:0 0 0.18rem; padding:0.12rem 0.5rem; border-radius:4px; }
.card-meta { font-size:0.74rem; color:var(--text-3); text-align:center; margin:0 0 0.35rem; }
.card-sub { font-size:0.75rem; color:var(--text-2); font-style:normal; margin:0 0 0.2rem;
padding:0.18rem 0.5rem; border-left:2px solid rgba(212,168,67,0.3); }
.card-body { font-size:0.75rem; color:var(--text-2); margin:0 0 0.15rem; }
.card-fine { font-size:0.75rem; color:var(--text-3); margin:0.15rem 0 0; line-height:1.5; }
/* Stat chip row */
.stat-chips { display:flex; gap:0.35rem; justify-content:center; flex-wrap:wrap; margin:0.35rem 0; }
.stat-chip {
display:flex; flex-direction:column; align-items:center;
padding:0.3rem 0.55rem; flex:1; min-width:68px; max-width:110px;
background:var(--surface-hi); border:1px solid var(--border); border-radius:6px;
}
.stat-chip .sc-val { font-family:'Georgia', 'EB Garamond', serif; font-size:1rem; font-weight:700; line-height:1.25; letter-spacing:0.02em; }
.stat-chip .sc-lbl { font-size:0.65rem; font-weight:500; color:var(--text-2); text-transform:uppercase;
letter-spacing:0.06em; margin-top:0.06rem; text-align:center; line-height:1.35; }
.stat-chip .sc-avg { font-size:0.65rem; color:var(--text-3); margin-top:0.02rem; }
/* Major pills */
.major-pills { display:flex; flex-wrap:wrap; gap:0.2rem; margin:0.25rem 0 0.1rem; }
.major-pill { font-size:0.65rem; padding:0.08rem 0.38rem;
background:var(--surface-top); border:1px solid var(--border);
border-radius:10px; color:var(--text-2); }
/* ── Choropleth toggle bar (floating overlay on map) ───────────────────── */
.choro-toggle-bar {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 800;
display: flex;
align-items: center;
gap: 4px;
background: rgba(13, 17, 23, 0.88);
backdrop-filter: blur(8px);
border: 1px solid rgba(212, 168, 67, 0.2);
border-radius: 8px;
padding: 4px 10px;
flex-wrap: nowrap;
}
.choro-bar-label { display: none; }
.choro-btn {
background: transparent; border: 1px solid rgba(212,168,67,0.15);
color: #8b949e; font-size: 0.65rem; font-weight: 600; cursor: pointer;
padding: 3px 8px; border-radius: 12px; letter-spacing: 0.03em;
transition: all 0.15s; white-space: nowrap;
}
.choro-btn:hover { background: rgba(212,168,67,0.08); color: var(--accent); }
.choro-btn.choro-active { background: rgba(212,168,67,0.22); color: var(--accent); border-color: rgba(212,168,67,0.5); }
/* ── σ Chips row (Feature 5) ────────────────────────────────────────────── */
.sigma-chips-row {
display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.4rem 0 0.5rem;
}
.sigma-chip {
display: flex; flex-direction: column; align-items: center;
flex: 1; min-width: 58px; max-width: 90px;
background: var(--surface-hi); border: 1px solid rgba(212,168,67,0.18);
border-radius: 6px; padding: 0.28rem 0.3rem 0.22rem;
}
.sigma-chip .sc-icon { font-size: 0.85rem; line-height: 1.2; }
.sigma-chip .sc-val { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.sigma-chip .sc-lbl { font-size: 0.52rem; color: var(--text-3); text-transform: uppercase;
letter-spacing: 0.04em; margin-top: 0.05rem; text-align: center; }
/* ── DNA Bars ────────────────────────────────────────────────────────────── */
.dna-bars {
margin: 0.3rem 0 0.4rem;
background: rgba(212,168,67,0.04);
border: 1px solid rgba(212,168,67,0.12);
border-radius: 6px;
padding: 0.4rem 0.5rem;
}
.dna-bar-row {
display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.15rem;
}
.dna-bar-row:last-child { margin-bottom: 0; }
.dna-bar-label {
font-size: 0.65rem; font-weight: 500; color: var(--text-2); text-transform: uppercase;
letter-spacing: 0.05em; width: 70px; flex-shrink: 0;
}
.dna-bar-track {
flex: 1; height: 6px; background: rgba(255,255,255,0.08);
border-radius: 3px; overflow: hidden;
}
.dna-bar-fill {
height: 100%; border-radius: 3px; transition: width 0.35s ease;
}
.dna-bar-score {
font-size: 0.65rem; font-weight: 700; width: 22px; text-align: right; flex-shrink: 0;
}
/* ── Salary Converter (Feature 3) ──────────────────────────────────────── */
.salary-converter-row {
background: rgba(212,168,67,0.04); border: 1px solid rgba(212,168,67,0.14);
border-radius: 5px; padding: 0.55rem 0.7rem 0.4rem; margin-bottom: 0.5rem;
}
.salary-result-card {
background: rgba(212,168,67,0.06); border: 1px solid rgba(212,168,67,0.2);
border-radius: 5px; padding: 0.5rem 0.7rem; margin: 0.25rem 0 0.4rem;
}
.salary-chip {
flex: 1; min-width: 100px; padding: 0.3rem 0.5rem;
background: var(--surface-hi); border: 1px solid var(--border); border-radius: 5px;
}
.salary-chip .sc-lbl { font-size: 0.58rem; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.08em; }
.salary-chip .sc-val { font-size: 0.85rem; font-weight: 700; }
.salary-chip-main { border-color: rgba(212,168,67,0.35); }
.sc-val-lg { font-size: 1.05rem !important; }
/* ── Match Tool ──────────────────────────────────────────────────────────── */
@keyframes bar-grow { from { width: 0 } }
@keyframes champ-in { from { opacity:0; transform: translateY(14px) scale(0.97) } }
@keyframes runner-in { from { opacity:0; transform: translateY(10px) } }
.match-container { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; }
/* Section headers within quiz */
.match-section-header {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
color: #d4a843;
margin: 1.4rem 0 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid rgba(212,168,67,0.2);
}
/* Card checked state */
.match-card-checked { background: rgba(212,168,67,0.12) !important; border-color: rgba(212,168,67,0.6) !important; }
.match-card-checked .mc-lbl { color: #d4a843 !important; }
.match-card-checked .mc-icon { color: #d4a843 !important; }
/* Hero */
.match-hero { text-align: center; margin-bottom: 2rem; padding: 1.2rem 1rem 0.5rem; }
.match-hero-badge { display: inline-block; font-size: 0.65rem; font-weight: 800;
letter-spacing: 0.18em; color: #d4a843;
background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.3);
border-radius: 3px; padding: 0.18rem 0.75rem; margin-bottom: 0.75rem; }
.match-hero h2 { font-family: var(--font-brand); font-size: 2rem; font-weight: 700;
color: #e8dcc8; margin-bottom: 0.45rem; letter-spacing: 0.02em; }
.match-hero p { font-size: 0.9rem; color: #8b949e; margin: 0; }
/* Question blocks */
.match-questions { display: flex; flex-direction: column; gap: 1.2rem; }
.match-q-block { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px; padding: 1rem 1.2rem; }
.match-q-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.match-q-icon { font-size: 1.15rem; }
.match-q-label { font-size: 0.75rem; font-weight: 800; color: #d4a843;
letter-spacing: 0.08em; text-transform: uppercase; }
.match-slider-wrap { display: flex; align-items: center; gap: 0.75rem; }
.match-slider-lo, .match-slider-hi {
font-size: 0.75rem; color: #6a7a8a; white-space: nowrap; flex-shrink: 0;
}
/* Ion range slider custom skin */
.match-slider-wrap .irs { font-family: var(--font-ui); }
.match-slider-wrap .irs--shiny .irs-bar { background: var(--accent); border-top: none; border-bottom: none; height: 4px; }
.match-slider-wrap .irs--shiny .irs-line { background: rgba(255,255,255,0.09); border: none; height: 4px; border-radius: 2px; }
.match-slider-wrap .irs--shiny .irs-handle { background: var(--accent); border: 2.5px solid #100e0b; box-shadow: 0 0 10px rgba(212,168,67,0.45); width: 20px; height: 20px; border-radius: 50%; top: 22px; cursor: pointer; }
.match-slider-wrap .irs--shiny .irs-handle:hover,
.match-slider-wrap .irs--shiny .irs-handle.state_hover { background: var(--accent-hi); box-shadow: 0 0 16px rgba(212,168,67,0.65); }
.match-slider-wrap .irs--shiny .irs-min,
.match-slider-wrap .irs--shiny .irs-max { display: none; }
.match-slider-wrap .irs--shiny .irs-single { display: none !important; }
.match-slider-wrap .irs--shiny .irs-from,
.match-slider-wrap .irs--shiny .irs-to { display: none; }
.match-slider-wrap .irs--shiny .irs-grid { display: block !important; }
.match-slider-wrap .irs--shiny .irs-grid-text { color: rgba(232,220,200,0.55); font-size: 0.75rem; font-family: var(--font-ui); }
.match-slider-wrap .irs--shiny .irs-grid-pol { display: none; }
.match-card-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.match-card { display: flex; align-items: center; gap: 0.45rem; cursor: pointer;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px; padding: 0.5rem 1rem;
transition: all 0.14s; }
.match-card:hover { border-color: #d4a843; background: rgba(212,168,67,0.07); }
.match-card input[type=radio] { display: none; }
.match-card:has(input:checked) { background: rgba(212,168,67,0.14);
border-color: #d4a843;
box-shadow: 0 0 0 1px rgba(212,168,67,0.25); }
.mc-icon { font-size: 1.1rem; }
.mc-lbl { font-size: 0.85rem; font-weight: 600; color: #a8b8c8; }
.match-card:has(input:checked) .mc-lbl { color: #d4a843; }
/* CTA */
.match-cta-wrap { text-align: center; padding: 1.8rem 0 0.5rem; }
.match-find-btn {
background: linear-gradient(135deg, rgba(212,168,67,0.2), rgba(212,168,67,0.07));
border: 1.5px solid #d4a843; color: #d4a843;
font-size: 1rem; font-weight: 700; cursor: pointer;
padding: 0.9rem 0; border-radius: 7px; letter-spacing: 0.08em;
width: 100%; max-width: 380px;
transition: all 0.18s; box-shadow: 0 0 22px rgba(212,168,67,0.07);
}
.match-find-btn:hover {
background: linear-gradient(135deg, rgba(212,168,67,0.3), rgba(212,168,67,0.14));
box-shadow: 0 0 32px rgba(212,168,67,0.2); transform: translateY(-1px);
}
.match-btn-arrow { margin-left: 0.6rem; font-size: 1.1rem; }
/* Results wrapper */
.match-results-wrap { max-width: 720px; margin: 0 auto; padding: 1rem 1.5rem 2rem; }
.match-results-header { display: flex; align-items: center; margin-bottom: 1.2rem; }
.match-results-header h3 {
font-family: var(--font-brand); font-size: 1.1rem; font-weight: 700;
color: #e8dcc8; margin: 0;
}
.match-retake-btn {
margin-left: auto; background: transparent;
border: 1px solid rgba(255,255,255,0.12); color: #7a8a9a;
font-size: 0.75rem; font-weight: 600; cursor: pointer;
padding: 0.3rem 0.85rem; border-radius: 4px; transition: all 0.12s;
}
.match-retake-btn:hover { border-color: #d4a843; color: #d4a843; }
/* Champion */
.match-champion {
background: linear-gradient(135deg, rgba(212,168,67,0.13) 0%, rgba(20,16,12,0.5) 70%);
border: 1.5px solid rgba(212,168,67,0.45); border-radius: 12px;
padding: 2rem 2rem 1.6rem; margin-bottom: 0.9rem; text-align: center;
box-shadow: 0 6px 40px rgba(212,168,67,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
animation: champ-in 0.5s ease both;
}
.match-champ-crown { font-size: 2.4rem; margin-bottom: 0.2rem; }
.match-champ-rank { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.22em;
color: #d4a843; margin-bottom: 0.5rem; }
.match-champ-name { font-family: var(--font-brand); font-size: 2rem; font-weight: 700;
color: #e8dcc8; margin-bottom: 0.8rem; }
.match-champ-score { font-size: 3.8rem; font-weight: 900; color: #d4a843; line-height: 1;
font-family: 'Georgia', 'EB Garamond', serif; margin-bottom: 0.2rem; }
.match-champ-label { font-size: 0.75rem; color: #7a8a9a; font-family: sans-serif;
font-weight: 400; margin-left: 0.3rem; vertical-align: middle; }
.match-champ-bar-track { height: 8px; background: rgba(255,255,255,0.06);
border-radius: 4px; overflow: hidden; margin: 1rem 0 0.85rem; }
.match-champ-bar-fill { height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #b8922a, #f0cc6e);
animation: bar-grow 1.1s ease 0.35s both; }
.match-champ-reasons { display: flex; flex-wrap: wrap; gap: 0.5rem;
justify-content: center; margin-bottom: 1.3rem; }
.champ-reason { font-size: 0.85rem; background: rgba(212,168,67,0.13);
border: 1px solid rgba(212,168,67,0.38); border-radius: 5px;
padding: 0.28rem 0.8rem; color: #e8c060; font-weight: 600;
letter-spacing: 0.01em; }
.match-champ-btn {
background: rgba(212,168,67,0.14); border: 1.5px solid #d4a843;
color: #d4a843; font-size: 0.9rem; font-weight: 700; cursor: pointer;
padding: 0.65rem 2.2rem; border-radius: 6px; letter-spacing: 0.04em;
transition: all 0.16s;
}
.match-champ-btn:hover { background: rgba(212,168,67,0.26); transform: translateY(-1px); }
/* Runners-up */
.match-runners-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
margin-bottom: 0.75rem; }
.match-runner { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
border-radius: 9px; padding: 1.1rem 1.2rem;
animation: runner-in 0.45s ease 0.2s both; }
.match-runner-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.match-runner-medal { font-size: 1.25rem; }
.match-runner-rank { font-size: 0.75rem; font-weight: 800; color: #7a8a9a; letter-spacing: 0.1em; }
.match-runner-score { margin-left: auto; font-size: 1.5rem; font-weight: 900;
color: #c8b89a; font-family: 'Georgia', 'EB Garamond', serif; }
.match-runner-name { font-size: 1.05rem; font-weight: 700; color: #e8dcc8; margin-bottom: 0.55rem; }
.match-runner-bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px;
overflow: hidden; margin-bottom: 0.55rem; }
.match-runner-fill { height: 100%; border-radius: 3px; background: #7aaa96;
animation: bar-grow 1s ease 0.5s both; }
.match-runner-reasons { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.runner-reason { font-size: 0.75rem; background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
padding: 0.15rem 0.48rem; color: #b0bec8; font-weight: 500; }
.match-runner-btn {
background: transparent; border: 1px solid rgba(255,255,255,0.14);
color: #8b949e; font-size: 0.75rem; font-weight: 600; cursor: pointer;
padding: 0.28rem 0.75rem; border-radius: 4px; transition: all 0.12s; width: 100%;
}
.match-runner-btn:hover { border-color: #d4a843; color: #d4a843; }
/* Compact list #4-10 */
.match-compact-list { display: flex; flex-direction: column; gap: 0.32rem; margin-top: 0.2rem; }
.match-compact {
display: flex; align-items: center; gap: 0.75rem;
background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px; padding: 0.52rem 0.85rem; transition: border-color 0.12s;
}
.match-compact:hover { border-color: rgba(212,168,67,0.28); }
.mcp-rank { font-size: 0.75rem; font-weight: 800; color: var(--text-3); min-width: 24px; }
.mcp-body { flex: 1; min-width: 0; }
.mcp-name { font-size: 0.86rem; font-weight: 600; color: #c8b89a;
display: block; margin-bottom: 0.22rem; }
.mcp-bar { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.mcp-fill { height: 100%; border-radius: 2px; animation: bar-grow 0.8s ease both; }
.mcp-score { font-size: 0.85rem; font-weight: 700; color: #6a7a8a;
min-width: 36px; text-align: right; }
.mcp-btn { background: transparent; border: none; color: #3a4a5a;
font-size: 0.95rem; cursor: pointer; padding: 0.1rem 0.3rem; transition: color 0.12s; }
.mcp-btn:hover { color: #d4a843; }
/* ── Quiz config screen ──────────────────────────────────────────────── */
.bc-quiz-config-wrap { max-width: 480px; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; }
.bc-quiz-config-hero { text-align: center; margin-bottom: 1.5rem; padding: 1rem 0 0.5rem; }
.bc-quiz-config-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.8; }
.bc-quiz-config-title {
font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700;
color: var(--text); margin-bottom: 0.4rem; letter-spacing: 0.02em;
}
.bc-quiz-config-sub { font-size: 0.85rem; color: var(--text-2); margin: 0; line-height: 1.5; }
.bc-quiz-config-body { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 1.2rem 1.4rem; }
.bc-quiz-config-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; margin-top: 0.8rem; }
.bc-quiz-config-label:first-child { margin-top: 0; }
.bc-quiz-start-btn { width: 100%; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; }
/* ── Results tab header ───────────────────────────────────────────────── */
.bc-res-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(212,168,67,0.2); }
.bc-res-header-icon { font-size: 1.8rem; flex-shrink: 0; opacity: 0.8; }
.bc-res-scope-title { font-family: var(--font-brand); font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 0.1rem; }
.bc-res-scope-hint { font-size: 0.75rem; color: var(--text-2); margin: 0; }
/* ── Leaflet popup — dark theme ─────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
background: #161b22 !important;
border: 1px solid #30363d !important;
border-radius: 7px !important;
box-shadow: 0 6px 22px rgba(0,0,0,0.70) !important;
padding: 0 !important;
}
.leaflet-popup-content {
margin: 0 !important;
color: #e6edf3 !important;
line-height: 1.5 !important;
font-family: var(--font-ui) !important;
}
.leaflet-popup-tip {
background: #161b22 !important;
box-shadow: none !important;
}
.leaflet-popup-tip-container { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }
.leaflet-popup-close-button {
color: #6e7681 !important;
font-size: 18px !important;
padding: 6px 10px !important;
top: 2px !important; right: 6px !important;
line-height: 1 !important;
}
.leaflet-popup-close-button:hover { color: #e6edf3 !important; background: transparent !important; }
/* ── Popup content classes ───────────────────────────────────────────────── */
.map-popup {
font-family: Inter, system-ui, sans-serif;
width: 230px;
padding: 10px 12px 9px;
color: #e6edf3;
font-size: 0.85rem;
}
.map-popup img {
width: 100%; height: 130px; object-fit: cover;
border-radius: 4px; display: block; margin-bottom: 7px;
}
.map-popup-name {
font-weight: 700; font-size: 0.9rem; color: #e8dcc8;
line-height: 1.3; padding-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid #21262d;
}
.map-popup-sub {
font-size: 0.75rem; color: #8b949e; margin-bottom: 5px;
}
.map-popup-badge {
display: inline-block; font-size: 0.60rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: #d4a843; border: 1px solid rgba(212,168,67,0.35);
border-radius: 3px; padding: 1px 5px; margin-bottom: 7px;
}
.map-popup-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 8px; padding: 2px 0; border-bottom: 1px solid #1a2535;
}
.map-popup-row:last-of-type { border-bottom: none; }
.map-popup-label { color: #8b949e; font-size: 0.70rem; flex-shrink: 0; }
.map-popup-value { font-size: 0.79rem; font-weight: 600; text-align: right; }
.map-popup-note {
font-size: 0.75rem; color: #8b949e; font-style: italic;
margin-top: 5px; padding-top: 5px; border-top: 1px solid #21262d;
}
.map-popup-credit { font-size: 0.60rem; color: #555; margin-top: 4px; }
.map-popup-credit a { color: #777; text-decoration: none; }
/* ── Compare empty state: dimension grid ─────────────────────────────────── */
.bc-cmp-empty-dims {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-top: 16px; text-align: left;
}
.bc-cmp-dim-block {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(255,255,255,0.04); border: 1px solid #21262d;
border-radius: 8px; padding: 10px 12px;
transition: border-color 0.2s;
}
.bc-cmp-dim-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.bc-cmp-dim-name {
display: block; font-size: 0.85rem; font-weight: 600;
color: #c9d1d9; line-height: 1.3;
}
.bc-cmp-dim-desc {
display: block; font-size: 0.75rem; color: #8b949e; line-height: 1.35;
}
/* ── Scout expanded panel ────────────────────────────────────────────────── */
.scout-expanded {
border-top: 1px solid #30363d; margin-top: 10px; padding-top: 12px;
animation: scout-slide-down 0.18s ease;
}
@keyframes scout-slide-down {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.scout-exp-section { margin-bottom: 12px; }
.scout-exp-title {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: #8b949e; margin-bottom: 7px;
}
.scout-score-rows { display: flex; flex-direction: column; gap: 5px; }
.scout-score-row {
display: grid; grid-template-columns: 70px 1fr 36px;
align-items: center; gap: 8px;
}
.ssr-label { font-size: 0.75rem; color: #c9d1d9; }
.ssr-bar-track {
height: 6px; background: #21262d; border-radius: 3px; overflow: hidden;
}
.ssr-bar-fill {
height: 100%; background: linear-gradient(90deg, #3d7cf5, #5dbe8a);
border-radius: 3px; transition: width 0.4s ease;
}
.ssr-val { font-size: 0.70rem; color: #8b949e; text-align: right; }
.scout-stat-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.scout-stat-item { text-align: center; }
.ssi-val {
font-size: 0.85rem; font-weight: 700; color: #e8dcc8; line-height: 1.2;
}
.ssi-label { font-size: 0.65rem; color: #8b949e; margin-top: 2px; }
.scout-exp-actions {
display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
.scout-collapse-btn {
background: transparent; border: 1px solid #30363d; color: #8b949e;
border-radius: 5px; padding: 5px 12px; font-size: 0.75rem;
cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.scout-collapse-btn:hover { border-color: #8b949e; color: #c9d1d9; }
.scout-expand-btn {
background: transparent; border: 1px solid #30363d; color: #8b949e;
border-radius: 5px; padding: 5px 12px; font-size: 0.75rem;
cursor: pointer; transition: border-color 0.15s, color 0.15s;
margin-top: 8px;
}
.scout-expand-btn:hover { border-color: #d4a843; color: #d4a843; }
/* ── Results: Score Hero ────────────────────────────────────────────────── */
.bc-res-score-hero {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.bc-res-score-big {
font-size: 2.4rem; font-weight: 700; color: var(--accent);
font-family: var(--font-brand); line-height: 1;
}
.bc-res-score-detail { color: var(--text-2); font-size: 0.85rem; }
.bc-res-section-title {
font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px;
}
/* ── Results: Per-type accuracy grid ───────────────────────────────────── */
.bc-res-type-grid {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.bc-res-type-cell {
background: var(--surface-hi); border: 1px solid var(--border);
border-radius: 6px; padding: 8px 12px; min-width: 100px;
text-align: center;
}
.bc-res-type-cell-pct {
font-size: 1.1rem; font-weight: 700; font-family: var(--font-brand);
}
.bc-res-type-cell-label {
font-size: 0.75rem; color: var(--text-2); margin-top: 2px;
}
.bc-res-type-cell-detail {
font-size: 0.65rem; color: var(--text-3); margin-top: 1px;
}
/* ── Results: Answer review rows ───────────────────────────────────────── */
.bc-res-review-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 10px; border-left: 3px solid transparent;
border-radius: 3px; margin-bottom: 4px;
}
.bc-res-review-correct { border-left-color: #3a8a6a; background: rgba(58,138,106,0.06); }
.bc-res-review-wrong { border-left-color: #c0392b; background: rgba(192,57,43,0.06); }
.bc-res-review-icon {
font-weight: 700; font-size: 0.85rem; flex-shrink: 0; width: 18px; text-align: center;
}
.bc-res-review-correct .bc-res-review-icon { color: #3a8a6a; }
.bc-res-review-wrong .bc-res-review-icon { color: #c0392b; }
.bc-res-review-q { font-size: 0.85rem; color: var(--text); }
.bc-res-review-a { font-size: 0.75rem; color: var(--text-2); margin-top: 2px; }
.bc-res-review-picked { color: var(--text-3); }
.bc-res-review-picked s { color: #c0392b; }
/* ── Results: Missed state chip-cards ──────────────────────────────────── */
.bc-res-missed-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-res-missed-card {
background: var(--surface-hi); border: 1px solid var(--border);
color: var(--text); font-size: 0.75rem; font-family: var(--font-body);
padding: 6px 14px; border-radius: 16px; cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bc-res-missed-card:hover {
border-color: var(--accent); color: var(--accent);
background: var(--accent-dim);
}
/* ── Results: Chart wrapper ────────────────────────────────────────────── */
.bc-res-chart-wrap {
margin-bottom: 16px; padding: 12px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 6px;
}
/* ── Compare section filter ─────────────────────────────────────────────── */
.bc-cmp-filter-row {
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 10px 1rem 4px;
}
.bc-cmp-filter-label {
font-size: 0.85rem; color: #8b949e; font-weight: 600;
letter-spacing: 0.03em; flex-shrink: 0;
}
.bc-cmp-filter-row .form-group { margin-bottom: 0; flex: 1; max-width: 220px; }
@media (max-width: 768px) {
.bc-cmp-filter-row { padding: 8px 0.5rem 2px; gap: 8px; }
.bc-cmp-filter-row .form-group { max-width: none; }
.bc-cmp-arena { padding: 0.6rem 0.5rem 0.5rem; }
.bc-cmp-vs-badge { width: 36px; padding-top: 0.8rem; }
.bc-cmp-vs-text { width: 30px; height: 30px; font-size: 0.65rem; }
.bc-cmp-body { padding: 0 0.4rem 0.6rem; }
.bc-cmp-salary { padding: 0 0.4rem 0.2rem; }
.cmp-entity-name { font-size: 0.75rem; }
.cmp-cell { font-size: 0.75rem; }
.cmp-label { font-size: 0.65rem; }
.cmp-sec-head { font-size: 0.65rem; padding: 0.2rem 0.4rem; }
.cmp-natl-tag { font-size: 0.65rem; }
.cmp-lead-banner { font-size: 0.75rem; padding: 0.25rem 0.3rem; }
}
@media (max-width: 480px) {
.bc-cmp-filter-row { flex-direction: column; gap: 2px; padding: 6px 0.4rem 2px; }
.bc-cmp-filter-label { font-size: 0.75rem; }
.bc-cmp-arena { flex-wrap: wrap; justify-content: center; gap: 0; padding: 0.4rem 0.3rem; }
.bc-cmp-pick { flex: 0 0 42%; min-width: 0; }
.bc-cmp-vs-badge { width: 28px; padding-top: 0.6rem; }
.bc-cmp-vs-text { width: 26px; height: 26px; font-size: 0.65rem; border-width: 1.5px; }
.bc-cmp-pick-label { font-size: 0.65rem; }
.cmp-entity-name { font-size: 0.75rem; word-break: break-word; }
.cmp-cell { font-size: 0.75rem; }
.cmp-label { font-size: 0.65rem; }
.cmp-col-right { padding-right: 0.2rem; }
.cmp-col-left { padding-left: 0.2rem; }
.cmp-col-center { padding: 0; }
}
/* ============================================================================
MOBILE RESPONSIVENESS FIXES — 375px (iPhone SE) pass
============================================================================ */
/* ── Section label: allow wrap on very narrow screens ── */
@media (max-width: 480px) {
.section-label {
white-space: normal !important;
overflow: visible !important;
}
}
/* ── Atlas profile: ensure the 12-section panel scrolls freely ── */
@media (max-width: 576px) {
[id$="prof_col"] {
-webkit-overflow-scrolling: touch;
}
/* DL pairs in profile: stack term/definition */
.profile-list { padding-left: 0.8rem; }
}
/* ── Homepage featured dossiers: stack at 576px (already 768px handled) ── */
@media (max-width: 576px) {
.hp-featured-row { grid-template-columns: 1fr; }
.hp-featured-img-wrap { height: 120px; }
}
/* ── Rankings power row: touch-friendly expand target ── */
@media (max-width: 767.98px) {
.bc-power-row {
min-height: 44px;
cursor: pointer;
}
}
/* ── Versus tab: ensure comparison arena stacks fully at 375px ── */
@media (max-width: 375px) {
.bc-cmp-pick { flex: 0 0 100% !important; }
.bc-cmp-vs-badge { display: none; }
.bc-cmp-arena { flex-direction: column; gap: 4px !important; }
}
/* ── Tables: horizontal scroll on mobile ── */
@media (max-width: 576px) {
table.dataTable { overflow-x: auto; display: block; }
.dataTables_wrapper { overflow-x: auto; }
}
/* ── Legal footer ───────────────────────────────────────────────────────── */
.bc-legal-footer {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
background: rgba(13,17,23,0.92); backdrop-filter: blur(6px);
border-top: 1px solid rgba(212,168,67,0.18);
color: #8b949e; font-size: 0.75rem; text-align: center;
padding: 5px 16px; letter-spacing: 0.02em;
font-family: var(--font-ui);
line-height: 1.4;
}
@media (max-width: 480px) {
.bc-legal-footer {
font-size: 0.62rem;
padding: 4px 10px;
letter-spacing: 0;
}
}
/* ── Disconnect overlay ─────────────────────────────────────────────────── */
#shiny-disconnected-overlay {
background: #100e0bee !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: system-ui, sans-serif;
z-index: 99998 !important;
}
#shiny-disconnected-overlay::before {
content: 'Connection lost';
font-size: 1.4rem;
font-weight: 600;
color: #d4a843;
margin-bottom: 0.5rem;
}
#shiny-disconnected-overlay::after {
content: 'Attempting to reconnect\2026';
font-size: 0.9rem;
color: #e8dcc8;
opacity: 0.7;
}
/* ── Accessibility ──────────────────────────────────────────────────────── */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-to-content {
position: absolute; top: -100%; left: 16px; z-index: 100000;
padding: 8px 16px; background: #d4a843; color: #100e0b;
border-radius: 0 0 6px 6px; font-weight: 600; font-size: 0.9rem;
text-decoration: none; transition: top 0.2s ease;
}
.skip-to-content:focus { top: 0; }
/* ── Mobile tap targets (44px minimum per WCAG 2.5.5) ──────────────────── */
@media (max-width: 767.98px) {
.nav-pills .nav-link, .nav-tabs .nav-link { min-height: 44px; padding: 10px 16px; }
.navbar-nav .nav-link { min-height: 44px; }
.btn, .btn-sm { min-height: 44px; }
.dropdown-item { min-height: 44px; padding: 10px 16px; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.form-check-input { width: 20px; height: 20px; }
.form-check-label { min-height: 44px; display: flex; align-items: center; }
}
/* ── Overflow-x prevention ────────────────────────────────────────────────── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
/* ── dvh support for Safari mobile ───────────────────────────────────────── */
@supports (height: 100dvh) {
.tab-pane > div[style*="max-height"] {
max-height: calc(100dvh - 96px) !important;
}
}
/* ── 480px mobile fixes Round 2 ──────────────────────────────────────── */
@media (max-width: 480px) {
[id$="county_map"], [id$="county_map"] .leaflet.html-widget {
height: 40vh !important; min-height: 250px !important;
}
.bc-cmp-pick { flex: 0 0 100% !important; margin-bottom: 0.4rem; }
.bc-cmp-filter-row { flex-direction: column !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
Basecamp Component System
─────────────────────────────────────────────────────────────────────────
Every visual element maps to a class here. R code should NEVER contain
inline style= strings — only class names. To change how anything looks,
edit THIS file, not R code.
══════════════════════════════════════════════════════════════════════════ */
/* ── 0. Scroll-reveal animations ────────────────────────────────────────── */
.bc-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.bc-reveal.bc-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays for sibling elements */
.bc-reveal.bc-delay-1 { transition-delay: 0.08s; }
.bc-reveal.bc-delay-2 { transition-delay: 0.16s; }
.bc-reveal.bc-delay-3 { transition-delay: 0.24s; }
.bc-reveal.bc-delay-4 { transition-delay: 0.32s; }
.bc-reveal.bc-delay-5 { transition-delay: 0.40s; }
/* Gauge bar fill animation */
.mv-gauge-fill {
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* Gauge fill: don't override inline width — the bc-reveal animation was blocking fills */
/* Tab content fade-in */
.tab-pane.active {
animation: bc-fade-in 0.25s ease both;
}
@keyframes bc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── 0b. Global hover & interaction polish ─────────────────────────────── */
[onclick],
[data-onclick],
.bc-card-click,
.section-pill,
.choro-btn,
.mv-nb-row:not(.mv-nb-target) {
cursor: pointer;
}
/* Focus-visible for keyboard nav */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Smooth hover lift for all interactive cards */
.bc-card {
transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.bc-card:hover {
transform: translateY(-1px);
}
/* Profile section body — subtle card wrap for each section's content */
.profile-section-body {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.1rem;
margin-bottom: 1rem;
}
/* ── 1. Section headings ─────────────────────────────────────────────────── */
.bc-section {
font-weight: 700;
font-size: 0.85rem;
font-family: var(--font-ui);
color: var(--text);
margin-bottom: 0.4rem;
margin-top: 0.5rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bc-section-sm {
font-weight: 600;
font-size: 0.75rem;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.3rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* ── 2. Definition list rows (label: value) ──────────────────────────────── */
.bc-dl {
font-size: 0.85rem;
margin-bottom: 0.5rem;
row-gap: 0.15rem;
}
.bc-dl dt { color: var(--text-2); }
.bc-dl dd { color: var(--text); }
/* ── 3. Stat display (number + label) ────────────────────────────────────── */
.bc-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
min-width: 0;
padding: 0.4rem 0.15rem;
}
.bc-stat-val {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
color: var(--text);
letter-spacing: 0.02em;
}
.bc-stat-sigma {
font-size: 0.65rem;
font-weight: 500;
opacity: 0.8;
margin-top: 1px;
white-space: nowrap;
color: var(--text-2);
}
.bc-stat-lbl {
font-size: 0.65rem;
font-weight: 500;
color: var(--text-2);
letter-spacing: 0.09em;
text-transform: uppercase;
margin-bottom: 0.12rem;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bc-stat-div {
width: 1px;
background: var(--accent-dim);
align-self: stretch;
}
/* ── 4. Cards ────────────────────────────────────────────────────────────── */
.bc-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
transition: border-color 0.15s, box-shadow 0.2s;
box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
}
.bc-card:hover { border-color: rgba(212,168,67,0.4); }
.bc-card-accent {
border-left: 4px solid var(--accent-hi);
}
.bc-card-click {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.bc-card-click:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,168,67,0.2);
border-color: rgba(212,168,67,0.3) !important;
}
.bc-card-click:active {
transform: translateY(0) scale(0.99);
transition: transform 0.08s;
}
/* ── 5. Insight / synthesis cards ────────────────────────────────────────── */
.bc-insight {
background: linear-gradient(135deg, var(--accent-dim) 0%, var(--surface) 100%);
border: 1px solid rgba(212,168,67,0.25);
border-left: 4px solid var(--accent-hi);
border-radius: 5px;
padding: 0.6rem 0.75rem;
margin-bottom: 0.4rem;
}
.bc-insight-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.35rem;
line-height: 1.4;
}
.bc-insight-list {
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.bc-insight-pro { font-size: 0.75rem; color: #5dbe8a; line-height: 1.45; }
.bc-insight-con { font-size: 0.75rem; color: #d47a7a; line-height: 1.45; }
.bc-insight-note { font-size: 0.75rem; color: #8b949e; line-height: 1.45; }
/* ── 6. Narrative / description text ─────────────────────────────────────── */
.bc-narrative {
font-size: 0.85rem;
color: var(--text-2);
margin-bottom: 0.6rem;
font-style: italic;
line-height: 1.5;
}
.bc-overview {
font-size: 0.85rem;
color: var(--text-2);
margin-bottom: 0.8rem;
line-height: 1.5;
}
/* ── 7. Tables ───────────────────────────────────────────────────────────── */
.bc-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
margin-bottom: 0.4rem;
}
.bc-table th {
text-align: left;
color: var(--text-2);
padding: 0.1rem 0.4rem 0.2rem 0;
border-bottom: 1px solid var(--accent);
white-space: nowrap;
font-weight: 600;
}
.bc-table td {
padding: 0.2rem 0.4rem 0.2rem 0;
border-bottom: 1px solid var(--border);
}
.bc-table td:last-child { padding-right: 0; }
.bc-table-val { font-weight: 600; }
.bc-table-muted { font-size: 0.75rem; color: var(--text-2); }
/* ── 8. Timeline ─────────────────────────────────────────────────────────── */
.bc-timeline {
position: relative;
padding-left: 0;
}
.bc-tl-event {
display: flex;
gap: 0;
margin-bottom: 0;
position: relative;
}
.bc-tl-year {
width: 3.5rem;
flex-shrink: 0;
text-align: right;
padding-right: 0.6rem;
position: relative;
}
.bc-tl-year-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent);
font-family: var(--font-brand);
}
.bc-tl-dot {
position: absolute;
right: -5px;
top: 4px;
width: 10px;
height: 10px;
background: var(--accent);
border-radius: 50%;
border: 2px solid var(--bg);
z-index: 1;
}
.bc-tl-line {
position: absolute;
left: calc(3.5rem - 1px);
top: 14px;
bottom: -1px;
width: 2px;
background: var(--accent-dim);
}
.bc-tl-content {
flex: 1;
min-width: 0;
padding-bottom: 1rem;
padding-left: 0.5rem;
}
.bc-tl-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
line-height: 1.35;
}
.bc-tl-desc {
font-size: 0.75rem;
color: var(--text-2);
margin-top: 0.15rem;
line-height: 1.45;
}
.bc-tl-places {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.2rem;
}
.bc-tl-place {
font-size: 0.65rem;
color: var(--accent);
border: 1px solid rgba(212,168,67,0.3);
border-radius: 3px;
padding: 0.08rem 0.35rem;
cursor: pointer;
transition: background 0.12s;
}
.bc-tl-place:hover { background: var(--accent-dim); }
/* ── 9. Spotlight / feature rows ─────────────────────────────────────────── */
.bc-spotlight {
border-left: 3px solid var(--accent);
padding: 0.35rem 0 0.35rem 0.65rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: background 0.1s;
}
.bc-spotlight:hover { background: rgba(212,168,67,0.04); }
.bc-spotlight-county {
font-size: 0.75rem;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 0.04rem;
}
.bc-spotlight-brand {
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
font-family: var(--font-brand);
line-height: 1.2;
}
.bc-spotlight-tagline {
font-size: 0.75rem;
color: var(--text-2);
font-style: italic;
margin: 0.12rem 0;
line-height: 1.35;
}
.bc-spotlight-stat {
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
}
/* ── 10. City rows ───────────────────────────────────────────────────────── */
.bc-city-row {
margin-bottom: 0.65rem;
padding-left: 0.55rem;
border-left: 2.5px solid var(--accent);
transition: background 0.1s;
cursor: pointer;
}
.bc-city-row:hover { background: rgba(212,168,67,0.04); }
.bc-city-name {
font-weight: 700;
font-size: 0.9rem;
color: var(--text);
}
.bc-city-cap {
font-size: 0.65rem;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 0.3rem;
}
.bc-city-pop {
font-size: 0.75rem;
color: var(--text-2);
font-weight: 600;
margin-left: 0.35rem;
}
.bc-city-desc {
font-size: 0.75rem;
color: var(--text-2);
font-style: italic;
line-height: 1.4;
margin-top: 0.12rem;
}
/* ── 11. Buttons & links ─────────────────────────────────────────────────── */
.bc-btn {
display: inline-block;
font-size: 0.75rem;
color: var(--accent);
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(212,168,67,0.3);
border-radius: 3px;
padding: 0.15rem 0.5rem;
transition: background 0.12s;
cursor: pointer;
background: transparent;
}
.bc-btn:hover { background: var(--accent-dim); }
.bc-btn-primary {
background: rgba(212,168,67,0.1);
border-color: rgba(212,168,67,0.45);
}
/* ── 12. Badges ──────────────────────────────────────────────────────────── */
.bc-badge {
font-size: 0.65rem;
font-weight: 600;
padding: 0.08rem 0.35rem;
border-radius: 3px;
white-space: nowrap;
}
.bc-badge-r { color: #fff; background: #9a1a1a; }
.bc-badge-d { color: #fff; background: #1a4a9a; }
.bc-badge-i { color: #fff; background: #2a7a3a; }
/* ── 13. Hazard risk colors ──────────────────────────────────────────────── */
.bc-risk-high { color: #c0392b; font-weight: 600; }
.bc-risk-moderate { color: #e67e22; font-weight: 600; }
.bc-risk-low { color: #f0a500; font-weight: 600; }
.bc-risk-default { color: var(--text-2); font-weight: 600; }
/* ── 14. Comparison metric colors ────────────────────────────────────────── */
.bc-good { color: #4a8a4a; }
.bc-bad { color: #c0392b; }
.bc-neutral { color: var(--accent); }
/* ── 15. Growth / trend indicators ───────────────────────────────────────── */
.bc-trend-box {
background: var(--accent-dim);
border: 1px solid rgba(212,168,67,0.18);
border-radius: 4px;
padding: 0.45rem 0.6rem;
margin-bottom: 0.5rem;
}
.bc-trend-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
}
.bc-trend-pct {
font-size: 0.85rem;
font-weight: 700;
}
.bc-trend-label {
font-size: 0.75rem;
color: var(--text-2);
}
.bc-trend-detail {
font-size: 0.75rem;
color: var(--text-3);
}
.bc-trend-sub {
font-size: 0.75rem;
color: var(--text-3);
margin-top: 0.15rem;
}
.bc-trend-up { color: #5dbe8a; }
.bc-trend-flat { color: var(--accent); }
.bc-trend-down { color: #d47a7a; }
/* ── 16. Map overlay / welcome banner ────────────────────────────────────── */
.bc-map-banner {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(13,17,23,0.93);
border-bottom: 1px solid rgba(56,189,248,0.22);
padding: 0.55rem 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-ui);
pointer-events: none;
gap: 1rem;
}
.bc-map-brand {
font-size: 0.65rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
}
.bc-map-title {
font-size: 0.9rem;
font-weight: 600;
color: #c9d1d9;
}
.bc-map-chips {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: center;
flex: 1;
}
.bc-map-chip {
font-size: 0.66rem;
border-radius: 3px;
padding: 0.13rem 0.45rem;
}
.bc-map-chip-gold {
background: rgba(212,168,67,0.1);
border: 1px solid rgba(212,168,67,0.28);
color: var(--accent);
}
.bc-map-chip-cyan {
background: rgba(34,211,238,0.1);
border: 1px solid rgba(34,211,238,0.28);
color: #22d3ee;
}
.bc-map-chip-amber {
background: rgba(251,191,36,0.1);
border: 1px solid rgba(251,191,36,0.28);
color: #fbbf24;
}
.bc-map-hint {
font-size: 0.75rem;
color: var(--text-3);
flex-shrink: 0;
white-space: nowrap;
}
/* ── 17. Hero banner (state profile) ─────────────────────────────────────── */
.bc-hero {
position: relative;
width: 100%;
height: 148px;
overflow: hidden;
border-radius: 6px;
margin-bottom: 0.45rem;
flex-shrink: 0;
}
.bc-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.bc-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(26,20,16,0.08) 0%, rgba(26,20,16,0.72) 100%);
}
.bc-hero-flag-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(26,20,16,0.02) 0%, rgba(26,20,16,0.65) 100%);
}
.bc-hero-text {
position: absolute;
bottom: 0.55rem;
left: 0.75rem;
right: 0.5rem;
}
.bc-hero-text-flex {
position: absolute;
bottom: 0.55rem;
left: 0.75rem;
right: 0.5rem;
display: flex;
align-items: flex-end;
gap: 0.6rem;
}
.bc-hero-name {
font-family: var(--font-brand);
font-size: 1.2rem;
font-weight: 400;
color: var(--text);
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
letter-spacing: 0.02em;
}
.bc-hero-tagline {
font-size: 0.67rem;
color: rgba(232,220,200,0.75);
font-style: italic;
margin-top: 0.1rem;
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.bc-hero-flag-badge {
height: 38px;
width: auto;
object-fit: contain;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
flex-shrink: 0;
}
.bc-hero-flag-ghost {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.15;
}
.bc-hero-flag-ghost img {
height: 120px;
width: auto;
object-fit: contain;
}
/* ── 18. Home page layout ────────────────────────────────────────────────── */
.bc-home {
max-width: 860px;
margin: 0 auto;
padding: 1.5rem 1.5rem 3rem;
font-family: var(--font-ui);
}
.bc-home-hero {
text-align: center;
padding-bottom: 1.1rem;
margin-bottom: 1.1rem;
border-bottom: none;
position: relative;
}
.bc-home-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,168,67,0.5), transparent);
}
.bc-home-title {
font-family: var(--font-brand);
font-size: 2.2rem;
font-weight: 400;
color: var(--accent);
letter-spacing: 0.08em;
margin: 0 0 0.18rem;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.bc-home-sub {
font-family: var(--font-brand);
font-size: 0.95rem;
color: var(--text-2);
margin: 0 0 0.65rem;
font-style: normal;
}
/* Hero stats strip */
.hp-hero-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.9rem;
flex-wrap: wrap;
}
.hp-hero-stat {
font-family: var(--font-head);
font-size: 0.9rem;
font-weight: 600;
color: var(--accent);
}
.hp-hero-unit {
font-weight: 400;
color: var(--text-2);
font-size: 0.75rem;
}
.hp-hero-dot {
color: var(--text-3);
font-size: 0.75rem;
}
/* Card data teasers */
.hp-card-teaser {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.4rem;
border-top: 1px solid rgba(255,255,255,0.04);
font-size: 0.75rem;
}
.hp-teaser-label {
color: var(--text-3);
font-weight: 500;
white-space: nowrap;
}
.hp-teaser-val {
color: var(--accent);
font-weight: 600;
font-family: var(--font-head);
}
/* ── 19. Compact SOTD ────────────────────────────────────────────────────── */
.bc-sotd {
margin-bottom: 1.5rem;
cursor: pointer;
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: 8px;
padding: 1rem 1.4rem;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.bc-sotd:hover {
border-color: rgba(212,168,67,0.5);
box-shadow: 0 4px 24px rgba(212,168,67,0.15), 0 2px 16px rgba(0,0,0,0.3);
transform: translateY(-2px);
}
.bc-sotd-inner {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.bc-sotd-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 0.12rem;
color: var(--accent) !important;
}
.bc-sotd-name {
font-family: var(--font-brand);
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
letter-spacing: 0.08em;
line-height: 1;
}
.bc-sotd-sub {
font-size: 0.65rem;
color: var(--text-2);
margin-top: 0.1rem;
}
.bc-sotd-div {
width: 1px;
align-self: stretch;
min-height: 2.2rem;
}
.bc-sotd-stats {
display: flex;
flex: 1;
min-width: 0;
gap: 0.5rem;
}
.bc-sotd-cta {
flex-shrink: 0;
font-size: 0.65rem;
font-weight: 600;
}
/* ── 20. Energy / infrastructure ─────────────────────────────────────────── */
.bc-energy-bar {
display: flex;
height: 14px;
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.3rem;
}
.bc-energy-segment {
height: 100%;
min-width: 2px;
transition: width 0.3s;
}
.bc-energy-legend {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.75rem;
color: var(--text-2);
}
.bc-energy-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 0.2rem;
vertical-align: middle;
}
/* ── 21. Utility classes ─────────────────────────────────────────────────── */
.bc-muted { color: var(--text-2) !important; }
.bc-accent { color: var(--accent) !important; }
.bc-bold { font-weight: 700; }
.bc-italic { font-style: italic; }
.bc-small { font-size: 0.75rem; }
.bc-tiny { font-size: 0.75rem; }
.bc-nowrap { white-space: nowrap; }
.bc-flex { display: flex; }
.bc-flex-col { display: flex; flex-direction: column; }
.bc-gap-sm { gap: 0.25rem; }
.bc-gap-md { gap: 0.5rem; }
.bc-gap-lg { gap: 1rem; }
.bc-center { text-align: center; }
.bc-mb-sm { margin-bottom: 0.3rem; }
.bc-mb-md { margin-bottom: 0.6rem; }
.bc-mt-sm { margin-top: 0.3rem; }
.bc-mt-md { margin-top: 0.5rem; }
.bc-flex-wrap { flex-wrap: wrap; }
.bc-flex-1 { flex: 1; min-width: 0; }
.bc-flex-shrink-0 { flex-shrink: 0; }
.bc-align-baseline { align-items: baseline; }
.bc-align-start { align-items: flex-start; }
.bc-align-center { align-items: center; }
.bc-block { display: block; }
.bc-cursor { cursor: pointer; }
.bc-semi { font-weight: 600; }
.bc-text-xs { font-size: 0.65rem; }
.bc-text-sm { font-size: 0.75rem; }
.bc-text-md { font-size: 0.85rem; }
.bc-text-base { font-size: 0.86rem; }
.bc-text-lg { font-size: 0.9rem; }
/* ── 23. Rank badge ────────────────────────────────────────────────────── */
.bc-rank-badge {
font-size: 0.65rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
margin-left: 0.3rem;
vertical-align: middle;
white-space: nowrap;
}
/* ── 24. Carousel overrides ────────────────────────────────────────────── */
.bc-carousel {
margin-top: 0.35rem;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--accent);
}
.bc-carousel-img {
height: 155px;
object-fit: cover;
}
.bc-carousel-caption {
background: rgba(26,20,16,0.7);
padding: 0.15rem 0.5rem;
bottom: 0;
left: 0;
right: 0;
text-align: left;
border-radius: 0;
}
.bc-carousel-credit {
color: var(--text-2);
margin-left: 0.35rem;
}
.bc-carousel-dot {
background: var(--accent) !important;
}
/* ── 25. Sources ───────────────────────────────────────────────────────── */
.bc-sources-hr {
border-color: var(--accent);
margin: 0.9rem 0 0.4rem;
opacity: 0.5;
}
.bc-source-list {
padding-left: 1.1rem;
margin: 0;
}
.bc-source-list li {
margin-bottom: 0.15rem;
}
.bc-source-link {
color: var(--text-2);
font-size: 0.75rem;
text-decoration: none;
}
.bc-src-note {
font-size: 0.65rem;
color: #6e7681;
margin: 0.1rem 0 0.35rem;
font-style: italic;
}
/* ── 26. Profile header ────────────────────────────────────────────────── */
.bc-profile-name {
color: var(--accent);
font-family: var(--font-brand);
font-size: 1.1rem;
letter-spacing: 0.02em;
margin-bottom: 0.15rem;
}
.bc-profile-name-clickable {
cursor: pointer;
user-select: none;
text-decoration: underline;
text-underline-offset: 3px;
}
.bc-profile-hr {
border-color: #30363d;
margin: 0.6rem 0;
}
.bc-map-sym {
color: rgba(56,189,248,0.58);
font-size: 0.65rem;
margin-right: 0.14rem;
vertical-align: middle;
}
/* ── 27. City population section ───────────────────────────────────────── */
.bc-peak-note {
font-size: 0.75rem;
color: var(--text-3);
font-style: italic;
margin-left: 0.35rem;
}
.bc-city-title {
font-size: 0.90rem;
font-weight: 700;
color: var(--accent);
}
.bc-capital-badge {
font-size: 0.75rem;
color: var(--text-2);
font-style: italic;
}
.bc-arrow-marker {
color: var(--accent);
font-size: 0.75rem;
margin-right: 0.3rem;
flex-shrink: 0;
margin-top: 0.05rem;
}
.bc-demo-label {
font-size: 0.75rem;
color: var(--text-2);
display: block;
margin-bottom: 0.03rem;
font-weight: 600;
}
.bc-demo-list {
padding-left: 0.6rem;
margin: 0;
}
.bc-demo-item {
font-size: 0.70rem;
margin-bottom: 0.02rem;
list-style: none;
}
.bc-pop-trend-table {
border-collapse: collapse;
margin: 0.1rem 0 0.4rem 0.1rem;
}
.bc-pop-trend-lbl {
font-size: 0.75rem;
color: var(--text-2);
padding-right: 0.6rem;
white-space: nowrap;
}
.bc-pop-trend-val {
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
}
.bc-discover-empty {
color: #8a7a64;
padding: 2.5rem;
text-align: center;
font-style: italic;
}
.bc-place-link {
cursor: pointer;
border-bottom: 1px dotted var(--accent);
color: inherit;
}
.bc-ethnicity-item {
font-size: 0.85rem;
}
/* ── 28. Home feature cards ─────────────────────────────────────────────── */
.bc-hcard {
background: #1a1810;
padding: 1rem;
justify-content: space-between;
}
.bc-hcard-hr {
border-color: rgba(212,168,67,0.15);
margin: 0.25rem 0 0.55rem;
}
.bc-hcard-body {
font-size: 0.79rem;
color: #c8b89a;
margin: 0;
line-height: 1.6;
font-family: var(--font-brand);
font-weight: 400;
font-style: italic;
}
.bc-hcard-btn {
margin-top: 0.85rem;
align-self: flex-start;
}
/* ── 29. Compare tab ───────────────────────────────────────────────────── */
.bc-cmp-header {
padding: 0.7rem 1.2rem 0.5rem;
border-bottom: 1px solid rgba(212,168,67,0.2);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(212,168,67,0.04) 0%, transparent 100%);
}
.bc-cmp-header h5 {
color: var(--accent);
margin: 0;
font-family: var(--font-brand);
font-size: 1.05rem;
letter-spacing: 0.03em;
}
.bc-cmp-pills {
display: flex;
gap: 0.3rem;
}
/* ── Compare arena layout ──────────────────────────────────────────────── */
.bc-cmp-arena {
display: flex;
align-items: flex-start;
gap: 0;
padding: 1rem 1.2rem 0.8rem;
position: relative;
}
.bc-cmp-pick {
flex: 1;
min-width: 0;
}
.bc-cmp-pick-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.15rem;
display: block;
text-align: center;
}
.bc-cmp-pick .shiny-input-container {
margin-bottom: 0 !important;
}
.bc-cmp-pick .selectize-input {
text-align: center;
}
.bc-cmp-vs-badge {
flex-shrink: 0;
width: 52px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1.1rem;
}
.bc-cmp-vs-text {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212,168,67,0.2) 0%, rgba(212,168,67,0.05) 100%);
border: 2px solid var(--accent);
color: var(--accent);
font-family: var(--font-brand);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
box-shadow: 0 0 20px rgba(212,168,67,0.15), inset 0 0 8px rgba(212,168,67,0.1);
animation: vs-pulse 2.5s ease-in-out infinite;
}
@keyframes vs-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(212,168,67,0.15), inset 0 0 8px rgba(212,168,67,0.1); }
50% { box-shadow: 0 0 30px rgba(212,168,67,0.3), inset 0 0 12px rgba(212,168,67,0.15); }
}
/* ── Compare empty state ───────────────────────────────────────────────── */
.bc-cmp-empty {
text-align: center;
padding: 2.5rem 1.5rem 2rem;
animation: fade-up 0.4s ease;
}
.bc-cmp-empty-icon {
font-size: 3rem;
opacity: 0.25;
margin-bottom: 0.6rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.bc-cmp-empty-title {
color: var(--text) !important;
font-family: var(--font-brand);
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.bc-cmp-empty-sub {
color: var(--text-2) !important;
font-size: 0.85rem;
max-width: 440px;
margin: 0 auto 1.2rem;
line-height: 1.5;
}
.bc-cmp-empty-metrics {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem;
max-width: 500px;
margin: 0 auto;
}
.bc-cmp-empty-chip {
font-size: 0.65rem;
padding: 3px 10px;
border-radius: 12px;
border: 1px solid var(--border-hi);
color: var(--text-3);
background: var(--surface);
font-family: var(--font-ui);
letter-spacing: 0.02em;
animation: chip-in 0.5s ease backwards;
}
.bc-cmp-empty-chip:nth-child(1) { animation-delay: 0.05s; }
.bc-cmp-empty-chip:nth-child(2) { animation-delay: 0.08s; }
.bc-cmp-empty-chip:nth-child(3) { animation-delay: 0.11s; }
.bc-cmp-empty-chip:nth-child(4) { animation-delay: 0.14s; }
.bc-cmp-empty-chip:nth-child(5) { animation-delay: 0.17s; }
.bc-cmp-empty-chip:nth-child(6) { animation-delay: 0.20s; }
.bc-cmp-empty-chip:nth-child(7) { animation-delay: 0.23s; }
.bc-cmp-empty-chip:nth-child(8) { animation-delay: 0.26s; }
.bc-cmp-empty-chip:nth-child(9) { animation-delay: 0.29s; }
.bc-cmp-empty-chip:nth-child(10) { animation-delay: 0.32s; }
.bc-cmp-empty-chip:nth-child(11) { animation-delay: 0.35s; }
.bc-cmp-empty-chip:nth-child(12) { animation-delay: 0.38s; }
.bc-cmp-empty-chip:nth-child(13) { animation-delay: 0.41s; }
.bc-cmp-empty-chip:nth-child(14) { animation-delay: 0.44s; }
@keyframes chip-in {
from { opacity: 0; transform: translateY(8px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.bc-cmp-body {
padding: 0 1rem 1rem;
animation: fade-up 0.3s ease;
}
.bc-cmp-salary {
padding: 0 0.5rem 0.2rem 1rem;
}
.bc-cmp-salary-hint {
font-size: 0.85rem;
color: #7a8a9a;
}
/* ── Fade-up entrance animation ────────────────────────────────────────── */
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.bc-no-data {
color: #7a8a9a;
padding: 0.5rem;
}
/* ── Compare persistent banner ───────────────────────────────────────── */
.bc-cmp-banner {
padding: 1rem 1.5rem 0.8rem;
border-bottom: 1px solid rgba(212,168,67,0.25);
text-align: center;
background: linear-gradient(180deg, rgba(212,168,67,0.06) 0%, transparent 100%);
}
.bc-cmp-banner-title {
font-family: var(--font-brand);
font-size: 1.3rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 0.2rem;
}
.bc-cmp-banner-sub {
font-size: 0.75rem;
color: var(--text-2);
}
/* ── Compare empty state teaser & preview ────────────────────────────── */
.bc-cmp-tease-row {
font-size: 0.9rem;
color: var(--text-2);
margin-bottom: 0.9rem;
text-align: center;
}
.bc-cmp-tease-arrow {
display: inline-block;
animation: arrow-pulse 1.2s ease-in-out infinite;
}
@keyframes arrow-pulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
.bc-cmp-preview {
filter: blur(3px);
opacity: 0.4;
pointer-events: none;
margin-top: 1.2rem;
border-top: 1px solid #1a2535;
}
.bc-cmp-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.28rem 0.4rem;
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
}
.bcpr-label { font-weight: 700; color: var(--accent); }
.bcpr-mid { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
/* ── 30. Comparison stat rows ────────────────────────────────────────── */
.cmp-wrap { padding: 0 0.4rem; }
.cmp-header { padding: 0.4rem 0 0.5rem; border-bottom: 2px solid var(--accent); margin-bottom: 0.1rem; }
.cmp-col-right { text-align: right; padding-right: 0.4rem; }
.cmp-col-center { text-align: center; padding: 0 0.1rem; }
.cmp-col-left { padding-left: 0.4rem; }
.cmp-entity-name { color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.cmp-vs { color: var(--text-3); font-size: 0.75rem; font-style: normal; }
.cmp-sec-head { background: linear-gradient(90deg, rgba(212,168,67,0.12) 0%, transparent 100%); color: var(--accent); padding: 0.25rem 0.6rem; margin: 0.5rem 0 0.1rem; border-left: 3px solid var(--accent); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; }
.cmp-stat-row { border-bottom: 1px solid var(--border); padding: 0.25rem 0; animation: fade-up 0.25s ease backwards; }
.cmp-stat-row:nth-child(odd) { background: rgba(212,168,67,0.02); }
.cmp-stat-row:hover { background: rgba(212,168,67,0.06); }
.cmp-winner { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-shadow: 0 0 12px rgba(212,168,67,0.2); }
.cmp-loser { font-size: 0.85rem; color: var(--text-2); }
.cmp-label { color: var(--text-3); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-text-val { font-size: 0.75rem; color: var(--text-2); }
.cmp-state-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 0.05rem; }
.cmp-summary { text-align: center; padding: 0.6rem 0.3rem 0.4rem; margin-top: 0.3rem; border-top: 2px solid var(--accent); }
.cmp-summary-label { font-size: 0.65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.cmp-summary-val { font-size: 1.05rem; font-weight: 700; }
/* ── Comparison cell win/lose indicators ─────────────────────────────── */
.cmp-cell { font-size: 0.85rem; display: block; }
.cmp-col-right .cmp-cell { text-align: right; }
.cmp-col-left .cmp-cell { text-align: left; }
.cmp-col-right .cmp-cell-win { font-weight: 700; color: var(--accent); border-right: 3px solid #5dbe8a; padding-right: 4px; }
.cmp-col-right .cmp-cell-lose { color: #5a6a7a; border-right: 3px solid #5a2a2a; padding-right: 4px; }
.cmp-col-left .cmp-cell-win { font-weight: 700; color: var(--accent); border-left: 3px solid #5dbe8a; padding-left: 4px; }
.cmp-col-left .cmp-cell-lose { color: #5a6a7a; border-left: 3px solid #5a2a2a; padding-left: 4px; }
/* ── Win lead banner ─────────────────────────────────────────────────── */
.cmp-lead-banner {
text-align: center;
padding: 0.3rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid #1a2535;
margin-bottom: 0.2rem;
}
.cmp-lead-tie { color: var(--text-2); }
.cmp-lead-win { color: #5dbe8a; }
.cmp-lead-lose { color: #8b5a5a; }
/* ── National average annotation in compare center column ────────────── */
.cmp-natl-tag {
font-size: 0.65rem;
color: var(--text-3);
margin-top: 2px;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* ── SOTD hero improvements ──────────────────────────────────────────── */
.bc-sotd-name {
font-size: 1.75rem !important;
}
/* ── 31. Quiz / results ──────────────────────────────────────────────── */
.quiz-config { padding: 1.2rem; }
.quiz-empty { padding: 1.5rem; color: #7a8a9a; }
.quiz-progress { padding: 0.8rem 1rem; border-bottom: 1px solid #4a3c2e; margin-bottom: 1rem; }
.quiz-progress-bar { display: flex; align-items: center; gap: 0.8rem; }
.quiz-counter { color: var(--accent); font-family: monospace; min-width: 55px; }
.quiz-correct { color: #3a8a6a; font-family: monospace; }
.quiz-body { padding: 0 1rem 1rem; }
.quiz-type-label { color: #7a8a9a; text-transform: uppercase; letter-spacing: 0.1em; }
.quiz-question { color: #e6edf3; margin: 0.5rem 0 1rem; font-size: 1rem; }
.quiz-hint { color: #7a8a9a; font-size: 0.85rem; }
.quiz-placed { color: #3a8aff; font-family: monospace; font-size: 0.85rem; }
.quiz-feedback-ok { padding: 0.7rem; border-radius: 4px; margin-bottom: 0.8rem; background: rgba(58,138,106,0.15); border: 1px solid #3a8a6a; }
.quiz-feedback-bad { padding: 0.7rem; border-radius: 4px; margin-bottom: 0.8rem; background: rgba(192,57,43,0.15); border: 1px solid #c0392b; }
.quiz-fb-ok-text { font-family: monospace; font-weight: bold; color: #3a8a6a; }
.quiz-fb-bad-text { font-family: monospace; font-weight: bold; color: #c0392b; }
.quiz-fb-detail { color: #7a8a9a; font-size: 0.85rem; margin: 0.3rem 0 0; }
.quiz-fb-answer { color: #c0b090; font-size: 0.85rem; margin: 0.3rem 0 0; }
.quiz-quit-wrap { margin-top: 1.2rem; }
.quiz-done { padding: 2.5rem; text-align: center; }
.quiz-done-icon { font-size: 2.5rem; color: #3a8a6a; margin-bottom: 0.5rem; }
/* ── 32. Results / study plan ────────────────────────────────────────── */
.res-card { background: #161b22; border-color: #30363d; }
.res-trend-row { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid #4a3c2e; }
.res-accent { color: #c0b090; }
.res-miss { color: #c0392b; font-family: monospace; font-size: 0.85rem; }
.res-alloc-row { margin-bottom: 0.8rem; }
.res-alloc-header { display: flex; justify-content: space-between; margin-bottom: 0.2rem; }
.res-alloc-pct { color: var(--accent); font-family: monospace; }
.res-alloc-bar { height: 5px; background: #4a3c2e; }
.res-total { text-align: right; }
/* ── 33. Salary comparison ───────────────────────────────────────────── */
.sal-header { font-size: 0.65rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.sal-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sal-footer { font-size: 0.65rem; color: var(--text-3); margin-top: 0.4rem; }
/* ── 34. Match quiz submit ───────────────────────────────────────────── */
.match-submit { text-align: center; padding: 1rem 0 1.5rem; }
/* ── 35. Economics section ──────────────────────────────────────────── */
.bc-econ-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.4rem;
margin-bottom: 0.75rem;
}
.bc-dl-sm { font-size: 0.85rem; margin-bottom: 0.3rem; }
.bc-dl-indent { font-size: 0.85rem; margin-bottom: 0.1rem; margin-left: 0.8rem; }
.bc-tax-head {
color: var(--accent);
font-size: 0.85rem;
font-weight: 600;
margin: 0.3rem 0 0.05rem;
}
.bc-tax-note {
font-size: 0.75rem;
color: var(--text-2);
font-style: italic;
margin: 0 0 0.35rem 0.8rem;
}
.bc-natl-tag {
font-size: 0.75rem;
color: var(--text-2);
margin-left: 0.3rem;
}
.bc-co-name-td {
padding: 0.12rem 0.35rem 0.12rem 0;
color: var(--accent);
font-weight: 600;
}
.bc-co-val-td {
padding: 0.12rem 0.35rem;
}
.bc-co-val-td-last {
padding: 0.12rem 0;
}
.bc-cty-header-good {
font-size: 0.75rem;
color: #2a7a2a;
padding: 0.05rem 0;
border-bottom: 1px solid rgba(42,122,42,0.3);
}
.bc-cty-header-bad {
font-size: 0.75rem;
color: #c0392b;
padding: 0.15rem 0 0.05rem;
border-bottom: 1px solid rgba(192,57,43,0.3);
}
.bc-cty-td-name {
padding: 0.1rem 0.3rem 0.1rem 0;
font-weight: 600;
font-size: 0.75rem;
}
.bc-cty-td-val {
padding: 0.1rem 0;
font-size: 0.75rem;
text-align: right;
}
.bc-bar-track {
height: 3px;
background: #1e2a3a;
border-radius: 2px;
}
.bc-bar-fill {
height: 3px;
background: var(--accent);
border-radius: 2px;
}
.bc-profile-list-indent { margin-left: 0.8rem; }
.bc-inherit-li { font-size: 0.85rem; }
.bc-co-notes {
font-size: 0.75rem;
color: var(--text-2);
display: block;
margin-left: 0;
}
/* ── 36. Sister regions ────────────────────────────────────────────── */
.bc-sister-chip {
font-size: 0.75rem;
padding: 0.12rem 0.45rem;
border-radius: 999px;
border: 1px solid rgba(34,211,238,0.45);
background: rgba(34,211,238,0.08);
color: #22d3ee;
}
.bc-sister-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(34,211,238,0.18);
border-radius: 6px;
padding: 0.7rem 0.85rem 0.6rem;
margin-bottom: 0.75rem;
}
.bc-sister-img {
width: 100%;
max-height: 120px;
object-fit: cover;
border-radius: 4px;
}
.bc-sister-credit {
font-size: 0.75rem;
color: #7a8a9a;
margin: 0.15rem 0 0;
}
.bc-sister-name {
font-size: 1.05rem;
margin-right: 0.3rem;
}
.bc-sister-stat-name {
font-size: 0.9rem;
font-weight: 700;
color: #22d3ee;
}
.bc-sister-stat-type {
font-size: 0.75rem;
color: var(--text-2);
margin-left: 0.35rem;
}
.bc-sister-category {
font-size: 0.75rem;
color: #7a8a9a;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.5rem;
}
.bc-sister-tbl {
width: 100%;
border-collapse: collapse;
}
.bc-sister-tbl-th-r {
text-align: right;
font-size: 0.75rem;
color: var(--accent);
padding: 0 0.5rem 0.2rem 0;
border-bottom: 1px solid rgba(56,189,248,0.25);
}
.bc-sister-tbl-th-c {
text-align: center;
font-size: 0.75rem;
color: var(--text-2);
padding: 0 0.4rem 0.2rem;
border-bottom: 1px solid rgba(56,189,248,0.25);
}
.bc-sister-tbl-th-l {
text-align: left;
font-size: 0.75rem;
color: #22d3ee;
padding: 0 0 0.2rem 0.5rem;
border-bottom: 1px solid rgba(56,189,248,0.25);
}
.bc-sister-narrative {
font-size: 0.79rem;
color: var(--text-2);
font-style: italic;
margin: 0 0 0.35rem;
}
.bc-sister-diff {
border-left: 2px solid rgba(251,191,36,0.5);
padding: 0.25rem 0.5rem;
margin-bottom: 0.35rem;
}
.bc-sister-diff-label {
font-weight: 600;
color: #fbbf24;
}
/* ── 37. Geography section ─────────────────────────────────────────── */
.bc-geo-feat-title {
font-size: 0.85rem;
display: block;
}
.bc-geo-fact {
margin-bottom: 0.4rem;
padding-left: 0.5rem;
border-left: 2px solid var(--accent);
font-size: 0.85rem;
color: var(--text-2);
}
.bc-geo-rv-row {
margin-bottom: 0.55rem;
transition: background 0.1s;
}
.bc-geo-rv-name {
font-size: 0.85rem;
margin: 0 0 0.03rem;
}
.bc-geo-rv-desc {
margin: 0;
}
/* ── 38. Crime section ─────────────────────────────────────────────── */
.bc-crime-card {
background: #0d1117;
border: 1px solid #2a3a4a;
border-radius: 4px;
padding: 0.45rem 0.5rem;
}
.bc-crime-label {
font-size: 0.67rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
margin-bottom: 0.1rem;
}
.bc-crime-val {
font-size: 0.9rem;
}
.bc-crime-chart-hint {
font-size: 0.75rem;
color: var(--text-3);
margin: 0.3rem 0 0.15rem;
}
/* ── 39. Infrastructure section ────────────────────────────────────── */
.bc-infra-item {
margin-bottom: 0.4rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid rgba(212,168,67,0.1);
}
.bc-infra-name {
font-size: 0.85rem;
font-weight: 600;
}
.bc-infra-sub {
font-size: 0.75rem;
color: var(--text-2);
}
/* ── 40. Housing section ───────────────────────────────────────────── */
.bc-housing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
/* ── 41. Fact items (border-left accent blocks used across culture, geography, etc.) */
.bc-fact-item {
margin-bottom: 0.55rem;
padding-left: 0.5rem;
border-left: 2px solid #d4a843;
}
.bc-fact-item-alt {
margin-bottom: 0.4rem;
padding-left: 0.5rem;
border-left: 2px solid var(--accent);
}
.bc-fact-item-click {
margin-bottom: 0.55rem;
padding-left: 0.5rem;
border-left: 2px solid #d4a843;
cursor: pointer;
transition: background 0.1s;
}
.bc-fact-title {
font-size: 0.85rem;
margin: 0 0 0.02rem;
}
.bc-fact-body {
margin: 0;
line-height: 1.4;
}
/* ── 42. Climate tables ──────────────────────────────────────────────── */
.bc-clim-th {
text-align: left;
color: #8b949e;
padding: 0.1rem 0.4rem 0.2rem 0;
border-bottom: 1px solid #d4a843;
white-space: nowrap;
}
.bc-clim-th-high {
text-align: left;
color: #c0392b;
font-weight: 700;
padding: 0.1rem 0.4rem 0.2rem 0;
border-bottom: 1px solid #d4a843;
white-space: nowrap;
}
.bc-clim-th-low {
text-align: left;
color: #60a5fa;
font-weight: 700;
padding: 0.1rem 0.4rem 0.2rem 0;
border-bottom: 1px solid #d4a843;
white-space: nowrap;
}
.bc-clim-td {
padding: 0.15rem 0.4rem 0.15rem 0;
white-space: nowrap;
}
.bc-clim-td-high {
padding: 0.15rem 0.4rem;
color: #c0392b;
font-weight: 600;
}
.bc-clim-td-low {
padding: 0.15rem 0;
color: #60a5fa;
font-weight: 600;
}
.bc-clim-note {
font-size: 0.75rem;
color: var(--text-3);
margin-bottom: 0.3rem;
}
.bc-clim-class {
font-size: 0.85rem;
color: var(--text-2);
margin-bottom: 0.3rem;
}
.bc-clim-dl {
font-size: 0.85rem;
margin-bottom: 0.2rem;
}
.bc-clim-rec-high {
color: #c0392b;
font-weight: 700;
}
.bc-clim-rec-low {
color: #60a5fa;
font-weight: 700;
}
.bc-clim-loc {
cursor: pointer;
text-decoration: underline dotted;
}
/* ── 43. City comparison header ──────────────────────────────────────── */
.bc-city-cmp {
padding: 0 0.4rem;
}
.bc-city-cmp-header {
padding: 0.4rem 0 0.5rem;
border-bottom: 2px solid #d4a843;
margin-bottom: 0.1rem;
}
.bc-city-cmp-name {
color: #d4a843;
font-weight: 700;
font-size: 0.9rem;
}
.bc-city-cmp-state {
font-size: 0.75rem;
color: #7a8a9a;
margin-top: 0.05rem;
}
.bc-city-cmp-summary {
text-align: center;
padding: 0.6rem 0.3rem 0.4rem;
margin-top: 0.3rem;
border-top: 2px solid #d4a843;
}
.bc-city-cmp-edge-label {
font-size: 0.65rem;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.2rem;
}
.bc-city-cmp-edge-val {
font-size: 1.05rem;
font-weight: 700;
}
/* ── 44. Quiz & results ──────────────────────────────────────────────── */
.quiz-card {
background: #161b22;
border-color: #30363d;
}
.bc-quiz-wrap {
padding: 1.2rem;
}
.bc-quiz-title {
color: #d4a843;
}
.bc-quiz-hint {
color: #7a8a9a;
display: block;
margin-bottom: 1rem;
}
.bc-quiz-progress-bar {
padding: 0.8rem 1rem;
border-bottom: 1px solid #4a3c2e;
margin-bottom: 1rem;
}
.bc-quiz-progress-inner {
display: flex;
align-items: center;
gap: 0.8rem;
}
.bc-quiz-counter {
color: #d4a843;
font-family: monospace;
min-width: 55px;
}
.bc-quiz-correct {
color: #3a8a6a;
font-family: monospace;
}
.bc-quiz-body {
padding: 0 1rem 1rem;
}
.bc-quiz-type-label {
color: #7a8a9a;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bc-quiz-question {
color: #e6edf3;
margin: 0.5rem 0 1rem;
font-size: 1rem;
}
.bc-quiz-map-hint {
color: #7a8a9a;
font-size: 0.85rem;
}
.bc-quiz-coords {
color: #3a8aff;
font-family: monospace;
font-size: 0.85rem;
}
.bc-quiz-done-wrap {
padding: 2.5rem;
text-align: center;
}
.bc-quiz-done-check {
font-size: 2.5rem;
color: #3a8a6a;
margin-bottom: 0.5rem;
}
.bc-quiz-done-msg {
color: #7a8a9a;
}
.bc-res-score-title {
color: #d4a843;
}
.bc-res-score-detail {
color: #c0b090;
}
.bc-res-no-data {
color: #7a8a9a;
margin: 0;
}
.bc-res-missed-title {
color: #d4a843;
}
.bc-res-missed-row {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
border-bottom: 1px solid #4a3c2e;
}
.bc-res-missed-name {
color: #c0b090;
}
.bc-res-missed-count {
color: #c0392b;
font-family: monospace;
font-size: 0.85rem;
}
.bc-res-plan-title {
color: #d4a843;
}
.bc-res-plan-hint {
color: #7a8a9a;
font-size: 0.85rem;
}
.bc-res-alloc-item {
margin-bottom: 0.8rem;
}
.bc-res-alloc-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.bc-res-alloc-name {
color: #c0b090;
}
.bc-res-alloc-pct {
color: #d4a843;
font-family: monospace;
}
.bc-res-alloc-bar-bg {
height: 5px;
background: #4a3c2e;
}
.bc-res-scope-title {
color: #d4a843;
}
.bc-res-scope-hint {
color: #7a8a9a;
margin-bottom: 1rem;
}
/* ── 45. Mountain ranges ─────────────────────────────────────────────── */
.bc-mr-item {
margin-bottom: 0.75rem;
transition: background 0.1s;
cursor: pointer;
}
.bc-mr-name {
color: #d4a843;
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 0.1rem;
}
/* ── 46. River items ─────────────────────────────────────────────────── */
.bc-rv-simple {
margin-bottom: 0.4rem;
padding-left: 0.5rem;
border-left: 2px solid #d4a843;
font-size: 0.85rem;
color: #8b949e;
}
.bc-rv-item {
margin-bottom: 0.55rem;
transition: background 0.1s;
}
.bc-rv-name {
font-size: 0.85rem;
margin: 0 0 0.03rem;
}
/* ── 49. Housing tables ──────────────────────────────────────────────── */
.bc-htbl {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.4rem;
}
.bc-htbl-th {
text-align: left;
color: #8b949e;
font-size: 0.75rem;
padding: 0.05rem 0.3rem 0.1rem 0;
border-bottom: 1px solid #d4a843;
}
.bc-htbl-th-r {
text-align: right;
color: #8b949e;
font-size: 0.75rem;
padding: 0.05rem 0.3rem 0.1rem;
border-bottom: 1px solid #d4a843;
}
.bc-htbl-th-rl {
text-align: right;
color: #8b949e;
font-size: 0.75rem;
padding: 0.05rem 0 0.1rem;
border-bottom: 1px solid #d4a843;
}
.bc-htbl-label-good {
font-size: 0.75rem;
color: #2a7a2a;
padding: 0.05rem 0;
border-bottom: 1px solid rgba(42,122,42,0.3);
}
.bc-htbl-label-bad {
font-size: 0.75rem;
color: #c0392b;
padding: 0.15rem 0 0.05rem;
border-bottom: 1px solid rgba(192,57,43,0.3);
}
.bc-htbl-label-hot {
font-size: 0.75rem;
color: #d4a843;
padding: 0.05rem 0;
border-bottom: 1px solid rgba(56,189,248,0.3);
}
.bc-htbl-td-r {
padding: 0.1rem 0.3rem;
text-align: right;
}
.bc-htbl-td-rl {
padding: 0.1rem 0;
text-align: right;
}
.bc-htbl-td-name {
padding: 0.1rem 0.3rem 0.1rem 0;
color: #d4a843;
font-weight: 600;
}
.bc-htbl-scroll {
max-height: 220px;
overflow-y: auto;
margin-bottom: 0.4rem;
}
.bc-htbl-label-cool {
font-size: 0.75rem;
color: #60a5fa;
padding: 0.15rem 0 0.05rem;
border-bottom: 1px solid rgba(96,165,250,0.3);
}
/* ── 50. History timeline ────────────────────────────────────────────── */
.bc-tl-event {
display: flex;
gap: 0;
margin-bottom: 0;
position: relative;
}
.bc-tl-year-col {
width: 3.5rem;
flex-shrink: 0;
text-align: right;
padding-right: 0.6rem;
position: relative;
}
.bc-tl-year {
font-size: 0.75rem;
font-weight: 700;
color: #d4a843;
font-family: var(--font-brand);
}
.bc-tl-content {
flex: 1;
min-width: 0;
padding-bottom: 1rem;
padding-left: 0.5rem;
}
.bc-tl-title {
font-size: 0.85rem;
font-weight: 600;
color: #e8dcc8;
line-height: 1.35;
}
.bc-tl-desc {
font-size: 0.75rem;
color: #8b949e;
margin-top: 0.15rem;
line-height: 1.45;
}
.bc-tl-narrative {
font-size: 0.85rem;
margin-bottom: 0.8rem;
color: #c8b89a;
line-height: 1.5;
}
.bc-tl-wrap {
position: relative;
padding-left: 0;
}
.bc-no-data {
color: #7a8a9a;
font-size: 0.85rem;
padding: 0.3rem 0;
}
/* ── 48. Clickable list items (parks, golf, landmarks) ───────────────── */
.bc-click-item {
margin-bottom: 0.55rem;
transition: background 0.1s;
cursor: pointer;
}
/* ── 47. Misc small helpers ──────────────────────────────────────────── */
.bc-list-none {
padding-left: 0;
margin: 0;
list-style: none;
}
.bc-list-disc {
padding-left: 1.1rem;
margin: 0;
font-size: 0.75rem;
list-style: disc;
}
.bc-ml-sm {
margin-left: 0.3rem;
}
.bc-text-right {
text-align: right;
}
/* ── Mobile overrides ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.bc-hero { height: 110px !important; }
.bc-sotd-inner { flex-direction: column !important; gap: 0.5rem !important; }
.bc-sotd-div { display: none; }
.bc-map-banner { flex-direction: column; padding: 0.4rem 0.8rem; gap: 0.3rem; }
.bc-home { padding: 1rem 1rem 2rem; }
}
@media (max-width: 480px) {
.bc-home-title { font-size: 1.6rem; }
.bc-hero { height: 90px !important; }
.bc-hero-name { font-size: 0.95rem; }
}
/* ══════════════════════════════════════════════════════════════════════════════
Ranks tab
══════════════════════════════════════════════════════════════════════════════ */
.bc-ranks-mode-strip {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.bc-ranks-mode-btn {
padding: 0.4rem 1rem;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
color: var(--text-2);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.bc-ranks-mode-btn:hover {
border-color: var(--accent);
color: var(--text);
}
.bc-ranks-mode-active {
background: var(--accent-dim);
border-color: var(--accent);
color: var(--accent);
}
.bc-ranks-sidebar { padding-right: 0.5rem; }
.bc-ranks-preset-label {
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-3); margin-bottom: 0.35rem; font-weight: 600;
}
.bc-ranks-preset-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 1rem; }
.bc-ranks-preset-btn {
background: var(--surface-hi); border: 1px solid var(--border);
color: var(--text-2); border-radius: 14px; padding: 3px 11px;
font-size: 0.75rem; cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bc-ranks-preset-btn:hover {
background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.bc-power-list { display: flex; flex-direction: column; gap: 2px; }
.bc-power-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; background: var(--surface);
border: 1px solid var(--border); border-radius: 5px;
transition: border-color 0.15s;
}
.bc-power-row:hover { border-color: rgba(212,168,67,0.35); }
.bc-power-rank {
width: 28px; text-align: center; font-size: 0.75rem;
color: var(--text-3); flex-shrink: 0; font-weight: 600;
}
.bc-medal-1 { color: #d4a843; font-weight: 800; }
.bc-medal-2 { color: #9aa0a6; font-weight: 800; }
.bc-medal-3 { color: #c87533; font-weight: 800; }
.bc-power-name {
width: 130px; flex-shrink: 0; font-size: 0.85rem;
color: var(--text); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-power-bar-wrap {
flex: 1; height: 6px; background: rgba(255,255,255,0.06);
border-radius: 3px; overflow: hidden; min-width: 0;
}
.bc-power-bar-fill {
height: 100%; background: var(--accent);
border-radius: 3px; transition: width 0.4s ease;
}
.bc-power-score {
width: 68px; text-align: right; font-size: 0.75rem;
color: var(--accent); font-weight: 700; flex-shrink: 0;
white-space: nowrap;
}
.bc-power-metrics {
display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.bc-metric-bar {
display: flex; align-items: center; gap: 3px; cursor: help;
}
.bc-metric-label {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; width: 30px; flex-shrink: 0; text-align: right;
color: var(--text-3);
}
.bc-metric-track {
width: 40px; height: 5px; background: rgba(255,255,255,0.06);
border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.bc-metric-fill {
height: 100%; border-radius: 3px; transition: width 0.4s ease;
}
.bc-metric-val {
font-size: 0.65rem; color: var(--text-3); min-width: 42px; white-space: nowrap;
}
/* Expandable detail panel */
.bc-power-row-open { border-color: rgba(212,168,67,0.5); background: rgba(212,168,67,0.03); }
.bc-power-detail {
grid-template-columns: repeat(3, 1fr); gap: 8px;
padding: 10px; margin: -2px 0 2px;
background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 5px 5px;
border-top: none;
}
.bc-detail-card {
background: rgba(255,255,255,0.02); border: 1px solid var(--border);
border-radius: 5px; padding: 10px 12px;
}
.bc-detail-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bc-detail-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bc-detail-title { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.bc-detail-value { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bc-detail-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-3); margin-bottom: 6px; }
.bc-detail-bar-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.bc-detail-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.bc-detail-profile-link {
grid-column: 1 / -1; text-align: center;
font-size: 0.85rem; color: var(--accent); padding: 8px 0 2px;
font-weight: 600;
}
.bc-detail-profile-link:hover { text-decoration: underline; }
@media (max-width: 576px) {
.bc-power-detail { grid-template-columns: repeat(2, 1fr); }
}
.bc-power-pips {
display: flex; gap: 3px; align-items: flex-end; flex-shrink: 0;
}
.bc-power-pip-wrap {
width: 8px; height: 30px; background: rgba(255,255,255,0.05);
border-radius: 2px; display: flex; align-items: flex-end;
overflow: hidden; cursor: help;
}
.bc-power-pip-bar { width: 100%; border-radius: 2px 2px 0 0; transition: height 0.4s; }
.bc-power-pip-legend {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
padding: 6px 10px; background: var(--surface);
border: 1px solid var(--border); border-radius: 5px;
}
.bc-pip-legend-item {
display: flex; align-items: center; gap: 4px;
font-size: 0.75rem; color: var(--text-2);
}
.bc-pip-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════════════════════════
Scout mode toggle + Analogue
══════════════════════════════════════════════════════════════════════════════ */
.scout-mode-strip { display: flex; gap: 6px; padding: 12px 16px 4px; }
.scout-mode-btn {
padding: 7px 20px; border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: var(--text-2); font-size: 0.85rem; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scout-mode-btn:hover {
background: var(--accent-dim); border-color: rgba(212,168,67,0.4); color: var(--accent);
}
.scout-mode-active {
background: var(--accent-dim) !important;
border-color: rgba(212,168,67,0.55) !important;
color: var(--accent) !important;
}
.analogue-wrap { padding: 1rem 1.25rem; max-width: 680px; margin: 0 auto; }
.analogue-header { margin-bottom: 1.25rem; }
.analogue-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.analogue-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }
.analogue-picker-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; }
.analogue-find-btn {
background: var(--accent); color: #1a1410;
border: none; border-radius: 6px; padding: 8px 18px;
font-weight: 700; font-size: 0.85rem; cursor: pointer;
transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.analogue-find-btn:hover { background: var(--accent-hi); transform: translateY(-1px); }
.analogue-results-wrap { padding: 0.5rem 1.25rem 1.25rem; }
.analogue-results-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}
.analogue-results-title { font-size: 1rem; font-weight: 700; color: var(--text); }
/* Doppelgänger result rows */
.mcp-row {
display: flex; align-items: flex-start; gap: 0.6rem;
padding: 0.6rem 0.75rem; border-radius: 7px;
border: 1px solid var(--border); background: var(--surface);
margin-bottom: 0.4rem; transition: border-color 0.12s;
}
.mcp-row:hover { border-color: var(--accent); }
.mcp-meta { flex: 1; min-width: 0; }
.mcp-rank { font-size: 0.75rem; font-weight: 800; color: var(--text-3);
letter-spacing: 0.08em; margin-right: 0.3rem; }
.mcp-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.mcp-reason { font-size: 0.75rem; color: var(--text-2); display: block;
margin-top: 0.2rem; line-height: 1.4; }
.mcp-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.mcp-score { font-size: 1rem; font-weight: 800; color: var(--accent); min-width: 40px; text-align: right; }
.mcp-btn { background: transparent; border: 1px solid var(--border);
color: var(--text-2); font-size: 0.85rem; cursor: pointer;
padding: 0.2rem 0.5rem; border-radius: 4px; transition: all 0.12s; }
.mcp-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════════════════
Pulse tab
══════════════════════════════════════════════════════════════════════════════ */
.bc-pulse-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.bc-pulse-section {
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: 1rem 1.25rem;
}
.bc-pulse-desc { font-size: 0.85rem; color: var(--text-2); margin-bottom: 0.75rem; line-height: 1.5; }
.bc-pulse-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0.75rem; align-items: flex-end; }
.bc-pulse-r2 {
display: flex; align-items: center; gap: 12px;
padding: 6px 10px; background: var(--surface-hi);
border-radius: 5px; margin-top: 8px;
}
.bc-pulse-r2-stat { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.bc-pulse-r2-desc { font-size: 0.75rem; color: var(--text-2); }
.bc-bellwether-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 0.5rem; }
.bc-bw-row {
display: flex; align-items: center; gap: 8px; padding: 5px 8px;
border-radius: 4px; border: 1px solid transparent; transition: border-color 0.15s;
}
.bc-bw-row:hover { border-color: var(--border-hi); background: var(--surface-hi); }
.bc-bw-rank { width: 22px; font-size: 0.75rem; color: var(--text-3); text-align: center; flex-shrink: 0; }
.bc-bw-name { width: 120px; font-size: 0.85rem; color: var(--text); font-weight: 600; flex-shrink: 0; }
.bc-bw-bar-wrap { flex: 1; min-width: 0; }
.bc-bw-bar-track {
height: 8px; background: rgba(192,53,30,0.35);
border-radius: 4px; overflow: hidden; position: relative;
}
.bc-bw-bar-dem {
height: 100%; background: #1e7cc0; border-radius: 4px 0 0 4px; transition: width 0.4s;
}
.bc-bw-bar-mid {
position: absolute; top: 0; left: 50%; width: 2px;
height: 100%; background: rgba(255,255,255,0.3);
}
.bc-bw-lean { width: 60px; text-align: right; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.lean-tossup { color: #e8d44d; }
.lean-dem { color: #4a90d9; }
.lean-rep { color: #d9534a; }
@media (max-width: 576px) {
.bc-power-pips { display: none; }
.bc-power-metrics { display: none; }
.bc-power-name { width: 100px; }
.bc-pulse-controls { flex-direction: column; }
.analogue-picker-row { flex-direction: column; align-items: stretch; }
.bc-bw-name { width: 90px; }
}
/* ── Ranks stat selector strip ─────────────────────────────────────────────── */
.bc-stat-selector-strip {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0 0 10px;
}
.bc-stat-sel-btn {
padding: 6px 16px; border-radius: 20px;
border: 1px solid var(--border);
background: var(--surface-hi);
color: var(--text-2); font-size: 0.85rem; cursor: pointer;
transition: all 0.18s ease;
}
.bc-stat-sel-btn:hover {
border-color: var(--accent); color: var(--accent);
background: var(--accent-dim);
}
.bc-stat-sel-active {
font-weight: 700;
}
.bc-stat-selector-desc {
font-size: 0.75rem; color: var(--text-3);
padding-bottom: 10px; font-style: italic;
}
/* ── Rankings: flag thumbnail on rows ─────────────────────────── */
.bc-power-flag {
width: 22px; height: 15px; object-fit: cover;
border-radius: 2px; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.1);
vertical-align: middle;
}
/* ── Rankings: preset button with description ─────────────────── */
.bc-ranks-preset-btn {
display: flex; flex-direction: column; align-items: center;
gap: 2px; line-height: 1.2;
}
.bc-preset-desc {
display: block; font-size: 0.58rem; color: var(--text-3);
font-weight: 400; letter-spacing: 0; line-height: 1;
}
/* ── Rankings: insight spotlight row ─────────────────────────── */
.bc-spotlight-row {
display: flex; gap: 8px; margin-bottom: 1.25rem;
overflow-x: auto; padding-bottom: 4px;
}
.bc-spotlight-row::-webkit-scrollbar { height: 4px; }
.bc-spotlight-row::-webkit-scrollbar-track { background: transparent; }
.bc-spotlight-row::-webkit-scrollbar-thumb {
background: rgba(212,168,67,0.3); border-radius: 2px;
}
.bc-spotlight-card {
flex: 0 0 155px; min-width: 145px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--accent);
border-radius: 0 0 6px 6px; padding: 10px 12px;
transition: border-color 0.15s, background 0.15s;
}
.bc-spotlight-card:hover {
background: var(--surface-hi);
border-color: rgba(212,168,67,0.35);
border-top-color: inherit;
}
.bc-spotlight-label {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 700; margin-bottom: 7px;
display: flex; align-items: center; gap: 4px;
}
.bc-spotlight-state {
font-size: 0.85rem; font-weight: 700; color: var(--text);
display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.bc-spotlight-flag {
width: 18px; height: 12px; object-fit: cover;
border-radius: 2px; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.1);
}
.bc-spotlight-why {
font-size: 0.67rem; color: var(--text-3); line-height: 1.45;
margin-bottom: 5px;
}
.bc-spotlight-rank {
font-size: 0.64rem; color: var(--accent); font-weight: 600;
}
@media (max-width: 576px) {
.bc-spotlight-card { flex: 0 0 140px; min-width: 130px; }
}
.bc-stat-single-tip {
font-size: 0.75rem; color: var(--text-3); line-height: 1.55;
padding: 10px 0; display: flex; gap: 6px; align-items: flex-start;
}
.bc-stat-tip-icon { flex-shrink: 0; }
/* ── Quiz Done: Score + What's Next ─────────────────────────── */
.bc-quiz-score-row {
display: flex; align-items: center; justify-content: center;
gap: 14px; margin: 14px 0 20px;
}
.bc-quiz-score-circle {
width: 72px; height: 72px; border-radius: 50%;
border: 3px solid; display: flex; flex-direction: column;
align-items: center; justify-content: center; flex-shrink: 0;
}
.bc-quiz-score-pct { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.bc-quiz-score-frac { font-size: 0.75rem; opacity: 0.75; }
.bc-quiz-score-grade { font-size: 1rem; font-weight: 700; }
.bc-whats-next { margin-top: 16px; text-align: left; }
.bc-next-label {
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
text-align: center;
}
.bc-next-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bc-next-card {
flex: 1; min-width: 110px; max-width: 140px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px; padding: 12px 10px;
text-align: center; cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.bc-next-card:hover {
background: rgba(255,255,255,0.08);
border-color: var(--accent);
transform: translateY(-2px);
}
.bc-next-card-btn { display: none !important; }
.bc-next-icon { font-size: 1.5rem; margin-bottom: 5px; }
.bc-next-title { font-size: 0.85rem; font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
.bc-next-desc { font-size: 0.75rem; color: var(--text-3); line-height: 1.4; }
@media (max-width: 400px) {
.bc-next-card { min-width: 90px; padding: 10px 6px; }
}
/* =========================================================================
Global Search (Cmd+K palette)
========================================================================= */
.gs-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
color: var(--text-2);
font-size: 0.75rem;
font-family: var(--font-ui);
transition: border-color 0.15s, color 0.15s;
}
.gs-trigger:hover {
border-color: var(--accent);
color: var(--text-1);
}
.gs-trigger-label {
font-weight: 500;
}
.gs-trigger-kbd {
font-size: 0.65rem;
font-family: inherit;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 3px;
padding: 1px 4px;
color: var(--text-3);
}
/* Modal overlay */
.gs-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.gs-dialog {
width: 100%;
max-width: 520px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
overflow: hidden;
}
.gs-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.gs-input-icon {
color: var(--text-3);
font-size: 0.9rem;
flex-shrink: 0;
}
.gs-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text-1);
font-size: 0.95rem;
font-family: var(--font-ui);
}
.gs-input::placeholder { color: var(--text-3); }
.gs-esc {
font-size: 0.65rem;
font-family: inherit;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 3px;
padding: 2px 6px;
color: var(--text-3);
flex-shrink: 0;
}
/* Results list */
.gs-results {
max-height: 360px;
overflow-y: auto;
padding: 6px;
}
.gs-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s;
}
.gs-item:hover,
.gs-item.gs-item-active {
background: var(--surface);
}
.gs-item-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-1);
}
.gs-item-sub {
font-size: 0.75rem;
color: var(--text-3);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-item-scope {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 3px;
padding: 1px 5px;
flex-shrink: 0;
}
.gs-empty {
padding: 24px 16px;
text-align: center;
color: var(--text-3);
font-size: 0.85rem;
}
@media (max-width: 600px) {
.gs-trigger-label,
.gs-trigger-kbd { display: none; }
.gs-modal { padding-top: 5vh; }
.gs-dialog { max-width: 95vw; margin: 0 10px; }
}
/* ── Hidden tab pills (Scout, Quiz, Results, Pulse — accessible via nav) ─── */
.nav-pills .nav-item:has(.bc-hidden-pill),
.nav-pills .nav-link:has(.bc-hidden-pill) {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
Home Card Grid
══════════════════════════════════════════════════════════════════════════════ */
.hp-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
.hp-card-grid .bc-hcard {
display: flex;
flex-direction: column;
min-height: 155px;
padding: 0;
overflow: hidden;
}
.hp-card-grid .bc-hcard .bc-hcard-body {
padding: 0.6rem 0.85rem 0;
}
/* Card banner headers */
.hp-card-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--border);
}
.hp-banner-icon {
font-size: 1rem;
opacity: 0.9;
flex-shrink: 0;
}
.hp-banner-title {
font-family: var(--font-brand);
font-size: 0.9rem;
font-weight: 400;
color: var(--text);
}
.hp-banner-stat {
margin-left: auto;
font-size: 0.65rem;
color: var(--text-3);
white-space: nowrap;
}
/* Per-card accent colors */
.hp-card-counties .hp-card-banner { background: linear-gradient(135deg, rgba(212,168,67,0.14) 0%, transparent 100%); }
.hp-card-counties .hp-banner-icon { color: #d4a843; }
.hp-card-counties { border-top: 3px solid #d4a843; }
.hp-card-atlas .hp-card-banner { background: linear-gradient(135deg, rgba(59,130,246,0.14) 0%, transparent 100%); }
.hp-card-atlas .hp-banner-icon { color: #3b82f6; }
.hp-card-atlas { border-top: 3px solid #3b82f6; }
.hp-card-rankings .hp-card-banner { background: linear-gradient(135deg, rgba(34,197,94,0.14) 0%, transparent 100%); }
.hp-card-rankings .hp-banner-icon { color: #22c55e; }
.hp-card-rankings { border-top: 3px solid #22c55e; }
.hp-card-versus .hp-card-banner { background: linear-gradient(135deg, rgba(168,85,247,0.14) 0%, transparent 100%); }
.hp-card-versus .hp-banner-icon { color: #a855f7; }
.hp-card-versus { border-top: 3px solid #a855f7; }
.hp-card-scout .hp-card-banner { background: linear-gradient(135deg, rgba(249,115,22,0.14) 0%, transparent 100%); }
.hp-card-scout .hp-banner-icon { color: #f97316; }
.hp-card-scout { border-top: 3px solid #f97316; }
.hp-card-quiz .hp-card-banner { background: linear-gradient(135deg, rgba(20,184,166,0.14) 0%, transparent 100%); }
.hp-card-quiz .hp-banner-icon { color: #14b8a6; }
.hp-card-quiz { border-top: 3px solid #14b8a6; }
/* Live data teaser chip inside cards */
.hp-card-live-stat {
font-size: 0.75rem;
color: var(--text-2);
padding: 0.25rem 0.85rem 0;
font-style: italic;
}
/* CTA link */
.hp-card-cta {
display: block;
text-align: right;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
cursor: pointer;
padding: 0.5rem 0.85rem 0.65rem;
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.04);
transition: color 0.15s, transform 0.15s;
}
.hp-card-cta:hover {
color: var(--accent-hi);
transform: translateX(3px);
}
@media (max-width: 768px) {
.hp-card-grid {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
Move / Visit — Initial Right Panel (benchmarks, search, scout)
══════════════════════════════════════════════════════════════════════════════ */
/* ── Shared panel section header ── */
.mv-panel-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.65rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(212,168,67,0.18);
}
.mv-panel-head .fa-solid {
color: var(--accent);
font-size: 0.8rem;
flex-shrink: 0;
}
.mv-panel-title {
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 400;
color: var(--text);
letter-spacing: 0;
}
/* ── National Baselines stat grid ── */
.mv-benchmarks {
background: linear-gradient(135deg, rgba(212,168,67,0.06) 0%, var(--surface) 100%);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 8px;
padding: 0.75rem 0.9rem;
margin-bottom: 0.75rem;
}
/* Panel sub-title (baseline context line) */
.mv-panel-sub {
font-family: var(--font-ui);
font-size: 0.68rem;
color: var(--text-3);
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mv-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.mv-stat-cell {
display: flex;
flex-direction: column;
padding: 0.45rem 0.6rem;
border-left: 2px solid rgba(201,168,76,0.35);
border-radius: 0 4px 4px 0;
background: rgba(255,255,255,0.03);
transition: background 0.12s;
min-width: 0;
}
.mv-stat-cell:hover { background: rgba(255,255,255,0.06); }
/* Icon + label row inside each cell */
.mv-stat-icon-row {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.2rem;
}
.mv-stat-icon-row .fa-solid {
font-size: 0.62rem;
color: var(--accent);
opacity: 0.7;
flex-shrink: 0;
}
.mv-stat-val {
font-family: var(--font-data);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.01em;
color: var(--text);
}
.mv-stat-lbl {
font-family: var(--font-ui);
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
}
/* Sub-note below value (e.g. "annual median") */
.mv-stat-note {
font-family: var(--font-ui);
font-size: 0.59rem;
color: var(--text-3);
opacity: 0.75;
margin-top: 0.15rem;
}
/* ── Find Your County search section ── */
.mv-search-section {
margin-bottom: 0.75rem;
}
.mv-search-input .form-group { margin-bottom: 0.4rem; }
.mv-search-input .selectize-input {
background: var(--surface) !important;
border-color: var(--border-hi) !important;
color: var(--text) !important;
font-family: var(--font-ui) !important;
font-size: 0.88rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.mv-search-input .selectize-input::placeholder,
.mv-search-input .selectize-input.items.not-full input { color: var(--text-3) !important; font-style: italic; letter-spacing: 0.02em; font-weight: 300; }
.mv-search-input .selectize-dropdown {
background: var(--surface-hi) !important;
border-color: var(--border) !important;
color: var(--text) !important;
font-family: var(--font-ui) !important;
}
.mv-search-input .selectize-dropdown .option { color: var(--text) !important; }
.mv-search-input .selectize-dropdown .active {
background: var(--accent-dim) !important;
color: var(--accent-hi) !important;
}
/* ── Quick picks: force 4-per-row = 2 rows for 8 chips ── */
.mv-quickpicks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.3rem;
margin-top: 0.4rem;
}
.mv-qp-label {
grid-column: 1 / -1;
font-family: var(--font-ui);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
margin-bottom: 0.1rem;
}
.mv-qp-chip {
font-family: var(--font-ui);
font-size: 0.72rem;
color: var(--text-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.18rem 0.3rem;
cursor: pointer;
transition: all 0.15s;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mv-qp-chip:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-dim);
}
/* ── Scout card ── */
.mv-scout-sub {
font-family: var(--font-ui);
font-size: 0.78rem;
color: var(--text-3);
margin-bottom: 0.75rem;
margin-top: -0.3rem;
line-height: 1.4;
}
/* selectize overrides for scout filters */
.mv-scout-filter .selectize-input {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
font-family: var(--font-ui) !important;
font-size: 0.82rem !important;
min-height: 34px;
padding: 0.3rem 0.55rem !important;
border-radius: 5px !important;
}
.mv-scout-filter .selectize-dropdown {
background: var(--surface-hi) !important;
border-color: var(--border) !important;
font-family: var(--font-ui) !important;
font-size: 0.82rem !important;
}
.mv-scout-filter .selectize-dropdown .option {
color: var(--text) !important;
font-family: var(--font-ui) !important;
padding: 5px 8px;
}
.mv-scout-filter .selectize-dropdown .active {
background: var(--accent-dim) !important;
color: var(--accent) !important;
}
.mv-scout-filter .selectize-input.items.not-full input::placeholder,
.mv-scout-filter .selectize-input .placeholder { color: var(--text-3) !important; }
.mv-scout-flabel {
font-family: var(--font-ui) !important;
font-size: 0.62rem !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--accent) !important;
margin-bottom: 0.25rem;
}
/* ══════════════════════════════════════════════════════════════════════════════
Move / Visit — County Briefing
══════════════════════════════════════════════════════════════════════════════ */
.mv-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0.5rem 0.75rem 3rem;
}
/* ── Hero strip: title + national stats ── */
.mv-hero-strip {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem 1rem;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, rgba(212,168,67,0.08) 0%, var(--surface) 100%);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
min-width: 0;
overflow: hidden;
}
.mv-hero-left {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.mv-hero-icon {
color: var(--accent);
font-size: 1.1rem;
}
.mv-hero-title {
font-family: var(--font-brand);
font-size: 1.2rem;
font-weight: 400;
color: var(--text);
}
.mv-hero-sub {
font-size: 0.75rem;
color: var(--text-3);
margin-top: 0.05rem;
}
.mv-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
min-width: 0;
}
.mv-hero-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mv-hs-val {
font-size: 0.95rem;
font-weight: 700;
color: var(--accent);
line-height: 1.2;
}
.mv-hs-lbl {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
margin-top: 0.1rem;
}
/* .mv-search-bar / .mv-quickpicks / .mv-qp-chip now defined in the new initial-panel block above */
/* ── Split-pane layout (map left 62%, content right 38%) ── */
.mv-split-layout {
display: flex;
height: calc(100vh - 52px);
width: 100%;
overflow: hidden;
}
.mv-map-pane {
flex: 0 0 62%;
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--border);
}
.mv-map-inner {
flex: 1;
min-height: 0;
position: relative;
}
.mv-map-inner .leaflet.html-widget-output,
.mv-map-inner .leaflet-container {
height: 100% !important;
width: 100% !important;
}
.mv-content-pane {
flex: 0 0 38%;
min-width: 0;
overflow-y: auto;
/* Explicit height ensures the scroll boundary is the pane itself, not its flex ancestor.
Chrome ignores padding-bottom in flex-column overflow containers — using display:block
and an explicit height forces the correct scroll calculation. */
height: calc(100vh - 52px);
box-sizing: border-box;
padding-bottom: 0;
}
/* Bottom spacer ensures the last element is never flush against the edge */
.mv-content-pane::after {
content: '';
display: block;
height: 120px;
}
.mv-briefing-wrap {
flex: 1;
display: flex;
flex-direction: column;
max-width: 960px;
margin: 0 auto;
min-height: 200px;
padding: 0 0.85rem;
}
@media (max-width: 900px) {
.mv-split-layout { flex-direction: column; height: auto; }
.mv-map-pane { flex: 0 0 45vh; border-right: none; border-bottom: 1px solid var(--border); }
.mv-map-inner { height: 45vh; }
.mv-content-pane { flex: 1; overflow-y: visible; padding-bottom: 90px; height: auto; }
.mv-content-pane::after { display: none; }
}
/* ── Map wrapper ── */
.mv-map-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 1.5rem;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.mv-map-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 0.5rem 1rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
height: 50px; /* fixed: prevents selectize/font init from shifting map size */
overflow: hidden; /* clip anything that exceeds 50px */
}
.mv-control-group {
display: flex;
align-items: center;
gap: 0.4rem;
}
.mv-control-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
white-space: nowrap;
}
.mv-map-controls .form-group { margin-bottom: 0; }
/* Sleek selectize dropdowns in controls bar */
.mv-map-controls .selectize-input {
background: var(--bg) !important;
border: 1px solid var(--border-hi) !important;
color: var(--accent-hi) !important;
font-size: 0.75rem !important;
font-weight: 600;
font-family: var(--font-ui) !important;
padding: 0.3rem 0.6rem !important;
border-radius: 4px !important;
min-height: unset !important;
line-height: 1.4 !important;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: none !important;
}
.mv-map-controls .selectize-input.focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(212,168,67,0.15) !important;
}
.mv-map-controls .selectize-input:hover {
border-color: var(--accent) !important;
}
.mv-map-controls .selectize-input .item {
color: var(--accent-hi) !important;
}
.mv-map-controls .selectize-input input {
color: var(--text) !important;
font-size: 0.75rem !important;
}
.mv-map-controls .selectize-input input::placeholder {
color: var(--text-3) !important;
}
.mv-map-controls .selectize-dropdown {
background: var(--surface-hi) !important;
border: 1px solid var(--border-hi) !important;
border-radius: 4px !important;
margin-top: 2px;
box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
z-index: 10000;
}
.mv-map-controls .selectize-dropdown .option {
color: var(--text) !important;
font-size: 0.75rem !important;
padding: 0.35rem 0.6rem !important;
cursor: pointer;
transition: background 0.1s;
}
.mv-map-controls .selectize-dropdown .option:hover,
.mv-map-controls .selectize-dropdown .active {
background: var(--accent-dim) !important;
color: var(--accent-hi) !important;
}
.mv-map-controls .selectize-dropdown .selected {
background: rgba(212,168,67,0.08) !important;
color: var(--accent) !important;
font-weight: 600;
}
/* Caret */
.mv-map-controls .selectize-input::after {
border-color: var(--accent) transparent transparent !important;
}
.mv-map-controls .selectize-input.dropdown-active::after {
border-color: transparent transparent var(--accent) !important;
}
.mv-control-divider {
width: 1px;
height: 20px;
background: var(--border);
flex-shrink: 0;
}
.mv-control-hint {
font-size: 0.65rem;
color: var(--text-3);
font-style: italic;
}
/* Home button in controls bar */
.mv-home-btn {
background: var(--bg);
border: 1px solid var(--border-hi);
border-radius: 4px;
color: var(--accent);
font-size: 0.75rem;
font-weight: 600;
font-family: var(--font-ui);
padding: 0.3rem 0.7rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
}
.mv-home-btn:hover {
border-color: var(--accent);
background: var(--accent-dim);
color: var(--accent-hi);
}
.mv-home-btn i { font-size: 0.65rem; }
/* mv-briefing-wrap consolidated above */
.mv-state-hint-overlay {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
text-align: center;
padding: 0.5rem 1.2rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--accent);
background: rgba(16,14,11,0.9);
border: 1px solid rgba(212,168,67,0.3);
border-radius: 20px;
backdrop-filter: blur(4px);
transition: opacity 0.5s ease;
pointer-events: none;
}
/* Leaflet legend for county choropleth */
.mv-map-wrap .leaflet-container .info.legend {
background: rgba(26,24,16,0.92) !important;
backdrop-filter: blur(6px);
border: 1px solid var(--border) !important;
border-radius: 5px;
padding: 8px 12px;
color: var(--text) !important;
font-size: 0.75rem;
font-family: var(--font-ui);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
line-height: 1.6;
max-height: 200px !important;
overflow-y: auto !important;
overflow-x: hidden;
scrollbar-width: thin;
pointer-events: auto !important;
}
.mv-map-wrap .leaflet-container .info.legend .legend-title {
font-weight: 700;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 4px;
}
.mv-map-wrap .leaflet-container .info.legend i {
opacity: 0.9;
border-radius: 2px;
}
/* Briefing */
.mv-briefing {
animation: fade-up 0.3s ease;
}
.bc-section-error {
padding: 0.75rem 1rem;
color: var(--muted);
font-size: 0.85rem;
font-style: italic;
}
.bc-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 3rem 1.5rem;
text-align: center;
color: var(--muted);
font-size: 0.9rem;
}
.mv-header {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.mv-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.mv-county-name {
font-family: var(--font-brand);
font-size: 1.5rem;
font-weight: 400;
color: var(--text);
letter-spacing: 0.02em;
}
.mv-state-line {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--text-2);
font-size: 0.9rem;
margin-top: 0.15rem;
}
.mv-flag {
height: 16px;
width: auto;
border-radius: 2px;
}
.mv-archetype-wrap {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.mv-archetype {
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
background: var(--accent-dim);
border: 1px solid rgba(212,168,67,0.3);
border-radius: 3px;
padding: 0.3rem 0.7rem;
white-space: nowrap;
}
.mv-archetype-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 0.65rem;
font-weight: 700;
color: var(--text-3);
border: 1px solid var(--border-hi);
border-radius: 50%;
cursor: help;
flex-shrink: 0;
transition: color 0.15s, border-color 0.15s;
}
.mv-archetype-q:hover {
color: var(--accent);
border-color: var(--accent);
}
.mv-hook { display: none; } /* replaced by mv-verdict */
/* ── Move/Visit: Mode toggle ─────────────────────────────────────────────── */
.mv-mode-toggle {
display: flex;
gap: 0;
margin-bottom: 1.1rem;
border: 1px solid var(--border-hi);
border-radius: 6px;
overflow: hidden;
width: fit-content;
}
.mv-mode-btn {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 1rem;
border: none;
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.mv-mode-btn + .mv-mode-btn {
border-left: 1px solid var(--border-hi);
}
.mv-mode-btn:hover { color: var(--accent); }
.mv-mode-btn-active {
background: var(--accent-dim);
color: var(--accent) !important;
}
/* ── Move/Visit: Visit mode — Getting Here ───────────────────────────────── */
.mv-getting-here {
margin-bottom: 1.25rem;
padding: 0.9rem 1rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
}
.mv-getting-heading {
font-family: var(--font-brand);
font-size: 1rem;
color: var(--text);
font-weight: 400;
letter-spacing: 0;
margin-bottom: 0.25rem;
}
.mv-getting-sub {
font-size: 0.75rem;
color: var(--text-3);
margin-bottom: 0.75rem;
}
.mv-getting-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.mv-getting-item {
padding: 0.5rem 0.65rem;
background: var(--surface-top);
border-radius: 5px;
border: 1px solid var(--border);
}
.mv-getting-city {
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.15rem;
}
.mv-getting-drive {
font-family: var(--font-data);
font-size: 1.1rem;
line-height: 1;
color: var(--accent);
margin-bottom: 0.1rem;
}
.mv-getting-miles {
font-size: 0.65rem;
color: var(--text-3);
}
/* ── Move/Visit: 5-metric national rank strip ──────────────────────────────── */
.mv-nat-strip {
display: flex;
gap: 0.5rem;
margin: 0.9rem 0 0;
padding: 0.75rem 0.85rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
}
.mv-nat-strip-item {
flex: 1;
min-width: 0;
}
.mv-nat-strip-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
margin-bottom: 0.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mv-nat-strip-bar-wrap {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-bottom: 0.25rem;
overflow: hidden;
}
.mv-nat-strip-bar {
height: 100%;
border-radius: 2px;
}
.mv-nat-strip-tier {
font-size: 0.65rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.03em;
}
/* ── Move/Visit: Editorial verdict ─────────────────────────────────────────── */
.mv-verdict {
margin-top: 1rem;
padding: 0.9rem 1rem 0.85rem;
border-left: 3px solid var(--accent);
background: rgba(212,168,67,0.05);
border-radius: 0 6px 6px 0;
}
.mv-verdict-hook {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 0.45rem;
}
.mv-verdict-para {
font-family: 'EB Garamond', Georgia, serif;
font-size: 0.875rem;
line-height: 1.7;
color: var(--text);
margin: 0 0 0.7rem;
}
.mv-verdict-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.mv-verdict-chip {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.75rem;
font-weight: 600;
padding: 0.18rem 0.5rem;
border-radius: 10px;
letter-spacing: 0.02em;
}
.mv-chip-good {
background: rgba(34,197,94,0.1);
color: #22c55e;
border: 1px solid rgba(34,197,94,0.25);
}
.mv-chip-caution {
background: rgba(239,68,68,0.08);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.2);
}
.mv-chip-icon { font-size: 0.65rem; }
/* ── Move/Visit: Cost snapshot ──────────────────────────────────────────────── */
.mv-cost-snap {
margin-bottom: 1.25rem;
padding: 0.85rem 1rem 0;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
}
.mv-cost-heading {
font-family: var(--font-brand);
font-size: 1rem;
color: var(--text);
font-weight: 400;
margin-bottom: 0.55rem;
}
.mv-cost-table {
display: flex;
flex-direction: column;
}
.mv-cost-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0;
border-top: 1px solid var(--border);
}
.mv-cost-item-last {
padding-bottom: 0.75rem;
}
.mv-cost-label {
font-family: var(--font-ui);
font-size: 0.82rem;
color: var(--text-2);
flex-shrink: 0;
}
.mv-cost-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.08rem;
}
.mv-cost-amount {
font-family: var(--font-ui);
font-size: 0.92rem;
color: var(--text);
font-weight: 600;
line-height: 1.2;
}
.mv-cost-delta {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
}
.mv-cost-sub {
font-family: var(--font-ui);
font-size: 0.7rem;
color: var(--text-3);
line-height: 1.2;
}
/* Legacy aliases — kept so no R code breaks */
.mv-cost-val { font-family: var(--font-ui); font-size: 0.92rem; color: var(--text); font-weight: 600; }
.mv-cost-note { font-family: var(--font-ui); font-size: 0.7rem; color: var(--text-3); }
.mv-cost-ratio { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; }
/* ── Move/Visit: ML persona radar chart ─────────────────────────────────── */
.mv-radar-wrap {
margin: 0.5rem 0 0.25rem;
height: 210px;
width: 100%;
position: relative;
}
.mv-radar-wrap .js-plotly-plot,
.mv-radar-wrap .plotly {
height: 210px !important;
}
.mv-radar-wrap .plot-container {
background: transparent !important;
}
/* ── Move/Visit: Persona toggle ──────────────────────────────────────────── */
.mv-persona-bar {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 0.65rem;
}
.mv-persona-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
font-weight: 600;
white-space: nowrap;
margin-right: 0.1rem;
}
.mv-persona-btn {
font-size: 0.75rem;
font-weight: 600;
padding: 0.22rem 0.6rem;
border-radius: 12px;
border: 1px solid var(--border-hi);
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
letter-spacing: 0.02em;
}
.mv-persona-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.mv-persona-btn-active {
background: var(--accent-dim);
border-color: var(--accent) !important;
color: var(--accent) !important;
}
.mv-persona-result {
margin-bottom: 1rem;
padding: 0.75rem 0.9rem;
border-left: 3px solid var(--accent);
background: var(--surface-hi);
border-radius: 0 6px 6px 0;
animation: fade-up 0.2s ease;
}
.mv-persona-result-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.3rem;
}
.mv-persona-result-for {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
font-weight: 700;
}
.mv-persona-result-score {
display: flex;
align-items: baseline;
gap: 0.1rem;
}
.mv-persona-score-num {
font-family: var(--font-data);
font-size: 1.7rem;
line-height: 1;
color: var(--text);
}
.mv-persona-score-denom {
font-size: 0.75rem;
color: var(--text-2);
}
.mv-persona-score-bar-wrap {
height: 5px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.4rem;
}
.mv-persona-score-bar {
height: 100%;
border-radius: 3px;
transition: width 0.45s cubic-bezier(.4,0,.2,1), background 0.3s;
}
.mv-persona-result-label {
font-size: 0.75rem;
color: var(--text-2);
line-height: 1.5;
}
.mv-persona-result-sep { color: var(--text-3); }
/* ── Move/Visit: Similar Counties ───────────────────────────────────────────── */
.mv-similar {
margin-bottom: 1.75rem;
}
.mv-similar-header {
margin-bottom: 0.75rem;
}
.mv-similar-title {
font-family: var(--font-brand);
font-size: 1rem;
color: var(--text);
font-weight: 400;
letter-spacing: 0;
display: block;
margin-bottom: 0.2rem;
}
.mv-similar-sub {
font-size: 0.75rem;
color: var(--text-3);
}
.mv-similar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.mv-similar-card {
padding: 0.7rem 0.8rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
min-width: 0;
}
.mv-similar-card:hover {
border-color: var(--accent);
background: var(--accent-dim);
}
.mv-similar-adv {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 0.25rem;
}
.mv-similar-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mv-similar-state {
font-size: 0.75rem;
color: var(--text-2);
font-weight: 400;
margin-left: 0.3rem;
}
.mv-similar-detail {
font-size: 0.75rem;
color: var(--text-2);
line-height: 1.4;
}
/* Verdict gauges */
.mv-verdicts {
display: flex;
gap: 0.85rem;
margin-bottom: 2rem;
}
.mv-gauge {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.7rem 0.85rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.mv-gauge-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.45rem;
}
.mv-gauge-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
}
.mv-gauge-score {
font-family: var(--font-data);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
}
.mv-gauge-track {
height: 5px;
background: rgba(255,255,255,0.08);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.3rem;
}
.mv-gauge-fill {
height: 100%;
border-radius: 3px;
transition: width 0.5s ease;
}
.mv-gauge-right {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.mv-gauge-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
font-size: 0.65rem;
font-weight: 700;
font-style: italic;
color: var(--text-3);
border: 1px solid var(--border-hi);
border-radius: 50%;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
font-family: var(--font-body);
}
.mv-gauge-info:hover {
color: var(--accent);
border-color: var(--accent);
}
.mv-gauge-ends {
display: flex;
justify-content: space-between;
}
.mv-gauge-end {
font-size: 0.65rem;
color: var(--text-3);
letter-spacing: 0.02em;
}
/* Gauge breakdown (expandable) */
.mv-gauge-breakdown {
margin-top: 0.5rem;
padding-top: 0.4rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
.mv-gb-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.12rem 0;
}
.mv-gb-name {
font-size: 0.65rem;
color: var(--text-2);
}
.mv-gb-score {
font-size: 0.65rem;
font-weight: 600;
}
/* Comparison table */
.mv-comparison {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin-bottom: 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.mv-comp-header {
display: flex;
align-items: center;
padding: 0.45rem 1rem;
border-bottom: 1px solid var(--border);
background: var(--surface-hi);
}
.mv-comp-header > div {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
}
.mv-comp-group {
font-size: 0.56rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
padding: 0.6rem 1rem 0.25rem;
}
.mv-row {
display: flex;
align-items: center;
padding: 0.38rem 1rem;
transition: background 0.1s;
}
.mv-row:hover {
background: rgba(255,255,255,0.02);
}
.mv-row-label {
width: 120px;
flex-shrink: 0;
font-size: 0.75rem;
color: var(--text-2);
}
.mv-row-value {
width: 100px;
flex-shrink: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
}
.mv-row-bar-wrap {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
margin: 0 0.75rem;
min-width: 40px;
}
.mv-row-bar {
height: 100%;
border-radius: 2px;
transition: width 0.4s ease;
}
.mv-row-pctl {
width: 45px;
flex-shrink: 0;
font-size: 0.75rem;
color: var(--text-2);
text-align: right;
}
.mv-row-avg {
width: 95px;
flex-shrink: 0;
font-size: 0.75rem;
color: var(--text-3);
text-align: right;
}
/* Color key */
.mv-comp-key {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-top: 1px solid rgba(255,255,255,0.04);
font-size: 0.65rem;
color: var(--text-3);
}
.mv-key-dot {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-left: 0.5rem;
flex-shrink: 0;
}
.mv-key-dot:first-child { margin-left: 0; }
.mv-key-note {
margin-left: auto;
font-style: italic;
}
/* Context briefing card */
.mv-context {
background: rgba(255,255,255,0.025);
border-radius: 8px;
padding: 0.8rem 1rem;
margin-top: 0.75rem;
border-left: 3px solid var(--accent);
}
.mv-context-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 0.4rem;
}
.mv-context-body {
font-size: 0.85rem;
color: var(--text-2);
line-height: 1.7;
margin: 0;
}
.mv-context-body b {
color: var(--accent-hi);
font-weight: 600;
}
/* Enriched county profile */
.mv-enriched {
margin-bottom: 2rem;
}
.mv-enriched-section {
margin-bottom: 1.25rem;
}
.mv-enriched-label {
font-family: var(--font-brand);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0;
color: var(--text);
margin-bottom: 0.5rem;
position: relative;
}
.mv-enriched-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mv-enriched-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 0.85rem;
}
.mv-enriched-name {
color: var(--text);
font-weight: 500;
}
.mv-enriched-detail {
color: var(--text-3);
font-size: 0.75rem;
}
.mv-enriched-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.mv-enriched-chip {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-2);
}
.mv-overall-score {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 1rem 0;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.mv-overall-number {
font-family: var(--font-brand);
font-size: 2.2rem;
font-weight: 400;
color: var(--accent);
line-height: 1;
}
.mv-overall-label {
font-size: 0.85rem;
color: var(--text-3);
}
.mv-overall-sub {
font-size: 0.75rem;
color: var(--text-3);
margin-left: auto;
}
/* Season cards (narrative climate) */
.mv-season-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.mv-season-card {
padding: 0.75rem 0.85rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
}
.mv-season-name {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 0.3rem;
}
.mv-season-desc {
font-size: 0.75rem;
color: var(--text-2);
line-height: 1.55;
margin: 0;
}
@media (max-width: 480px) {
.mv-season-grid { grid-template-columns: 1fr; }
}
/* Enriched: nearest city description */
.mv-enriched-desc {
font-size: 0.85rem;
color: var(--text-2);
line-height: 1.6;
margin: 0.5rem 0 0;
font-style: italic;
}
/* Key takeaways */
.mv-takeaways {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mv-takeaway-item {
font-size: 0.85rem;
color: var(--text);
line-height: 1.55;
margin: 0;
padding-left: 1rem;
position: relative;
}
.mv-takeaway-item::before {
content: '\25B8';
position: absolute;
left: 0;
color: var(--accent);
font-size: 0.75rem;
}
/* Neighbor table */
.mv-neighbors {
margin-top: 1rem;
}
.mv-neighbors-title {
font-family: var(--font-brand);
font-size: 0.9rem;
font-weight: 600;
color: var(--text-2);
margin-bottom: 0.6rem;
}
.mv-nb-table {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.mv-nb-header {
display: flex;
background: var(--surface-hi);
border-bottom: 1px solid var(--border);
padding: 0.45rem 0.6rem;
gap: 0.3rem;
}
.mv-nb-header .mv-nb-cell {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
}
.mv-nb-row {
display: flex;
padding: 0.5rem 0.6rem;
gap: 0.3rem;
border-bottom: 1px solid rgba(255,255,255,0.03);
cursor: pointer;
transition: background 0.12s;
}
.mv-nb-row:last-child { border-bottom: none; }
.mv-nb-row:hover { background: var(--surface); }
.mv-nb-target {
background: var(--accent-dim) !important;
cursor: default;
}
.mv-nb-cell {
flex: 1;
font-size: 0.85rem;
color: var(--text);
min-width: 0;
}
.mv-nb-cell.mv-nb-name {
flex: 1.4;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mv-nb-state {
font-size: 0.65rem;
color: var(--text-3);
margin-left: 0.3rem;
font-weight: 400;
}
@media (max-width: 768px) {
.mv-hero-strip { flex-direction: column; gap: 0.6rem; align-items: stretch; }
.mv-hero-stats { justify-content: center; }
.mv-map-controls { flex-wrap: wrap; }
.mv-control-hint { display: none; }
.mv-verdicts { flex-direction: column; }
.mv-row-avg, .mv-comp-header .mv-row-avg { display: none; }
.mv-row-label { width: 95px; font-size: 0.75rem; }
.mv-row-value { width: 80px; font-size: 0.85rem; }
.mv-header-top { flex-direction: column; gap: 0.4rem; }
.mv-nb-table { font-size: 0.75rem; }
}
@media (max-width: 480px) {
.mv-row-bar-wrap, .mv-comp-header .mv-row-bar-wrap { display: none; }
.mv-county-name { font-size: 1.2rem; }
}
/* ============================================================================
MOBILE RESPONSIVENESS FIXES — 375px (iPhone SE) pass
============================================================================ */
/* ── Rankings: detail panel already 2-col at 576px (above). Extra fix: ensure
bc-power-detail uses display:grid (it only sets grid-template-columns) ── */
.bc-power-detail { display: none; }
.bc-power-detail.open { display: grid; }
/* ── Rankings: stat selector strip scrolls on very small screens ── */
@media (max-width: 480px) {
.bc-stat-selector-strip {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.bc-stat-selector-strip::-webkit-scrollbar { display: none; }
.bc-stat-sel-btn { flex-shrink: 0; }
}
/* ── Versus: runner-up cards stack on mobile ── */
@media (max-width: 576px) {
.match-runners-row {
grid-template-columns: 1fr !important;
}
}
/* ── Versus: compare filter row already handled in styles.css.
Additional: ensure the side-by-side comparison columns stack at 375px ── */
@media (max-width: 480px) {
.cmp-wrap > .row > [class*="col-"],
.cmp-wrap > .row > .col {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ── Quiz: match-card answer buttons — ensure 44px tap target on touch ── */
@media (max-width: 767.98px) {
.match-card {
min-height: 44px;
padding: 10px 14px;
}
.match-card-row {
gap: 8px;
}
}
/* ── Quiz: config screen fits narrow viewport ── */
@media (max-width: 480px) {
.bc-quiz-config-wrap {
padding: 1rem 0.75rem 1.5rem;
}
.bc-quiz-config-body {
padding: 0.9rem 1rem;
}
}
/* ── Global search modal: wider on phone ── */
@media (max-width: 480px) {
.gs-modal { padding-top: 8px; align-items: flex-end; padding-bottom: 0; }
.gs-dialog {
max-width: 100%;
margin: 0;
border-radius: 16px 16px 0 0;
}
.gs-results { max-height: 50vh; }
}
/* ── Home card grid: single column on very narrow screens ── */
@media (max-width: 400px) {
.hp-card-grid {
grid-template-columns: 1fr;
}
}
/* ── Econ grid: 3-col → 2-col → 1-col on mobile ── */
@media (max-width: 768px) {
.bc-econ-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.bc-econ-grid {
grid-template-columns: 1fr;
}
}
/* ── Scout stat grid: fewer columns on very narrow ── */
@media (max-width: 480px) {
.scout-stat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ── 375px iPhone SE mobile fixes (March 2026 Round 2) ──────────────── */
@media (max-width: 480px) {
.selectize-control, .form-select, select { width: 100% !important; max-width: 100% !important; }
.bc-power-name { width: 80px !important; font-size: 0.75rem !important; }
.bc-power-metrics { display: none !important; }
}
@media (max-width: 375px) {
.mv-row-avg { display: none !important; }
.mv-row-label { width: 70px !important; font-size: 0.75rem !important; }
.mv-row-value { width: 65px !important; font-size: 0.75rem !important; }
.mv-row-pctl { width: 35px !important; }
.bc-bw-name { width: 60px !important; font-size: 0.75rem !important; }
.bc-bw-lean { width: 45px !important; font-size: 0.65rem !important; }
.htip::after { width: 150px !important; }
.gs-dialog { margin: 0 8px !important; max-width: calc(100vw - 16px) !important; }
}
/* ── Home: Section Headers ─────────────────────────────────────────────── */
.hp-section-header {
margin-bottom: 1.4rem;
padding-left: 1rem;
border-left: 3px solid var(--accent);
}
/* .hp-section-title canonical rule: see upgrade block below (0.75rem uppercase Inter) */
.hp-section-sub {
display: block;
font-family: var(--font-ui);
font-size: 0.75rem;
color: var(--text-3);
margin-top: 0.25rem;
font-style: normal;
letter-spacing: 0;
}
/* ── By the Numbers — horizontal scroll strip ──────────────────────────── */
.hp-btn-section { margin-bottom: 3rem; }
/* By the Numbers carousel */
.hp-btn-carousel {
position: relative;
border: 1px solid var(--border);
border-radius: 10px;
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-hi) 100%);
overflow: hidden;
}
.hp-btn-carousel .carousel-inner { min-height: 140px; }
.hp-btn-carousel .carousel-item { transition: transform 0.6s ease-in-out; }
.hp-btn-carousel .carousel-control-prev,
.hp-btn-carousel .carousel-control-next {
width: 36px; opacity: 0.4;
}
.hp-btn-carousel .carousel-control-prev:hover,
.hp-btn-carousel .carousel-control-next:hover { opacity: 0.8; }
.hp-btn-carousel .carousel-indicators {
bottom: 4px; margin-bottom: 0;
}
.hp-btn-carousel .carousel-indicators button {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-3); opacity: 0.4; border: none;
}
.hp-btn-carousel .carousel-indicators button.active {
background: var(--accent); opacity: 1;
}
.hp-btn-card {
padding: 2rem 3rem 1.8rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.hp-btn-number {
font-family: var(--font-brand);
font-size: 1.8rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 0.15rem;
}
.hp-btn-text {
font-size: 0.75rem;
line-height: 1.55;
color: var(--text-2);
margin: 0;
flex: 1;
}
.hp-btn-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
cursor: pointer;
text-decoration: none;
letter-spacing: 0.02em;
opacity: 0.7;
transition: opacity 0.15s;
}
.hp-btn-link:hover { opacity: 1; text-decoration: underline; }
/* ── Explore Stories — magazine-style cards ─────────────────────────────── */
.hp-exp-section { margin-bottom: 3rem; }
.hp-exp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.hp-exp-card {
padding: 1.6rem 1.5rem 1.3rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hp-exp-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,168,67,0.1);
border-color: rgba(212,168,67,0.25);
}
/* Alternating backgrounds for visual rhythm */
.hp-exp-alt {
background: linear-gradient(160deg, var(--surface) 0%, var(--surface-hi) 100%);
}
.hp-exp-state {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
background: rgba(212,168,67,0.1);
padding: 0.2rem 0.55rem;
border-radius: 3px;
margin-bottom: 0.65rem;
}
.hp-exp-hook {
font-family: var(--font-brand);
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0;
color: var(--text);
margin-bottom: 0.55rem;
line-height: 1.35;
}
.hp-exp-teaser {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 0.015em;
color: var(--text-2);
margin: 0 0 0.75rem 0;
line-height: 1.65;
font-style: normal;
}
.hp-exp-body { animation: fade-up 0.25s ease; margin-top: 0.75rem; }
.hp-exp-full {
font-size: 0.85rem;
color: var(--text);
line-height: 1.7;
margin: 0 0 0.75rem 0;
}
.hp-exp-link {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
cursor: pointer;
text-decoration: none;
margin-top: 0.25rem;
padding: 0.3rem 0.8rem;
border: 1px solid rgba(212,168,67,0.3);
border-radius: 5px;
transition: all 0.15s;
}
.hp-exp-link:hover {
background: rgba(212,168,67,0.12);
border-color: var(--accent);
text-decoration: none;
}
.hp-exp-toggle {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
letter-spacing: 0.02em;
transition: color 0.15s;
}
.hp-exp-toggle:hover { color: var(--accent-hi); text-decoration: none; }
/* ── Discover tab ──────────────────────────────────────────────────────── */
.disc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.disc-chip {
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-2);
cursor: pointer;
transition: all 0.15s;
}
.disc-chip:hover {
border-color: var(--accent);
color: var(--text);
}
.disc-chip-active {
background: rgba(212,168,67,0.15);
border-color: var(--accent);
color: var(--accent);
}
/* Editor's Picks */
.disc-picks {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.disc-picks-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.disc-picks-badge {
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
background: rgba(212,168,67,0.1);
border: 1px solid rgba(212,168,67,0.25);
padding: 0.25rem 0.7rem;
border-radius: 20px;
}
.disc-picks-sub {
font-size: 0.75rem;
color: var(--text-3);
font-style: italic;
}
.disc-picks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.disc-pick-card {
padding: 1.4rem 1.3rem;
background: linear-gradient(160deg, var(--surface) 0%, rgba(212,168,67,0.06) 100%);
border: 1px solid rgba(212,168,67,0.2);
border-radius: 10px;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.disc-pick-card:hover {
transform: translateY(-3px);
border-color: rgba(212,168,67,0.4);
box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(212,168,67,0.1);
}
@media (max-width: 767.98px) {
.disc-picks-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
.disc-grid { grid-template-columns: 1fr; }
}
/* ── SOTD — breathing room ─────────────────────────────────────────────── */
.bc-sotd { margin-top: 1rem; margin-bottom: 3rem; }
.bc-home > .bc-sotd { margin-top: 1rem; }
/* ── Home Editor's Pick ──────────────────────────────────────────────── */
.hp-pick-section {
margin-top: 2rem;
margin-bottom: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.hp-pick-card {
max-width: 680px;
margin: 0 auto;
padding: 1.8rem 2rem;
background: linear-gradient(160deg, var(--surface) 0%, rgba(212,168,67,0.06) 100%);
border: 1px solid rgba(212,168,67,0.2);
border-left: 4px solid var(--accent);
border-radius: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.hp-pick-card:hover {
border-color: rgba(212,168,67,0.4);
box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(212,168,67,0.08);
}
.hp-pick-label {
margin-bottom: 0.75rem;
}
/* ── County Search — centered ──────────────────────────────────────────── */
.hp-county-search {
margin-bottom: 3rem;
max-width: 520px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.hp-county-search .hp-section-header {
text-align: center;
border-left: none;
padding-left: 0;
}
.hp-county-input-row {
text-align: left;
}
/* ── Mobile overrides ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.hp-btn-card { flex: 0 0 180px; min-width: 180px; }
.hp-exp-grid { grid-template-columns: 1fr; }
.hp-section-header { padding-left: 0.75rem; }
.hp-section-title { font-size: 1.15rem; }
}
/* ── Versus Quick Picks ────────────────────────────────────────────────── */
.bc-cmp-quickpicks { display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin:0.75rem 0 1rem; }
.bc-cmp-qp-label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.bc-cmp-qp-btn { background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 14px; border-radius:6px; font-size:0.75rem; cursor:pointer; font-family:var(--font-ui); transition:all 0.15s; }
.bc-cmp-qp-btn:hover { border-color:var(--accent); color:var(--accent); }
/* ── Home County Search ────────────────────────────────────────────────── */
.hp-county-input-row { max-width: 480px; }
.hp-county-input-row .selectize-input,
.hp-county-input-row .selectize-input input {
font-family: var(--font-brand) !important;
font-size: 1rem !important;
color: var(--text) !important;
}
.hp-county-input-row .selectize-input::placeholder,
.hp-county-input-row .selectize-input input::placeholder {
font-family: var(--font-brand) !important;
color: var(--text-3) !important;
}
.hp-county-input-row .selectize-dropdown,
.hp-county-input-row .selectize-dropdown .option {
font-family: var(--font-brand) !important;
font-size: 0.95rem !important;
}
/* ── Rankings Share Button ─────────────────────────────────────────────── */
.bc-ranks-share-btn { display:block; width:100%; margin-top:0.75rem; padding:8px; background:transparent; border:1px solid var(--accent); color:var(--accent); border-radius:6px; font-size:0.75rem; cursor:pointer; font-family:var(--font-ui); transition:all 0.15s; }
.bc-ranks-share-btn:hover { background:var(--accent); color:var(--bg); }
/* ════════════════════════════════════════════════════════════════════════════
MOVE / VISIT — MOBILE REVAMP (April 2026)
Transforms the county explorer into a touch-native experience on phones.
All rules are additive — no desktop styles are removed.
════════════════════════════════════════════════════════════════════════════ */
/* ── 1. Map height: shrink on mobile to leave room for the briefing ── */
@media (max-width: 767.98px) {
.mv-map-wrap .leaflet.html-widget-output { height: 380px !important; }
}
@media (max-width: 575.98px) {
.mv-map-wrap .leaflet.html-widget-output { height: 300px !important; }
}
@media (max-width: 480px) {
.mv-map-wrap .leaflet.html-widget-output { height: 250px !important; }
}
/* ── 2. Map controls: stack vertically, full-width selectize ── */
@media (max-width: 575.98px) {
.mv-map-controls {
flex-direction: column;
gap: 8px;
padding: 8px 12px 10px;
}
.mv-control-group { width: 100%; }
.mv-control-group .selectize-control,
.mv-control-group .selectize-input { width: 100% !important; }
.mv-control-divider { display: none; }
}
/* At very small sizes, hide the Color by control (state filter is more important) */
@media (max-width: 420px) {
.mv-color-ctrl { display: none; }
}
/* ── 3. Hero strip stat boxes: 2×2 grid on phones ── */
@media (max-width: 480px) {
.mv-hero-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 16px;
justify-items: start;
}
.mv-hs-val { font-size: 1.05rem; }
.mv-hs-lbl { font-size: 0.65rem; }
}
/* ── 4. Briefing: card chrome + handle indicator on mobile ── */
@media (max-width: 767.98px) {
.mv-briefing {
border-radius: 14px 14px 0 0;
border: 1px solid var(--border);
border-bottom: none;
padding: 0 12px 24px;
margin-top: 6px;
}
/* Subtle drag-handle indicator at the top */
.mv-briefing::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 10px auto 14px;
}
}
/* ── 5. Sticky mobile section-jump nav ── */
.mv-mobile-nav { display: none; }
@media (max-width: 767.98px) {
.mv-mobile-nav {
display: flex;
gap: 5px;
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 7px 10px 8px;
margin: 0 -12px 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mv-mobile-nav::-webkit-scrollbar { display: none; }
.mv-mnav-btn {
flex-shrink: 0;
background: var(--surface-hi);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 0.71rem;
font-weight: 600;
font-family: var(--font-ui);
padding: 5px 13px;
border-radius: 16px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
min-height: 32px;
}
.mv-mnav-btn:hover,
.mv-mnav-btn:active {
border-color: var(--accent);
color: var(--accent);
}
}
/* ── 6. Comparison accordion ── */
.mv-cg-chevron {
display: inline-block;
margin-left: 6px;
transition: transform 0.2s ease;
opacity: 0.55;
font-size: 0.75rem;
vertical-align: middle;
}
/* On desktop: chevrons hidden, rows always visible */
@media (min-width: 768px) {
.mv-cg-chevron { display: none; }
.mv-cg-rows.mv-cg-collapsed { display: block !important; }
}
/* On mobile: rows collapsible, group header is clickable */
@media (max-width: 767.98px) {
.mv-cg-block .mv-comp-group { cursor: pointer; user-select: none; }
.mv-cg-rows.mv-cg-collapsed { display: none; }
}
/* ── 7. Enriched sections: collapse on mobile ── */
/* Label arrow — right-pointing when collapsed, down when expanded */
/* (position: relative already set in primary definition above) */
.mv-enriched-label::after {
content: '\25b8'; /* ▸ right-pointing */
margin-left: 6px;
display: none;
transition: transform 0.2s ease;
opacity: 0.5;
font-size: 0.75rem;
}
@media (max-width: 767.98px) {
.mv-enriched-label::after { display: inline; }
/* Expanded state: arrow rotates to point down */
.mv-enriched-section:not(.mv-collapsed) .mv-enriched-label::after {
display: inline-block;
transform: rotate(90deg);
}
/* Collapsed: hide content */
.mv-enriched-section.mv-collapsed .mv-enriched-list,
.mv-enriched-section.mv-collapsed .mv-enriched-chips,
.mv-enriched-section.mv-collapsed .mv-season-grid,
.mv-enriched-section.mv-collapsed .mv-takeaways,
.mv-enriched-section.mv-collapsed .mv-enriched-desc,
.mv-enriched-section.mv-collapsed > p { display: none; }
/* Tighten spacing between collapsed sections */
.mv-enriched-section.mv-collapsed { margin-bottom: 0.5rem; }
}
/* ── 8. Neighbor table: hide low-priority columns on mobile, fix overflow ── */
@media (max-width: 575.98px) {
/* Keep: County(1), Income(2), Home Value(3) — hide Rent(4), Crime(5), Unemp(6) */
.mv-nb-cell:nth-child(n+4) { display: none; }
.mv-nb-cell.mv-nb-name { flex: 2; }
.mv-nb-table { font-size: 0.85rem; }
}
@media (max-width: 375px) {
/* At iPhone SE: further narrow — show County + Income only */
.mv-nb-cell:nth-child(n+3) { display: none; }
.mv-nb-cell.mv-nb-name { flex: 3; }
}
/* ── 9. Comparison table metric rows: better fit on narrow screens ── */
@media (max-width: 480px) {
.mv-row-label { width: 90px; font-size: 0.75rem; }
.mv-row-value { width: 76px; font-size: 0.85rem; }
}
@media (max-width: 375px) {
/* Stack label above value at 375px — no horizontal squeeze */
.mv-row {
flex-wrap: wrap;
padding: 0.45rem 0.75rem;
gap: 0;
}
.mv-row-label {
width: 100%;
margin-bottom: 1px;
font-size: 0.75rem;
}
.mv-row-value { width: auto; flex-shrink: 0; font-size: 0.9rem; }
.mv-row-bar-wrap { display: none; }
.mv-row-pctl { font-size: 0.75rem; margin-left: auto; }
.mv-row-avg { display: none !important; }
}
/* ── 10. Quick-pick chips: 44px touch target ── */
@media (max-width: 767.98px) {
.mv-qp-chip {
min-height: 38px;
display: inline-flex;
align-items: center;
}
/* Search bar: full width */
.mv-search-bar { padding: 0 4px; }
.mv-search-input .selectize-control,
.mv-search-input .selectize-input { width: 100% !important; }
/* Selectize dropdown: no viewport overflow */
.mv-search-input .selectize-dropdown { max-width: calc(100vw - 24px) !important; }
}
/* ── 11. Verdict gauges: tighter on phones ── */
@media (max-width: 480px) {
.mv-gauge { padding: 0.6rem 0; }
.mv-gauge-score { font-size: 1.15rem; }
.mv-gauge-breakdown { font-size: 0.75rem; }
.mv-gb-row { padding: 2px 0; }
}
/* ── 12. Hero strip: tighten further at 375px ── */
@media (max-width: 375px) {
.mv-hero-title { font-size: 1rem; }
.mv-hero-sub { font-size: 0.75rem; }
.mv-hs-val { font-size: 0.95rem; }
}
/* ── 13. Context narrative: clamp on very small screens ── */
@media (max-width: 480px) {
.mv-context-body { font-size: 0.81rem; line-height: 1.6; }
}
/* ── 14. Wrap padding: full-width utilization on phones ── */
@media (max-width: 575.98px) {
.mv-wrap { padding: 0 4px; }
.mv-briefing-wrap { margin: 0 -4px; }
}
/* ── 15. Leaflet legend: hide on very small screens (map too small to scroll) ── */
@media (max-width: 420px) {
.mv-map-wrap .leaflet-bottom.leaflet-right { display: none; }
}
/* ── 16. Touch: home button bigger tap target ── */
@media (max-width: 767.98px) {
.leaflet-home-btn {
min-width: 36px !important;
min-height: 36px !important;
padding: 8px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
Move / Visit — Phase 2: Leaderboards, Scout, Compare, National Rank
════════════════════════════════════════════════════════════════════════════ */
/* ── Right-panel content inner padding (lateral buffer) ─────────────────── */
.mv-content-inner { padding: 0 0.85rem 1rem; }
/* ── Map pane flex fix — controls don't compress the map, map fills remainder ── */
.mv-map-controls { flex-shrink: 0; }
.mv-map-wrapper { flex: 1; min-height: 0; overflow: hidden; }
.mv-map-wrapper .leaflet.html-widget-output,
.mv-map-wrapper .leaflet-container { height: 100% !important; width: 100% !important; }
/* ── Leaderboard cards ───────────────────────────────────────────────────── */
.mv-leaderboards { margin-bottom: 1.25rem; }
.mv-lb-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.65rem; }
.mv-lb-title { font-family: var(--font-brand); font-size: 1rem; color: var(--text); }
.mv-lb-sub { font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-3); }
.mv-lb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
.mv-lb-card { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; overflow: visible; position: relative; }
.mv-lb-card-head { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--surface-hi); border-radius: 7px 7px 0 0; }
.mv-lb-card-title { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.2rem; }
.mv-lb-card-desc { font-family: var(--font-ui); font-size: 0.64rem; color: var(--text-3); line-height: 1.4; }
.mv-lb-rows { padding: 0.2rem 0; }
.mv-lb-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.8rem; cursor: pointer; transition: background 0.1s; position: relative; overflow: visible; }
.mv-lb-row:hover { background: var(--surface-hi); }
.mv-lb-rank { font-family: var(--font-brand); font-size: 0.75rem; color: var(--accent); width: 20px; flex-shrink: 0; }
.mv-lb-info { flex: 1; min-width: 0; }
.mv-lb-cname { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-lb-sabb { font-family: var(--font-ui); font-size: 0.65rem; color: var(--text-3); }
.mv-lb-val { font-family: var(--font-ui); font-size: 0.75rem; color: var(--accent-hi); font-weight: 600; flex-shrink: 0; min-width: 55px; text-align: right; }
.mv-lb-score-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.04); }
.mv-lb-score-fill { height: 100%; background: var(--accent); opacity: 0.35; }
/* Leaderboard card title row (title + optional info btn) */
.mv-lb-card-title-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.mv-lb-info-btn { background: none; border: 1px solid var(--border-hi); color: var(--text-3); cursor: pointer; font-size: 0.68rem; padding: 1px 5px; line-height: 1.4; border-radius: 3px; position: relative; font-family: var(--font-ui); }
.mv-lb-info-btn:hover { color: var(--accent); border-color: var(--accent); }
.mv-lb-info-btn[data-tip]::after {
content: attr(data-tip);
position: absolute;
/* Appear ABOVE the button so the scroll container's bottom doesn't clip it.
right:0 aligns the tooltip's right edge with the button's right edge, extending left.
On narrow screens or left-column cards, this stays well within the pane. */
bottom: calc(100% + 6px);
top: auto;
right: 0;
left: auto;
transform: none;
background: var(--surface-top);
border: 1px solid var(--border-hi);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.72rem;
color: var(--text);
white-space: pre-line;
width: max-content;
max-width: 240px;
z-index: 99999;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,168,67,0.12);
text-align: left;
line-height: 1.65;
}
/* Hover still works; click adds .info-open for persistent show */
.mv-lb-info-btn:hover[data-tip]::after { opacity: 1; }
.mv-lb-info-btn.info-open[data-tip]::after { opacity: 1 !important; }
/* Column header row */
.mv-lb-col-header { display: flex; align-items: center; padding: 0.25rem 0.8rem; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15); }
.mv-lb-col-county { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); flex: 1; }
.mv-lb-col-metric { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; min-width: 55px; text-align: right; }
@media (max-width: 600px) { .mv-lb-grid { grid-template-columns: 1fr; } }
/* ── State Overview Panel ────────────────────────────────────────────────── */
.mv-state-overview {
background: var(--surface);
border: 1px solid var(--border-hi);
border-radius: 10px;
padding: 1rem 1.1rem;
margin-bottom: 1.25rem;
}
.mv-so-header {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
}
.mv-so-flag {
color: var(--accent);
font-size: 0.7rem;
margin-top: 1px;
}
.mv-so-title { display: flex; align-items: baseline; gap: 0; }
.mv-so-state-name {
font-family: var(--font-brand);
font-size: 1.05rem;
color: var(--text);
letter-spacing: 0.03em;
}
.mv-so-county-count {
font-family: var(--font-ui);
font-size: 0.72rem;
color: var(--text-3);
}
/* DNA strip */
.mv-so-dna {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.mv-so-dim { display: flex; flex-direction: column; gap: 0.2rem; }
.mv-so-dim-label {
font-family: var(--font-ui);
font-size: 0.62rem;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mv-so-dim-icon { margin-right: 0.25rem; opacity: 0.7; }
.mv-so-dim-bar-wrap {
height: 5px;
background: rgba(255,255,255,0.08);
border-radius: 3px;
overflow: hidden;
}
.mv-so-dim-bar {
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.mv-so-dim-pctl {
font-family: var(--font-data);
font-size: 0.68rem;
font-weight: 600;
}
/* Narrative */
.mv-so-narrative {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--text-2);
line-height: 1.55;
margin-bottom: 0.85rem;
}
.mv-so-narrative strong { color: var(--text); font-weight: 700; }
/* Persona chips row */
.mv-so-personas { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mv-so-personas-label {
font-family: var(--font-ui);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
width: 100%;
margin-bottom: 0.1rem;
}
.mv-so-persona-chip {
display: flex;
align-items: center;
gap: 0.3rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 20px;
padding: 0.2rem 0.65rem;
font-size: 0.72rem;
}
.mv-so-persona-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.mv-so-persona-label { color: var(--text-3); }
.mv-so-persona-county { color: var(--text); font-weight: 600; }
.mv-so-persona-score { font-family: var(--font-data); font-size: 0.67rem; font-weight: 600; }
@media (max-width: 600px) {
.mv-so-dna { grid-template-columns: repeat(3, 1fr); }
}
/* ── Scout: Find My County ───────────────────────────────────────────────── */
.mv-scout-section { margin-bottom: 1.25rem; }
.mv-scout-toggle { width: 100%; text-align: left; padding: 0.6rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--accent); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, border-radius 0.15s; font-family: var(--font-ui); }
.mv-scout-toggle:hover { background: var(--surface-hi); border-color: var(--accent); }
.mv-scout-section:has(.mv-scout-open) .mv-scout-toggle { border-radius: 8px 8px 0 0; border-bottom-color: transparent; }
.mv-scout-panel { display: none; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; padding: 0.85rem 1rem; }
.mv-scout-panel.mv-scout-open { display: block; }
.mv-scout-desc { font-size: 0.77rem; color: var(--text-3); margin-bottom: 0.75rem; line-height: 1.5; }
.mv-scout-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 0.75rem; }
.mv-scout-filter { display: flex; flex-direction: column; }
.mv-scout-filter .form-group { margin-bottom: 0; }
.mv-scout-flabel { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 0.25rem; }
.mv-scout-filter select.form-control { background: var(--surface-hi) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 5px; padding: 0.3rem 0.55rem; font-size: 0.85rem; height: auto; }
.mv-scout-filter select.form-control:focus { border-color: var(--accent) !important; outline: none; }
.mv-scout-actions { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }
.mv-scout-btn { background: var(--accent) !important; border: none !important; color: var(--bg) !important; font-size: 0.85rem; font-weight: 700; padding: 0.4rem 1.2rem; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); transition: opacity 0.15s; }
.mv-scout-btn:hover { opacity: 0.85; }
.mv-scout-results { border-top: 1px solid var(--border); padding-top: 0.65rem; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.mv-sr-header { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.5rem; }
.mv-sr-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.1s; border-radius: 4px; }
.mv-sr-item:hover { background: var(--surface-hi); }
.mv-sr-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.mv-sr-nat-rank { font-family: var(--font-brand); font-size: 0.75rem; color: var(--accent); width: 42px; flex-shrink: 0; }
.mv-sr-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-sr-state { font-size: 0.65rem; color: var(--text-3); }
.mv-sr-scores { display: flex; flex-direction: column; gap: 0.18rem; width: 115px; flex-shrink: 0; }
.mv-sr-score-row { display: flex; align-items: center; gap: 0.3rem; }
.mv-sr-slabel { font-size: 0.56rem; font-weight: 700; color: var(--text-3); width: 9px; flex-shrink: 0; }
.mv-sr-bar-wrap { flex: 1; height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.mv-sr-bar { height: 100%; border-radius: 2px; }
.mv-sr-bar-afford { background: #22c55e; }
.mv-sr-bar-live { background: #3b82f6; }
.mv-sr-bar-mom { background: var(--accent); }
.mv-sr-sval { font-size: 0.58rem; color: var(--text-3); width: 18px; text-align: right; flex-shrink: 0; }
.mv-scout-empty { font-size: 0.85rem; color: var(--text-3); padding: 0.75rem 0; text-align: center; }
@media (max-width: 600px) {
.mv-scout-filters { grid-template-columns: repeat(2, 1fr); }
.mv-sr-scores { display: none; }
}
@media (max-width: 400px) { .mv-scout-filters { grid-template-columns: 1fr; } }
/* ── National rank badge (in briefing header) ────────────────────────────── */
.mv-header-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; margin-top: 0.2rem; }
.mv-nat-rank-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.5rem; background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.22); border-radius: 4px; font-size: 0.65rem; color: var(--accent); white-space: nowrap; }
.mv-nat-rank-globe { font-size: 0.75em; }
.mv-nat-rank-n { font-family: var(--font-brand); font-weight: 400; }
.mv-nat-rank-of { color: var(--text-3); font-family: var(--font-body); }
/* ── Compare bar (above briefing) — hidden until a county is loaded ─────── */
/* Hide compare bar when no .mv-briefing exists inside the wrap */
.mv-compare-bar { display: none; align-items: center; gap: 0.65rem; padding: 0.65rem 0; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.mv-briefing-wrap:has(.mv-briefing) .mv-compare-bar { display: flex; }
/* Empty-state prompt shown before any county is selected */
.mv-empty-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
gap: 0.75rem;
color: var(--text-3);
text-align: center;
}
.mv-empty-prompt i { font-size: 2rem; opacity: 0.4; }
.mv-empty-prompt p { font-size: 0.95rem; margin: 0; line-height: 1.6; font-family: var(--font-brand); font-style: italic; }
/* Hide empty prompt once briefing appears */
.mv-briefing-wrap:has(.mv-briefing) .mv-empty-prompt { display: none; }
.mv-compare-bar-left { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.mv-cmp-icon { color: var(--accent); font-size: 0.75rem; }
.mv-cmp-label { font-size: 0.65rem; font-weight: 700; color: var(--text-3); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; }
.mv-compare-bar-input { flex: 1; min-width: 0; }
.mv-compare-bar-input .form-group { margin-bottom: 0; }
.mv-compare-bar-input .selectize-input { background: var(--surface-hi) !important; border-color: var(--border) !important; color: var(--text) !important; font-size: 0.85rem; min-height: 34px; padding: 5px 8px; }
.mv-compare-bar-input .selectize-dropdown { background: var(--surface) !important; border-color: var(--border) !important; }
.mv-compare-bar-input .selectize-dropdown .option { color: var(--text) !important; font-size: 0.85rem; }
.mv-compare-bar-input .selectize-dropdown .active { background: var(--accent-dim) !important; }
/* ── Compare panel ───────────────────────────────────────────────────────── */
.mv-compare-panel { background: var(--surface); border: 1px solid var(--border-hi); border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.mv-cp-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; background: var(--surface-hi); border-bottom: 1px solid var(--border); }
.mv-cp-col { display: flex; flex-direction: column; }
.mv-cp-col-a { align-items: flex-end; text-align: right; }
.mv-cp-col-b { align-items: flex-start; }
.mv-cp-col-name { font-size: 0.86rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.mv-cp-col-rank { font-size: 0.65rem; color: var(--accent); margin-top: 0.15rem; }
.mv-cp-vs-badge { font-family: var(--font-brand); font-size: 1.05rem; color: var(--accent); text-align: center; padding: 0 0.4rem; }
.mv-cp-scores { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.mv-cp-score-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.mv-cp-score-a-wrap { display: flex; align-items: center; gap: 0.35rem; flex-direction: row-reverse; }
.mv-cp-score-b-wrap { display: flex; align-items: center; gap: 0.35rem; }
.mv-cp-score-bar { height: 8px; border-radius: 4px; transition: width 0.5s ease; }
.mv-cp-bar-a { background: rgba(212,168,67,0.3); }
.mv-cp-bar-b { background: rgba(59,130,246,0.3); }
.mv-cp-win-bar.mv-cp-bar-a { background: var(--accent); }
.mv-cp-win-bar.mv-cp-bar-b { background: #3b82f6; }
.mv-cp-score-num { font-size: 0.75rem; font-weight: 700; color: var(--text-3); width: 22px; flex-shrink: 0; }
.mv-cp-win-num { color: var(--text) !important; }
.mv-cp-score-lbl { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); text-align: center; white-space: nowrap; }
.mv-cp-deltas { padding: 0.45rem 1rem 0.7rem; }
.mv-cp-delta-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding-bottom: 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 0.25rem; }
.mv-cp-dcol-a { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cp-dcol-b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cp-delta-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px solid rgba(255,255,255,0.025); }
.mv-cp-dval { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.mv-cp-dval-a { text-align: right; }
.mv-cp-delta-win { color: var(--text) !important; }
.mv-cp-dval-a.mv-cp-delta-win::after { content: " \2713"; color: #22c55e; font-size: 0.7em; }
.mv-cp-dval-b.mv-cp-delta-win::before { content: "\2713 "; color: #22c55e; font-size: 0.7em; }
.mv-cp-dlabel { font-size: 0.65rem; color: var(--text-3); text-align: center; white-space: nowrap; }
.mv-cp-clear { padding: 0.45rem 1rem; border-top: 1px solid var(--border); text-align: right; }
.mv-cp-clear-btn { background: none; border: none; color: var(--text-3); font-size: 0.75rem; cursor: pointer; padding: 0.15rem 0.35rem; font-family: var(--font-ui); transition: color 0.15s; }
.mv-cp-clear-btn:hover { color: var(--text); }
@media (max-width: 600px) {
.mv-cp-col-name { font-size: 0.75rem; }
.mv-cp-delta-cols { display: none; }
.mv-cp-dval { font-size: 0.75rem; }
.mv-compare-bar { flex-wrap: wrap; }
}
/* ── Scout card ────────────────────────────────────────────────────────────── */
.mv-scout-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 0.9rem 1rem;
margin-bottom: 0.75rem;
}
/* .mv-scout-card-head and hd-title/sub replaced by .mv-panel-head + .mv-scout-sub */
/* Override grid for scout filters: 2×3 layout */
.mv-scout-filters {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.55rem !important;
}
.mv-scout-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.mv-scout-hint {
font-size: 0.75rem;
color: #7a8a9b;
line-height: 1.3;
}
.mv-scout-hint .fa-location-dot { color: #d4a843; }
/* ── Scout result list improvements ─────────────────────────────────────── */
.mv-sr-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid #2e2818;
}
.mv-sr-count {
font-size: 0.75rem;
font-weight: 600;
color: #e8dcc8;
}
.mv-sr-map-hint {
font-size: 0.75rem;
color: #7a8a9b;
white-space: nowrap;
}
.mv-sr-map-hint .fa-location-dot { color: #d4a843; }
/* Right column wrapper (vals + score bars) */
.mv-sr-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
/* Key metric chips row */
.mv-sr-vals {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.mv-sr-val-chip {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 0.75rem;
letter-spacing: 0.02em;
padding: 1px 5px;
border-radius: 3px;
white-space: nowrap;
line-height: 1.4;
}
.mv-sr-val-inc {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
}
.mv-sr-val-hv {
background: rgba(212, 168, 67, 0.14);
color: #d4a843;
}
.mv-sr-val-cr {
background: rgba(239, 68, 68, 0.12);
color: #f87171;
}
/* ══════════════════════════════════════════════════════════════════════════════
Phase 2 — Typography, Section Dividers, Card Hierarchy
══════════════════════════════════════════════════════════════════════════════ */
/* mv-gauge-score consolidated above at definition site */
.bc-detail-value {
font-family: var(--font-data) !important;
font-size: 1.2rem !important;
letter-spacing: 0.01em;
}
/* Tighten uppercase tracking on section labels */
.bc-section {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.74rem !important;
color: var(--text-2) !important;
}
/* ── Card hierarchy: featured card gets gold glow ──────────────────────────── */
.bc-card-featured {
border-color: rgba(212,168,67,0.45) !important;
border-left: 3px solid var(--accent) !important;
box-shadow: 0 0 0 1px rgba(212,168,67,0.12),
0 4px 24px rgba(212,168,67,0.1),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.bc-card-featured:hover {
border-color: rgba(212,168,67,0.6) !important;
}
/* ── Atlas: hero stat dateline bar ────────────────────────────────────────── */
.bc-stat-dateline {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px 14px; padding: 8px 16px;
background: rgba(16, 14, 11, 0.96);
border-bottom: 1px solid rgba(212,168,67,0.14);
font-size: 0.75rem;
}
.bc-dl-item {
display: flex; align-items: center; gap: 5px;
}
.bc-dl-icon {
color: var(--accent); font-size: 0.65rem; flex-shrink: 0;
}
.bc-dl-val {
font-weight: 700; color: var(--text);
font-family: var(--font-brand);
font-size: 0.85rem;
}
.bc-dl-lbl {
color: var(--text-3); font-size: 0.65rem;
text-transform: uppercase; letter-spacing: 0.08em;
}
.bc-dl-sep {
color: var(--border-hi); font-size: 0.75rem; user-select: none;
}
@media (max-width: 576px) {
.bc-stat-dateline { padding: 6px 10px; gap: 4px 10px; }
.bc-dl-lbl { display: none; }
}
/* Region chip + spacer in stat dateline */
.bc-dl-spacer { flex: 1; min-width: 8px; }
.bc-dl-region {
font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
padding: 2px 7px; border-radius: 3px;
background: rgba(212,168,67,0.12);
color: var(--accent);
border: 1px solid rgba(212,168,67,0.3);
white-space: nowrap;
margin-left: auto;
}
/* ── Atlas: overview blurb ─────────────────────────────────────────────────── */
.bc-overview-blurb {
margin: 0; padding: 10px 16px 8px;
font-size: 0.85rem; line-height: 1.55;
color: var(--text-2);
font-style: italic;
border-bottom: 1px solid rgba(212,168,67,0.08);
background: rgba(16,14,11,0.72);
animation: bc-fade-in 0.3s ease both;
}
/* ── Move/Visit: basemap toggle buttons ────────────────────────────────────── */
.mv-basemap-btns {
display: flex; gap: 4px;
}
.mv-basemap-btn {
padding: 3px 9px; border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface-hi); color: var(--text-2);
font-size: 0.75rem; cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.mv-basemap-btn:hover {
border-color: var(--accent); color: var(--accent);
}
.mv-basemap-active {
background: var(--accent-dim) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
font-weight: 600;
}
/* ── Versus: flag in comparison header ─────────────────────────────────────── */
.cmp-entity-head {
display: flex; align-items: center; gap: 8px;
justify-content: inherit;
}
.cmp-entity-flag {
width: 28px; height: 18px; object-fit: cover;
border-radius: 2px; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.12);
}
/* ── Rankings: top-3 rows get medal-color left border ──────────────────────── */
.bc-power-list > .bc-power-row:nth-of-type(1) {
border-left: 3px solid #d4a843;
background: rgba(212,168,67,0.03);
}
.bc-power-list > .bc-power-row:nth-of-type(2) {
border-left: 3px solid #9aa0a6;
background: rgba(154,160,166,0.02);
}
.bc-power-list > .bc-power-row:nth-of-type(3) {
border-left: 3px solid #c87533;
background: rgba(200,117,51,0.02);
}
/* ═══════════════════════════════════════════════════════════════════════════
SESSION UPGRADES — appended 20260419
═══════════════════════════════════════════════════════════════════════════ */
/* ── Existing rule overrides ────────────────────────────────────────────── */
/* Feature cards: strip per-card colors, keep minimal chrome */
.hp-card-counties { border-top: transparent !important; }
.hp-card-atlas { border-top: transparent !important; }
.hp-card-rankings { border-top: transparent !important; }
.hp-card-versus { border-top: transparent !important; }
.hp-card-scout { border-top: transparent !important; }
.hp-card-quiz { border-top: transparent !important; }
.hp-card-counties .hp-banner-icon,
.hp-card-atlas .hp-banner-icon,
.hp-card-rankings .hp-banner-icon,
.hp-card-versus .hp-banner-icon,
.hp-card-scout .hp-banner-icon,
.hp-card-quiz .hp-banner-icon { color: var(--text-3) !important; }
.hp-card-counties .hp-card-banner,
.hp-card-atlas .hp-card-banner,
.hp-card-rankings .hp-card-banner,
.hp-card-versus .hp-card-banner,
.hp-card-scout .hp-card-banner,
.hp-card-quiz .hp-card-banner { background: none !important; }
/* Section headers: quieter, not competing with SOTD hero */
.hp-section-title {
font-size: 0.75rem !important;
font-family: var(--font-ui) !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
color: var(--text-3) !important;
text-transform: uppercase !important;
}
.hp-section-header {
border-left: none !important;
padding-left: 0 !important;
}
/* UPGRADE 1 — Atlas Identity Card */
.bc-identity-card {
background: #1e1a14;
border-left: 4px solid #d4a843;
border-radius: 8px;
padding: 0.85rem 1.25rem;
margin: 0.75rem 0 1rem;
animation: bc-fade-in 0.4s ease both;
}
.bc-id-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.bc-id-badge {
display: inline-block;
background: #2a2520;
border: 1px solid #d4a84355;
border-radius: 20px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #d4a843;
}
.bc-id-sentence {
color: #c8b89a;
font-size: 0.85rem;
line-height: 1.5;
margin-top: 0.25rem;
}
@keyframes bc-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* UPGRADE 2 — SOTD upgrades */
.bc-sotd-name-lg {
font-family: var(--font-brand);
font-size: clamp(1.2rem, 3vw, 1.7rem);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.1;
}
.bc-sotd-badge {
display: inline-block;
background: #2a2520;
border: 1px solid rgba(212,168,67,0.4) !important;
color: var(--accent) !important;
border-radius: 20px;
padding: 0.2rem 0.65rem;
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.35rem;
letter-spacing: 0.03em;
}
.bc-sotd-dyk {
color: #c8b89a;
font-size: 0.85rem;
line-height: 1.4;
margin-top: 0.45rem;
animation: bc-fade-in 0.4s ease 0.15s both;
}
.bc-sotd-overview {
margin: 0.55rem 0 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--text);
font-style: normal;
max-width: 520px;
animation: bc-fade-in 0.4s ease 0.2s both;
}
@media (max-width: 640px) {
.bc-sotd-name-lg { font-size: 1.1rem; }
.bc-sotd { max-width: 100%; overflow: hidden; }
.bc-sotd-inner { flex-wrap: wrap; gap: 0.5rem; }
}
/* UPGRADE 3 — Pulse: Notable Patterns */
.pulse-stories-list { margin-top: 1rem; }
.pulse-story-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(212,168,67,0.12);
font-size: 0.9rem;
line-height: 1.5;
color: #e8dcc8;
}
.pulse-story-dot { color: #d4a843; font-size: 1rem; flex-shrink: 0; }
.pulse-story-text { flex: 1; }
.pulse-story-link {
color: #d4a843;
font-size: 0.85rem;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
flex-shrink: 0;
}
.pulse-story-link:hover { text-decoration: underline; }
/* UPGRADE 4 — Discover redesign */
.disc-header-block { margin-bottom: 1.5rem; }
.disc-title-accent {
font-family: var(--font-brand);
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
display: inline-block;
position: relative;
margin-bottom: 0.25rem;
}
.disc-title-accent::after {
content: '';
display: block;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #d4a843, transparent);
border-radius: 2px;
margin-top: 0.2rem;
}
.disc-pick-featured {
background: linear-gradient(135deg, #1e1a14 0%, #23201a 100%);
border-left: 4px solid #d4a843;
border-radius: 10px;
padding: 1.5rem 1.75rem;
margin-bottom: 1rem;
box-shadow: 0 2px 16px rgba(0,0,0,0.22);
position: relative;
}
.disc-pick-featured::before {
content: "Featured Story";
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #d4a843;
opacity: 0.72;
margin-bottom: 0.4rem;
}
.disc-featured-hook {
font-size: 1.55rem;
font-family: var(--font-brand);
font-weight: 400;
color: var(--text);
line-height: 1.25;
margin: 0.4rem 0 0.65rem;
}
.disc-state-chip {
display: inline-block;
border-radius: 20px;
padding: 0.2rem 0.65rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
margin-bottom: 0.4rem;
}
.disc-read-btn {
display: inline-block;
margin-top: 0.65rem;
padding: 0.35rem 1rem;
border-radius: 20px;
background: #2a2520;
border: 1px solid rgba(212,168,67,0.35);
color: #d4a843;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.disc-read-btn:hover {
background: rgba(212,168,67,0.12);
border-color: #d4a843;
text-decoration: none;
color: #d4a843;
}
.disc-chip-all { font-weight: 700; }
.disc-chip-active {
background: #d4a843 !important;
color: #1a1410 !important;
border-color: #d4a843 !important;
font-weight: 700;
}
.hp-exp-card, .disc-pick-card {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hp-exp-card:hover, .disc-pick-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
background: linear-gradient(135deg, #1e1a14, #252018);
}
/* UPGRADE 5 — Mobile + Global Polish */
@media (max-width: 768px) {
.sb-col { display: none !important; }
.pill-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
#prof_col, [id$="prof_col"] { padding: 0 0.75rem; }
}
@media (max-width: 640px) {
.bc-mv-layout { flex-direction: column !important; }
.bc-county-panel { max-height: 50vh; overflow-y: auto; }
}
.bc-stat-value { font-family: 'Georgia', 'EB Garamond', serif; letter-spacing: 0.02em; }
/* UPGRADE A — DNA Compatibility */
.bc-dna-compat { display:flex; align-items:center; gap:1.25rem; padding:0.75rem 1rem; background:#1e1a14; border-radius:8px; margin:0.75rem 0; border:1px solid rgba(212,168,67,0.15); }
.bc-dna-compat-score { text-align:center; min-width:70px; }
.bc-dna-compat-pct { font-size:1.8rem; font-weight:700; color:#d4a843; font-family:'Georgia', 'EB Garamond', serif; display:block; line-height:1; }
.bc-dna-compat-lbl { font-size:0.75rem; color:#7a8a9b; text-transform:uppercase; letter-spacing:0.08em; }
.bc-dna-compat-detail { font-size:0.9rem; color:#c8b89a; line-height:1.5; }
/* UPGRADE B — Atlas Deep Dive Callout */
.bc-deep-dive-callout { display:flex; gap:0.75rem; margin:1rem 0 0.5rem; padding:0.85rem 1rem; background:rgba(212,168,67,0.06); border-radius:6px; animation:bc-fade-in 0.35s ease both; }
.bc-deep-dive-bar { width:3px; border-radius:3px; background:#d4a843; flex-shrink:0; min-height:100%; }
.bc-deep-dive-text { font-size:0.9rem; color:#c8b89a; line-height:1.6; font-style:italic; }
/* UPGRADE C — Home Themed Spotlight Cards */
.bc-spotlights-row { margin:1.5rem 0 0; }
.bc-spotlights-header { font-size:0.65rem !important; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3) !important; margin-bottom:0.75rem; }
.bc-spotlights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
@media(max-width:640px){ .bc-spotlights-grid { grid-template-columns:1fr; } }
.bc-spotlight-card {
background: #1a1710 !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-top: none !important;
border-radius: 8px;
padding: 0.85rem 1rem;
transition: transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.bc-spotlight-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.4); }
.bc-spotlight-theme { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.35rem; }
.bc-spotlight-icon { font-size:0.75rem; color:#d4a843; }
.bc-spotlight-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:#7a8a9b; }
.bc-spotlight-name { font-size:0.95rem !important; font-weight:700; font-family:var(--font-brand); margin-bottom:0.3rem; }
.bc-spotlight-desc { font-size:0.75rem !important; color:#94a3b8; line-height:1.5; margin-bottom:0.5rem; }
.bc-spotlight-link { font-size:0.85rem; color:#d4a843; text-decoration:none; cursor:pointer; }
.bc-spotlight-link:hover { color:#f0c060; }
/* UPGRADE D — Rankings Report Card Grades */
.rr-grade-row { display:flex; gap:0.5rem; margin-top:0.5rem; padding-top:0.5rem; border-top:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; }
.rr-grade-cell { text-align:center; flex:1; min-width:30px; }
.rr-grade-val { font-size:0.95rem; font-weight:700; font-family:var(--font-ui); line-height:1; }
.rr-grade-lbl { font-size:0.65rem; text-transform:uppercase; color:#7a8a9b; letter-spacing:0.05em; }
/* UPGRADE E — Move/Visit County Story Bullets */
.mv-insight-bullets { margin:0.6rem 0 0; display:flex; flex-direction:column; gap:0.4rem; }
.mv-insight-item { display:flex; align-items:flex-start; gap:0.5rem; }
.mv-insight-dot { color:#d4a843; font-size:0.7rem; margin-top:0.25rem; flex-shrink:0; }
.mv-insight-text { font-family:var(--font-ui); font-size:0.87rem; color:var(--text-2); line-height:1.6; }
.mv-insight-text b { color:var(--text); }
/* ── SOTD Hero (full-bleed, no pointer) ────────────────────────────────── */
.bc-sotd-hero {
width: calc(100% + 3rem);
margin: -1.5rem -1.5rem 2rem;
padding: 2.5rem 3rem 2rem;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bc-sotd-eyebrow {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 0.6rem;
}
.bc-sotd-hero-name {
font-family: var(--font-brand);
font-size: clamp(2.8rem, 7vw, 5rem);
font-weight: 700;
letter-spacing: 0.1em;
line-height: 0.95;
margin-bottom: 0.5rem;
color: var(--text) !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.bc-sotd-hero-nick {
font-size: 0.9rem;
color: var(--text-2);
font-style: normal;
margin-bottom: 0.5rem;
}
.bc-sotd-hero-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.bc-sotd-hero-stats {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.07);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bc-sotd-hero-stats .bc-stat {
flex: 1 1 0;
min-width: 70px;
padding: 0 0.75rem 0 0;
align-items: flex-start;
text-align: left;
}
.bc-sotd-hero-stats .bc-stat + .bc-stat {
padding-left: 0.75rem;
border-left: 1px solid rgba(255,255,255,0.08);
}
.bc-sotd-hero-stats .bc-stat-val {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 1.4rem;
line-height: 1;
}
.bc-sotd-hero-stats .bc-stat-sigma {
display: inline;
font-size: 0.58rem;
margin-left: 0.2rem;
opacity: 0.7;
}
.bc-sotd-hero-stats .bc-stat-lbl {
font-size: 0.65rem;
color: var(--text-3);
margin-bottom: 0.15rem;
}
.bc-sotd-hero-footer { margin-top: 1rem; }
.bc-sotd-hero-btn {
background: transparent;
border: 1px solid rgba(212,168,67,0.5) !important;
color: var(--accent) !important;
padding: 0.45rem 1.1rem;
border-radius: 4px;
font-size: 0.85rem;
font-family: var(--font-ui);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
letter-spacing: 0.02em;
}
.bc-sotd-hero-btn:hover {
background: rgba(212,168,67,0.1);
border-color: rgba(212,168,67,0.8) !important;
}
@media (max-width: 640px) {
.bc-sotd-hero { width: calc(100% + 2rem); margin: -1rem -1rem 1.5rem; padding: 1.75rem 1.25rem 1.5rem; }
.bc-sotd-hero-name { font-size: clamp(2.2rem, 10vw, 3.5rem); }
.bc-sotd-hero-stats { gap: 1.25rem; }
}
/* ── App stats bar ─────────────────────────────────────────────────────── */
.hp-app-stats-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 1.25rem 0;
margin: 0 0 1.75rem;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
}
.hp-app-stat { text-align: center; }
.hp-app-stat-num {
display: block;
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 2.4rem;
line-height: 1;
color: var(--text);
letter-spacing: 0.02em;
}
.hp-app-stat-lbl {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-3);
margin-top: 0.1rem;
}
.hp-app-stat-dot { color: var(--text-3); font-size: 1rem; align-self: center; }
/* ── By the Numbers rotator ────────────────────────────────────────────── */
.hp-btn-rotator {
text-align: center;
padding: 2rem 1rem;
margin: 0 0 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hp-btn-rotator-inner { min-height: 5rem; }
.hp-btn-rot-number {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 3.8rem;
line-height: 1;
color: var(--accent);
display: block;
transition: opacity 0.35s ease;
}
.hp-btn-rot-text {
font-family: var(--font-ui);
font-size: 0.9rem;
color: var(--text-2);
margin: 0.4rem 0 0.5rem;
transition: opacity 0.35s ease;
}
.hp-btn-rot-link {
font-size: 0.85rem;
color: var(--text-3);
cursor: pointer;
transition: color 0.2s, opacity 0.35s ease;
display: inline-block;
}
.hp-btn-rot-link:hover { color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════════════
POLISH — flag, font cleanup, spotlight rotator — 20260419b
═══════════════════════════════════════════════════════════════════════════ */
/* ── SOTD hero flag ─────────────────────────────────────────────────────── */
.bc-sotd-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.bc-sotd-hero-flag {
height: 42px;
width: auto;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
flex-shrink: 0;
}
/* ── Hero stat values: thin Inter uppercase ─────────────────────────────── */
.bc-sotd-hero-stats .bc-stat-val {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 1.05rem !important;
font-weight: 300 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
/* Sigma annotation: keep same thin style */
.bc-sotd-hero-stats .bc-stat-sigma {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 300 !important;
letter-spacing: 0.04em !important;
}
/* Labels: all caps, very small */
.bc-sotd-hero-stats .bc-stat-lbl {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-size: 0.55rem !important;
color: var(--text-3) !important;
}
/* ── Feature card: de-bold descriptions ─────────────────────────────────── */
.bc-hcard-body {
font-family: var(--font-ui) !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 0.75rem !important;
color: var(--text-3) !important;
line-height: 1.55 !important;
}
.hp-card-grid .bc-hcard .bc-hcard-body {
font-family: var(--font-ui) !important;
font-weight: 400 !important;
font-style: normal !important;
}
/* Banner title: Inter medium instead of heavy serif */
.hp-banner-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
letter-spacing: 0.02em !important;
}
/* Banner stat sub-label */
.hp-banner-stat {
font-weight: 300 !important;
}
/* ── Spotlight rotator (single card, fades between states) ──────────────── */
.bc-spt-rotator {
position: relative;
}
.bc-spt-card {
display: none;
background: #1a1710;
border-radius: 8px;
padding: 1.1rem 1.25rem;
border: 1px solid rgba(255,255,255,0.05);
animation: bc-fade-in 0.45s ease both;
}
.bc-spt-card.bc-spt-active {
display: block;
}
.bc-spt-theme {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.bc-spt-icon {
font-size: 0.65rem;
color: var(--accent);
opacity: 0.7;
}
.bc-spt-label {
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-3);
}
.bc-spt-name {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin-bottom: 0.45rem;
}
.bc-spt-desc {
font-family: var(--font-ui);
font-style: normal;
font-size: 0.85rem;
font-weight: 400;
color: var(--text-2);
line-height: 1.6;
margin-bottom: 0.6rem;
letter-spacing: 0.01em;
}
.bc-spt-link {
font-size: 0.85rem;
color: var(--accent);
text-decoration: none;
cursor: pointer;
letter-spacing: 0.02em;
}
.bc-spt-link:hover { color: var(--accent-hi); }
.bc-spt-dots {
display: flex;
gap: 0.35rem;
margin-top: 0.75rem;
justify-content: flex-start;
}
.bc-spt-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
transition: background 0.3s;
display: inline-block;
}
.bc-spt-dot-active {
background: var(--accent) !important;
}
/* ── Scout: Move Here If... Presets ──────────────────────────────────────── */
.match-presets-section {
padding: 0 1.5rem 0.25rem;
margin-bottom: 0;
}
.match-presets-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7a8a9b;
margin-bottom: 0.6rem;
}
.match-preset-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 1rem;
}
.match-preset-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
background: #1e1c19;
border: 1px solid rgba(212,168,67,0.3);
border-radius: 20px;
color: #c9a07a;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.match-preset-chip:hover {
background: rgba(212,168,67,0.12);
border-color: #d4a843;
color: #e8dcc8;
}
.match-preset-chip i {
font-size: 0.75rem;
opacity: 0.85;
}
/* ── Scout: Salary Translator ────────────────────────────────────────────── */
.salary-tool-wrap {
padding-bottom: 2rem;
}
.salary-inputs-card {
background: #1a1816;
border: 1px solid rgba(212,168,67,0.15);
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin: 0 0 1.25rem;
}
.salary-state-row {
display: flex;
align-items: flex-end;
gap: 0.75rem;
margin-bottom: 1rem;
}
.salary-amount-row {
display: flex;
align-items: flex-end;
gap: 0.75rem;
}
.salary-field {
flex: 1;
min-width: 0;
}
.salary-lbl {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7a8a9b;
margin-bottom: 4px;
}
.salary-arrow-col {
flex: 0 0 32px;
display: flex;
justify-content: center;
padding-bottom: 10px;
}
.salary-arrow {
font-size: 1.4rem;
color: #d4a843;
line-height: 1;
}
.salary-calc-col {
flex: 0 0 auto;
}
/* Salary result card */
.salary-result-card {
background: #1a1816;
border: 1px solid rgba(93,190,138,0.3);
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-top: 0.5rem;
}
.salary-chip {
background: #23211d;
border-radius: 8px;
padding: 0.75rem 1rem;
min-width: 140px;
flex: 1;
}
.salary-chip-main {
border: 1px solid rgba(93,190,138,0.35);
flex: 1.4;
}
.sc-lbl {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
margin-bottom: 4px;
}
.sc-val {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 1.5rem;
line-height: 1.1;
font-weight: 600;
}
.sc-val-lg {
font-size: 1.9rem;
}
/* ── County vs County ────────────────────────────────────────────────────── */
.county-compare-wrap {
padding: 1rem 0;
}
.county-cmp-names {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.ccn-a, .ccn-b {
flex: 1;
font-size: 0.85rem;
font-weight: 600;
color: #e8dcc8;
line-height: 1.3;
}
.ccn-a { text-align: left; }
.ccn-b { text-align: right; }
.ccn-vs {
flex: 0 0 auto;
font-size: 1.2rem;
font-weight: 800;
color: #7a8a9b;
padding: 0 0.5rem;
}
.county-tug-grid {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.county-tug-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.county-tug-na {
opacity: 0.4;
font-size: 0.75rem;
}
.ctr-val-left {
flex: 0 0 100px;
text-align: right;
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 1.05rem;
line-height: 1;
}
.ctr-val-right {
flex: 0 0 100px;
text-align: left;
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 1.05rem;
line-height: 1;
}
.ctr-bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ctr-label-center {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
text-align: center;
white-space: nowrap;
}
.ctr-bar-a, .ctr-bar-b {
height: 5px;
min-width: 4px;
border-radius: 3px;
opacity: 0.8;
}
.ctr-bar-a {
align-self: flex-end;
margin-right: 0;
}
.ctr-bar-b {
align-self: flex-start;
}
.county-cmp-note {
font-size: 0.75rem;
color: var(--text-3);
margin-top: 1.2rem;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════════
PHASE A — Visual & Interaction Polish
═══════════════════════════════════════════════════════════════════════ */
/* 1. Smooth story expand/collapse via max-height transition ──────────── */
.hp-exp-body {
display: block !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
animation: none !important;
margin-top: 0 !important;
transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.28s ease,
margin-top 0.28s ease !important;
}
.hp-exp-body.hp-exp-open {
max-height: 900px !important;
opacity: 1 !important;
margin-top: 0.75rem !important;
}
/* 2. Spotlight: active dot expands to pill shape ─────────────────────── */
.bc-spt-dot {
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease !important;
}
.bc-spt-dot-active {
width: 18px !important;
border-radius: 3px !important;
}
/* 3. Spotlight: prev/next nav buttons ───────────────────────────────── */
.bc-spt-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.65rem;
}
.bc-spt-nav-btn {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
color: var(--text-3);
border-radius: 4px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.75rem;
line-height: 1;
padding: 0;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bc-spt-nav-btn:hover {
background: rgba(212,168,67,0.12);
color: var(--accent);
border-color: rgba(212,168,67,0.35);
}
/* 4. Versus: win cell flash on appear ───────────────────────────────── */
@keyframes cmp-win-flash {
0% { background: rgba(93,190,138,0.18); }
100% { background: transparent; }
}
.cmp-col-right .cmp-cell-win,
.cmp-col-left .cmp-cell-win {
animation: cmp-win-flash 0.8s ease both;
}
/* 5. Home cards: colored left-border lift on hover ──────────────────── */
.hp-card-grid .bc-hcard {
border-left: 3px solid transparent;
transition: border-left-color 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.hp-card-counties:hover { border-left-color: #d4a843 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.hp-card-atlas:hover { border-left-color: #3b82f6 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.hp-card-rankings:hover { border-left-color: #22c55e !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.hp-card-versus:hover { border-left-color: #a855f7 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.hp-card-scout:hover { border-left-color: #f97316 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
.hp-card-quiz:hover { border-left-color: #14b8a6 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; }
/* 6. App stats bar: staggered pop-in on page load ───────────────────── */
@keyframes stat-pop-in {
from { opacity: 0; transform: scale(0.72) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.hp-app-stat-num {
animation: stat-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hp-app-stats-bar > :nth-child(1) .hp-app-stat-num { animation-delay: 0.05s; }
.hp-app-stats-bar > :nth-child(2) .hp-app-stat-num { animation-delay: 0.12s; }
.hp-app-stats-bar > :nth-child(3) .hp-app-stat-num { animation-delay: 0.19s; }
.hp-app-stats-bar > :nth-child(4) .hp-app-stat-num { animation-delay: 0.26s; }
.hp-app-stats-bar > :nth-child(5) .hp-app-stat-num { animation-delay: 0.33s; }
.hp-app-stats-bar > :nth-child(6) .hp-app-stat-num { animation-delay: 0.40s; }
.hp-app-stats-bar > :nth-child(7) .hp-app-stat-num { animation-delay: 0.47s; }
/* 7. By-the-Numbers: slide-up entrance instead of pure fade ─────────── */
.hp-btn-rot-number,
.hp-btn-rot-text {
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 8. SOTD hero entrance on page load ────────────────────────────────── */
@keyframes hero-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.bc-sotd-hero {
animation: hero-rise 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.bc-sotd-hero-name {
animation: hero-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.12s both;
}
.bc-sotd-hero-stats {
animation: hero-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.22s both;
}
/* ═══════════════════════════════════════════════════════════════════════
PHASE B — Typography, Readability & Hierarchy
═══════════════════════════════════════════════════════════════════════ */
/* ── B1. Type scale enforcement — consolidate scattered sizes ─────────── */
/* Section labels: uppercase eyebrow text */
.bc-section, .bc-section-sm, .cmp-sec-head,
.hp-section-title { font-size: 0.75rem; font-weight: 600; }
/* Body descriptions: cards, pick cards, narrative */
.bc-hcard-body, .hp-exp-teaser, .hp-exp-full,
.bc-deep-dive-text { font-size: 0.85rem; line-height: 1.6; }
/* Spotlight name — state name in spotlight card */
.bc-spt-name { font-size: 1.4rem; }
/* Comparison stat rows */
.cmp-cell { font-size: 0.85rem; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.cmp-label { font-size: 0.65rem; font-weight: 500; color: var(--text-2) !important; }
/* Rankings rows */
.rr-name { font-size: 0.9rem; font-weight: 600; }
.rr-score { font-family: 'Georgia', 'EB Garamond', serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em; }
.rr-rank-num { font-family: 'Georgia', 'EB Garamond', serif; }
/* ── B2. Profile section hierarchy — label/value contrast ────────────── */
/* The label above a stat value should be readable but secondary */
.bc-dl dt {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-2);
line-height: var(--lh-snug, 1.4);
}
.bc-dl dd {
font-size: 0.85rem;
font-weight: 700;
color: var(--text);
line-height: var(--lh-snug, 1.4);
margin-bottom: 0.1rem;
font-family: inherit;
}
/* Profile stat section bodies */
.profile-section-body {
line-height: var(--lh-normal, 1.55);
}
/* Insight text: pro/con/note boxes */
.bc-insight-pro, .bc-insight-con, .bc-insight-note {
font-size: 0.85rem;
line-height: 1.55;
}
.bc-insight-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* ── B3. Bolding correctness — bold values, not labels ───────────────── */
/* bc-bold should only be used on metric values, not label+value combined */
.bc-bold { font-weight: 700; color: var(--text); }
/* Metric labels inline (e.g. "Violent Crime Rate:") — weight 500, secondary color */
.bc-metric-label {
font-weight: 500;
color: var(--text-2);
font-size: 0.85rem;
}
/* Inline metric values that follow a label */
.bc-metric-val {
font-family: 'Georgia', 'EB Garamond', serif;
font-weight: 700;
font-size: 0.9rem;
color: var(--text);
letter-spacing: 0.02em;
margin-left: 0.25em;
}
/* ── B4. Salary chip: fix label color and size ────────────────────────── */
.salary-chip .sc-lbl {
font-size: 0.65rem !important;
font-weight: 500 !important;
color: var(--text-2) !important;
letter-spacing: 0.08em;
line-height: 1.35;
}
.salary-chip .sc-val {
font-size: 1.1rem !important;
font-weight: 700 !important;
}
.sc-val-lg { font-size: 1.5rem !important; }
/* ── B5. Home card banners — metric sub-stat is readable ─────────────── */
.hp-banner-title { font-size: 0.85rem !important; font-weight: 600 !important; }
.hp-banner-stat { font-size: 0.75rem !important; font-weight: 400 !important; color: var(--text-2) !important; }
.hp-banner-icon { font-size: 1.1rem; opacity: 0.75; }
/* Card CTA link — slightly bigger and bolder */
.hp-card-cta {
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.04em;
}
/* ── B6. "By the Numbers" rotator — number hierarchy ────────────────── */
.hp-btn-rot-number {
font-size: 3.8rem !important;
font-family: var(--font-data) !important;
font-weight: 400 !important;
letter-spacing: 0.02em;
}
.hp-btn-rot-text {
font-size: 0.9rem !important;
line-height: 1.5;
}
.hp-btn-rot-link {
font-size: 0.75rem !important;
font-weight: 500 !important;
}
/* ── B7. Explore / story cards — better reading hierarchy ────────────── */
/* hp-exp-hook canonical: 1.1rem DM Serif in base rule above — no override needed */
.hp-exp-teaser {
font-size: 0.85rem !important;
color: var(--text-2) !important;
line-height: 1.6;
}
.hp-exp-state {
font-size: 0.65rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
}
.hp-exp-toggle {
font-size: 0.75rem !important;
font-weight: 500 !important;
}
/* ── B8. SOTD hero stat bar — keep Teko, add size ────────────────────── */
.bc-sotd-hero-stats .bc-stat-val {
font-size: 1.5rem !important;
font-family: 'Georgia', 'EB Garamond', serif !important;
letter-spacing: 0.03em;
}
.bc-sotd-hero-stats .bc-stat-lbl {
font-size: 0.65rem !important;
font-weight: 500 !important;
color: var(--text-2) !important;
}
/* ── B9. Section pill active — use Inter medium, not bold ────────────── */
.section-pill { font-size: 0.75rem; font-weight: 500; }
.section-pill.active { font-weight: 600 !important; }
/* ── B10. App stats bar — Teko for the big numbers ───────────────────── */
.hp-app-stat-num {
font-family: 'Georgia', 'EB Garamond', serif !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
}
.hp-app-stat-lbl {
font-size: 0.65rem !important;
font-weight: 500 !important;
color: var(--text-2) !important;
}
/* ── B11. bc-dl-sm / bc-dl-indent: give dt/dd proper hierarchy ───────── */
.bc-dl-sm dt, .bc-dl-indent dt {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-2);
line-height: 1.45;
}
.bc-dl-sm dd, .bc-dl-indent dd {
font-size: 0.85rem;
line-height: 1.45;
color: var(--text);
}
/* Value spans inside dl rows get Teko when they're actual numbers */
.bc-dl-sm dd .bc-bold,
.bc-dl-indent dd .bc-bold {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
/* National avg comparison tag inside dd */
.bc-tiny.bc-muted.bc-ml-sm {
font-size: 0.65rem !important;
color: var(--text-3) !important;
font-weight: 400;
margin-left: 0.4em;
}
/* ── B12. Economics econ-grid cards — larger stat values ─────────────── */
.bc-econ-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.65rem;
margin-bottom: 1rem;
}
.bc-econ-grid .bc-card {
padding: 0.75rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.bc-econ-grid .bc-stat-val {
font-size: 1.15rem !important;
}
.bc-econ-grid .bc-stat-lbl {
font-size: 0.65rem !important;
}
/* ── B13. Industries list — name is identifier, GDP% is data ─────────── */
.bc-bold.bc-text-base {
font-size: 0.85rem;
font-weight: 600; /* 600 not 700 — name is context, not primary data */
color: var(--text);
}
/* GDP% next to industry name uses Teko for number feel */
.bc-small.bc-accent.bc-bold {
font-family: 'Georgia', 'EB Garamond', serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.03em;
}
/* Industry description below bar */
.bc-small.bc-muted {
font-size: 0.75rem;
color: var(--text-2) !important;
line-height: 1.45;
}
/* ── B14. Section headings inside profiles: consistent size ──────────── */
.section-label.bc-section {
font-size: 0.75rem !important;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0.9rem 0 0.5rem;
}
/* ── B15. Mobile — hard floor at 0.65rem for all labels ─────────────── */
@media (max-width: 480px) {
.bc-stat-lbl, .stat-chip .sc-lbl, .sigma-chip .sc-lbl,
.sc-lbl, .cmp-label, .bc-cmp-pick-label,
.hp-exp-state, .hp-app-stat-lbl,
.bc-section-sm, .bc-section { font-size: 0.65rem !important; }
.bc-stat-val, .stat-chip .sc-val, .sigma-chip .sc-val,
.cmp-cell, .rr-score { font-size: 0.9rem !important; }
.bc-dl-sm dt, .bc-dl-indent dt { font-size: 0.75rem !important; }
.bc-dl-sm dd, .bc-dl-indent dd { font-size: 0.75rem !important; }
.bc-econ-grid .bc-stat-val { font-size: 1rem !important; }
.hp-exp-hook { font-size: 0.9rem !important; }
.hp-exp-teaser { font-size: 0.75rem !important; }
.bc-hcard-body { font-size: 0.85rem !important; }
.hp-btn-rot-number { font-size: 2.8rem !important; }
}
/* ── Move/Visit: Purchasing Power Calculator ─────────────────────────────── */
.mv-ppc {
margin-bottom: 1.25rem;
padding: 0.85rem 1rem;
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: 6px;
}
.mv-ppc-heading {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-2);
font-weight: 700;
margin-bottom: 0.2rem;
}
.mv-ppc-sub {
font-size: 0.78rem;
color: var(--text-3);
margin-bottom: 0.75rem;
}
.mv-ppc-input-row {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.85rem;
flex-wrap: wrap;
}
.mv-ppc-label {
font-size: 0.8rem;
color: var(--text-2);
white-space: nowrap;
}
.mv-ppc-input-wrap {
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
flex: 1;
min-width: 130px;
max-width: 200px;
}
.mv-ppc-dollar-sign {
padding: 0 0.45rem;
color: var(--text-3);
font-size: 0.9rem;
line-height: 1;
background: var(--surface-hi);
border-right: 1px solid var(--border);
align-self: stretch;
display: flex;
align-items: center;
}
.mv-ppc-input {
border: none;
background: transparent;
color: var(--text);
font-family: var(--font-data);
font-size: 1rem;
padding: 0.35rem 0.5rem;
width: 100%;
outline: none;
-moz-appearance: textfield;
}
.mv-ppc-input::-webkit-outer-spin-button,
.mv-ppc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mv-ppc-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.mv-ppc-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
padding: 0.55rem 0.6rem;
}
.mv-ppc-card-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.mv-ppc-card-tip {
cursor: pointer;
color: var(--accent);
font-size: 0.6rem;
opacity: 0.75;
position: relative;
}
.mv-ppc-card-tip::before { content: '\00a0\24D8'; }
.mv-ppc-card-tip[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--surface-top);
border: 1px solid var(--border-hi);
border-radius: 6px;
padding: 0.45rem 0.7rem;
font-size: 0.71rem;
color: var(--text);
white-space: pre-line;
width: 220px;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
box-shadow: 0 6px 20px rgba(0,0,0,0.6);
text-align: left;
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
font-family: var(--font-body);
font-weight: 400;
}
.mv-ppc-card-tip[data-tip]:hover::after { opacity: 1; }
.mv-ppc-card-val {
font-family: var(--font-data);
font-size: 1.15rem;
font-weight: 400;
color: var(--text);
line-height: 1.1;
margin-bottom: 0.2rem;
}
.mv-ppc-card-note {
font-size: 0.68rem;
color: var(--text-3);
line-height: 1.3;
}
@media (max-width: 480px) {
.mv-ppc-cards { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PRE-PUSH: FONT STANDARDIZATION + VISUAL HIERARCHY
Eliminates Bootstrap/system-ui fallthrough on all interactive elements.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Global input font lock ──────────────────────────────────────────── */
/* Bootstrap 5 applies system-ui to inputs unless overridden.
These selectors catch every interactive element Shiny renders. */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea {
font-family: var(--font-ui) !important;
font-size: 0.9rem !important;
color: var(--text) !important;
}
/* Shiny-generated wrappers inject inputs without .form-control in some contexts */
.shiny-input-container input:not([type="radio"]):not([type="checkbox"]):not([type="range"]) {
font-family: var(--font-ui) !important;
}
/* ── 2. Placeholder text — universal ────────────────────────────────────── */
input::placeholder,
textarea::placeholder,
.selectize-input input::placeholder {
font-family: var(--font-ui) !important;
color: var(--text-3) !important;
opacity: 1; /* Firefox reduces opacity by default */
}
/* ── 3. Slider label typography ─────────────────────────────────────────── */
/* .irs-min and .irs-max (range endpoints) weren't being font-locked */
.irs--shiny .irs-min,
.irs--shiny .irs-max {
font-family: var(--font-ui) !important;
font-size: 0.68rem !important;
color: var(--text-3) !important;
background: transparent !important;
}
/* Grid tick labels under sliders */
.irs--shiny .irs-grid-text {
font-family: var(--font-ui) !important;
font-size: 0.68rem !important;
color: var(--text-3) !important;
}
/* ── 4. Shiny-generated label elements ──────────────────────────────────── */
/* numericInput, textInput, sliderInput all emit