/* ============================================================
   float-explorer.css -- styles for the shared Float Explorer
   (float-explorer.js). Used by the homepage river cards AND the
   /rivers/<slug>/ guide pages, so every colour uses a token with a
   hard fallback (the two pages name their tokens differently).

   Layout model: ONE component, a media query flips the panel.
     >=761px  .fx--overlay : panel floats over the map, top-right,
              collapsible; map auto-pans the route clear of it.
     <=760px  .fx--stack   : panel drops below the map as a block;
              selection auto-scrolls it into view.
   ============================================================ */
.fx {
  --fx-ink:    var(--ink, #1a1812);
  --fx-ink2:   var(--ink-2, #3a3c2e);
  --fx-ink3:   var(--ink-3, #6a665a);
  --fx-rule:   var(--rule, #d9d2c1);
  --fx-surf:   var(--surface, #fffef9);
  --fx-surf2:  var(--surface-2, #faf6ea);
  --fx-accent: var(--accent, #2f5d3b);
  --fx-copper: var(--copper, #b8531a);
  font-family: 'Inter Tight', system-ui, sans-serif;
  color: var(--fx-ink);
}

/* ---- toolbar: preset chips + the distinct Build button ---- */
.fx-toolbar {
  display: flex; gap: 12px; align-items: stretch;
  flex-wrap: wrap; margin-bottom: 12px;
}
.fx-chips {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 60%; min-width: 0; align-content: flex-start;
}
.fx-chip {
  font-family: 'Inter Tight', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fx-rule); background: var(--fx-surf); color: var(--fx-ink2);
  transition: background .15s, border-color .15s, color .15s;
}
.fx-chip:hover { border-color: var(--fx-ink); }
.fx-chip.active { background: var(--fx-ink); border-color: var(--fx-ink); color: #fff; }

/* Build-Your-Float gets a payoff label, not just another chip. */
.fx-build {
  flex: 0 0 auto; text-align: left; cursor: pointer;
  border: 1.5px dashed var(--fx-copper); border-radius: 12px;
  background: linear-gradient(135deg, rgba(184,83,26,.07), rgba(184,83,26,.02));
  padding: 8px 16px; color: var(--fx-copper);
  display: flex; flex-direction: column; gap: 1px;
  transition: background .15s, box-shadow .15s;
}
.fx-build:hover { background: rgba(184,83,26,.12); }
.fx-build.on {
  border-style: solid; color: #fff; background: var(--fx-copper);
  box-shadow: 0 2px 10px rgba(184,83,26,.3);
}
.fx-build-k { font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; }
.fx-build-sub { font-size: 11px; font-weight: 500; opacity: .85; }
.fx-build.on .fx-build-sub { opacity: .95; }

/* ---- stage: map + panel ---- */
.fx-stage { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-1, 0 2px 8px rgba(20,18,12,.06)); }
.fx-map { width: 100%; height: 440px; background: var(--fx-surf2); }
.fx-map .leaflet-container { background: var(--fx-surf2); font: inherit; }

/* ---- detail panel ---- */
.fx-panel {
  background: var(--fx-surf); border: 1px solid var(--fx-rule); border-radius: 12px;
  padding: 16px 18px 18px; position: relative;
}
.fx-panel[hidden] { display: none; }
.fx-panel-x {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--fx-ink3);
}
.fx-panel-x:hover { color: var(--fx-ink); }

.fx-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fx-accent); margin-bottom: 6px;
}
.fx-eyebrow.build { color: var(--fx-copper); }
.fx-route {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 21px; line-height: 1.15;
  margin: 0 0 6px; color: var(--fx-ink); letter-spacing: -.01em;
}
.fx-route span { color: var(--fx-copper); font-weight: 400; }
.fx-detail { font-size: 13.5px; line-height: 1.55; color: var(--fx-ink2); margin: 0 0 12px; }

.fx-stats { display: flex; gap: 18px; margin: 0 0 14px; padding: 10px 0; border-top: 1px solid var(--fx-rule); border-bottom: 1px solid var(--fx-rule); }
.fx-stats div { display: flex; flex-direction: column; }
.fx-stats b { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--fx-ink); line-height: 1; }
.fx-stats span { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-ink3); margin-top: 4px; }
.fx-estnote { font-size: 11px; line-height: 1.45; color: var(--fx-ink3); font-style: italic; margin: -4px 0 14px; }

.fx-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fx-links a {
  font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 6px; text-decoration: none;
  background: var(--fx-accent); color: #fff;
}
.fx-links a + a { background: var(--fx-surf2); color: var(--fx-accent); border: 1px solid var(--fx-rule); }
.fx-links a:hover { filter: brightness(1.06); }

/* Live-GPS (Float Mode) CTA in the detail panel - contextual to the chosen
   trip. Forest-green to read as a distinct 'go do it on the water' action. */
.fx-livegps {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #1e3a2a, #2d5642); color: #fff;
  border: 1px solid rgba(168,200,144,.4);
}
.fx-livegps:hover { filter: brightness(1.07); }
.fx-livegps svg { width: 20px; height: 20px; flex-shrink: 0; color: #a8c890; }
.fx-lg-t { font-family: 'Fraunces', serif; font-weight: 700; font-size: 14.5px; line-height: 1.1; }
.fx-lg-s { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .03em; opacity: .82; line-height: 1.2; margin-top: 2px; }
.fx-livegps span { display: block; }

/* Clear / start-over control for build mode (a tidy way to drop the current
   built route or first-picked put-in and start a fresh selection). */
.fx-clear {
  margin-top: 14px; width: 100%;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  background: var(--fx-surf2); color: var(--fx-copper); border: 1px solid var(--fx-copper);
  transition: background .15s, color .15s;
}
.fx-clear:hover { background: var(--fx-copper); color: #fff; }

.fx-block { margin-top: 12px; }
.fx-block-k { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fx-ink3); margin-bottom: 7px; }
.fx-outs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.fx-out { font-size: 13.5px; font-weight: 600; color: var(--fx-ink); text-decoration: none; }
a.fx-out { color: var(--fx-copper); text-decoration: underline; }
.fx-tier { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-ink3); }
.fx-muted { font-size: 12.5px; font-style: italic; color: var(--fx-ink3); }

.fx-accs { display: flex; flex-direction: column; gap: 4px; }
.fx-acc { font-size: 13px; color: var(--fx-ink2); text-decoration: none; display: flex; align-items: center; gap: 7px; }
.fx-acc:hover { color: var(--fx-ink); }
.fx-acc em { font-style: normal; font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-copper); }

.fx-legend { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fx-ink3); }
.fx-legend span { display: flex; align-items: center; gap: 7px; }

