/* =========================================================
   Hudson Valley Botanicals — Kratom Legality Map
   Botanical editorial aesthetic — "field atlas" edition.

   Token-first: nearly every value below derives from the
   custom properties in :root. Tune there before reaching
   for one-off values, so the design stays systematic.
   ========================================================= */

:root {
  /* Parchment & ink — warm library neutrals */
  --parchment:   oklch(96.8% 0.013 88);    /* warm off-white */
  --parchment-2: oklch(93.5% 0.017 85);
  --paper:       oklch(98.6% 0.006 92);
  --vellum:      oklch(91% 0.021 83);      /* deepest paper — wells & insets */
  --ink-1:       oklch(20% 0.022 90);      /* deepest */
  --ink-2:       oklch(33% 0.019 88);
  --ink-3:       oklch(49% 0.015 86);
  --ink-4:       oklch(64% 0.011 85);

  /* Brand — deep forest / moss */
  --moss:        oklch(37% 0.06 152);
  --moss-deep:   oklch(26% 0.055 152);
  --moss-bright: oklch(52% 0.10 152);
  --moss-tint:   oklch(92.5% 0.026 148);
  --moss-line:        oklch(37% 0.06 152 / 0.22);
  --moss-line-strong: oklch(37% 0.06 152 / 0.42);

  /* Status hues — vivid for map fills (punch at small sizes)… */
  --st-legal:       oklch(56% 0.155 152);  /* fern */
  --st-kcpa:        oklch(56% 0.16 245);   /* lake blue */
  --st-restricted:  oklch(63% 0.165 50);   /* terracotta */
  --st-pending:     oklch(54% 0.185 295);  /* amethyst */
  --st-illegal:     oklch(50% 0.20 27);    /* madder red */

  /* …deep for badges & text — each holds ≥4.5:1 against white */
  --st-legal-deep:      oklch(43% 0.12 152);
  --st-kcpa-deep:       oklch(44% 0.13 248);
  --st-restricted-deep: oklch(46% 0.12 48);
  --st-pending-deep:    oklch(43% 0.15 295);
  --st-illegal-deep:    oklch(41% 0.16 27);

  /* …and tints for washes & hovers. (The panel hero uses literal light
     values instead — its surface is pinned light even in dusk mode — but
     these stay as the canonical in-root washes.) */
  --st-legal-tint:      oklch(93.5% 0.04 152);
  --st-kcpa-tint:       oklch(93.5% 0.045 245);
  --st-restricted-tint: oklch(94% 0.045 55);
  --st-pending-tint:    oklch(93.5% 0.04 300);
  --st-illegal-tint:    oklch(93.5% 0.04 27);

  --rad-sm: 5px;
  --rad-md: 9px;
  --rad-lg: 14px;
  --rad-xl: 22px;

  /* Layered shadow stacks — tight contact shadow + soft ambient */
  --shadow-soft: 0 1px 2px oklch(25% 0.04 80 / 0.05),
                 0 4px 10px -4px oklch(25% 0.04 80 / 0.10);
  --shadow-card: 0 1px 2px oklch(25% 0.04 80 / 0.06),
                 0 6px 16px -8px oklch(25% 0.04 80 / 0.10),
                 0 18px 40px -24px oklch(25% 0.04 80 / 0.14);
  --shadow-lift: 0 2px 4px -2px oklch(25% 0.04 80 / 0.12),
                 0 24px 56px -24px oklch(25% 0.04 80 / 0.38);
  --shadow-panel: -24px 0 80px -24px oklch(15% 0.02 80 / 0.45);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 0.15s;
  --t-med:  0.28s;

  /* Fluid type scale */
  --fs-display: clamp(30px, 2.4vw + 18px, 46px);
  --fs-lede:    clamp(15px, 0.4vw + 14px, 17.5px);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

[data-theme="dusk"] {
  --parchment:   oklch(23% 0.014 80);
  --parchment-2: oklch(27% 0.015 80);
  --paper:       oklch(29.5% 0.015 82);
  --vellum:      oklch(33% 0.017 80);
  --ink-1:       oklch(95% 0.012 85);
  --ink-2:       oklch(86% 0.012 85);
  --ink-3:       oklch(73% 0.010 85);
  --ink-4:       oklch(56% 0.010 85);
  --moss-bright: oklch(68% 0.09 152);
  --moss-tint:   oklch(34% 0.04 150);
  --moss-line:        oklch(75% 0.05 150 / 0.22);
  --moss-line-strong: oklch(75% 0.05 150 / 0.40);
  --st-legal-tint:      oklch(31% 0.06 152);
  --st-kcpa-tint:       oklch(31% 0.06 245);
  --st-restricted-tint: oklch(31% 0.06 55);
  --st-pending-tint:    oklch(31% 0.06 295);
  --st-illegal-tint:    oklch(31% 0.07 27);
  --shadow-soft: 0 1px 2px oklch(5% 0.01 80 / 0.3),
                 0 4px 10px -4px oklch(5% 0.01 80 / 0.4);
  --shadow-card: 0 1px 2px oklch(5% 0.01 80 / 0.35),
                 0 18px 40px -24px oklch(5% 0.01 80 / 0.5);
  --shadow-lift: 0 2px 4px -2px oklch(5% 0.01 80 / 0.4),
                 0 24px 56px -24px oklch(5% 0.01 80 / 0.7);
}

/* Scoped reset — only affects elements inside the map. No global selectors
   like html/body/* so we don't leak background, typography, or box-sizing
   into the host page. */
.lm-root,
.lm-root *,
.lm-root *::before,
.lm-root *::after {
  box-sizing: border-box;
}

.lm-root {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 44px) clamp(16px, 3vw, 44px) 44px;
  position: relative;
  z-index: 1;

  /* Self-contained typography + surface — so the map looks correct regardless
     of the surrounding page theme (dark, light, whatever). */
  background: var(--parchment);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  border: 1px solid var(--moss-line);
  border-radius: var(--rad-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
}

/* Parchment texture — fine fractal grain + two soft tonal washes, scoped
   to the map card, not the whole page. */
.lm-root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 18% 8%, oklch(88% 0.04 85 / 0.35), transparent 60%),
    radial-gradient(ellipse 60% 40% at 92% 92%, oklch(85% 0.035 140 / 0.20), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat;
  z-index: 0;
  border-radius: inherit;
}

.lm-root > * {
  position: relative;
  z-index: 1;
}

/* Entrance — quiet rise on first paint (suppressed for reduced motion). */
@keyframes lm-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.lm-header { animation: lm-rise 0.5s var(--ease-out) both; }
.lm-main   { animation: lm-rise 0.55s var(--ease-out) 0.06s both; }
.lm-recent { animation: lm-rise 0.6s var(--ease-out) 0.12s both; }

/* Shared focus ring — keyboard users get a clear moss outline everywhere. */
.lm-root :is(button, input):focus-visible,
.lm-panel button:focus-visible {
  outline: 2px solid var(--moss-bright);
  outline-offset: 2px;
}

/* ---------------- Header ---------------- */
.lm-header { margin-bottom: 28px; }

.lm-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* Thick half of the editorial "Oxford rule" under the masthead */
  padding-bottom: 22px;
  border-bottom: 2.5px solid var(--ink-1);
}

.lm-brand { display: flex; gap: 16px; align-items: center; }
.lm-brand-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--moss-tint);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--moss-line);
  flex-shrink: 0;
}
.lm-brand-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
/* Short cartographic tick before the eyebrow */
.lm-brand-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--moss);
  flex-shrink: 0;
}
.lm-brand-title {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.04;
  color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lm-lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.65;
  /* Thin half of the Oxford rule, 3px below the thick one */
  border-top: 1px solid var(--ink-1);
  margin: 3px 0 22px;
  padding-top: 18px;
  text-wrap: pretty;
}

/* Search */
.lm-search {
  position: relative;
  width: min(340px, 100%);
}
.lm-search input {
  width: 100%;
  height: 46px;
  padding: 0 18px 0 44px;
  border: 1px solid var(--moss-line);
  background: var(--paper);
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-1);
  outline: none;
  box-shadow: inset 0 1px 2px oklch(25% 0.04 80 / 0.04);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lm-search input::placeholder { color: var(--ink-4); }
.lm-search input:hover { border-color: var(--moss-line-strong); }
.lm-search input:focus {
  border-color: var(--moss);
  box-shadow: inset 0 1px 2px oklch(25% 0.04 80 / 0.04),
              0 0 0 4px oklch(58% 0.12 150 / 0.14);
}
.lm-search-icon {
  position: absolute;
  left: 17px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ink-3);
  pointer-events: none;
  transition: color var(--t-fast);
}
.lm-search:focus-within .lm-search-icon { color: var(--moss); }
@keyframes lm-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.lm-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--moss-line);
  border-radius: var(--rad-md);
  box-shadow: var(--shadow-lift);
  z-index: 10;
  transform-origin: top;
  animation: lm-pop 0.16s var(--ease-out);
}
.lm-search-results li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rad-sm);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--t-fast);
}
.lm-search-results li:hover { background: var(--moss-tint); }
.lm-search-status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lm-search-empty {
  cursor: default;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-3);
}
.lm-search-results li.lm-search-empty:hover { background: transparent; }

/* Toolbar */
.lm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lm-viewtoggle {
  display: inline-flex;
  padding: 4px;
  background: var(--parchment-2);
  border-radius: 999px;
  border: 1px solid var(--moss-line);
  box-shadow: inset 0 1px 2px oklch(25% 0.04 80 / 0.05);
}
.lm-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.lm-view-btn:hover { color: var(--ink-1); }
.lm-view-btn.is-active {
  background: var(--paper);
  color: var(--ink-1);
  box-shadow: var(--shadow-soft);
  font-weight: 500;
}
.lm-reviewed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.lm-reviewed-dot {
  width: 6px; height: 6px;
  background: var(--st-legal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px oklch(58% 0.12 150 / 0.22);
}
.lm-reviewed strong {
  color: var(--ink-1);
  font-weight: 600;
}

/* Legend */
.lm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--moss-line);
  background: var(--paper);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color var(--t-fast), color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.lm-chip:hover {
  border-color: var(--moss-line-strong);
  color: var(--ink-1);
  transform: translateY(-1px);
}
.lm-chip.is-active {
  background: var(--ink-1);
  color: var(--parchment);
  border-color: var(--ink-1);
}
.lm-chip-swatch {
  width: 12px; height: 12px;
  border-radius: 3.5px;
  box-shadow: inset 0 0 0 1px oklch(20% 0.02 90 / 0.12);
  flex-shrink: 0;
}
.lm-chip.is-active .lm-chip-swatch {
  box-shadow: inset 0 0 0 1px oklch(98% 0.006 92 / 0.4);
}
.lm-chip-count {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
}
.lm-chip.is-active .lm-chip-count { opacity: 0.8; }
.lm-chip-clear {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--t-fast);
}
.lm-chip-clear:hover { color: var(--ink-1); }

