/* Shipping Clarity — Design System
   Editorial report-card meets B2B SaaS clarity */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Type — Helvetica everywhere per Apr 28 brand call */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Color — warm paper */
  --paper: oklch(0.985 0.005 80);
  --paper-2: oklch(0.965 0.008 80);
  --paper-3: oklch(0.945 0.010 80);
  --ink: oklch(0.20 0.012 60);
  --ink-soft: oklch(0.45 0.012 60);
  --ink-faint: oklch(0.65 0.010 60);
  --rule: oklch(0.85 0.010 60);
  --rule-soft: oklch(0.92 0.008 60);

  /* Accents */
  --red: oklch(0.52 0.16 250);
  --red-soft: oklch(0.93 0.04 250);
  --green: oklch(0.50 0.12 145);
  --green-soft: oklch(0.94 0.04 145);
  --amber: oklch(0.70 0.13 75);
  --amber-soft: oklch(0.94 0.05 75);

  --maxw: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

img, svg { display: block; }

/* ============== HEADER ============== */
.si-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.si-header-top {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 24px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.si-header-actions { display: flex; align-items: center; gap: 10px; }

/* Mobile — header stacks the logo over the search/buttons row so the
   wordmark doesn't get clipped, and the search box becomes full-width.
   Desktop layout (>=720px) is untouched. */
@media (max-width: 720px) {
  .si-header-top {
    padding: 12px 16px 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .si-header-top > a { align-self: flex-start; }
  .si-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .si-header-actions input,
  .si-header-actions [role="search"],
  .si-header-actions form {
    flex: 1 1 100%;
    min-width: 0;
  }
  .si-nav-row-inner { padding: 8px 16px; }
}
.si-nav-row {
  border-top: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--paper) 98%, transparent);
}
.si-nav-row-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 8px 24px;
  display: flex; flex-wrap: wrap; gap: 6px; row-gap: 6px;
}
.si-nav-link {
  font-size: 12.5px; color: var(--ink);
  text-decoration: none;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: background 150ms, border-color 150ms, color 150ms, transform 80ms;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.1;
  flex-shrink: 0;
  /* Center the label both axes — keeps single-line tabs aligned with the
     stacked "Reefer Rates" tab that's two lines tall. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.si-nav-link:hover {
  background: var(--paper-2, #f5f1e8);
  border-color: var(--ink-soft);
  color: var(--ink);
}
.si-nav-link:active { transform: translateY(1px); }
.si-nav-link.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.si-nav-link.active:hover {
  background: var(--ink); color: var(--paper); /* keep solid on hover */
  opacity: 0.92;
}

/* ============== UNIVERSAL SEARCH ============== */
.si-search { position: relative; }
.si-search-input {
  width: 240px; max-width: 32vw;
  font: inherit; font-size: 13px;
  background: var(--paper-2, #f5f1e8);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, width 0.2s;
}
.si-search-input::placeholder { color: var(--ink-soft); opacity: 0.85; }
.si-search-input:focus {
  outline: none; border-color: var(--ink);
  background: #fff; width: 320px;
}
.si-search-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  width: 380px; max-width: 90vw; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
  z-index: 100; padding: 6px 0;
}
.si-search-empty {
  padding: 14px 16px; font-size: 13px; color: var(--ink-soft);
}
.si-search-group { padding: 4px 0 6px; border-bottom: 1px solid var(--rule-soft); }
.si-search-group:last-child { border-bottom: none; }
.si-search-grouph {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 8px 16px 4px;
}
.si-search-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px 16px; background: transparent; border: none;
  font-family: inherit; color: var(--ink);
}
.si-search-row:hover { background: var(--paper-2, #f5f1e8); }
.si-search-row .r-name {
  font-size: 14px; line-height: 1.3; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.si-search-row .r-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft);
  letter-spacing: 0.04em; flex-shrink: 0;
}

/* ============== BUTTONS ============== */
.btn-primary, .btn-primary-lg {
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 9px 16px; font-size: 14px; font-weight: 500;
  border-radius: 6px;
  transition: background 150ms, transform 80ms;
}
.btn-primary:hover { background: oklch(0.30 0.012 60); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary-lg { padding: 14px 24px; font-size: 15px; border-radius: 8px; }

.btn-ghost, .btn-ghost-lg {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
  padding: 9px 16px; font-size: 14px; font-weight: 500;
  border-radius: 6px;
  transition: background 150ms, border 150ms;
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.btn-ghost-lg { padding: 14px 24px; font-size: 15px; border-radius: 8px; }

.btn-toggle {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  border-radius: 999px; font-family: var(--font-mono);
  transition: all 150ms;
}
.btn-toggle:hover { border-color: var(--ink); }
.btn-toggle.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.full-w { width: 100%; }

/* ============== TYPOGRAPHY HELPERS ============== */
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.section-title em { font-style: italic; color: var(--red); }

/* ============== HERO (HOMEPAGE) ============== */
.hero {
  position: relative;
  padding: 80px 32px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  overflow: hidden;
}
.hero.hero-with-trucks { padding-bottom: 110px; }
@media (max-width: 700px) {
  .hero.hero-with-trucks { padding-bottom: 90px; }
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--paper);
  margin-bottom: 32px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.hero-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 20px; color: var(--ink); text-wrap: pretty;
  max-width: 920px;
}
.hero-title em { font-style: italic; color: var(--red); }
.hero-sub {
  font-size: 19px; color: var(--ink-soft); max-width: 620px;
  line-height: 1.5; margin: 0 0 40px;
}
.hero-search-wrap { position: relative; max-width: 720px; margin-bottom: 24px; }
.hero-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1.5px solid var(--rule);
  padding: 6px 6px 6px 18px; border-radius: 12px;
  transition: border 150ms, box-shadow 150ms;
}
.hero-search.focused { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.hero-search-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: 17px; color: var(--ink);
  padding: 14px 0;
}
.hero-search-input::placeholder { color: var(--ink-faint); }
.hero-search-btn {
  background: var(--ink); color: var(--paper); border: 0;
  padding: 14px 22px; font-size: 14px; font-weight: 500;
  border-radius: 8px; transition: background 150ms;
}
.hero-search-btn:hover { background: oklch(0.30 0.012 60); }

.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.12);
  z-index: 30;
}
.search-result {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 12px 14px; background: transparent; border: 0;
  text-align: left; border-radius: 6px;
  transition: background 100ms;
}
.search-result:hover { background: var(--paper-2); }
.search-result-name { font-size: 15px; }
.search-result-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.hero-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-quick-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.hero-quick-chip {
  background: transparent; border: 1px solid var(--rule);
  padding: 6px 12px; font-size: 13px; border-radius: 999px;
  transition: all 120ms;
}
.hero-quick-chip:hover { border-color: var(--ink); background: var(--paper-2); }

.hero-stats {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-soft);
  margin-top: 24px;
}
.hero-stat {
  padding: 28px 0; border-right: 1px solid var(--rule-soft);
}
.hero-stat:last-child { border-right: 0; }
.hero-stat-num {
  font-family: var(--font-serif); font-size: 56px; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
}
.hero-stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; }

/* ============== CATEGORY STRIP ============== */
.cat-strip { padding: 96px 32px; border-bottom: 1px solid var(--rule-soft); }
.cat-strip-inner { max-width: var(--maxw); margin: 0 auto; }
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px;
  border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; background: var(--paper); }
.cat-card {
  background: var(--paper); border: 0; border-right: 1px solid var(--rule-soft);
  padding: 32px 24px 28px; text-align: left; cursor: pointer;
  transition: background 150ms;
  position: relative; min-height: 200px;
  display: flex; flex-direction: column;
}
.cat-card:last-child { border-right: 0; }
.cat-card:hover { background: var(--paper-2); }
.cat-card.active { background: var(--ink); color: var(--paper); }
.cat-card.active .cat-num, .cat-card.active .cat-desc { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.cat-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-bottom: auto; letter-spacing: 0.1em; }
.cat-label { font-family: var(--font-serif); font-size: 28px; line-height: 1.05; margin: 36px 0 8px; letter-spacing: -0.02em; }
.cat-desc { font-size: 13px; color: var(--ink-soft); }
.cat-arrow { position: absolute; top: 28px; right: 24px; font-size: 18px; opacity: 0; transition: opacity 150ms; }
.cat-card:hover .cat-arrow, .cat-card.active .cat-arrow { opacity: 1; }

/* ============== MAP SECTION ============== */
.map-section { padding: 96px 32px; background: var(--paper-2); border-bottom: 1px solid var(--rule-soft); }
.map-section-inner { max-width: var(--maxw); margin: 0 auto; }
.map-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 24px; }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.legend-item { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

.map-container { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: stretch; }
.us-map { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 14px; padding: 24px; min-height: 480px; display: flex; align-items: center; }
.us-map-svg { width: 100%; height: auto; }

.map-side { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 14px; padding: 24px; }
.map-side-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 18px; }

.top-metros { display: flex; flex-direction: column; gap: 4px; }
.top-metro-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 8px;
  background: transparent; border: 0; text-align: left; border-radius: 8px;
  transition: background 120ms; cursor: pointer;
}
.top-metro-row:hover { background: var(--paper-2); }
.top-metro-rank { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.top-metro-name { flex: 1; font-size: 15px; }
.top-metro-state { color: var(--ink-soft); }

.city-hover-card { animation: fadeIn 200ms ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.city-hover-name { font-family: var(--font-serif); font-size: 36px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }
.city-hover-state { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }
.city-hover-grade-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin-bottom: 16px; }
.city-hover-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.city-hover-val { font-size: 18px; font-weight: 500; }
.city-hover-cta { width: 100%; background: var(--ink); color: var(--paper); border: 0; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }

/* ============== HOW SECTION ============== */
.how-section { padding: 96px 32px; border-bottom: 1px solid var(--rule-soft); }
.how-inner { max-width: var(--maxw); margin: 0 auto; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--rule); }
.how-card { padding: 32px 28px 32px 0; border-right: 1px solid var(--rule-soft); }
.how-card:last-child { border-right: 0; padding-right: 0; }
.how-num { font-family: var(--font-mono); font-size: 12px; color: var(--red); letter-spacing: 0.1em; margin-bottom: 24px; }
.how-h { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.how-p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ============== INSIGHTS ============== */
.insights-section { padding: 96px 32px; background: var(--paper-2); border-bottom: 1px solid var(--rule-soft); }
.insights-inner { max-width: var(--maxw); margin: 0 auto; }
.insights-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.insight-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 12px;
  padding: 24px; cursor: pointer; transition: all 150ms;
  display: flex; flex-direction: column; gap: 16px;
}
.insight-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.insight-tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--red); padding: 4px 8px; border: 1px solid var(--red-soft);
  border-radius: 4px; align-self: flex-start; background: var(--red-soft);
}
.insight-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.insight-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: auto; display: flex; gap: 6px; align-items: center; }
.dot-sep { opacity: 0.5; }

/* ============== CTA ============== */
.cta-section { padding: 120px 32px; background: var(--ink); color: var(--paper); }
.cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-title { font-family: var(--font-serif); font-size: clamp(44px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 18px; }
.cta-p { font-size: 18px; color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0 0 32px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; }
.cta-section .btn-primary-lg { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-section .btn-ghost-lg { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.cta-section .btn-ghost-lg:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); }

/* ============== FOOTER ============== */
.si-footer { background: var(--paper); border-top: 1px solid var(--rule-soft); padding: 72px 32px 32px; }
.si-footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 3fr; gap: 64px; }
.si-footer-tag { font-size: 14px; color: var(--ink-soft); max-width: 280px; margin: 16px 0 24px; }
.si-footer-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.si-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.si-footer-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 16px; }
.si-footer-cols a { display: block; font-size: 13px; color: var(--ink-soft); padding: 5px 0; text-decoration: none; transition: color 120ms; }
.si-footer-cols a:hover { color: var(--ink); }

/* ============== SPONSORED TAG ============== */
.sponsored-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
  background: var(--paper-3); padding: 2px 6px; border-radius: 3px;
  margin-left: 8px; vertical-align: middle;
}

