/* =========================================================================
   Slack Water — Visual Design System
   Dark-by-default dawn-over-water. WCAG AA, mobile-first, zero build step.
   ========================================================================= */

:root{
  /* ===== Surfaces ===== */
  --sw-bg-deep:#0a1f24;
  --sw-bg:#0c1626;
  --sw-surface:#14132b;
  --sw-surface-2:#1a1733;
  --sw-surface-3:#2b2447;

  /* ===== Lines ===== */
  --sw-line:rgba(244,201,163,.14);
  --sw-line-2:rgba(244,201,163,.24);
  --sw-line-cool:rgba(40,60,76,.55);

  /* ===== Text ===== */
  --sw-text:#f2ece1;
  --sw-text-2:#c3ccca;
  --sw-text-3:#a3b1b5;        /* lifted slightly for AA on the lighter surfaces */
  --sw-text-4:#9a95bf;        /* lifted from #6b6690 -> >=4.5:1 on bg/surface-3 */

  /* ===== Accents — the dawn ===== */
  --sw-ember:#c77d63;
  --sw-coral:#e8956b;
  --sw-peach:#f4c9a3;
  --sw-mauve:#cba9c4;          /* unified Tier III (was dark #7d5470 on map) */

  /* ===== Water ===== */
  --sw-water:#283c4c;
  --sw-water-deep:#0a1f24;

  /* ===== Light-mode fallback (unused v1) ===== */
  --sw-cream:#f5efe6;
  --sw-ink:#0c1626;

  /* ===== Semantic ===== */
  --sw-good:#5dcaa5;  --sw-good-soft:rgba(93,202,165,.16);
  --sw-warn:#f4c9a3;  --sw-warn-soft:rgba(244,201,163,.16);
  --sw-bad:#c77d63;   --sw-bad-soft:rgba(199,125,99,.16);

  /* ===== Calendar "good" — distinct teal-cyan, not just dimmed prime ===== */
  --sw-good-2:#7fd8e0;  --sw-good-2-soft:rgba(127,216,224,.16);

  /* ===== Tier ===== */
  --sw-tier1:#f4c9a3;  --sw-tier1-soft:rgba(244,201,163,.16);
  --sw-tier2:#e8956b;  --sw-tier2-soft:rgba(199,125,99,.14);
  --sw-tier3:#cba9c4;  --sw-tier3-soft:rgba(203,169,196,.16);

  /* ===== Access ===== */
  --sw-access-open:#5dcaa5;       --sw-access-open-soft:rgba(93,202,165,.16);
  --sw-access-permit:#d9c08a;     --sw-access-permit-soft:rgba(217,192,138,.16); /* off the Tier-I peach */
  --sw-access-restrict:#d9b8d0;   --sw-access-restrict-soft:rgba(125,84,112,.18);

  /* ===== Map origin (must NOT be peach — would collide with Tier I) ===== */
  --sw-origin:#8fa9b8;

  /* ===== Fonts ===== */
  --sw-font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sw-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sw-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* ===== Type scale ===== */
  --fs-hero:clamp(2.75rem,9vw,5rem);
  --fs-tagline:clamp(1.05rem,3vw,1.5rem);
  --fs-h1:clamp(1.9rem,5vw,2.75rem);
  --fs-h2:clamp(1.4rem,3.5vw,1.9rem);
  --fs-h3:clamp(1.15rem,2.5vw,1.4rem);
  --fs-lead:clamp(1.05rem,2.2vw,1.2rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  --fs-xxs:.6875rem;
  --fs-score:clamp(1.5rem,4vw,2.25rem);

  /* ===== Spacing ===== */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  /* ===== Radius ===== */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px; --r-full:50%;

  /* ===== Layout ===== */
  --maxw:1180px;
  --page-pad:clamp(1rem,4vw,2rem);
  --bar-h:56px;

  /* ===== Elevation ===== */
  --el-1-bd:.5px solid var(--sw-line);
  --el-2-bd:.5px solid var(--sw-line-2);
  --el-pop-shadow:0 12px 32px rgba(0,0,0,.45);

  /* ===== Motion ===== */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:480ms;

  /* ===== Focus ===== */
  --focus-ring:0 0 0 3px rgba(199,125,99,.22);
  --focus-outline:2px solid var(--sw-ember);
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sw-font-sans);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--sw-text);
  background:var(--sw-bg);
  background-image:linear-gradient(180deg,var(--sw-water-deep) 0%,var(--sw-bg) 720px);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--sw-font-serif);font-weight:600;line-height:1.1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--sw-ember);text-decoration:none}
