/* geoStrat — free map of the 2026 projection ------------------------------------------------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.cm-wrap { position: relative; flex: 1; min-height: 0; }
.cm-map { position: absolute; inset: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-panel { position: absolute; top: 14px; left: 14px; bottom: 14px; width: 330px; overflow-y: auto; z-index: 2;
  background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.cm-panel.closed { display: none; }
.cm-head h1 { font-size: 20px; margin: 0 0 2px; letter-spacing: -0.02em; }
.cm-head p { margin: 0; }
.cm-seats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-seat { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 14px;
  background: color-mix(in srgb, var(--pc) 12%, var(--surface)); border-left: 3px solid var(--pc); font-variant-numeric: tabular-nums; }
.cm-seat em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cm-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.cm-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cm-seg button, .cm-parties button, .cm-cities button { font: inherit; font-size: 13px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 9px; padding: 7px 8px; cursor: pointer; min-height: 36px; }
.cm-seg button.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.cm-parties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm-parties button { border-left: 4px solid var(--pc); font-weight: 600; }
.cm-parties button.on { background: color-mix(in srgb, var(--pc) 18%, var(--surface)); border-color: var(--pc); }
.cm-cities { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-cities button { font-size: 12.5px; padding: 5px 9px; min-height: 32px; }
.cm-cities button:hover, .cm-seg button:hover { border-color: var(--text); }
.cm-legend { font-size: 13px; }
.cm-lt { font-weight: 600; margin-bottom: 8px; }
.cm-swatches, .cm-steps { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.cm-swatches span, .cm-steps span { display: inline-flex; align-items: center; gap: 6px; }
.cm-swatches i, .cm-steps i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.cm-steps b { font-weight: 600; color: var(--muted); }
.cm-ramp { height: 12px; border-radius: 6px; border: 1px solid var(--border); }
.cm-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.cm-legend p { margin: 6px 0 0; }
.cm-foot { margin: auto 0 0; }
.cm-toggle { display: none; position: absolute; left: 14px; bottom: 28px; z-index: 3; font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
@media (max-width: 760px) {
  .cm-panel { top: auto; left: 8px; right: 8px; bottom: 76px; width: auto; max-height: 55%; }
  .cm-toggle { display: block; }
  .nav a:not(.pill) { display: none; }
}