/* style.css — Tucker's Camp Lite — design system + themes (ported from the Hunting Camp App) */

/* ============================================================
   IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Bitter:wght@600;700&family=Libre+Baskerville:wght@700&family=Cormorant+Garamond:wght@600;700&display=swap');

/* ============================================================
   DESIGN TOKENS
   One scale for type, spacing and radius, shared by every theme.
   A theme (below) only swaps the color roles and the heading font.
   ============================================================ */
:root {
  /* type scale */
  --fs-xs: 11px;   /* labels, tags, captions */
  --fs-sm: 13px;   /* secondary text, meta */
  --fs-md: 15px;   /* body, rows, buttons */
  --fs-lg: 19px;   /* screen and card titles */
  --fs-xl: 26px;   /* big numbers */
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  /* one corner radius; pills are for tags and chips only */
  --r: 12px;
  --r-pill: 999px;

  --header-h: 56px;
  --nav-h: 64px;
  /* The phone's own status bar (top) and gesture bar (bottom). Inside the Android app Capacitor supplies
     --safe-area-inset-*; older Android web viewers report env() as 0, so those come first. Browsers and
     installed web apps use env(). Everything that touches the top or bottom edge uses these two. */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --transition: 0.2s ease;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ============================================================
   THEMES — color roles only
   Set with <html data-theme="camp|ice|timber"> (Camp is the default).
   ============================================================ */
:root, :root[data-theme="camp"] {
  color-scheme: dark;
  --bg: #100f0b; --surface: #1a1813; --surface-2: #221f18;
  --line: rgba(196,169,106,0.16); --line-soft: rgba(196,169,106,0.10);
  --fill: rgba(255,255,255,0.05); --tint: rgba(196,169,106,0.10);
  --text: #ece3d0; --muted: #a39a86; --dim: #6f6858;
  --accent: #9e4115; --accent-2: #b5521f; --on-accent: #fff; --accent-text: #d9764a;
  --heading: #c9ae70; --head-font: 'Playfair Display', Georgia, serif;
  --tag-bg: rgba(181,82,31,0.16); --tag-text: #e0996f;
  --danger: #d6493a; --ok: #6fae5a;
  --dot-act: #a98be8; --dot-fish: #3d84e8; --dot-hunt: #b5521f;
  --new: #e5533f;
  /* signature: an ember-lit main action (see THEME SIGNATURES below) */
  --btn-primary-bg: linear-gradient(180deg, #b5521f 0%, #8f3a12 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
}
:root[data-theme="ice"] {
  color-scheme: light;
  --bg: #e7f1f9; --surface: #ffffff; --surface-2: #eef5fb;
  --bg-gradient: linear-gradient(180deg, #cfe3f3 0%, #e7f1f9 60%, #f6fafd 100%);
  --line: #5f9bc9; --line-soft: #bcd6ea;
  --fill: rgba(30,90,150,0.06); --tint: rgba(47,127,181,0.14);
  --text: #0b2238; --muted: #42627f; --dim: #7a97b0;
  --accent: #1b4f7d; --accent-2: #2f7fb5; --on-accent: #fff; --accent-text: #174d7c;
  --heading: #0b2238; --head-font: 'Inter', -apple-system, system-ui, sans-serif;
  --tag-bg: rgba(47,127,181,0.14); --tag-text: #174d7c;
  --danger: #b3261e; --ok: #2f7a2a;
  --dot-act: #6a3fc4; --dot-fish: #0e9aa7; --dot-hunt: #c8581d;
  --new: #d6311f;
  /* the main action is a deep glacier blue; the rest are frosted */
  --btn-primary-bg: linear-gradient(135deg, #1b4f7d 0%, #2f7fb5 100%);
  --btn-secondary-bg: linear-gradient(180deg, #f2f8fd 0%, #dcebf7 100%);
  --btn-secondary-text: #174d7c;
}
:root[data-theme="timber"] {
  color-scheme: dark;
  --bg: #1a1e19; --surface: #232922; --surface-2: #2a3128;
  --line: rgba(201,168,106,0.22); --line-soft: rgba(201,168,106,0.12);
  --fill: rgba(255,255,255,0.05); --tint: rgba(200,210,190,0.09);
  --text: #e6eae1; --muted: #a2ab98; --dim: #737c69;
  --accent: #56683c; --accent-2: #667a47; --on-accent: #f3f5ee; --accent-text: #d8c08a;
  --heading: #eee6d0; --head-font: 'Bitter', Georgia, serif;
  --tag-bg: rgba(122,143,82,0.18); --tag-text: #b6c79a;
  --danger: #d0604f; --ok: #8fb26a;
  --dot-act: #b39ae0; --dot-fish: #6f9fdc; --dot-hunt: #667a47;
  --new: #ef6a55;
  /* signature: fine wood grain (a seamless tile), brass hairlines, a soft glow at the top of the page */
  --brass: #c9a86a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.42' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.75  0 0 0 0.55 -0.2'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23g)'/%3E%3C/svg%3E");
  --bg-gradient: radial-gradient(90% 38% at 50% -6%, rgba(170,200,110,0.16), transparent 62%), var(--grain);
  --bg-blend: normal, soft-light;
  --btn-primary-bg: linear-gradient(180deg, #73894a 0%, #4d6031 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
}
/* Autumn Drift (premium concept, local-only for now): oxblood and amber for the peak of the season */
:root[data-theme="autumn-drift"] {
  color-scheme: dark;
  --bg: #1b0f0d; --surface: #26140f; --surface-2: #2f1a13;
  --line: rgba(224,160,64,0.30); --line-soft: rgba(224,160,64,0.14);
  --fill: rgba(255,255,255,0.05); --tint: rgba(224,160,64,0.10);
  --text: #f3e6d0; --muted: #c4a98a; --dim: #8a6f57;
  --accent: #c4622d; --accent-2: #d9793f; --on-accent: #fff3e0; --accent-text: #f0b252;
  --heading: #f4dfb8; --head-font: 'Playfair Display', Georgia, serif;
  --tag-bg: rgba(224,160,64,0.16); --tag-text: #f0b252;
  --danger: #e0604a; --ok: #8fb26a;
  --dot-act: #c9a0e8; --dot-fish: #5fa0e0; --dot-hunt: #e08a3c;
  --new: #ffb347;
  --btn-primary-bg: linear-gradient(180deg, #c4622d 0%, #8f3a1a 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
}

/* Mallard Row (premium, local-only for now): emerald head, bill-yellow accent, cream neck ring, blue wing band */
:root[data-theme="mallard"] {
  color-scheme: dark;
  --bg: #0a120f; --surface: #16221d; --surface-2: #1c2b25;
  --bg-gradient: radial-gradient(90% 26% at 50% 0%, rgba(31,122,85,0.30), transparent 72%), linear-gradient(180deg, #0f1d18 0%, #0a120f 60%);
  --line: rgba(200,218,208,0.20); --line-soft: rgba(200,218,208,0.09);
  --fill: rgba(255,255,255,0.05); --tint: rgba(200,218,208,0.09);
  --text: #e8eee6; --muted: #a3b3a8; --dim: #6d7f74;
  --accent: #1c8260; --accent-2: #2a7f92; --on-accent: #f4f1e4; --accent-text: #e2bf4d;
  --heading: #f3efe0; --head-font: 'Libre Baskerville', Georgia, serif;
  --tag-bg: rgba(28,130,96,0.22); --tag-text: #8fd1b5;
  --danger: #e0604a; --ok: #6fae5a;
  --dot-act: #a98be8; --dot-fish: #3d84e8; --dot-hunt: #c8581d;
  --new: #ff7a59;
  /* signature: a slow sheen on the green actions, and the bottom bar as the wing band */
  --btn-primary-bg: linear-gradient(115deg, #0c4c39 0%, #1c8260 30%, #2a7f92 55%, #1c8260 78%, #0c4c39 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
  --speculum: #2f62ad; --speculum-edge: #e9efe8;
}

/* Wood Duck Hollow (premium, local-only for now): plum and chestnut, teal borders, a green-brown-red crest,
   a red-eye + button, and black, white and blue dissolving slowly behind everything */
:root[data-theme="wood-duck"] {
  color-scheme: dark;
  --bg: #151015; --surface: #221a1e; --surface-2: #2b2126;
  --bg-gradient: radial-gradient(90% 28% at 50% 0%, rgba(120,75,185,0.26), transparent 72%), linear-gradient(180deg, #1c1318 0%, #120c10 60%);
  --line: rgba(95,195,175,0.40); --line-soft: rgba(95,195,175,0.17);
  --fill: rgba(255,255,255,0.05); --tint: rgba(95,195,175,0.09);
  --text: #f1e7da; --muted: #b9a9b4; --dim: #7f6f7c;
  --accent: #5a3a96; --accent-2: #7a54b8; --on-accent: #f6f0ff; --accent-text: #e1b77c;
  --heading: #f6ecd9; --head-font: 'Libre Baskerville', Georgia, serif;
  --tag-bg: rgba(225,183,124,0.16); --tag-text: #e1b77c;
  --danger: #e0604a; --ok: #6fae5a;
  --dot-act: #b39ae0; --dot-fish: #4f8fe0; --dot-hunt: #c8581d;
  --new: #ff7a59;
  --btn-primary-bg: linear-gradient(100deg, #5a3a96 0%, #4b4a87 25%, #3c5a78 50%, #2e6a69 75%, #1f7a5a 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
}

/* Night Watch (premium, local-only for now): ink navy and silver whose sky follows the real moon (see applyMoonSky in
   app.js, which sets --moon, --sky1 and --sky2); lantern amber for accents; the + is a little moon */
:root[data-theme="night-watch"] {
  color-scheme: dark;
  --bg: #070b16; --surface: #0f1626; --surface-2: #151d31;
  --bg-gradient: radial-gradient(120% 36% at 82% 0%, rgba(150,175,235,calc(0.10 + var(--moon, 0.5) * 0.34)), transparent 70%), linear-gradient(180deg, var(--sky1, #0a1226) 0%, var(--sky2, #060a16) 100%);
  --line: rgba(170,190,225,0.22); --line-soft: rgba(170,190,225,0.10);
  --fill: rgba(255,255,255,0.05); --tint: rgba(232,199,122,0.10);
  --text: #dde5f2; --muted: #97a5bf; --dim: #5f6d87;
  --accent: #3d4e78; --accent-2: #4f6296; --on-accent: #eef3ff; --accent-text: #e8c77a;
  --heading: #eef2fa; --head-font: 'Cormorant Garamond', Georgia, serif;
  --tag-bg: rgba(150,175,235,0.16); --tag-text: #b9c8ea;
  --danger: #e0604a; --ok: #6fae5a;
  --dot-act: #b39ae0; --dot-fish: #5f9ae6; --dot-hunt: #d9743a;
  --new: #ff6a55;
  --btn-primary-bg: linear-gradient(180deg, #3d4e78 0%, #26324f 100%);
  --btn-secondary-bg: var(--surface); --btn-secondary-text: var(--text);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-gradient, none);
  background-attachment: fixed;
  background-blend-mode: var(--bg-blend, normal);
  position: relative;
}

/* ============================================================
   LAYOUT
   ============================================================ */
#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}

/* ── App bar ────────────────────────────────────────────── */
#app-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--header-h) + var(--sat));
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sat) var(--sp-4) 0;   /* the phone's status bar sits above the title */
  z-index: 100;
}

#app-header h1 {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
}

/* ── Main scroll area ───────────────────────────────────── */
#main-content {
  flex: 1;
  margin-top: calc(var(--header-h) + var(--sat));
  margin-bottom: 0;
  padding-bottom: calc(var(--nav-h) + var(--sab) + 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - var(--header-h) - var(--sat));
  overscroll-behavior: contain;
}

/* ── Bottom nav ─────────────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--nav-h) + var(--sab));
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  padding-bottom: var(--sab);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-2) 0;
  transition: color var(--transition);
}

.nav-btn.active { color: var(--accent-text); }

/* ============================================================
   NEW DOT — marks a button whose section has something unseen.
   Ringed in the page color so it reads on any fill.
   ============================================================ */
.has-new { position: relative; }
.new-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--new);
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}
.drawer-item .new-dot { position: static; margin-left: auto; box-shadow: none; flex-shrink: 0; }
/* The big round + in the middle of the bottom bar (add a photo) */
.nav-add {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  margin: 0 var(--sp-2);
  position: relative;
  top: -14px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  background: var(--btn-primary-bg);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  padding: 0 0 4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.nav-add:active { filter: brightness(0.92); }
/* Tucker's: the + sits centered on the bar's top border, a size up. The id
   selector outranks the per-theme .nav-add rules (Ice sets position too). */
#bottom-nav .nav-add {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 68px;
  height: 68px;
  font-size: 40px;
  z-index: 1;
}
.nav-btn .new-dot { top: 13px; right: calc(50% - 28px); width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--surface); }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; min-height: 100%; padding-bottom: 32px; }
.screen.active { display: block; }

/* ============================================================
   DIVIDERS
   ============================================================ */
.fade-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--line-soft);
}

.fade-divider-plain {
  height: 1px;
  margin: var(--sp-3) var(--sp-4);
  background: var(--line-soft);
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--sp-5) + var(--sat)) 20px calc(var(--sp-5) + var(--sab));
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
}

.login-title {
  font-family: var(--head-font);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--sp-1);
  text-align: center;
}

