/* ============================================================
   BASE TOKENS
   Layout & type use rem (honors the browser's default size / zoom).
   Hairline borders & dot swatches stay px — sub-pixel rem blurs them.

   Fonts: local-only by design (this runs on the author's machine).
     - Display  -> Palatino / Palladio  (humanist serif, for the wordmark)
     - Text/UI  -> Optima                (humanist sans, everything else)
   ============================================================ */
:root{
  /* Palette */
  --sand:        #ECE4D4;
  --sand-deep:   #DDD0B6;
  --clay:        #B5502F;
  --clay-dim:    #8C4326;
  --agave-green: #4B5E3C;
  --agave-dark:  #2E3B24;
  --ink:         #24211B;
  --ink-soft:    #55503F;
  --paper:       #F7F3E9;
  --line:        rgba(36,33,27,0.14);
  --sky:         #C9D6C4;
  /* Translucent panel fill for the glass sidebar (theme-overridden below) */
  --glass:       rgba(247,243,233,0.82);

  /* Fonts */
  --font-display: 'Palatino', 'Palatino Linotype', 'Book Antiqua', 'Palladio', serif;
  --font-text:    'Optima', 'Segoe UI', Candara, 'Noto Sans', sans-serif;

  /* Spacing scale (rem) */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.375rem;  /* 22px */
  --space-6: 1.625rem;  /* 26px */
  --space-7: 2rem;      /* 32px */

  /* Type scale (rem) — harmonized, one consistent rhythm */
  --fs-eyebrow: 0.6875rem;  /* 11px — section labels */
  --fs-meta:    0.75rem;    /* 12px — counts, stats caption, buttons */
  --fs-body:    0.875rem;   /* 14px — species & record rows, search */
  --fs-brand:   1.5rem;     /* 24px — wordmark */
  --fs-stat:    1.125rem;   /* 18px — stat numbers */

  /* Radii (rem) */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pill: 1.25rem;

  /* Component sizing (rem / relative) */
  --sidebar-min:  16rem;              /* lower bound when dragging / narrow screens */
  --sidebar-max:  24rem;              /* upper bound when dragging */
  --sidebar-w:    clamp(var(--sidebar-min), 26vw, var(--sidebar-max));
  --sidebar-gap:  0.875rem;           /* inset from viewport edges when floating */
  --toggle-sz:    2.25rem;            /* hamburger button */
  --sheet-peek:   4.5rem;             /* how much of the bottom sheet peeks when closed (mobile) */
}
/* JS writes --sidebar-w-user when the user drags the resize handle; it wins
   over the default clamp above but is itself clamped to the same min/max. */
body.has-custom-width{
  --sidebar-w: clamp(var(--sidebar-min), var(--sidebar-w-user), var(--sidebar-max));
}

/* ---------- Theme overrides ---------- */
body.theme-dark{
  --sand:#12141A; --sand-deep:#1C1F27; --clay:#FF6B4A; --clay-dim:#D9503A;
  --agave-green:#6FE3A8; --agave-dark:#FFECB3; --ink:#E8E6DD; --ink-soft:#8B8F9C;
  --paper:#171A21; --line:rgba(232,230,221,0.12); --sky:#0B0D12;
  --glass:rgba(23,26,33,0.80);
}
body.theme-hillshade{
  --sand:#E4E4E0; --sand-deep:#D2D2CC; --clay:#C9502F; --clay-dim:#A03F26;
  --agave-green:#3A6B4A; --agave-dark:#26432E; --ink:#202020; --ink-soft:#6A6A66;
  --paper:#FAFAF8; --line:rgba(32,32,32,0.14); --sky:#B8B8B2;
  --glass:rgba(250,250,248,0.82);
}
body.theme-dark-hillshade{
  --sand:#1A1C1E; --sand-deep:#26292C; --clay:#FF7A52; --clay-dim:#D9603D;
  --agave-green:#7FE8B0; --agave-dark:#FFECB3; --ink:#E8E8E6; --ink-soft:#8E9296;
  --paper:#1F2224; --line:rgba(232,232,230,0.12); --sky:#101214;
  --glass:rgba(31,34,36,0.80);
}

/* ============================================================
   RESET / ROOT
   ============================================================ */
