:root {
  --fa-surface:#fbfaf7; --fa-panel:#f4f2ed; --fa-text:#1f1e1b; --fa-mut:#6b675f; --fa-faint:#9a958b;
  --fa-line:rgba(31,30,27,0.12); --fa-line-2:rgba(31,30,27,0.06); --fa-wash:rgba(31,30,27,0.05);
  --fa-accent:#4f7a9b; --fa-accent-strong:#3f6b8c; --fa-accent-soft:#e6eef4;
  --fa-danger:#a3474b; --fa-good:#3f8a5c; --fa-warn:#8a5f12; --fa-violet:#6d5aa6;
  --fa-shadow:0 1px 2px rgba(31,30,27,0.04), 0 8px 24px rgba(31,30,27,0.08);
  --fa-shadow-lg:0 1px 2px rgba(31,30,27,0.04), 0 12px 32px rgba(31,30,27,0.14);
  --fa-shadow-sm:0 1px 2px rgba(31,30,27,0.06);
  --fa-ring:none;
  --fa-r:18px; --fa-r-md:12px; --fa-r-sm:8px; --fa-r-pill:999px;
  --fa-w:380px; --fa-gap:12px; --fa-pad:16px;
  --fa-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fa-r-lg:var(--fa-r); --fa-shadow-md:var(--fa-shadow);




  --fa-band-music:#b8506a; --fa-band-stage:#7b4fa0; --fa-band-fairs:#c0762e;
  --fa-band-spectacle:#2f8a8a; --fa-band-other:rgba(31,30,27,0.28);
}
:root[data-fa-dark] {
  --fa-surface:#1e1d1b; --fa-panel:#26241f; --fa-text:#ece9e2; --fa-mut:#aca79c; --fa-faint:#7f7a70;
  --fa-line:rgba(255,255,255,0.14); --fa-line-2:rgba(255,255,255,0.07); --fa-wash:rgba(255,255,255,0.06);
  --fa-accent:#7ea3c8; --fa-accent-strong:#9dbbdc; --fa-accent-soft:#2a3540;
  --fa-warn:#e0b25a;
  --fa-shadow:0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5); --fa-shadow-lg:0 12px 32px rgba(0,0,0,0.6);
  --fa-ring:0 0 0 1px rgba(255,255,255,0.08);


  --fa-band-music:#c8748a; --fa-band-stage:#9573b4; --fa-band-fairs:#cf9358;
  --fa-band-spectacle:#5aa4a4; --fa-band-other:rgba(251,250,247,0.28);
}
@font-face { font-family:"Figtree"; font-weight:400; font-display:swap; src:url("../figtree-400.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-weight:500; font-display:swap; src:url("../figtree-500.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-weight:600; font-display:swap; src:url("../figtree-600.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-weight:700; font-display:swap; src:url("../figtree-700.woff2") format("woff2"); }

html, body { margin: 0; height: 100%; font-family: var(--fa-body); color: var(--fa-text); font-size: 16px; -webkit-font-smoothing: antialiased;





  overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#map { position: absolute; inset: 0; background: #e9e6df; }


.fa-eyebrow, #catpanel h4, #panel h4 { font-family: var(--fa-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--fa-mut); }
.fa-title { font-weight: 700; font-size: 24px; letter-spacing: -0.015em; line-height: 1.1; }
.fa-h { font-weight: 700; font-size: 17px; letter-spacing: -0.005em; }
.fa-row-t { font-weight: 600; font-size: 15px; }
.fa-sec { font-size: 13.5px; color: var(--fa-mut); }
.linkbtn, .pop-link, .dir-clear, .dir-addstop, #reach-more, .enr-link { font-family: var(--fa-body); font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--fa-accent-strong); }


.fa-box { background: var(--fa-surface); border: none; border-radius: var(--fa-r); box-shadow: var(--fa-shadow), var(--fa-ring); }

.seg, #dir-mode, #dir-tabs, #basemap, #measure-mode { display: flex; gap: 3px; padding: 3px; background: var(--fa-wash); border-radius: var(--fa-r-pill); margin: 0 0 10px; }
.seg button, #dir-mode button, #dir-tabs button, #basemap button, #measure-mode button { flex: 1; height: 38px; border: none; background: transparent; border-radius: var(--fa-r-pill);
  font-family: var(--fa-body); font-weight: 600; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--fa-mut); cursor: pointer; }
.seg button[aria-pressed="true"], #dir-mode button.active, #dir-tabs button.active, #basemap button.active, #measure-mode button.active { background: var(--fa-surface); color: var(--fa-accent-strong); box-shadow: var(--fa-shadow-sm); }

.fa-field, .dir-field input, #cat-filter { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; font-size: 16px; font-family: var(--fa-body); color: var(--fa-text);
  background: var(--fa-wash); border: none; border-radius: var(--fa-r-md); }
.fa-field:focus, .dir-field input:focus, #cat-filter:focus { outline: none; box-shadow: 0 0 0 2px var(--fa-accent); }

.dir-primary, .pop-btn { height: 44px; border-radius: var(--fa-r-md); font-family: var(--fa-body); font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: 0; }
.fa-btn2 { height: 44px; border: none; border-radius: var(--fa-r-md); background: var(--fa-wash); color: var(--fa-text); font-family: var(--fa-body); font-weight: 600; font-size: 14px; cursor: pointer; }
.fa-btn2:hover { background: var(--fa-line); }

.chip { width: 28px; height: 28px; border-radius: 9px; } .chip svg { width: 16px; height: 16px; }
.chip.sm { width: 22px; height: 22px; border-radius: 7px; } .chip.sm svg { width: 13px; height: 13px; }

:focus-visible { outline: 2px solid var(--fa-accent); outline-offset: 2px; border-radius: var(--fa-r-sm); }



#catpanel { position: fixed; z-index: 5; top: 8vh; left: 50%; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 32px);
  max-height: 84dvh; overflow-y: auto; box-sizing: border-box; background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: var(--fa-r-lg); box-shadow: var(--fa-shadow-lg); padding: 4px 22px 22px; display: none; }