.lm-swatch-legal      { background: var(--st-legal); }
.lm-swatch-kcpa       { background: var(--st-kcpa); }
.lm-swatch-restricted { background: var(--st-restricted); }
.lm-swatch-pending    { background: var(--st-pending); }
.lm-swatch-illegal    { background: var(--st-illegal); }

.lm-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lm-dot-legal      { background: var(--st-legal); }
.lm-dot-kcpa       { background: var(--st-kcpa); }
.lm-dot-restricted { background: var(--st-restricted); }
.lm-dot-pending    { background: var(--st-pending); }
.lm-dot-illegal    { background: var(--st-illegal); }

/* ---------------- Map card (shared by all three views) ---------------- */
.lm-main {
  background: linear-gradient(180deg, var(--paper), var(--vellum) 220%);
  border: 1px solid var(--moss-line);
  border-radius: var(--rad-lg);
  padding: 18px;
  margin-top: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Figure caption strip — atlas-plate framing for whichever view is active. */
.lm-main-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--moss-line);
}
.lm-main-caption-fig { color: var(--moss); }

/* ---------------- Geographic map ---------------- */
.lm-geo { position: relative; } /* anchors the cursor tooltip */
.lm-geo svg { display: block; width: 100%; height: auto; }

/* Atlas plate — the whole nation lifts off the graticule as one printed
   piece. A single group shadow is far cheaper than 51 per-path shadows. */
.lm-geo-nation {
  filter: drop-shadow(0 6px 14px oklch(25% 0.04 80 / 0.16));
}
.lm-geo-grid { opacity: 0.5; }

/* Compass rose — decorative ornament in the open ocean corner. */
.lm-geo-compass { opacity: 0.75; }
.lm-compass-ring   { fill: none; stroke: var(--ink-4); stroke-width: 1; }
.lm-compass-hub    { fill: var(--ink-3); }
.lm-compass-needle { fill: var(--moss); }
.lm-compass-n {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink-3);
}

/* Cursor tooltip — decorative duplicate of the path's aria-label, so it's
   aria-hidden and suppressed on touch (see the hover:none block). */
.lm-geo-tooltip {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid var(--moss-line);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
  font-size: 13px;
  color: var(--ink-1);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  animation: lm-pop 0.14s var(--ease-out);
}
.lm-geo-tooltip-name { font-weight: 500; }
.lm-geo-tooltip-status {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-left: 8px;
  border-left: 1px solid var(--moss-line);
}

/* Status fills for SVG annotations (HTML elements use .lm-dot-*). */
.lm-fill-legal      { fill: var(--st-legal); }
.lm-fill-kcpa       { fill: var(--st-kcpa); }
.lm-fill-restricted { fill: var(--st-restricted); }
.lm-fill-pending    { fill: var(--st-pending); }
.lm-fill-illegal    { fill: var(--st-illegal); }

.lm-state {
  stroke: var(--paper);
  stroke-width: 1;
  cursor: pointer;
  transition: opacity 0.25s var(--ease-snap), filter 0.2s, stroke 0.2s;
  touch-action: manipulation;
}
.lm-state-legal      { fill: var(--st-legal); }
.lm-state-kcpa       { fill: var(--st-kcpa); }
.lm-state-restricted { fill: var(--st-restricted); }
.lm-state-pending    { fill: var(--st-pending); }
.lm-state-illegal    { fill: var(--st-illegal); }

.lm-state:hover { filter: brightness(1.07) saturate(1.08); }
.lm-state:focus { outline: none; stroke: var(--ink-1); stroke-width: 1.8; }
/* Filtered-out states recede to a quiet desaturated wash, keeping the
   country silhouette whole. */
.lm-state.is-dim { opacity: 0.2; filter: saturate(0.35); }
.lm-state.is-selected {
  stroke: var(--ink-1);
  stroke-width: 2;
  filter: drop-shadow(0 4px 10px oklch(25% 0.04 80 / 0.35));
}

/* State abbreviations on the geo map */
.lm-state-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--paper);
  paint-order: stroke fill;
  stroke: oklch(25% 0.04 80 / 0.4);
  stroke-width: 0.6px;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.25s var(--ease-snap);
}
.lm-state-label.is-small {
  font-size: 7.5px;
  letter-spacing: 0.02em;
  stroke-width: 0.45px;
}
.lm-state-label.is-dim { opacity: 0.2; }

/* Callout labels for tiny states (connector line + chip outside the map) —
   set in mono like map-plate annotations. */
.lm-callout-line {
  stroke: var(--ink-3);
  stroke-width: 0.8;
  fill: none;
  opacity: 0.65;
  transition: opacity var(--t-fast), stroke var(--t-fast);
}
.lm-callout-dot {
  fill: var(--paper);
  stroke: var(--ink-2);
  stroke-width: 0.8;
}
.lm-callout-status { stroke: var(--paper); stroke-width: 0.7; }
.lm-callout-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
  pointer-events: none;
  user-select: none;
  transition: fill var(--t-fast);
}
.lm-callout { transition: opacity 0.25s var(--ease-snap); }
.lm-callout:hover .lm-callout-label { fill: var(--ink-1); }
.lm-callout:hover .lm-callout-line  { opacity: 1; stroke: var(--ink-1); }
.lm-callout:focus { outline: none; }
.lm-callout:focus .lm-callout-label { fill: var(--ink-1); }
.lm-callout.is-dim { opacity: 0.2; }