/* ============== METRIC BAR ============== */
.metric-bar { margin-bottom: 14px; }
.metric-bar-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.metric-bar-label { font-size: 13px; color: var(--ink); }
.metric-bar-score { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.metric-bar-track { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.metric-bar-fill { height: 100%; }

/* ============== REPORT PAGE ============== */
.report-hero { padding: 56px 32px 64px; border-bottom: 1px solid var(--rule-soft); }
.report-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.report-breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); display: flex; gap: 8px; margin-bottom: 32px; }
.report-breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.report-breadcrumb a:hover { color: var(--ink); }
.report-breadcrumb .current { color: var(--ink); }
.report-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.report-hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: center; }
.report-title { font-family: var(--font-serif); font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 16px; }
.report-sub { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); margin: 0 0 32px; }
.report-tldr { display: flex; gap: 16px; padding: 20px; background: var(--paper-2); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; max-width: 640px; }
.tldr-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); padding-top: 2px; flex-shrink: 0; }
.report-tldr p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.report-overall-card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px; background: var(--paper-2); border-radius: 14px; border: 1px solid var(--rule-soft); }
.report-overall-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); text-align: center; }
.report-overall-foot { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* ============== CATEGORY TABS ============== */
.cat-tabs { padding: 0 32px; background: var(--paper); border-bottom: 1px solid var(--rule-soft); position: sticky; top: 60px; z-index: 20; }
.cat-tabs-inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 0; overflow-x: auto; }
.cat-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px; background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all 150ms;
  font-family: var(--font-sans);
}
.cat-tab-label { font-size: 14px; color: var(--ink-soft); }
.cat-tab:hover .cat-tab-label { color: var(--ink); }
.cat-tab.active { border-bottom-color: var(--red); }
.cat-tab.active .cat-tab-label { color: var(--ink); font-weight: 500; }

/* ============== TOOLBAR ============== */
.report-toolbar { padding: 32px 32px 16px; }
.report-toolbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.toolbar-h { font-family: var(--font-serif); font-size: 32px; letter-spacing: -0.02em; margin: 0 0 4px; }
.toolbar-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* ============== CARRIER TABLE ============== */
.carrier-table-section { padding: 0 32px 96px; }
.carrier-table-inner { max-width: var(--maxw); margin: 0 auto; }
.carrier-table { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; }
.carrier-table-head, .ct-row {
  display: grid;
  grid-template-columns: 48px minmax(220px, 1.6fr) 140px 80px 70px 90px 90px 100px 48px;
  align-items: center;
  padding: 0 20px;
}
.carrier-table-head {
  background: var(--paper-2); border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); padding-top: 14px; padding-bottom: 14px;
}
.ct-col { padding: 0 8px; }
.ct-col.sortable { cursor: pointer; user-select: none; transition: color 120ms; }
.ct-col.sortable:hover { color: var(--ink); }
.ct-row-wrap { border-bottom: 1px solid var(--rule-soft); }
.ct-row-wrap:last-child { border-bottom: 0; }
.ct-row { padding-top: 18px; padding-bottom: 18px; cursor: pointer; transition: background 120ms; }
.ct-row:hover { background: var(--paper-2); }
.ct-row-wrap.expanded .ct-row { background: var(--paper-2); }

.rank-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.carrier-name-row { display: flex; align-items: center; gap: 12px; }
.carrier-logo-dot {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  flex-shrink: 0;
}
.carrier-name { font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carrier-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* Driver-sourced intel signal — visible at-a-glance on every carrier card.
   Red dot = at least one high-severity item in the last 7 days. */
.intel-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: oklch(0.96 0.02 30); color: oklch(0.40 0.10 30);
  border: 1px solid oklch(0.85 0.06 30);
  letter-spacing: 0.02em; text-transform: uppercase;
  cursor: help;
}
.intel-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.intel-dot-high { background: var(--red); animation: intelPulse 2s ease-in-out infinite; }
@keyframes intelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.score-cell { display: flex; align-items: center; gap: 10px; }
.score-num { font-family: var(--font-mono); font-size: 16px; font-weight: 500; min-width: 28px; }
.score-bar { flex: 1; height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; max-width: 80px; }
.score-bar-fill { height: 100%; }

.compare-check {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--paper); transition: all 120ms;
}
.compare-check.checked { background: var(--ink); border-color: var(--ink); }
.expand-arrow { font-size: 14px; color: var(--ink-soft); transition: transform 200ms; display: inline-block; }

.ct-detail { padding: 0 20px 32px; background: var(--paper-2); animation: expand 250ms ease-out; }
@keyframes expand { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 800px; } }
.ct-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; padding-top: 8px; }
.detail-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 12px; }
.detail-verdict-p { font-family: var(--font-serif); font-size: 22px; line-height: 1.3; color: var(--ink); margin: 0 0 24px; font-style: italic; }
.strengths-weak { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sw-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.sw-h-good { color: var(--green); }
.sw-h-bad { color: var(--red); }
.sw-list { list-style: none; padding: 0; margin: 0; }
.sw-list li { font-size: 14px; color: var(--ink); padding: 6px 0 6px 18px; position: relative; line-height: 1.4; }
.sw-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--ink-soft); }
.sw-list-big li { font-size: 16px; padding: 10px 0 10px 22px; }
.sw-list-big li::before { top: 18px; width: 10px; }
.sw-grid-big { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* ============== COMPARE DRAWER ============== */
.compare-drawer {
  margin-top: 24px; padding: 32px; background: var(--paper);
  border: 1px solid var(--ink); border-radius: 14px;
  animation: fadeIn 200ms ease-out;
}
.compare-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.compare-h { font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.02em; }
.compare-close { background: transparent; border: 0; font-size: 24px; color: var(--ink-soft); cursor: pointer; }
.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; padding: 24px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.compare-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.compare-name { font-family: var(--font-serif); font-size: 28px; }
.compare-vs { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.2em; }
.compare-metrics { padding-top: 24px; }
.compare-metric-row {
  display: grid; grid-template-columns: 50px 1fr 50px 200px;
  gap: 16px; align-items: center; padding: 10px 0;
}
.cmr-val { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); transition: color 120ms; }
.cmr-val.win { color: var(--ink); font-weight: 600; }
.cmr-bar-wrap { display: grid; grid-template-columns: 1fr 1fr; height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; direction: rtl; }
.cmr-bar-wrap > .cmr-bar-a { direction: ltr; justify-self: end; height: 100%; background: var(--red); }
.cmr-bar-wrap > .cmr-bar-b { direction: ltr; justify-self: start; height: 100%; background: var(--ink); }
.cmr-label { font-size: 13px; color: var(--ink); }

/* ============== METHODOLOGY ============== */
.report-method { padding: 96px 32px; background: var(--paper-2); border-top: 1px solid var(--rule-soft); }
.report-method-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.report-method-p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; max-width: 580px; }
.metric-weights { background: var(--paper); padding: 24px; border-radius: 12px; border: 1px solid var(--rule-soft); }
.metric-weights-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 18px; }
.metric-weight-row { display: grid; grid-template-columns: 1.4fr 1fr 36px; gap: 12px; align-items: center; padding: 6px 0; }
.mw-label { font-size: 13px; }
.mw-bar { height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.mw-fill { display: block; height: 100%; background: var(--ink); }
.mw-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); text-align: right; }

/* ============== CARRIER PROFILE PAGE ============== */
.carrier-hero { padding: 56px 32px 64px; border-bottom: 1px solid var(--rule-soft); background: var(--paper); }
.carrier-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.carrier-hero-grid { display: grid; grid-template-columns: 1fr 240px; gap: 64px; align-items: center; }
.carrier-id-row { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 28px; }
.carrier-logo-big {
  width: 80px; height: 80px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-serif); font-size: 44px; flex-shrink: 0;
}
.carrier-name-big { font-family: var(--font-serif); font-size: clamp(48px, 6vw, 80px); line-height: 0.95; letter-spacing: -0.02em; margin: 6px 0 8px; }
.carrier-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.carrier-verdict-big { font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--ink); max-width: 640px; margin: 0 0 28px; }
.carrier-action-row { display: flex; gap: 12px; }
.carrier-hero-right { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.carrier-overall-meta { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.carrier-body { padding: 80px 32px; }
.carrier-body-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 80px; }
.carrier-section {}
.carrier-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; margin-top: 32px; }
.city-grades-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 12px; overflow: hidden; margin-top: 32px; }
.city-grade-cell { background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.city-grade-name { font-size: 14px; color: var(--ink-soft); }
.city-grade-score { font-family: var(--font-mono); font-size: 28px; font-weight: 500; }

.claim-banner {
  padding: 40px; background: var(--ink); color: var(--paper); border-radius: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.claim-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--paper) 60%, transparent); margin-bottom: 8px; }
.claim-h { font-family: var(--font-serif); font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 8px; }
.claim-p { font-size: 15px; color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0; max-width: 520px; }
.claim-banner .btn-primary-lg { background: var(--paper); color: var(--ink); border-color: var(--paper); flex-shrink: 0; }

/* ============== MEMBERS / PRICING ============== */
.members-hero { padding: 80px 32px 64px; border-bottom: 1px solid var(--rule-soft); background: var(--paper); }
.members-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.members-stat-row { display: grid; grid-template-columns: repeat(3, max-content); gap: 64px; margin-top: 48px; }
.ms-num { font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.ms-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 8px; }

.pricing-section { padding: 96px 32px; background: var(--paper-2); border-bottom: 1px solid var(--rule-soft); }
.pricing-inner { max-width: var(--maxw); margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.pricing-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 16px;
  padding: 32px; cursor: pointer; transition: all 180ms; position: relative;
  display: flex; flex-direction: column;
}
.pricing-card:hover { border-color: var(--ink); }
.pricing-card.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pricing-card.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pricing-card.featured .pricing-period, .pricing-card.featured .pricing-sub { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.pricing-card.featured .pricing-features li { color: color-mix(in srgb, var(--paper) 85%, transparent); }
.pricing-card.featured .check { color: var(--paper); }
.pricing-card.featured .btn-primary-lg { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pricing-card.featured .btn-ghost-lg { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.pricing-badge {
  position: absolute; top: -12px; left: 32px;
  background: var(--red); color: white;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px;
}
.pricing-name { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; }
.pricing-price { font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.pricing-period { font-family: var(--font-sans); font-size: 16px; color: var(--ink-soft); margin-left: 6px; }
.pricing-sub { font-size: 14px; color: var(--ink-soft); margin: 8px 0 24px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; }
.pricing-features li { font-size: 14px; padding: 8px 0 8px 28px; position: relative; line-height: 1.4; }
.check { position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 600; }

.signup-section { padding: 96px 32px; }
.signup-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start; }
.signup-p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 24px; max-width: 480px; }
.signup-bullets { list-style: none; padding: 0; margin: 0; }
.signup-bullets li { font-size: 15px; padding: 10px 0 10px 28px; position: relative; }
.signup-form { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 16px; padding: 32px; }
.form-h { font-family: var(--font-serif); font-size: 28px; margin-bottom: 24px; letter-spacing: -0.02em; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 8px; }
.form-field input, .form-field select {
  width: 100%; padding: 12px 14px; font-size: 14px;
  font-family: var(--font-sans); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); outline: none;
  transition: border 120ms;
}
.form-field input:focus, .form-field select:focus { border-color: var(--ink); }
.form-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.form-pill { padding: 10px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; transition: all 120ms; }
.form-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.form-fine { font-size: 11px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.4; }

/* ============== INSIGHTS PAGE ============== */
.insights-hero { padding: 80px 32px 56px; border-bottom: 1px solid var(--rule-soft); }
.insights-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.articles-section { padding: 64px 32px 96px; }
.articles-inner { max-width: var(--maxw); margin: 0 auto; }
.article-feature { padding: 32px 0 48px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; cursor: pointer; }
.article-feature-title { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.02em; margin: 16px 0 16px; max-width: 900px; }
.article-feature-excerpt { font-size: 18px; color: var(--ink-soft); max-width: 720px; line-height: 1.5; margin: 0 0 16px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card { padding: 24px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 12px; cursor: pointer; transition: all 150ms; display: flex; flex-direction: column; gap: 14px; }
.article-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.article-h { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.article-p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ============== CARRIERS DIRECTORY ============== */
.carriers-hero { padding: 80px 32px 56px; border-bottom: 1px solid var(--rule-soft); }
.carriers-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.carriers-list-section { padding: 32px 32px 96px; }
.carriers-list-inner { max-width: var(--maxw); margin: 0 auto; }
.carriers-list-head { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; padding: 0 20px; }
.carriers-list { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; }
.carrier-list-row {
  display: grid; grid-template-columns: 40px 36px 1fr 60px 50px 50px 24px;
  gap: 16px; align-items: center; padding: 16px 20px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft);
  text-align: left; cursor: pointer; transition: background 120ms; width: 100%;
}
.carrier-list-row:last-child { border-bottom: 0; }
.carrier-list-row:hover { background: var(--paper-2); }
.cl-name-main { font-size: 15px; font-weight: 500; }
.cl-name-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.cl-score { font-family: var(--font-mono); font-size: 16px; font-weight: 500; text-align: right; }
.cl-arrow { color: var(--ink-soft); }

/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .cat-grid, .how-grid, .insights-grid, .articles-grid, .pricing-grid, .city-grades-grid { grid-template-columns: 1fr 1fr; }
  .map-container, .report-hero-grid, .carrier-hero-grid, .signup-inner, .report-method-inner, .si-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .si-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .ct-detail-grid, .strengths-weak, .sw-grid-big { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 1100px) {
  .si-search { display: none; }
}

/* ============== DRIVER REPORT ============== */
.dr-section { display: flex; flex-direction: column; gap: 40px; }
.dr-header {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
  padding-bottom: 32px; border-bottom: 1px solid var(--rule-soft);
}
.dr-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.55; max-width: 60ch; margin: 14px 0 0; }
.dr-score-card {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 12px;
}
.dr-score-num { font-family: var(--font-serif); font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.dr-score-meta { display: flex; flex-direction: column; gap: 4px; }
.dr-score-tier { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.dr-score-trend { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }

.dr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 12px; overflow: hidden; }
.dr-stat { background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.dr-stat-l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.dr-stat-num { font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.dr-mix { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dr-mix-bar { height: 8px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 4px; overflow: hidden; }
.dr-mix-emp { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.dr-mix-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-soft); flex-wrap: wrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dot-emp { background: var(--ink); }
.dot-con { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.dot-pos { background: oklch(0.65 0.13 145); }
.dot-neu { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.dot-neg { background: var(--red); }

.dr-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.dr-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dr-card-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.dr-card-foot { font-size: 12px; color: var(--ink-soft); margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--rule-soft); }
.dr-sent-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--paper-2); }
.dr-sent-bar .seg { display: block; height: 100%; }
.dr-sent-bar .seg-pos { background: oklch(0.65 0.13 145); }
.dr-sent-bar .seg-neu { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.dr-sent-bar .seg-neg { background: var(--red); }
.dr-sent-legend { display: flex; gap: 18px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.dr-safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dr-safety-num { font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.02em; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.dr-safety-l { font-size: 11px; color: var(--ink-soft); line-height: 1.35; }

.dr-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.dr-quotes { padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.dr-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.dr-quote { margin: 0; padding: 24px; background: var(--paper-2); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; }
.dr-quote blockquote { font-family: var(--font-serif); font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; font-style: italic; }
.dr-quote figcaption { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.dr-quote-note { font-size: 12px; color: var(--ink-faint); font-style: italic; margin-top: 16px; }

@media (max-width: 960px) {
  .dr-header { grid-template-columns: 1fr; gap: 24px; }
  .dr-grid { grid-template-columns: 1fr 1fr; }
  .dr-row, .dr-quote-grid, .dr-sw { grid-template-columns: 1fr; gap: 16px; }
  .dr-safety-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ===========================================================================
   HERO TRUCKS — animated SVG semis rolling across the bottom of the hero
   =========================================================================== */
.hero-with-trucks { position: relative; overflow: hidden; }

.hero-trucks {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* container ignored, but each truck button captures clicks */
}

.hero-road {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--ink-soft) 0,
    var(--ink-soft) 28px,
    transparent 28px,
    transparent 52px
  );
  opacity: 0.55;
}

.hero-truck {
  position: absolute;
  bottom: 26px;
  width: 200px;
  height: 70px;
  color: var(--ink);
  opacity: 0.85;
  will-change: transform;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  transition: transform .12s, filter .12s;
}
.hero-truck:hover { filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.hero-truck:active { transform: translateY(1px) scale(0.98); }
.hero-truck:focus { outline: none; }
.hero-truck:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; border-radius: 4px; }

@keyframes truck-drive {
  from { transform: translateX(-240px); }
  to   { transform: translateX(calc(100vw + 60px)); }
}

.hero-truck.truck-1 {
  animation: truck-drive 32s linear infinite;
  animation-delay: 0s;
  opacity: 0.95;
}

.hero-truck.truck-2 {
  animation: truck-drive 44s linear infinite;
  animation-delay: 7s;
  opacity: 0.75;
  bottom: 30px;
  width: 175px;
  height: 60px;
  color: var(--red);
}

.hero-truck.truck-3 {
  animation: truck-drive 56s linear infinite;
  animation-delay: 18s;
  opacity: 0.65;
  width: 180px;
}

.hero-with-trucks .hero-inner,
.hero-with-trucks .hero-stats { position: relative; z-index: 1; }

/* Mobile: smaller trucks, less of them visible at once */
@media (max-width: 700px) {
  .hero-trucks { height: 80px; }
  .hero-truck { width: 130px; height: 45px; bottom: 18px; }
  .hero-truck.truck-2 { bottom: 22px; width: 110px; height: 40px; }
  .hero-truck.truck-3 { width: 120px; }
  .hero-road { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-truck { animation: none; }
  .hero-truck.truck-1 { left: 6%;  transform: none; }
  .hero-truck.truck-2 { left: 38%; transform: none; }
  .hero-truck.truck-3 { left: 70%; transform: none; }
}

/* ===========================================================================
   PERSPECTIVES — "What you don't see" four-Report section
   =========================================================================== */
.perspectives-section {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 80px 24px;
}
.perspectives-inner { max-width: 1240px; margin: 0 auto; }
.perspectives-sub {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 12px 0 36px;
}
.perspectives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) {
  .perspectives-grid { grid-template-columns: 1fr; }
  .perspectives-section { padding: 56px 20px; }
}

.p-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 28px 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-top-width: 4px;
}
.p-card-blue   { border-top-color: oklch(0.55 0.16 250); }
.p-card-green  { border-top-color: oklch(0.50 0.14 145); }
.p-card-amber  { border-top-color: oklch(0.65 0.14 70); }
.p-card-red    { border-top-color: oklch(0.55 0.18 25); }

.p-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.p-card-body p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.p-card-body p:first-child::before {
  content: '"';
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--ink-faint);
  line-height: 0;
  margin-right: 4px;
  vertical-align: -8px;
}
.p-card-body em {
  font-style: italic;
  color: var(--red);
}
.p-card-pitch {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.p-card-pitch strong { color: var(--red); font-weight: 600; }

.p-card-cta { margin-top: 18px; }
.p-card-btn {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.p-card-btn:hover { background: var(--ink); color: var(--paper); }

.p-card-form { display: flex; gap: 8px; }
.p-card-form input {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--paper);
}
.p-card-form input:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.p-card-form .btn-primary {
  padding: 9px 14px;
  font-size: 13px;
}
.p-card-thanks {
  font-size: 13px;
  color: oklch(0.55 0.14 145);
  background: oklch(0.96 0.04 145);
  padding: 9px 12px;
  border-radius: 4px;
}
.p-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 10px;
}

/* ===========================================================================
   PULSE — daily intelligence subscription signup (homepage)
   =========================================================================== */
.pulse-section {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 80px 24px;
}
.pulse-inner { max-width: 1240px; margin: 0 auto; }
.pulse-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .pulse-grid { grid-template-columns: 1fr; gap: 32px; }
  .pulse-section { padding: 56px 20px; }
}

.pulse-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 14px 0 24px;
}
.pulse-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pulse-bullets li {
  font-size: 15px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  position: relative;
  padding-left: 24px;
}
.pulse-bullets li:last-child { border-bottom: none; }
.pulse-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 600;
}

.pulse-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  border-radius: 8px;
  padding: 32px 28px;
  position: sticky;
  top: 24px;
}
.pulse-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.pulse-form { display: flex; flex-direction: column; }
.pulse-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 6px;
}
.pulse-label:first-of-type { margin-top: 0; }
.pulse-select, .pulse-email {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  background: var(--paper);
  width: 100%;
  box-sizing: border-box;
}
.pulse-select:focus, .pulse-email:focus {
  outline: 2px solid var(--red);
  outline-offset: -1px;
  border-color: transparent;
}
.pulse-submit {
  margin-top: 18px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
}
.pulse-fineprint {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  margin: 12px 0 0;
}
.pulse-card-thanks-h {
  font-family: var(--font-serif);
  font-size: 22px;
  margin-bottom: 8px;
  color: oklch(0.50 0.14 145);
}
.pulse-card-thanks p { color: var(--ink-soft); margin: 0; }

/* ===========================================================================
   CITY TILE GRID — replaces the old stylized US map
   =========================================================================== */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.city-tile {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 22px 22px 18px;
  cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 170px;
}
.city-tile:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.08);
}
.city-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.city-tile-name {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.city-tile-state {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.city-tile-mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.city-tile-leader { font-size: 14px; color: var(--ink); }
.city-tile-leader-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 4px;
}
.city-tile-pop { font-size: 12px; color: var(--ink-soft); }
.city-tile-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.city-tile-arrow {
  font-size: 18px;
  color: var(--ink-soft);
  transition: transform .12s;
}
.city-tile:hover .city-tile-arrow { transform: translateX(4px); color: var(--ink); }

/* Hide the legacy map container if it accidentally renders */
.us-map { display: none; }

/* =============================================================================
   PULSE PREVIEW PAGE — /#/pulse-preview
   Side-by-side: live data summary + iframe rendering of the actual digest HTML.
   ============================================================================= */

.pulse-preview-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.pulse-preview-header { margin-bottom: 24px; }
.pulse-preview-headline h1 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  margin: 8px 0 12px;
  letter-spacing: -0.02em;
}
.pulse-preview-headline p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 0 24px;
}