#catpanel.open { display: block; }
#cat-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--fa-line-2); }
#cat-count-txt { font-family: var(--fa-body); font-weight: 600; font-size: 11.5px; color: var(--fa-mut); }
#cat-count-txt .cut { color: #8a5f12; }
:root[data-fa-dark] #cat-count-txt .cut { color: #e0b25a; }
#cat-subrow .sr-links { display: flex; gap: 2px; }
#cat-filter-wrap { position: relative; margin: 12px 0 2px; }
#cat-filter-wrap svg { position: absolute; left: 11px; top: 14px; width: 16px; height: 16px; color: var(--fa-faint); pointer-events: none; }
#cat-filter { padding-left: 36px; }
.linkbtn { border: none; background: none; cursor: pointer; padding: 4px 6px; }
.xbtn { border: none; background: none; font-size: 17px; color: var(--fa-faint); cursor: pointer; padding: 4px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }

.ico-x { width: 18px; height: 18px; }
.xbtn:hover .ico-x, #panel-close:hover .ico-x, #clearbtn:hover .ico-x { color: var(--fa-text); }
.layers-block input { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
                 width: 40px; height: 23px; border-radius: 999px; background: var(--fa-line); cursor: pointer; transition: background .15s; }
.layers-block input:checked { background: var(--fa-accent); }
.layers-block input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
                        border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: left .15s; }
.layers-block input:checked::after { left: 19px; }
.layers-block input:focus-visible { outline: 2px solid var(--fa-accent); outline-offset: 2px; }


@media (prefers-reduced-motion: reduce) { .layers-block input::after { transition: none; } }



.chip { display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.chip.lg { width: 32px; height: 32px; border-radius: 10px; } .chip.lg svg { width: 18px; height: 18px; }
.chip.action { background: var(--fa-accent); }


#global-pill { position: absolute; z-index: 4; left: 50%; top: 12px; transform: translateX(-50%); display: none; align-items: center; gap: 10px;
  background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: var(--fa-r-md); box-shadow: var(--fa-shadow-md);
  padding: 8px 8px 8px 12px; white-space: nowrap; max-width: calc(100vw - 24px); }
#global-pill.show { display: flex; }
#global-pill .gp-chip { flex: none; }
#global-pill .gp-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#global-pill .gp-title { font-size: 14.5px; font-weight: 500; color: var(--fa-text); overflow: hidden; text-overflow: ellipsis; }
#global-pill .gp-sub { font-family: var(--fa-body); font-weight: 600; font-size: 11px; color: var(--fa-mut); }
#global-pill .gp-sub.warn { color: #8a5f12; }
:root[data-fa-dark] #global-pill .gp-sub.warn { color: #e0b25a; }
#global-pill .gp-act { border: 1px solid var(--fa-line); background: var(--fa-accent-soft); color: var(--fa-accent-strong); cursor: pointer;
  font-family: var(--fa-body); font-weight: 600; font-size: 11.5px; padding: 6px 9px; border-radius: var(--fa-r-sm); }
#global-pill .gp-act:hover { border-color: var(--fa-accent); }



.sel-ring { width: 64px; height: 64px; pointer-events: none; position: relative; }
.sel-ring::before, .sel-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--fa-danger); animation: sel-pulse 1.8s ease-out infinite;
}
.sel-ring::after { animation-delay: .9s; }


.sel-ring .sel-chip { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #fff; }
@keyframes sel-pulse { from { transform: scale(.35); opacity: .95; } to { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sel-ring::before { animation: none; transform: scale(.62); opacity: .9; }
  .sel-ring::after { display: none; }
}