/* The dashboard kit (pages\dash\README.md). Layered on /datagov/assets/datagov.css:
   same tokens, same theme key, same collapsed sections - plus the "fancy" layer. */

:root {
  --dash-a: #2a78d6; --dash-b: #8a5cf6; --dash-glow: rgba(42, 120, 214, .35);
  --glass: rgba(255, 255, 255, .62); --glass-ring: rgba(11, 11, 11, .08);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
  --hero-ink: #0b0b0b; --hero-ink-2: #3c3b38;
  --display: "Space Grotesk", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass: rgba(26, 26, 25, .55); --glass-ring: rgba(255, 255, 255, .09); --s1: #3987e5; --s2: #d95926; --s3: #199e70; --hero-ink: #fff; --hero-ink-2: #c9c8c0; }
}
:root[data-theme="dark"] { --glass: rgba(26, 26, 25, .55); --glass-ring: rgba(255, 255, 255, .09); --s1: #3987e5; --s2: #d95926; --s3: #199e70; --hero-ink: #fff; --hero-ink-2: #c9c8c0; }

/* ---- the strip of ten ---- */
.dnav { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: thin; }
.dnav a { flex: none; text-decoration: none; color: var(--ink-2); font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ring); background: var(--surface); white-space: nowrap; }
.dnav a:hover { border-color: var(--axis); }
.dnav a[aria-current="page"] { background: linear-gradient(135deg, var(--dash-a), var(--dash-b)); color: #fff; border-color: transparent; font-weight: 600; }

/* ---- hero ---- */
.dhero { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 26px 24px; margin-bottom: 16px; color: var(--hero-ink);
  background: radial-gradient(700px 320px at 0% 0%, color-mix(in oklab, var(--dash-a) 30%, transparent), transparent 70%),
              radial-gradient(600px 320px at 100% 100%, color-mix(in oklab, var(--dash-b) 26%, transparent), transparent 70%), var(--surface);
  border: 1px solid var(--ring); }
.dhero::after { content: ''; position: absolute; width: 60%; height: 140%; top: -20%; left: 20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--dash-b) 22%, transparent), transparent); filter: blur(40px); animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-30%); } to { transform: translateX(40%); } }
@media (prefers-reduced-motion: reduce) { .dhero::after { animation: none; } }
.dhero > * { position: relative; z-index: 1; }
.dhero .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-ink-2); display: flex; gap: 8px; align-items: center; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(12, 163, 12, .6); animation: pulse 2s infinite; }
.live.stale { background: var(--warning); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(12, 163, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); } }
.dhero h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4.6vw, 3rem); letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 6px; }
.dhero .lede { color: var(--hero-ink-2); max-width: 70ch; margin: 0; }
.dhero .big { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 8vw, 5rem); letter-spacing: -.03em; line-height: 1; margin: 14px 0 4px; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--dash-a), var(--dash-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dhero .controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: end; }
.dhero .controls input, .dhero .controls select { width: auto; min-width: 140px; background: var(--glass); backdrop-filter: blur(8px); }

/* ---- KPI cards ---- */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.kpi { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px 10px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-ring); box-shadow: var(--shadow); }
.kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--dash-a), var(--dash-b)); opacity: .85; }
.kpi .k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .d { font-size: .8rem; color: var(--ink-2); }
.kpi .d .up { color: var(--critical-ink); } .kpi .d .down { color: var(--good-ink); } .kpi .d .flat { color: var(--muted); }
.kpi svg.spark { display: block; width: 100%; height: 34px; margin-top: 6px; overflow: visible; }
.kpi svg.spark path.l { fill: none; stroke: var(--dash-a); stroke-width: 2; }
.kpi svg.spark path.a { fill: url(#sparkfill); opacity: .25; }

/* ---- panels ---- */
.panel { border-radius: 20px; padding: 18px; background: var(--surface); border: 1px solid var(--ring); box-shadow: var(--shadow); margin-bottom: 16px; min-width: 0; }
.panel h3 { font-family: var(--display); font-size: 1.1rem; margin: 0 0 2px; }
.panel .sub { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.dmap { height: 440px; border-radius: 16px; overflow: hidden; border: 1px solid var(--ring); }
@media (max-width: 640px) { .dmap { height: 320px; } .dhero { padding: 22px 16px 18px; } }

/* ---- charts ---- */
.dc { position: relative; }
.dc svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc .grid line { stroke: var(--grid); }
.dc .axis text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dc .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.dc .endlab { font-size: 12px; font-weight: 600; fill: var(--ink); }
.dc .cross { stroke: var(--axis); }
.dc .dot { stroke: var(--surface); stroke-width: 2; }
.dc .note text { font-size: 11px; fill: var(--ink-2); }
.dc .note line { stroke: var(--axis); stroke-dasharray: 3 3; }
.dc rect.bar { rx: 4; }
.dc .blab { fill: var(--ink-2); font-size: 12px; }
.dc .bval { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); margin: 0 0 6px; }
.legend i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* ---- US tile map ---- */
.usmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 760px; }
.usmap .st { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; cursor: pointer; border: 1px solid var(--ring); position: relative; }
.usmap .st.dark { color: #fff; border-color: transparent; }
.usmap .st:hover, .usmap .st.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.scalebar { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.scalebar span.g { flex: 0 1 200px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-2), var(--dash-a)); border: 1px solid var(--ring); }

/* ---- gauge ---- */
.gauge svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; overflow: visible; }
.gauge .val { font-family: var(--display); font-weight: 700; font-size: 34px; fill: var(--ink); }
.gauge .lab { font-size: 12px; fill: var(--muted); }

/* ---- lists ---- */
.feedlist { display: grid; gap: 10px; }
.fitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--ring); }
.fitem .ic { font-size: 1.3rem; grid-row: span 2; }
.fitem b { overflow-wrap: anywhere; }
.fitem .m { font-size: .8rem; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ring); background: var(--surface-2); }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); border-radius: 22px; padding: 22px 20px; min-height: 190px;
  border: 1px solid var(--ring); background: radial-gradient(400px 200px at 0% 0%, color-mix(in oklab, var(--ga) 28%, transparent), transparent 70%), radial-gradient(300px 200px at 100% 100%, color-mix(in oklab, var(--gb) 24%, transparent), transparent 70%), var(--surface);
  transition: transform .15s, box-shadow .15s; }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.gcard .gi { font-size: 2.2rem; line-height: 1; }
.gcard h2 { font-family: var(--display); font-size: 1.35rem; margin: 0; }
.gcard p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.gcard .gsrc { margin-top: auto; font-size: .76rem; color: var(--muted); }
.gcard .glive { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }

/* Dark map: OSM tiles inverted and re-hued; markers and popups are untouched. */
.dmap.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }