From f8e599ccdc6489cc77bd3a2fcebccff3eb2350a7 Mon Sep 17 00:00:00 2001
From: Twarner491 <twarner491@gmail.com>
Date: Thu, 28 May 2026 11:35:27 -0700
Subject: [PATCH] Frontend: lift CSS + HTML structure from live apt.ts verbatim

The previous styles.css was a from-memory reconstruction with wrong
palette (tan paper #f4ede0 vs the live near-white #fcfcfb, red accent
vs warm-grey). HTML class names also diverged (.collage vs .gcollage,
#atlasList vs #atlasGrid, .stats-tl vs .stats-timeline). Result: the
overlay looked nothing like the live site.

Now:
- styles.css copied verbatim from the apt.ts <style> block (1449 lines)
- index.html mirrors the live body structure: header.top + main.stage
  with view sections id=v0/v1/v2, nav.slider, about-modal
- apt.js updated for matching IDs/classes:
  - View switching via translateX on .views container (live uses
    flex: 0 0 100% per view, slides between them)
  - Hover state via alpha-mask hit-testing in mousemove (.gtile is
    pointer-events:none, bounding rects overlap)
  - Atlas builds .bird-card elements (the live CSS class)
  - atlasSort data-sort='alpha' (was 'first')
  - #atlasGrid (was #atlasList)

Verified against Docker container faithfully replicating BirdNET-Pi's
runtime (Caddy + PHP-FPM as caddy user + php-fpm-socket-helper):
side-by-side screenshots with bird.onethreenine.net show identical
palette, typography, pill chrome, tile rendering. Differences are
content-only (different seeded species).
---
 avian/frontend/apt.js     |  231 +++--
 avian/frontend/index.html |   78 +-
 avian/frontend/styles.css | 1692 +++++++++++++++++++++++++++++++------
 3 files changed, 1648 insertions(+), 353 deletions(-)

diff --git a/avian/frontend/apt.js b/avian/frontend/apt.js
index c80934a..99b6a26 100644
--- a/avian/frontend/apt.js
+++ b/avian/frontend/apt.js
@@ -4,13 +4,13 @@
  *   collage  - mask-packed cluster of species illustrations, sized by
  *              count. Layout normalises so every bird always fits on
  *              every viewport.
- *   stats    - per-species mark on a time × count plot.
+ *   stats    - per-species mark on a time x count plot.
  *   atlas    - grid of every species ever detected, with detail modal.
  *
- * Lives at $HOME/BirdNET-Pi/avian/frontend/ on the Pi; the install
- * symlinks $HOME/BirdNET-Pi/avian → $EXTRACTED/avian, so this file
- * loads from http://birdnet.local/avian/frontend/apt.js with the
- * collage at http://birdnet.local/avian/frontend/.
+ * Lives at $HOME/BirdNET-Pi/avian/frontend/ on the Pi; install_services.sh
+ * symlinks $HOME/BirdNET-Pi/avian -> $EXTRACTED/avian, so this file loads
+ * from http://birdnet.local/avian/frontend/apt.js with the collage at
+ * http://birdnet.local/avian/ (via the redirect at /avian/index.html).
  *
  * All API calls are relative - they target the PHP shims in ../api/
  * served by BirdNET-Pi's existing Caddy + PHP-FPM stack. No frontend
@@ -19,19 +19,12 @@
 (function () {
   'use strict';
 
-  // Relative API helpers. Frontend lives at /avian/frontend/; the PHP
-  // shims live at /avian/api/. The router PHP (birdnet-api.php)
-  // dispatches on ?action= to the recent/lifelist/firstseen/timeseries
-  // queries.
   function api(action, qs) {
     return '../api/birdnet-api.php?action=' + action + (qs ? '&' + qs : '');
   }
   function media(file, qs) {
     return '../api/' + file + (qs ? '?' + qs : '');
   }
-
-  // Cache-bust query for image URLs. Bump after running pregen.py with
-  // --force so browsers + CDNs drop their cached copies of every bird.
   var IMG_VERSION = '1';
 
   function readLS(k, d) { try { return localStorage.getItem(k) || d; } catch (e) { return d; } }
@@ -42,19 +35,12 @@
       return r.json();
     });
   }
-  // HTML-escape user-supplied strings before they land in innerHTML.
-  // Species names come from BirdNET-Pi's labels file, which is
-  // user-editable (custom species lists, l18n) - so they're untrusted.
-  function esc(s) {
-    return String(s == null ? '' : s)
-      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-  }
 
   // ---- State ----
   var DATA = { recent: null, lifelist: null };
   var MASKS = null, DIMS = null;
   var currentHours = +readLS('av:window', '24') || 24;
+  var currentView = +readLS('av:view', '0') || 0;
 
   // ---- Boot ----
   Promise.all([
@@ -67,7 +53,12 @@
   }).catch(function (e) {
     console.error('boot failed', e);
     var c = document.getElementById('collage');
-    if (c) c.innerHTML = '<p class="empty">collage failed to load: ' + esc(e.message) + '</p>';
+    if (c) {
+      var p = document.createElement('p');
+      p.className = 'empty';
+      p.textContent = 'collage failed to load: ' + e.message;
+      c.appendChild(p);
+    }
   });
 
   // ---- UI ----
@@ -83,24 +74,30 @@
   function syncAllPills() {
     [$('slider'), $('winPick'), $('atlasSort')].forEach(syncPill);
   }
+  function setView(i) {
+    i = Math.max(0, Math.min(2, i));
+    currentView = i;
+    writeLS('av:view', String(i));
+    var views = $('views');
+    if (views) views.style.transform = 'translateX(-' + (i * 100) + '%)';
+    var slider = $('slider');
+    if (slider) {
+      [].slice.call(slider.querySelectorAll('button')).forEach(function (b) {
+        b.setAttribute('aria-current', +b.dataset.i === i ? 'true' : 'false');
+      });
+      syncPill(slider);
+    }
+    if (i === 0) renderCollageFromData();
+    if (i === 1) drawHistograms();
+    if (i === 2) renderAtlas();
+  }
   function bindUI() {
     var slider = $('slider');
     var winPick = $('winPick');
     var atlasEl = $('atlasSort');
-    var views = document.querySelectorAll('.view');
 
     if (slider) [].slice.call(slider.querySelectorAll('button')).forEach(function (b) {
-      b.addEventListener('click', function () {
-        [].slice.call(slider.querySelectorAll('button')).forEach(function (x) {
-          x.setAttribute('aria-current', x === b ? 'true' : 'false');
-        });
-        var i = +b.dataset.i;
-        views.forEach(function (v) { v.hidden = +v.dataset.view !== i; });
-        syncPill(slider);
-        if (i === 0) renderCollageFromData();
-        if (i === 1) drawHistograms();
-        if (i === 2) renderAtlas();
-      });
+      b.addEventListener('click', function () { setView(+b.dataset.i); });
     });
 
     if (winPick) [].slice.call(winPick.querySelectorAll('button')).forEach(function (b) {
@@ -136,6 +133,18 @@
       el.addEventListener('click', function () { aboutModal && aboutModal.setAttribute('aria-hidden', 'true'); });
     });
 
+    // Alpha-mask hover hit-testing for the collage. .gtile is
+    // pointer-events:none so the bounding boxes don't intercept events;
+    // we sample the bird's pixel under the cursor instead.
+    var collageEl = $('collage');
+    if (collageEl) {
+      collageEl.addEventListener('mousemove', function (e) { collageHover(e, collageEl); });
+      collageEl.addEventListener('mouseleave', function () {
+        document.querySelectorAll('.gtile.is-hover').forEach(function (t) { t.classList.remove('is-hover'); });
+      });
+      collageEl.addEventListener('click', function (e) { collageClick(e, collageEl); });
+    }
+
     var rT;
     window.addEventListener('resize', function () {
       clearTimeout(rT);
@@ -143,11 +152,60 @@
         syncAllPills();
         renderCollageFromData();
         drawHistograms();
+        var views = $('views');
+        if (views) views.style.transform = 'translateX(-' + (currentView * 100) + '%)';
       }, 120);
     });
+
+    // Initial view position + pill sync
+    var views = $('views');
+    if (views) views.style.transform = 'translateX(-' + (currentView * 100) + '%)';
+    if (slider) [].slice.call(slider.querySelectorAll('button')).forEach(function (b) {
+      b.setAttribute('aria-current', +b.dataset.i === currentView ? 'true' : 'false');
+    });
     setTimeout(syncAllPills, 60);
   }
 
+  // ---- Hover hit-testing: find which tile's mask is under the cursor ----
+  // .gtile rectangles overlap, so :hover would light the wrong bird. We
+  // walk the placed tiles topmost-first, transform the cursor into each
+  // tile's mask space, and pick the one whose mask cell is "on".
+  var lastHoverTile = null;
+  function hitTest(e, container) {
+    var rect = container.getBoundingClientRect();
+    var x = e.clientX - rect.left, y = e.clientY - rect.top;
+    var tiles = container.querySelectorAll('.gtile');
+    for (var i = tiles.length - 1; i >= 0; i--) {
+      var t = tiles[i];
+      var bx = t.offsetLeft, by = t.offsetTop, bw = t.offsetWidth, bh = t.offsetHeight;
+      if (x < bx || x > bx + bw || y < by || y > by + bh) continue;
+      var slug = t.dataset.slug;
+      var mask = MASKS && MASKS[slug];
+      if (!mask) return t;
+      var mx = ((x - bx) / bw * mask.w) | 0;
+      var my = ((y - by) / bh * mask.h) | 0;
+      var idx = my * mask.w + mx;
+      var byte = atob(mask.bits).charCodeAt(idx >> 3);
+      if ((byte >> (7 - (idx & 7))) & 1) return t;
+    }
+    return null;
+  }
+  function collageHover(e, container) {
+    var hit = hitTest(e, container);
+    if (hit === lastHoverTile) return;
+    if (lastHoverTile) lastHoverTile.classList.remove('is-hover');
+    if (hit) hit.classList.add('is-hover');
+    lastHoverTile = hit;
+    container.style.cursor = hit ? 'pointer' : 'default';
+  }
+  function collageClick(e, container) {
+    var hit = hitTest(e, container);
+    if (!hit) return;
+    var sci = hit.dataset.sci;
+    var record = ((DATA.recent && DATA.recent.species) || []).find(function (s) { return s.sci === sci; });
+    if (record) openDetail(record);
+  }
+
   // ---- Data fetch ----
   function refreshAll() {
     var h = currentHours;
@@ -159,6 +217,7 @@
       if (parts[1] && h === currentHours) DATA.recent = parts[1];
       renderCollageFromData();
       drawHistograms();
+      if (currentView === 2) renderAtlas();
     });
   }
   function refreshRecent() {
@@ -315,10 +374,10 @@
       var mask = loadMask(slug);
       if (!mask) return null;
       var n = +s.n; if (!n || isNaN(n)) n = 1;
-      return { mask: mask, data: s, ar: aspect(s.sci), score: Math.pow(Math.max(1, n), T.countExp) };
+      return { mask: mask, data: s, slug: slug, ar: aspect(s.sci), score: Math.pow(Math.max(1, n), T.countExp) };
     }).filter(Boolean);
 
-    if (!tiles.length) { collage.innerHTML = ''; return; }
+    if (!tiles.length) return;
 
     var sumScore = tiles.reduce(function (a, t) { return a + t.score; }, 0) || 1;
     tiles.forEach(function (t) { t.area = Math.max(minArea, budget * t.score / sumScore); });
