/* Policy Landscape — design tokens & global styles */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');

:root {
  /* Light commit */
  --bg: #f8f8f5;
  --bg-2: #efefe9;
  --bg-3: #e6e5dd;
  --ink: #0e1116;
  --ink-2: #2a2d33;
  --ink-3: #5b5e64;
  --ink-4: #8e9097;
  --rule: #d9d7cd;

  /* Accents */
  --accent: #c2410c;        /* electric copper */
  --accent-2: #a87916;      /* oxidized brass alt */
  --alarm: #5e1e2c;         /* deep wine */

  /* Diverging palette — saturated */
  --rust: #5a2a1f;
  --terracotta: #b85a4a;
  --slate: #475569;
  --jade: #6b9b94;
  --teal: #2a6b66;

  /* Type */
  --display: "General Sans", "Söhne", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-mode="dark"] {
  --bg: #0e1116;
  --bg-2: #161a21;
  --bg-3: #1e232b;
  --ink: #f4f3ee;
  --ink-2: #d8d6cd;
  --ink-3: #9da0a8;
  --ink-4: #6b6e75;
  --rule: #2a2f37;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.display { font-family: var(--display); letter-spacing: -0.02em; line-height: 0.95; font-weight: 600; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tnum { font-variant-numeric: tabular-nums; }

/* Top nav */
.pl-nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 14px 32px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.pl-logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px;
}
.pl-logo .dot {
  width: 14px; height: 14px; background: var(--accent);
  display: inline-block;
}
.pl-tabs { display: flex; gap: 2px; align-items: center; }
.pl-tab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: none; background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 0;
  transition: color 120ms ease, background 120ms ease;
}
.pl-tab:hover { color: var(--ink); }
.pl-tab.active { color: var(--ink); background: var(--bg-2); }
.pl-nav-meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: flex; gap: 14px; align-items: center;
}
.pl-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a6b66; box-shadow: 0 0 0 0 rgba(42,107,102,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(42,107,102,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(42,107,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,107,102,0); }
}

