@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg-base:        #0b0f0d;
  --bg-surface:     #0e1410;
  --bg-panel:       #111a14;
  --bg-border:      #1a3328;
  --bg-border-dim:  #111f17;

  --text-primary:   #c8ddd5;
  --text-secondary: #6a9a85;
  --text-muted:     #3d5c4a;
  --text-dim:       #253d2e;

  --teal:           #5DCAA5;
  --teal-mid:       #1D9E75;
  --teal-dim:       #0F6E56;

  --amber:          #EF9F27;
  --amber-mid:      #BA7517;
  --amber-text:     #FAC775;

  --red:            #E24B4A;
  --red-mid:        #A32D2D;
  --red-text:       #F09595;

  --blue:           #5BA4E0;
  --blue-mid:       #378ADD;
  --blue-text:      #85B7EB;

  --purple:         #9F96E8;
  --purple-mid:     #7F77DD;

  --green:          #7BC44E;
  --green-mid:      #639922;

  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;

  --nav-h:   52px;
  --stats-h: 44px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  height: var(--nav-h);
  background: #080c0a;
  border-bottom: 1px solid var(--bg-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: .2em;
}

.nav-logo .sep { color: var(--text-dim); }

.nav-items {
  display: flex;
  gap: 2px;
}

.nav-items a {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .1em;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}

.nav-items a:hover  { color: var(--teal); background: rgba(29,158,117,.08); }
.nav-items a.active { color: var(--teal); background: rgba(29,158,117,.12); }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip {
  height: var(--stats-h);
  background: #09100c;
  border-bottom: 1px solid var(--bg-border-dim);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
}

.stat-item {
  padding: 0 20px 0 0;
  margin-right: 20px;
  border-right: 1px solid var(--bg-border-dim);
}

.stat-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }

.stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1.1;
}

.stat-value.amber { color: var(--amber); }
.stat-value.red   { color: var(--red); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* ============================================================
   PAGE LAYOUTS
   ============================================================ */
.page-map {
  display: grid;
  grid-template-columns: 1fr 280px;
  height: calc(100vh - var(--nav-h) - var(--stats-h));
  overflow: hidden;
}

.page-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.main-panel { overflow-y: auto; border-right: 1px solid var(--bg-border-dim); }
.sidebar    { overflow-y: auto; padding: 16px; }

/* ============================================================
   SECTION LABELS + DIVIDERS
   ============================================================ */
.section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sidebar-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-title.amber { color: var(--amber); }
.sidebar-title.blue  { color: var(--blue); }
.sidebar-title.teal  { color: var(--teal); }

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--bg-border-dim);
  margin: 14px 0;
}

/* ============================================================
   PULSE DOT (active case indicator)
   ============================================================ */
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.pulse-dot.red { background: var(--red); animation-duration: 1.2s; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

/* ============================================================
   MAP
   ============================================================ */
.map-container { padding: 16px; }

.map-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

#world-map {
  width: 100%;
  background: #090d0b;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-border-dim);
  display: block;
}

.map-wrap { position: relative; }

/* globe drag cursor — pins override with cursor:pointer below */
.map-container svg          { cursor: grab; }
.map-container svg:active   { cursor: grabbing; }

/* map pin hover */
.map-pin { cursor: pointer; transition: r .1s; }
.map-pin:hover { filter: brightness(1.4); }

/* ============================================================
   TOOLTIP
   ============================================================ */
.map-tooltip {
  position: absolute;
  background: var(--bg-panel);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  pointer-events: none;
  display: none;
  z-index: 50;
  min-width: 170px;
  max-width: 220px;
}

.map-tooltip.visible { display: block; }

.tooltip-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
}

.tooltip-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.5;
}

/* ============================================================
   ENTRY CARD — SMALL (sidebar / list rows)
   ============================================================ */
.card-sm {
  border-left: 2px solid var(--teal-mid);
  padding: 8px 10px;
  margin-bottom: 7px;
  background: var(--bg-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background .15s;
}

.card-sm:hover { background: var(--bg-panel); }

.card-sm.amber  { border-left-color: var(--amber); }
.card-sm.red    { border-left-color: var(--red); }
.card-sm.blue   { border-left-color: var(--blue-mid); }
.card-sm.purple { border-left-color: var(--purple-mid); }
.card-sm.green  { border-left-color: var(--green-mid); }

.card-sm-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.card-sm.amber  .card-sm-title { color: var(--amber-text); }
.card-sm.red    .card-sm-title { color: var(--red-text); }
.card-sm.blue   .card-sm-title { color: var(--blue-text); }

.card-sm-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ============================================================
   ENTRY CARD — FULL
   ============================================================ */
.card-full {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-border-dim);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1.3;
}

.card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* status indicator */
.status-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dim);
}

.status-dot.active      { background: var(--amber); animation: pulse 2s infinite; }
.status-dot.developing  { background: var(--amber); animation: pulse 1.2s infinite; }

.card-body { padding: 12px 16px; }