@@ -369,8 +428,6 @@
       placed.forEach(function (t) { if (t.x > -1000) { t.x += dx; t.y += dy; } });
     }
 
-    // Build tiles via createElement / textContent / setAttribute so user-
-    // editable species names from labels.txt can't smuggle markup.
     placed.forEach(function (t) {
       var s = t.data;
       var label = s.com || s.sci;
@@ -378,6 +435,7 @@
       btn.className = 'gtile';
       btn.type = 'button';
       btn.dataset.sci = s.sci;
+      btn.dataset.slug = t.slug;
       btn.setAttribute('aria-label', label);
       btn.title = label + ' · ' + (+s.n || 0) + ' calls';
       btn.style.left = t.x + 'px';
@@ -390,17 +448,23 @@
       img.alt = label;
       img.src = imgUrl(s.sci, s.com);
       btn.appendChild(img);
-      btn.addEventListener('click', function () { openDetail(s); });
       collage.appendChild(btn);
     });
   }
 
-  // ---- Stats ----
+  // ---- Stats: per-species mark on a time x count plot ----
   function drawHistograms() {
     var tl = $('statsTimeline');
     if (!tl) return;
     var sp = ((DATA.recent && DATA.recent.species) || []).slice();
-    if (!sp.length) { tl.innerHTML = '<div class="stats-tl-empty">no detections in this window</div>'; return; }
+    if (!sp.length) {
+      tl.innerHTML = '';
+      var p = document.createElement('div');
+      p.className = 'stats-tl-empty';
+      p.textContent = 'no detections in this window';
+      tl.appendChild(p);
+      return;
+    }
     var now = Date.now();
     var windowStart = currentHours >= 1000000 ? now - 90 * 24 * 3600000 : now - currentHours * 3600000;
     var windowSpan = Math.max(1, now - windowStart);
@@ -428,49 +492,72 @@
     tl.appendChild(plot);
   }
 
-  // ---- Atlas ----
+  // ---- Atlas: grid of bird-card per species ----
   function renderAtlas() {
-    var list = $('atlasList');
-    if (!list) return;
+    var grid = $('atlasGrid');
+    if (!grid) return;
     var sp = ((DATA.lifelist && DATA.lifelist.species) || []).slice();
+    grid.innerHTML = '';
     if (!sp.length) {
-      var p = document.createElement('p');
-      p.className = 'empty';
-      p.textContent = 'no species yet - atlas fills in as the Pi detects birds.';
-      list.innerHTML = '';
-      list.appendChild(p);
+      var empty = document.createElement('div');
+      empty.className = 'atlas-empty';
+      var p1 = document.createElement('p');
+      p1.textContent = 'No birds detected yet.';
+      var p2 = document.createElement('p');
+      p2.className = 'hint';
+      p2.textContent = 'The atlas fills up as BirdNET-Pi identifies new species.';
+      empty.appendChild(p1); empty.appendChild(p2);
+      grid.appendChild(empty);
       return;
     }
     var sort = readLS('av:atlasSort', 'count');
-    if (sort === 'count') sp.sort(function (a, b) { return (+b.n || 0) - (+a.n || 0); });
-    else if (sort === 'recent') sp.sort(function (a, b) {
-      return Date.parse((b.last_seen || '').replace(' ', 'T')) - Date.parse((a.last_seen || '').replace(' ', 'T'));
-    });
-    else sp.sort(function (a, b) {
-      return Date.parse((a.first_seen || '').replace(' ', 'T')) - Date.parse((b.first_seen || '').replace(' ', 'T'));
-    });
-    list.innerHTML = '';
+    if (sort === 'recent') {
+      sp.sort(function (a, b) {
+        return Date.parse((b.last_seen || '').replace(' ', 'T')) - Date.parse((a.last_seen || '').replace(' ', 'T'));
+      });
+    } else if (sort === 'alpha') {
+      sp.sort(function (a, b) { return (a.com || a.sci).localeCompare(b.com || b.sci); });
+    } else {
+      sp.sort(function (a, b) { return (+b.n || 0) - (+a.n || 0); });
+    }
+
     sp.forEach(function (s) {
-      var btn = document.createElement('button');
-      btn.className = 'atlas-card';
-      btn.type = 'button';
-      btn.dataset.sci = s.sci;
+      var card = document.createElement('button');
+      card.className = 'bird-card';
+      card.type = 'button';
+      card.dataset.sci = s.sci;
+
+      var stat = document.createElement('div');
+      stat.className = 'stat';
+      var n = document.createElement('span');
+      n.className = 'n'; n.textContent = String(+s.n || 0);
+      var lbl = document.createElement('span');
+      lbl.className = 'lbl'; lbl.textContent = (+s.n || 0) === 1 ? 'call' : 'calls';
+      stat.appendChild(n); stat.appendChild(lbl);
+
+      var wrap = document.createElement('div');
+      wrap.className = 'img-wrap';
       var img = document.createElement('img');
       img.loading = 'lazy';
       img.decoding = 'async';
       img.alt = s.com || s.sci;
       img.src = imgUrl(s.sci, s.com);
-      var name = document.createElement('span');
-      name.className = 'atlas-name';
-      name.textContent = s.com || s.sci;
-      var count = document.createElement('span');
-      count.className = 'atlas-count';
-      count.textContent = String(+s.n || 0);
-      btn.appendChild(img);
-      btn.appendChild(name);
-      btn.appendChild(count);
-      btn.addEventListener('click', function () { openDetail(s); });
-      list.appendChild(btn);
+      wrap.appendChild(img);
+
+      var h3 = document.createElement('h3');
+      h3.textContent = s.com || s.sci;
+      var sci = document.createElement('p');
+      sci.className = 'sci';
+      var em = document.createElement('em');
+      em.textContent = s.sci;
+      sci.appendChild(em);
+
+      card.appendChild(stat);
+      card.appendChild(wrap);
+      card.appendChild(h3);
+      card.appendChild(sci);
+      card.addEventListener('click', function () { openDetail(s); });
+      grid.appendChild(card);
     });
   }
 
@@ -487,8 +574,6 @@
       modal.setAttribute('role', 'dialog');
       document.body.appendChild(modal);
     }
-    // Single innerHTML for the chrome (no user content), then build the
-    // user-content elements via createElement so labels are safe.
     modal.innerHTML =
       '<div class="modal-backdrop" data-close="1"></div>' +
       '<div class="detail-card">' +
diff --git a/avian/frontend/index.html b/avian/frontend/index.html
index 8f03b4f..8476de5 100644
--- a/avian/frontend/index.html
+++ b/avian/frontend/index.html
@@ -3,46 +3,70 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
-<title>apartment birds</title>
-<meta name="description" content="A live bird collage from your apartment window.">
+<title>your birds</title>
+<meta name="description" content="A live bird collage from your window.">
 <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
 
+<header class="top">
+  <div class="window-pick" id="winPick" role="tablist">
+    <i class="seg-pill" aria-hidden="true"></i>
+    <button data-h="1"       type="button">1H</button>
+    <button data-h="12"      type="button">12H</button>
+    <button data-h="24"      type="button" aria-current="true">24H</button>
+    <button data-h="168"     type="button">7D</button>
+    <button data-h="1000000" type="button">ALL</button>
+  </div>
+</header>
+
 <main class="stage">
   <header class="static-head">
-    <button type="button" class="pre" id="aboutLink">apartment birds</button>
+    <button type="button" class="pre" id="aboutLink">your birds</button>
     <h1 id="staticTitle">Heard Recently</h1>
   </header>
 
   <div class="views" id="views">
-    <section class="view view-collage" data-view="0">
-      <div id="collage" class="collage"></div>
+    <section class="view" id="v0" aria-label="Bird collage">
+      <div class="gcollage" id="collage"></div>
     </section>
-    <section class="view view-stats" data-view="1" hidden>
-      <div id="statsTimeline" class="stats-tl"></div>
-    </section>
-    <section class="view view-atlas" data-view="2" hidden>
-      <div class="atlas-sort" id="atlasSort">
-        <i class="seg-pill" aria-hidden="true"></i>
-        <button type="button" data-sort="count" aria-current="true">most heard</button>
-        <button type="button" data-sort="recent">most recent</button>
-        <button type="button" data-sort="first">first seen</button>
+
+    <section class="view" id="v1" aria-label="Stats">
+      <div class="stats-grid">
+        <div class="stats-timeline" id="statsTimeline"></div>
       </div>
-      <div id="atlasList" class="atlas-list"></div>
+    </section>
+
+    <section class="view" id="v2" aria-label="Atlas">
+      <div class="atlas-controls">
+        <div class="atlas-sort" id="atlasSort" role="tablist" aria-label="sort atlas">
+          <i class="seg-pill" aria-hidden="true"></i>
+          <button data-sort="count"  type="button" aria-current="true" aria-label="most heard">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+              <path d="M2 12 V8"/><path d="M6 12 V5"/><path d="M10 12 V3"/>
+            </svg>
+            <span class="tip">most heard</span>
+          </button>
+          <button data-sort="recent" type="button" aria-label="most recent">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="7" cy="7" r="5.2"/><path d="M7 4 V7 L9.2 8.3"/>
+            </svg>
+            <span class="tip">most recent</span>
+          </button>
+          <button data-sort="alpha"  type="button" aria-label="alphabetical">
+            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2.4 11.5 L4 4.5 L5.6 11.5"/><path d="M2.9 9.2 H5.1"/>
+              <path d="M8.2 11.5 V4.5 H10.4 a1.3 1.3 0 0 1 0 2.6 H8.2"/><path d="M8.2 7.1 H10.6 a1.5 1.5 0 0 1 0 3 H8.2"/>
+            </svg>
+            <span class="tip">a → z</span>
+          </button>
+        </div>
+      </div>
+      <div class="atlas-grid" id="atlasGrid"></div>
     </section>
   </div>
 </main>
 
-<div class="window-pick" id="winPick" role="tablist">
-  <i class="seg-pill" aria-hidden="true"></i>
-  <button data-h="1"    type="button">1H</button>
-  <button data-h="12"   type="button">12H</button>
-  <button data-h="24"   type="button" aria-current="true">24H</button>
-  <button data-h="168"  type="button">7D</button>
-  <button data-h="9999999" type="button">ALL</button>
-</div>
-
 <nav class="slider" id="slider" aria-label="View">
   <i class="seg-pill" aria-hidden="true"></i>
   <button type="button" data-i="0" aria-current="true">collage</button>
@@ -54,9 +78,9 @@
   <div class="modal-backdrop" data-close="1"></div>
   <div class="about-card" role="document">
     <button type="button" class="modal-close" data-close="1" aria-label="close">×</button>
-    <p class="about-eyebrow">apartment birds</p>
-    <h2 id="aboutTitle">The birds outside my window</h2>
-    <p class="about-body">A tiny microphone listens for birds passing the window and identifies them with Cornell's <a href="https://birdnet.cornell.edu/" target="_blank" rel="noopener">BirdNET</a>. Each species shows up as an illustration in the collage - sized by how much it's been heard.</p>
+    <p class="about-eyebrow">your birds</p>
+    <h2 id="aboutTitle">The birds outside your window</h2>
+    <p class="about-body">A tiny microphone identifies every passing bird with Cornell's <a href="https://birdnet.cornell.edu/" target="_blank" rel="noopener">BirdNET</a>. Each species shows up as an illustration in the collage, sized by how often it's been heard.</p>
     <button type="button" class="about-explore" data-close="1">explore the birds →</button>
     <p class="built-by">built with <a href="https://github.com/Twarner491/AvianVisitors" target="_blank" rel="noopener">AvianVisitors</a></p>
   </div>