/* Page chrome */
.pl-page { min-height: calc(100vh - 60px); }
.pl-foot {
  border-top: 1px solid var(--rule);
  padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  margin-top: 80px;
}
.pl-foot h4 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 12px;
}
.pl-foot a:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { box-shadow: 3px 3px 0 var(--ink); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { box-shadow: 3px 3px 0 var(--ink); }

/* Spectrum bar (used in lens/state pages) */
.spectrum {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  height: 22px; width: 100%;
}
.spectrum > div { height: 100%; }

/* Score chip */
.score-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px;
  font-family: var(--mono); font-weight: 500;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.score-chip .num { font-size: 14px; font-weight: 600; }

/* Marquee strip (used on landing) */
.strip {
  display: flex; gap: 32px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-block: 1px solid var(--rule);
  padding: 14px 0;
  overflow: hidden; white-space: nowrap;
}
.strip .item { padding: 0 24px; border-right: 1px solid var(--rule); }
.strip .item:last-child { border-right: none; }
.strip .num { color: var(--accent); font-weight: 600; }

/* Map tiles */
.tile-map {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  aspect-ratio: 12 / 8.2;
}
.tile {
  position: relative;
  background: var(--bg-2);
  border: 1px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  transition: outline 80ms ease, transform 80ms ease;
  overflow: hidden;
}
.tile.empty { background: transparent; cursor: default; pointer-events: none; }
.tile:hover { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.tile.active { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 3; }
.tile .score {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 9px; font-weight: 500; opacity: 0.7;
}

/* Generic placeholder */
.ph {
  background:
    repeating-linear-gradient(135deg,
      var(--bg-2) 0 12px,
      var(--bg-3) 12px 13px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Big number */
.bignum {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(72px, 12vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
}

/* Card grid (findings) */
.findings {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.finding {
  padding: 28px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
}
.finding:last-child { border-right: none; }
.finding .num {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.finding .body { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.finding .tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Status pill */
.pill {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--rule);
}
.pill.passed { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.failed { color: var(--ink-3); }
.pill.engrossed { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill.introduced { color: var(--ink-3); }

.dir-restrict { color: var(--alarm); }
.dir-expand { color: var(--teal); }
.dir-mixed { color: var(--ink-3); }

/* Density */
[data-density="comfy"] .pl-page { font-size: 16px; }
[data-density="dense"] { font-size: 14px; }
[data-density="dense"] .pl-tab { padding: 6px 10px; font-size: 11px; }
[data-density="dense"] .finding { padding: 20px; min-height: 220px; }

/* ============================================================
   v2 additions — cinematic intro + full-bleed atlas + lens picker
   ============================================================ */

/* Cinematic intro */
.pl-intro {
  font-family: var(--body);
}
.pl-intro-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.pl-intro .btn-accent {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pl-intro .btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  background: color-mix(in oklab, var(--accent) 88%, white);
}

/* Full-bleed atlas page */
.pl-atlas-page { padding: 0; }
.pl-atlas-stage {
  position: relative;
  width: 100%;
  /* fill viewport minus top nav (~58px) */
  height: calc(100vh - 60px);
  min-height: 560px;
  background: var(--bg-2);
  overflow: hidden;
}
.pl-atlas-stage > div:first-child {
  /* the choropleth wrapper — fill the stage */
  width: 100%; height: 100%;
}
.pl-atlas-stage svg {
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
}

/* Floating "card" panels over the map */
.pl-atlas-card {
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--body);
}

/* Lens picker dropdown */
.pl-lens-select {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  border: none;
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding: 4px 28px 4px 0;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 16px,
    calc(100% - 8px) 16px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.pl-lens-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mode toggle (passed / pressure / all) */
.pl-mode-toggle {
  display: flex;
  border: 1px solid var(--rule);
  margin-top: 4px;
}
.pl-mode-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  transition: background 120ms ease, color 120ms ease;
}
.pl-mode-btn:last-child { border-right: none; }
.pl-mode-btn:hover { color: var(--ink); background: var(--bg-2); }
.pl-mode-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* Strip styling fallback if not already present */
.strip {
  display: flex; flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
}
.strip .item {
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 8px;
}
.strip .item:last-child { border-right: none; }
.strip .item .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}

/* Make sure the atlas page doesn't try to be in a max-width container */
.pl-page.pl-atlas-page > section.pl-atlas-stage { max-width: none; padding: 0; }


/* State page — summary card */
.pl-state-page { background: var(--bg); }
.pl-summary-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 22px 22px;
  display: flex; flex-direction: column;
  font-family: var(--body);
}

/* Bill cards grid */
.pl-bill-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.pl-bill-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.pl-bill-card:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

/* Status pills */
.pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.pill-passed, .pill-enrolled { background: #2a6b66; color: #fff; border-color: #2a6b66; }
.pill-engrossed { background: var(--ink-2); color: var(--bg); border-color: var(--ink-2); }
.pill-introduced { background: var(--bg-2); color: var(--ink-3); }
.pill-failed { background: var(--bg-3); color: var(--ink-3); border-color: var(--bg-3); }
.pill-vetoed { background: #b85a4a; color: #fff; border-color: #b85a4a; }


/* ============================================================
   v3 — contrast, control bar, alt views, smooth intro
   ============================================================ */

/* Atlas stage: deeper warm-paper background gives contrast for hatched no-data
   states + makes scored-color states pop. Light mode = warm sand; dark mode
   = deeper slate. */
.pl-atlas-stage {
  background: #ddd9cf;
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.45) 0%, transparent 60%);
}
[data-mode="dark"] .pl-atlas-stage {
  background: #14181f;
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.05) 0%, transparent 60%);
}

/* Stronger state borders so they read on contrasting bg */
.pl-atlas-stage path[stroke="var(--bg-3)"] {
  stroke: rgba(0,0,0,0.18);
}
[data-mode="dark"] .pl-atlas-stage path[stroke="var(--bg-3)"] {
  stroke: rgba(255,255,255,0.18);
}

/* Control bar (replaces top-left floating card) */
.pl-control-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  position: sticky;
  top: 56px;
  z-index: 30;
}
.pl-control-group {
  display: flex; align-items: center; gap: 8px;
  padding-right: 24px;
  border-right: 1px solid var(--rule);
}
.pl-control-group:last-child { border-right: none; padding-right: 0; }
.pl-control-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Compact view-toggle buttons */
.pl-view-toggle {
  display: flex;
  border: 1px solid var(--rule);
}
.pl-view-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
}
.pl-view-btn:last-child { border-right: none; }
.pl-view-btn:hover { background: var(--bg-2); color: var(--ink); }
.pl-view-btn.active { background: var(--ink); color: var(--bg); }

/* Stage now sized minus nav + control bar */
.pl-atlas-stage {
  height: calc(100vh - 56px - 56px);
  min-height: 480px;
}

/* Compact legend in corner */
.pl-atlas-legend-mini {
  position: absolute;
  bottom: 16px; right: 16px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  z-index: 4;
  font-family: var(--body);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 220px;
}
.pl-atlas-legend-mini.collapsed {
  cursor: pointer;
  min-width: 0;
}


/* Map zoom buttons */
.pl-zoom-btn {
  width: 32px; height: 32px;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  font-family: var(--mono);
  transition: background 100ms ease, color 100ms ease;
}
.pl-zoom-btn:last-child { border-bottom: none; }
.pl-zoom-btn:hover { background: var(--ink); color: var(--bg); }

/* Rotating word in intro */
.pl-rotating-word {
  display: inline-block;
  animation: plRotateWord 480ms cubic-bezier(.2,.8,.2,1);
}
@keyframes plRotateWord {
  0%   { opacity: 0; transform: translateY(0.18em); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Intro is now overlaid above the atlas — make sure it covers everything. */
.pl-intro {
  position: fixed; inset: 0;
  z-index: 9999;   /* above nav (50) and stage controls (30) */
}