/* Interactive claims map (map.html). Light by default; [data-theme="dark"] switches the
   panel and the basemap together. Colors follow the notebook's chart constants. */
:root {
  --ink: #1C2530; --ink-2: #4A5866; --ink-3: #7A8794; --rule: #E3E7EC; --wash: #F4F6F8;
  --surface: #FFFFFF; --panel: #FFFFFF; --main: #2F5D8A; --accent: #C8553D;
  --bar-bg: rgba(255, 255, 255, 0.92); --shadow: 0 4px 18px rgba(20, 30, 45, 0.14);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] {
  --ink: #E8EDF2; --ink-2: #B4C0CC; --ink-3: #8593A1; --rule: #2C3846; --wash: #1B2430;
  --surface: #0E141B; --panel: #121A23; --main: #7FA9D3; --accent: #E07A62;
  --bar-bg: rgba(18, 26, 35, 0.9); --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--surface); color: var(--ink); font: 14px/1.35 var(--font); }
button, input { font: inherit; color: inherit; }

.app { display: grid; grid-template-columns: minmax(0, 1fr) 290px; height: 100vh; }
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--wash); }

/* Control bars float over the map */
.bar {
  position: absolute; z-index: 500; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap;
  gap: 8px 16px; align-items: center; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar.bottom { top: auto; bottom: 22px; right: auto; }
.group { display: flex; align-items: center; gap: 6px; background: var(--bar-bg); padding: 5px 8px; border-radius: 10px; box-shadow: var(--shadow); }
.lab { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--panel); }
.bar.bottom .seg, .bar.bottom .btn { box-shadow: var(--shadow); }
.seg button { border: 0; background: transparent; padding: 4px 8px; cursor: pointer; border-right: 1px solid var(--rule); color: var(--ink-2); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--wash); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.btn { border: 1px solid var(--rule); background: var(--panel); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-weight: 600; }
.btn:hover { background: var(--wash); }

/* Side panel */
.side { background: var(--panel); border-left: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.year { font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.total { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.total-label { color: var(--ink-3); font-size: 13px; }
.search { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.side h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rank { list-style: none; padding: 0; margin: 0; }
.rank li { display: grid; grid-template-columns: 2.8em 1fr auto; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.rank li:hover, .rank li.active { background: var(--wash); }
.rank .code { font-weight: 700; }
.rank .bar-fill { height: 8px; border-radius: 0 4px 4px 0; background: var(--accent); opacity: 0.75; }
.rank .n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; }
.legend .ramp { width: 90px; height: 8px; border-radius: 4px; }
.legend.off { visibility: hidden; }
.detail { background: var(--wash); border-radius: 10px; padding: 10px 12px; min-height: 150px; font-size: 13px; }
.detail .name { font-weight: 700; }
.detail .meta { color: var(--ink-3); margin: 2px 0 6px; }
.detail svg { display: block; width: 100%; height: 64px; }
.detail svg rect { fill: var(--main); }
.detail svg rect.on { fill: var(--accent); }
.detail svg text { font: 10px var(--font); fill: var(--ink-3); }
.detail .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 6px; color: var(--ink-3); }
.detail .grid b { display: block; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.foot { margin: auto 0 0; font-size: 11px; color: var(--ink-3); }

/* Leaflet details */
.leaflet-container { font: 13px/1.35 var(--font); background: var(--wash); }
.leaflet-tooltip.tip { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; }
.leaflet-tooltip.tip::before { display: none; }
.tip .t { font-weight: 700; }
.tip .s { color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }
.tip .row { display: flex; justify-content: space-between; gap: 16px; }
.code-label.left { text-align: right; }
.code-label { font-weight: 800; font-size: 12px; color: var(--ink); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface); }
.leaflet-control-attribution { font-size: 10px; }

/* Embedded in a slide: slightly more compact */
.embed { font-size: 13px; }
.embed .app { grid-template-columns: minmax(0, 1fr) 260px; }
.embed .total { font-size: 28px; }
.embed .foot { display: none; }
.embed .side { gap: 9px; padding: 12px 14px; }
.embed .detail { min-height: 0; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; }
  .map-wrap { height: 62vh; }
  .side { border-left: 0; border-top: 1px solid var(--rule); }
}