.pulse-preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  padding: 14px 18px;
  background: var(--ink-bg-soft, #f6f7f9);
  border: 1px solid var(--rule, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 18px;
}
.pulse-preview-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}
.pulse-preview-controls label > span { letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.pulse-preview-controls select {
  padding: 6px 10px;
  border: 1px solid var(--rule, #e5e7eb);
  border-radius: 6px;
  font-size: 14px;
  background: white;
  font-weight: 500;
  color: var(--ink);
}
.pulse-preview-toggle input { margin: 0; }

.pulse-preview-viewport {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--rule, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.pulse-preview-viewport button {
  background: white;
  border: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.pulse-preview-viewport button.active {
  background: var(--ink);
  color: white;
}

.pulse-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 12px 18px;
  background: #fffaeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 24px;
}
.pulse-preview-meta-item .meta-k {
  font-weight: 700;
  margin-right: 8px;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.pulse-preview-meta-item .meta-v {
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}

.pulse-preview-frame-wrap {
  position: relative;
  background: #0d1117;
  border: 1px solid var(--rule, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: center;
  min-height: 600px;
}
.pulse-preview-frame-wrap.mode-mobile { padding: 16px; }
.pulse-preview-frame {
  border: 0;
  width: 640px;
  max-width: 100%;
  height: 1100px;
  background: #0d1117;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.pulse-preview-frame-wrap.mode-mobile .pulse-preview-frame {
  width: 380px;
  border-radius: 22px;
  border: 8px solid #1f2937;
}
.pulse-preview-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #7d8590;
  font-size: 14px;
}

.pulse-preview-footer {
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
}
.pulse-preview-footer p { margin: 0 0 10px; }

@media (max-width: 720px) {
  .pulse-preview-controls { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pulse-preview-viewport { margin-left: 0; }
  .pulse-preview-frame { height: 900px; }
}

/* === Article detail view === */
.article-detail { padding: 0; }
.article-detail-hero {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule-soft);
  padding: 40px 0 56px;
}
.article-detail-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-soft); padding: 0; margin-bottom: 32px;
  transition: color 150ms;
}
.article-back:hover { color: var(--ink); }
.article-meta-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.article-cat {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.article-title-big {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.article-dek {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 28px;
}
.article-byline {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
  font-family: var(--font-mono);
  margin-bottom: 24px;
}
.article-byline strong { color: var(--ink); font-weight: 500; }
.article-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.article-stat-v {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 600;
  color: var(--red);
}
.article-stat-l {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.article-body { padding: 56px 0 96px; }
.article-body-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-lede {
  font-size: 22px; line-height: 1.55;
  color: var(--ink); font-weight: 400;
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-soft);
}
.article-h2 {
  font-family: var(--font-serif);
  font-size: 28px; line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}
.article-h3 {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.25;
  margin: 40px 0 12px;
}
.article-p {
  font-size: 18px; line-height: 1.7;
  color: var(--ink); margin: 0 0 24px;
}
.article-pull {
  border-left: 3px solid var(--red);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}

.article-footer { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule-soft); }
.article-cta {
  background: var(--paper-2);
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
}
.article-cta h3 {
  font-family: var(--font-serif);
  font-size: 22px; margin: 0 0 8px;
}
.article-cta p {
  color: var(--ink-soft); margin: 0 0 18px; line-height: 1.55;
}
.article-stub {
  text-align: center; padding: 64px 0;
}
.article-stub p {
  color: var(--ink-soft); font-size: 17px; line-height: 1.6;
  max-width: 480px; margin: 0 auto 24px;
}

/* Methodology page extras */
.method-list {
  font-size: 17px; line-height: 1.7;
  color: var(--ink);
  margin: 0 0 28px 24px;
  padding: 0;
}
.method-list li { margin-bottom: 10px; }
.method-list li strong { color: var(--ink); }
.method-formula {
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.7;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 18px 0 28px;
  color: var(--ink);
  white-space: pre-wrap;
}

/* === Admin / Editor view === */
.admin-page { background: var(--paper-2); min-height: 100vh; padding-bottom: 80px; }
.admin-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  padding: 32px 0 28px;
}
.admin-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.admin-hero h1 {
  font-family: var(--font-serif);
  font-size: 32px; margin: 0 0 4px;
}
.admin-hero p { color: var(--ink-soft); margin: 0; font-size: 14px; }
.admin-hero form { display: flex; gap: 8px; margin-top: 16px; max-width: 480px; }
.admin-hero input[type=password] {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  font-family: var(--font-mono); font-size: 14px;
}
.admin-hero-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Grouped tab nav — replaces the old single horizontal pill strip.
   Sections are separated by faint rules; each tab is a pill with a
   high-contrast active state. Wraps cleanly on narrow viewports. */
.admin-nav {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 6px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.admin-nav-group {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 14px 0 0;
  border-right: 1px solid var(--rule-soft);
}
.admin-nav-group:last-child { border-right: none; padding-right: 0; }
.admin-nav-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.admin-nav-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.admin-nav-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans, inherit);
  font-size: 13px; font-weight: 500;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, transform 120ms;
}
.admin-nav-tab:hover {
  background: var(--paper-2);
  border-color: var(--rule);
}
.admin-nav-tab.is-on {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.admin-nav-tab.is-on:hover { transform: translateY(-1px); }
.admin-nav-tab-ic {
  font-size: 11px; opacity: 0.78;
}
.admin-nav-tab.is-on .admin-nav-tab-ic { opacity: 1; }

@media (max-width: 720px) {
  .admin-nav-group { border-right: none; padding-right: 0; }
  .admin-nav-label { font-size: 8px; }
}

.admin-filters {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.admin-filters label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft); display: flex; align-items: center; gap: 8px;
}
.admin-filters select {
  padding: 6px 10px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--paper); color: var(--ink);
}
.admin-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.admin-list { padding-top: 24px; }
.admin-list-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.admin-error {
  background: oklch(0.95 0.04 25); color: oklch(0.40 0.16 25);
  border: 1px solid oklch(0.85 0.07 25);
  padding: 12px 16px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px;
  margin-bottom: 16px;
}
.admin-loading, .admin-empty {
  padding: 60px 0; text-align: center;
  color: var(--ink-soft); font-size: 14px;
}
.admin-row {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.admin-row-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.admin-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.05em;
}
.admin-tag[data-sev="high"], .admin-tag[data-sev="critical"] {
  background: oklch(0.94 0.06 25); color: oklch(0.42 0.18 25);
  border: 1px solid oklch(0.84 0.10 25);
}
.admin-tag[data-sev="moderate"] {
  background: oklch(0.94 0.06 75); color: oklch(0.45 0.16 75);
  border: 1px solid oklch(0.84 0.10 75);
}
.admin-tag[data-sev="low"] {
  background: oklch(0.94 0.04 145); color: oklch(0.40 0.10 145);
  border: 1px solid oklch(0.84 0.06 145);
}
.admin-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.admin-meta-right { margin-left: auto; }
.admin-row-text {
  font-size: 15px; line-height: 1.6;
  color: var(--ink); margin: 0 0 14px;
}
.admin-row-foot {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px; border-top: 1px dashed var(--rule-soft);
}
.admin-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.admin-status strong { color: var(--ink); }
.admin-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.btn-admin {
  padding: 6px 12px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule-soft);
  background: var(--paper); color: var(--ink);
  transition: all 120ms;
}
.btn-admin:hover { transform: translateY(-1px); }
.btn-verify { border-color: oklch(0.65 0.16 145); color: oklch(0.40 0.14 145); }
.btn-publish { border-color: oklch(0.50 0.16 250); color: var(--paper); background: oklch(0.50 0.16 250); }
.btn-reject { border-color: oklch(0.65 0.16 25); color: oklch(0.40 0.16 25); }
.btn-dupe { color: var(--ink-soft); }

/* === Auth pages === */
.auth-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.auth-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 4px;
}
.auth-input {
  padding: 12px 14px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  font-size: 16px; font-family: var(--font-mono);
  margin-bottom: 8px;
}
.auth-input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.auth-submit { margin-top: 8px; padding: 12px 18px; font-size: 14px; }
.auth-error {
  background: oklch(0.95 0.04 25); color: oklch(0.40 0.16 25);
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; font-family: var(--font-mono);
}
.auth-fineprint {
  font-size: 12px; color: var(--ink-soft); margin: 18px 0 0;
  line-height: 1.5;
}
.auth-fineprint a { color: var(--red); text-decoration: underline; }
.auth-sent {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 24px;
  margin-top: 8px;
}
.auth-sent-h {
  font-family: var(--font-serif);
  font-size: 22px; margin-bottom: 12px;
  color: oklch(0.40 0.14 145);
}
.auth-sent p { color: var(--ink); margin: 0 0 12px; line-height: 1.55; }
.link-button {
  background: none; border: none; padding: 0;
  color: var(--red); cursor: pointer; text-decoration: underline;
  font: inherit;
}

.account-list { list-style: none; padding: 0; margin: 0 0 28px; }
.account-row {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.account-city {
  font-family: var(--font-serif); font-size: 18px;
  text-transform: capitalize;
}
.account-meta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft); margin-top: 2px;
}

/* Dashboard city block */
.dashboard-city-block { margin-bottom: 32px; }
.dashboard-city-block .account-list { margin-bottom: 0; }

/* === Dashboard / command center === */
.dash {
  min-height: 100vh;
  background: var(--paper-2);
  padding-bottom: 80px;
  /* Tableau-style font stack — Helvetica is the canonical look. */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Override the global serif/mono var-based fonts inside the dashboard so
   numbers, headings, and meta text all read as Helvetica/Tableau-clean. */
.dash h1, .dash h2, .dash h3,
.dash .dash-card-h, .dash .dash-section-h,
.dash .report-title, .dash .report-chart-h,
.dash .dash-port-name, .dash .dash-metro-name,
.dash .kpi-num, .dash .dash-stat-num, .dash .dash-port-num,
.dash .kpi-label, .dash .dash-stat-label, .dash .dash-card-sub,
.dash .report-sub, .dash .dash-event-meta, .dash .kpi-delta,
.dash .dash-bar-num, .dash .dash-bar-label,
.dash .report-legend-item, .dash .report-heatmap,
.dash .dash-port-region, .dash .dash-port-l,
.dash .dash-bar-title, .dash .dash-live, .dash .dash-ticker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.dash h1, .dash h2, .dash h3,
.dash .report-title, .dash .report-chart-h,
.dash .dash-card-h, .dash .dash-section-h,
.dash .kpi-num, .dash .dash-stat-num,
.dash .dash-port-name, .dash .dash-metro-name {
  letter-spacing: -0.015em;
}
.dash-bar {
  background: oklch(0.965 0.025 250); /* soft tinted blue — flows with the page */
  color: var(--ink);
  padding: 17px 0 4px;
  border-bottom: 1px solid oklch(0.88 0.04 250);
  position: sticky; top: 0; z-index: 50;
}
.dash-bar-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  min-height: 56px;
}
.dash-bar-left { display: flex; align-items: center; gap: 18px; }
.dash-bar-right { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-bar-right .btn-ghost {
  color: var(--ink); border: 1px solid oklch(0.80 0.04 250);
  background: var(--paper); padding: 8px 16px;
  font-size: 13px; font-weight: 500;
}
.dash-bar-right .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dash-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px;
  letter-spacing: 0.1em; color: var(--ink);
  font-weight: 700;
}
.dash-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.65 0.18 145);
  animation: dashPulse 1.6s ease-in-out infinite;
}
@keyframes dashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.dash-bar-title {
  font-size: 16px;
  color: var(--ink);
}
.dash-bar-title strong { font-weight: 600; }
.dash-ticker {
  margin-top: 0; padding: 10px 24px;
  background: oklch(0.92 0.07 145);   /* soft green strip — matches the LIVE dot */
  color: oklch(0.25 0.04 145);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 16px;
  white-space: nowrap; overflow: hidden;
  border-top: 1px solid oklch(0.36 0.18 260);
}
.dash-ticker-label {
  color: oklch(0.42 0.20 30);   /* warm red — visible against gray */
  font-weight: 700; flex-shrink: 0;
}
.dash-ticker-feed {
  display: flex; gap: 32px; overflow: hidden;
  color: oklch(0.30 0 0);
}
.dash-ticker-item { flex-shrink: 0; }
.dash-ticker-item strong { color: oklch(0.20 0 0); }

/* Top-line stat tiles */
.dash-grid {
  max-width: 1400px; margin: 0 auto; padding: 24px;
}
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
/* ---- Stat-tile accent palette (matches the Intel Report color language) ---- */
.dash-stat[data-accent="blue"]   { --tile-accent: oklch(0.55 0.16 250); --tile-accent-soft: oklch(0.95 0.04 250); }
.dash-stat[data-accent="red"]    { --tile-accent: oklch(0.55 0.20 25);  --tile-accent-soft: oklch(0.95 0.04 25);  }
.dash-stat[data-accent="violet"] { --tile-accent: oklch(0.55 0.18 295); --tile-accent-soft: oklch(0.95 0.04 295); }
.dash-stat[data-accent="teal"]   { --tile-accent: oklch(0.55 0.14 200); --tile-accent-soft: oklch(0.95 0.04 200); }
.dash-stat[data-accent="amber"]  { --tile-accent: oklch(0.65 0.16 75);  --tile-accent-soft: oklch(0.95 0.04 75);  }
.dash-stat[data-accent="cyan"]   { --tile-accent: oklch(0.58 0.14 220); --tile-accent-soft: oklch(0.95 0.04 220); }
.dash-stat[data-accent="ice"]    { --tile-accent: oklch(0.62 0.10 220); --tile-accent-soft: oklch(0.96 0.03 220); }
.dash-stat[data-accent="green"]  { --tile-accent: oklch(0.55 0.16 145); --tile-accent-soft: oklch(0.94 0.04 145); }
.dash-stat {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--tile-accent-soft, var(--paper-2)) 100%);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 18px 18px 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 132px;
}
.dash-stat:hover {
  transform: translateY(-3px);
  border-color: var(--tile-accent, var(--ink));
  box-shadow: 0 6px 18px -8px var(--tile-accent, var(--ink-soft));
}
.dash-stat-strip {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tile-accent, var(--ink));
}
.dash-stat-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.dash-stat-num {
  font-family: var(--font-serif);
  font-size: 38px; font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.dash-stat-num[data-accent]:not([data-accent=""]) { color: var(--tile-accent, var(--ink)); }
.dash-stat-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink); text-transform: uppercase;
  letter-spacing: 0.06em; margin-top: 8px;
  font-weight: 700;
}
.dash-stat-spark {
  flex: 0 0 auto;
}
.dash-stat-spark rect { fill: var(--tile-accent, var(--ink)); opacity: 0.85; }
.dash-stat-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.dash-stat-delta { font-weight: 700; }
.dash-stat-delta-l { color: var(--ink-soft); font-weight: 500; }
.dash-stat-sub { color: var(--ink); text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12px; font-weight: 500; }

/* ---- Weather strip (sits directly below the command bar) ---- */
.dash-weather-strip {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.dash-weather-strip-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.dash-weather-strip-label {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule-soft);
  padding-right: 16px;
}
.dws-label-eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
  font-weight: 700;
}
.dws-label-sub {
  font-size: 12px; color: var(--ink-soft); margin-top: 4px;
}
.dash-weather-strip-cells {
  display: flex; gap: 4px; flex: 1; min-width: 0;
}
.dws-cell {
  flex: 1 1 0;
  min-width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  transition: background 120ms;
}
.dws-cell:hover { background: var(--paper-2); }
/* Subscribed metros now read as plain cells — only the actively-clicked
   one gets the blue highlight (matches the dash-stat tile selection
   pattern below the strip) */
.dws-cell-sub { background: transparent; outline: none; }
.dws-cell-sub:hover { background: var(--paper-2); }
.dws-icon { font-size: 18px; line-height: 1; }
.dws-city {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700;
}
.dws-temp {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 16px; color: var(--ink);
}
@media (max-width: 720px) {
  .dash-weather-strip-label { display: none; }
  .dash-weather-strip-inner { padding: 8px 12px; }
}

/* 3-column main grid */
.dash-main {
  max-width: 1400px; margin: 0 auto; padding: 0 24px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
/* ---- Accent palette shared by cards + sections (mirrors stat-tile palette) ---- */
[data-accent="blue"]   { --acc: oklch(0.55 0.16 250); --acc-soft: oklch(0.97 0.02 250); }
[data-accent="red"]    { --acc: oklch(0.55 0.20 25);  --acc-soft: oklch(0.97 0.02 25);  }
[data-accent="violet"] { --acc: oklch(0.55 0.18 295); --acc-soft: oklch(0.97 0.02 295); }
[data-accent="teal"]   { --acc: oklch(0.55 0.14 200); --acc-soft: oklch(0.97 0.02 200); }
[data-accent="amber"]  { --acc: oklch(0.65 0.16 75);  --acc-soft: oklch(0.97 0.02 75);  }
[data-accent="cyan"]   { --acc: oklch(0.58 0.14 220); --acc-soft: oklch(0.97 0.02 220); }
[data-accent="ice"]    { --acc: oklch(0.62 0.10 220); --acc-soft: oklch(0.97 0.015 220); }
[data-accent="green"]  { --acc: oklch(0.55 0.16 145); --acc-soft: oklch(0.97 0.02 145); }
[data-accent="orange"] { --acc: oklch(0.65 0.16 50);  --acc-soft: oklch(0.97 0.02 50);  }

.dash-card[data-accent], .dash-section[data-accent] {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--acc-soft) 100%);
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
  overflow: hidden;
}
.dash-card[data-accent]::before, .dash-section[data-accent]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--acc);
}
.dash-card[data-accent] .dash-card-h, .dash-section[data-accent] .dash-section-h {
  color: var(--ink);
}
.dash-card[data-accent] .dash-card-h::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc); margin-right: 8px;
  vertical-align: middle; transform: translateY(-2px);
}
.dash-card[data-accent]:hover, .dash-section[data-accent]:hover {
  border-color: var(--acc);
  box-shadow: 0 6px 20px -10px var(--acc);
}

.dash-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 18px 22px;
  min-height: 280px;
  transition: border-color 160ms, box-shadow 160ms;
}
.dash-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft);
}
.dash-card-h {
  font-family: var(--font-serif); font-size: 18px; margin: 0;
}
.dash-card-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-bars { list-style: none; padding: 0; margin: 0; }
.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(80px, 2fr) 40px;
  gap: 12px; align-items: center;
  padding: 8px 0;
  font-size: 13px;
}
.dash-bar-label {
  font-weight: 500;
  text-transform: capitalize;
  font-size: 13px;
  line-height: 1.25;
  /* Allow long labels to wrap to a second line instead of ellipsis */
  white-space: normal;
  word-break: break-word;
}
.dash-bar-track {
  height: 8px; background: var(--paper-2);
  border-radius: 4px; overflow: hidden;
}
.dash-bar-fill {
  height: 100%; background: var(--red);
  border-radius: 4px;
  transition: width 600ms ease-out;
}
.dash-bar-num {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; text-align: right;
}
.dash-empty {
  color: var(--ink-soft); font-style: italic;
  font-size: 13px; padding: 12px 0;
}

.dash-metro-list { list-style: none; padding: 0; margin: 0; }
.dash-metro-row {
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.dash-metro-row:last-child { border-bottom: none; }
.dash-metro-name {
  font-family: var(--font-serif); font-size: 16px;
  margin-bottom: 3px;
}
.dash-metro-stats {
  display: flex; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
}

/* Sections (critical events, weather, recent feed) */
.dash-section {
  max-width: 1400px; margin: 0 auto; padding: 8px 24px 0;
}
.dash-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; margin: 24px 0 12px;
}
.dash-section-h {
  font-family: var(--font-serif); font-size: 22px;
  margin: 0;
}
.dash-event-list {
  list-style: none; padding: 0; margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  overflow: hidden;
}
.dash-event {
  display: flex; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: flex-start;
}
.dash-event:last-child { border-bottom: none; }
.dash-event:hover { background: var(--paper-2); }
.dash-event-body { flex: 1; min-width: 0; }
.dash-event-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); margin-bottom: 4px;
  text-transform: capitalize;
}
.dash-event-meta strong { color: var(--ink); font-weight: 600; text-transform: none; }
.dash-event-text {
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.dash-footer-note {
  margin-top: 16px;
  font-size: 12px; color: var(--ink-soft);
  text-align: center; padding-bottom: 32px;
}
.dash-footer-note a { color: var(--red); }

/* Port pulse card grid */
.dash-port-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.dash-port-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 22px 24px;
  transition: transform 150ms;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.dash-port-card:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.dash-port-name {
  font-size: 22px;
  font-weight: 600; line-height: 1.2;
  margin-bottom: 6px;
}
.dash-port-region {
  font-size: 12px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  font-weight: 500;
}
.dash-port-stats { display: flex; gap: 18px; margin-top: 10px; }
.dash-port-stat { flex: 1; }
.dash-port-num {
  font-size: 36px; font-weight: 600;
  color: var(--ink); line-height: 1;
}
.dash-port-l {
  font-size: 12px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 4px; font-weight: 500;
}
.dash-port-monitor {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-soft); margin: 12px 0;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 500;
}
.dash-port-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.65 0.16 50);
  animation: dashPulse 1.6s ease-in-out infinite;
}
.dash-port-link {
  display: inline-block; margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  color: var(--red); text-decoration: none;
  font-weight: 500;
}
.dash-port-link:hover { text-decoration: underline; }

/* === Intel Report (Tableau-style) === */
.report-section {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 24px 28px 28px;
  margin-top: 8px;
  margin-bottom: 16px;
}
.report-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap; gap: 8px;
}
.report-title {
  font-family: var(--font-serif); font-size: 24px; margin: 0;
  letter-spacing: -0.01em;
}
.report-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* KPI tiles */
.kpi-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-tile {
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 14px 18px;
  background: var(--paper);
}
.kpi-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 6px;
  font-weight: 700;
}
.kpi-row { display: flex; align-items: baseline; gap: 10px; }
.kpi-num {
  font-family: var(--font-serif); font-size: 36px; font-weight: 600;
  line-height: 1; color: var(--ink);
}
.kpi-delta {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}
.kpi-spark {
  margin-top: 10px;
  display: block;
  opacity: 0.55;
}

/* Charts */
.report-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) {
  .report-charts { grid-template-columns: 1fr; }
}
.report-chart-card {
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 16px 18px;
  background: var(--paper);
}
.report-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.report-chart-h {
  font-family: var(--font-serif); font-size: 16px; margin: 0;
}
.report-chart svg { display: block; max-width: 100%; }
.report-legend {
  display: flex; gap: 14px; margin-top: 8px;
  flex-wrap: wrap;
}
.report-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}

/* Heatmap */
.report-heatmap-wrap {
  overflow-x: auto;
  margin: 4px -2px;
}
.report-heatmap {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  font-family: var(--font-mono);
}
.report-heatmap th, .report-heatmap td {
  border: 1px solid var(--paper);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  min-width: 60px;
}
.report-heatmap thead th {
  background: var(--paper-2);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.report-heatmap tbody th {
  text-align: left;
  background: var(--paper-2);
  font-weight: 500;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  font-family: var(--font-sans, system-ui);
}
.report-heatmap tbody td {
  font-weight: 600;
  transition: transform 100ms;
  cursor: default;
}
.report-heatmap tbody td:hover {
  transform: scale(1.05);
  z-index: 1;
  position: relative;
  outline: 2px solid var(--ink);
}

/* === Drill-down filter UI === */
.dash-bar-clickable { cursor: pointer; transition: background 100ms; padding-left: 4px; padding-right: 4px; border-radius: 4px; }
.dash-bar-clickable:hover { background: var(--paper-2); }
.report-filter-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: -8px 0 18px; padding: 10px 14px;
  background: oklch(0.96 0.04 250);
  border: 1px solid oklch(0.85 0.07 250);
  border-radius: 6px;
}
.report-filter-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); font-weight: 500;
}
.report-filter-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule-soft);
}
.report-filter-clear {
  margin-left: auto; padding: 4px 10px;
  background: var(--ink); color: var(--paper); border: none;
  border-radius: 4px; font-size: 11px; cursor: pointer;
  font-weight: 500;
}
.report-legend-clickable .report-legend-btn {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  border-radius: 4px; transition: background 100ms;
}
.report-legend-clickable .report-legend-btn:hover { background: var(--paper-2); }

/* === State of the cities chart === */
.state-city { display: flex; flex-direction: column; gap: 4px; }
.state-row {
  display: grid;
  grid-template-columns: 160px 1fr 50px 60px;
  align-items: center; gap: 12px;
  padding: 8px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms;
}
.state-row:hover { background: var(--paper-2); }
.state-name {
  font-weight: 500; font-size: 14px;
}
.state-state {
  display: inline-block; margin-left: 6px;
  font-size: 10px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.state-bar {
  display: flex; height: 14px; border-radius: 3px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
}
.state-seg { height: 100%; transition: width 400ms ease-out; }
.state-total {
  font-weight: 600; font-size: 14px; text-align: right;
}
.state-wx {
  font-size: 11px; color: var(--ink-soft);
  text-align: right; white-space: nowrap;
}

/* === 7-day forecast strip === */
.forecast-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 0;
}
.forecast-day {
  flex: 0 0 140px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.forecast-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forecast-temp-row {
  display: flex; align-items: center; gap: 8px;
}
.forecast-icon { font-size: 22px; line-height: 1; }
.forecast-temp {
  font-size: 22px; font-weight: 600; line-height: 1;
}
.forecast-cond {
  font-size: 11px; color: var(--ink); margin-top: 4px;
  line-height: 1.3;
}
.forecast-precip {
  font-size: 11px; color: oklch(0.50 0.16 250); margin-top: 4px;
}

/* Cold storage pulse */
.dash-cold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.dash-cold-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 14px 16px;
  transition: transform 150ms;
}
.dash-cold-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.dash-cold-cat {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.dash-cold-name {
  font-size: 14px; font-weight: 600; text-transform: capitalize;
  margin: 2px 0 8px;
}
.dash-cold-num {
  font-size: 26px; font-weight: 600; line-height: 1;
}
.dash-cold-unit {
  font-size: 10px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 3px;
}
.dash-cold-deltas {
  display: flex; gap: 12px; margin-top: 10px;
  font-size: 11px; font-weight: 600;
}

/* ImportYeti free-link icon on carrier rows — surfaces public CBP BOL data
   without us paying a licensing cost. Pure outbound link; no scraping. */
.iy-link {
  display: inline-flex; align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: oklch(0.94 0.04 250);
  color: oklch(0.40 0.16 250) !important;
  border: 1px solid oklch(0.85 0.07 250);
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; text-decoration: none;
  letter-spacing: 0.02em; text-transform: uppercase;
  transition: all 120ms;
}
.iy-link:hover {
  background: oklch(0.85 0.10 250);
  color: oklch(0.30 0.18 250) !important;
  text-decoration: none;
}

/* Terminal map/satellite/street-view buttons */
.term-map-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink) !important;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 120ms;
}
.term-map-btn:hover {
  background: var(--ink); color: var(--paper) !important;
  text-decoration: none; border-color: var(--ink);
}

/* === Dashboard refinements: +30% over default, tighter spacing, mini-feed === */
.dash {
  font-size: 21.2px !important;   /* ~+30% over default 16px */
  line-height: 1.5;
}
.dash .dash-stat-num { font-size: 44px; letter-spacing: -0.015em; }
.dash .dash-card-h, .dash .dash-section-h { font-size: 26px; }
.dash .dash-bar-row { font-size: 14px; }
.dash .dash-bar-label { font-size: 14px; }
.dash .dash-event-text { font-size: 18.4px; }
.dash .kpi-num { font-size: 48px !important; }
.dash .dash-fuel-num, .dash .dash-cold-num, .dash .dash-port-num, .dash .dash-commodity-num { font-size: 34px !important; }
.dash .forecast-temp { font-size: 28px !important; }
.dash .forecast-cond { font-size: 14px !important; }
.dash .dash-card { padding: 22px 24px; }
.dash .dash-section { padding-top: 12px; }
.dash .dash-section-head { margin-top: 18px; margin-bottom: 10px; }
.dash .dash-stats { padding: 18px 24px 10px; }