/* ============================================================
   CATEGORY BADGE
   ============================================================ */
.badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  letter-spacing: .05em;
  display: inline-block;
}

.badge.incident     { background: rgba(29,158,117,.12);  color: var(--teal); }
.badge.testimony    { background: rgba(55,138,221,.12);  color: var(--blue); }
.badge.congressional{ background: rgba(127,119,221,.12); color: var(--purple); }
.badge.scientific   { background: rgba(123,196,78,.12);  color: var(--green); }
.badge.suppression  { background: rgba(226,75,74,.12);   color: var(--red); }
.badge.active       { background: rgba(239,159,39,.12);  color: var(--amber); }

/* ============================================================
   CREDIBILITY INDICATORS
   ============================================================ */
.cred-block {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-border-dim);
}

.cred-block-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--teal-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cred-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cred-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  width: 120px;
  flex-shrink: 0;
}

.cred-segments {
  display: flex;
  gap: 2px;
  flex: 1;
}

.cred-seg {
  height: 5px;
  flex: 1;
  border-radius: 1px;
  background: var(--bg-border-dim);
}

.cred-seg.teal   { background: var(--teal-mid); }
.cred-seg.teal.t { background: var(--teal); }
.cred-seg.amber  { background: var(--amber-mid); }
.cred-seg.amber.t{ background: var(--amber); }
.cred-seg.red    { background: var(--red-mid); }

.cred-value {
  font-family: var(--font-mono);
  font-size: 9px;
  width: 90px;
  text-align: right;
  flex-shrink: 0;
  color: var(--teal);
}

.cred-value.amber  { color: var(--amber); }
.cred-value.red    { color: var(--red); }
.cred-value.muted  { color: var(--text-secondary); }

.cred-notes {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--bg-border);
}

/* ============================================================
   CARD BODY CONTENT
   ============================================================ */
.card-summary {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 10px 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}

.tag {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--bg-border-dim);
}

/* ============================================================
   EVIDENCE LIST
   ============================================================ */
.evidence-list {
  margin: 10px 0;
}

.evidence-item {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--bg-border-dim);
  align-items: flex-start;
}

.evidence-item:last-child { border-bottom: none; }

.evidence-type {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(29,158,117,.1);
  color: var(--teal-mid);
  flex-shrink: 0;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.evidence-type.missing     { background: rgba(239,159,39,.1); color: var(--amber-mid); }
.evidence-type.suppression { background: rgba(226,75,74,.1);  color: var(--red-mid); }

.evidence-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================
   SOURCE ROW + PANEL
   ============================================================ */
.source-row {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal-mid);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-border-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.source-toggle {
  color: var(--teal);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0;
}

.source-toggle:hover { text-decoration: underline; }

.source-panel {
  display: none;
  background: var(--bg-panel);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
}

.source-panel.open { display: block; }

.source-entry {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bg-border-dim);
  align-items: flex-start;
}

.source-entry:last-child { border-bottom: none; }

.src-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.src-badge.primary      { background: rgba(29,158,117,.15);  color: var(--teal); }
.src-badge.on-record    { background: rgba(55,138,221,.15);  color: var(--blue); }
.src-badge.corroborated { background: rgba(127,119,221,.15); color: var(--purple); }
.src-badge.single-source{ background: rgba(239,159,39,.15);  color: var(--amber); }
.src-badge.anonymous    { background: rgba(226,75,74,.15);   color: var(--red); }
.src-badge.missing      { background: rgba(239,159,39,.1);   color: var(--amber); border: 1px solid var(--amber-mid); }
.src-badge.classified   { background: rgba(226,75,74,.1);    color: var(--red);   border: 1px solid var(--red-mid); }

.src-label {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.src-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}

.src-url {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--teal-mid);
}

.src-url:hover { color: var(--teal); text-decoration: underline; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-border-dim);
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg-base);
  position: sticky;
  top: 0;
  z-index: 10;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .1em;
  margin-right: 4px;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bg-border);
  background: transparent;
  color: var(--text-muted);
  letter-spacing: .05em;
  transition: all .15s;
}

.filter-btn:hover        { border-color: var(--teal-dim); color: var(--teal); }
.filter-btn.active       { border-color: var(--teal-mid); color: var(--teal); background: rgba(29,158,117,.08); }
.filter-btn.amber.active { border-color: var(--amber-mid); color: var(--amber); background: rgba(239,159,39,.08); }
.filter-btn.red.active   { border-color: var(--red-mid);   color: var(--red);   background: rgba(226,75,74,.08); }

/* ============================================================
   CROSS-REFERENCE LINKS
   ============================================================ */
.xref-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-border-dim);
}

.xref-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: .1em;
  margin-bottom: 6px;
}

.xref-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.xref-link {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bg-border);
  color: var(--teal-mid);
  cursor: pointer;
  transition: all .15s;
}

