/* ========================================================================== 
   1. Design tokens
   ========================================================================== */
:root {
  color-scheme:light;
  --ui-background:#E1E3E1;
  --ui-panel:#F4F4F0;
  --canvas:var(--ui-background);
  --land:var(--ui-panel);
  --water:#D7D9DA;
  --surface:var(--ui-panel);
  --fg:#171717;
  --fg2:#62686B;
  --muted:#62686B;
  --meta:#7D8183;
  --line:#D7D9DA;
  --line-strong:#B8BBBC;
  --accent:#4B2C7F;
  --selected:#EDC21C;
  --selected-soft:color-mix(in srgb,var(--selected) 18%,var(--surface));
  --event:#c44c3a;
  --legislation:#3450a2;
  --control-bg:var(--surface);
  --control-hover:color-mix(in srgb,var(--fg) 5%,var(--surface));
  --control-hover-muted:color-mix(in srgb,var(--fg) 7%,var(--surface));
  --control-hover-warm:color-mix(in srgb,var(--selected) 6%,var(--surface));
  --context-bg:color-mix(in srgb,var(--canvas) 36%,var(--surface));
  --neutral-chip:color-mix(in srgb,var(--canvas) 52%,var(--surface));
  --loading-bg:var(--canvas);
  --danger-bg:#fff0f0;
  --danger-fg:#8c1616;
  --resize-guide:color-mix(in srgb,var(--fg) 28%,transparent);
  --panel-w:372px;
  --radius:9px;
  --radius-sm:5px;
  --pill-radius:999px;
  --control-h:32px;
  --pill-h:20px;
  --type-title:18px;
  --type-primary:12px;
  --type-secondary:11px;
  --type-meta:10.5px;
  --list-leading:1.1;
  --shadow:none;
  --ease:cubic-bezier(.2,0,0,1);
  --fast:140ms;
  --base:220ms;
  --font:"Noto Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ui-background:#0F0C12;
  --ui-panel:#1D2028;
  --canvas:var(--ui-background);
  --land:var(--ui-panel);
  --water:#2F404B;
  --surface:var(--ui-panel);
  --fg:#F3F2F2;
  --fg2:#A9ADAA;
  --muted:#A9ADAA;
  --meta:#A9ADAA;
  --line:#4B5862;
  --line-strong:color-mix(in srgb,var(--fg) 22%,var(--line));
  --accent:#924183;
  --selected:#EDC21C;
  --selected-soft:color-mix(in srgb,var(--selected) 18%,var(--surface));
  --control-bg:var(--surface);
  --control-hover:color-mix(in srgb,var(--fg) 6%,var(--surface));
  --control-hover-muted:color-mix(in srgb,var(--fg) 8%,var(--surface));
  --control-hover-warm:color-mix(in srgb,var(--selected) 7%,var(--surface));
  --context-bg:color-mix(in srgb,var(--canvas) 38%,var(--surface));
  --neutral-chip:color-mix(in srgb,var(--fg) 7%,var(--surface));
  --loading-bg:var(--canvas);
  --danger-bg:#351d1d;
  --danger-fg:#f0aaaa;
  --resize-guide:color-mix(in srgb,var(--fg) 30%,transparent);
}

/* ========================================================================== 
   2. Reset and base typography
   ========================================================================== */
*{box-sizing:border-box}
html,body,#app,#map{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:var(--font);color:var(--fg);background:var(--canvas);font-feature-settings:"liga" 1;-webkit-font-smoothing:antialiased}
body.resizingLeftPane{cursor:ew-resize;user-select:none}
button,input,select{font:inherit;color:inherit}
button{border:0}
a{color:var(--accent)}

/* ========================================================================== 
   3. Map canvas and third-party MapLibre controls
   ========================================================================== */
#map{position:absolute;inset:0;background:var(--canvas)}
.maplibregl-canvas{outline:none}
.maplibregl-ctrl-logo{opacity:.62}
.maplibregl-ctrl-attrib{font-size:9px!important;border-radius:4px 0 0 0!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;color:var(--fg2)!important}
.maplibregl-ctrl-attrib a{color:var(--accent)!important}
.maplibregl-ctrl-bottom-right{right:6px;bottom:3px}
.maplibregl-popup-content,.maplibregl-ctrl-group{box-shadow:none}