.login-subtitle {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
  text-align: center;
}

.login-seg {
  display: flex;
  width: 100%;
  max-width: 320px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 3px;
  margin-bottom: 20px;
}

.login-seg-btn {
  flex: 1;
  padding: 9px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
}

.login-seg-btn.active {
  background: var(--btn-primary-bg);
  color: var(--on-accent);
}
/* the camp's QR code card (Admin > Sign-ups) and the printable poster */
.join-share { margin-top: 14px; background: var(--fill); border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
              display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.join-qr { width: 210px; background: #fff; padding: 6px; border-radius: 12px; }
.join-qr svg { width: 100%; height: auto; display: block; }
.join-qr-cap { font-weight: 700; font-size: var(--fs-sm); color: var(--heading); }
.join-share-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.join-share-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mono { font-family: ui-monospace, Consolas, Menlo, monospace; color: var(--text); }
#print-poster { display: none; }
@media print {
  body.printing { background: #fff !important; }
  body.printing > *:not(#print-poster) { display: none !important; }
  body.printing #print-poster { display: flex !important; flex-direction: column; align-items: center; text-align: center;
                                color: #111; font-family: Georgia, serif; padding-top: 40px; }
  #print-poster .pp-title { font-size: 40px; font-weight: 700; }
  #print-poster .pp-sub { font-size: 20px; margin: 6px 0 28px; }
  #print-poster .pp-qr { width: 70%; max-width: 480px; }
  #print-poster .pp-qr svg { width: 100%; height: auto; }
  #print-poster .pp-how { font-size: 20px; margin-top: 24px; }
  #print-poster .pp-code { font-size: 16px; margin-top: 14px; color: #333; }
}

/* the front door: sign in, then two plain choices for anyone new */
.login-new { width: 100%; max-width: 320px; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.login-new.hidden { display: none; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; margin: 6px 0; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-choice { text-align: left; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--line); border-radius: var(--r);
                padding: 13px 15px; cursor: pointer; font-family: var(--font-sans); }
.login-choice b { display: block; font-size: var(--fs-md); font-weight: 600; }
.login-choice small { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; margin-top: 2px; }
.login-choice[disabled] { opacity: 0.55; cursor: default; }
#join-account, #join-code-wrap, #signup-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.join-title { font-family: var(--head-font); font-size: var(--fs-lg); font-weight: 600; color: var(--heading); margin: 0; }
.join-back { align-self: flex-start; }
.join-found { background: var(--surface); border: 1px solid var(--accent-text); border-radius: var(--r); padding: 12px 14px; margin-bottom: var(--sp-3); }
.join-found span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.join-found b { display: block; font-family: var(--head-font); font-size: var(--fs-lg); color: var(--heading); font-weight: 600; margin-top: 2px; }

.login-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.login-form.hidden { display: none; }

.login-link {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 6px;
  align-self: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px var(--sp-3);
}
.login-note.hidden { display: none; }
#signup-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
#signup-fields.hidden { display: none; }

/* ============================================================
   INPUTS
   ============================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

input::placeholder,
textarea::placeholder { color: var(--dim); }

select option { background: var(--surface); color: var(--text); }

textarea { resize: none; min-height: 80px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary, .btn-gold, .btn-action {
  background: var(--btn-primary-bg);
  color: var(--on-accent);
}
.btn-primary:active, .btn-gold:active, .btn-action:active { filter: brightness(0.92); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--line);
}

.btn-ghost {
  background: none;
  color: var(--accent-text);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

/* compact primary, for "View All" style actions */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-full   { width: 100%; }
.btn-sm     { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4);
}

.card + .card { margin-top: 10px; }

.card-highlight { border-color: var(--accent-text); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.section-title {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ============================================================
   BACK BUTTON
   ============================================================ */
.back-bar {
  display: flex;
  align-items: center;
  padding: 10px var(--sp-3) var(--sp-1);
  gap: 10px;
}

.back-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r);
  transition: all var(--transition);
  font-family: var(--font-sans);
}
.back-btn:active { background: var(--surface-2); }

/* ============================================================
   HOME — section labels, Quick Actions grid
   ============================================================ */
#home-hero-wrap { padding-top: var(--sp-4); }

.section-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-5) var(--sp-4) var(--sp-2);
}
/* label on the left, a small action on the right */
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-5) var(--sp-4) var(--sp-2);
}
.section-row .section-label { margin: 0; }

