/* Tax Pit — Dark theme, Australia-centred globe platform */

/* ── Per-tab skeleton loader ── */
@keyframes skel-pulse { 0%,100%{opacity:.15} 50%{opacity:.3} }
.tab-skeleton { padding: 12px 0; }
.tab-skeleton .skel-gauge {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px;
  background: #1f2937; animation: skel-pulse 1.2s ease-in-out infinite;
}
.tab-skeleton .skel-card {
  height: 72px; border-radius: 6px; margin-bottom: 10px;
  background: #1f2937; animation: skel-pulse 1.2s ease-in-out infinite;
}
.tab-skeleton .skel-card.short { width: 60%; }

:root {
  --bg:            #0a0a1a;
  --panel:         #111827;
  --border:        #1f2937;
  --tab-active:    #3b82f6;
  --tab-inactive:  #4b5563;
  --text:          #e0e0e0;
  --text-muted:    #9ca3af;
  --crime:         #ef4444;
  --health:        #f97316;
  --economy:       #f59e0b;
  --environment:   #14b8a6;
  --politics:      #a855f7;
  --beach:         #06b6d4;
  --asx-up:        #22c55e;
  --asx-down:      #ef4444;
  --tick-leg:      #60a5fa;
  --tick-break:    #f87171;
  --tick-big3:     #f59e0b;
  --tick-immig:    #ffffff;
  --heatmap-hot:   #991b1b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
}

/* ── LAYOUT ── */
#app {
  display: grid;
  grid-template-rows: 38px 44px 1fr 44px;
  grid-template-columns: 1fr var(--sidebar-width, 320px);
  height: 100vh;
}
#app:not(.sidebar-dragging) { transition: grid-template-columns 0.3s ease; }
#app.sidebar-collapsed { --sidebar-width: 0px; }