diff --git a/avian/frontend/styles.css b/avian/frontend/styles.css
index 2e4aa3d..c3a3168 100644
--- a/avian/frontend/styles.css
+++ b/avian/frontend/styles.css
@@ -1,263 +1,1449 @@
-/* AvianVisitors - collage frontend styles.
- * Paper-and-ink aesthetic to match the bundled kachō-e illustrations. */
+  :root {
+    color-scheme: light;
+    --paper:    #fcfcfb;   /* near-pure white, faintest warm undertone */
+    --paper-2:  #f3f2ee;   /* recessed track */
+    --paper-3:  #e8e6df;   /* placeholder fill */
+    --ink:      #1a1612;
+    --ink-2:    #4a3f31;
+    --ink-soft: #908576;
+    --accent:   #4a3f31;   /* warm dark grey — matches ink-2, no longer red */
+    --accent-2: #1a1612;   /* near-black ink — same hue as the title text */
+    /* Depth shadow recipes — replace flat 1px borders */
+    --edge:    inset 0 0 0 1px rgba(255,255,255,0.55), 0 0 0 1px rgba(26,22,18,0.04);
+    --edge-lg: inset 0 0 0 1px rgba(255,255,255,0.6), 0 0 0 1px rgba(26,22,18,0.06), 0 8px 28px rgba(26,22,18,0.06);
+    --recess:  inset 0 1px 2px rgba(26,22,18,0.06), inset 0 0 0 1px rgba(26,22,18,0.04);
+    --raised:  inset 0 0 0 1px rgba(255,255,255,0.8), 0 0 0 1px rgba(26,22,18,0.05), 0 1px 2px rgba(26,22,18,0.07);
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); color: var(--ink); }
+  body {
+    font-family: ui-serif, "Iowan Old Style", "Apple Garamond", Georgia, serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+  }
+  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; }
 
-:root {
-  --paper:      #f4ede0;
-  --paper-2:    #ebe1cf;
-  --ink:        #3a2f24;
-  --ink-2:      #6b5c4a;
-  --ink-soft:   #9d8d76;
-  --accent:     #a8341d;
-  --recess:     inset 0 1px 2px rgba(58,47,36,0.18), inset 0 -1px 0 rgba(255,255,255,0.4);
-  --raised:     0 1px 0 rgba(58,47,36,0.12), 0 0 0 1px rgba(58,47,36,0.06);
-}
+  /* ============ Stage / views ============
+     Stage is a flex column: a static title block sits on top, the views
+     slider fills the remaining height. The title NEVER moves when the
+     view changes — only its text fades when the new view's title differs
+     from the current one. */
+  .stage {
+    position: fixed; inset: 0; overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .static-head {
+    flex: 0 0 auto;
+    padding: 84px 32px 22px;
+    text-align: center; position: relative; z-index: 5;
+  }
+  .static-head .pre {
+    display: inline-block;
+    background: none; border: 0; padding: 0;
+    font: italic 400 clamp(13px, 1.4vw, 18px)/1 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink-2); letter-spacing: 0.06em; margin-bottom: 6px;
+    cursor: pointer; transition: color 140ms ease;
+  }
+  .static-head .pre:hover {
+    color: var(--ink);
+    text-decoration: underline; text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
+  }
+  .static-head h1 {
+    margin: 0; padding: 0;
+    font: 700 clamp(24px, 3.2vw, 40px)/1 ui-serif, "Iowan Old Style", "Bookman Old Style", Georgia, serif;
+    letter-spacing: 0.06em; color: var(--ink); text-transform: uppercase;
+    font-style: normal;
+    transition: opacity 240ms cubic-bezier(.7,.05,.2,1);
+  }
+  .static-head.swap-out h1 { opacity: 0; }
+  @media (max-width: 700px) {
+    .static-head { padding: 96px 18px 22px; }
+  }
 
-* { box-sizing: border-box; }
-html, body { margin: 0; height: 100%; }
-body {
-  background: var(--paper);
-  color: var(--ink);
-  font: 14px/1.5 ui-serif, "Iowan Old Style", Georgia, serif;
-  overflow-x: hidden;
-}
-button { font: inherit; color: inherit; }
+  .views {
+    flex: 1 1 auto; min-height: 0;
+    position: relative; display: flex;
+    transition: transform 480ms cubic-bezier(.7,.05,.2,1);
+  }
+  .view  { flex: 0 0 100%; height: 100%; overflow: auto; padding: 8px 56px 132px; position: relative; }
+  /* Collage and stats views both fit the viewport (no scroll). Atlas
+     keeps normal scroll. */
+  .view#v0, .view#v1 { overflow: hidden; padding: 8px 32px 88px; }
+  .view#v0 { display: flex; }
+  .view#v1 { display: flex; flex-direction: column; }
+  @media (max-width: 700px) { .view { padding: 8px 18px 132px; } .view#v0, .view#v1 { padding: 8px 16px 88px; } }
 
-/* ---- Stage + static head ---- */
-.stage {
-  min-height: 100vh;
-  display: flex; flex-direction: column;
-  padding: 40px 16px 120px;
-}
-.static-head {
-  text-align: center;
-  padding: 8px 0 14px;
-}
-.static-head .pre {
-  background: none; border: 0; padding: 0; cursor: pointer;
-  font: italic 400 13px/1 ui-serif, "Iowan Old Style", Georgia, serif;
-  color: var(--ink-2); letter-spacing: 0.06em;
-}
-.static-head .pre:hover { color: var(--ink); }
-.static-head h1 {
-  margin: 4px 0 0;
-  font: 700 28px/1.1 ui-serif, "Iowan Old Style", Georgia, serif;
-  letter-spacing: 0.01em;
-}
-@media (min-width: 768px) { .static-head h1 { font-size: 36px; } }
+  /* ============ Top bar — window picker (left) + menu button (right). ============
+     Visible on every view; the picker is the universal time-window control. */
+  .top {
+    position: fixed; top: 22px; left: 0; right: 0;
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 0 28px; z-index: 30; pointer-events: none;
+  }
+  .top > * { pointer-events: auto; }
+  .top .window-pick {
+    display: inline-flex; gap: 0; padding: 4px;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+    position: relative;
+  }
+  .top .window-pick button {
+    background: transparent; border: 0; color: var(--ink-soft);
+    font: 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.18em;
+    padding: 9px 16px; border-radius: 999px; cursor: pointer; text-transform: uppercase;
+    transition: color 200ms ease;
+    position: relative; z-index: 1;
+  }
+  .top .window-pick button:hover { color: var(--ink); }
+  .top .window-pick button[aria-current="true"] { color: var(--ink); }
+  .menu-btn {
+    background: var(--paper); border: 0; color: var(--ink);
+    font: 11px/1 ui-monospace, Menlo, monospace; padding: 9px 14px 8px;
+    border-radius: 999px; cursor: pointer; letter-spacing: 0.18em; text-transform: lowercase;
+    box-shadow: var(--raised);
+    transition: transform 160ms ease;
+  }
+  .menu-btn:hover { transform: translateY(-1px); }
+  .menu-btn:active { transform: translateY(0); }
+  /* Compact top bar on mobile — the time-window pill goes from
+     spacious to thumb-tight without losing legibility. */
+  @media (max-width: 700px) {
+    .top { top: 12px; padding: 0 12px; }
+    .top .window-pick { padding: 3px; }
+    .top .window-pick button {
+      font-size: 8.5px; padding: 6px 10px; letter-spacing: 0.12em;
+    }
+    .menu-btn { font-size: 9px; padding: 6px 11px 5px; letter-spacing: 0.14em; }
+    .return-to-atlas { top: 10px; left: 10px; padding: 5px 10px; font-size: 8.5px; }
+  }
+  @media (max-width: 420px) {
+    .top .window-pick button { font-size: 8px; padding: 5px 7px; letter-spacing: 0.08em; }
+  }
 
-/* ---- View container ---- */
-.views { flex: 1; position: relative; }
-.view { width: 100%; }
+  /* ============ Bottom slider — recessed track, raised active pill ============ */
+  .slider {
+    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
+    display: flex; gap: 0; padding: 4px; z-index: 30;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+    position: fixed; /* re-emit for the pill positioning */
+  }
+  .slider button {
+    background: transparent; border: 0; color: var(--ink-soft);
+    font: 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.2em;
+    padding: 11px 24px; border-radius: 999px; cursor: pointer; text-transform: uppercase;
+    transition: color 200ms ease;
+    position: relative; z-index: 1;
+  }
+  .slider button:hover { color: var(--ink); }
+  .slider button[aria-current="true"] { color: var(--ink); }
 
-/* ---- Collage tiles ---- */
-.collage {
-  position: relative;
-  width: 100%;
-  height: calc(100vh - 240px);
-  min-height: 360px;
-}
-.gtile {
-  position: absolute;
-  background: none; border: 0; padding: 0; cursor: pointer;
-  transition: transform 180ms ease, z-index 0s;
-}
-.gtile:hover, .gtile.is-hover { transform: scale(1.04); z-index: 3; }
-.gtile img {
-  width: 100%; height: 100%; object-fit: contain; display: block;
-  pointer-events: none;
-}
-.collage .empty {
-  position: absolute; inset: 0;
-  display: flex; align-items: center; justify-content: center;
-  color: var(--ink-soft);
-  font: italic 14px ui-serif, Georgia, serif;
-}
+  /* Shared sliding pill — JS animates transform and width to the
+     active button's position. The pill is the only element with the
+     raised-paper look; buttons just toggle their text colour. */
+  .seg-pill {
+    position: absolute; top: 4px; bottom: 4px; left: 0;
+    background: var(--paper); border-radius: 999px;
+    box-shadow: var(--raised);
+    transition: transform 320ms cubic-bezier(.7,.05,.2,1), width 320ms cubic-bezier(.7,.05,.2,1);
+    will-change: transform, width;
+    pointer-events: none; z-index: 0;
+  }
 
-/* ---- Stats timeline ---- */
-.stats-tl {
-  position: relative;
-  width: 100%; height: 60vh; min-height: 340px;
-  padding: 28px 22px 30px;
-}
-.stats-tl-plot { position: relative; width: 100%; height: 100%; }
-.stats-tl-mark {
-  position: absolute; width: 10px; height: 10px;
-  border-radius: 999px;
-  background: var(--ink);
-  transform: translate(-50%, 50%);
-  cursor: pointer;
-}
-.stats-tl-empty {
-  display: flex; align-items: center; justify-content: center;
-  height: 100%; color: var(--ink-soft); font-style: italic;
-}
+  /* ============ Menu dropdown ============ */
+  #menu-dd {
+    position: fixed; top: 58px; right: 28px; z-index: 25;
+    width: 360px; max-width: calc(100vw - 24px);
+    max-height: calc(100vh - 80px); overflow: auto;
+    background: var(--paper); border-radius: 12px;
+    box-shadow: var(--edge-lg);
+    padding: 14px; opacity: 0; transform: translateY(-6px);
+    pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
+  }
+  #menu-dd.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
 