a:hover{color:var(--sw-coral)}

/* ===== Focus ===== */
:focus-visible{outline:var(--focus-outline);outline-offset:2px;border-radius:4px}

/* ===== Utilities ===== */
.visually-hidden,.skip-link{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:.5rem;left:.5rem;width:auto;height:auto;
  clip:auto;margin:0;padding:.6rem 1rem;z-index:200;
  background:var(--sw-surface-2);color:var(--sw-text);border-radius:var(--r-sm);
  border:var(--el-2-bd);
}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--page-pad)}
.wrap--reading{max-width:760px}
.eyebrow,.control-label,.legend-note{
  font-size:var(--fs-xxs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.tnum{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}

/* ============================ HERO ============================ */
.hero{position:relative;width:100%;min-height:min(88svh,760px);overflow:hidden}
.hero__wrap{position:absolute;inset:0;width:100%;height:100%;background:var(--sw-bg-deep)}
#heroCanvas{display:block;width:100%;height:100%}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  /* darker, earlier ramp so the eyebrow/title never sit on bright peach pixels */
  background:linear-gradient(180deg,rgba(10,22,36,.28) 0%,rgba(10,22,36,0) 22%,rgba(10,22,36,.50) 60%,rgba(10,22,36,.85) 100%);
}
.hero__overlay{
  position:relative;z-index:2;display:flex;align-items:flex-end;
  min-height:min(88svh,760px);
}
.hero__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:var(--s-7) var(--page-pad) var(--s-8);
}
.hero__eyebrow{
  color:var(--sw-peach);margin-bottom:var(--s-3);opacity:.95;
  text-shadow:0 1px 10px rgba(8,12,24,.6);
}
.hero__title{
  font-size:var(--fs-hero);font-weight:500;letter-spacing:-.02em;line-height:.98;
  color:var(--sw-peach);
  /* dark halo for edge contrast against same-hue dawn glow, plus warm glow */
  text-shadow:0 1px 12px rgba(8,12,24,.6),0 1px 30px rgba(244,201,163,.22);
  margin-bottom:var(--s-3);
}
.hero__tagline{
  font-family:var(--sw-font-serif);font-style:italic;font-weight:400;
  font-size:var(--fs-tagline);letter-spacing:-.01em;color:var(--sw-text);
  margin-bottom:var(--s-4);text-shadow:0 1px 10px rgba(8,12,24,.55);
}
.hero__intro{
  font-size:var(--fs-lead);line-height:1.7;color:var(--sw-text);max-width:60ch;
  text-shadow:0 1px 8px rgba(8,12,24,.5);
}
.hero__cue{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s-6);
  font-size:var(--fs-xxs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sw-text-2);text-shadow:0 1px 8px rgba(8,12,24,.5);
}
.hero__cue:hover{color:var(--sw-peach)}
.hero__cue svg{animation:bob 2.4s var(--ease-in-out) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* hero text fade-up on load */
.hero__eyebrow,.hero__title,.hero__tagline,.hero__intro,.hero__cue{
  opacity:0;transform:translateY(14px);
  animation:fadeUp var(--dur-slow) var(--ease-out) forwards;
}
.hero__eyebrow{animation-delay:.05s}
.hero__title{animation-delay:.14s}
.hero__tagline{animation-delay:.23s}
.hero__intro{animation-delay:.32s}
.hero__cue{animation-delay:.42s}
@keyframes fadeUp{to{opacity:1;transform:none}}

@media (min-width:760px){
  .hero__inner{padding-bottom:var(--s-9)}
}
@media (max-width:559px){
  .hero__overlay{align-items:flex-end}
  .hero__inner{text-align:center}
  .hero__intro{margin-inline:auto}
  .hero__cue{margin-inline:auto}
}

/* ===================== STICKY FILTER BAR ===================== */
.filterbar{
  position:sticky;top:0;z-index:50;
  background:var(--sw-surface-2);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:.5px solid var(--sw-line);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.filterbar.is-stuck{border-bottom-color:var(--sw-line-2);box-shadow:0 6px 24px rgba(0,0,0,.34)}
.filterbar__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:.7rem var(--page-pad);
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
}
.filterbar__search{
  position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:0;
}
.filterbar__search-icon{
  position:absolute;left:.7rem;color:var(--sw-text-3);pointer-events:none;
}
.filterbar__search input{
  width:100%;height:40px;padding:0 .8rem 0 2.3rem;
  background:var(--sw-surface-3);color:var(--sw-text);
  border:1px solid var(--sw-line);border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-family:inherit;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.filterbar__search input::placeholder{color:var(--sw-text-3)} /* AA on surface-3 */
.filterbar__search input:focus{
  outline:none;border-color:var(--sw-ember);box-shadow:var(--focus-ring);
}
.filterbar__toggle{display:none}
.filterbar__controls{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}

.control-group{display:flex;align-items:center;gap:var(--s-2)}
.control-group--slider{gap:var(--s-3)}
.control-label{color:var(--sw-text-3);white-space:nowrap}

/* segmented */
.segmented{
  display:inline-flex;background:var(--sw-surface-3);
  border:1px solid var(--sw-line);border-radius:var(--r-xs);overflow:hidden;
}
.seg{
  appearance:none;border:0;background:transparent;color:var(--sw-text-3);
  font-size:var(--fs-xs);font-weight:500;padding:.45rem .8rem;cursor:pointer;
  transition:background var(--dur),color var(--dur);min-height:34px;
}
.seg[aria-pressed="true"]{background:var(--sw-bad-soft);color:var(--sw-peach)}
.seg:hover{color:var(--sw-text)}

/* filter pills */
.pill-set{display:inline-flex;gap:6px;flex-wrap:wrap}
.fpill{
  appearance:none;cursor:pointer;
  font-size:var(--fs-xs);font-weight:500;padding:.42rem .7rem;min-height:34px;
  border-radius:var(--r-pill);border:.5px solid var(--sw-line);
  background:var(--sw-surface-3);color:var(--sw-text-3);
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.fpill:hover{color:var(--sw-text);border-color:var(--sw-line-2)}
.fpill--open[aria-pressed="true"]{background:var(--sw-access-open-soft);color:var(--sw-good);border-color:rgba(93,202,165,.30)}
.fpill--permit[aria-pressed="true"]{background:var(--sw-access-permit-soft);color:var(--sw-access-permit);border-color:rgba(217,192,138,.34)}
.fpill--t1[aria-pressed="true"]{background:var(--sw-warn-soft);color:var(--sw-peach);border-color:rgba(244,201,163,.34)}
.fpill--restrict[aria-pressed="true"],.fpill--t3[aria-pressed="true"]{background:var(--sw-tier3-soft);color:var(--sw-tier3);border-color:rgba(203,169,196,.34)}
.fpill--t2[aria-pressed="true"]{background:var(--sw-tier2-soft);color:var(--sw-coral);border-color:rgba(199,125,99,.28)}

/* slider */
.control-group--slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:120px;height:4px;
  background:var(--sw-water);border-radius:var(--r-pill);cursor:pointer;
}
.control-group--slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:var(--r-full);
  background:var(--sw-coral);border:2px solid var(--sw-bg);cursor:pointer;
}
.control-group--slider input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:var(--r-full);
  background:var(--sw-coral);border:2px solid var(--sw-bg);cursor:pointer;
}
.control-group--slider input[type=range]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.slider-readout{
  font-family:var(--sw-font-mono);font-size:var(--fs-xs);color:var(--sw-text-2);
  white-space:nowrap;min-width:5.5ch;font-variant-numeric:tabular-nums;
}