/* ---------------- Hex tilegrid ---------------- */
.lm-hex-wrap svg { display: block; width: 100%; height: auto; }
.lm-hex {
  cursor: pointer;
  transition: opacity 0.25s var(--ease-snap), filter 0.2s;
  touch-action: manipulation;
}
.lm-hex .lm-hex-tile {
  fill: var(--st-legal);
  stroke: var(--paper);
  stroke-width: 2;
  /* fill-box so the hover scale grows from each tile's own center —
     a bare transform would otherwise pivot on the SVG origin. */
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.2s, transform 0.18s var(--ease-snap), stroke 0.18s;
}
.lm-hex.lm-state-legal      .lm-hex-tile { fill: var(--st-legal); }
.lm-hex.lm-state-kcpa       .lm-hex-tile { fill: var(--st-kcpa); }
.lm-hex.lm-state-restricted .lm-hex-tile { fill: var(--st-restricted); }
.lm-hex.lm-state-pending    .lm-hex-tile { fill: var(--st-pending); }
.lm-hex.lm-state-illegal    .lm-hex-tile { fill: var(--st-illegal); }

.lm-hex-abbr {
  font-family: var(--serif);
  font-size: 18px;
  fill: var(--paper);
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}
.lm-hex-sub {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--paper);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
}
.lm-hex:hover { filter: brightness(1.06) saturate(1.06); }
.lm-hex:hover .lm-hex-tile { transform: scale(1.045); }
.lm-hex.is-dim { opacity: 0.2; filter: saturate(0.35); }
.lm-hex.is-selected {
  filter: drop-shadow(0 4px 10px oklch(25% 0.04 80 / 0.3));
}
.lm-hex.is-selected .lm-hex-tile {
  stroke: var(--ink-1);
  stroke-width: 2.5;
}
.lm-hex:focus { outline: none; }
.lm-hex:focus .lm-hex-tile {
  stroke: var(--ink-1);
  stroke-width: 2.5;
}

/* ---------------- List view ---------------- */
.lm-list { display: flex; flex-direction: column; gap: 32px; padding: 8px 4px; }
.lm-list-section { position: relative; }
.lm-list-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--moss-line);
  margin-bottom: 14px;
}
.lm-list-header h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.lm-list-bar {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  align-self: center;
}
.lm-list-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--parchment-2);
  border: 1px solid var(--moss-line);
  border-radius: 999px;
  padding: 2px 9px;
}
.lm-list-blurb {
  grid-column: 2 / 4;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-3);
}
.lm-list-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 12px;
}
.lm-list-item {
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-1);
  cursor: pointer;
  border-radius: var(--rad-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast);
}
.lm-list-item:hover { background: var(--moss-tint); }
.lm-list-item.is-selected {
  background: var(--ink-1);
  color: var(--parchment);
}
.lm-list-flag {
  margin-left: auto;
  color: var(--st-restricted-deep);
  font-size: 10px;
}
.lm-list-name { flex: 1; }

/* ---------------- Recent changes ---------------- */
.lm-recent {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--moss-line);
  border-radius: var(--rad-lg);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: var(--shadow-soft);
}
.lm-recent-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.lm-recent-pulse {
  width: 8px; height: 8px;
  background: var(--st-illegal);
  border-radius: 50%;
  animation: lm-pulse 2s ease-in-out infinite;
}
@keyframes lm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(50% 0.14 25 / 0.5); }
  50% { box-shadow: 0 0 0 6px oklch(50% 0.14 25 / 0); }
}
.lm-recent-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.lm-recent-item {
  appearance: none;
  border: 1px solid var(--moss-line);
  background: var(--parchment-2);
  padding: 8px 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink-1);
  transition: border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast), background var(--t-fast);
}
.lm-recent-item:hover {
  border-color: var(--moss-line-strong);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.lm-recent-name { font-weight: 500; }
.lm-recent-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ---------------- Footer ---------------- */
.lm-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--moss-line);
  color: var(--ink-3);
  font-size: 13px;
  max-width: 70ch;
}
.lm-foot strong { color: var(--ink-2); }

/* ---------------- Detail panel (slide-in) ---------------- */
.lm-panel-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(15% 0.02 80 / 0.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 50;
  animation: lm-fade var(--t-med) ease-out;
}
@keyframes lm-fade { from { opacity: 0; } to { opacity: 1; } }

.lm-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(540px, 100vw);
  height: 100vh;
  background: var(--paper);
  z-index: 51;
  overflow-y: auto;
  box-shadow: var(--shadow-panel);
  animation: lm-slide 0.35s var(--ease-snap);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: oklch(60% 0.02 85 / 0.5) transparent;
}
@keyframes lm-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* Content settles in a beat after the panel itself. */
@keyframes lm-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.lm-panel-hero { animation: lm-fade-up 0.45s var(--ease-out) 0.1s both; }
.lm-panel-body { animation: lm-fade-up 0.45s var(--ease-out) 0.18s both; }

.lm-panel-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: 0;
  background: oklch(100% 0 0 / 0.7);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-1);
  z-index: 2;
  transition: background var(--t-fast);
}
.lm-panel-close:hover { background: var(--paper); }

.lm-panel-hero {
  padding: 76px 36px 30px;
  position: relative;
  overflow: hidden;
}
/* Status washes — literal light oklch (not the theme tint tokens) because
   the panel surface is pinned light by the shield below even in dusk mode. */
