/* Pacific Reach skin for the Kootenay fish maps.
 * Loaded AFTER each page's inline <style> so it overrides the dark theme.
 * It remaps the shared CSS variables to Pacific Reach tokens (recolouring all
 * chrome that uses var(--…)) and overrides the few hard-coded rules.
 * Data-layer colours (species, barriers) are hard-coded in JS and unaffected. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --bg:#fbf9f4;          /* paper */
  --panel:#ffffff;       /* card surface */
  --panel2:#f5f3ee;      /* bars / containers */
  --line:#c2c8c5;        /* outline-variant */
  --ink:#1b1c19;         /* on-surface */
  --muted:#424846;       /* on-surface-variant */
  --accent:#051b17;      /* evergreen */
  --accent2:#df781c;     /* trout orange / river gold */
  --blue:#4e6073;        /* slate (links) */
  --water:#4e6073;
  --chip:#eae8e3;
  --shadow:0 6px 24px -8px rgba(5,27,23,.18);
}

body {
  background:#fbf9f4 !important;
  color:var(--ink) !important;
  font-family:Inter, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1180px; }

/* slim Field Journal bar */
.fj-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.fj-bar .wm { font-family:'Playfair Display',serif; font-weight:600; font-size:20px; color:var(--ink); text-decoration:none; line-height:1.3; }
.fj-bar .wm span { display:block; font-family:Inter,sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.fj-bar .bk { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); text-decoration:none; font-weight:600; }
.fj-bar .bk:hover { color:var(--accent); }
.fj-bar .fj-links { display:flex; gap:18px; align-items:center; }

/* nav pills -> squared magazine tabs */
.nav a { border-radius:4px !important; background:#fff !important; border-color:var(--line) !important; color:var(--muted) !important; font-weight:600; }
.nav a.on { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }

/* hero -> paper card, Playfair headline */
header.hero {
  background:#ffffff !important; border:1px solid var(--line) !important;
  border-radius:8px !important; box-shadow:none !important;
}
.hero .tag { color:var(--muted) !important; letter-spacing:.05em; }
.hero h1 { font-family:'Playfair Display',serif !important; font-weight:700; letter-spacing:-.01em; }
.hero p { color:var(--muted) !important; }
.hero p b, .hero h1 b { color:var(--ink); }

/* map shell + canvas */
.map-shell { border-radius:8px !important; box-shadow:var(--shadow) !important; background:#fff !important; }
#map { background:#e4e2dd !important; }
.loading { background:#e4e2dd !important; color:var(--muted) !important; }

/* control panels / legends / bars on paper */
.layers, .legend, .map-bar, .bar {
  background:rgba(255,255,255,.96) !important; border-color:var(--line) !important; color:var(--muted) !important;
}
.layers { border-radius:8px !important; }
.layers .lp-title, .hero .tag, .layers .sec { color:var(--accent2) !important; }
.layers .sec { color:var(--muted) !important; }
.layers input, .map-bar input, select { accent-color:var(--accent) !important; }
select { background:#fff !important; border-color:var(--line) !important; color:var(--ink) !important; border-radius:4px !important; }
.bar b, .count b { color:var(--accent2) !important; }

/* numbered/legend dots keep their data colours; just soften the ring.
   :not(.ln) so line swatches (border-top IS the colour) aren't greyed out */
.legend .dot, .pp .dot, .layers .leg i:not(.ln) { border-color:rgba(5,27,23,.18) !important; }

/* notes + links */
.note { color:var(--muted) !important; }
.note code { background:var(--panel2) !important; color:var(--accent) !important; }
.wrap a { color:var(--blue) !important; }
.nav a, .fj-bar .wm, .nav a.on { } /* keep specific colours above */

/* popups on paper */
.maplibregl-popup-content {
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid var(--line) !important; border-radius:6px !important; box-shadow:var(--shadow) !important;
}
.maplibregl-popup-content b { color:var(--accent) !important; }
.maplibregl-popup-tip { border-top-color:#ffffff !important; border-bottom-color:#ffffff !important; }
.pp .w { color:var(--muted) !important; }
.pp .track { background:rgba(5,27,23,.08) !important; }
.pp .barrier-h { color:var(--accent2) !important; }
.maplibregl-ctrl-group { border:1px solid var(--line) !important; border-radius:4px !important; }

/* Touch targets — enlarge tap surfaces to ~44px (Apple HIG) on touch / phones.
   The Layers toggle was 17px tall and the popup × was 9x22px; both far too small. */
@media (pointer:coarse), (max-width:640px) {
  .lp-toggle { min-height:44px; }
  .layers label { min-height:36px; }
  .maplibregl-popup-close-button {
    width:44px !important; height:44px !important; padding:0 !important;
    font-size:22px !important; line-height:44px !important; text-align:center !important;
  }
  .maplibregl-popup-content { padding-right:40px !important; }
  .maplibregl-ctrl-group button { width:40px !important; height:40px !important; }
}