.reset-btn{
  appearance:none;background:transparent;border:.5px solid var(--sw-line);
  color:var(--sw-text-3);font-size:var(--fs-xs);font-weight:500;
  padding:.42rem .8rem;border-radius:var(--r-xs);cursor:pointer;min-height:34px;
  transition:color var(--dur),border-color var(--dur);
}
.reset-btn:hover{color:var(--sw-text);border-color:var(--sw-line-2)}

.result-count{
  width:100%;max-width:var(--maxw);margin:.7rem auto 0;padding-inline:var(--page-pad);
  font-size:var(--fs-sm);color:var(--sw-text-3);
}

/* ===================== SECTIONS ===================== */
.section{padding-block:var(--s-7)}
.section--intro{padding-top:var(--s-7);padding-bottom:var(--s-4)} /* breathing room under sticky bar */
.section--spots{padding-top:var(--s-4)}
.section__title{
  font-size:var(--fs-h1);letter-spacing:-.02em;color:var(--sw-text);
  margin-bottom:var(--s-3);scroll-margin-top:calc(var(--bar-h) + 24px);
}
.section__lead{font-size:var(--fs-lead);line-height:1.7;color:var(--sw-text-2);max-width:68ch}
.here-now{color:var(--sw-peach);font-weight:500}

/* ===================== SPOT GRID & CARDS ===================== */
.spot-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s-5);
}
@media (max-width:559px){.spot-grid{grid-template-columns:1fr}}

.spot-card{
  background:var(--sw-surface);border:var(--el-1-bd);border-radius:var(--r-md);
  padding:1rem 1.25rem 1.1rem;position:relative;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.spot-card:hover,.spot-card:focus-within{
  background:var(--sw-surface-2);border-color:var(--sw-line-2);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(244,201,163,.06);
}
.spot-card.is-flashed{animation:flash 1.4s var(--ease-out)}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(244,201,163,.45)}
  30%{box-shadow:0 0 0 4px rgba(244,201,163,.30)}
  100%{box-shadow:0 0 0 0 rgba(244,201,163,0)}
}
/* filter fade-out */
.spot-card.is-hidden{display:none}
.spot-card.is-leaving{opacity:0;transform:scale(.98);transition:opacity 120ms,transform 120ms}

.card__head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.15rem}
.card__rank{
  font-family:var(--sw-font-serif);font-weight:500;font-size:var(--fs-score);
  color:var(--sw-peach);font-variant-numeric:tabular-nums;line-height:1;flex:0 0 auto;
}
.card__name{
  font-family:var(--sw-font-serif);font-weight:500;font-size:var(--fs-h3);
  color:var(--sw-text);line-height:1.18;flex:1 1 auto;text-wrap:balance;
}
.card__water{font-size:var(--fs-sm);color:var(--sw-text-3);margin-bottom:.7rem}

.card__stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:.7rem}
.stat{display:flex;flex-direction:column;line-height:1.05}
.stat__label{font-size:var(--fs-xxs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sw-text-3)}
.stat__val{
  font-family:var(--sw-font-serif);font-weight:500;font-size:var(--fs-score);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.stat--score .stat__val{color:var(--sw-peach)}
.stat--drive .stat__val,.stat--dist .stat__val{color:var(--sw-text)}
.stat--dist .stat__val{color:var(--sw-text-2)}
.stat__unit{font-family:var(--sw-font-mono);font-size:.6em;color:var(--sw-text-3);margin-left:2px}

.card__badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.7rem}

/* badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:500;padding:3px 9px;border-radius:var(--r-pill);
  border:.5px solid transparent;line-height:1.3;
}
.badge svg{flex:0 0 auto}
.badge--access-open{background:var(--sw-access-open-soft);color:var(--sw-good);border-color:rgba(93,202,165,.30)}
.badge--access-permit{background:var(--sw-access-permit-soft);color:var(--sw-access-permit);border-color:rgba(217,192,138,.34)}
.badge--access-restrict{background:var(--sw-access-restrict-soft);color:var(--sw-access-restrict);border-color:rgba(125,84,112,.34)}
.badge--tier1{background:var(--sw-tier1-soft);color:var(--sw-peach);border-color:rgba(244,201,163,.34)}
.badge--tier2{background:var(--sw-tier2-soft);color:var(--sw-coral);border-color:rgba(199,125,99,.28)}
.badge--tier3{background:var(--sw-tier3-soft);color:var(--sw-tier3);border-color:rgba(203,169,196,.34)}

.card__blurb{
  font-size:var(--fs-sm);line-height:1.65;color:var(--sw-text-2);margin-bottom:.7rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card.is-open .card__blurb{-webkit-line-clamp:unset;overflow:visible}

.card__swims{font-size:var(--fs-sm);color:var(--sw-text-2);margin-bottom:.7rem}
.card__swims .lbl{font-size:var(--fs-xxs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sw-text-3);margin-right:.4rem}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.8rem}
.chip{
  font-size:var(--fs-xs);font-weight:500;padding:3px 8px;border-radius:var(--r-xs);
  background:rgba(199,125,99,.12);color:var(--sw-coral);
}
/* tags are redundant with the open detail's full tactics list — hide when open */
.card.is-open .chips{display:none}