-/* ---- Atlas grid ---- */
-.atlas-sort {
-  display: flex; position: relative;
-  margin: 0 auto 18px; padding: 4px;
-  background: var(--paper-2); border-radius: 999px;
-  box-shadow: var(--recess);
-  width: fit-content;
-}
-.atlas-sort button {
-  position: relative; z-index: 1;
-  background: none; border: 0; padding: 6px 14px; cursor: pointer;
-  font: 10px ui-monospace, Menlo, monospace;
-  letter-spacing: 0.06em; text-transform: lowercase;
-  color: var(--ink-soft);
-  transition: color 160ms;
-}
-.atlas-sort button[aria-current="true"] { color: var(--ink); }
-.atlas-list {
-  display: grid; gap: 14px;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  padding: 0 8px;
-}
-.atlas-card {
-  background: none; border: 0; padding: 6px; cursor: pointer;
-  display: flex; flex-direction: column; align-items: center;
-  text-align: center;
-  border-radius: 10px;
-  transition: background 160ms;
-}
-.atlas-card:hover { background: rgba(58,47,36,0.04); }
-.atlas-card img { width: 100%; max-height: 110px; object-fit: contain; }
-.atlas-name {
-  margin-top: 4px;
-  font: 11px ui-serif, Georgia, serif;
-  color: var(--ink);
-}
-.atlas-count {
-  font: 9px ui-monospace, Menlo, monospace;
-  color: var(--ink-soft);
-}
+  .lock-row {
+    display: flex; gap: 6px; align-items: stretch;
+    background: var(--paper-2); border-radius: 8px;
+    box-shadow: var(--recess);
+    padding: 4px;
+  }
+  .lock-row input {
+    flex: 1; background: transparent; border: 0; outline: 0;
+    color: var(--ink); padding: 8px 10px;
+    font: 13px ui-monospace, Menlo, monospace;
+  }
+  .lock-row input::placeholder { color: var(--ink-soft); }
+  .lock-row button {
+    background: var(--paper); border: 0; color: var(--ink);
+    width: 32px; padding: 0; border-radius: 6px; cursor: pointer;
+    font: 14px/1 ui-monospace, Menlo, monospace;
+    box-shadow: var(--raised);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .lock-row button:hover { color: var(--accent); }
+  .lock-hint {
+    margin: 8px 4px 0; font: 10px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.04em;
+  }
+  .lock-err { color: var(--accent); }
+  /* Tiny "built by teddy" attribution — appears under the lock-screen
+     password field AND at the foot of the about-card. Same monospace
+     micro-type used by .lock-hint so the two contexts read consistent. */
+  .built-by {
+    margin: 14px 4px 0;
+    font: 10px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft);
+    letter-spacing: 0.04em;
+  }
+  .built-by a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .built-by a:hover { color: var(--ink); }
+  .about-card .built-by { margin-top: 18px; }
 
-/* ---- Bottom-fixed view slider + window picker ---- */
-.slider, .window-pick {
-  position: fixed;
-  display: flex; padding: 4px;
-  background: var(--paper-2); border-radius: 999px;
-  box-shadow: var(--recess);
-  z-index: 20;
-}
-.slider {
-  bottom: 28px; left: 50%; transform: translateX(-50%);
-}
-.window-pick {
-  top: 18px; left: 18px;
-}
-.slider button, .window-pick button {
-  position: relative; z-index: 1;
-  background: none; border: 0; padding: 7px 14px; cursor: pointer;
-  font: 10px ui-monospace, Menlo, monospace;
-  letter-spacing: 0.08em; text-transform: lowercase;
-  color: var(--ink-soft);
-  transition: color 160ms;
-}
-.slider button[aria-current="true"], .window-pick button[aria-current="true"] {
-  color: var(--ink);
-}
-.seg-pill {
-  position: absolute; top: 4px; bottom: 4px;
-  background: var(--paper); border-radius: 999px;
-  box-shadow: var(--raised);
-  transition: transform 220ms cubic-bezier(.32,.72,.32,1), width 220ms;
-  z-index: 0;
-}
+  .menu-items { padding: 4px 4px; display: none; }
+  .menu-items.show { display: block; }
+  .menu-items h3 {
+    font: 9px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.24em;
+    color: var(--ink-soft); text-transform: uppercase; margin: 12px 4px 4px;
+  }
+  .menu-items a {
+    display: block; padding: 9px 8px; color: var(--ink); text-decoration: none;
+    font: 14px ui-serif, Georgia, serif; border-radius: 6px;
+    transition: background 120ms ease;
+  }
+  .menu-items a:hover { background: var(--paper-2); color: var(--accent); }
 
-/* ---- About modal ---- */
-#about-modal, #detail-modal {
-  position: fixed; inset: 0; z-index: 60;
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-  pointer-events: none; opacity: 0;
-  transition: opacity 200ms ease;
-}
-#about-modal[aria-hidden="false"], #detail-modal[aria-hidden="false"] {
-  pointer-events: auto; opacity: 1;
-}
-.modal-backdrop {
-  position: absolute; inset: 0;
-  background: rgba(26,22,18,0.32);
-}
-.modal-close {
-  position: absolute; top: 14px; right: 14px;
-  background: none; border: 0; cursor: pointer;
-  font: 22px/1 ui-serif, Georgia, serif;
-  color: var(--ink-soft);
-}
-.modal-close:hover { color: var(--ink); }
-.about-card, .detail-card {
-  position: relative;
-  max-width: 432px; width: 100%;
-  background: var(--paper);
-  border-radius: 14px;
-  box-shadow:
-    inset 0 0 0 1px rgba(255,255,255,0.6),
-    0 30px 80px rgba(26,22,18,0.24);
-  padding: 34px 34px 28px;
-}
-.about-card .about-eyebrow {
-  margin: 0 0 7px;
-  font: italic 400 13px/1 ui-serif, Georgia, serif;
-  color: var(--ink-2); letter-spacing: 0.06em;
-}
-.about-card h2 {
-  margin: 0 0 13px;
-  font: 700 22px/1.25 ui-serif, Georgia, serif;
-  color: var(--ink);
-}
-.about-card .about-body {
-  margin: 0;
-  font: 400 14.5px/1.62 ui-serif, Georgia, serif;
-  color: var(--ink-2);
-}
-.about-card .about-body a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.about-card .about-explore {
-  margin-top: 20px;
-  background: none; border: 0; padding: 0;
-  font: 700 11px/1 ui-monospace, Menlo, monospace;
-  letter-spacing: 0.08em; text-transform: lowercase;
-  color: var(--ink-soft); cursor: pointer;
-}
-.about-card .about-explore:hover { color: var(--ink); }
-.built-by {
-  margin: 18px 4px 0;
-  font: 10px ui-monospace, Menlo, monospace;
-  color: var(--ink-soft); letter-spacing: 0.04em;
-}
-.built-by a {
-  color: inherit; text-decoration: underline; text-underline-offset: 2px;
-}
-.built-by a:hover { color: var(--ink); }
+  /* ============ Settings cards inside the drawer ============
+     Form controls match the time-picker's design language: recessed
+     track + raised paper element. Toggles, sliders, and segmented
+     pickers share the same depth-shadow recipe. */
+  .menu-section {
+    margin-top: 14px; padding-top: 12px;
+    border-top: 1px solid rgba(26,22,18,0.07);
+  }
+  .menu-section:first-of-type { margin-top: 6px; border-top: 0; padding-top: 0; }
+  .menu-section h3 {
+    font: 700 9px ui-monospace, Menlo, monospace; letter-spacing: 0.20em;
+    color: var(--ink); text-transform: uppercase;
+    margin: 0 0 8px 4px;
+  }
+  /* Collapsible section — header is a button row with caret on the right.
+     Default state is collapsed so accidental clicks don't touch settings. */
+  .menu-section.collapsible > .section-header {
+    display: flex; align-items: center; justify-content: space-between;
+    cursor: pointer; user-select: none;
+    padding: 4px 6px 6px 0;
+    margin: 0 0 4px 0;
+  }
+  .menu-section.collapsible > .section-header h3 { margin: 0; }
+  .menu-section.collapsible > .section-header .caret {
+    width: 10px; height: 10px; transition: transform 200ms cubic-bezier(.7,.05,.2,1);
+    color: var(--ink-soft);
+  }
+  .menu-section.collapsible[data-open="true"] > .section-header .caret { transform: rotate(90deg); }
+  .menu-section.collapsible > .section-body {
+    max-height: 0; overflow: hidden;
+    transition: max-height 280ms cubic-bezier(.7,.05,.2,1);
+  }
+  .menu-section.collapsible[data-open="true"] > .section-body {
+    max-height: 800px;
+  }
+  .menu-row {
+    display: grid; grid-template-columns: 1fr auto; gap: 12px;
+    align-items: center;
+    padding: 8px 6px 8px 10px;
+    border-radius: 6px;
+  }
+  .menu-row + .menu-row { box-shadow: inset 0 1px 0 rgba(26,22,18,0.06); }
+  .menu-row .label {
+    font: 12.5px ui-serif, Georgia, serif; color: var(--ink);
+  }
+  .hint {
+    display: block;
+    font: 9px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 1px;
+  }
 