.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: 0 var(--sp-4);
}
.qa-tile {
  display: block;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition);
}
.qa-tile small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0.8;
}
.qa-tile:active { filter: brightness(0.92); }
.qa-primary {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: var(--on-accent);
}

/* ============================================================
   HOME CALENDAR CARD
   ============================================================ */
.home-cal-card {
  margin: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  padding: 14px 14px 10px;
}

.home-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-nav-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 13px;
  color: var(--muted);
  font-size: var(--fs-md);
  cursor: pointer;
  font-family: var(--font-sans);
}

.home-cal-title { text-align: center; display: flex; align-items: baseline; gap: 6px; }
.home-cal-month { font-family: var(--head-font); font-size: var(--fs-lg); font-weight: 600; color: var(--heading); }
.home-cal-year  { font-size: var(--fs-sm); color: var(--muted); }

.home-cal-chips {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.weather-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.dow-row {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  padding: 0 2px var(--sp-1);
}
.dow-row div {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--dim);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.home-cal-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 3px;
}

/* Calendar markers: a dot for camp visits, a square for hunting / fishing openers */
.cal-marks { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-mk { display: inline-block; width: 5px; height: 5px; }
.cal-mk-act  { border-radius: 50%; background: var(--dot-act); }
.cal-mk-hunt, .cal-mk-fish { width: 6px; height: 6px; border-radius: 1px; }
.cal-mk-hunt { background: var(--dot-hunt); }
.cal-mk-fish { background: var(--dot-fish); }
.cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

.home-cal-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--line-soft);
  margin-top: 10px;
  padding-top: 10px;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
}