/* species pills — teal, distinct from the coral tactic chips */
.card__species{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.7rem}
.spec{
  font-size:var(--fs-xs);font-weight:500;padding:3px 8px;border-radius:var(--r-xs);
  background:rgba(93,202,165,.12);color:var(--sw-good);
}

.card__actions{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border-top:.5px solid var(--sw-line);padding-top:12px;
}
.card__dir{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:500;color:var(--sw-ember)}
.card__dir:hover{color:var(--sw-coral)}
.card__dir svg{flex:0 0 auto}
.card__toggle{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--fs-sm);font-weight:500;color:var(--sw-text-3);font-family:inherit;
  padding:.3rem .2rem;
}
.card__toggle:hover{color:var(--sw-text)}
.card__toggle svg{transition:transform var(--dur) var(--ease-out)}
.card__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* expanded region — grid-rows transition, no magic max-height (never clips) */
.card__detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease-in-out),opacity var(--dur-slow) var(--ease-in-out),margin var(--dur-slow);
  opacity:0;
}
.card__detail > .card__detail-inner{overflow:hidden;min-height:0}
.card.is-open .card__detail{grid-template-rows:1fr;opacity:1;margin-top:.9rem}
.detail-block{margin-bottom:.9rem}
.detail-block:last-child{margin-bottom:0}
.detail-block h4{
  font-family:var(--sw-font-sans);font-size:var(--fs-xxs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sw-text-3);margin-bottom:.3rem;
}
.detail-block p,.detail-block li{font-size:var(--fs-sm);line-height:1.6;color:var(--sw-text-2)}
.detail-block ul{display:flex;flex-direction:column;gap:.4rem}
.detail-block li{padding-left:1rem;position:relative}
.detail-block li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--sw-ember)}
.detail-swim strong{color:var(--sw-text);font-weight:600}
.detail-rig{font-family:var(--sw-font-mono);font-size:var(--fs-xs);color:var(--sw-text-2)}
.detail-hazard{display:flex;gap:.5rem;align-items:flex-start;color:var(--sw-peach)}
.detail-hazard svg{flex:0 0 auto;margin-top:.15rem;color:var(--sw-warn)}
.detail-conditions{
  background:var(--sw-surface-3);border-radius:var(--r-xs);padding:.7rem .8rem;
  border-left:3px solid var(--sw-ember);
}

/* mini seasonal strip inside card */
.mini-season{display:flex;gap:3px;flex-wrap:wrap}
.mini-cell{
  flex:1 1 0;min-width:18px;text-align:center;font-size:9px;font-weight:600;
  padding:3px 0;border-radius:3px;color:var(--sw-text-3);background:var(--sw-surface-3);
  text-transform:uppercase;letter-spacing:.02em;
}
.mini-cell--prime{background:var(--sw-good-soft);color:var(--sw-good)}
.mini-cell--good{background:var(--sw-good-2-soft);color:var(--sw-good-2)}
.mini-cell--fair{background:var(--sw-warn-soft);color:var(--sw-peach)}
.mini-cell--slow{background:var(--sw-surface-3);color:var(--sw-text-3)}

.empty-state{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  color:var(--sw-text-3);text-align:center;padding:var(--s-8) 0;
}
.empty-state svg{color:var(--sw-text-4)}
.empty-state p{font-size:var(--fs-lead)}
.link-btn{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  color:var(--sw-ember);font:inherit;text-decoration:underline;
}
.link-btn:hover{color:var(--sw-coral)}