-/* ---- Detail modal ---- */
-.detail-card {
-  max-width: 520px;
-  padding: 26px 30px;
-}
-.detail-img {
-  width: 100%; max-height: 220px; object-fit: contain;
-  background: rgba(0,0,0,0.02); border-radius: 8px;
-}
-.detail-title {
-  margin: 14px 0 4px;
-  font: 700 22px/1.25 ui-serif, Georgia, serif;
-}
-.detail-sci {
-  margin: 0 0 6px;
-  font: 13px ui-serif, Georgia, serif;
-  color: var(--ink-2);
-}
-.detail-stats {
-  margin: 0 0 14px;
-  font: 11px ui-monospace, Menlo, monospace;
-  color: var(--ink-soft);
-}
-.detail-audio { width: 100%; margin-bottom: 10px; }
-.detail-spec  { width: 100%; border-radius: 6px; background: #111; }
+  /* Toggle switch (raised pill that slides) */
+  .switch {
+    position: relative; width: 38px; height: 20px;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+    cursor: pointer;
+    border: 0; padding: 0;
+  }
+  .switch::after {
+    content: ''; position: absolute; top: 2px; left: 2px;
+    width: 16px; height: 16px;
+    background: var(--paper); border-radius: 999px;
+    box-shadow: var(--raised);
+    transition: transform 220ms cubic-bezier(.7,.05,.2,1), background 200ms ease;
+  }
+  .switch[aria-checked="true"] {
+    background: var(--ink-2);
+  }
+  .switch[aria-checked="true"]::after {
+    transform: translateX(18px);
+    background: var(--paper);
+  }
+
+  /* Slider — title row (label + value badge with breathing room) and
+     a track row underneath. Value sits at the far right with a wide
+     gap so it never crowds the label text. */
+  .slider-row {
+    display: block;
+    padding: 8px 6px 10px 10px;
+  }
+  .slider-row .head {
+    display: flex; align-items: baseline; gap: 24px;
+    margin-bottom: 6px;
+  }
+  .slider-row .head .label-block { flex: 1; min-width: 0; }
+  .slider-row .label {
+    font: 12.5px ui-serif, Georgia, serif; color: var(--ink);
+  }
+  .slider-row .value {
+    flex: 0 0 auto;
+    font: 11px ui-monospace, Menlo, monospace;
+    color: var(--ink); font-variant-numeric: tabular-nums;
+    background: var(--paper-2); padding: 3px 10px; border-radius: 4px;
+    box-shadow: var(--recess);
+    min-width: 48px; text-align: center;
+  }
+  .slider-row .slider-track {
+    margin-top: 2px;
+  }
+  .slider-track input[type="range"] {
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 18px; background: transparent; cursor: pointer;
+  }
+  .slider-track input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px; background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+  }
+  .slider-track input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 16px; height: 16px; margin-top: -6px;
+    background: var(--paper); border-radius: 999px;
+    box-shadow: var(--raised);
+    cursor: pointer;
+  }
+  .slider-track input[type="range"]::-moz-range-track {
+    height: 4px; background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+  }
+  .slider-track input[type="range"]::-moz-range-thumb {
+    width: 16px; height: 16px;
+    background: var(--paper); border-radius: 999px;
+    box-shadow: var(--raised); border: 0;
+    cursor: pointer;
+  }
+
+  /* Segmented picker (same pill-on-recess pattern as the time picker) */
+  .seg {
+    display: inline-flex; padding: 4px;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+    position: relative;
+  }
+  .seg button {
+    background: transparent; border: 0; color: var(--ink-soft);
+    font: 9.5px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    padding: 6px 12px; border-radius: 999px; cursor: pointer;
+    position: relative; z-index: 1;
+    transition: color 200ms ease;
+  }
+  .seg button[aria-current="true"] {
+    color: var(--ink);
+    background: var(--paper);
+    box-shadow: var(--raised);
+  }
+
+  /* Inline live-audio player — sits at the top of the unlocked drawer.
+     A single play/stop button with a quiet running-indicator dot. */
+  .live-audio {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 12px; margin: 0 0 6px;
+    background: var(--paper-2); border-radius: 8px;
+    box-shadow: var(--recess);
+  }
+  .live-audio .pulse {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--ink-soft); flex-shrink: 0;
+    transition: background 200ms ease;
+  }
+  .live-audio[data-on="true"] .pulse {
+    background: #c44a3b;
+    animation: pulsate 1.6s ease-in-out infinite;
+  }
+  @keyframes pulsate {
+    0%, 100% { opacity: 0.4; transform: scale(1); }
+    50%      { opacity: 1;   transform: scale(1.25); }
+  }
+  .live-audio .label {
+    flex: 1; font: 12.5px ui-serif, Georgia, serif; color: var(--ink);
+  }
+  .live-audio .label .hint {
+    font: 9px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.04em;
+  }
+  .live-audio button {
+    background: var(--paper); border: 0; color: var(--ink);
+    padding: 6px 12px; border-radius: 4px;
+    font: 9.5px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
+    box-shadow: var(--raised);
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .live-audio button svg { width: 9px; height: 9px; }
+  .live-audio button + button { margin-left: 4px; }
+  /* Live spectrogram — hidden until the user clicks LISTEN. We
+     collapse via max-height (not display:none) so the canvas inside
+     keeps its layout dimensions and paints correctly on expand. */
+  .live-spectro {
+    width: 100%; height: 0;
+    background: var(--paper-2); border-radius: 6px;
+    margin: 0; overflow: hidden;
+    box-shadow: var(--recess);
+    transition: height 240ms cubic-bezier(.7,.05,.2,1), margin 240ms ease;
+  }
+  .live-audio[data-on="true"] + .live-spectro {
+    height: 70px; margin: 0 0 8px;
+  }
+  .live-status {
+    font: 9.5px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.04em; text-transform: lowercase;
+    margin: -4px 0 6px 0; padding: 0 4px;
+    min-height: 13px;
+  }
+  .live-status.err { color: #a83a2d; }
+  .menu-links a .l-hint {
+    display: block; font: 8.5px ui-serif, Georgia, serif; text-transform: none;
+    letter-spacing: 0; color: var(--ink-soft); margin-top: 2px;
+  }
+  .menu-links a.full { grid-column: 1 / -1; }
+
+  /* External BirdNET pages — small grid of cards */
+  .menu-links {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
+    margin: 4px 0 2px;
+  }
+  .menu-links a {
+    display: flex; align-items: center; justify-content: center;
+    padding: 9px 10px;
+    background: var(--paper-2);
+    color: var(--ink); text-decoration: none;
+    font: 10.5px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.10em; text-transform: lowercase;
+    border-radius: 6px;
+    box-shadow: var(--raised);
+    transition: transform 160ms ease, color 160ms ease;
+  }
+  .menu-links a:hover { transform: translateY(-1px); color: var(--ink); background: var(--paper); }
+  .menu-save-row {
+    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
+    margin-top: 10px; padding: 0 4px;
+  }
+  .menu-save-row .save-state {
+    flex: 1; font: 9px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.04em;
+  }
+  .menu-save-row .save-state.ok    { color: #2d5d3a; }
+  .menu-save-row .save-state.err   { color: var(--accent); }
+  .menu-save-row button {
+    background: var(--ink); color: var(--paper); border: 0;
+    padding: 7px 14px; border-radius: 6px;
+    font: 10px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: uppercase; cursor: pointer;
+    box-shadow: var(--raised);
+  }
+  .menu-save-row button:disabled { opacity: 0.4; cursor: default; }
+
+  /* ============ View 1 — Collage (Galliformes-style poster) ============
+     Viewport-fit, no scroll. The shared static-head provides the title;
+     this view's content is just the cluster of bird cutouts which fills
+     the remaining viewport height. */
+  .gcollage {
+    flex: 1 1 auto; width: 100%; max-width: 1300px; margin: 0 auto;
+    position: relative; min-height: 0;
+  }
+  .gtile {
+    position: absolute;
+    background: transparent; border: 0; padding: 0; margin: 0;
+    overflow: visible; /* let drop-shadow extend past the bbox */
+    transition: transform 130ms ease;
+    /* Events are handled at the .collage level via alpha-mask
+       hit-testing — the tile rectangles must not intercept them. */
+    pointer-events: none;
+  }
+  /* Hover state is driven by JS alpha-mask hit-testing (.is-hover),
+     NOT the CSS :hover pseudo — the rectangular tile bounding boxes
+     overlap, so :hover would light up the wrong bird. .is-hover only
+     ever sits on the one tile whose silhouette is actually under the
+     cursor. */
+  .gtile.is-hover { transform: scale(1.04); z-index: 3; }
+  .gtile img {
+    width: 100%; height: 100%; object-fit: contain; display: block;
+    /* Cutouts arrive as alpha-bbox-cropped transparent-bg PNGs, so
+       object-fit: contain leaves no whitespace inside the tile — the
+       bird touches all four sides. Soft drop shadow keeps it readable
+       on paper. */
+    filter: drop-shadow(0 2px 6px rgba(26,22,18,0.10));
+    transition: filter 130ms ease;
+  }
+  .gtile.is-hover img {
+    filter: drop-shadow(0 3px 10px rgba(26,22,18,0.26)) saturate(1.1);
+  }
+  /* Hover pill — surfaces the windowed count for the bird under the
+     cursor. Confirms (Anna's-hummingbird-is-#1 paranoia) that the
+     collage scaling reflects the selected window, not all-time. */
+  .collage-tip {
+    position: absolute; left: 50%; bottom: 14px;
+    transform: translateX(-50%);
+    padding: 6px 14px;
+    background: var(--paper);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px rgba(26,22,18,0.12),
+                inset 0 0 0 1px rgba(255,255,255,0.6);
+    font: italic 13px/1.3 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink);
+    letter-spacing: 0.02em;
+    opacity: 0; pointer-events: none;
+    transition: opacity 150ms ease;
+    white-space: nowrap;
+    z-index: 4;
+  }
+  .collage-tip[aria-hidden="false"] { opacity: 1; }
+  .collage-tip .ct-name { font-style: normal; font-weight: 600; }
+  .collage-tip .ct-n { font-style: normal; font-weight: 700; }
+  .collage-tip .ct-w { color: var(--ink-soft); }
+
+  .empty {
+    color: var(--ink-soft); font: 10px ui-monospace, Menlo, monospace;
+    padding: 120px 0; text-align: center; letter-spacing: 0.18em;
+    text-transform: uppercase;
+  }
+
+  /* Page header is now shared at .stage > .static-head — see top of CSS. */
+  /* Stats grid: charts stack on the LEFT, text sections on the RIGHT.
+     Each chart is a full-bleed card; each text section is a list with
+     subtle separators. Sized to fit the viewport without scrolling. */
+  .stats-grid {
+    flex: 1 1 auto; min-height: 0;
+    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px;
+    max-width: 1100px; margin: 0 auto; width: 100%;
+    align-items: stretch;
+  }
+  @media (max-width: 900px) {
+    .stats-grid { grid-template-columns: 1fr; gap: 40px; }
+    /* Single-column: the timeline has no tall grid sibling to stretch
+       against, so pin it to a usable height instead of letting it
+       collapse to its (zero) intrinsic height. clamp() keeps it sane
+       on both short landscape phones and tall portrait ones. */
+    .stats-timeline { height: clamp(260px, 44vh, 420px); }
+  }
+
+  /* Editorial detection timeline. One column per species. Black
+     square positioned vertically by count (y = quantity), columns
+     ordered by detection time (x = time). Rotated two-line label
+     sits just above its square. Y-axis count ticks on the left,
+     X-axis time labels on the bottom. Fits the viewport — never scrolls. */
+  .stats-timeline {
+    position: relative;
+    flex: 1 1 auto; min-height: 0;
+    padding: 0 0 30px 40px;   /* bottom = x-axis, left = y-axis */
+  }
+  .stats-tl-yaxis {
+    position: absolute; left: 0; top: 0; bottom: 30px; width: 36px;
+    border-right: 1px solid rgba(26,22,18,0.22);
+  }
+  .stats-tl-ytick {
+    position: absolute; right: 5px;
+    font: 9px/1 "SF Mono", Menlo, monospace; color: var(--ink-soft);
+    transform: translateY(50%);
+  }
+  .stats-tl-ytick::after {
+    content: ''; position: absolute; right: -5px; top: 50%;
+    width: 4px; height: 1px; background: rgba(26,22,18,0.3);
+  }
+  .stats-tl-plot {
+    position: relative; height: 100%;
+  }
+  /* Each species is absolutely positioned along the time axis by its
+     last_seen; columns aren't equal-width anymore, so gaps in the
+     timeline show as actual empty space. The width is a label/square
+     gutter, not a layout slot. */
+  .stats-tl-col {
+    position: absolute; top: 0; bottom: 0;
+    width: 28px;
+    transform: translateX(-50%);
+    cursor: pointer;
+  }
+  /* Faint vertical hairlines at every x-axis tick — the "no detections
+     in this slice" period reads as the empty space between marks. */
+  .stats-tl-gridline {
+    position: absolute; top: 0; bottom: 0;
+    width: 1px;
+    background: rgba(26,22,18,0.10);
+    pointer-events: none;
+  }
+  .stats-tl-square {
+    position: absolute; left: 50%;
+    transform: translateX(-50%);
+    background: var(--ink);
+    transition: background 140ms ease, transform 140ms ease;
+  }
+  .stats-tl-col { cursor: pointer; }
+  /* Cross-highlight: hovering a square or a table row lights up the
+     matching species on the other side — the square scales up and its
+     label scales + shifts to the accent ink, so the whole column reads
+     as selected. */
+  .stats-tl-col.sync-hi .stats-tl-square {
+    background: var(--accent);
+    transform: translateX(-50%) scale(1.18);
+  }
+  .stats-tl-col.sync-hi .stats-tl-label {
+    transform: rotate(-90deg) translateY(55%) scale(1.1);
+  }
+  .stats-tl-col.sync-hi .stats-tl-label .com,
+  .stats-tl-col.sync-hi .stats-tl-label .sci { color: var(--accent); }
+  /* Two-line species label, rotated to read bottom-to-top like the
+     reference exhibition checklist. Sits just above the square —
+     rotate(-90deg) then translateY(50%) re-centres the stack on the
+     column regardless of label height. Common name and scientific
+     name sit as two adjacent columns of vertical text. The sync-hi
+     scale uses translateY(55%) to stay centred while enlarged. */
+  .stats-tl-label {
+    position: absolute; left: 50%;
+    transform-origin: 0% 100%;
+    transform: rotate(-90deg) translateY(50%);
+    white-space: nowrap;
+    font: 11px/1.2 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink);
+    transition: transform 130ms ease;
+  }
+  .stats-tl-label .com {
+    display: block; font-weight: 600;
+    transition: color 130ms ease;
+  }
+  .stats-tl-label .sci {
+    display: block;
+    font-style: italic; color: var(--ink-soft); font-size: 9.5px;
+    transition: color 130ms ease;
+  }
+  /* Ticks live inside .stats-tl-plot so their left:% aligns with the
+     gridlines (both share the plot's content box). bottom is negative
+     to push the label into the x-axis gutter below the plot. */
+  .stats-tl-xtick {
+    position: absolute; bottom: -22px;
+    transform: translateX(-50%);
+    font: 8.5px/1 "SF Mono", Menlo, monospace; color: var(--ink-soft);
+    white-space: nowrap;
+  }
+  .stats-tl-empty {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    font: 11px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    text-transform: lowercase; letter-spacing: 0.18em;
+  }
+  /* Trim note — shown when the plot can't fit every species column and
+     falls back to the most-heard subset. A paper background keeps it
+     legible even if a tall label reaches the corner behind it. */
+  .stats-tl-cap {
+    position: absolute; top: 0; right: 0; z-index: 2;
+    background: var(--paper); padding: 1px 0 3px 8px;
+    font: 8.5px/1 "SF Mono", Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.04em;
+  }
+
+  /* (Old chart-card / .stats-charts CSS removed — replaced by the
+     editorial .stats-timeline above.) */
+
+  .stats-side {
+    display: flex; flex-direction: column; justify-content: center;
+    align-self: stretch; max-height: 100%;
+    padding: 6px 0;
+  }
+  .stats-side h3 {
+    font: 700 10px ui-monospace, Menlo, monospace; color: var(--ink);
+    letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1px;
+    border-left: 2px solid var(--accent); padding-left: 10px;
+  }
+  /* Tight, content-sized groups — they sit just below their headers
+     rather than spreading to fill the column. */
+  .stats-side .grp { flex: 0 0 auto; }
+  .stats-side .grp + .grp { margin-top: 22px; }
+  .stats-side .grp small {
+    display: block; font: 9px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.06em; margin: 0 0 3px 12px;
+  }
+  .stats-side ol { list-style: none; padding: 0; margin: 0; }
+  .stats-side li {
+    display: grid; grid-template-columns: 44px 1fr auto; gap: 10px;
+    padding: 2px 0;
+    box-shadow: inset 0 -1px 0 rgba(26,22,18,0.05);
+    font: 12.5px/1.25 ui-serif, Georgia, serif; color: var(--ink);
+    align-items: baseline;
+    transition: background 140ms ease, color 140ms ease;
+  }
+  .stats-side li[data-sci] { cursor: pointer; }
+  .stats-side li[data-sci]:hover { background: var(--paper-2); }
+  /* Cross-highlight from a hovered timeline square. */
+  .stats-side li.sync-hi { background: var(--paper-2); }
+  .stats-side li.sync-hi span:not(.yr):not(.ct) { color: var(--accent); }
+  .stats-side li .yr { font: 9.5px ui-monospace, Menlo, monospace; color: var(--accent-2); letter-spacing: 0.04em; }
+  .stats-side li .ct { font: 11px ui-monospace, Menlo, monospace; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+
+  /* (Histogram strip removed — charts moved into the stats-grid LEFT
+     column as full-bleed chart cards. See .stats-charts above.) */
+
+  /* ============ View 3 — Atlas ============
+     Field-guide grid: one card per species, each card holds the cutout,
+     names, window/all-time detection counts, and small action chips for
+     audio playback, Wikipedia, and eBird. */
+  .atlas-controls {
+    max-width: 1280px; margin: 0 auto 18px;
+    display: flex; justify-content: flex-end; align-items: center;
+  }
+  .atlas-sort {
+    display: inline-flex; padding: 3px; position: relative;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+  }
+  .atlas-sort button {
+    background: transparent; border: 0; color: var(--ink-soft);
+    width: 30px; height: 26px; padding: 0; border-radius: 999px;
+    cursor: pointer; position: relative; z-index: 1;
+    display: inline-flex; align-items: center; justify-content: center;
+    transition: color 200ms ease;
+  }
+  .atlas-sort button svg { width: 13px; height: 13px; display: block; }
+  .atlas-sort button:hover { color: var(--ink); }
+  .atlas-sort button[aria-current="true"] { color: var(--ink); }
+  .atlas-sort button .tip {
+    position: absolute; top: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%); white-space: nowrap;
+    font: 9px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: lowercase; color: var(--ink-soft);
+    background: var(--paper); padding: 3px 8px; border-radius: 4px;
+    box-shadow: var(--raised);
+    opacity: 0; pointer-events: none; transition: opacity 160ms ease;
+  }
+  .atlas-sort button:hover .tip { opacity: 1; }
+  .atlas-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 22px;
+    max-width: 1280px; margin: 0 auto;
+  }
+  @media (max-width: 700px) {
+    .atlas-grid { grid-template-columns: 1fr; gap: 16px; }
+  }
+  .bird-card {
+    position: relative;
+    background: var(--paper);
+    border-radius: 10px;
+    padding: 16px 16px 12px;
+    box-shadow: var(--edge-lg);
+    display: flex; flex-direction: column;
+    min-height: 320px;
+    cursor: pointer;
+    transition: transform 200ms ease, box-shadow 200ms ease;
+  }
+  .bird-card:hover { transform: translateY(-1px); box-shadow: var(--edge-xl, 0 6px 16px rgba(26,22,18,0.12)); }
+  .bird-card .actions, .bird-card .spectro-wrap { cursor: auto; }
+  .bird-card .actions button, .bird-card .actions a { cursor: pointer; }
+  .bird-card .stat {
+    position: absolute; top: 14px; left: 16px;
+    font: 9px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.04em;
+  }
+  .bird-card .stat .n {
+    color: var(--ink); font: 700 13px/1 ui-serif, Georgia, serif;
+    font-variant-numeric: tabular-nums; margin-right: 4px;
+    letter-spacing: 0;
+  }
+  .bird-card .stat .lbl { display: block; }
+  .bird-card .img-wrap {
+    flex: 1 1 auto; min-height: 0;
+    display: flex; align-items: center; justify-content: center;
+    margin: 38px 0 10px;
+    padding: 4px;
+  }
+  .bird-card .img-wrap img {
+    max-width: 100%; max-height: 160px; display: block;
+    filter: drop-shadow(0 2px 6px rgba(26,22,18,0.10));
+  }
+  .bird-card h3 {
+    margin: 0;
+    font: 700 14.5px/1.15 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink); letter-spacing: 0.01em;
+  }
+  .bird-card .sci {
+    font: italic 11px/1.2 ui-serif, Georgia, serif;
+    color: var(--ink-2); margin: 2px 0 0;
+  }
+  .bird-card .actions {
+    display: flex; gap: 6px; align-items: stretch;
+    margin-top: 12px; padding-top: 10px;
+    box-shadow: inset 0 1px 0 rgba(26,22,18,0.07);
+  }
+  .bird-card .chip {
+    flex: 0 0 auto;
+    background: var(--paper-2);
+    border: 0; color: var(--ink);
+    padding: 5px 9px;
+    border-radius: 4px;
+    font: 9.5px/1 ui-monospace, Menlo, monospace;
+    text-transform: lowercase; letter-spacing: 0.10em;
+    text-decoration: none;
+    cursor: pointer;
+    display: inline-flex; align-items: center; gap: 5px;
+    box-shadow: var(--raised);
+    transition: transform 160ms ease, color 160ms ease;
+    white-space: nowrap;
+  }
+  .bird-card .chip:hover {
+    color: var(--ink); transform: translateY(-1px);
+  }
+  .bird-card .chip[data-active="true"] {
+    color: var(--paper);
+    background: var(--ink);
+  }
+  .bird-card .chip svg { width: 10px; height: 10px; display: block; }
+  .bird-card .chip.play { padding-left: 7px; }
+  .bird-card .chip.ext::after { content: '↗'; opacity: 0.6; font-size: 11px; }
+
+  /* Selected card highlight — matches the page-slider and time-window
+     pill aesthetic: the active element is a slightly *brighter* paper
+     surface (raised) on top of a slightly *recessed* background.
+     No accent colour, no glowing ring — just the same depth shadow
+     recipe the rest of the chrome uses. */
+  .bird-card { transition: transform 280ms cubic-bezier(.7,.05,.2,1), box-shadow 280ms ease, background 200ms ease; }
+  .bird-card[data-active="true"] {
+    background: var(--paper);
+    box-shadow:
+      inset 0 0 0 1px rgba(255,255,255,0.85),
+      0 0 0 1px rgba(26,22,18,0.06),
+      0 10px 26px rgba(26,22,18,0.10);
+    transform: translateY(-1px);
+  }
+  .bird-card[data-pulse="true"] {
+    animation: bird-card-pulse 520ms cubic-bezier(.45,.05,.2,1);
+  }
+  /* Soft fade-in of the raised state, no ring pulse */
+  @keyframes bird-card-pulse {
+    0%   { transform: translateY(2px); }
+    100% { transform: translateY(-1px); }
+  }
+
+  .atlas-empty {
+    grid-column: 1 / -1;
+    padding: 80px 16px; text-align: center;
+    font: 12px/1.6 ui-serif, Georgia, serif; color: var(--ink-2);
+  }
+  .atlas-empty p { margin: 0 0 4px; }
+  .atlas-empty p.hint {
+    font: 10px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.06em;
+  }
+
+  /* ============ Admin screen (system / logs / tools) ============
+     Overlays the slider when activated via #admin=... hash. Lives
+     inside the same shell as the rest of the app so the header,
+     menu button, and time-window pill stay put — feels native. */
+  .admin-screen {
+    position: fixed; inset: 60px 0 60px 0;
+    background: var(--bg);
+    overflow-y: auto;
+    z-index: 5;
+    opacity: 0; pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+  .admin-screen[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
+  .admin-frame {
+    max-width: 1100px; margin: 0 auto; padding: 0 28px 40px;
+  }
+  .admin-title {
+    text-align: center; margin: 0 auto 28px;
+  }
+  .admin-title h1 {
+    margin: 0;
+    font: 32px/1.1 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink); letter-spacing: 0.005em;
+  }
+  /* Return-to-atlas pill in the same slot the time-window pill
+     normally lives — matches its visual language. */
+  .return-to-atlas {
+    position: fixed; top: 18px; left: 20px; z-index: 6;
+    display: none; align-items: center; gap: 6px;
+    padding: 7px 14px; border-radius: 999px;
+    background: var(--paper-2);
+    color: var(--ink-soft);
+    font: 10px ui-monospace, Menlo, monospace; letter-spacing: 0.18em;
+    text-transform: lowercase; cursor: pointer;
+    text-decoration: none;
+    box-shadow: var(--recess);
+    transition: color 200ms ease;
+  }
+  body.admin-on .return-to-atlas { display: inline-flex; }
+  body.admin-on #slider { visibility: hidden; }
+  body.admin-on .static-head { opacity: 0; pointer-events: none; }
+  /* Hide the time-window pill on admin pages (it doesn't apply
+     there) — the return-to-atlas link takes its slot. */
+  body.admin-on #winPick { visibility: hidden; }
+  .return-to-atlas:hover { color: var(--ink); }
+  .return-to-atlas svg { width: 10px; height: 10px; }
+  .admin-body { padding-top: 4px; }
+  .admin-grid {
+    display: grid; gap: 14px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    margin-bottom: 22px;
+  }
+  .admin-card {
+    background: var(--paper); border-radius: 8px;
+    padding: 14px 16px; box-shadow: var(--edge);
+  }
+  .admin-card h3 {
+    margin: 0 0 6px; font: 10px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--ink-soft); font-weight: 500;
+  }
+  .admin-card .v { font: 20px ui-serif, Georgia, serif; color: var(--ink); }
+  .admin-card .sub { font: 11px ui-monospace, Menlo, monospace; color: var(--ink-soft); margin-top: 4px; }
+  .admin-card.alert { box-shadow: 0 0 0 1px var(--accent), var(--edge); }
+  .admin-card.alert h3 { color: var(--accent); }
+  .admin-card.warn { box-shadow: 0 0 0 1px #c47a1f, var(--edge); }
+  .admin-card.warn h3 { color: #c47a1f; }
+  .admin-section-head {
+    font: 700 11px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--ink); margin: 24px 0 10px;
+    border-left: 2px solid var(--accent-2); padding-left: 10px;
+  }
+  table.admin-tbl {
+    width: 100%; border-collapse: collapse;
+    font: 12px ui-monospace, Menlo, monospace;
+    background: var(--paper); border-radius: 8px; overflow: hidden;
+    box-shadow: var(--edge);
+  }
+  table.admin-tbl th, table.admin-tbl td {
+    border-bottom: 1px solid var(--rule, #c8bfae);
+    padding: 9px 12px; text-align: left;
+  }
+  table.admin-tbl tr:last-child th, table.admin-tbl tr:last-child td { border-bottom: 0; }
+  table.admin-tbl th {
+    color: var(--ink-soft); text-transform: uppercase;
+    font-size: 9.5px; letter-spacing: 0.14em; font-weight: 500;
+  }
+  table.admin-tbl .pill {
+    display: inline-block; padding: 1px 8px; border-radius: 999px;
+    font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
+  }
+  table.admin-tbl .pill.active { background: rgba(90,122,58,.18); color: #4d6730; }
+  table.admin-tbl .pill.inactive { background: rgba(168,52,29,.18); color: var(--accent); }
+  table.admin-tbl .pill.failed { background: rgba(168,52,29,.18); color: var(--accent); }
+  table.admin-tbl button.restart {
+    font: 9.5px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.04em; text-transform: lowercase;
+    padding: 4px 10px; border: 0; background: var(--paper-2);
+    border-radius: 4px; cursor: pointer; color: var(--ink-soft);
+    box-shadow: var(--raised);
+  }
+  table.admin-tbl button.restart:hover { color: var(--ink); }
+  table.admin-tbl button.restart[disabled] { opacity: .5; cursor: wait; }
+  .admin-logs-toolbar {
+    display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
+  }
+  .admin-logs-toolbar select, .admin-logs-toolbar input[type="number"] {
+    font: 12px ui-monospace, Menlo, monospace;
+    padding: 6px 10px; border: 1px solid var(--rule, #c8bfae);
+    border-radius: 4px; background: var(--paper); color: var(--ink);
+  }
+  .admin-logs-toolbar label {
+    font: 9.5px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: uppercase; color: var(--ink-soft);
+  }
+  .admin-logs-pane {
+    background: #1c1a14; color: #d7cba8;
+    font: 12px/1.5 ui-monospace, Menlo, monospace;
+    padding: 14px 16px; border-radius: 8px;
+    max-height: 65vh; overflow: auto; white-space: pre-wrap;
+  }
+  .admin-actions-grid {
+    display: grid; gap: 12px;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+  .admin-action {
+    background: var(--paper); border-radius: 8px;
+    padding: 14px 16px; box-shadow: var(--edge);
+  }
+  .admin-action h4 { margin: 0 0 6px; font: 15px ui-serif, Georgia, serif; color: var(--ink); }
+  .admin-action p { margin: 0 0 10px; font: 12.5px ui-serif, Georgia, serif; color: var(--ink-soft); }
+  .admin-action button.run {
+    font: 9.5px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: lowercase; padding: 6px 12px; border: 0;
+    background: var(--ink); color: var(--paper); border-radius: 999px;
+    cursor: pointer;
+  }
+  .admin-action button.run[disabled] { opacity: .5; cursor: wait; }
+  .admin-action .out {
+    margin-top: 10px; font: 10.5px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); white-space: pre-wrap;
+  }
+  .admin-action.deploy pre {
+    background: #1c1a14; color: #d7cba8;
+    font: 11px ui-monospace, Menlo, monospace;
+    padding: 12px 14px; border-radius: 6px;
+    overflow: auto; white-space: pre-wrap; word-break: break-all;
+    margin: 0;
+  }
+  .admin-action.deploy button.copy {
+    font: 9.5px ui-monospace, Menlo, monospace; letter-spacing: 0.06em;
+    text-transform: lowercase; padding: 5px 10px;
+    background: var(--paper-2); color: var(--ink-soft);
+    border: 0; border-radius: 4px; cursor: pointer; box-shadow: var(--raised);
+    margin-top: 8px;
+  }
+  .admin-action.deploy button.copy:hover { color: var(--ink); }
+  .admin-unreachable {
+    background: var(--paper); border-radius: 8px;
+    padding: 14px 16px; color: var(--accent);
+    font: 12px ui-monospace, Menlo, monospace;
+    margin-bottom: 18px; box-shadow: 0 0 0 1px var(--accent), var(--edge);
+  }
+  /* When admin screen is shown, the slider underneath is hidden so it
+     doesn't compete for scrolling. The static title gets swapped out
+     too — admin is its own section with its own visual identity.
+     Menu button + time-window pill stay visible (still useful). */
+  body.admin-on #views { display: none; }
+  body.admin-on .nav-band,
+  body.admin-on #slider { visibility: hidden; }
+  body.admin-on .static-head { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
+
+  /* Mobile compact: drawer takes near-full width, admin pads tighter,
+     section heads + cards downsize. */
+  @media (max-width: 700px) {
+    #menu-dd { top: 50px; right: 8px; left: 8px; width: auto; padding: 10px; }
+    .admin-screen { inset: 52px 0 60px 0; }
+    .admin-frame { padding: 0 14px 32px; }
+    .admin-title { margin-bottom: 18px; }
+    .admin-title h1 { font-size: 22px; }
+    .admin-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
+    .admin-card { padding: 12px 14px; }
+    .admin-card .v { font-size: 18px; }
+    .admin-section-head { margin: 18px 0 8px; font-size: 10px; letter-spacing: 0.12em; }
+    table.admin-tbl th, table.admin-tbl td { padding: 7px 8px; font-size: 11px; }
+    .admin-actions-grid { gap: 10px; grid-template-columns: 1fr; }
+    .admin-action { padding: 12px 14px; }
+    /* Slider track bottom nav: tuck closer to bottom edge */
+    .slider { bottom: 14px; padding: 3px; }
+    .slider button { font-size: 9.5px; padding: 6px 11px; }
+  }
+  @media (max-width: 700px) {
+    /* Detail-modal: full-screen on small screens. */
+    #detail-modal { padding: 12px; }
+    .modal-card { padding: 18px; border-radius: 10px; }
+    .modal-info h2 { font-size: 22px; }
+    .modal-img { aspect-ratio: 1 / 1; padding: 10px; }
+    .modal-grid { gap: 18px; }
+    .rec-row .when { font-size: 10.5px; }
+    .rec-row .when small { font-size: 8.5px; }
+  }
+
+  /* ============ Detail modal (atlas card expansion) ============
+     Click a bird card → this fades in over a soft ink backdrop with
+     the full sketch, taxonomic info, Wikipedia summary, and a
+     scrollable list of every past audio capture for the species. */
+  /* /about — a brief explainer popup floated over the index page.
+     Reuses .modal-backdrop / .modal-close; opened by the #about hash. */
+  #about-modal {
+    position: fixed; inset: 0; z-index: 60;
+    display: flex; align-items: center; justify-content: center;
+    padding: 24px;
+    pointer-events: none; opacity: 0;
+    transition: opacity 200ms ease;
+  }
+  #about-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
+  .about-card {
+    position: relative;
+    max-width: 432px; width: 100%;
+    background: var(--paper);
+    border-radius: 14px;
+    box-shadow:
+      inset 0 0 0 1px rgba(255,255,255,0.6),
+      0 30px 80px rgba(26,22,18,0.24);
+    padding: 34px 34px 28px;
+    transform: translateY(10px) scale(0.985);
+    transition: transform 260ms cubic-bezier(.32,.72,.32,1);
+  }
+  #about-modal[aria-hidden="false"] .about-card { transform: none; }
+  .about-card .about-eyebrow {
+    margin: 0 0 7px;
+    font: italic 400 13px/1 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink-2); letter-spacing: 0.06em;
+  }
+  .about-card h2 {
+    margin: 0 0 13px;
+    font: 700 22px/1.25 ui-serif, "Iowan Old Style", Georgia, serif;
+    letter-spacing: 0.01em; color: var(--ink);
+  }
+  .about-card .about-body {
+    margin: 0;
+    font: 400 14.5px/1.62 ui-serif, "Iowan Old Style", Georgia, serif;
+    color: var(--ink-2);
+  }
+  /* Plain inline link — same ink as the prose, a simple underline, no
+     hover treatment. */
+  .about-card .about-body a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .about-card .about-explore {
+    margin-top: 20px;
+    background: none; border: 0; padding: 0;
+    font: 700 11px/1 ui-monospace, Menlo, monospace;
+    letter-spacing: 0.08em; text-transform: lowercase;
+    color: var(--ink-soft); cursor: pointer;
+    transition: color 140ms ease;
+  }
+  .about-card .about-explore:hover { color: var(--ink); }
+  #detail-modal {
+    position: fixed; inset: 0; z-index: 50;
+    display: flex; align-items: center; justify-content: center;
+    padding: 24px;
+    pointer-events: none; opacity: 0;
+    transition: opacity 220ms ease;
+  }
+  #detail-modal[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
+  .modal-backdrop {
+    position: absolute; inset: 0;
+    background: rgba(26,22,18,0.32);
+    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
+  }
+  .modal-card {
+    position: relative;
+    max-width: 920px; max-height: calc(100vh - 48px);
+    width: 100%;
+    background: var(--paper);
+    border-radius: 14px;
+    box-shadow:
+      inset 0 0 0 1px rgba(255,255,255,0.6),
+      0 30px 80px rgba(26,22,18,0.22);
+    padding: 30px 34px 26px;
+    overflow: auto;
+    /* The expand-from-card animation is driven by inline transform
+       and opacity set on open/close — see openDetailModal. CSS
+       transition handles the in-between glide. */
+    transform-origin: 50% 50%;
+    will-change: transform, opacity;
+  }
+  .modal-card.is-morphing {
+    transition:
+      transform 380ms cubic-bezier(.32,.72,.32,1),
+      opacity 220ms ease;
+  }
+  /* The static aria-hidden=false rule used to override transform. It
+     now conflicts with our inline FLIP morph — removed. The morph
+     handler explicitly sets the destination transform. */
+  .modal-close {
+    position: absolute; top: 16px; right: 16px;
+    background: var(--paper-2); border: 0;
+    width: 30px; height: 30px; border-radius: 999px;
+    font: 16px/1 ui-monospace, Menlo, monospace; color: var(--ink);
+    box-shadow: var(--raised);
+    cursor: pointer; z-index: 1;
+  }
+  .modal-close:hover { color: var(--accent-2); }
+  .modal-grid {
+    display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px;
+    align-items: start;
+  }
+  @media (max-width: 700px) {
+    .modal-grid { grid-template-columns: 1fr; gap: 22px; }
+    .modal-card { padding: 22px; }
+  }
+  .modal-img {
+    position: relative;
+    background: var(--paper-2); border-radius: 10px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 18px;
+    aspect-ratio: 4 / 3;
+    box-shadow: var(--recess);
+  }
+  .modal-img img {
+    max-width: 100%; max-height: 100%;
+    filter: drop-shadow(0 2px 6px rgba(26,22,18,0.10));
+    transition: opacity 220ms ease;
+  }
+  .modal-img img.swapping { opacity: 0; }
+  /* Pose toggle — bottom-left corner of the modal sketch, icon strip.
+     Same recipe as the time-window slider: recessed paper-2 well, a
+     white sliding pill behind the active button (via .seg-pill), and
+     a color shift on the icon itself. */
+  .pose-toggle {
+    position: absolute; left: 10px; bottom: 10px;
+    display: inline-flex; padding: 3px;
+    background: var(--paper-2); border-radius: 999px;
+    box-shadow: var(--recess);
+    z-index: 2;
+  }
+  .pose-toggle button {
+    background: transparent; border: 0; color: var(--ink-soft);
+    width: 30px; height: 26px; padding: 0; border-radius: 999px;
+    cursor: pointer; position: relative; z-index: 1;
+    display: inline-flex; align-items: center; justify-content: center;
+    transition: color 200ms ease;
+  }
+  .pose-toggle button svg { width: 13px; height: 13px; display: block; }
+  .pose-toggle button:hover { color: var(--ink); }
+  .pose-toggle button[aria-current="true"] { color: var(--ink); }
+  .pose-toggle button .tip {
+    position: absolute; bottom: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%); white-space: nowrap;
+    font: 9px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: lowercase; color: var(--ink-soft);
+    background: var(--paper); padding: 3px 8px; border-radius: 4px;
+    box-shadow: var(--raised);
+    opacity: 0; pointer-events: none; transition: opacity 160ms ease;
+  }
+  .pose-toggle button:hover .tip { opacity: 1; }
+  .pose-toggle[data-unavailable="true"] { display: none; }
+  .pose-toggle button[data-unavailable="true"] { display: none; }
+  .modal-info h2 {
+    margin: 4px 36px 0 0;
+    font: 700 26px/1.1 ui-serif, "Iowan Old Style", "Bookman Old Style", Georgia, serif;
+    color: var(--ink); letter-spacing: 0.01em;
+  }
+  .modal-info .sci {
+    font: italic 13.5px/1.3 ui-serif, Georgia, serif;
+    color: var(--ink-2); margin: 5px 0 18px;
+  }
+  .modal-stats {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
+    margin-bottom: 18px;
+  }
+  .modal-stats > div {
+    background: var(--paper-2);
+    border-radius: 6px; padding: 10px 12px;
+    box-shadow: var(--recess);
+  }
+  .modal-stats .n {
+    display: block;
+    font: 800 17px/1 ui-serif, Georgia, serif;
+    color: var(--ink); font-variant-numeric: tabular-nums;
+  }
+  .modal-stats .lbl {
+    display: block; margin-top: 4px;
+    font: 8.5px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .modal-info .desc {
+    font: 13px/1.55 ui-serif, Georgia, serif;
+    color: var(--ink); margin: 0 0 14px;
+  }
+  .modal-info .desc.placeholder { color: var(--ink-soft); font-style: italic; }
+  .modal-meta {
+    display: flex; flex-wrap: wrap; gap: 16px;
+    font: 9.5px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+  }
+  .modal-meta .k { letter-spacing: 0.12em; text-transform: uppercase; }
+  .modal-meta .v { color: var(--ink); margin-left: 6px; }
+  .modal-meta .v.rare { color: var(--accent-2); }
+  .modal-recordings {
+    margin-top: 24px; padding-top: 16px;
+    box-shadow: inset 0 1px 0 rgba(26,22,18,0.07);
+  }
+  .modal-recordings .rec-head {
+    display: flex; align-items: baseline; justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .modal-recordings h3 {
+    font: 700 10px ui-monospace, Menlo, monospace;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--ink); margin: 0;
+    border-left: 2px solid var(--accent-2); padding-left: 10px;
+  }
+  .modal-recordings .rec-count {
+    font: 9px ui-monospace, Menlo, monospace; color: var(--ink-soft);
+    letter-spacing: 0.06em;
+  }
+  .modal-recordings ol {
+    list-style: none; padding: 0; margin: 0;
+    max-height: 220px; overflow-y: auto;
+    display: flex; flex-direction: column; gap: 4px;
+    padding-right: 4px;
+  }
+  .rec-row {
+    display: grid; grid-template-columns: 30px 1fr auto; gap: 10px;
+    align-items: center;
+    padding: 6px 10px; border-radius: 6px;
+    background: var(--paper);
+    box-shadow: var(--edge);
+    transition: background 160ms ease;
+  }
+  .rec-row:hover { background: var(--paper-2); }
+  .rec-row.expanded { grid-template-columns: 30px 1fr auto; }
+  /* Spectrogram strip — inline below the row header. Click on the row
+     toggles open/closed independent of playback so you can scan
+     spectrograms visually without listening. */
+  .rec-spectro {
+    grid-column: 1 / -1;
+    margin-top: 8px;
+    height: 0; overflow: hidden;
+    border-radius: 4px;
+    /* Paper background — the spectrogram canvas paints ink ON it,
+       matching the sketch palette. */
+    background: var(--paper-2);
+    box-shadow: var(--recess);
+    position: relative;
+    transition: height 240ms cubic-bezier(.7,.05,.2,1);
+  }
+  .rec-row.expanded .rec-spectro { height: 88px; }
+  /* The spectrogram is rendered client-side onto a canvas — we fetch
+     the mp3, decode via Web Audio, run an STFT, and paint columns
+     with our ink palette. No BirdNET-Pi PNG involved. */
+  .rec-spectro canvas {
+    position: absolute; inset: 0;
+    width: 100%; height: 100%;
+    display: block;
+    opacity: 0; transition: opacity 240ms ease;
+  }
+  .rec-spectro canvas.ready { opacity: 1; }
+  .rec-spectro .rec-spectro-loading {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--ink-soft);
+    font: 9px ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
+    text-transform: lowercase;
+    pointer-events: none;
+  }
+  /* Played portion — soft ink wash over the paper ground. */
+  .rec-spectro .rec-spectro-played {
+    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
+    background: linear-gradient(90deg, rgba(26,22,18,0.16), rgba(26,22,18,0.06));
+    pointer-events: none;
+  }
+  /* Cursor — sliding paper pill with a raised shadow, same recipe as
+     the time-window slider's seg-pill. Pops against both the bright
+     paper regions of the spectrogram and the inked vocalization
+     bands. */
+  .rec-spectro .rec-spectro-cursor {
+    position: absolute; top: 50%; left: 0;
+    width: 14px; height: 20px;
+    transform: translate(-50%, -50%);
+    background: var(--paper);
+    border-radius: 999px;
+    box-shadow: 0 1px 3px rgba(26,22,18,0.30), inset 0 0 0 1px rgba(26,22,18,0.18);
+    pointer-events: none;
+    opacity: 0;
+  }
+  .rec-spectro .rec-spectro-cursor::after {
+    content: '';
+    position: absolute; left: 50%; top: -100%; bottom: -100%;
+    width: 1.5px; transform: translateX(-50%);
+    background: rgba(251,247,238,0.85);
+    box-shadow: 0 0 0 0.5px rgba(26,22,18,0.20);
+  }
+  .rec-spectro.armed .rec-spectro-cursor { opacity: 1; }
+  .rec-spectro .rec-spectro-scrub {
+    position: absolute; inset: 0;
+    cursor: ew-resize;
+  }
+  .rec-row .play {
+    background: var(--paper-2); border: 0; color: var(--ink);
+    width: 24px; height: 24px; border-radius: 999px;
+    display: inline-flex; align-items: center; justify-content: center;
+    box-shadow: var(--raised); cursor: pointer;
+    padding: 0;
+  }
+  .rec-row .play svg { width: 8px; height: 8px; }
+  .rec-row .play[data-active="true"] {
+    background: var(--ink); color: var(--paper);
+  }
+  .rec-row .when {
+    font: 11px/1.2 ui-monospace, Menlo, monospace; color: var(--ink);
+  }
+  .rec-row .when small {
+    display: block; font-size: 9px; color: var(--ink-soft);
+    letter-spacing: 0.06em; margin-top: 1px;
+  }
+  .rec-row .conf {
+    font: 10px ui-monospace, Menlo, monospace;
+    color: var(--ink-soft); letter-spacing: 0.06em;
+    font-variant-numeric: tabular-nums;
+  }
+  .rec-empty {
+    padding: 14px;
+    font: 11px/1.5 ui-serif, Georgia, serif; color: var(--ink-soft);
+    text-align: center;
+  }
+  .modal-actions {
+    display: flex; gap: 8px; margin-top: 18px;
+  }
+  .modal-actions .chip {
+    flex: 0 0 auto;
+    background: var(--paper-2);
+    border: 0; color: var(--ink);
+    padding: 7px 12px;
+    border-radius: 4px;
+    font: 10px/1 ui-monospace, Menlo, monospace;
+    text-transform: lowercase; letter-spacing: 0.12em;
+    text-decoration: none;
+    display: inline-flex; align-items: center; gap: 5px;
+    box-shadow: var(--raised);
+    transition: transform 160ms ease;
+  }
+  .modal-actions .chip:hover { transform: translateY(-1px); }
+  .modal-actions .chip.ext::after { content: '↗'; opacity: 0.6; }
+
+  /* Spectrogram appears on first audio play. Recoloured via CSS filter
+     so BirdNET-Pi's default colour spectrogram comes out as a clean
+     monochrome ink strip, matching the rest of the chart. Click to
+     replay; a thin progress bar tracks playback in real time. */
+  .bird-card .spectro-wrap {
+    position: relative;
+    min-height: 0; margin: 6px 0 2px;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 3px;
+    box-shadow: var(--recess);
+  }
+  .bird-card .spectro-wrap:empty { display: none; }
+  .bird-card .spectro-wrap img {
+    width: 100%; max-height: 44px; display: block;
+    object-fit: cover;
+    filter: grayscale(1) brightness(0.94) contrast(1.16);
+    opacity: 0.78;
+    transition: opacity 200ms ease;
+  }
+  .bird-card .spectro-wrap:hover img { opacity: 1; }
+  /* Progress wash: a translucent ink veil that grows as the clip plays */
+  .bird-card .spectro-wrap::after {
+    content: '';
+    position: absolute; top: 0; bottom: 0; left: 0;
+    width: var(--prog, 0%);
+    background: linear-gradient(to right, rgba(26,22,18,0.30), rgba(26,22,18,0.05));
+    pointer-events: none;
+    transition: width 60ms linear;
+  }
+  /* Playhead — thin vertical line at the leading edge */
+  .bird-card .spectro-wrap::before {
+    content: '';
+    position: absolute; top: 0; bottom: 0;
+    left: var(--prog, 0%);
+    width: 1px;
+    background: var(--ink);
+    opacity: var(--playhead, 0);
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+  .bird-card[data-playing="true"] .spectro-wrap::before { --playhead: 0.6; }