/* Ticker */
#ticker {
  grid-column: 1 / -1;
  grid-row: 1;
  background: linear-gradient(180deg, #0a0e1a 0%, #070714 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 13px;
  height: 38px;
  position: relative;
}
#ticker::before {
  content: '⚡ LIVE';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(90deg, #0a0e1a 70%, transparent);
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  z-index: 2;
}
#ticker::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, #070714);
  z-index: 2;
}
#ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  padding-left: 60px;
  will-change: transform;
}
.tick-item {
  padding: 0 1.8rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  transition: color 0.2s;
}
.tick-item:hover {
  color: #ffffff !important;
}
.tick-item strong {
  font-size: 10px;
  opacity: 0.7;
  margin-right: 4px;
}
.tick-item.legislation { color: var(--tick-leg); }
.tick-item.breaking    { color: #fca5a5; font-weight: 700; text-shadow: 0 0 8px rgba(239,68,68,0.3); }
.tick-item.crime       { color: #f87171; }
.tick-item.big3        { color: var(--tick-big3); }
.tick-item.immigration { color: var(--tick-immig); }
.tick-item.politics    { color: #60a5fa; }
.tick-item.economy     { color: #22d3ee; }
.tick-item.health      { color: #4ade80; }
.tick-item.fuel        { color: #fb923c; }
.tick-item.finance     { color: #fbbf24; }
.tick-item.environment { color: #2dd4bf; }
.tick-item.transport   { color: #e2e8f0; }
.tick-item.housing     { color: #f472b6; }
.tick-item.defence     { color: #a78bfa; }
.tick-item.education   { color: #67e8f9; }
.tick-item.gambling    { color: #fb923c; }
.tick-item.welfare     { color: #86efac; }
.tick-item.media       { color: #c4b5fd; }
.tick-item.infrastructure { color: #fdba74; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tab bar */
#tab-bar-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
#tab-bar {
  display: flex;
  align-items: center;
  padding: 0 1.8rem;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#tab-bar::-webkit-scrollbar { height: 5px; }
#tab-bar::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
#tab-bar::-webkit-scrollbar-thumb:hover { background: #64748b; }
#tab-bar::-webkit-scrollbar-track { background: transparent; }
.tab-scroll-btn {
  position: absolute; top: 0; bottom: 0; width: 1.6rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to right, var(--panel) 60%, transparent);
  border: none; color: #94a3b8; font-size: 0.85rem; cursor: pointer;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.tab-scroll-btn.visible { opacity: 1; pointer-events: auto; }
.tab-scroll-btn:hover { color: #e2e8f0; }
.tab-scroll-btn.left { left: 0; }
.tab-scroll-btn.right { right: 0; background: linear-gradient(to left, var(--panel) 60%, transparent); }

.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--tab-inactive);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 0 0.75rem;
  height: 40px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--tab-active); }
.tab-btn.disabled { opacity: 0.35; cursor: not-allowed; }

/* Globe area */
#globe-container {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
#globe { width: 100%; height: 100%; }

/* Loading overlay */
#globe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,26,0.85);
  z-index: 10;
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Site loading screen ── */
#cw-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg, #0a0a1a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 35vh;
  gap: 24px;
  transition: opacity 0.5s ease;
}
#cw-loader.done { opacity: 0; pointer-events: none; }
#cw-loader .loader-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#cw-loader .loader-sub {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: -16px;
}
#cw-loader .loader-track {
  width: 260px;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
}
#cw-loader .loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #818cf8);
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: loader-shimmer 1.5s ease-in-out infinite;
}
@keyframes loader-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#cw-loader .loader-status {
  font-size: 0.68rem;
  color: #4b5563;
  min-height: 1em;
}

/* Sidebar */
#sidebar {
  grid-column: 2;
  grid-row: 3;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#app:not(.sidebar-dragging) #sidebar { transition: width 0.3s ease, opacity 0.3s ease; }
.sidebar-collapsed #sidebar { width: 0 !important; opacity: 0; pointer-events: none; border-left: none; }

/* Sidebar drag handle */
#sidebar-drag {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
#sidebar-drag:hover, #sidebar-drag.active { background: rgba(59,130,246,0.35); }

/* Sidebar toggle button — inside globe-container, right edge */
#sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 25;
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  width: 20px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}
#sidebar-toggle:hover { color: var(--text); background: #1a2035; }
#sidebar-header {
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Text size scale — bumped from original */
  --sb-header: 0.88rem;
  --sb-label: 0.78rem;
  --sb-value: 1.05rem;
  --sb-small: 0.72rem;
  --sb-tiny: 0.62rem;
  --sb-source: 0.58rem;
}

/* Sidebar sections */
.sidebar-section { margin-bottom: 1rem; }
.sidebar-section h3 {
  font-size: var(--sb-header, 0.88rem);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4rem; align-items: start; }
.stat-card {
  background: #1a2035;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  min-width: 0; /* prevent grid blowout */
}
.stat-card .label { font-size: var(--sb-label, 0.78rem); color: var(--text-muted); margin-bottom: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card .value { font-size: var(--sb-value, 1.05rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Decline index ramp */
.score-critical  { color: #990000; }
.score-severe    { color: #ff3300; }
.score-significant { color: #ff8800; }
.score-declining { color: #ffcc00; }
.score-slight    { color: #88ff00; }
.score-stable    { color: #00ff88; }

/* Filter controls */
.sidebar-section-filters {
  background: #1a2035;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
}
.filter-row { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.filter-row label { font-size: var(--sb-label, 0.78rem); color: var(--text-muted); min-width: 56px; }
.filter-row select, .filter-row input {
  flex: 1;
  background: #1a2035;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: var(--sb-small, 0.78rem);
  padding: 0.3rem 0.4rem;
}

/* ── AUTO-GRID: uniform-height grids use auto-fill ── */
.cw-grid,
.pred-grid,
.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  align-items: start;
}

/* ── WIDE SIDEBAR: CSS columns for zero-gap card packing ── */
.sidebar-wide .sidebar-section-chart {
  columns: 250px;
  column-gap: 10px;
}
/* Non-card, non-gauge items span all columns (filters, text, accuracy) */
.sidebar-wide .sidebar-section-chart > *:not(.cw-card) {
  column-span: all;
  margin-bottom: 10px;
}
/* Cards pack tightly in columns — no vertical gaps */
.cw-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}
/* Recommendations card spans full width so next card stacks below */
.cw-card-recs {
  column-span: all;
}

#sidebar-body.sb-wide .sidebar-section { margin-bottom: 0.75rem; }

/* Fixture warning banner */
#fixture-banner {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(245,158,11,0.15);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  font-size: 0.72rem;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  z-index: 20;
  pointer-events: none;
  display: none;
}

/* Timeline bar */
/* ═══════════════════════════════════════════════════
   INTERACTIVE TIMELINE — 2020-2030
   ═══════════════════════════════════════════════════ */
#timeline-bar {
  grid-column: 1 / -1; grid-row: 4;
  background: #060a12; border-top: 1px solid #1a1f2e;
  position: relative; z-index: 40;
  font-family: 'Inter', system-ui, sans-serif;
}
/* When expanded, break out of grid and overlay from bottom */
#timeline-bar.tl-expanded-mode {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9000;
}
.tl-hidden { display: none !important; }

/* ── COLLAPSED — 40px ── */
#tl-collapsed {
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
  height: 40px; user-select: none;
}
.tl-c-left { flex: 0 0 auto; }
.tl-c-year { color: #4b5563; font-size: 0.65rem; font-weight: 700; }
.tl-c-track {
  flex: 1; height: 8px; background: #111827; border-radius: 4px;
  position: relative; cursor: pointer;
}
.tl-c-track:hover { background: #1a2035; }
.tl-c-gradient {
  position: absolute; inset: 0; border-radius: 4px; opacity: 0.5;
  background: linear-gradient(90deg, #22c55e 0%, #22c55e 20%, #f59e0b 45%, #ef4444 75%, #7f1d1d 100%);
}
.tl-c-progress {
  position: absolute; top: 0; left: 0; bottom: 0; border-radius: 4px;
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 60%, #ef4444 100%);
  opacity: 0.8;
}
.tl-c-dots { position: absolute; inset: 0; pointer-events: none; }
.tl-c-dot {
  position: absolute; top: -2px; width: 3px; height: 12px; border-radius: 2px;
  opacity: 0.6; transform: translateX(-50%);
}
.tl-c-now {
  position: absolute; top: -12px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center;
}
.tl-c-now-line {
  width: 2px; height: 32px; background: #fff; border-radius: 1px;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.4);
  animation: tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse { 0%,100%{box-shadow:0 0 8px 2px rgba(255,255,255,0.3)} 50%{box-shadow:0 0 16px 4px rgba(255,255,255,0.7)} }
.tl-c-now-label {
  font-size: 0.5rem; font-weight: 700; color: #fff; white-space: nowrap;
  margin-top: 2px; text-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.tl-c-right {
  flex: 0 0 auto; text-align: right; line-height: 1.2;
}
.tl-c-2030 {
  font-size: 0.58rem; font-weight: 700; color: #ef4444; font-style: italic;
  display: block;
}
.tl-c-2030-attr {
  font-size: 0.42rem; color: #6b7280; display: block;
}
.tl-c-expand {
  background: none; border: 1px solid #1f2937; color: #6b7280; font-size: 0.52rem;
  padding: 3px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.tl-c-expand:hover { background: #1f2937; color: #e5e7eb; border-color: #374151; }

/* ── EXPANDED — 400px ── */
#tl-expanded {
  background: #060a12; height: 480px; display: flex; flex-direction: column;
  animation: tl-slide 0.3s ease-out;
}
@keyframes tl-slide { from{height:0;opacity:0} to{height:480px;opacity:1} }

.tl-e-header {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 4px;
  border-bottom: 1px solid #111827; flex-shrink: 0;
}
.tl-e-title { font-size: 0.72rem; font-weight: 800; color: #e5e7eb; white-space: nowrap; }
.tl-e-filters { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; justify-content: center; }
.tl-filter-btn {
  font-size: 0.5rem; padding: 2px 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid #1f2937; background: transparent; color: #4b5563;
  transition: all 0.15s; white-space: nowrap;
}
.tl-filter-btn.active { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.tl-filter-btn:hover { border-color: #4b5563; }
.tl-e-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tl-e-today-btn, .tl-e-close-btn {
  background: none; border: 1px solid #1f2937; color: #9ca3af; font-size: 0.55rem;
  padding: 2px 8px; border-radius: 4px; cursor: pointer;
}
.tl-e-today-btn:hover, .tl-e-close-btn:hover { background: #1f2937; color: #fff; }
.tl-e-legend {
  display: flex; gap: 12px; padding: 2px 14px 4px; flex-shrink: 0;
}
.tl-e-leg { display: flex; align-items: center; gap: 4px; font-size: 0.5rem; color: #6b7280; }
.tl-e-leg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ── Scrollable canvas ── */
.tl-e-scroll {
  flex: 1; overflow: auto; cursor: grab;
  scrollbar-width: thin; scrollbar-color: #1f2937 transparent;
}
.tl-e-scroll::-webkit-scrollbar { height: 6px; }
.tl-e-scroll::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }
.tl-e-canvas {
  position: relative; min-height: 500px;
}

/* ── Era zones ── */
.tl-era-zone {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  border-left-style: solid; transition: background 0.5s;
}
.tl-era-zone.tl-era-flash { background: rgba(255,255,255,0.06) !important; }
.tl-era-label {
  position: absolute; top: 6px; left: 8px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em;
  white-space: nowrap; opacity: 0.9;
}
.tl-era-sub {
  position: absolute; top: 20px; left: 8px;
  font-size: 0.44rem; color: #6b7280; white-space: nowrap;
  font-style: italic;
}
/* ── Era nav buttons ── */
.tl-era-nav { display: flex; gap: 4px; flex-shrink: 0; }
.tl-era-btn {
  font-size: 0.48rem; padding: 2px 8px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid; font-weight: 600;
  transition: all 0.2s; white-space: nowrap;
}
.tl-era-btn:hover { filter: brightness(1.3); background: rgba(255,255,255,0.05); }
.tl-era-btn.active { filter: brightness(1.5); background: rgba(255,255,255,0.1); }

/* ── Track line ── */
.tl-e-track-line {
  position: absolute; left: 20px; right: 20px; height: 3px;
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 40%, #ef4444 75%, #7f1d1d 100%);
  border-radius: 2px; opacity: 0.6;
}

/* ── Year markers ── */
.tl-e-year-marker {
  position: absolute; text-align: center; transform: translateX(-50%);
}
.tl-e-year-marker::before {
  content: ''; display: block; width: 1px; height: 18px; background: #374151; margin: 0 auto 2px;
}
.tl-e-year-marker span { font-size: 0.55rem; color: #6b7280; font-weight: 700; }

/* ── NOW line (expanded) ── */
.tl-e-now-line {
  position: absolute; top: 0; bottom: 30px; width: 2px;
  background: #fff; transform: translateX(-50%); z-index: 5;
  box-shadow: 0 0 12px 3px rgba(255,255,255,0.3);
}
.tl-e-now-pulse {
  position: absolute; top: -4px; left: -5px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff;
  animation: tl-pulse 2s ease-in-out infinite;
}
.tl-e-now-text {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: 0.52rem; font-weight: 800; color: #fff; white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* ── 2030 endpoint ── */
.tl-e-2030-marker {
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  text-align: center; z-index: 4;
}
.tl-e-2030-line {
  width: 2px; height: 100%; background: #ef4444; margin: 0 auto;
  border: none; opacity: 0.7;
  background: repeating-linear-gradient(180deg, #ef4444 0px, #ef4444 6px, transparent 6px, transparent 10px);
}
.tl-e-2030-text {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; font-weight: 800; color: #ef4444; font-style: italic;
  white-space: nowrap; text-shadow: 0 0 12px rgba(239,68,68,0.5);
  line-height: 1.2;
}
.tl-e-2030-attr {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 0.42rem; color: #6b7280; white-space: nowrap;
}

/* ── Fishbone stems ── */
.tl-e-stem {
  position: absolute; width: 1px; transform: translateX(-50%);
  border-left: 1px solid; opacity: 0.4;
}
.tl-e-pip {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%); z-index: 3;
  box-shadow: 0 0 0 2px #060a12;
  transition: transform 0.15s;
}
.tl-e-pip:hover { transform: translateX(-50%) scale(1.5); }

/* ── Event cards ── */
.tl-e-card {
  position: absolute; width: 240px; background: #0d1420; border: 1px solid;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; z-index: 4;
  transition: transform 0.15s, box-shadow 0.15s; overflow: hidden;
  max-height: 90px;
}
.tl-e-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.5); z-index: 10; }
.tl-e-card.expanded { max-height: 400px; z-index: 20; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
.tl-e-card-head { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.tl-e-card-icon { font-size: 0.8rem; }
.tl-e-card-date { font-size: 0.62rem; font-weight: 700; }
.tl-e-card-title { font-size: 0.72rem; font-weight: 700; color: #e5e7eb; line-height: 1.35; }
.tl-e-card-summary {
  font-size: 0.68rem; color: #9ca3af; line-height: 1.4; margin-top: 4px;
  display: none;
}
.tl-e-card.expanded .tl-e-card-summary { display: block; }
.tl-e-card-foot { margin-top: 6px; display: none; }
.tl-e-card.expanded .tl-e-card-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-e-card-src {
  font-size: 0.62rem; color: #60a5fa; text-decoration: none;
  padding: 3px 8px; background: #111827; border-radius: 4px; border: 1px solid #1f2937;
}
.tl-e-card-src:hover { background: #1f2937; }
.tl-e-card-tab {
  font-size: 0.62rem; color: #f59e0b; background: none; border: 1px solid #f59e0b;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.tl-e-card-tab:hover { background: rgba(245,158,11,0.15); }

/* ── Connection SVGs ── */
.tl-e-conn-svg {
  position: absolute; top: 180px; height: 2px; pointer-events: none; overflow: visible;
}

/* ── Bottom bar: assets + progress ── */
.tl-e-bottom {
  display: flex; gap: 12px; padding: 4px 14px 2px; flex-shrink: 0;
  border-top: 1px solid #111827;
}
.tl-e-assets { flex: 1; }
.tl-e-assets-title {
  font-size: 0.58rem; font-weight: 700; color: #e5e7eb; margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px;
}
.tl-e-br-total { font-weight: 400; color: #9ca3af; font-size: 0.5rem; }
.tl-e-assets-grid { display: flex; gap: 4px; }
.tl-e-asset-cell {
  background: #0d1420; border: 1px solid #1a1f2e; border-radius: 4px;
  padding: 3px 6px; min-width: 0; flex: 1;
}
.tl-e-asset-icon { font-size: 0.6rem; }
.tl-e-asset-sector { font-size: 0.48rem; font-weight: 700; color: #d1d5db; }
.tl-e-asset-detail { font-size: 0.42rem; color: #6b7280; line-height: 1.2; }
.tl-e-asset-trend { font-size: 0.42rem; color: #9ca3af; }

/* ── Progress indicator ── */
.tl-e-progress { flex: 0 0 220px; }
.tl-e-prog-header {
  font-size: 0.58rem; font-weight: 700; color: #e5e7eb; margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px;
}
.tl-e-prog-pct { color: #ef4444; font-size: 0.72rem; }
.tl-e-prog-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid #374151;
  color: #6b7280; font-size: 0.48rem; cursor: help;
}
.tl-e-prog-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.tl-e-prog-name { font-size: 0.42rem; color: #9ca3af; flex: 0 0 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-e-prog-bar { flex: 1; height: 4px; background: #1f2937; border-radius: 2px; overflow: hidden; }
.tl-e-prog-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 2px; }
.tl-e-prog-val { font-size: 0.42rem; color: #6b7280; flex: 0 0 30px; text-align: right; }

/* ── Disclaimer ── */
.tl-e-disclaimer {
  font-size: 0.42rem; color: #374151; font-style: italic; padding: 2px 14px 4px;
  flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #tl-expanded { height: 100vh; position: fixed; inset: 0; z-index: 9999; }
  .tl-e-scroll { overflow: auto; }
  .tl-e-canvas { width: 2200px !important; }
  .tl-e-bottom { flex-direction: column; }
  .tl-e-progress { flex: 0 0 auto; }
  .tl-e-assets-grid { flex-wrap: wrap; }
  .tl-e-asset-cell { min-width: 80px; }
  .tl-e-filters { gap: 3px; }
  .tl-c-right { display: none; }
  .tl-c-expand { font-size: 0.48rem; padding: 2px 6px; }
  .tl-e-close-btn { font-size: 1.2rem !important; padding: 6px 14px !important; min-width: 44px; min-height: 44px; }
  .tl-e-header { flex-wrap: wrap; padding: 10px 14px 6px; }
}

/* Popup */
#popup {
  position: fixed;
  bottom: 80px;
  left: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  max-width: 320px;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  display: none;
  font-size: 0.8rem;
}
#popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
}
#popup h2 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--text); line-height: 1.3; }
.popup-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--crime);
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.popup-meta { color: var(--text-muted); margin-bottom: 0.4rem; font-size: 0.72rem; }
.popup-summary { line-height: 1.5; margin-bottom: 0.5rem; }
#popup a { color: var(--tab-active); font-size: 0.72rem; }

/* Severity bar */
.severity-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 0.5rem;
}
.severity-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--crime);
}

/* ── VIEW TOGGLE ── */
#view-toggle {
  transition: right 0.3s ease;
}
.sidebar-collapsed #view-toggle {
  right: 24px !important;
}

/* ── POPULATION HEALTH INDICATOR CARDS ── */
.phi-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  align-items: start;
}
.phi-card {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-width: 0;
}
.phi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── WIDE SIDEBAR: full-width elements span all columns ── */
.sidebar-wide .sidebar-section h3,
.sidebar-wide .full-width,
.cw-grid-full {
  grid-column: 1 / -1;
}

/* ── FONT SCALING TIERS (set via data-font-tier on #sidebar) ── */
#sidebar[data-font-tier="sm"] #sidebar-body {
  --sb-header: 0.82rem;
  --sb-label: 0.70rem;
  --sb-value: 0.92rem;
  --sb-small: 0.66rem;
  --sb-tiny: 0.58rem;
  --sb-source: 0.52rem;
}
#sidebar[data-font-tier="xs"] #sidebar-body {
  --sb-header: 0.76rem;
  --sb-label: 0.64rem;
  --sb-value: 0.82rem;
  --sb-small: 0.60rem;
  --sb-tiny: 0.54rem;
  --sb-source: 0.48rem;
}
/* Inline font sizes in dashboard cards need scaling too */
#sidebar[data-font-tier="sm"] .cw-grid [style*="font-size:0.82rem"] { font-size: 0.74rem !important; }
#sidebar[data-font-tier="sm"] .cw-grid [style*="font-size:0.54rem"] { font-size: 0.50rem !important; }
#sidebar[data-font-tier="xs"] .cw-grid [style*="font-size:0.82rem"] { font-size: 0.68rem !important; }
#sidebar[data-font-tier="xs"] .cw-grid [style*="font-size:0.54rem"] { font-size: 0.46rem !important; }

/* Cards within auto-grids: prevent overflow */
.cw-grid > div {
  min-width: 0;
  overflow: hidden;
}

/* ── MOBILE SIDEBAR ── */
@media (max-width: 768px) {
  #view-toggle {
    right: 12px !important;
    top: 84px !important;
  }
  #app {
    grid-template-columns: 1fr 0px;
  }
  #app:not(.sidebar-collapsed) {
    grid-template-columns: 1fr 0px;
  }
  #sidebar {
    position: fixed;
    top: 80px; /* below ticker + tab bar */
    right: 0;
    bottom: 44px; /* above timeline */
    width: 85vw !important;
    max-width: 380px;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(0,0,0,0.4);
  }
  /* Sidebar visible when NOT collapsed */
  #app:not(.sidebar-collapsed) #sidebar {
    transform: translateX(0);
  }
  .sidebar-collapsed #sidebar {
    transform: translateX(100%);
  }
  /* Overlay behind sidebar */
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  #app:not(.sidebar-collapsed) .mobile-sidebar-overlay {
    display: block;
  }
  /* Mobile: constrain to 2 columns max */
  .stat-grid,
  .phi-cards-grid,
  .cards-grid,
  .cw-grid,
  .pred-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .sidebar-wide .sidebar-section-chart {
    columns: auto !important;
  }
  /* Larger touch targets */
  .phi-card {
    padding: 10px 12px !important;
  }
  .phi-card span[style*="font-size:13px"] {
    font-size: 14px !important;
  }
  .phi-card span[style*="font-size:16px"] {
    font-size: 18px !important;
  }
  .filter-row select, .filter-row input {
    font-size: 16px;
    padding: 0.4rem 0.5rem;
    min-height: 36px;
  }
  .tab-btn {
    font-size: 13px;
    padding: 0 1rem;
    height: 44px;
  }
  /* Sidebar open button — right edge of screen */
  #sidebar-toggle {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px;
    height: 72px;
    font-size: 16px;
    z-index: 50;
    background: rgba(30,41,59,0.95);
    border: 1px solid #334155;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  }
  /* Hide toggle when sidebar is open */
  #app:not(.sidebar-collapsed) #sidebar-toggle {
    display: none !important;
  }
  /* Mobile close button inside sidebar */
  .mobile-sidebar-close {
    display: flex !important;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: rgba(30,41,59,0.9);
    border: 1px solid #334155;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
  }
  /* Sidebar drag handle not useful on mobile */
  #sidebar-drag {
    display: none;
  }
  /* Globe takes full width */
  #globe-container {
    grid-column: 1 / -1;
  }
  /* Scale down sidebar content for mobile — less overwhelming */
  #sidebar {
    font-size: 0.85em;
  }
  #sidebar .cw-card,
  #sidebar .cw-card-recs {
    margin-bottom: 4px;
  }
  #sidebar .sidebar-section-chart {
    padding: 6px 8px;
  }
  /* Compact scored cards on mobile */
  .sc-card { padding: 5px 8px !important; margin-bottom: 3px !important; }
  .sc-summary { padding: 5px 8px !important; }
  .gsd-card { padding: 5px 8px !important; margin-bottom: 3px !important; }
  .gsd-summary { padding: 5px 8px !important; }
  /* Compact gauge card on mobile */
  .cw-card svg { max-height: 120px; }
}