.xref-link:hover { border-color: var(--teal-mid); color: var(--teal); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .1em;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar           { width: 4px; height: 4px; }
::-webkit-scrollbar-track     { background: var(--bg-base); }
::-webkit-scrollbar-thumb     { background: var(--bg-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover{ background: var(--teal-dim); }

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 16px; }
.mt-lg  { margin-top: 24px; }
.mb-sm  { margin-bottom: 8px; }
.hidden { display: none; }

/* ============================================================
   NAV TAGLINE
   ============================================================ */
.nav-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .1em;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--bg-border-dim);
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--bg-border-dim);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .08em;
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--teal);
}

/* ============================================================
   PAGE HEADER (non-map pages)
   ============================================================ */
.page-header {
  padding: 24px 24px 0;
  border-bottom: 1px solid var(--bg-border-dim);
  margin-bottom: 0;
}

.page-header-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.page-header-desc {
  font-size: 13px;
  color: var(--text-muted);
  padding-bottom: 16px;
  max-width: 600px;
  line-height: 1.6;
}

/* ============================================================
   MOBILE — responsive breakpoints
   ============================================================ */

/* ── 900px: tighten nav tagline ── */
@media (max-width: 900px) {
  .nav-tagline { display: none; }
  .tl-search   { width: 120px; }
}

/* ── 768px: full mobile layout ── */
@media (max-width: 768px) {

  /* NAV — hamburger */
  .nav {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
    gap: 8px;
    position: relative;
  }

  .nav-logo { font-size: 12px; }

  .nav-items {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 2px;
    padding-bottom: 8px;
  }

  .nav-items.open { display: flex; }

  .nav-items a {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
  }

  .nav-hamburger {
    background: none;
    border: 1px solid var(--bg-border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 16px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-left: auto;
    line-height: 1;
  }

  .nav-hamburger:hover { color: var(--teal); border-color: var(--teal-dim); }

  /* STATS STRIP — 2 col grid */
  .stats-strip {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 12px;
    gap: 0;
  }

  .stat-item {
    padding: 6px 8px;
    margin: 0;
    border-right: none;
    border-bottom: 1px solid var(--bg-border-dim);
    text-align: center;
  }

  .stat-item:nth-child(n+4) { border-bottom: none; }
  .stat-item:nth-child(3n) { border-right: none; }

  .stat-value { font-size: 15px; }
  .stat-label { font-size: 8px; }

  /* MAP PAGE — stack vertically */
  .page-map {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .main-panel { border-right: none; border-bottom: 1px solid var(--bg-border-dim); }
  .sidebar    { padding: 12px; }
  .map-container { padding: 10px; }

  /* FILTER BAR — wrap tightly */
  .filter-bar {
    gap: 4px;
    padding: 8px 12px;
  }

  .filter-btn { font-size: 8px; padding: 3px 7px; }
  .filter-label { font-size: 8px; }

  .tl-search {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
  }

  /* TIMELINE */
  .tl-year-block { padding-left: 52px; }
  .tl-year-label { width: 44px; font-size: 10px; }
  .tl-year-line  { left: 50px; }
  .tl-year-tick  { left: 46px; }

  .tl-entry { padding: 8px; gap: 8px; }
  .tl-entry-title { font-size: 12px; white-space: normal; }

  .tl-wrap { padding: 0 12px 32px; }

  /* CARDS */
  .card-header { flex-direction: column; gap: 6px; }
  .card-header-right { flex-direction: row; }

  .cred-label { width: 90px; font-size: 8px; }
  .cred-value { width: 70px; font-size: 8px; }

  /* SECTION GRIDS — single column */
  .section-grid,
  .testimony-grid {
    grid-template-columns: 1fr;
  }

  .witness-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--bg-border-dim);
    max-height: 240px;
    overflow-y: auto;
  }

  .testimony-main { padding: 12px; }

  /* SCIENCE / SUPPRESSION / ACTIVE */
  .science-wrap,
  .supp-wrap,
  .active-wrap {
    padding: 12px 12px 32px;
  }

  .criteria-grid,
  .pattern-grid,
  .path-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  /* PAGE HEADER */
  .page-header { padding: 16px 12px 0; }
  .page-header-desc { font-size: 12px; }

  /* CONTRIBUTE tier tables */
  .tier-table th,
  .tier-table td { font-size: 10px; padding: 6px 8px; }
  .tier-table td:last-child { display: none; } /* hide example col on mobile */

  /* FOOTER */
  .site-footer {
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    font-size: 8px;
    text-align: center;
  }

  /* GENERAL */
  .page-list { padding: 12px; }
}

/* ── 480px: extra small phones ── */
@media (max-width: 480px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+5) { border-bottom: none; }
  .stat-item:nth-child(n+3):nth-child(-n+4) { border-bottom: none; }

  .card-meta { flex-wrap: wrap; gap: 4px; }
  .badge { font-size: 8px; }

  .tl-cred-mini .tl-seg { width: 5px; }
}

/* ── map pin pulse animation ── */
@keyframes map-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0;   }
}

.map-pulse-ring {
  transform-box:    fill-box;
  transform-origin: center;
  animation: map-pulse 2s ease-out infinite;
}