/* ============ Tokens ============ */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem;

  /* Law palette: parchment surfaces, deep ink text, legal-green primary */
  --color-bg:#f4f1ea;
  --color-surface:#faf8f3;
  --color-surface-2:#fffdf8;
  --color-surface-offset:#ece7db;
  --color-border:#d8d2c4;
  --color-divider:#e3ddd0;
  --color-text:#1f2a26;
  --color-text-muted:#6a6557;
  --color-text-faint:#a39d8d;
  --color-text-inverse:#faf8f3;

  --color-primary:#1f5d4c;       /* legal green */
  --color-primary-hover:#174839;
  --color-primary-highlight:#d6e4dd;
  --color-accent:#9a6a2f;        /* brass / brown */

  /* Tier colors (choropleth) */
  --tier-standard:#cdd9c8;
  --tier-medium:#7bab8e;
  --tier-high:#1f5d4c;
  --tier-standard-text:#1f2a26;
  --tier-medium-text:#13241d;
  --tier-high-text:#faf8f3;

  --map-stroke:#faf8f3;
  --map-no-data:#e3ddd0;

  --radius-sm:.4rem; --radius-md:.6rem; --radius-lg:.9rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(40,36,24,.07);
  --shadow-md:0 6px 18px rgba(40,36,24,.10);
  --shadow-lg:0 16px 40px rgba(40,36,24,.16);
  --transition:180ms cubic-bezier(.16,1,.3,1);

  --font-body:'Inter',system-ui,sans-serif;
  --font-display:'Fraunces','Georgia',serif;
}
[data-theme="dark"]{
  --color-bg:#14171a;
  --color-surface:#1a1e22;
  --color-surface-2:#1f2429;
  --color-surface-offset:#242a30;
  --color-border:#343c44;
  --color-divider:#2a3137;
  --color-text:#e4e6e3;
  --color-text-muted:#9aa19c;
  --color-text-faint:#666d68;
  --color-text-inverse:#14171a;

  --color-primary:#5fae93;
  --color-primary-hover:#7cc4ab;
  --color-primary-highlight:#22312b;
  --color-accent:#c69a5f;

  --tier-standard:#3a4a44;
  --tier-medium:#4f8a72;
  --tier-high:#7cc4ab;
  --tier-standard-text:#e4e6e3;
  --tier-medium-text:#f0f5f2;
  --tier-high-text:#0f1f19;

  --map-stroke:#14171a;
  --map-no-data:#2a3137;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;line-height:1.55;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);transition:background var(--transition),color var(--transition)}
svg{display:block;max-width:100%}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;
  transition:background var(--transition),color var(--transition),border-color var(--transition),box-shadow var(--transition)}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-surface) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.header-inner{max-width:1400px;margin:0 auto;padding:var(--space-3) var(--space-5);
  display:flex;align-items:center;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand-mark{flex-shrink:0;color:var(--color-primary)}
.brand-text h1{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;line-height:1.1}
.brand-text p{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:1px}
.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.quick-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;
  background:var(--color-surface-2);color:var(--color-text)}
.quick-link:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none}
.quick-link.is-active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--color-border);
  border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text)}
.icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* ============ Layout ============ */
.layout{max-width:1400px;margin:0 auto;padding:var(--space-5);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.panel-head h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}
.panel-head .sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.panel-body{padding:var(--space-5)}

/* ============ Map ============ */
.map-wrap{position:relative;padding:var(--space-4) var(--space-5) var(--space-5)}
#us-map{width:100%;height:auto}
.state-path{fill:var(--map-no-data);stroke:var(--map-stroke);stroke-width:.7;cursor:pointer;
  transition:fill 140ms ease,opacity 140ms ease}