*{ box-sizing: border-box; }

html{ font-size: 100%; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-text);
  overflow: hidden;
}

aside, .sidebar-toggle, .leaflet-popup-content-wrapper, .leaflet-popup-tip{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

::-webkit-scrollbar{ width: 7px; }
::-webkit-scrollbar-thumb{ background: var(--sand-deep); border-radius: var(--radius-sm); }
::-webkit-scrollbar-track{ background: transparent; }

/* ============================================================
   LAYOUT — DESKTOP (default)
   Map fills the viewport; sidebar floats above it as a glass panel.
   Collapsing never resizes the map.
   ============================================================ */
.layout{ height: 100%; }

#map{
  position: absolute;
  inset: 0;
  background: var(--sky);
}

/* ---------- Floating sidebar (glass overlay) ---------- */
aside{
  position: absolute;
  top: var(--sidebar-gap);
  left: var(--sidebar-gap);
  bottom: var(--sidebar-gap);
  width: var(--sidebar-w);
  z-index: 1000;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(20,18,14,0.16);
  overflow: hidden;
  transition: transform .26s ease, opacity .2s ease;
}
/* Collapse: slide the panel out to the left and fade it; map is untouched */
aside.collapsed{
  transform: translateX(calc(-100% - var(--sidebar-gap) - 0.5rem));
  opacity: 0;
  pointer-events: none;
}
/* Fixed-height flex column: top + bottom stay put, only the middle list scrolls */
.sidebar-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0 var(--space-5);
}
.sidebar-top{ flex-shrink: 0; }
.filter-block--species{ margin-bottom: var(--space-3); }
.sidebar-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-5);
}

/* ---------- Resize handle (desktop): drag the right edge to set width ---------- */
.resize-handle{
  position: absolute;
  top: 0;
  right: -3px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 1001;
  /* invisible hit area; a faint line shows on hover */
}
.resize-handle::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 2px;
  height: 2.5rem;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--line);
  opacity: 0;
  transition: opacity .15s;
}
.resize-handle:hover::after{ opacity: 1; background: var(--clay); }
body.resizing{ cursor: col-resize; user-select: none; }
body.resizing aside{ transition: none; }   /* no lag while dragging */

/* ---------- Hamburger / close toggle (fixed top-left) ---------- */
.sidebar-toggle{
  position: fixed;
  top: var(--sidebar-gap);
  /* Sits just outside the sidebar's right edge, vertically at the top */
  left: calc(var(--sidebar-gap) + var(--sidebar-w) + var(--sidebar-gap));
  z-index: 1100;
  width: var(--toggle-sz);
  height: var(--toggle-sz);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,18,14,0.18);
  transition: left .26s ease, border-color .15s, color .15s, background-color .25s;
}
.sidebar-toggle:hover{ border-color: var(--clay); color: var(--clay); }
/* Icon swap: show ✕ when open, ☰ when collapsed */
.sidebar-toggle .icon-open{ display: none; }
.sidebar-toggle .icon-close{ display: block; }
body.sidebar-collapsed .sidebar-toggle .icon-open{ display: block; }
body.sidebar-collapsed .sidebar-toggle .icon-close{ display: none; }
/* When collapsed, park the button at the far top-left */
body.sidebar-collapsed .sidebar-toggle{ left: var(--sidebar-gap); }

/* Mobile-only bits hidden on desktop */
.sheet-grabber{ display: none; }

/* ============================================================
   LAYOUT — MOBILE (bottom sheet)
   Below 40rem the panel becomes a bottom sheet: map is full-screen,
   the panel rises from the bottom and can be opened / closed.
   ============================================================ */