/* ===================== DRIVE-TIME MAP ===================== */
.map-figure{margin:var(--s-5) 0 0;display:flex;flex-direction:column;align-items:center}
.map-holder{width:100%;display:flex;justify-content:center;position:relative;min-height:60px}
.map-holder svg{width:100%;max-width:480px;height:auto}
.map-svg text{font-family:var(--sw-font-sans)}
.map-svg .ring-val{font-family:var(--sw-font-mono);paint-order:stroke;stroke:var(--sw-bg);stroke-width:2px}
.map-svg .compass{font-size:11px;font-weight:600;letter-spacing:.12em}
.map-svg .spot-grp{cursor:pointer}
.map-svg .spot-grp .focus-ring{opacity:0}
.map-svg .spot-grp:focus-visible{outline:none}
.map-svg .spot-grp:focus-visible .focus-ring{opacity:1}
.map-svg .spot-num{font-size:10px;font-weight:700;fill:var(--sw-bg);paint-order:stroke}
.map-svg .spot-label{font-size:11px;fill:var(--sw-text-3);paint-order:stroke;stroke:var(--sw-bg);stroke-width:2.4px}
.map-svg .dot-halo{opacity:0;transition:opacity var(--dur)}
.map-svg .spot-grp.is-selected .dot-halo{opacity:1}
.map-svg .spot-grp.is-hidden{display:none}
.map-svg.is-empty .spot-grp{display:none}

.map-empty{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:var(--fs-sm);color:var(--sw-text-3);text-align:center;
  background:var(--sw-surface-2);border:var(--el-1-bd);border-radius:var(--r-sm);
  padding:.6rem .9rem;z-index:5;
}

.map-legend{margin-top:var(--s-5);width:100%;max-width:480px}
.legend-list{display:flex;gap:var(--s-5);flex-wrap:wrap;justify-content:center;margin-bottom:.6rem}
.legend-list li{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--sw-text-2)}
.legend-swatch{width:11px;height:11px;border-radius:50%;display:inline-block}
.legend-swatch--t1{background:var(--sw-tier1)}
.legend-swatch--t2{background:var(--sw-tier2)}
.legend-swatch--t3{background:var(--sw-tier3)}
.legend-key{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.3rem var(--s-5);margin:0 auto var(--s-4);max-width:480px;
}
.legend-key li{display:flex;align-items:baseline;gap:.5rem;font-size:var(--fs-xs);color:var(--sw-text-3)}
.legend-key .key-num{
  flex:0 0 auto;font-family:var(--sw-font-mono);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--sw-text-2);min-width:1.4ch;text-align:right;
}
.legend-note{color:var(--sw-text-3);text-align:center}

/* map tooltip (HTML overlay) */
.map-tooltip{
  position:absolute;z-index:10;pointer-events:none;
  background:var(--sw-surface-2);border:var(--el-2-bd);border-radius:var(--r-sm);
  box-shadow:var(--el-pop-shadow);padding:.5rem .7rem;max-width:220px;
  opacity:0;transform:translateY(4px);transition:opacity var(--dur),transform var(--dur);
}
.map-tooltip.is-visible{opacity:1;transform:none}
.map-tooltip .tt-name{font-family:var(--sw-font-serif);font-weight:500;font-size:var(--fs-sm);color:var(--sw-text);display:block;margin-bottom:2px}
.map-tooltip .tt-meta{font-size:var(--fs-xs);color:var(--sw-text-3);font-variant-numeric:tabular-nums}

/* bigger SVG text on small screens so labels stay legible */
@media (max-width:559px){
  .map-svg .compass{font-size:15px}
  .map-svg .ring-val{font-size:14px}
  .map-svg .spot-label{font-size:14px}
  .map-svg .spot-num{font-size:12px}
}

/* ===================== PANELS (regs) ===================== */
.panel{
  background:var(--sw-surface);border:var(--el-1-bd);border-radius:var(--r-md);
  padding:var(--s-6);max-width:860px;
}
.panel__title{
  display:flex;align-items:center;gap:.6rem;font-size:var(--fs-h2);color:var(--sw-text);
  margin-bottom:var(--s-4);
}
.panel__title svg{color:var(--sw-peach);flex:0 0 auto}
.panel__lead{font-size:var(--fs-body);line-height:1.7;color:var(--sw-text-2);margin-bottom:var(--s-4);max-width:68ch}
.reg-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:var(--s-5)}
.reg-list li{
  position:relative;padding-left:1.3rem;font-size:var(--fs-sm);line-height:1.6;color:var(--sw-text-2);
}
.reg-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--sw-ember)}
.reg-list strong,.detail-block strong{color:var(--sw-text)}