/* Compact mini-feed (used inside hero grid Critical card) */
.dash-mini-feed { list-style: none; padding: 0; margin: 0; }
.dash-mini-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-size: 13px;
}
.dash-mini-row:last-child { border-bottom: none; }
.dash-mini-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
}
.dash-mini-meta strong { color: var(--ink); font-weight: 600; }
.dash-mini-time { margin-left: auto; }
.dash-mini-text {
  font-size: 13px; line-height: 1.45; color: var(--ink);
}

/* Pair cold-storage + port-pulse side-by-side on wide screens */
.dash-paired {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) {
  .dash-paired { grid-template-columns: 1fr; }
}
.dash-paired .dash-section { padding: 0; max-width: none; }

/* === Fuel & oil markets card === */
.dash-fuel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dash-fuel-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.dash-fuel-card.dash-fuel-divergence {
  background: oklch(0.97 0.04 80);
  border-color: oklch(0.85 0.10 80);
}
.dash-fuel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.dash-fuel-num {
  font-size: 28px; font-weight: 600; line-height: 1;
}
.dash-fuel-unit {
  font-size: 11px; color: var(--ink-soft); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dash-fuel-regions {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px;
  background: var(--paper-2);
  border-radius: 8px;
  border: 1px solid var(--rule-soft);
}
.dash-fuel-regions-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.dash-fuel-region {
  display: flex; gap: 6px; align-items: baseline;
}
.dash-fuel-region-name { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.dash-fuel-region-num { font-size: 14px; font-weight: 600; }

/* Commodities card */
.dash-commodity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.dash-commodity-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.dash-commodity-name {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.dash-commodity-num {
  font-size: 28px; font-weight: 600; line-height: 1;
  margin-top: 6px;
}
.dash-commodity-unit {
  font-size: 11px; color: var(--ink-soft); margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dash-commodity-why {
  font-size: 11px; color: var(--ink); margin-top: 8px;
  line-height: 1.4; font-style: italic;
}

/* Per-metro carrier chips inside Your Metros card */
.dash-metro-row-detail { padding: 14px 0; }
.dash-metro-carriers {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 8px;
}
.dash-metro-carriers-label {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dash-metro-carrier-chip {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms;
  /* anchor reset (chip can be <button> or <a>) */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
.dash-metro-carrier-chip:hover {
  background: currentColor !important;
  color: var(--paper) !important;
  border-color: currentColor !important;
  filter: brightness(1.05);
}
.dash-metro-carrier-chip:hover .dash-carrier-dot,
.dash-metro-carrier-chip:hover strong { color: var(--paper); }
.dash-metro-carrier-chip strong { font-weight: 600; }

/* Account for the sticky royal-blue command bar + gray ticker (~120px total)
   when smooth-scrolling to a section anchor from a stat-tile click. */
.dash [id^="dash-"] { scroll-margin-top: 140px; }

/* =============================================================
   Per-carrier intel feed (page-other.jsx > CarrierIntelFeed)
   ============================================================= */
.ci-section { display: flex; flex-direction: column; gap: 24px; }
.ci-sub { color: var(--ink-soft); max-width: 720px; line-height: 1.55; margin: 0; }

.ci-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .ci-summary-row { grid-template-columns: repeat(2, 1fr); }
}
.ci-stat {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 16px;
  text-align: left;
}
.ci-stat-num { font-size: 28px; font-weight: 600; line-height: 1; }
.ci-stat-l   {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ci-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 720px) {
  .ci-breakdown { grid-template-columns: 1fr; }
}
.ci-bd-h {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.ci-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chip {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}
.ci-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ci-chip-on   { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ci-chip-static { cursor: default; }
.ci-chip-static:hover { background: var(--paper-2); color: inherit; border-color: var(--rule-soft); }
.ci-chip strong { font-weight: 600; margin-left: 4px; }

.ci-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.ci-filter-pill {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
}
.ci-clear {
  background: none;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.ci-clear:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ci-feed { display: flex; flex-direction: column; gap: 0; }
.ci-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}
.ci-row {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ci-row:last-child { border-bottom: none; }
.ci-row-l {
  flex: 0 0 4px;
  border-radius: 2px;
  background: #6b7280;
  align-self: stretch;
}
.ci-row-body { flex: 1; min-width: 0; }
.ci-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ci-sev-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ci-sev-critical { background: #fecaca; color: #7f1d1d; }
.ci-sev-high     { background: #fee2e2; color: #991b1b; }
.ci-sev-moderate { background: #fef3c7; color: #92400e; }
.ci-sev-low      { background: #f3f4f6; color: #374151; }
.ci-row-meta { font-size: 12px; color: var(--ink-soft); }
.ci-row-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.ci-row-source {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: none;
}
.ci-row-source:hover { color: var(--ink); text-decoration: underline; }

/* Carrier-name link on the LA report-card row — opens /#/carrier/<slug> */
.carrier-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
.carrier-name-link:hover { border-bottom-color: currentColor; }

/* Compact port-pulse grid — 4-up at large widths, denser than the old card grid */
.dash-port-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.dash-port-mini {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  transition: border-color 120ms, transform 120ms;
}
.dash-port-mini:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.dash-port-mini-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dash-port-mini-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-port-mini-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.dpm-live { background: oklch(0.92 0.10 145); color: oklch(0.30 0.10 145); }
.dpm-monitor { background: oklch(0.94 0.04 75); color: oklch(0.40 0.10 75); }
.dash-port-mini-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.dash-port-mini-stats {
  display: flex; gap: 12px;
  font-size: 12px; color: var(--ink);
  margin-top: 2px;
}
.dash-port-mini-stats strong { font-weight: 600; }
.dash-port-mini-link {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: none;
}
.dash-port-mini-link:hover { color: var(--ink); }

/* Weather strip — make cells clickable + expanded forecast region */
.dws-cell { cursor: pointer; }
.dws-cell-active {
  background: oklch(0.93 0.05 250) !important;
  outline: 2px solid var(--acc, oklch(0.55 0.16 250));
}
.dash-weather-expanded {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  padding: 16px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.dash-weather-expanded-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.dash-weather-expanded-h {
  font-family: var(--font-serif); font-size: 18px; margin: 0;
}
.dash-weather-expanded-close {
  background: none; border: 1px solid var(--rule-soft); border-radius: 999px;
  width: 28px; height: 28px; cursor: pointer; font-size: 14px;
  font-family: inherit;
  color: var(--ink-soft);
}
.dash-weather-expanded-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Intel Report KPI tiles + chart cards: accent treatment ---- */
.kpi-tile[data-accent], .report-chart-card[data-accent] {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--acc-soft) 100%);
  border-radius: 12px;
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  transition: border-color 160ms, box-shadow 160ms;
}
.kpi-tile[data-accent]::before, .report-chart-card[data-accent]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--acc);
}
.kpi-tile[data-accent]:hover, .report-chart-card[data-accent]:hover {
  border-color: var(--acc);
  box-shadow: 0 6px 20px -10px var(--acc);
}
.kpi-num[data-accent] { color: var(--acc); }
.kpi-spark[data-accent] polyline { stroke: var(--acc); opacity: 1; }
.kpi-spark[data-accent] { opacity: 1; }
.report-chart-card[data-accent] .report-chart-h::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc); margin-right: 8px;
  vertical-align: middle; transform: translateY(-2px);
}

/* ---- Pattern radar (chronic issues list) ---- */
.pattern-list { display: flex; flex-direction: column; gap: 6px; }
.pattern-empty {
  padding: 24px; text-align: center; color: var(--ink-soft);
  background: var(--paper-2); border: 1px dashed var(--rule-soft);
  border-radius: 8px; font-style: italic;
}
.pattern-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.pattern-row:hover {
  border-color: var(--ink-soft);
  transform: translateX(2px);
  box-shadow: 0 2px 8px -4px rgba(0,0,0,0.1);
}
.pattern-sev-dot {
  flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%;
}
.pattern-sev-critical { background: oklch(0.50 0.22 25); }
.pattern-sev-high     { background: oklch(0.55 0.20 25); }
.pattern-sev-moderate { background: oklch(0.65 0.16 75); }
.pattern-sev-low      { background: oklch(0.65 0.05 145); }
.pattern-row-critical { border-left: 3px solid oklch(0.50 0.22 25); }
.pattern-row-high     { border-left: 3px solid oklch(0.55 0.20 25); }
.pattern-row-moderate { border-left: 3px solid oklch(0.65 0.16 75); }
.pattern-body { flex: 1; min-width: 0; }
.pattern-headline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; line-height: 1.3;
}
.pattern-subject { font-weight: 700; color: var(--ink); }
.pattern-arrow   { color: var(--ink-soft); font-weight: 400; }
.pattern-type    {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--paper-2);
  padding: 2px 8px; border-radius: 999px;
  color: var(--ink);
}
.pattern-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.pattern-meta strong { color: oklch(0.55 0.20 25); }
.pattern-count {
  flex: 0 0 auto;
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--ink);
  min-width: 36px; text-align: right;
}

/* ---- Across-the-network metro grid (all 12 featured) ---- */
.dash-metro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dash-metro-cell {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 120ms, transform 120ms;
}
.dash-metro-cell:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.dash-metro-cell-sub {
  background: oklch(0.97 0.025 200);
  border-color: oklch(0.85 0.05 200);
}
.dash-metro-cell-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.dash-metro-cell-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.dash-metro-cell-pill {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: oklch(0.55 0.14 200); color: var(--paper);
  padding: 2px 7px; border-radius: 999px;
}
.dash-metro-cell-meta {
  font-size: 12px; color: var(--ink-soft);
}
.dash-metro-cell-meta strong { color: var(--ink); font-weight: 700; }
.dash-metro-cell-carriers {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.dash-metro-cell-empty {
  font-size: 11px; color: var(--ink-soft); font-style: italic;
}

/* Pattern radar — search bar + expandable detail */
.pattern-search-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pattern-search {
  flex: 1; min-width: 260px;
  padding: 9px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--paper);
  transition: border-color 120ms;
}
.pattern-search:focus { border-color: var(--ink); outline: none; }
.pattern-search-clear {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.pattern-search-clear:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pattern-search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pattern-row-wrap {
  display: flex; flex-direction: column;
  margin-bottom: 6px;
}
.pattern-row-wrap > .pattern-row { margin-bottom: 0; width: 100%; }
.pattern-open > .pattern-row {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.pattern-chevron {
  flex: 0 0 auto;
  font-size: 14px; color: var(--ink-soft);
  margin-left: 4px;
}
.pattern-detail {
  border: 1px solid var(--rule-soft);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--paper-2);
  padding: 12px 14px;
}
.pattern-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
  flex-wrap: wrap; gap: 8px;
}
.pattern-detail-filter {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.pattern-detail-filter:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pattern-detail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pattern-detail-row {
  display: flex; gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
}
.pattern-detail-body { flex: 1; min-width: 0; }
.pattern-detail-meta {
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 4px;
}
.pattern-detail-meta strong { font-weight: 700; }
.pattern-detail-text {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}

/* Port pulse — additional pill state + soft secondary stat row */
.dpm-active { background: oklch(0.92 0.10 200); color: oklch(0.30 0.10 220); }
.dash-port-mini-stats-soft {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule-soft);
}
.dash-port-mini-stats-soft strong { color: var(--ink); font-weight: 700; }
.dash-port-mini-flag { color: oklch(0.55 0.20 25); }
.dash-port-mini-flag strong { color: oklch(0.55 0.20 25); }

/* =============================================================
   LIVE RADAR — homepage section that teases the dashboard's
   pattern + feed view to drive Pulse subscriptions.
   ============================================================= */
.radar-section {
  background: linear-gradient(180deg, oklch(0.97 0.02 250) 0%, oklch(0.99 0.01 250) 100%);
  border-top: 1px solid oklch(0.88 0.04 250);
  border-bottom: 1px solid oklch(0.88 0.04 250);
  padding: 72px 24px;
}
.radar-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 36px;
}
.radar-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px; align-items: end;
}
@media (max-width: 880px) {
  .radar-head { grid-template-columns: 1fr; }
}
.radar-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 14px;
}
.radar-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.65 0.18 145);
  animation: dashPulse 1.6s ease-in-out infinite;
}
.radar-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600; line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.radar-title em { font-style: italic; color: oklch(0.50 0.16 250); }
.radar-sub {
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  margin: 0; max-width: 660px;
}