/* ============================================================
   BULLETINS PANEL
   ============================================================ */
.bulletins-panel {
  margin: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.bulletins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.bulletins-body {
  padding: var(--sp-3) var(--sp-4);
}

.bulletin-item {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
  padding: 6px 0;
}

.bulletin-item + .bulletin-item {
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   RECENT HARVESTS PANEL
   ============================================================ */
.harvests-panel {
  margin: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.harvests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}

.harvest-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text);
  font-family: var(--font-sans);
}

.harvest-row + .harvest-row {
  border-top: 1px solid var(--line-soft);
}

.harvest-species-icon { font-size: 22px; }

.harvest-info { flex: 1; }

.harvest-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}

.harvest-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 1px;
}

.harvest-arrow {
  color: var(--dim);
  font-size: var(--fs-md);
}

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
  position: fixed;
  top: calc(var(--header-h) + var(--sat) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  width: 90%;
  max-width: 380px;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-md);
  padding: 11px 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  animation: toastIn 0.22s ease;
  pointer-events: auto;
  width: 100%;
}

.toast.toast-success { border-color: var(--ok); color: var(--ok); }
.toast.toast-error   { border-color: var(--danger); color: var(--danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
.modal-overlay.hidden { display: none; }
/* the shared appConfirm/appPrompt modal must sit above any hand-rolled overlay
   that opened it (e.g. the calendar day popup) */
#app-modal { z-index: 9600; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.modal-title {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 10px;
}

.modal-body {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   NAME SETUP / PENDING
   ============================================================ */
#name-setup-modal, #pending-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-5) + var(--sat)) var(--sp-5) calc(var(--sp-5) + var(--sab));
}
#name-setup-modal.hidden, #pending-screen.hidden { display: none; }

.name-setup-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 22px;
  width: 100%;
  max-width: 340px;
}

.name-setup-box h2 {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 6px;
}

.name-setup-box p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.avatar-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.avatar-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition), transform var(--transition);
}
.avatar-swatch.selected {
  border-color: var(--text);
  transform: scale(1.18);
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   UPDATE BANNER
   ============================================================ */
#update-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-5) 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--text);
  z-index: 9998;
  max-width: 320px;
  width: calc(100% - 48px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  text-align: center;
}
#update-banner.hidden { display: none; }
#update-banner span { flex: unset; font-size: var(--fs-md); }

/* ============================================================
   DRAWER
   ============================================================ */
#drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#drawer-overlay.open { opacity: 1; pointer-events: auto; }

#drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 85vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
  z-index: 301;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}
#drawer.open { transform: translateX(0); }

.drawer-header {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.drawer-title {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
}

.drawer-user {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 3px;
}

/* Drawer nav rows: plain text, no icons. The current screen's row
   (.di-active, toggled from showScreen() in app.js) gets a tint and
   an accent bar. */
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--text);
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.drawer-item:active { background: var(--fill); }
.drawer-item.di-active {
  background: var(--tint);
  border-color: var(--line);
  color: var(--accent-text);
  box-shadow: inset 3px 0 0 var(--accent-text);
}

/* Brand mark centered in the space left under the nav rows. The wrap takes
   the leftover height (flex: 1 1 0) and is a size container, so the brand
   scales off it and can never push the nav into a scrollbar. Too short for
   the name/version: just the logo; too short for a legible logo: nothing. */
.drawer-brand-divider { margin: 4px 18px 0; flex-shrink: 0; }
.drawer-brand-wrap {
  flex: 1 1 0;
  min-height: 0;
  margin-top: -6px;   /* cancel .drawer-nav's 6px gap so the wrap starts right at the divider */
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.drawer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
}
.drawer-brand-name { font-family: var(--head-font); font-size: var(--fs-md); color: var(--muted); line-height: 1.2; }
.drawer-brand-version { font-size: var(--fs-xs); color: var(--dim); line-height: 1.2; }
@container (max-height: 119px) {
  .drawer-brand-name, .drawer-brand-version { display: none; }
  }
@container (max-height: 67px) {
  .drawer-brand { display: none; }
}

.drawer-footer {
  padding: 14px var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   CONTESTS — leaderboard read live from the Harvest Log. Each of the
   5 categories is its own collapsible section. Plain numbers for rank
   (no trophy icons), accent color for 1st.
   ============================================================ */
.contest-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.contest-rank {
  width: 24px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dim);
  flex-shrink: 0;
}
.contest-row.contest-first .contest-rank { font-size: var(--fs-md); color: var(--accent-text); }
.contest-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.contest-you-tag { font-size: var(--fs-xs); font-weight: 400; }
.contest-score { font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0; }
.contest-waiting { font-size: var(--fs-sm); color: var(--dim); }
.contest-chevron { color: var(--dim); font-size: var(--fs-md); flex-shrink: 0; transition: transform 0.2s; }
.contest-row.expanded .contest-chevron { transform: rotate(90deg); }