.callout{display:flex;gap:.7rem;align-items:flex-start;border-radius:var(--r-sm);padding:.9rem 1rem}
.callout svg{flex:0 0 auto;margin-top:.15rem}
.callout p{font-size:var(--fs-sm);line-height:1.6}
.callout--warn{background:var(--sw-warn-soft);color:var(--sw-peach)}
.callout--warn strong{color:var(--sw-peach)}

/* ===================== SEASONAL CALENDAR ===================== */
.calendar-scroll{
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:.6rem;margin-top:var(--s-5);
  scrollbar-width:thin;scrollbar-color:var(--sw-surface-3) transparent;
}
.calendar-scroll::-webkit-scrollbar{height:8px}
.calendar-scroll::-webkit-scrollbar-track{background:transparent}
.calendar-scroll::-webkit-scrollbar-thumb{background:var(--sw-surface-3);border-radius:var(--r-pill)}
.calendar-scroll::-webkit-scrollbar-thumb:hover{background:var(--sw-water)}
.calendar{display:grid;grid-template-columns:repeat(12,minmax(64px,1fr));gap:6px;min-width:760px}
.cal-month{
  scroll-snap-align:start;border-radius:var(--r-xs);padding:.6rem .3rem;text-align:center;
  border:.5px solid var(--sw-line);background:var(--sw-surface);
}
.cal-month.is-current{border-top:2px solid var(--sw-peach)}
.cal-month .cal-bar{height:8px;border-radius:var(--r-pill);margin:0 auto .45rem;width:80%}
.cal-month--prime .cal-bar{background:var(--sw-good)}
.cal-month--good .cal-bar{background:var(--sw-good-2)}
.cal-month--fair .cal-bar{background:var(--sw-peach)}
.cal-month--slow .cal-bar{background:var(--sw-water)}
.cal-month .cal-name{font-size:var(--fs-xs);font-weight:600;color:var(--sw-text-2);font-variant-numeric:tabular-nums}
.cal-month .cal-rate{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--sw-text-3);margin-top:2px}
.cal-month.is-current .cal-name{color:var(--sw-peach)}
.cal-caret{color:var(--sw-peach);font-size:10px;line-height:1;display:block;margin-bottom:1px}

.calendar-legend{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-4)}
.calendar-legend li{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);color:var(--sw-text-2)}
.cal-key{width:14px;height:8px;border-radius:var(--r-pill);display:inline-block}
.cal-key--prime{background:var(--sw-good)}
.cal-key--good{background:var(--sw-good-2)}
.cal-key--fair{background:var(--sw-peach)}
.cal-key--slow{background:var(--sw-water)}
.calendar-detail{
  margin-top:var(--s-4);font-size:var(--fs-sm);line-height:1.65;color:var(--sw-text-2);
  background:var(--sw-surface);border:var(--el-1-bd);border-radius:var(--r-md);
  padding:1rem 1.2rem;border-left:3px solid var(--sw-peach);max-width:68ch;
}
.calendar-detail strong{color:var(--sw-peach)}

/* ===================== TACTICS / GEAR ===================== */
.tactics-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-5);margin-top:var(--s-5);
}
.tactic-card{
  background:var(--sw-surface);border:var(--el-1-bd);border-radius:var(--r-md);padding:1.2rem 1.3rem;
  transition:border-color var(--dur);
}
.tactic-card:hover{border-color:var(--sw-line-2)}
.tactic-card h3{
  display:flex;align-items:center;gap:.6rem;font-size:var(--fs-h3);font-weight:500;
  color:var(--sw-text);margin-bottom:.6rem;
}
.tactic-card h3 svg{color:var(--sw-peach);flex:0 0 auto}
.tactic-card p{font-size:var(--fs-body);line-height:1.7;color:var(--sw-text-2)}