.state-path.tier-standard{fill:var(--tier-standard)}
.state-path.tier-medium{fill:var(--tier-medium)}
.state-path.tier-high{fill:var(--tier-high)}
.state-path:hover{opacity:.82}
.state-path.is-selected{stroke:var(--color-accent);stroke-width:2.2;paint-order:stroke}
.state-label{font-size:9px;font-weight:600;fill:var(--color-text-inverse);pointer-events:none;
  text-anchor:middle;opacity:.9}
.state-label.dark-label{fill:var(--color-text)}

.legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4);
  padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.legend-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--color-border)}
.legend-swatch.s{background:var(--tier-standard)}
.legend-swatch.m{background:var(--tier-medium)}
.legend-swatch.h{background:var(--tier-high)}

/* tooltip */
.map-tooltip{position:fixed;z-index:100;pointer-events:none;background:var(--color-text);color:var(--color-bg);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs);
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(4px);transition:opacity 120ms,transform 120ms;max-width:240px}
.map-tooltip.show{opacity:1;transform:translateY(0)}
.map-tooltip strong{display:block;font-size:var(--text-sm);margin-bottom:2px}

/* ============ Search / list ============ */
.controls{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);
  display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.search-box{flex:1;min-width:200px;position:relative}
.search-box input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-8);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);
  color:var(--color-text);font-size:var(--text-sm)}
.search-box input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-faint)}
.filter-select{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm)}

.state-list{max-height:340px;overflow-y:auto;padding:var(--space-2)}
.state-row{width:100%;text-align:left;display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);border-radius:var(--radius-md);border:1px solid transparent}
.state-row:hover{background:var(--color-surface-offset)}
.state-row.is-selected{background:var(--color-primary-highlight);border-color:var(--color-primary)}
.state-dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0}
.state-dot.tier-standard{background:var(--tier-standard)}
.state-dot.tier-medium{background:var(--tier-medium)}
.state-dot.tier-high{background:var(--tier-high)}
.state-row-name{font-weight:500;font-size:var(--text-sm)}
.state-row-cite{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto;text-align:right}

/* ============ Detail ============ */
.detail-head{padding:var(--space-5);border-bottom:1px solid var(--color-divider);
  background:linear-gradient(180deg,var(--color-primary-highlight),transparent)}
.detail-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:.01em}
.badge.tier-standard{background:var(--tier-standard);color:var(--tier-standard-text)}
.badge.tier-medium{background:var(--tier-medium);color:var(--tier-medium-text)}
.badge.tier-high{background:var(--tier-high);color:var(--tier-high-text)}
.badge.uidda-yes{background:var(--color-primary-highlight);color:var(--color-primary)}
.badge.uidda-no{background:var(--color-surface-offset);color:var(--color-text-muted)}
.badge.home{background:var(--color-accent);color:#fff}
.detail-head h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.1}
.detail-cite{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.statute-link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);
  border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600}
.statute-link:hover{background:var(--color-primary-hover);text-decoration:none}

.detail-sections{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}
.section{}
.section-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-2)}
.section-label svg{flex-shrink:0}
.section p{font-size:var(--text-sm);line-height:1.65;color:var(--color-text)}
.section .cite-inline{color:var(--color-text-muted);font-style:italic}

.callout{padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface-offset);
  border-left:3px solid var(--color-accent);font-size:var(--text-sm);line-height:1.6}
.callout .callout-label{font-weight:700;color:var(--color-accent);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:var(--space-1)}

.empty-detail{padding:var(--space-16) var(--space-5);text-align:center;color:var(--color-text-muted)}
.empty-detail svg{margin:0 auto var(--space-4);color:var(--color-text-faint)}

/* footer */
.site-footer{max-width:1400px;margin:0 auto;padding:var(--space-8) var(--space-5) var(--space-12);
  font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6}
.site-footer strong{color:var(--color-text)}
.disclaimer{padding:var(--space-4);background:var(--color-surface-offset);border-radius:var(--radius-md);
  border:1px solid var(--color-border);margin-top:var(--space-4)}

/* scrollbar */
.state-list::-webkit-scrollbar{width:8px}
.state-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:99px}