/* ============================================================
   ACCORDION — the one expandable-row style: Settings, Harvest Log,
   Trail Cam, Updates, Trophy Room. A header row that opens into an
   attached panel. (Old class names kept so existing markup works.)
   ============================================================ */
.acc-head, .harvest-row-header, .tc-row-header, .settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  margin-bottom: var(--sp-2);
  transition: border-color 0.2s, background 0.2s;
}
.acc-head.expanded, .harvest-row-header.expanded, .tc-row-header.expanded, .settings-row.expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.acc-title { flex: 1; text-align: left; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.acc-sub   { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-top: 1px; }
.acc-open  { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-text); }
.acc-chev  { color: var(--muted); font-size: var(--fs-md); transition: transform 0.2s; flex-shrink: 0; }
.acc-panel, .harvest-detail-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
}
.tc-carousel {
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r);
  margin-bottom: 10px;
}
.tc-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.2s, border-color 0.2s;
}
.harvest-filter-btn {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--line);
  color: var(--btn-secondary-text);
  border-radius: var(--r-pill);
  padding: 7px 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-sans);
  text-align: center;
  white-space: nowrap;
  min-width: 0;
}
.harvest-filter-btn.active {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: var(--on-accent);
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }
.text-gold    { color: var(--accent-text); }
.text-muted   { color: var(--muted); }
.text-danger  { color: var(--danger); }
.text-center  { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.admin-glance-head {
  font-family: var(--head-font);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading);
  padding: 14px var(--sp-4) 6px;
}
.admin-data {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 9px var(--sp-4);
  font-size: var(--fs-sm);
}
.admin-data + .admin-data { border-top: 1px solid var(--line-soft); }
.admin-data:last-child { padding-bottom: 13px; }
.admin-data span:first-child { color: var(--muted); flex-shrink: 0; }
.admin-data span:last-child  { color: var(--text); font-weight: 600; text-align: right; }
.admin-data span.admin-data-on { color: var(--accent-text); }

.admin-section + .admin-section { border-top: 1px solid var(--line-soft); }
.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px var(--sp-4);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.admin-row:active { background: var(--fill); }
.admin-row-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.admin-row-sub   { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; }
.admin-chev { color: var(--dim); font-size: var(--fs-md); transition: transform 0.2s; }
.admin-row.open .admin-chev { transform: rotate(90deg); color: var(--accent-text); }
.admin-panel-body {
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  padding: 14px var(--sp-4);
}

.admin-member {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
}
.admin-member + .admin-member { border-top: 1px solid var(--line-soft); }
.admin-member:first-child { padding-top: 0; }
.admin-member:last-child  { padding-bottom: 0; }
.admin-member-actions { display: flex; gap: 14px; margin-top: var(--sp-1); }
.admin-member-actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  cursor: pointer;
}
.admin-member-actions button:active { filter: brightness(0.85); }
.admin-pill {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--muted);
}
.admin-pill-on { background: var(--tag-bg); color: var(--tag-text); }

/* ============================================================
   LOGBOOK
   ============================================================ */
.logbook-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px var(--sp-4);
  margin-bottom: var(--sp-3);
}
.logbook-days { font-family: var(--head-font); font-size: var(--fs-md); font-weight: 600; color: var(--heading); }
.logbook-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  margin-top: var(--sp-2);
}
.logbook-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.logbook-cond { margin-left: auto; font-size: var(--fs-xs); color: var(--dim); }
.logbook-text {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.55;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.logbook-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.logbook-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--fill);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.logbook-thumb-x {
  position: absolute;
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 22px;
  padding: 0;
  cursor: pointer;
}
.logbook-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: 10px; }
.logbook-actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--dim);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  cursor: pointer;
}
.logbook-actions button:active { color: var(--accent-text); }
.logbook-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: var(--sp-1);
}
.logbook-pager span { font-size: var(--fs-sm); color: var(--muted); }
.logbook-pager button:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   THEME PICKER (Settings -> Appearance, Admin -> Camp theme)
   ============================================================ */
.theme-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.theme-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
}
.theme-opt.selected { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.theme-opt-name { display: block; font-size: var(--fs-md); font-weight: 600; }
.theme-opt-sub  { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* ============================================================
   ICE SHIMMER — a soft light sweep across the main action, then a long
   pause. Ice theme only, main actions only (.btn-primary, .qa-primary).
   Periods differ per button so a screen's buttons don't pulse in unison.
   ============================================================ */
:root[data-theme="ice"] .btn-primary,
:root[data-theme="ice"] .qa-primary,
:root[data-theme="ice"] .nav-add {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 10px rgba(27,79,125,0.3);
}
:root[data-theme="ice"] .btn-primary::after,
:root[data-theme="ice"] .qa-primary::after,
:root[data-theme="ice"] .nav-add::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: ice-sweep 6s ease-in-out infinite;
}
:root[data-theme="ice"] .btn-primary:nth-of-type(2n)::after { animation-duration: 7.5s; animation-delay: 1.5s; }
:root[data-theme="ice"] .btn-primary:nth-of-type(3n)::after { animation-duration: 8.5s; animation-delay: 3s; }
@keyframes ice-sweep { 0%, 72% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="ice"] .btn-primary::after,
  :root[data-theme="ice"] .qa-primary::after,
  :root[data-theme="ice"] .nav-add::after { animation: none; }
}

/* ============================================================
   THEME SIGNATURES — one touch that makes each theme its own.
   Ice: the light sweep (above). Timber: grain and brass. Camp: ember glow.
   ============================================================ */