.gear-pullquote{display:flex;gap:.9rem;align-items:flex-start;margin:var(--s-7) 0;max-width:760px}
.pq-marker{flex:0 0 auto;width:14px;height:14px;border-radius:3px;background:var(--sw-ember);margin-top:.55rem}
.gear-pullquote blockquote{
  margin:0;font-family:var(--sw-font-serif);font-style:italic;font-weight:400;
  font-size:var(--fs-lead);line-height:1.5;color:var(--sw-text);
}

.gear-panel{
  background:var(--sw-surface);border:var(--el-1-bd);border-radius:var(--r-md);
  padding:var(--s-6);margin-top:var(--s-5);
}
.gear-panel__title{
  display:flex;align-items:center;gap:.6rem;font-size:var(--fs-h2);font-weight:600;
  color:var(--sw-text);margin-bottom:var(--s-4);
}
.gear-panel__title svg{color:var(--sw-peach);flex:0 0 auto}
.gear-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem var(--s-5);
}
.gear-list li{
  position:relative;padding-left:1.4rem;font-size:var(--fs-sm);line-height:1.6;color:var(--sw-text-2);
}
.gear-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:var(--sw-coral);transform:rotate(45deg);
}
.gear-list--etiquette li::before{border-radius:50%;background:var(--sw-good);transform:none}
.gear-list strong{color:var(--sw-text)}

/* ===================== FAQ ===================== */
.faq{margin-top:var(--s-5)}
.faq details{border-bottom:.5px solid var(--sw-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1rem 2.2rem 1.1rem 0;position:relative;
  font-family:var(--sw-font-serif);font-weight:500;font-size:1.05rem;color:var(--sw-text);
  line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.3rem;top:1.35rem;width:11px;height:11px;
  border-right:1.8px solid var(--sw-text-3);border-bottom:1.8px solid var(--sw-text-3);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.55rem}
.faq summary:hover{color:var(--sw-peach)}
.faq .faq-a{padding:0 2.2rem 1.2rem 0;font-size:var(--fs-sm);line-height:1.7;color:var(--sw-text-2);max-width:68ch}

/* ===================== FOOTER ===================== */
.footer{background:var(--sw-surface);border-top:.5px solid var(--sw-line);margin-top:var(--s-8);padding-block:var(--s-7)}
.footer__horizon{height:2px;background:linear-gradient(90deg,transparent,var(--sw-ember),transparent);margin-bottom:var(--s-6);opacity:.6}
.footer__grid{display:flex;flex-wrap:wrap;gap:var(--s-6);justify-content:space-between;align-items:flex-start}
.footer__wordmark{font-family:var(--sw-font-serif);font-weight:500;font-size:1.4rem;color:var(--sw-peach)}
.footer__tag{font-family:var(--sw-font-serif);font-style:italic;color:var(--sw-text-3);font-size:var(--fs-sm)}
.footer__nav{display:flex;gap:var(--s-5);flex-wrap:wrap}
.footer__nav a{color:var(--sw-text-3);font-size:var(--fs-sm)}
.footer__nav a:hover{color:var(--sw-ember)}
.footer__fine{margin-top:var(--s-6);font-size:var(--fs-xs);line-height:1.6;color:var(--sw-text-3);max-width:80ch} /* trust copy = readable */

/* ===================== RESPONSIVE FILTER BAR ===================== */
@media (max-width:880px){
  .filterbar__toggle{
    display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
    height:40px;padding:0 .9rem;background:var(--sw-surface-3);color:var(--sw-text-2);
    border:1px solid var(--sw-line);border-radius:var(--r-xs);cursor:pointer;
    font-size:var(--fs-sm);font-weight:500;
  }
  .filterbar__controls{
    flex-basis:100%;flex-direction:column;align-items:stretch;gap:var(--s-4);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height var(--dur) var(--ease-out),opacity var(--dur),margin var(--dur);
  }
  .filterbar__controls.is-open{max-height:640px;opacity:1;margin-top:var(--s-3)}
  .control-group{flex-wrap:wrap}
}
@media (max-width:559px){
  .fpill,.seg{min-height:44px}
  .filterbar__toggle{min-height:44px}
  .reset-btn{min-height:44px}
}

/* ===================== MOTION GUARD ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .hero__eyebrow,.hero__title,.hero__tagline,.hero__intro,.hero__cue{opacity:1;transform:none}
}
html{scroll-behavior:smooth}