.radar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.radar-stat {
  background: var(--paper);
  border: 1px solid oklch(0.88 0.04 250);
  border-radius: 10px;
  padding: 12px 14px;
}
.radar-stat-num {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 600; line-height: 1;
  color: var(--ink);
}
.radar-stat-l {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.06em; margin-top: 6px;
}

.radar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .radar-grid { grid-template-columns: 1fr; } }

.radar-card {
  position: relative;
  background: var(--paper);
  border: 1px solid oklch(0.88 0.04 250);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.radar-card-head { display: flex; flex-direction: column; gap: 2px; }
.radar-card-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.radar-card-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.radar-loading {
  padding: 30px 0; text-align: center; color: var(--ink-soft);
  font-style: italic;
}

.radar-pattern-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.radar-pattern-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: oklch(0.97 0.02 25);
  border: 1px solid oklch(0.92 0.04 25);
  border-left: 3px solid oklch(0.55 0.20 25);
  border-radius: 8px;
}
.radar-pattern-headline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; line-height: 1.3; color: var(--ink);
}
.radar-pattern-arrow { color: var(--ink-soft); }
.radar-pattern-type {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--paper); padding: 2px 8px; border-radius: 999px;
}
.radar-pattern-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.radar-pattern-meta strong { color: oklch(0.55 0.20 25); }
.radar-pattern-flag { color: oklch(0.55 0.20 25); }
.radar-pattern-count {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--ink); min-width: 32px; text-align: right;
}

.radar-card-cta {
  margin-top: auto;
  background: var(--ink); color: var(--paper); border: none;
  padding: 10px 16px; border-radius: 8px;
  font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background 120ms;
}
.radar-card-cta:hover { background: oklch(0.50 0.16 250); }

.radar-card-feed { position: relative; }
.radar-feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.radar-feed-row {
  display: flex; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.radar-feed-row:last-child { border-bottom: none; }
.radar-feed-sev {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; padding: 3px 7px; border-radius: 4px;
  flex: 0 0 auto; align-self: flex-start;
}
.radar-feed-sev-critical { background: oklch(0.92 0.10 25); color: oklch(0.40 0.18 25); }
.radar-feed-sev-high     { background: oklch(0.94 0.08 25); color: oklch(0.45 0.18 25); }
.radar-feed-sev-moderate { background: oklch(0.95 0.06 75); color: oklch(0.40 0.14 75); }
.radar-feed-sev-low      { background: oklch(0.95 0.02 200); color: oklch(0.40 0.06 200); }
.radar-feed-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink); margin-bottom: 3px;
}
.radar-feed-type {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft);
}
.radar-feed-age { font-size: 11px; color: var(--ink-soft); margin-left: auto; }
.radar-feed-text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* Soft fade at the bottom of the feed teasing "more inside" */
.radar-feed-fade {
  position: absolute; left: 0; right: 0; bottom: 60px; height: 70px;
  background: linear-gradient(180deg, transparent 0%, var(--paper) 90%);
  pointer-events: none;
}

.radar-cta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px; align-items: center;
  padding: 28px 32px;
  background: linear-gradient(135deg, oklch(0.50 0.16 250) 0%, oklch(0.42 0.18 270) 100%);
  border-radius: 16px;
  color: var(--paper);
  box-shadow: 0 12px 36px -12px oklch(0.50 0.16 250 / 0.35);
}
@media (max-width: 720px) { .radar-cta { grid-template-columns: 1fr; padding: 22px 20px; } }
.radar-cta-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.85 0.06 250); margin-bottom: 6px;
}
.radar-cta-h {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600; margin: 0 0 8px; line-height: 1.15;
  color: var(--paper);
}
.radar-cta-sub { color: oklch(0.92 0.03 250); margin: 0; font-size: 14px; line-height: 1.55; }
.radar-cta-btn {
  background: var(--paper); color: oklch(0.40 0.16 250);
  border: none; border-radius: 999px;
  padding: 14px 24px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  white-space: nowrap;
}
.radar-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.2); }

/* ---- Carrier color dot (used inline next to carrier names) ---- */
.dash-carrier-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ---- MoM (month-over-month) tag for fuel + commodity cards ---- */
.mom-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 6px;
}
.mom-up   { background: oklch(0.94 0.06 25);  color: oklch(0.45 0.18 25);  }
.mom-down { background: oklch(0.94 0.07 145); color: oklch(0.40 0.14 145); }
.mom-flat { background: var(--paper-2); color: var(--ink-soft); }

/* ---- Air cargo hubs section ---- */
.dash-air-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.dash-air-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 120ms, transform 120ms;
}
.dash-air-card:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.dash-air-card-alert {
  border-color: oklch(0.78 0.12 25);
  box-shadow: inset 0 0 0 1px oklch(0.92 0.04 25);
}
.dash-air-head {
  display: flex; align-items: center; gap: 12px;
}
.dash-air-iata {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.05em;
  background: oklch(0.96 0.04 295);
  color: oklch(0.40 0.18 295);
  padding: 6px 10px; border-radius: 6px;
  flex: 0 0 auto;
}
.dash-air-city {
  font-weight: 700; font-size: 14px; color: var(--ink);
}
.dash-air-role {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.dash-air-carrier {
  font-size: 12px; color: var(--ink); font-weight: 600;
  padding: 4px 0;
  border-top: 1px dashed var(--rule-soft);
  border-bottom: 1px dashed var(--rule-soft);
}
.dash-air-stats {
  display: flex; gap: 18px;
}
.dash-air-stat-num {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--ink);
}
.dash-air-stat-l {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 4px;
}
.dash-air-foot {
  display: flex; gap: 14px; align-items: center;
  font-size: 16px; color: var(--ink);
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft);
  padding-top: 10px;
  font-weight: 600;
}
.dash-air-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.dash-air-foot > span:first-child { font-size: 18px; }   /* temp + icon prominent */
.dash-air-foot strong { color: var(--ink); font-weight: 700; }
.dash-air-flag { color: oklch(0.55 0.20 25); font-size: 14px; }

/* ---- Truck-accessible fuel stops ---- */
.dash-truckstop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.dash-truckstop-col {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.dash-truckstop-city {
  font-weight: 700; font-size: 16px; color: var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.dash-truckstop-count {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.dash-truckstop-chains { display: flex; flex-wrap: wrap; gap: 5px; }
.dash-truckstop-chain-pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
}
.dash-truckstop-chain-pill strong { font-weight: 800; margin-left: 4px; }

.dash-truckstop-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-truckstop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.dash-truckstop-row:last-child { border-bottom: none; }
.dash-truckstop-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.dash-truckstop-body { flex: 1; min-width: 0; }
.dash-truckstop-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-truckstop-meta { font-size: 11px; color: var(--ink-soft); }
.dash-truckstop-link {
  flex: 0 0 auto;
  font-size: 11px; color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
}
.dash-truckstop-link:hover { color: var(--ink); text-decoration: underline; }

/* ---- Active warnings banner (severe/extreme NWS, time-windowed) ---- */
.dash-warnings {
  background: linear-gradient(180deg, oklch(0.97 0.04 25) 0%, oklch(0.99 0.015 25) 100%);
  border-bottom: 1px solid oklch(0.86 0.10 25);
}
.dash-warnings-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
}
.dash-warnings-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dash-warnings-badge {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
  background: oklch(0.50 0.22 25); color: var(--paper);
}
.dash-warnings-count {
  font-family: var(--font-mono);
  font-size: 11px; color: oklch(0.40 0.16 25);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700;
}
.dash-warnings-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 8px;
}
.dash-warning-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid oklch(0.86 0.10 25);
  border-left: 4px solid oklch(0.55 0.20 25);
  border-radius: 8px;
}
.dash-warning-extreme { border-left-color: oklch(0.45 0.25 25); background: oklch(0.99 0.02 25); }
.dash-warning-severe  { border-left-color: oklch(0.55 0.20 25); }
.dash-warning-pill {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 4px;
  flex: 0 0 auto; align-self: flex-start;
  white-space: nowrap;
}
.dash-warning-pill-extreme { background: oklch(0.45 0.25 25); color: var(--paper); }
.dash-warning-pill-severe  { background: oklch(0.94 0.06 25); color: oklch(0.40 0.18 25); }
.dash-warning-body { flex: 1; min-width: 0; }
.dash-warning-headline {
  font-size: 14px; line-height: 1.3; color: var(--ink);
}
.dash-warning-headline strong { font-weight: 700; }
.dash-warning-city { color: var(--ink-soft); margin-left: 4px; }
.dash-warning-window {
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.40 0.16 25);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 3px;
}
.dash-warning-window strong { font-weight: 700; }
.dash-warning-detail {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.4;
}
.dash-warnings-more {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); text-align: center;
  margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---- Truck stops: metro list w/ click-to-expand ---- */
.dash-tsmetro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.dash-tsmetro-wrap { display: flex; flex-direction: column; }
.dash-tsmetro-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.dash-tsmetro-btn:hover:not(:disabled) {
  border-color: oklch(0.65 0.16 50);
  transform: translateY(-1px);
}
.dash-tsmetro-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.dash-tsmetro-btn-sub { background: oklch(0.97 0.025 200); border-color: oklch(0.85 0.05 200); }
.dash-tsmetro-btn-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-tsmetro-name {
  font-weight: 700; font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dash-tsmetro-sub-pill {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: oklch(0.55 0.14 200); color: var(--paper);
  padding: 2px 7px; border-radius: 999px;
}
.dash-tsmetro-count { font-size: 12px; color: var(--ink-soft); }
.dash-tsmetro-count strong { color: var(--ink); font-weight: 700; }
.dash-tsmetro-chains { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-tsmetro-chain-mini {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
}
.dash-tsmetro-chain-mini strong { font-weight: 800; margin-left: 3px; }
.dash-tsmetro-chevron { color: var(--ink-soft); font-size: 16px; }
.dash-tsmetro-open .dash-tsmetro-btn {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  border-color: oklch(0.65 0.16 50);
}
.dash-tsmetro-detail {
  background: var(--paper-2);
  border: 1px solid oklch(0.65 0.16 50);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 8px 12px 12px;
}
.dash-tsmetro-more {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft); text-align: center;
  margin-top: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Weather pill inside the top crawler */
.dash-ticker-wx { color: oklch(0.40 0.18 25); }
.dash-ticker-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em;
  background: oklch(0.50 0.22 25); color: var(--paper);
  padding: 2px 7px; border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Active-warnings dismiss controls */
.dash-warning-row { position: relative; }
.dash-warning-close {
  flex: 0 0 auto;
  align-self: flex-start;
  background: transparent;
  border: 1px solid oklch(0.86 0.10 25);
  color: oklch(0.40 0.16 25);
  width: 26px; height: 26px;
  border-radius: 999px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 120ms;
}
.dash-warning-close:hover {
  background: oklch(0.50 0.22 25); color: var(--paper);
  border-color: oklch(0.50 0.22 25);
}
.dash-warnings-dismiss-all {
  margin-left: auto;
  background: var(--paper);
  border: 1px solid oklch(0.86 0.10 25);
  color: oklch(0.40 0.16 25);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 120ms;
}
.dash-warnings-dismiss-all:hover {
  background: oklch(0.50 0.22 25); color: var(--paper);
  border-color: oklch(0.50 0.22 25);
}

/* Recent feed: source link + notes line */
.dash-event-source {
  color: oklch(0.50 0.16 250);
  text-decoration: none;
  font-weight: 600;
}
.dash-event-source:hover { text-decoration: underline; }
.dash-event-notes {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* Source-filter chips (toggle a feed source out of dashboard numbers) */
.dash-source-filter {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
}
.dash-source-filter-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dash-source-filter-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.06em;
  margin-right: 4px;
}
.dash-source-chip {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms;
  letter-spacing: 0.03em;
}
.dash-source-chip strong { font-weight: 700; margin-left: 4px; color: var(--ink-soft); }
.dash-source-chip:hover { border-color: var(--ink); }
.dash-source-chip-off {
  background: var(--paper-2);
  color: var(--ink-soft);
  border-color: var(--rule-soft);
  text-decoration: line-through;
}
.dash-source-chip-off strong { color: var(--ink-soft); }
.dash-source-clear {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.dash-source-clear:hover { filter: brightness(1.15); }
.dash-source-filter-help {
  font-size: 11px; color: var(--ink-soft); margin-left: auto;
}
@media (max-width: 720px) { .dash-source-filter-help { display: none; } }

/* Truck-stop map */
.dash-tsmetro-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .dash-tsmetro-detail-grid { grid-template-columns: 1fr; } }
.ts-map {
  height: 340px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  z-index: 0;
}
.ts-pin .ts-pin-dot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.leaflet-popup-content .ts-popup-name { font-weight: 700; font-size: 13px; }
.leaflet-popup-content .ts-popup-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.leaflet-popup-content .ts-popup-link {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 600;
  color: oklch(0.50 0.16 250); text-decoration: none;
}
.leaflet-popup-content .ts-popup-link:hover { text-decoration: underline; }

/* Source filter — hidden-rows warning chip */
.dash-source-filter-warning {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: oklch(0.45 0.18 25);
  background: oklch(0.96 0.04 25);
  border: 1px solid oklch(0.85 0.10 25);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.04em;
}
.dash-source-filter-warning strong { font-weight: 800; }

/* =============================================================
   COMING SOON splash — public site lock until launch
   ============================================================= */
.cs-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background:
    radial-gradient(circle at 20% 20%, oklch(0.93 0.06 250 / 0.6) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, oklch(0.95 0.05 145 / 0.5) 0%, transparent 50%),
    var(--paper);
}
.cs-card {
  max-width: 580px; width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 48px 40px;
  box-shadow: 0 24px 64px -32px rgba(0,0,0,0.18);
}
@media (max-width: 540px) { .cs-card { padding: 32px 24px; } }
.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}
.cs-dot {
  display: inline-block; width: 8px; height: 8px;
  background: oklch(0.65 0.18 145);
  border-radius: 50%;
  animation: dashPulse 1.6s ease-in-out infinite;
}
.cs-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700; line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cs-title em { font-style: italic; color: oklch(0.50 0.16 250); }
.cs-sub {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 460px;
}
.cs-form {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.cs-input {
  flex: 1; min-width: 220px;
  padding: 13px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  font-family: inherit; font-size: 15px;
  background: var(--paper);
  transition: border-color 120ms;
}
.cs-input:focus { outline: none; border-color: var(--ink); }
.cs-btn {
  padding: 13px 22px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: filter 120ms;
}
.cs-btn:hover:not(:disabled) { filter: brightness(1.15); }
.cs-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cs-thanks {
  padding: 14px 18px;
  background: oklch(0.95 0.06 145);
  color: oklch(0.30 0.10 145);
  border-radius: 10px;
  font-weight: 600;
}
.cs-foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12px;
  color: var(--ink-soft);
}
.cs-foot-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cs-foot-link:hover { color: var(--ink); }