.lm-panel-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lm-hero-legal::before {
  background: linear-gradient(155deg, oklch(93% 0.05 152 / 0.85), transparent 70%),
              radial-gradient(120% 90% at 100% 0%, oklch(95% 0.035 152 / 0.7), transparent 60%);
}
.lm-hero-kcpa::before {
  background: linear-gradient(155deg, oklch(93% 0.05 245 / 0.85), transparent 70%),
              radial-gradient(120% 90% at 100% 0%, oklch(95% 0.035 245 / 0.7), transparent 60%);
}
.lm-hero-restricted::before {
  background: linear-gradient(155deg, oklch(94% 0.05 55 / 0.85), transparent 70%),
              radial-gradient(120% 90% at 100% 0%, oklch(95% 0.04 55 / 0.7), transparent 60%);
}
.lm-hero-pending::before {
  background: linear-gradient(155deg, oklch(93% 0.045 300 / 0.85), transparent 70%),
              radial-gradient(120% 90% at 100% 0%, oklch(95% 0.03 300 / 0.7), transparent 60%);
}
.lm-hero-illegal::before {
  background: linear-gradient(155deg, oklch(93% 0.045 27 / 0.85), transparent 70%),
              radial-gradient(120% 90% at 100% 0%, oklch(95% 0.03 27 / 0.7), transparent 60%);
}

