/* ── Viz area: chart scrolls vertically ───────────────── */
.viz-area {
  flex: 1; min-width: 0;
  overflow-y: auto; overflow-x: auto;
  background: var(--bg);
  padding: 12px 0;
  position: relative;
}

/* ── Heatmap / D3 chart styles ───────────────────────── */
.axis path, .axis line { fill: none; stroke: #ffffff; shape-rendering: crispEdges; }
.axis text { font-size: 12px; fill: #ffffff; }
rect { stroke: #444; }
.cell { cursor: pointer; }
.first-year { stroke: white !important; stroke-width: 1.5px; }
.period-group rect { display: none; }
.period-group text, .decade-group text { fill: #ffffff; font-size: 12px; text-anchor: middle; }
#heatmap { background-color: #1f2230; }
#tooltip {
  position: fixed; pointer-events: none;
  background: rgba(47, 52, 69, 0.95);
  color: #fff; padding: 8px 12px;
  border-radius: 6px; font-size: 13px;
  border: 1px solid rgba(255,255,255,0.2);
  display: none; z-index: 10000;
}

/* ── Mobile action bar (hidden on desktop) ──────────────── */
.mobile-bar { display: none; }

@media (max-width: 767px) {
  html, body { height: 100dvh; }
  /* Allow horizontal scroll for the wide heatmap SVG */
  .viz-area { overflow-x: auto; }
  /* Mobile action bar */
  .mobile-bar {
    display: flex !important;
    flex-shrink: 0;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .mobile-bar .btn { flex: 1; min-height: 44px; justify-content: center; }
  /* Filter panel: fixed bottom drawer */
  .filter-panel {
    position: fixed !important;
    bottom: 0; left: 0; right: 0; width: auto !important;
    max-height: 65vh;
    flex-direction: column;
    border-left: none; border-top: 1px solid var(--border);
    z-index: 200;
    transform: translateY(110%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .filter-panel.mobile-open { transform: translateY(0); }
  .fp-toggle {
    width: 100%; min-height: 44px; height: 44px;
    border-right: none; border-bottom: 1px solid var(--border);
    flex-shrink: 0; position: sticky; top: 0;
    background: var(--surface);
  }
  .fp-body { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; }
  .fp-divider, .fp-divider--major { display: none; }
  /* Floating Filters button — fixed bottom-right */
  .mobile-filter-btn {
    position: fixed;
    bottom: 20px; right: 16px;
    z-index: 150;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
}