@media (max-width: 40rem){
  aside{
    /* Full width, pinned to the bottom, rounded only on top */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -6px 28px rgba(20,18,14,0.20);
    /* Closed state peeks just enough to show the grabber + brand */
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  /* Open state: sheet slides up to reveal content */
  body.sheet-open aside{ transform: translateY(0); }
  /* The desktop "collapsed" class shouldn't apply its horizontal slide on mobile */
  aside.collapsed{ transform: translateY(calc(100% - var(--sheet-peek))); opacity: 1; pointer-events: auto; }
  body.sheet-open aside.collapsed{ transform: translateY(0); }

  .sidebar-inner{ padding-top: var(--space-2); }

  /* Grabber: the little pill at the top of the sheet; tap or drag to toggle */
  .sheet-grabber{
    display: block;
    width: 2.25rem;
    height: 0.3125rem;
    margin: var(--space-2) auto var(--space-3);
    border-radius: 3px;
    background: var(--ink-soft);
    opacity: .4;
    cursor: grab;
    flex-shrink: 0;
  }

  /* On mobile the hamburger isn't needed (the grabber controls the sheet) */
  .sidebar-toggle{ display: none; }
  /* Resizing is a desktop affordance only */
  .resize-handle{ display: none; }

  /* Let the sheet grow with content up to max-height */
  .sidebar-scroll{ max-height: 46vh; }
}

/* ============================================================
   SIDEBAR CONTENT
   ============================================================ */
.brand{ padding: 0 var(--space-5) var(--space-5); }
.brand .mark{
  font-family: var(--font-display);
  font-weight:600;
  font-size: var(--fs-brand);
  letter-spacing: -0.005em;
  color: var(--agave-dark);
  line-height: 1.05;
}
.brand .mark em{ font-style: italic; color: var(--clay); }
.brand .sub{
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-top: var(--space-2);
}

/* ---------- Filter blocks ---------- */
.filter-block{
  padding: 0 var(--space-5);
  margin-bottom: var(--space-6);
}
.filter-block label{
  display:block;
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.panel-title{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: var(--space-3);
}
.panel-title label{ margin-bottom: 0; }
.panel-title button{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.panel-title button:hover{ border-color: var(--clay); color: var(--clay); }

/* ---------- Collapsible sections (Basemap / Record type / Species) ---------- */
/* Header row: label on the left, chevron (and any actions) on the right */
.section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  cursor: default;
}
.section-head label{ margin-bottom: 0; }
.section-head-actions{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}
.section-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.section-toggle:hover{ color: var(--clay); background: var(--sand-deep); }
.section-toggle svg{ transition: transform .2s ease; }
/* Chevron points down when expanded; rotate to point up when collapsed */
.filter-block.collapsed .section-toggle svg{ transform: rotate(180deg); }

/* Collapse the body: it animates closed and stops taking layout space */
.section-body{
  overflow: hidden;
  max-height: 20rem;           /* generous cap; content is always shorter */
  opacity: 1;
  transition: max-height .24s ease, opacity .18s ease, margin .24s ease;
}
.filter-block.collapsed .section-body{
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* Collapsed sections tighten up: less space below the block and below the header */
.filter-block.collapsed{ margin-bottom: var(--space-3); }
.filter-block.collapsed .section-head{ margin-bottom: 0; }

/* ---------- Build-output missing notice ----------
   Shown by app.js when web/data.js hasn't been generated yet (fresh clone). */
.build-missing{
  max-width: 34rem;
  margin: 12vh auto;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--font-text);
  color: var(--ink);
}
.build-missing h1{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 var(--space-3);
}
.build-missing p{
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.build-missing pre{
  font-size: var(--fs-meta);
  line-height: 1.6;
  background: var(--sand-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
  overflow-x: auto;
}
.build-missing p:last-child{ margin-bottom: 0; }

/* ---------- Segmented control (basemap = single-select) ---------- */
.segmented{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.segmented-btn{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  padding: var(--space-2);
  background: var(--sand-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.segmented-btn:hover{ color: var(--ink); }
.segmented-btn.active{ background: var(--agave-dark); color: var(--paper); }

/* ---------- Elevation range (dual-handle slider) ----------
   Two native range inputs are overlaid on one custom track. The inputs themselves
   are pointer-events:none — only their thumbs take the pointer — so both handles
   stay independently draggable. Stacking order between colliding thumbs is set
   inline from JS (see paintElevation in app.js). */
.elev-range{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.elev-input{
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-text);
  font-size: var(--fs-meta);   /* same scale as the basemap segmented buttons */
  padding: var(--space-2);
  background: var(--sand-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  text-align: center;
  transition: all .15s;
  appearance: textfield;
  -moz-appearance: textfield;
}
/* the number spinner eats horizontal room in a narrow sidebar — hide it */
.elev-input::-webkit-outer-spin-button,
.elev-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.elev-input:focus{ border-color: var(--clay); background: var(--paper); }
.elev-unit,
.elev-dash{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

.elev-slider{
  position: relative;
  height: 1.5rem;
  /* inset by half a thumb so the end handles are not clipped by the
     overflow:hidden that .section-body uses for its collapse animation */
  margin: 0 0.4375rem;
  touch-action: none;   /* let the thumb drag without scrolling the sidebar */
}
.elev-track{
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -0.09375rem;   /* half of 3px */
  background: var(--sand-deep);   /* one flat colour — no selected-range fill */
  border-radius: 2px;
}
.elev-range-input{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  z-index: 3;
}
.elev-range-input:focus{ outline: none; }
.elev-range-input::-webkit-slider-runnable-track{
  height: 1.5rem;
  background: transparent;
  border: none;
}
.elev-range-input::-moz-range-track{
  height: 1.5rem;
  background: transparent;
  border: none;
}
.elev-range-input::-webkit-slider-thumb{
  -webkit-appearance: none;
  pointer-events: auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.3125rem;   /* centres the 14px thumb in the 24px track */
  border-radius: 50%;
  background: var(--agave-dark);   /* same token as an active segmented button */
  border: 2px solid var(--paper);
  cursor: grab;
}
.elev-range-input::-moz-range-thumb{
  pointer-events: auto;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--agave-dark);
  border: 2px solid var(--paper);
  cursor: grab;
}
.elev-range-input:active::-webkit-slider-thumb{ cursor: grabbing; }
.elev-range-input:active::-moz-range-thumb{ cursor: grabbing; }
/* The input's own outline is suppressed, so show focus on the thumb instead */
.elev-range-input:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px rgba(181,80,47,0.38);
}
.elev-range-input:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 3px rgba(181,80,47,0.38);
}

.elev-note{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: var(--space-1);
}
.elev-note:empty{ display: none; }

/* ---------- Species search ---------- */
.search-block{ position: relative; margin-bottom: var(--space-2); }
.search-icon{
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}
.search-input{
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  padding: var(--space-2) var(--space-3) var(--space-2) 1.875rem;
  background: var(--sand-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  outline: none;
  transition: all .15s;
}
.search-input::placeholder{ color: var(--ink-soft); }
.search-input:focus{ border-color: var(--clay); background: var(--paper); }

.species-empty{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  padding: var(--space-3) 0.125rem var(--space-1);
}

/* ---------- Species rows ---------- */
.species-row{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .12s, opacity .12s;
}
.species-row:hover{ background: var(--sand-deep); }
.species-row:not(.active){ opacity: .38; }
.swatch{
  width: 10px; height: 10px;   /* px: crisp dot */
  border-radius: 50%;
  flex-shrink:0;
}
.species-name{
  flex:1;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--ink);
  line-height:1.3;
}
.species-count{
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

/* ---------- Stats ---------- */
.stats-strip{
  flex-shrink: 0;
  margin-top: var(--space-4);
  display:flex;
  justify-content: space-between;   /* spread the three stats across the width */
  gap: var(--space-3);
  padding: 0 var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.stats-strip > div{
  flex: 1;                          /* equal share each */
  text-align: center;
}
.stats-strip > div:first-child{ text-align: left; }
.stats-strip > div:last-child{ text-align: right; }
.stats-strip b{
  color: var(--agave-dark);
  font-size: var(--fs-stat);
  font-family: var(--font-display);
  font-weight: 600;
  display:block;
  margin-bottom: 0.125rem;
}

/* ============================================================
   MAP POPUPS
   ============================================================ */
.leaflet-container{
  font-family: var(--font-text);
  background: #DCE5D6 !important;
}
.leaflet-popup-content-wrapper{
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(46,59,36,0.25);
}
.leaflet-popup-tip{ background: var(--paper); }
.popup-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--agave-dark);
  margin: 0 0 var(--space-2);
}
.popup-row{
  font-family: var(--font-text);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0.125rem 0;
  display:flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.popup-row b{ color: var(--ink); font-weight:600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 45rem){
  :root{ --sidebar-w: calc(100vw - 2 * var(--sidebar-gap)); }
}