/* Status spine — a slim color rule anchoring the hero to its verdict. */
.lm-panel-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 1;
}
.lm-hero-legal::after      { background: #2f6f3e; }
.lm-hero-kcpa::after       { background: #2b58a8; }
.lm-hero-restricted::after { background: #9c4a14; }
.lm-hero-pending::after    { background: #61398f; }
.lm-hero-illegal::after    { background: #99231f; }

.lm-panel-hero > * { position: relative; z-index: 1; }

/* Ghost abbreviation watermark — sits between the wash and the text. */
.lm-panel-watermark {
  position: absolute;
  top: -14px;
  right: -10px;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(130px, 34vw, 190px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}
.lm-hero-legal      .lm-panel-watermark { color: #2f6f3e; }
.lm-hero-kcpa       .lm-panel-watermark { color: #2b58a8; }
.lm-hero-restricted .lm-panel-watermark { color: #9c4a14; }
.lm-hero-pending    .lm-panel-watermark { color: #61398f; }
.lm-hero-illegal    .lm-panel-watermark { color: #99231f; }

.lm-panel-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.lm-panel-title {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.lm-panel-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.lm-panel-blurb {
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--serif);
}

.lm-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.lm-badge-legal      { background: var(--st-legal-deep); }
.lm-badge-kcpa       { background: var(--st-kcpa-deep); }
.lm-badge-restricted { background: var(--st-restricted-deep); }
.lm-badge-pending    { background: var(--st-pending-deep); }
.lm-badge-illegal    { background: var(--st-illegal-deep); }

.lm-panel-body {
  padding: 26px 36px 44px;
  flex: 1;
}
.lm-panel-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--moss-line);
}
.lm-panel-section:last-of-type { border-bottom: 0; }
.lm-panel-section h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 10px;
  font-weight: 600;
}
.lm-panel-section p {
  margin: 0;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.lm-panel-meta {
  display: flex;
  gap: 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--moss-line);
  border-top: 1px solid var(--moss-line);
  margin: 8px 0;
}
.lm-panel-meta-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.lm-panel-meta-val {
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 500;
}

.lm-panel-jumps { padding: 20px 0 8px; }
.lm-panel-jumps h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 10px;
  font-weight: 600;
}
.lm-panel-jumps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lm-jump {
  appearance: none;
  border: 1px solid var(--moss-line);
  background: var(--parchment);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink-1);
  transition: border-color var(--t-fast), background var(--t-fast),
              transform var(--t-fast);
}
.lm-jump:hover {
  border-color: var(--moss-line-strong);
  background: var(--paper);
  transform: translateY(-1px);
}

.lm-panel-footer {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--parchment);
  border-radius: var(--rad-md);
  border-left: 2px solid var(--moss);
}
.lm-panel-footer p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Shipping overlay */
[data-shipping] .lm-state-illegal,
[data-shipping] .lm-hex.lm-state-illegal .lm-hex-tile {
  fill: url(#lm-hatch), var(--st-illegal);
}
[data-shipping]::after {
  content: "Shipping restricted to illegal states";
  display: none;
}

/* Tweaks panel */
.lm-tweaks {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--moss-line);
  border-radius: var(--rad-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-lift);
  font-size: 13px;
  z-index: 40;
  display: none;
}
.lm-tweaks.is-open { display: block; }
.lm-tweaks h4 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.lm-tweak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.lm-tweak-row label { color: var(--ink-2); font-size: 13px; }
.lm-tweak-segs {
  display: inline-flex;
  background: var(--parchment-2);
  border-radius: 999px;
  padding: 2px;
  border: 1px solid var(--moss-line);
}
.lm-tweak-segs button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-3);
  border-radius: 999px;
}
.lm-tweak-segs button.is-active {
  background: var(--ink-1);
  color: var(--parchment);
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet (≤ 980px) — scale down padding, bump map text so it
   stays legible as the SVG shrinks to container width. */
@media (max-width: 980px) {
  .lm-root { padding: 22px 18px 60px; }
  .lm-main { padding: 12px; }
  .lm-main-caption { font-size: 9.5px; padding-bottom: 10px; }
  .lm-header { margin-bottom: 20px; }
  .lm-header-top { padding-bottom: 16px; }
  .lm-lede { padding-top: 14px; }
  .lm-reviewed { font-size: 11px; }

  .lm-state-label       { font-size: 12px; }
  .lm-state-label.is-small { font-size: 9px; }
  .lm-callout-label     { font-size: 10.5px; }
  .lm-callout-line      { stroke-width: 1; }
  .lm-callout-status    { r: 3.2px; } /* geometry property; attr 2.6 is the fallback */

  .lm-hex-abbr { font-size: 16px; }
  .lm-hex-sub  { font-size: 8.5px; }
}

/* Mobile (≤ 640px) — stacked header, edge-to-edge map,
   compact legend chips. Selectors are doubly-scoped with .lm-root to
   beat host-theme button / typography overrides. */
@media (max-width: 640px) {
  .lm-root {
    padding: 14px 0 24px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    overflow: visible;
  }
  .lm-root::before { border-radius: 0; }

  /* Inner text gets its own horizontal padding — the map itself (.lm-main)
     stays edge-to-edge so the SVG fills the full screen width. */
  .lm-root > .lm-header,
  .lm-root > .lm-recent,
  .lm-root > .lm-foot { padding-left: 14px; padding-right: 14px; }

  .lm-root .lm-header { margin-bottom: 14px; }
  .lm-root .lm-header-top {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom-width: 2px;
  }
  .lm-root .lm-brand { gap: 10px; }
  .lm-root .lm-brand-mark { width: 38px; height: 38px; }
  .lm-root .lm-brand-eyebrow { font-size: 10px; letter-spacing: 0.12em; }
  .lm-root .lm-brand-eyebrow::before { width: 14px; }
  .lm-root .lm-brand-title { font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; }
  .lm-root .lm-lede { font-size: 13.5px; line-height: 1.55; margin: 3px 0 12px; padding-top: 11px; }

  .lm-root .lm-search { width: 100%; }
  .lm-root .lm-search input {
    height: 42px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
    padding: 0 14px 0 38px;
  }
  .lm-root .lm-search-icon { left: 13px; }

  .lm-root .lm-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
  }
  .lm-root .lm-viewtoggle { width: 100%; padding: 3px; }
  .lm-root .lm-view-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 13px;
    line-height: 1.2;
    min-height: 36px;
    letter-spacing: 0;
  }
  .lm-root .lm-reviewed { font-size: 10.5px; align-self: flex-start; }

  /* Legend — compact chips, 3-per-row on ~375px phones. */
  .lm-root .lm-legend { gap: 5px; }
  .lm-root .lm-chip {
    padding: 5px 10px 5px 7px;
    font-size: 11px;
    line-height: 1.2;
    gap: 5px;
    min-height: 0;
    letter-spacing: 0;
    font-weight: 500;
  }
  .lm-root .lm-chip-label { font-size: 11px; }
  .lm-root .lm-chip-swatch { width: 9px; height: 9px; border-radius: 2px; }
  .lm-root .lm-chip-count { display: none; }

  /* The map card — edge-to-edge, minimal inner padding so the SVG
     gets maximum width. */
  .lm-root .lm-main {
    padding: 4px;
    margin: 10px 6px 0;
    border-radius: 10px;
  }
  .lm-root .lm-main-caption {
    padding: 6px 8px 8px;
    margin-bottom: 0;
    font-size: 8.5px;
  }

  /* SVG labels — scale up because the map is physically small on mobile. */
  .lm-root .lm-state-label       { font-size: 15px; stroke-width: 0.6px; }
  .lm-root .lm-state-label.is-small { font-size: 11px; }
  .lm-root .lm-callout-label     { font-size: 12.5px; }
  .lm-root .lm-callout-line      { stroke-width: 1.2; }
  .lm-root .lm-callout-status    { r: 4px; }

  /* Hex tilegrid — drop the sub-label so the abbr is readable. */
  .lm-root .lm-hex-abbr { font-size: 17px; }
  .lm-root .lm-hex-sub  { display: none; }

  /* List view — single column. */
  .lm-root .lm-list-grid { grid-template-columns: 1fr; gap: 2px; }
  .lm-root .lm-list-item { padding: 11px 14px; font-size: 15px; min-height: 44px; }
  .lm-root .lm-list-header h3 { font-size: 19px; }
  .lm-root .lm-list-blurb { font-size: 12.5px; }

  /* Recent changes — stack label above pills. */
  .lm-root .lm-recent {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    margin-left: 6px;
    margin-right: 6px;
  }
  .lm-root .lm-recent-list { gap: 5px; }
  .lm-root .lm-recent-item { padding: 6px 10px; font-size: 12px; min-height: 32px; }

  /* Detail panel — full screen, tighter paddings, bigger close tap area. */
  .lm-panel { width: 100vw; }
  .lm-panel-hero { padding: 56px 18px 20px; }
  .lm-panel-body { padding: 16px 18px 28px; }
  .lm-panel-title { font-size: 28px; }
  .lm-panel-watermark { font-size: 110px; top: -8px; right: -6px; }
  .lm-panel-meta { flex-direction: column; gap: 10px; }
  .lm-panel-close { width: 44px; height: 44px; top: 10px; right: 10px; }
  .lm-panel-section p { font-size: 14px; }

  .lm-root .lm-foot { margin-top: 22px; font-size: 12px; padding-top: 16px; }
}

/* Small mobile (≤ 420px) — iPhone-SE / narrow Android. */
@media (max-width: 420px) {
  .lm-root .lm-brand-title { font-size: 20px; }
  .lm-root .lm-lede { font-size: 13px; margin: 3px 0 10px; padding-top: 9px; }
  .lm-root .lm-view-btn { font-size: 12px; padding: 8px 2px; }
  .lm-root .lm-chip { padding: 5px 8px 5px 6px; font-size: 10.5px; }
  .lm-root .lm-chip-label { font-size: 10.5px; }
  .lm-root .lm-main { padding: 3px; margin: 8px 4px 0; }
  .lm-root .lm-main-caption { padding: 5px 6px 6px; }
  .lm-root .lm-state-label       { font-size: 17px; }
  .lm-root .lm-state-label.is-small { font-size: 12.5px; }
  .lm-root .lm-callout-label     { font-size: 13.5px; }
  .lm-root .lm-callout-status    { r: 4.5px; }
  .lm-root .lm-hex-abbr { font-size: 15px; }
  .lm-panel-hero { padding: 52px 14px 18px; }
  .lm-panel-body { padding: 14px 14px 24px; }
  .lm-panel-title { font-size: 24px; }
  .lm-panel-watermark { font-size: 92px; }
}

/* Coarse pointer (touch devices) — disable hover brighten / lift
   so a tap doesn't leave a stuck "hovered" state. */
@media (hover: none) {
  .lm-state:hover { filter: none; }
  .lm-hex:hover { filter: none; }
  .lm-hex:hover .lm-hex-tile { transform: none; }
  .lm-chip:hover,
  .lm-recent-item:hover,
  .lm-jump:hover { transform: none; }
  /* No cursor on touch — the tap opens the panel directly. */
  .lm-geo-tooltip { display: none; }
}

/* Reduced motion — skip entrance / slide-in / pulse animations. */
@media (prefers-reduced-motion: reduce) {
  .lm-header,
  .lm-main,
  .lm-recent,
  .lm-panel,
  .lm-panel-backdrop,
  .lm-panel-hero,
  .lm-panel-body,
  .lm-search-results,
  .lm-geo-tooltip,
  .lm-recent-pulse { animation: none; }
  .lm-state,
  .lm-callout,
  .lm-state-label,
  .lm-hex,
  .lm-hex-tile,
  .lm-chip,
  .lm-recent-item,
  .lm-jump { transition: none; }
}

/* =========================================================
   Theme-override shields (added v2.2.2)
   WordPress themes (especially Elementor/Astra/page builders)
   aggressively restyle <button> and <h2>. That caused two bugs:
     (1) Legend chips rendering as oversized full-width theme
         buttons on mobile, ignoring the compact .lm-chip rules.
     (2) The detail-panel state name (<h2 class="lm-panel-title">)
         rendering invisible because the panel is portaled outside
         .lm-root where the theme's heading rules win on specificity.
   These rules re-assert critical properties with !important and
   raise the panel z-index so it clears the site's sticky header.
   ========================================================= */

/* Neutralize theme button defaults on legend chips (all breakpoints). */
.lm-root .lm-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.lm-root .lm-chip,
.lm-root .lm-chip-clear {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}
.lm-root .lm-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px 7px 10px !important;
  border: 1px solid var(--moss-line) !important;
  background: var(--paper) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
}
.lm-root .lm-chip.is-active {
  background: var(--ink-1) !important;
  color: var(--parchment) !important;
  border-color: var(--ink-1) !important;
}

/* Mobile — compact chips, defeating theme button sizing. */
@media (max-width: 640px) {
  .lm-root .lm-legend { gap: 5px !important; }
  .lm-root .lm-chip {
    padding: 5px 10px 5px 7px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .lm-root .lm-chip-label { font-size: 11px !important; }
  .lm-root .lm-chip-swatch {
    width: 9px !important;
    height: 9px !important;
    border-radius: 2px !important;
  }
  .lm-root .lm-chip-count { display: none !important; }
}
@media (max-width: 420px) {
  .lm-root .lm-chip {
    padding: 5px 8px 5px 6px !important;
    font-size: 10.5px !important;
  }
  .lm-root .lm-chip-label { font-size: 10.5px !important; }
}

/* Detail panel — self-contained typography reset + z-index above
   site headers. Panel is rendered outside .lm-root so it needs its
   own shield. */
.lm-panel,
.lm-panel-backdrop {
  z-index: 999999 !important;
}
.lm-panel,
.lm-panel * {
  box-sizing: border-box !important;
}
/* Force panel + hero children to stack above the ::before tint overlay.
   Without these the theme can drop position:relative, letting the
   hero tint cover the title/status text. The watermark is excluded —
   it must stay absolutely positioned behind the text layer. */
.lm-panel {
  background: #fdfcf8 !important;
}
.lm-panel .lm-panel-hero {
  position: relative !important;
  background: #fdfcf8 !important;
  isolation: isolate !important;
}
.lm-panel .lm-panel-hero > :not(.lm-panel-watermark) {
  position: relative !important;
  z-index: 2 !important;
}
.lm-panel .lm-panel-hero::before {
  z-index: 0 !important;
}
.lm-panel .lm-panel-watermark {
  position: absolute !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.lm-panel .lm-panel-title,
.lm-panel h2.lm-panel-title,
.lm-panel-hero > h2.lm-panel-title {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif !important;
  font-size: 44px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-align: left !important;
  text-indent: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  transform: none !important;
  filter: none !important;
}
.lm-panel .lm-panel-eyebrow {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6a6a66 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.lm-panel .lm-panel-section h4,
.lm-panel h4 {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #6a6a66 !important;
  background: transparent !important;
  border: 0 !important;
}
.lm-panel .lm-panel-body p {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #2c2a26 !important;
}

/* Status badge + blurb inside the hero — theme colors/fonts can
   swallow these if unshielded. Badge hexes hold ≥4.5:1 (WCAG AA)
   against their white text. */
.lm-panel .lm-panel-status {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.lm-panel .lm-panel-status .lm-badge {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1.2 !important;
}
.lm-panel .lm-badge-legal      { background: #2f6f3e !important; color: #fff !important; }
.lm-panel .lm-badge-kcpa       { background: #2b58a8 !important; color: #fff !important; }
.lm-panel .lm-badge-restricted { background: #9c4a14 !important; color: #fff !important; }
.lm-panel .lm-badge-pending    { background: #61398f !important; color: #fff !important; }
.lm-panel .lm-badge-illegal    { background: #99231f !important; color: #fff !important; }
.lm-panel .lm-panel-blurb {
  font-size: 14px !important;
  color: #4a4844 !important;
  margin: 0 !important;
}

/* Nearby-state jump pills — same sizing as legend chips so the
   "Nearby states" section doesn't dominate the panel on mobile. */
.lm-panel .lm-panel-jumps-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.lm-panel .lm-jump {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(62, 93, 58, 0.25) !important;
  background: #f4efe3 !important;
  color: #1a1a1a !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
@media (max-width: 640px) {
  .lm-panel .lm-jump {
    padding: 5px 10px 5px 7px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .lm-panel .lm-jump .lm-dot {
    width: 8px !important;
    height: 8px !important;
  }
}

/* High-contrast close button so it's always visible on any background. */
.lm-panel .lm-panel-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  background: #1a1a1a !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}
.lm-panel .lm-panel-close:hover,
.lm-panel .lm-panel-close:focus {
  background: #000 !important;
  color: #fff !important;
}
.lm-panel .lm-panel-close svg {
  color: #fff !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #fff !important;
}
.lm-panel .lm-panel-close svg path {
  stroke: #fff !important;
}

/* Mobile panel — on PWA hosts a sticky app-shell header (~140px) sits
   on top and a bottom nav bar (~80px) sits on the bottom. Rather than
   paying for those gaps with content padding (which leaves the close
   button behind the header), reposition the panel itself so it fills
   only the space between the two shell bars. */
@media (max-width: 640px) {
  /* Use an explicit height instead of top/bottom anchoring — mobile
     Firefox has issues laying out a flex column with top+bottom
     anchors and overflowing content, which was collapsing the title
     and badge area when descriptions were long. */
  .lm-panel {
    top: 140px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: calc(100vh - 220px) !important;
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .lm-panel-hero {
    padding: 48px 18px 20px !important;
    flex-shrink: 0 !important;
  }
  .lm-panel-body {
    padding: 16px 18px 28px !important;
    flex-shrink: 0 !important;
  }
  .lm-panel .lm-panel-title,
  .lm-panel h2.lm-panel-title { font-size: 28px !important; }
  .lm-panel .lm-panel-close {
    width: 48px !important;
    height: 48px !important;
    top: 10px !important;
    right: 10px !important;
    position: absolute !important;
  }
  .lm-panel .lm-panel-close svg {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (max-width: 420px) {
  .lm-panel {
    top: 130px !important;
    height: calc(100vh - 205px) !important;
    max-height: calc(100vh - 205px) !important;
  }
  .lm-panel-hero { padding: 44px 14px 18px !important; }
  .lm-panel-body { padding: 14px 14px 24px !important; }
  .lm-panel .lm-panel-title,
  .lm-panel h2.lm-panel-title { font-size: 24px !important; }
}

/* ---------- View toggle (Geographic / Tilegrid / List) ----------
   Theme button styles were making these render huge and bold. */
.lm-root .lm-viewtoggle {
  padding: 4px !important;
}
.lm-root .lm-view-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--ink-2) !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.lm-root .lm-view-btn.is-active {
  background: var(--paper) !important;
  color: var(--ink-1) !important;
  box-shadow: var(--shadow-soft) !important;
  font-weight: 500 !important;
}
@media (max-width: 640px) {
  .lm-root .lm-viewtoggle { padding: 3px !important; }
  .lm-root .lm-view-btn {
    padding: 6px 4px !important;
    font-size: 12px !important;
    min-height: 30px !important;
  }
}
@media (max-width: 420px) {
  .lm-root .lm-view-btn {
    font-size: 11px !important;
    padding: 6px 2px !important;
  }
}

/* ---------- List view items ----------
   Theme <button> styles were adding centered text, massive min-heights
   and padding, making each state take ~120px of vertical space on
   mobile. Shield with compact left-aligned rules. */
.lm-root .lm-list-grid {
  gap: 2px !important;
}
.lm-root .lm-list-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--ink-1) !important;
  border-radius: var(--rad-sm) !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.lm-root .lm-list-item:hover {
  background: var(--moss-tint) !important;
}
.lm-root .lm-list-item.is-selected {
  background: var(--ink-1) !important;
  color: var(--parchment) !important;
}
@media (max-width: 640px) {
  .lm-root .lm-list-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .lm-root .lm-list-item {
    padding: 10px 12px !important;
    font-size: 15px !important;
    min-height: 40px !important;
    border-bottom: 1px solid var(--moss-line) !important;
    border-radius: 0 !important;
  }
  .lm-root .lm-list-item:last-child {
    border-bottom: 0 !important;
  }
}