/* Timber: fine wood grain on the surfaces (the page has it too), brass hairlines, satin green buttons */
:root[data-theme="timber"] :is(.card, .home-cal-card, .bulletins-panel, .harvests-panel, .admin-card, .logbook-card,
    .acc-head, .harvest-row-header, .tc-row-header, .settings-row, .acc-panel, .harvest-detail-panel,
    .tc-carousel, .tc-card, .qa-tile:not(.qa-primary), .btn-secondary, .modal-box, .name-setup-box, #drawer, .toast) {
  background-image: var(--grain);
  background-blend-mode: soft-light;
}
:root[data-theme="timber"] #app-header { border-bottom-color: var(--brass); }
:root[data-theme="timber"] #bottom-nav { border-top-color: var(--brass); }
:root[data-theme="timber"] .section-label { color: var(--brass); }
:root[data-theme="timber"] .nav-add { border-color: var(--brass); }
:root[data-theme="timber"] :is(.btn-primary, .qa-primary) {
  border-color: var(--brass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 10px rgba(0,0,0,0.4);
}
:root[data-theme="timber"] :is(.btn-primary, .qa-primary, .nav-add):active {
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.45);
}

/* Camp: the main action glows like an ember, slowly breathing (softest on the small + button) */
:root[data-theme="camp"] :is(.btn-primary, .qa-primary) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 9px rgba(232,117,61,0.22);
  animation: ember 5s ease-in-out infinite alternate;
}
:root[data-theme="camp"] .nav-add {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 7px rgba(232,117,61,0.18);
  animation: ember-soft 5s ease-in-out infinite alternate;
}
@keyframes ember {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 6px rgba(232,117,61,0.16); }
  to   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 16px rgba(232,117,61,0.36); }
}
@keyframes ember-soft {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 4px rgba(232,117,61,0.12); }
  to   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px rgba(232,117,61,0.26); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="camp"] :is(.btn-primary, .qa-primary, .nav-add) { animation: none; }
}

/* Autumn Drift: amber hairlines and satin buttons; leaves drift down on the LOWEST layer, so every card and
   every calendar day always sits in front of them (they only ever show in the gaps around content). */
:root[data-theme="autumn-drift"] #app-header { border-bottom-color: rgba(224,160,64,0.5); }
:root[data-theme="autumn-drift"] #bottom-nav { border-top-color: rgba(224,160,64,0.5); }
:root[data-theme="autumn-drift"] :is(.btn-primary, .qa-primary) {
  border-color: rgba(240,178,82,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(196,98,45,0.35);
}
#leaf-layer { display: none; }
:root[data-theme="autumn-drift"] #leaf-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#leaf-layer i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 6px;
  border-radius: 80% 0 80% 0;
  background: #e0a040;
  opacity: 0.55;
  animation: leaf-fall linear infinite;
}
#leaf-layer i:nth-child(even) { background: #c8452c; opacity: 0.6; }
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(0); }
  50%  { transform: translate(24px, 52vh) rotate(200deg); }
  100% { transform: translate(-10px, 108vh) rotate(380deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="autumn-drift"] #leaf-layer { display: none; }
}

/* Mallard Row: the head sheen on the green actions (emerald drifting to teal and back), a white-blue-white stripe under
   the header, and the bottom bar as the wing band: white edge on top, iridescent blue below. */