/* Multi-source story badge on recent feed rows */
.dash-event-cluster {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  background: oklch(0.94 0.06 295);
  color: oklch(0.40 0.18 295);
  border: 1px solid oklch(0.85 0.10 295);
  padding: 2px 8px;
  border-radius: 999px;
  cursor: help;
}

/* ============== CARRIER DEEP-DIVE SEARCH (home conversion surface) ============== */
.cdds-section {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 36px 24px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  position: relative;
}
.cdds-section::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ink), oklch(0.30 0.012 60));
  border-radius: 10px 10px 0 0;
}
.cdds-inner { max-width: 820px; }
.cdds-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cdds-eyebrow-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.cdds-title {
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.cdds-title em { font-style: italic; color: var(--ink); }
.cdds-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 22px;
}
.cdds-preview {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.cdds-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.cdds-link:hover { color: oklch(0.30 0.012 60); }
.cdds-foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.cdds-foot-sep { opacity: 0.5; }
.cdds-order-btn { text-decoration: none; display: inline-block; }
@media (max-width: 640px) {
  .cdds-section { margin: 24px 16px 0; padding: 24px 18px 22px; }
  .cdds-title { font-size: 24px; }
  .cdds-sub { font-size: 14px; }
}

/* =====================================================================
   DOSSIER DARK THEME (.theme-dark)
   =====================================================================
   Applied at the page-wrapper level for routes that should look like
   the carrier-dossier page: home, welcome, top100 hub + directories,
   and the carrier/broker/shipper dossiers themselves.
   The dossier/welcome/top100 pages already inline their dark gradient
   on a per-page basis, so this primarily flips the GLOBAL chrome
   (header, nav, footer, search, buttons) + the home page section
   styles to match.
   Strategy: redefine the design tokens scoped to .theme-dark, plus a
   handful of explicit overrides for spots that bake in '#fff' in
   inline <style> blocks inside page-home.jsx.
   ===================================================================== */

.theme-dark {
  --paper:      #0a1224;
  --paper-2:    rgba(255, 255, 255, 0.04);
  --paper-3:    rgba(255, 255, 255, 0.07);
  --ink:        #ffffff;
  --ink-soft:   rgba(255, 255, 255, 0.65);
  --ink-faint:  rgba(255, 255, 255, 0.45);
  --rule:       rgba(255, 255, 255, 0.10);
  --rule-soft:  rgba(255, 255, 255, 0.06);
  background:   radial-gradient(circle at 30% 0%, #1d2d52 0%, #0a1224 55%, #050913 100%);
  color: var(--ink);
  min-height: 100vh;
}

/* Header chrome — sits sticky at top of every page. The default css uses
   color-mix on var(--paper) so it'd otherwise come out a translucent navy;
   the explicit overrides here keep it deliberately ink-dark with a frosted
   bottom edge. */
.theme-dark .si-header {
  background: rgba(10, 18, 36, 0.78);
  border-bottom-color: rgba(95, 169, 255, 0.20);
}
.theme-dark .si-nav-row {
  background: rgba(10, 18, 36, 0.55);
  border-top-color: rgba(255, 255, 255, 0.06);
}
.theme-dark .si-nav-link {
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
}
.theme-dark .si-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(95, 169, 255, 0.45);
  color: #fff;
}
.theme-dark .si-nav-link.active {
  background: #5fa9ff;
  border-color: #5fa9ff;
  color: #0a1224;
}
.theme-dark .si-nav-link.active:hover {
  background: #5fa9ff;
  color: #0a1224;
  opacity: 0.92;
}

/* Universal search — input + dropdown */
.theme-dark .si-search-input {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.theme-dark .si-search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.theme-dark .si-search-input:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: #5fa9ff;
}
.theme-dark .si-search-dropdown {
  background: rgba(15, 24, 48, 0.96);
  border-color: rgba(95, 169, 255, 0.30);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}
.theme-dark .si-search-row { color: #fff; }
.theme-dark .si-search-row:hover { background: rgba(95, 169, 255, 0.10); }
.theme-dark .si-search-grouph,
.theme-dark .si-search-row .r-meta,
.theme-dark .si-search-empty { color: rgba(255, 255, 255, 0.55); }

/* Buttons — primary stays bright, ghost flips to translucent white */
.theme-dark .btn-primary,
.theme-dark .btn-primary-lg {
  background: #5fa9ff;
  border-color: #5fa9ff;
  color: #0a1224;
}
.theme-dark .btn-primary:hover { background: #7fb8ff; border-color: #7fb8ff; }
.theme-dark .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.theme-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(95, 169, 255, 0.55);
}

/* Footer */
.theme-dark .si-footer {
  background: rgba(10, 18, 36, 0.85);
  border-top-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .si-footer-cols a { color: rgba(255, 255, 255, 0.65); }
.theme-dark .si-footer-cols a:hover { color: #fff; }

/* Home page — page-home.jsx has many inline <style> blocks that bake in
   `background: #fff` for cards, statbars, ghost CTAs. These overrides catch
   the most visible offenders. Generic '[class*="card"]' would be too greedy
   and would clobber the dossier-page cards rendered alongside, so we list
   the specific home-page section classes instead. !important is required
   because the inline <style> blocks rendered inside the React component
   tree have equal-or-higher specificity due to load order. */
.theme-dark .page-sc-home,
.theme-dark .sch2-statbar,
.theme-dark .sch2-stat-cell,
/* Hub Group Proof block — pale-blue gradient panel + #fff inner cards
   bake their colors inline on the JSX side, so a token flip won't catch
   them. Override with !important to clobber the inline style values. */
.theme-dark .hgp-section {
  background: linear-gradient(180deg, rgba(95,169,255,0.08) 0%, rgba(95,169,255,0.03) 100%) !important;
  border-color: rgba(95,169,255,0.25) !important;
}
.theme-dark .hgp-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.theme-dark .sch2-tile,
.theme-dark .sch-card,
.theme-dark .lr-tile,
.theme-dark .cbp-card,
.theme-dark .ddrev-card,
.theme-dark .cbp-cta-ghost,
.theme-dark .sch-cta-ghost,
.theme-dark .laf-card,
.theme-dark .fi-card,
.theme-dark .radar-card,
.theme-dark .city-tile {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.theme-dark .page-sc-home {
  background: transparent !important; /* parent .theme-dark handles the gradient */
}

/* Tile/card child text — eyebrows, titles, bodies, CTAs */
.theme-dark .sch2-tile-eyebrow,
.theme-dark .sch2-tile-body,
.theme-dark .sch2-grid-eyebrow {
  color: rgba(255, 255, 255, 0.65) !important;
}
.theme-dark .sch2-tile-title,
.theme-dark .sch2-grid-h,
.theme-dark .sch2-tile-cta {
  color: #fff !important;
}
.theme-dark .sch2-tile {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.theme-dark .sch2-tile:hover {
  border-color: rgba(95, 169, 255, 0.45) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.theme-dark .sch2-tile-cta {
  border-bottom-color: rgba(255, 255, 255, 0.30) !important;
}
.theme-dark .sch2-tile:hover .sch2-tile-cta {
  border-bottom-color: #5fa9ff !important;
}

/* Big CTA band that uses `var(--ink)` bg + `var(--paper)` text — under
   theme-dark this auto-flips to white-bg-dark-text which is visually
   correct (a bright callout band). But explicit overrides keep it from
   becoming snow blindness — soften to the brand blue so it feels native. */
.theme-dark .sch2-cta-band {
  background: rgba(95, 169, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(95, 169, 255, 0.35);
}
.theme-dark .sch2-cta-h { color: #fff !important; }
.theme-dark .sch2-cta-sub { color: rgba(255, 255, 255, 0.75) !important; }
.theme-dark .sch2-cta-btn {
  background: #5fa9ff !important;
  color: #0a1224 !important;
}

/* Stat strip that anchors the hero — already mostly correct via var
   flips, but the inner cell borders default to var(--rule) which under
   dark = rgba(255,255,255,0.10) — fine. Numbers and labels need to be
   bright; they were probably using var(--ink) which now = #fff. */
.theme-dark .sch2-stat-num { color: #fff !important; }
.theme-dark .sch2-stat-label { color: rgba(255, 255, 255, 0.55) !important; }
.theme-dark .sch2-statbar { border-color: rgba(255, 255, 255, 0.10) !important; }
.theme-dark .sch2-stat-cell {
  border-right-color: rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

/* Headlines + body copy in home stay legible against the gradient */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3 { color: #fff; }
.theme-dark p,
.theme-dark li,
.theme-dark span,
.theme-dark a { color: inherit; }

/* News / story cards rendered on home (stories crawl, featured grid etc) */
.theme-dark .sch-investigation-card,
.theme-dark .sch-investigation-card a,
.theme-dark .sch-news-feed,
.theme-dark .sch-news-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* Pulse signup section card chrome */
.theme-dark .sch-pulse-card,
.theme-dark .sch2-callout {
  background: rgba(95, 169, 255, 0.08);
  border-color: rgba(95, 169, 255, 0.30);
}

/* Density wrapper — keeps padding right when nested under theme-dark */
.theme-dark.density-compact { padding-bottom: 0; }

/* CTA buttons inside page-home.jsx use the pattern
   `background: var(--ink); color: #fff` — that pattern inverts wrong
   under theme-dark (white-on-white). Override the whole class set so
   primary CTAs become bright-blue pills, ghost CTAs become translucent
   white outlines. */
.theme-dark .cbp-cta-primary,
.theme-dark .sch-cta-primary,
.theme-dark .sch-aud-cta-primary {
  background: #5fa9ff !important;
  color: #0a1224 !important;
  border-color: #5fa9ff !important;
}
.theme-dark .cbp-cta-primary:hover,
.theme-dark .sch-cta-primary:hover,
.theme-dark .sch-aud-cta-primary:hover { background: #7fb8ff !important; }

.theme-dark .cbp-cta-ghost,
.theme-dark .sch-cta-ghost,
.theme-dark .sch-aud-cta-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.theme-dark .cbp-cta-ghost:hover,
.theme-dark .sch-cta-ghost:hover,
.theme-dark .sch-aud-cta-ghost:hover {
  background: rgba(95, 169, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(95, 169, 255, 0.55) !important;
}

/* Equipment tags + small chips that use ink fill with white text */
.theme-dark .cbp-tag-equip {
  background: rgba(95, 169, 255, 0.18) !important;
  color: #5fa9ff !important;
}