/* Explore board — the map homepage.
   Tokens are the SITE'S OWN (--paper --surface --ink --rule --rule-firm
   --seal): the first version invented names with light fallbacks and served
   white chips on the dark theme. Never invent tokens; read the stylesheet. */
#xb .xhead{color:var(--ink);font-size:.92rem;margin:.2rem 0 .4rem}
#xb .xhead strong{color:var(--seal)}
#xb .chips{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem 0;scrollbar-width:none}
#xb .chip{flex:0 0 auto;font:.8rem Mukta,-apple-system,"Segoe UI",sans-serif;font-weight:500;padding:.28rem .7rem;
  border:1px solid var(--rule);border-radius:var(--r-pill,99px);
  background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
#xb .chip .n{opacity:.55}
#xb .chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
#xb .grid{display:grid;grid-template-columns:minmax(300px,480px) 1fr;gap:1rem;align-items:start}
#xb svg{width:100%;height:auto;display:block}
/* district fills whisper; state outlines speak */
#xb path.st{fill:var(--sunk,var(--surface));stroke:var(--paper);stroke-width:.35;cursor:pointer}
#xb path.st:hover{stroke:var(--brand);stroke-width:1.2}
#xb path.st.sel{stroke:var(--brand);stroke-width:1.6}
#xb path.outline{fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.55;pointer-events:none}
#xb .tinybar{display:flex;flex-wrap:wrap;gap:.3rem;padding:.4rem 0 0}
#xb .tinybar .chip{font-size:.75rem;padding:.12rem .5rem}
#xpanel{background:var(--surface);border:1px solid var(--rule);padding:.9rem 1.1rem}
#xpanel h2{margin:.1rem 0;font-size:1.2rem}
#xpanel .sub{opacity:.65;font-size:.85rem;margin-bottom:.6rem}
#xpanel table{border-collapse:collapse;width:100%;font-size:.88rem}
#xpanel td{padding:.4rem .5rem;border-bottom:1px solid var(--rule);vertical-align:top}
#xpanel td.n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
#xpanel td.d{white-space:nowrap;color:var(--seal);font:600 .8rem Mukta,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
#xpanel .sec{font:.78rem Mukta,-apple-system,"Segoe UI",sans-serif;opacity:.65}
#xclose{display:none}
td.nowrap{white-space:nowrap}
@media(max-width:840px){
  #xb .grid{grid-template-columns:1fr}
  #xpanel.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:72vh;
    overflow-y:auto;border-radius:14px 14px 0 0;box-shadow:var(--shadow-md,0 -8px 30px rgba(0,0,0,.28));
    animation:xup .18s ease-out}
  @keyframes xup{from{transform:translateY(30%);opacity:.6}to{transform:none;opacity:1}}
  #xpanel.sheet #xclose{display:flex;position:sticky;top:0;float:right;
    width:44px;height:44px;align-items:center;justify-content:center;
    font-size:1.4rem;line-height:1;border:none;border-radius:99px;
    background:var(--brand);color:#fff;cursor:pointer;margin:-.2rem -.2rem 0 0}
}
@media (prefers-reduced-motion: reduce){ #xpanel.sheet{animation:none} }

/* panel only when something is picked (29-08) */
#xb #xpanel{display:none}
#xb #xpanel.open{display:block}

#xpanel tr.grp td{background:var(--brand-bg);color:var(--brand);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .5rem}
#xpanel tr.past td{opacity:.55}
#xpanel tr.past td.d{color:var(--ink-3);font-weight:500}
/* v13b: the close cross is part of the overlay on every device (29-08) */
#xb #xpanel #xclose{display:block !important;position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:18px;line-height:34px;text-align:center;cursor:pointer;margin:0;z-index:4}
@media (max-width:640px){#xb .mapmod .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}#xb .mapmod .chip{white-space:nowrap;flex:0 0 auto}}

/* panel = pinned head + scrolling list */
#xb #xpanel{display:flex !important;flex-direction:column;padding:0}
#xb #xpanel:not(.open){display:none !important}
#xb #xhead{flex:0 0 auto;position:relative;padding:12px 56px 10px 14px;border-bottom:1px solid var(--rule-firm);background:var(--surface)}
#xb #xhead h2{margin:0 0 2px;font-size:1.15rem}
#xb #xhead .sub{margin:0}
#xb #xpanel #xclose{top:10px;right:12px}
#xb #xbody{flex:1 1 auto;overflow:auto;padding:6px 14px 14px}
/* glass panel (user, 29-08): the map shows through a frosted surface */
#xb #xpanel{background:color-mix(in srgb, var(--surface) 28%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  border-left:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow:-12px 0 28px -16px rgba(0,0,0,.45)}
#xb #xhead{background:color-mix(in srgb, var(--surface) 48%, transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
#xb #xpanel tr.grp td{background:color-mix(in srgb, var(--brand-bg) 70%, transparent)}
#xb #xpanel td{border-color:color-mix(in srgb, var(--rule) 60%, transparent)}
#xb #xpanel #xclose{background:color-mix(in srgb, var(--brand) 85%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* motion on the map: states fill in, lift on hover, settle when picked */
@keyframes stfill { from { opacity: 0; } to { opacity: 1; } }
#xb path.st { animation: stfill .6s ease both; transition: filter .18s ease, stroke-width .18s ease; cursor: pointer; }
#xb path.st:hover { filter: brightness(1.25) saturate(1.2); stroke: var(--brand); stroke-width: 1.6; }
#xb path.st.sel { filter: brightness(1.35); stroke: var(--brand); stroke-width: 2; }
#xb .chip { transition: transform .12s ease, background-color .15s ease; }
#xb .chip:active { transform: scale(.96); }
#xb #xpanel { transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease; opacity: 0; }
#xb #xpanel.open { opacity: 1; }
@keyframes rowin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#xb #xpanel.open tr { animation: rowin .35s ease both; }
#xb #xpanel.open tr:nth-child(n) { animation-delay: calc(var(--i, 0) * 28ms); }
#xb #xclose { transition: transform .15s ease; }
#xb #xclose:hover { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { #xb path.st, #xb #xpanel tr { animation: none !important; } #xb #xpanel { transition: none !important; } }