:root[data-theme="mallard"] :is(.btn-primary, .qa-primary, .nav-add) {
  background-size: 260% 100%;
  animation: mallard-sheen 11s ease-in-out infinite alternate;
}
:root[data-theme="mallard"] :is(.btn-primary, .qa-primary) {
  border-color: rgba(226,191,77,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(12,76,57,0.55);
}
:root[data-theme="mallard"] .nav-add {
  border-color: var(--bg);
  box-shadow: 0 0 0 1px rgba(226,191,77,0.45), 0 4px 14px rgba(12,76,57,0.6);
}
:root[data-theme="mallard"] #app-header {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 0 var(--speculum-edge), inset 0 -3px 0 0 var(--speculum), inset 0 -4px 0 0 var(--speculum-edge);
}
:root[data-theme="mallard"] #bottom-nav {
  border-top: 0;
  background-color: #173f82;
  background-image: linear-gradient(var(--speculum-edge) 0 2px, transparent 2px), linear-gradient(90deg, #173f82, #2f66b8 30%, #4a55ad 55%, #2f66b8 78%, #173f82);
  background-size: 100% 100%, 260% 100%;
  animation: mallard-sheen 11s ease-in-out infinite alternate;
}
:root[data-theme="mallard"] .nav-btn { color: #cfdcf0; }
:root[data-theme="mallard"] .nav-btn.active { color: #f3d36a; }
:root[data-theme="mallard"] .nav-btn .new-dot { box-shadow: 0 0 0 2px #2a5aa8; }
@keyframes mallard-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="mallard"] :is(.btn-primary, .qa-primary, .nav-add, #bottom-nav) { animation: none; }
}

/* Wood Duck Hollow: each bar is a set of soft colour blobs held in place that fade in and out at their own times
   (a random dissolve, nothing slides): green and wine red in the header; blue, purple and black in the footer.
   The + is the red eye; behind everything, black, white and blue drift in opposite directions on the lowest layer
   (#wash-layer), so every card still sits in front. */
@property --h1 { syntax: '<number>'; inherits: false; initial-value: 0.15; }
@property --h2 { syntax: '<number>'; inherits: false; initial-value: 0.1; }
@property --h3 { syntax: '<number>'; inherits: false; initial-value: 0.0; }
@property --h4 { syntax: '<number>'; inherits: false; initial-value: 0.15; }
@property --h5 { syntax: '<number>'; inherits: false; initial-value: 0.0; }
@property --f1 { syntax: '<number>'; inherits: false; initial-value: 0.05; }
@property --f2 { syntax: '<number>'; inherits: false; initial-value: 0.05; }
@property --f3 { syntax: '<number>'; inherits: false; initial-value: 0.05; }
@property --f4 { syntax: '<number>'; inherits: false; initial-value: 0.05; }
@property --f5 { syntax: '<number>'; inherits: false; initial-value: 0.0; }
@keyframes duck-h1 { from { --h1: 0.15; } to { --h1: 0.9; } }
@keyframes duck-h2 { from { --h2: 0.1; } to { --h2: 0.85; } }
@keyframes duck-h3 { from { --h3: 0.0; } to { --h3: 0.75; } }
@keyframes duck-h4 { from { --h4: 0.15; } to { --h4: 0.9; } }
@keyframes duck-h5 { from { --h5: 0.0; } to { --h5: 0.65; } }
@keyframes duck-f1 { from { --f1: 0.05; } to { --f1: 0.85; } }
@keyframes duck-f2 { from { --f2: 0.05; } to { --f2: 0.8; } }
@keyframes duck-f3 { from { --f3: 0.05; } to { --f3: 0.85; } }
@keyframes duck-f4 { from { --f4: 0.05; } to { --f4: 0.8; } }
@keyframes duck-f5 { from { --f5: 0.0; } to { --f5: 0.9; } }
:root[data-theme="wood-duck"] :is(.btn-primary, .qa-primary) {
  border-color: rgba(95,195,175,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(40,22,95,0.6);
}
@property --hp1 { syntax: '<number>'; inherits: false; initial-value: 0.0; }
@property --hp2 { syntax: '<number>'; inherits: false; initial-value: 0.0; }
@keyframes duck-hp1 { from { --hp1: 0.0; } to { --hp1: 0.8; } }
@keyframes duck-hp2 { from { --hp2: 0.0; } to { --hp2: 0.65; } }
:root[data-theme="wood-duck"] #app-header {
  border-bottom: 0;
  background-color: #0a2a1f;
  background-image: radial-gradient(70% 180% at 25% 50%, rgba(110,66,190,var(--hp1)), transparent 72%), radial-gradient(70% 180% at 78% 50%, rgba(150,110,225,var(--hp2)), transparent 72%), radial-gradient(70% 180% at 12% 50%, rgba(24,100,68,var(--h1)), transparent 72%), radial-gradient(70% 180% at 38% 45%, rgba(34,120,80,var(--h2)), transparent 72%), radial-gradient(70% 180% at 66% 55%, rgba(106,40,28,var(--h3)), transparent 72%), radial-gradient(70% 180% at 92% 45%, rgba(20,76,54,var(--h4)), transparent 72%), radial-gradient(70% 180% at 50% 60%, rgba(90,32,22,var(--h5)), transparent 72%), linear-gradient(rgba(6,10,7,0.25), rgba(6,10,7,0.25)), linear-gradient(#0a2a1f, #0d3324);
  box-shadow: inset 0 -2px 0 0 #f7f3ea, inset 0 -5px 0 0 #05030a, inset 0 -7px 0 0 #f7f3ea;
  text-shadow: 0 1px 4px rgba(5,10,5,0.75);
  animation: duck-hp1 11s ease-in-out -3s infinite alternate, duck-hp2 15s ease-in-out -8s infinite alternate, duck-h1 9s ease-in-out -2s infinite alternate, duck-h2 13s ease-in-out -6s infinite alternate, duck-h3 16s ease-in-out -10s infinite alternate, duck-h4 12s ease-in-out -4s infinite alternate, duck-h5 20s ease-in-out -14s infinite alternate;
}
:root[data-theme="wood-duck"] #bottom-nav {
  border-top-color: rgba(225,183,124,0.35);
  background-color: #06060c;
  background-image: radial-gradient(70% 180% at 15% 50%, rgba(27,58,140,var(--f1)), transparent 72%), radial-gradient(70% 180% at 40% 50%, rgba(50,36,120,var(--f2)), transparent 72%), radial-gradient(70% 180% at 70% 50%, rgba(23,62,136,var(--f3)), transparent 72%), radial-gradient(70% 180% at 92% 50%, rgba(44,30,104,var(--f4)), transparent 72%), radial-gradient(70% 180% at 55% 50%, rgba(0,0,0,var(--f5)), transparent 72%), linear-gradient(rgba(6,6,12,0.25), rgba(6,6,12,0.25)), linear-gradient(#08081a, #06060c);
  animation: duck-f1 10s ease-in-out -3s infinite alternate, duck-f2 14s ease-in-out -7s infinite alternate, duck-f3 17s ease-in-out -11s infinite alternate, duck-f4 12s ease-in-out -5s infinite alternate, duck-f5 21s ease-in-out -15s infinite alternate;
}
/* the white-black-white shoulder bars either side of the red-eye + */
:root[data-theme="wood-duck"] #bottom-nav::before,
:root[data-theme="wood-duck"] #bottom-nav::after {
  content: "";
  position: absolute; top: 50%;
  width: 12px; height: 30px; margin-top: -10px;
  background: linear-gradient(90deg, #f7f3ea 0 3px, #05030a 3px 9px, #f7f3ea 9px 12px);
  pointer-events: none;
}
:root[data-theme="wood-duck"] #bottom-nav::before { left: calc(50% - 66px); }
:root[data-theme="wood-duck"] #bottom-nav::after { right: calc(50% - 66px); }
:root[data-theme="wood-duck"] .nav-btn { color: #e9dccb; }
:root[data-theme="wood-duck"] .nav-btn.active { color: #f3d36a; }
:root[data-theme="wood-duck"] .nav-add {
  background: radial-gradient(circle at 36% 30%, #ff7a55 0%, #d8331d 50%, #8a180e 100%);
  color: #0a0508;
  box-shadow: 0 0 0 2px #e6a83a, 0 4px 14px rgba(150,30,15,0.55);
}
#wash-layer { display: none; }
/* Wood Duck Hollow body: a stationary, soft gradient running across the screen from a light wheat on the left to a
   chestnut red on the right, like the bird's own flank. The wheat side carries fine, slightly blurred zigzag barring;
   the red side carries white flecks. Loose section labels sit on dark chips so they stay readable on any part of it. */
:root[data-theme="wood-duck"] #wash-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #e2cfa4 0%, #d8c08f 16%, #c39c6b 34%, #a8714a 52%, #8c4a2c 70%, #74301f 86%, #5e2418 100%);
}
/* the breast flecks: white flecks over the chestnut red on the right, fading out toward the wheat; two layers that
   fade in and out at different times (nothing moves) */
:root[data-theme="wood-duck"] #wash-layer i {
  display: block;
  position: absolute; left: auto; right: 0; top: 0; height: 100%; width: 65%;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 35%, transparent 100%);
}
:root[data-theme="wood-duck"] #wash-layer i.a { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2222%22%3E%3Cg%20fill%3D%22%23fff4e4%22%20opacity%3D%220.6%22%3E%3Ccircle%20cx%3D%2212.5%22%20cy%3D%2213.7%22%20r%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%2211.3%22%20cy%3D%223.4%22%20r%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%2221.7%22%20cy%3D%2212.5%22%20r%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%2227.4%22%20cy%3D%226.4%22%20r%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%2212.0%22%20cy%3D%2216.1%22%20r%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%2215.2%22%20cy%3D%226.8%22%20r%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%2220.7%22%20cy%3D%229.6%22%20r%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%2211.8%22%20r%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%221.1%22%20cy%3D%220.5%22%20r%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%2227.4%22%20cy%3D%226.9%22%20r%3D%220.54%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-size: 42px 33px; animation: fleck-a 9s ease-in-out infinite alternate; }
:root[data-theme="wood-duck"] #wash-layer i.b { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2226%22%3E%3Cg%20fill%3D%22%23fff4e4%22%20opacity%3D%220.6%22%3E%3Ccircle%20cx%3D%2219.2%22%20cy%3D%220.7%22%20r%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2216.9%22%20r%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%2220.1%22%20cy%3D%2218.5%22%20r%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%2216.1%22%20cy%3D%2216.4%22%20r%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%2216.9%22%20cy%3D%2221.5%22%20r%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%222.4%22%20cy%3D%2218.6%22%20r%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%2220.9%22%20cy%3D%2218.6%22%20r%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%2218.6%22%20cy%3D%226.2%22%20r%3D%220.59%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-size: 51px 39px; animation: fleck-b 13s ease-in-out -5s infinite alternate; }
/* the flank barring: fine dark-brown zigzag lines on the wheat side, slightly blurred, fading out before the chestnut */
:root[data-theme="wood-duck"] #wash-layer::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22M0%203%203%200%206%203%209%200%2012%203%2015%200%2018%203M0%208%203%205%206%208%209%205%2012%208%2015%205%2018%208%22%20fill%3D%22none%22%20stroke%3D%22%235c3a1e%22%20stroke-width%3D%22.8%22%20opacity%3D%22.32%22%2F%3E%3C%2Fsvg%3E'); background-size: 18px 10px;
  filter: blur(0.9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 62%);
}
@keyframes fleck-a { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes fleck-b { from { opacity: 1; } to { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="wood-duck"] #wash-layer i { animation: none; } }
:root[data-theme="wood-duck"] .section-label {
  background: rgba(21,16,21,0.82);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  width: fit-content;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="wood-duck"] :is(#app-header, #bottom-nav) { animation: none; }
}

/* ============================================================
   EXTRAS (premium themes)
   ============================================================ */
.extras-intro { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.extras-card { margin-bottom: var(--sp-3); }
.extras-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.extras-name { font-family: var(--head-font); font-size: var(--fs-lg); font-weight: 600; color: var(--heading); }
.extras-pill { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 9px;
               border-radius: var(--r-pill); background: var(--tag-bg); color: var(--tag-text); white-space: nowrap; }
.extras-pill.ok { background: rgba(111,174,90,0.18); color: var(--ok); }
.extras-pill.trial { background: transparent; border: 1px solid var(--line); color: var(--accent-text); }
.extras-desc { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; margin: var(--sp-2) 0; }
.extras-swatches { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.extras-swatches i { width: 26px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.18); }
.extras-avail { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.extras-note { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.extras-btns { display: flex; gap: var(--sp-2); }
.extras-btns .btn { flex: 1; }
.extras-btns .btn[disabled] { opacity: 0.6; cursor: default; }
.extras-testing-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
                      padding: 3px 9px; border-radius: var(--r-pill); background: var(--tag-bg); color: var(--tag-text); margin-bottom: var(--sp-2); }
.extras-testing-btn { margin-bottom: var(--sp-2); }


/* Night Watch: silver hairlines, steel main actions, a slightly translucent header and footer, and the + as a pale moon
   whose halo grows with the moon's brightness. */
:root[data-theme="night-watch"] #app-header {
  background: rgba(9,14,26,0.95);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-theme="night-watch"] #bottom-nav {
  background: rgba(15,22,38,0.97); border-top-color: var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:root[data-theme="night-watch"] :is(.btn-primary, .qa-primary) {
  border-color: rgba(200,215,245,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 14px rgba(5,10,30,0.6);
}
:root[data-theme="night-watch"] .nav-add {
  background: radial-gradient(circle at 34% 30%, #fbfcff 0%, #d5deef 52%, #a2b0cb 100%);
  color: #0a0f1c;
  box-shadow: 0 0 0 1px rgba(200,215,245,0.40), 0 0 calc(10px + var(--moon, 0.5) * 22px) rgba(180,200,255,calc(0.25 + var(--moon, 0.5) * 0.45));
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ============================================================
   TUCKER'S — old color names, mapped onto the theme roles
   Tucker's screens still use these names in inline styles; pointing them
   at the theme roles makes every screen follow the chosen theme.
   ============================================================ */
:root {
  --gold:           var(--heading);
  --gold-bright:    var(--heading);
  --gold-dim:       var(--line);
  --gold-glow:      var(--tint);
  --orange:         var(--accent);
  --orange-bright:  var(--accent-2);
  --copper:         var(--accent-2);
  --blue:           var(--dot-fish);
  --blue-bright:    var(--dot-fish);
  --forest:         var(--bg);
  --forest-mid:     var(--surface-2);
  --forest-card:    var(--surface);
  --card-border:    var(--line);
  --card-border-hi: var(--line);
  --text-warm:      var(--text);
  --text-muted:     var(--muted);
  --text-dim:       var(--dim);
  --success:        var(--ok);
  --alert-red:      var(--new);
  --alert-red-dim:  color-mix(in srgb, var(--new) 35%, transparent);
  --alert-red-glow: color-mix(in srgb, var(--new) 12%, transparent);
  --radius-sm:      var(--r);
  --radius-md:      var(--r);
  --radius-lg:      var(--r);
  --radius-xl:      var(--r);
  --font-serif:     var(--head-font);
}