.adot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px #fff; }
.adot.pub  { background: #2f7d32; }
.adot.out  { background: #b8530a; }
.adot.both { background: #2f7d32; box-shadow: 0 0 0 2px #b8530a; }

/* ---- DESKTOP: panel floats over the map, top-right, collapsible ---- */
.fx--overlay .fx-panel {
  position: absolute; top: 14px; right: 14px; width: 320px; max-width: 42%;
  max-height: calc(100% - 28px); overflow: auto;
  box-shadow: var(--shadow-2, 0 6px 24px rgba(20,18,12,.16));
  z-index: 600;
}
.fx--overlay .fx-stage.fx-collapsed .fx-panel { display: none; }

/* ---- MOBILE: panel stacks below the map as a normal block ---- */
.fx--stack .fx-stage { display: flex; flex-direction: column; }
.fx--stack .fx-map { height: 320px; }
.fx--stack .fx-panel { position: static; width: auto; border-radius: 0 0 12px 12px; border-top: none; }
.fx--stack .fx-panel-x { display: none; }   /* nothing to collapse when stacked */

/* ---- the static trip list becomes a lightweight crawlable fallback
        once the explorer is live (kept in DOM for SEO / no-JS) ---- */
.fx-static-min { margin-top: 14px; }
.fx-static-min > summary {
  cursor: pointer; font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fx-ink3, #6a665a);
  list-style: none; padding: 4px 0;
}
.fx-static-min > summary::-webkit-details-marker { display: none; }
.fx-static-min > summary::before { content: '▸  '; }
.fx-static-min[open] > summary::before { content: '▾  '; }