/* ========================================================================== 
   4. Shared surfaces and application feedback
   ========================================================================== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#loading{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:var(--loading-bg);transition:opacity .25s var(--ease)}
.loadingCard{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--control-bg);border:1px solid var(--line);border-radius:8px;box-shadow:none;font-size:var(--type-primary)}
.spinner{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--fg);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#errorBanner{display:none;position:absolute;z-index:40;top:16px;left:50%;transform:translateX(-50%);max-width:560px;padding:10px 12px;background:var(--danger-bg);color:var(--danger-fg);border:1px solid color-mix(in srgb,var(--danger-fg) 28%,transparent);border-radius:7px;font-size:var(--type-primary)}

/* ========================================================================== 
   5. Unified application rail
   ========================================================================== */
#leftPane{position:absolute;z-index:12;left:18px;top:18px;bottom:18px;width:var(--panel-w);min-width:300px;min-height:300px;display:flex;flex-direction:column;overflow:hidden;transition:transform var(--base) var(--ease),opacity var(--base) var(--ease),width 80ms linear}
#leftPane.collapsed{transform:translateX(calc(-100% - 28px));opacity:0;pointer-events:none}
#titleBlock{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 12px 10px}
.atlasName{margin:0;min-width:0;font-size:var(--type-title);font-weight:700;line-height:1.12;letter-spacing:-.025em}
.dataStamp{min-width:0;overflow:hidden;font-size:var(--type-meta);color:var(--meta);white-space:nowrap;text-overflow:ellipsis}
#openPane{position:absolute;z-index:13;left:18px;top:18px;display:none;align-items:center;gap:7px;min-height:32px;padding:0 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:none;font-size:var(--type-meta);font-weight:600;cursor:pointer;transition:background var(--fast),color var(--fast)}
#openPane.visible{display:flex}
#openPane:hover{background:var(--control-hover);color:var(--fg)}
.leftPaneResizeHandle{position:absolute;z-index:14;top:26px;bottom:26px;left:calc(18px + var(--panel-w) - 5px);width:12px;cursor:ew-resize;touch-action:none}
.leftPaneResizeHandle::after{content:"";position:absolute;top:42%;left:5px;width:2px;height:42px;border-radius:2px;background:transparent;transition:background var(--fast)}
.leftPaneResizeHandle:hover::after,body.resizingLeftPane .leftPaneResizeHandle::after{background:var(--resize-guide)}
#app.leftPaneClosed .leftPaneResizeHandle{opacity:0;pointer-events:none}
.mobileDrawerBackdrop,.mobileDrawerToggle{display:none}

/* ========================================================================== 
   6. Layer navigation and rail controls
   ========================================================================== */
.layerTabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 11px 10px}
.layerTab{height:32px;padding:0 5px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--muted);font-size:var(--type-primary);font-weight:600;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.layerTab:hover{background:var(--control-hover);color:var(--fg)}
.layerTab.active{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.layerTab.active:hover{background:color-mix(in srgb,var(--fg) 88%,var(--surface))}
.layerTab strong{font-size:inherit;font-weight:inherit}
.iconBtn{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.iconBtn:hover{background:var(--control-hover);border-color:var(--line);color:var(--fg)}
.iconBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.paneCloseBtn{width:28px;height:28px}
.paneFooter{flex:0 0 auto;min-height:33px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 13px 9px;border-top:1px solid var(--line)}
.feedbackLink{color:var(--fg2);font-size:var(--type-meta);font-weight:600;text-decoration:none}
.feedbackLink:hover{color:var(--fg);text-decoration:underline;text-underline-offset:2px}

/* ========================================================================== 
   7. Fixed map filters
   ========================================================================== */
.filterFixed{flex:0 0 auto;min-width:0;padding:0 13px 8px;border-top:1px solid var(--line)}
.filterDisclosure{margin:0}
.filterDisclosure summary{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;list-style:none;cursor:pointer;font-size:var(--type-primary);font-weight:600;transition:background var(--fast),color var(--fast)}
.filterDisclosure summary::-webkit-details-marker{display:none}
.filterDisclosure summary:hover{color:var(--fg);background:var(--control-hover)}
.filterChevron{display:inline-block;font-size:13px;line-height:1;transform:rotate(180deg);transition:transform var(--fast) var(--ease)}
.filterDisclosure:not([open]) .filterChevron{transform:none}
.filterDisclosureContent{padding:0 0 2px}
.filterSection{margin:0 0 12px}
.filterSection:last-child{margin-bottom:5px}
.filterSectionCompact{display:grid;gap:8px}
.filterResetSection{padding-top:2px}
.labelRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.labelRow label,.filterLabel{font-size:var(--type-primary);font-weight:600}
.filterActions{display:flex;gap:8px}
.filterAction{padding:1px 2px;background:transparent;color:var(--muted);font-size:var(--type-meta);font-weight:600;cursor:pointer;border-radius:3px;transition:background var(--fast),color var(--fast)}
.filterAction:hover{background:var(--control-hover);color:var(--fg)}
.searchWrap{position:relative}
.searchWrap svg{position:absolute;left:9px;top:50%;width:13px;height:13px;transform:translateY(-50%);color:var(--meta);pointer-events:none}
input[type="search"],select{width:100%;height:var(--control-h);padding:0 9px;border:1px solid var(--line);outline:0;background:var(--control-bg);border-radius:var(--radius-sm);font-size:var(--type-secondary);transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
input[type="search"]{padding-left:28px}
input[type="search"]:hover,select:hover{background:var(--control-hover)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--control-bg)}
.pillWindow{height:auto;min-height:24px;max-height:min(112px,18vh);overflow:auto;padding:1px 4px 1px 0;resize:vertical;scrollbar-width:thin}
.pillGrid{display:flex;flex-wrap:wrap;gap:5px}
.filterPill,.resultPill{min-height:var(--pill-h);display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 6px;background:var(--control-bg);border:1px solid var(--line);border-radius:var(--pill-radius);font-size:var(--type-meta);font-weight:500;line-height:1.1;white-space:nowrap}
.filterPill{cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.filterPill:hover{border-color:var(--chip-color,var(--line-strong));background:color-mix(in srgb,var(--chip-color,var(--fg2)) 9%,var(--control-bg));color:var(--fg)}
.filterChoice.active{background:color-mix(in srgb,var(--chip-color) 11%,var(--control-bg));border-color:var(--chip-color)}
.filterChoice.active:hover{background:color-mix(in srgb,var(--chip-color) 17%,var(--control-bg))}
.filterSwatch{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--chip-color)}
.statusIcon{position:relative;width:10px;height:10px;display:inline-grid;place-items:center;align-self:center;flex:0 0 10px;font-size:10px;font-weight:700;line-height:1;transform:translate(-1px,-1px)}
.statusIcon.active{color:#3d72a8}.statusIcon.pass{color:#3f8a50}.statusIcon.fail{color:#898b88}
.statusIcon.veto{width:10px;height:10px;border:1.3px solid #b74b43;border-radius:50%;color:transparent;font-size:0;transform:translate(-1px,0)}
.statusIcon.veto::after{content:"";position:absolute;left:1px;right:1px;top:3.7px;height:1.3px;background:#b74b43;transform:rotate(-45deg);transform-origin:center}
.toggleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--fg2);font-size:var(--type-secondary)}
.switchControl{position:relative;width:29px;height:15px;flex:0 0 auto;padding:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background var(--fast)}
.switchControl>span{position:absolute;width:11px;height:11px;left:2px;top:2px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent);transition:left var(--fast)}
.switchControl:hover{background:var(--line-strong)}.switchControl.on{background:color-mix(in srgb,var(--accent) 62%,var(--line))}.switchControl.on:hover{background:color-mix(in srgb,var(--accent) 72%,var(--line))}.switchControl.on>span{left:16px}
.resetBtn{width:auto;min-height:26px;padding:3px 0;background:transparent;color:var(--muted);font-size:var(--type-meta);font-weight:600;cursor:pointer;transition:color var(--fast)}
.resetBtn:hover:not(:disabled){color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.resetBtn:disabled{cursor:default;color:var(--meta);text-decoration:none}
.yearFilterHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.yearFilterHeader strong{font-size:var(--type-meta);font-weight:600;color:var(--fg2);font-variant-numeric:tabular-nums}
.yearChart{position:relative;margin:0 5px;padding-bottom:2px}
.yearHistogram{position:relative;z-index:2;height:32px;display:grid;grid-template-columns:repeat(var(--year-count),minmax(0,1fr));align-items:end;gap:3px}
.yearHistogramBar{position:relative;z-index:2;min-width:0;height:100%;padding:0;background:transparent;border:0;cursor:pointer}
.yearHistogramBarFill{position:absolute;left:0;right:0;bottom:0;height:var(--bar-height);min-height:2px;background:color-mix(in srgb,var(--fg) 22%,var(--surface));border-radius:1px 1px 0 0;transition:height var(--fast),background var(--fast)}
.yearHistogramBar.prior .yearHistogramBarFill{background:color-mix(in srgb,var(--fg) 29%,var(--surface))}
.yearHistogramBar.inRange .yearHistogramBarFill{background:color-mix(in srgb,var(--selected) 38%,var(--fg2))}
.yearHistogramBar:hover .yearHistogramBarFill,.yearHistogramBar:focus-visible .yearHistogramBarFill{background:var(--selected)}
.yearHistogramBar:focus-visible{outline:1px solid var(--selected);outline-offset:1px}
.yearRangeBand{position:absolute;z-index:1;top:-2px;height:36px;left:calc(var(--range-start) - 2px);right:calc(100% - var(--range-end) - 2px);border-radius:2px;background:var(--control-hover-muted);pointer-events:none}
.yearRangeEdges{position:absolute;z-index:5;top:-4px;height:40px;left:var(--range-start);right:calc(100% - var(--range-end));pointer-events:none}
.yearRangeEdge{position:absolute;z-index:6;top:0;bottom:0;width:16px;cursor:ew-resize;touch-action:none;pointer-events:auto}
.yearRangeEdge.start{left:-8px}.yearRangeEdge.end{right:-8px}
.yearRangeEdge::after{content:"";position:absolute;top:2px;bottom:2px;width:2px;border-radius:2px;background:transparent;transition:background var(--fast)}
.yearRangeEdge.start::after{left:7px}.yearRangeEdge.end::after{right:7px}
.yearRangeEdge:hover::after,.yearRangeEdge.dragging::after{background:var(--resize-guide)}
.yearTicks{position:relative;z-index:3;display:grid;grid-template-columns:repeat(var(--year-count),minmax(0,1fr));margin-top:4px;min-height:13px}
.yearTick{display:block;padding:0;background:transparent;color:var(--meta);font-size:var(--type-meta);line-height:1.1;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.yearTick.prior{font-weight:700;color:var(--fg2)}
.yearUnknownNote{margin-top:6px;color:var(--meta);font-size:var(--type-meta);line-height:1.3}

/* ========================================================================== 
   8. Browse units, search, table headers, and results
   ========================================================================== */
.browseFixed{flex:0 0 auto;min-width:0;padding:0 13px 9px}
.browseLabel{margin-bottom:5px;font-size:var(--type-primary);font-weight:600}
.browseModeTabs{display:grid;grid-template-columns:repeat(var(--browse-mode-count,3),minmax(0,1fr));gap:3px;padding:2px;background:var(--control-hover-muted);border-radius:6px}
.browseModeBtn{min-width:0;height:30px;padding:0 5px;overflow:hidden;background:transparent;border-radius:4px;color:var(--muted);font-size:var(--type-secondary);font-weight:600;line-height:1.1;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background var(--fast),color var(--fast)}
.browseModeBtn:hover{background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--fg)}
.browseModeBtn.active{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.browseModeBtn.active:hover{background:var(--control-hover)}
.browseModeBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.browseSearchSection{margin-top:10px}
.browseSearchSection .labelRow{margin-bottom:5px}
.resultTableHeader{flex:0 0 auto;display:grid;align-items:stretch;gap:0;padding:3px 14px 5px;color:var(--meta);font-size:var(--type-meta);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.resultTableHeader[hidden]{display:none}
.resultColumnHead{position:relative;min-width:0;padding-right:6px;display:flex;align-items:flex-start;align-self:start}
.resultColumnHead:last-child{padding-right:0;padding-left:6px}
.resultColumnSort{min-width:0;width:100%;margin:0;padding:1px 2px;background:transparent;color:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:normal;overflow-wrap:anywhere;line-height:var(--list-leading);border-radius:3px;transition:background var(--fast),color var(--fast)}
.resultColumnSort.numeric{text-align:right}.resultColumnSort span{margin-left:2px}.resultColumnSort:hover{background:var(--control-hover);color:var(--fg)}
.resultColumnResize{position:absolute;z-index:8;right:-5px;top:0;bottom:0;width:10px;cursor:col-resize;touch-action:none}
.resultColumnResize::after{content:"";position:absolute;left:4px;top:-2px;bottom:-2px;width:2px;border-radius:2px;background:transparent;transition:background var(--fast)}
.resultColumnResize:hover::after,.resultColumnResize.dragging::after{background:var(--resize-guide)}
.resultsScroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 9px 9px;outline:0}
.resultsScroll:focus-visible{box-shadow:inset 0 0 0 1px var(--accent)}
.resultList{display:flex;flex-direction:column;gap:0;padding-bottom:5px}
.resultItem{position:relative;width:100%;min-height:50px;padding:10px 8px 10px 9px;text-align:left;background:transparent;border:0;border-radius:4px;cursor:pointer;transition:background var(--fast),color var(--fast)}
.resultItem+.resultItem{border-top:1px solid color-mix(in srgb,var(--fg) 6.5%,transparent)}
.resultItem:hover{background:var(--control-hover)}
.resultItem.active{background:var(--selected-soft)}
.resultItem.active:hover{background:color-mix(in srgb,var(--selected) 16%,var(--surface))}
.resultItem.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--selected)}
.resultRowGrid{display:grid;align-items:start;align-content:start;gap:0}
.resultRowGrid>span{min-width:0;margin:0;padding-top:0;padding-bottom:0;padding-right:8px;align-self:start}
.resultRowGrid>span:last-child{padding-right:0;padding-left:6px}
.resultPrimary{display:block;min-width:0;margin:0;padding:0;align-self:start}
.resultName{display:block;min-width:0;margin:0;padding:0;white-space:normal;overflow-wrap:anywhere;font-size:var(--type-primary);font-weight:600;line-height:var(--list-leading)}
.billResult .resultName{font-weight:700}
.resultSubtitle{display:block;margin-top:2px;padding:0;color:var(--muted);font-size:var(--type-secondary);line-height:var(--list-leading);white-space:normal;overflow-wrap:anywhere}
.resultCell{display:block;min-width:0;margin:0;padding-top:0;color:var(--muted);font-size:var(--type-secondary);line-height:var(--list-leading);white-space:normal;overflow-wrap:anywhere;align-self:start}
.resultCell.numeric{text-align:right;font-variant-numeric:tabular-nums}
.resultEmpty{display:flex;flex-direction:column;gap:4px;padding:14px 10px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:7px;text-align:center}
.resultEmpty strong{color:var(--fg2);font-size:var(--type-secondary)}
.resultEmpty span{font-size:var(--type-meta);line-height:1.3}
.limitNote{padding:6px 5px 2px;color:var(--meta);font-size:var(--type-meta);line-height:1.3}

.eventTimeline{position:relative;padding:0}
.eventTimelineItem{position:relative;z-index:1;width:100%;min-height:72px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;align-content:start;gap:8px;padding:9px 8px 9px 0;background:transparent;text-align:left;cursor:pointer;border:0;border-radius:4px;transition:background var(--fast)}
.eventTimelineItem::before{content:"";position:absolute;z-index:3;left:10px;top:0;bottom:0;width:1px;background:var(--line-strong);pointer-events:none}
.eventTimelineItem:first-child::before{top:21px}.eventTimelineItem:last-child::before{bottom:calc(100% - 21px)}
.eventTimelineItem:hover{background:var(--control-hover)}
.eventTimelineItem.active{background:var(--selected-soft)}
.eventTimelineItem.active:hover{background:color-mix(in srgb,var(--selected) 16%,var(--surface))}
.eventTimelineDot{position:relative;z-index:4;width:8px;height:8px;margin-left:6px;margin-top:8px;border-radius:50%;background:var(--event-color,var(--event));box-shadow:0 0 0 2px var(--surface)}
.eventTimelineItem.active .eventTimelineDot{box-shadow:0 0 0 2px var(--selected-soft)}
.eventTimelineContent{position:relative;z-index:2;min-width:0;margin:0;padding:0;align-self:start}
.eventTimelineTitle{display:block;margin:0;padding:0;font-size:var(--type-primary);font-weight:600;line-height:var(--list-leading)}
.eventTimelineTitle>span{font-weight:500;color:var(--fg2);font-variant-numeric:tabular-nums}
.eventTimelineDescription{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:3px;padding:0;color:var(--muted);font-size:var(--type-secondary);line-height:var(--list-leading)}
.eventTimelinePills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.resultPill{color:var(--fg2)}
.resultPill.location{font-weight:600;border-color:color-mix(in srgb,var(--selected) 42%,var(--line));background:var(--selected-soft)}
.resultPill.location:hover{background:color-mix(in srgb,var(--selected) 20%,var(--control-bg));border-color:color-mix(in srgb,var(--selected) 60%,var(--line))}
.resultPill.theme{border-color:color-mix(in srgb,var(--pill-color,#8b8377) 45%,var(--line));background:color-mix(in srgb,var(--pill-color,#8b8377) 10%,var(--control-bg))}
.resultPill.theme:hover{background:color-mix(in srgb,var(--pill-color,#8b8377) 17%,var(--control-bg));border-color:color-mix(in srgb,var(--pill-color,#8b8377) 68%,var(--line))}

/* ========================================================================== 
   9. Details window
   ========================================================================== */
#detailsPane{position:absolute;z-index:10;right:18px;bottom:96px;width:min(455px,calc(100vw - 36px));max-height:min(620px,calc(100vh - 180px));display:none;flex-direction:column;overflow:hidden;animation:detailsIn .18s var(--ease)}
#detailsPane.visible{display:flex;resize:both;min-width:320px;min-height:230px}
@keyframes detailsIn{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:none}}
.detailsHead{display:flex;align-items:flex-start;gap:12px;padding:14px 15px 12px;border-bottom:1px solid var(--line)}
.detailsHeadText{min-width:0;flex:1}
.detailsHead h2{margin:4px 0 0;font-size:19px;line-height:1.13;letter-spacing:-.04em}
.detailsHead p{margin:6px 0 0;color:var(--fg2);font-size:10px;line-height:1.42}
.detailsActions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.badgeRow{display:flex;flex-wrap:wrap;gap:5px}
.badge{display:inline-flex;align-items:center;padding:3px 8px;background:var(--neutral-chip);border:1px solid var(--line);border-radius:var(--pill-radius);font-size:8.5px;font-weight:500}
.badge.blue{color:#0068d6;background:#ebf5ff}.badge.red{color:#a1261e;background:#fff0ee}.badge.pink{color:#9c155f;background:#fdebf5}
.detailsBody{padding:13px 15px 17px;overflow:auto;scrollbar-width:thin}
.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px 17px}
.detailCell dt{margin:0 0 3px;font-family:var(--mono);font-size:8px;color:var(--meta);text-transform:uppercase;letter-spacing:.07em}
.detailCell dd{margin:0;overflow-wrap:anywhere;font-size:10px;line-height:1.42}
.detailSection{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
.detailSection h3{margin:0 0 7px;font-size:10px}.detailSection p{margin:0;color:var(--fg2);font-size:10px;line-height:1.5;white-space:pre-wrap}
.sourceList,.relatedList{display:flex;flex-direction:column;gap:5px}.sourceList a{overflow-wrap:anywhere;font-size:9px;line-height:1.35;text-underline-offset:2px}
.relatedItem{display:block;width:100%;padding:8px 9px;text-align:left;background:var(--control-bg);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.relatedItem:hover{background:var(--control-hover);border-color:var(--line-strong)}
.relatedItem strong{display:block;overflow:hidden;font-size:9.5px;white-space:nowrap;text-overflow:ellipsis}.relatedItem span{display:block;margin-top:3px;overflow:hidden;color:var(--muted);font-size:8.5px;white-space:nowrap;text-overflow:ellipsis}
.relationDisclosure{margin-top:8px}.relationDisclosure summary{color:var(--fg2);font-size:9px;font-weight:600;cursor:pointer}

/* ========================================================================== 
   10. Geography summaries inside details
   ========================================================================== */
.geoSummaryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.geoSummaryGrid button{min-width:0;padding:10px 8px;text-align:left;background:var(--land);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.geoSummaryGrid button:hover{background:var(--control-hover-warm);border-color:var(--line-strong)}
.geoSummaryGrid strong{display:block;font-size:18px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.geoSummaryGrid span{display:block;margin-top:5px;font-family:var(--mono);font-size:7.5px;line-height:1.2;color:var(--meta);text-transform:uppercase;letter-spacing:.06em}

/* ========================================================================== 
   11. Map overlays, navigation, legend, and zoom feedback
   ========================================================================== */
#mapControls{position:absolute;z-index:8;right:18px;top:18px;width:97px;display:grid;gap:2px}
#navPad{display:grid;grid-template-columns:repeat(3,31px);grid-template-rows:repeat(3,31px);gap:2px}
.navBtn,.mapUtilityBtn{display:grid;place-items:center;background:var(--control-bg);border:1px solid var(--line);border-radius:5px;cursor:pointer;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.navBtn{font-family:var(--mono);font-size:12px}
.navBtn:hover,.mapUtilityBtn:hover:not(:disabled){background:var(--control-hover);border-color:var(--line-strong)}
.navBtn.home{background:var(--fg);color:var(--control-bg);border-color:var(--fg)}
.mapUtilityRow{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mapUtilityBtn{height:29px;padding:0 4px;font-size:9px;font-weight:600;line-height:1}
.mapUtilityBtn[aria-pressed="true"]{background:var(--fg);color:var(--control-bg);border-color:var(--fg)}
.mapUtilityBtn:focus-visible,.navBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mapUtilityBtn:disabled{cursor:default;color:var(--meta);background:color-mix(in srgb,var(--control-bg) 68%,var(--canvas));border-color:var(--line);opacity:.62}
#legend{position:absolute;z-index:8;left:calc(30px + var(--panel-w));bottom:18px;min-width:150px;max-width:min(620px,calc(100vw - var(--panel-w) - 66px));overflow:hidden;transition:left var(--base) var(--ease),max-width var(--base) var(--ease)}
#app.leftPaneClosed #legend{left:18px;max-width:min(620px,calc(100vw - 54px))}
.legendToggle{width:100%;min-height:32px;padding:7px 10px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--control-bg);font-size:var(--type-meta);font-weight:600;cursor:pointer;transition:background var(--fast)}
.legendToggle:hover{background:var(--control-hover)}.legendToggle span:last-child{font-size:var(--type-meta);color:var(--meta)}
.legendContent{display:none;padding:10px 11px 11px;border-top:1px solid var(--line)}#legend.open .legendContent{display:block}
.legendGroup + .legendGroup{margin-top:11px}.legendGroup h3{margin:0 0 8px;font-size:var(--type-meta);color:var(--meta);font-weight:600}
.legendRows{display:flex;flex-wrap:wrap;gap:7px 10px}.legendItem{display:flex;align-items:center;gap:6px;color:var(--fg2);font-size:var(--type-meta)}
.legendItem[role="button"]{padding:4px 6px;background:var(--control-bg);border:1px solid var(--line);border-radius:5px;cursor:pointer;transition:opacity var(--fast),background var(--fast),border-color var(--fast)}
.legendItem[role="button"]:hover{background:var(--control-hover);border-color:var(--line-strong)}.legendItem[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.legendItem[role="button"].off{opacity:.34;background:var(--control-hover-muted);border-color:transparent}
.legendTri{width:13px;height:12px;display:block}.legendEvent{width:9px;height:9px;background:var(--event);border-radius:2px;transform:rotate(45deg)}
.legendBill{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;background:var(--legislation);color:var(--control-bg);border-radius:10px;font-size:8px}
#mapOrnaments{--map-ornament-edge:4px;--map-attribution-shift:0px;position:absolute;z-index:8;right:calc(var(--map-ornament-edge) + var(--map-attribution-shift));bottom:var(--map-ornament-edge);height:42px;display:flex;align-items:flex-start;gap:12px;pointer-events:none;color:var(--fg);transition:right var(--fast) var(--ease)}
#scaleBar,#northArrow{margin:0;padding:0;background:transparent;border:0;color:inherit;pointer-events:auto;cursor:pointer}
#scaleBar{position:relative;width:160px;height:42px;opacity:0;overflow:visible;text-align:left;transition:opacity 120ms linear;font-variant-numeric:tabular-nums}
#scaleBar[aria-hidden="true"]{pointer-events:none}
#scaleBar:focus-visible,#northArrow:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.scaleBarLabel,.scaleBarUnit{position:absolute;top:0;font-size:10.5px;line-height:10.5px;white-space:nowrap}
.scaleBarLabel{transform:translateX(-50%)}
.scaleBarUnit{left:calc(100% + 10px)}
.scaleBarTrack{position:absolute;left:0;right:0;top:13.5px;height:8px;border-bottom:1px solid currentColor}
.scaleBarTrack i{position:absolute;bottom:-1px;width:0;height:8px;border-left:1px solid currentColor}
#northArrow{width:33px;height:42px}
#northArrowGraphic{display:block;width:33px;height:42px;overflow:visible}
#northArrowCircle,#northArrowLine{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
#northArrowLine{stroke-linecap:round}
#northArrowLabel{fill:currentColor;font-family:var(--font);font-size:10.5px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
#zoomCounter{position:absolute;z-index:9;left:50%;bottom:18px;padding:7px 10px;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:color-mix(in srgb,var(--fg) 92%,transparent);color:var(--control-bg);border-radius:6px;font-size:10px;transition:opacity .18s var(--ease),transform .18s var(--ease)}
#zoomCounter.visible{opacity:1;transform:translate(-50%,0)}

/* ========================================================================== 
   12. Territorial interaction
   ========================================================================== */
#geoHoverLabel{position:absolute;z-index:16;display:none;max-width:250px;padding:6px 8px;transform:translate(10px,10px);overflow:hidden;pointer-events:none;background:color-mix(in srgb,var(--fg) 94%,transparent);color:var(--control-bg);border-radius:5px;font-size:9px;font-weight:600;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
#geoHoverLabel.visible{display:block}
.geoContextNote{margin:8px 0 0;padding:8px 9px;background:var(--context-bg);color:var(--fg2);border:1px solid var(--line);border-radius:6px;font-size:9px;line-height:1.45}
.relationKind{display:inline-flex;margin:0 0 6px;padding:2px 6px;background:var(--neutral-chip);color:var(--muted);border:1px solid var(--line);border-radius:var(--pill-radius);font-family:var(--mono);font-size:7px;line-height:1.2;text-transform:uppercase;letter-spacing:.06em}
.geoMetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.geoMetric{padding:8px 9px;background:var(--control-bg);border:1px solid var(--line);border-radius:6px}.geoMetric strong{display:block;font-size:13px;line-height:1.1}.geoMetric span{display:block;margin-top:4px;font-family:var(--mono);font-size:7px;color:var(--meta);text-transform:uppercase;letter-spacing:.06em}

/* ========================================================================== 
   13. Responsive shell and component behavior
   ========================================================================== */
@media (max-width:900px) and (pointer:fine){#detailsPane{right:12px}#legend{max-width:calc(100vw - var(--panel-w) - 60px)}}
@media (max-height:719px) and (min-width:721px){#titleBlock{padding-top:9px;padding-bottom:7px}.layerTabs{padding-bottom:7px}.filterFixed{padding-bottom:6px}.filterDisclosure summary{min-height:33px}.pillWindow{max-height:min(88px,16vh)}.yearHistogram{height:30px}}
@media (max-width:720px), (pointer:coarse) and (max-width:1024px){
 .mobileDrawerBackdrop{position:absolute;inset:0;z-index:18;display:block;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--fg) 28%,transparent);transition:opacity var(--base) var(--ease)}.mobileDrawerBackdrop.visible{opacity:1;pointer-events:auto}
 .mobileDrawerToggle{position:absolute;z-index:22;left:10px;top:10px;width:36px;height:36px;display:grid;place-items:center;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:7px;cursor:pointer;transition:background var(--fast)}
 .mobileDrawerToggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.mobileDrawerToggle.active{background:var(--fg);color:var(--control-bg)}
 #openPane,#openPane.visible,.leftPaneResizeHandle{display:none}
 #leftPane{z-index:20;left:0;top:0;bottom:0;width:min(360px,calc(100vw - 44px));min-width:0;border-top-left-radius:0;border-bottom-left-radius:0;transition:transform var(--base) var(--ease)}
 #leftPane.collapsed{transform:translateX(calc(-100% - 2px));opacity:1;pointer-events:none}
 #titleBlock{padding-top:max(14px,env(safe-area-inset-top))}#leftPane:not(.collapsed) #titleBlock{padding-left:58px}.paneCloseBtn{display:grid}.paneFooter{padding-bottom:max(8px,env(safe-area-inset-bottom))}.resultsScroll{padding-bottom:max(12px,env(safe-area-inset-bottom))}
 #mapControls{right:10px;top:10px;width:97px;transform:none}
 #navPad{grid-template-columns:repeat(3,31px);grid-template-rows:repeat(3,31px)}
 .mapUtilityBtn{height:29px;font-size:9px}
 #detailsPane{left:10px;right:10px;bottom:10px;width:auto;max-height:63vh}#detailsPane.visible{resize:none;min-width:0;min-height:0}.detailGrid{grid-template-columns:1fr}.geoSummaryGrid{grid-template-columns:repeat(3,1fr)}
 #mapOrnaments{--map-ornament-edge:4px}#scaleBar{max-width:120px}
 #legend,#app.leftPaneClosed #legend{left:10px;bottom:10px;max-width:calc(100vw - 20px)}#geoHoverLabel{max-width:190px}.geoMetrics{grid-template-columns:1fr 1fr}
 .resultTableHeader{padding-left:11px;padding-right:11px}
}
@media (max-width:420px){#leftPane{width:min(338px,calc(100vw - 34px))}.atlasName{font-size:17px}.geoSummaryGrid{grid-template-columns:1fr 1fr 1fr}.browseModeBtn{font-size:10.5px;padding-left:3px;padding-right:3px}.yearHistogram{height:29px}.yearTick{font-size:10px}}