/* ============================================================
   Basset Hound Down — styles.css v22
   Playfair Display (display) + DM Sans (body)
   Warm amber/cream/terracotta • Accordion-first layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:           #fdf6ed;
  --paper:        rgba(255,252,247,0.92);
  --ink:          #241710;
  --ink2:         #5c3d2c;
  --muted:        #8a6550;
  --subtle:       #c3a080;
  --accent:       #e8823a;
  --accent-deep:  #c45c1a;
  --accent-glow:  rgba(232,130,58,0.14);
  --line:         rgba(140,88,60,0.12);
  --line-strong:  rgba(140,88,60,0.22);
  --shadow-sm:    0 2px 8px rgba(92,40,12,0.07);
  --shadow-md:    0 8px 28px rgba(92,40,12,0.11);
  --shadow-lg:    0 20px 56px rgba(92,40,12,0.15);
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --shell:        min(1080px, calc(100vw - 32px));
  --transition:   0.2s cubic-bezier(0.4,0,0.2,1);
  --accord-gap:   10px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65;
  background-color:var(--bg); color:var(--ink);
  min-height:100dvh; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 5% 0%,rgba(255,210,160,.38) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 10%,rgba(240,180,110,.24) 0%,transparent 55%),
    linear-gradient(170deg,#fdf8f1 0%,#faf2e5 50%,#f8edd8 100%);
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Playfair Display',Georgia,serif; line-height:1.12; color:var(--ink); font-weight:700; }
h1 { font-size:clamp(1.9rem,4.5vw,3.4rem); }
h2 { font-size:clamp(1.4rem,3vw,2.2rem); }
h3 { font-size:clamp(1.1rem,2vw,1.4rem); }
p  { color:var(--ink2); line-height:1.7; }
a  { color:inherit; text-decoration:none; }
button,input,textarea,select { font-family:inherit; font-size:inherit; }
img,video { display:block; max-width:100%; height:auto; }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:absolute;top:-40px;left:0;z-index:9999;padding:8px 16px;background:var(--accent);color:#fff;border-radius:0 0 var(--radius-sm) 0;font-weight:700;transition:top .2s; }
.skip-link:focus { top:0; }

.eyebrow { font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem; }

/* ── Layout ─────────────────────────────────────────────────── */
.shell { width:var(--shell); margin-inline:auto; position:relative; z-index:1; }
.panel { background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); }
.panel-soft { background:rgba(255,249,241,.8);border:1px solid var(--line);border-radius:var(--radius-md); }
.section-panel { padding:clamp(20px,3.5vw,40px); }
.hidden { display:none !important; }

/* ── Nav ────────────────────────────────────────────────────── */
.site-header { position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(14px,2.5vw,36px);height:64px;background:#fdf6edee;border-bottom:1px solid var(--line); }
.brand { display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;color:var(--ink);flex-shrink:0; }
.brand-logo { width:36px;height:36px;border-radius:9px;object-fit:cover; }
.brand-tagline { display:block;font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.06em;color:var(--muted);line-height:1;margin-top:2px; }
.nav { display:flex;align-items:center;gap:2px; }
.nav a { padding:7px 12px;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--ink2);transition:background var(--transition),color var(--transition);white-space:nowrap; }
.nav a:hover,.nav a.active { background:var(--accent-glow);color:var(--accent-deep); }
.nav-toggle { display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;padding:8px; }
.nav-toggle span { display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--transition),opacity var(--transition); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;font-weight:700;font-size:.88rem;text-decoration:none;transition:all var(--transition);white-space:nowrap;line-height:1; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 6px 18px rgba(196,92,26,.26); }
.btn-primary:hover { box-shadow:0 10px 26px rgba(196,92,26,.34);transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { background:rgba(255,255,255,.88);color:var(--ink2);border:1px solid var(--line-strong); }
.btn-ghost:hover { background:#fff;border-color:var(--accent);color:var(--accent-deep); }
.btn-sm { padding:7px 14px;font-size:.8rem; }

/* ── Hero ───────────────────────────────────────────────────── */
main { padding-block:16px 80px; }
.hero { display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px);align-items:center;min-height:360px; }
.hero-copy { display:flex;flex-direction:column;justify-content:center; }
.hero-copy h1 { margin-bottom:14px; }
.lede { font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--muted);margin-bottom:24px;max-width:46ch; }
.hero-actions { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px; }
.motto { font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle); }
.stat-row { display:flex;gap:24px;flex-wrap:wrap;margin-top:20px; }
.stat-item strong { display:block;font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--accent);line-height:1; }
.stat-item span { font-size:.75rem;color:var(--muted);font-weight:500; }
.hero-spotlight { position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--bg);border:none;cursor:pointer;padding:0;width:100%; }
.hero-spotlight img { width:100%;height:100%;object-fit:cover; }
.hero-play-btn { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.14);transition:background var(--transition); }
.hero-spotlight:hover .hero-play-btn { background:rgba(0,0,0,.26); }
.hero-play-icon { width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform var(--transition); }
.hero-spotlight:hover .hero-play-icon { transform:scale(1.08); }

/* ── Accordion stack ────────────────────────────────────────── */
.accordion-stack { display:flex;flex-direction:column;gap:var(--accord-gap);margin-top:clamp(12px,2vw,20px); }

.accordion-panel { border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--transition),background var(--transition); }
.accordion-panel.is-open {
  box-shadow:var(--shadow-md);
  /* User feedback 2026-04-30: 'the background color of an expanded
     panel should shift slightly to indicate that it is open, then
     restore when it is closed or when another panel is open.'
     Soft amber wash on the open panel; non-open panels stay on the
     default surface so the contrast tells the visitor which section
     is currently expanded. */
  background:rgba(232,130,58,.05);
}

.accordion-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 22px; background:transparent; border:none; cursor:pointer;
  text-align:left; transition:background var(--transition);
}
.accordion-trigger:hover { background:rgba(232,130,58,.06); }
.accordion-panel.is-open .accordion-trigger { background:rgba(232,130,58,.05); border-bottom:1px solid var(--line); }

.accordion-trigger-inner { display:flex;align-items:center;gap:14px;flex:1;min-width:0; }
.accordion-icon { font-size:1.2rem;flex-shrink:0;width:28px;text-align:center; }
.accordion-title { display:block;font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.2; }
/* Subtitle wraps on narrow screens; ellipsis only kicks in on wider screens where a
   single-line truncation looks intentional. Without this, the postcard panel sub-
   description gets sliced off mid-word on phones. */
.accordion-sub { display:block;font-size:.78rem;color:var(--muted);margin-top:2px;font-weight:400;line-height:1.35;word-wrap:break-word;overflow-wrap:break-word; }
@media (min-width:720px) {
  .accordion-sub { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40ch; }
}
.accordion-panel.is-open .accordion-title { color:var(--accent-deep); }

/* Animated chevron */
.accordion-chevron {
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:transform var(--transition);
}
.accordion-chevron::before,.accordion-chevron::after {
  content:''; position:absolute; width:8px; height:2px;
  background:var(--muted); border-radius:1px; transition:transform var(--transition),background var(--transition);
}
.accordion-chevron::before { transform:rotate(45deg) translateX(-3px); }
.accordion-chevron::after  { transform:rotate(-45deg) translateX(3px); }
.accordion-trigger[aria-expanded="true"] .accordion-chevron::before { transform:rotate(-45deg) translateX(-3px);background:var(--accent); }
.accordion-trigger[aria-expanded="true"] .accordion-chevron::after  { transform:rotate(45deg) translateX(3px);background:var(--accent); }

.accordion-body { padding:22px 24px 24px; animation:bodyReveal .22s ease; }
@keyframes bodyReveal { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* ── Player ─────────────────────────────────────────────────── */
.player-layout { display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start; }
.player-main { display:flex;flex-direction:column;gap:14px; }
/* "ℹ️" button on the now-playing meta card — opens a popover with AI scan details
   for the current item. Hidden by default; toggles on click; closes on outside click. */
.ai-insights-toggle {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:1px solid transparent;border-radius:50%;
  background:transparent;cursor:pointer;font-size:.95rem;line-height:1;
  /* position+z-index keep the button above the .featured-player stacking context
     even if a future layout change places them in the same area. Stays well
     under popover (1000), lightbox (500), site-header (100). */
  position:relative;z-index:1;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.ai-insights-toggle:hover { background:var(--accent-glow);border-color:var(--accent); }
.ai-insights-toggle[aria-expanded="true"] { background:var(--accent-glow);border-color:var(--accent);transform:scale(1.05); }
.ai-insights-popover {
  /* position:fixed so it can't get clipped by an ancestor's overflow:hidden.
     JS (openAiInsightsPopover) sets top/left from the ⓘ button's bounding
     rect when the popover opens. */
  position:fixed;min-width:240px;max-width:min(340px,92vw);
  padding:12px 14px;border-radius:10px;background:#fff;
  border:1.5px solid var(--accent);box-shadow:0 12px 28px rgba(0,0,0,0.12);
  font-size:.82rem;color:var(--ink2);line-height:1.5;z-index:1000;
}
.ai-insights-popover.hidden { display:none; }
.ai-insights-popover .ai-insights-empty { color:var(--muted);font-style:italic; }
.ai-insights-popover .ai-insights-close {
  display:block;text-align:right;font-size:.74rem;color:var(--muted);
  text-decoration:none;margin:0 0 6px;letter-spacing:.04em;
}
.ai-insights-popover .ai-insights-close:hover { color:var(--accent-deep);text-decoration:underline; }
.ai-insights-popover h4 {
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  margin:8px 0 4px;color:var(--muted);font-weight:700;
}
.ai-insights-popover h4:first-child { margin-top:0; }
/* When the close link is the first-child, the next h4 still wants its own
   top margin since the close link is essentially a header strip. */
.ai-insights-popover .ai-insights-close + h4 { margin-top:0; }
.ai-insights-popover .ai-tag {
  display:inline-block;margin:1px 3px 1px 0;padding:2px 8px;border-radius:999px;
  background:var(--accent-glow);color:var(--accent-deep);font-size:.74rem;
}

/* aspect-ratio 4:5 (was 16:9): most reels are filmed portrait (9:16) on
   phones; in a 16:9 frame they got squeezed to fit-by-height with huge
   black bars on the sides. 4:5 is the sweet spot — portrait videos use
   nearly the full frame width, landscape videos still display fully
   (letterboxed top/bottom but only by a small band). max-height keeps
   the frame from growing too tall on narrow viewports. */
.featured-player { border-radius:var(--radius-md);overflow:hidden;background:#1a1008;aspect-ratio:4/5;position:relative;max-height:78vh; }
.featured-player img,.featured-player video { width:100%;height:100%;object-fit:cover; }
/* Subtle group labels for the two control rows (Reel buttons in the
   player-controls row, Music buttons in the .np-swap-bar). Small +
   muted so they don't compete with the buttons but make the grouping
   obvious — both rows have prev/next pairs that would otherwise look
   identical. */
.control-group-label { font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px;align-self:center; }
/* Fullscreen-only overlay: prev / swap / next buttons that ride along into
   fullscreen so the user can change tracks without exiting. Hidden in
   normal panel viewing (the panel-side .np-swap-bar covers that case).
   Both standard and -webkit-fullscreen pseudos required for Safari. */
.featured-player .player-overlay-controls {
  position:absolute;left:50%;bottom:84px;transform:translateX(-50%);
  display:none;gap:14px;z-index:6;pointer-events:auto;
}
.featured-player:fullscreen .player-overlay-controls,
.featured-player:-webkit-full-screen .player-overlay-controls { display:flex; }
.featured-player:fullscreen,
.featured-player:-webkit-full-screen { aspect-ratio:auto;max-height:none;width:100%;height:100%; }
.featured-player .player-overlay-controls button:hover { background:rgba(0,0,0,.85); }
/* When the player is showing the housekeeping placeholder (no media), release the
   16:9 aspect ratio so the message fits — especially on mobile where a 16:9 box is
   barely 200px tall. */
.featured-player.is-empty { aspect-ratio:auto;background:linear-gradient(180deg,#fdf6ed,#f6e3c8);min-height:280px; }
.featured-player-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 18px;gap:10px; }
.featured-player-empty-icon { width:72px;height:72px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,0.18);object-fit:cover; }
.featured-player-empty-title { margin:4px 0 0;font-size:1.05rem;color:#3a2a18;font-family:'Playfair Display',serif; }
.featured-player-empty-msg { margin:0;font-size:.88rem;color:#5a4528;max-width:420px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word; }
@media (max-width:540px) {
  .featured-player.is-empty { min-height:240px; }
  .featured-player-empty { padding:18px 14px; }
  .featured-player-empty-icon { width:56px;height:56px; }
  .featured-player-empty-title { font-size:.98rem; }
  .featured-player-empty-msg { font-size:.82rem; }

  /* Mobile button-row layout (Now Playing).
     User feedback 2026-04-30: 'on mobile screen the music menu buttons
     and the reel menu buttons wrap around. space each set of buttons
     out so that they remain visible but don't wrap in a way that
     offsets their position with weird margins on mobile site.'
     Both rows (.np-swap-bar music controls + .player-controls reel
     controls) switch to a no-wrap flex layout where buttons share the
     row equally via flex:1, with smaller padding/font so all buttons
     fit on a single line at iPhone-narrow widths. The "Music" / "Reel"
     group labels are hidden on mobile to free up horizontal space —
     the icon+label inside each button still tells the visitor what
     they do, and the bar's surrounding context (Now Playing card vs
     featured-player wrapper) makes the grouping unambiguous. */
  .np-swap-bar,
  .player-controls {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .np-swap-bar > button,
  .player-controls > button {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 6px;
    font-size: .72rem;
    /* Truncate cleanly if a button's label is wider than its share. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .np-swap-bar .control-group-label,
  .player-controls .control-group-label {
    display: none;
  }
  /* The history-prev / next circular buttons in .player-controls have a
     fixed 38×38 size from .btn-history; carve out so flex:1 doesn't
     stretch them into rectangles. */
  .player-controls .btn-history { flex: 0 0 auto; }
}
.featured-poster-wrap { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.16); }
.play-btn { width:64px;height:64px;border-radius:50%;border:none;background:rgba(255,255,255,.93);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform var(--transition); }
.play-btn:hover { transform:scale(1.08); }
.player-controls { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.player-counter { font-size:.78rem;color:var(--muted);margin-left:auto; }
.player-meta { display:flex;flex-direction:column;gap:12px; }
.meta-card { padding:16px 18px; }
.meta-card h3 { font-size:1rem;margin-bottom:6px; }
.meta-card p  { font-size:.85rem;color:var(--muted);max-height:260px;overflow-y:auto;line-height:1.5;padding-right:8px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--accent-glow) transparent; }
.meta-card p.eyebrow { max-height:none;overflow:visible;padding-right:0; }
.meta-card p::-webkit-scrollbar { width:6px; }
.meta-card p::-webkit-scrollbar-track { background:rgba(0,0,0,.04);border-radius:3px; }
.meta-card p::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:3px; }
.meta-card p::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* Long factoid lists in Leaflet map popups (visited-places). */
.leaflet-popup-content { max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable; }
.leaflet-popup-content::-webkit-scrollbar { width:6px; }
.leaflet-popup-content::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:3px; }

/* Admin: keep individual cards within long preview/list panels capped so the panel doesn't
   stretch indefinitely. The admin-panel cap below kicks in only on the long-list panels —
   short forms (login, login-email, etc.) opt out via .admin-panel-short. */
.admin-panel-scroll { max-height:540px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin; }
.admin-panel-scroll::-webkit-scrollbar { width:8px; }
.admin-panel-scroll::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:4px; }
.admin-panel-scroll::-webkit-scrollbar-thumb:hover { background:var(--accent); }
/* Auto-scroll the obvious long-list containers without each panel having to opt in by class. */
#scanStatusList,
#mediaLibraryList,
#insightsList,
#chatEventsList,
#notesList,
#jobsList,
#ordersList,
#musicTrackList,
#friendRows,
#merchRows,
#locationRows,
#fbGcsObjectList,
#usersList { max-height:540px;overflow-y:auto;padding-right:6px;scrollbar-gutter:stable;scrollbar-width:thin; }
#scanStatusList::-webkit-scrollbar,
#mediaLibraryList::-webkit-scrollbar,
#insightsList::-webkit-scrollbar,
#chatEventsList::-webkit-scrollbar,
#notesList::-webkit-scrollbar,
#jobsList::-webkit-scrollbar,
#ordersList::-webkit-scrollbar,
#musicTrackList::-webkit-scrollbar,
#friendRows::-webkit-scrollbar,
#merchRows::-webkit-scrollbar,
#locationRows::-webkit-scrollbar,
#fbGcsObjectList::-webkit-scrollbar,
#usersList::-webkit-scrollbar { width:8px; }
#scanStatusList::-webkit-scrollbar-thumb,
#mediaLibraryList::-webkit-scrollbar-thumb,
#insightsList::-webkit-scrollbar-thumb,
#chatEventsList::-webkit-scrollbar-thumb,
#notesList::-webkit-scrollbar-thumb,
#jobsList::-webkit-scrollbar-thumb,
#ordersList::-webkit-scrollbar-thumb,
#musicTrackList::-webkit-scrollbar-thumb,
#friendRows::-webkit-scrollbar-thumb,
#merchRows::-webkit-scrollbar-thumb,
#locationRows::-webkit-scrollbar-thumb,
#fbGcsObjectList::-webkit-scrollbar-thumb,
#usersList::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:4px; }
.sound-btn { display:flex;align-items:center;gap:7px;padding:7px 14px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background var(--transition); }
.sound-btn:hover { background:rgba(0,0,0,.8); }

/* ── Search ─────────────────────────────────────────────────── */
.search-form { display:flex;gap:0;max-width:580px;margin-bottom:12px; }
.search-input-wrap { display:flex;flex:1;min-width:0; }
.search-input { flex:1;padding:11px 16px;border:1.5px solid var(--line-strong);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);background:#fff;color:var(--ink);outline:none;transition:border-color var(--transition); }
.search-input:focus { border-color:var(--accent); }
.search-submit { padding:11px 20px;border-radius:0 var(--radius-md) var(--radius-md) 0;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-weight:700;cursor:pointer;transition:opacity var(--transition); }
.search-submit:hover { opacity:.9; }
.engine-pills { display:flex;gap:6px;flex-wrap:wrap;margin-top:8px; }
.engine-pill { display:flex;align-items:center;gap:4px;font-size:.78rem;font-weight:500;cursor:pointer;color:var(--ink2); }
.engine-pill input[type="radio"] { display:none; }
.engine-pill span { padding:4px 12px;border-radius:999px;border:1.5px solid var(--line-strong);transition:all var(--transition); }
.engine-pill input:checked + span { background:var(--accent);border-color:var(--accent);color:#fff; }
.engine-pill:hover span { border-color:var(--accent);color:var(--accent-deep); }
.search-note { font-size:.8rem;color:var(--subtle); }
.home-help-toggle { display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.82rem;color:var(--muted);cursor:pointer;background:none;border:none;padding:0;transition:color var(--transition); }
.home-help-toggle:hover { color:var(--accent); }
.home-help-box { margin-top:12px;padding:14px 18px;background:rgba(232,130,58,.07);border:1px solid rgba(232,130,58,.2);border-radius:var(--radius-md);font-size:.87rem;color:var(--ink2);display:none; }
.home-help-box.visible { display:block; }
.home-help-box code { background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px;font-family:monospace; }

/* ── Chat ───────────────────────────────────────────────────── */
.chat-shell { display:flex;flex-direction:column;gap:14px;max-width:620px; }
.chat-log { min-height:160px;max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent; }
.chat-bubble { max-width:82%;padding:11px 15px;border-radius:var(--radius-md);font-size:.9rem;line-height:1.55;animation:bubbleIn .2s ease; }
@keyframes bubbleIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }
.chat-bubble.user  { align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md); }
.chat-bubble.hound { align-self:flex-start;background:rgba(255,250,243,.97);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px; }
.typing-dots { display:inline-flex;gap:3px; }
.typing-dots span { width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dotPulse 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1.1);opacity:1} }
.chat-form-row { display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap; }
.chat-input { flex:1 1 100%;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:rgba(255,255,255,.92);color:var(--ink);resize:none;outline:none;transition:border-color var(--transition);min-height:42px;max-height:110px; }
.chat-input:focus { border-color:var(--accent); }
#chatMic { padding:10px 12px;font-size:1.05rem;line-height:1; }
#chatMic.chat-mic-listening { background:#fde0e0;border-color:#c43030;color:#a82020;animation:chatMicPulse 1.4s infinite; }
@keyframes chatMicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(196,48,48,.45)} 70%{box-shadow:0 0 0 10px rgba(196,48,48,0)} }
/* On wider screens, restore the single-line layout: input flex-grows alongside controls. */
@media (min-width: 560px) {
  .chat-input { flex:1 1 auto; }
}

/* ── Note form ──────────────────────────────────────────────── */
.note-form { display:flex;flex-direction:column;gap:14px;max-width:580px; }
.honeypot { position:absolute;left:-9999px;opacity:0; }
.field-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.field-group label { display:block;font-size:.82rem;font-weight:600;color:var(--ink2);margin-bottom:8px; }
.field-group { margin-bottom:4px; }
.field-group input,.field-group textarea { width:100%;padding:10px 13px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(255,255,255,.92);color:var(--ink);outline:none;transition:border-color var(--transition);resize:vertical; }
.field-group input:focus,.field-group textarea:focus { border-color:var(--accent);background:#fff; }
.form-actions { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.form-status { font-size:.85rem;color:var(--muted); }
.form-status.success { color:#3a8a4e; }
.form-status.error   { color:#c0392b; }
/* Postcard send animation: a small paw print bounces next to the
   'carrying your postcard…' status text while the POST is on the wire.
   Removed when className flips to .success or .error. */
.form-status.is-sending::after {
  content:'🐾';
  display:inline-block;
  margin-left:8px;
  animation: bhd-postcard-pulse 1.1s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes bhd-postcard-pulse {
  0%,100% { transform:translateX(0)    scale(1);   opacity:1; }
  50%     { transform:translateX(8px)  scale(1.1); opacity:.7; }
}
@media (prefers-reduced-motion: reduce) {
  .form-status.is-sending::after { animation:none; opacity:.6; }
}

/* Now-playing audio buttons — "this is the source you're hearing right now"
   indicator. Toggled by _setActiveAudio in script.v22.js after a successful
   Swap / Prev / Next / Original click. Mutually exclusive: at most one of
   the two button groups (alt-music vs original-audio) carries .np-audio-active
   at any given moment so the visitor can tell at a glance which audio source
   is currently audible. The visual is a soft accent fill + accent-deep border
   + accent-deep text — clearly distinct from the resting state without being
   loud enough to compete with the busy-pill or the Now Playing card itself. */
.np-swap-bar .np-audio-active {
  background: var(--accent-glow) !important;
  border-color: var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  box-shadow: 0 0 0 1px var(--accent-deep) inset;
}

/* Universal "button is busy with backend work" indicator. Any button can opt
   in by toggling .bhd-btn-busy + aria-busy="true"; the JS helper bhdButtonBusy()
   in script.v22.js / admin.js does that and inserts an adjacent .bhd-btn-busy-
   status pill with a small label so the user sees instant feedback even when
   the underlying request takes a while. Three signals together so the busy
   state survives different button styles: (1) a tiny rotating paw print on
   the button itself, (2) reduced opacity, (3) the status pill next to it. */
.bhd-btn-busy { position:relative; opacity:.7; cursor:progress !important; }
.bhd-btn-busy::after {
  content:'🐾';
  display:inline-block;
  margin-left:6px;
  font-size:.85em;
  animation: bhd-btn-busy-spin 1.1s linear infinite;
  vertical-align:middle;
}
.bhd-btn-busy-status {
  display:inline-flex; align-items:center; gap:4px;
  margin-left:8px;
  padding:2px 8px;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink2,#555);
  background:rgba(0,0,0,.06);
  border-radius:10px;
  white-space:nowrap;
  vertical-align:middle;
  animation: bhd-btn-busy-fade .25s ease-out;
}
.bhd-btn-busy-status.is-success { color:#3a8a4e; background:rgba(58,138,78,.12); }
.bhd-btn-busy-status.is-error   { color:#c0392b; background:rgba(192,57,43,.12); }
@keyframes bhd-btn-busy-spin {
  from { transform:rotate(0deg);   }
  to   { transform:rotate(360deg); }
}
@keyframes bhd-btn-busy-fade {
  from { opacity:0; transform:translateY(2px); }
  to   { opacity:1; transform:translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
  .bhd-btn-busy::after { animation:none; }
  .bhd-btn-busy-status { animation:none; }
}

/* Recipient pills */
.recipient-pills { display:flex;gap:8px;flex-wrap:wrap; }
.recipient-pill { display:flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--ink2); }
.recipient-pill input[type="radio"] { display:none; }
.recipient-pill span { padding:6px 14px;border-radius:999px;border:1.5px solid var(--line-strong);transition:all var(--transition); }
.recipient-pill input:checked + span { background:var(--accent);border-color:var(--accent);color:#fff; }
.recipient-pill:hover span { border-color:var(--accent);color:var(--accent-deep); }

/* ── Blog cards ─────────────────────────────────────────────── */
.blog-preview-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px; }
.blog-card { padding:18px 20px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(255,252,247,.88);text-decoration:none;display:block;transition:all var(--transition); }
.blog-card:hover { transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(232,130,58,.3); }
.blog-card h3 { font-size:1rem;margin-bottom:6px; }
.blog-card p  { font-size:.84rem;color:var(--muted); }
.blog-card-meta { font-size:.74rem;color:var(--subtle);margin-bottom:6px; }

/* ── Games teaser ───────────────────────────────────────────── */
.games-teaser-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px; }
.game-teaser-card { padding:18px;border-radius:var(--radius-md);border:1.5px solid var(--line);background:rgba(255,252,247,.88);text-decoration:none;display:block;transition:all var(--transition); }
.game-teaser-card:hover { border-color:var(--accent);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md); }
.game-icon { font-size:1.8rem;display:block;margin-bottom:8px; }
.game-teaser-card h3 { font-size:.95rem;margin-bottom:4px; }
.game-teaser-card p  { font-size:.8rem;color:var(--muted); }

/* ── Merch ──────────────────────────────────────────────────── */
.merch-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px; }
.merch-card { border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:rgba(255,252,247,.92);transition:all var(--transition);text-decoration:none;display:block; }
.merch-card:hover { transform:translateY(-2px);box-shadow:var(--shadow-md); }
.merch-card-img { aspect-ratio:1;background:var(--bg);overflow:hidden; }
.merch-card-img img { width:100%;height:100%;object-fit:cover; }
.merch-card-body { padding:12px 14px; }
.merch-card-body h3 { font-size:.92rem;margin-bottom:3px; }
.merch-card-price { font-weight:700;color:var(--accent);font-size:.9rem; }
.merch-badge { display:inline-block;padding:2px 7px;background:var(--accent-glow);color:var(--accent-deep);border-radius:999px;font-size:.68rem;font-weight:700;margin-left:5px; }

/* ── Friends ────────────────────────────────────────────────── */
.friend-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px; }
.friend-card { padding:16px 18px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(255,252,247,.88);text-decoration:none;display:block;transition:all var(--transition); }
.friend-card:hover { border-color:var(--accent);transform:translateY(-2px); }
.friend-card strong { display:block;margin-bottom:5px;font-size:.92rem; }
.friend-card p { font-size:.82rem;color:var(--muted); }

/* ── Places ─────────────────────────────────────────────────── */
.places-layout { display:grid;grid-template-columns:2fr 1fr;gap:16px; }
.map-embed { border-radius:var(--radius-md);overflow:auto;max-height:520px;min-height:240px;background:rgba(255,249,241,.85);border:1px solid var(--line); }
.places-list { display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;padding-right:6px; }
.places-list::-webkit-scrollbar,.map-embed::-webkit-scrollbar { width:8px;height:8px; }
.places-list::-webkit-scrollbar-thumb,.map-embed::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:4px; }
.places-list::-webkit-scrollbar-thumb:hover,.map-embed::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.place-item { padding:10px 13px;border-radius:var(--radius-sm);background:rgba(255,252,247,.88);border:1px solid var(--line);font-size:.86rem; }
.place-item strong { display:block; }
.place-item span { color:var(--muted);font-size:.76rem; }

/* ── Social ─────────────────────────────────────────────────── */
.social-rail { position:fixed;left:clamp(6px,1.2vw,16px);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:7px; }
.social-pill { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);text-decoration:none;box-shadow:var(--shadow-sm);transition:all var(--transition); }
.social-pill:hover { border-color:var(--accent);transform:scale(1.1);box-shadow:0 4px 12px rgba(92,40,12,0.18); }
.follow-links { display:flex;gap:10px;flex-wrap:wrap; }
.follow-link { display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(255,255,255,.88);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);font-weight:600;font-size:.88rem;text-decoration:none;color:var(--ink);transition:all var(--transition); }
.follow-link:hover { border-color:var(--accent);background:#fff;color:var(--accent-deep); }

/* ── Info grid (about cards) ────────────────────────────────── */
.info-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px; }
.info-card { padding:18px 20px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(255,252,247,.88); }
.info-card h3 { font-size:.97rem;margin-bottom:6px; }
.info-card p  { font-size:.86rem;color:var(--muted); }

/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox { position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(20,10,5,.88);backdrop-filter:blur(8px);padding:20px;opacity:0;pointer-events:none;transition:opacity .22s; }
.lightbox.open { opacity:1;pointer-events:all; }
.lightbox-inner { max-width:min(860px,calc(100vw - 40px));width:100%;position:relative; }
.lightbox-media { border-radius:var(--radius-lg);overflow:hidden;background:#000; }
.lightbox-media img,.lightbox-media video { width:100%;display:block;max-height:82vh;object-fit:contain; }
.lightbox-close { position:absolute;top:-42px;right:0;background:rgba(255,255,255,.15);border:none;border-radius:50%;width:34px;height:34px;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition); }
.lightbox-close:hover { background:rgba(255,255,255,.28); }

/* ── Blog full page ─────────────────────────────────────────── */
.blog-layout { display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start; }
.blog-sidebar { padding:22px;position:sticky;top:80px; }

/* ── Blog editor — modern, mobile-friendly ───────────────── */
.editor-layout { grid-template-columns:260px 1fr;gap:24px; }
.editor-panel { padding:clamp(18px,3vw,32px); }
.editor-form { display:flex;flex-direction:column;gap:18px; }

/* Post meta fields: stack with breathing room */
.editor-form .field-grid { gap:14px; }
.editor-form label > span { font-size:.78rem;font-weight:600;color:var(--ink2);margin-bottom:6px;display:block; }
.editor-form input[type="text"],
.editor-form input[type="date"],
.editor-form select,
.editor-form textarea {
  width:100%;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:8px;
  font-size:.95rem;background:#fff;color:var(--ink);outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.editor-form input:focus,
.editor-form select:focus,
.editor-form textarea:focus {
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
}

/* Toolbar — wraps cleanly, larger touch targets on mobile */
.editor-toolbar {
  display:flex;flex-wrap:wrap;gap:6px;padding:10px;
  background:var(--cream);border:1.5px solid var(--line-strong);
  border-radius:10px;position:sticky;top:64px;z-index:5;
}
.editor-toolbar button,
.editor-toolbar label {
  min-height:36px;min-width:36px;padding:6px 12px;
  border:1px solid var(--line-strong);border-radius:6px;background:#fff;
  font-size:.85rem;cursor:pointer;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  transition:background var(--transition),border-color var(--transition);
}
.editor-toolbar button:hover { background:var(--accent-glow);border-color:var(--accent); }
.editor-toolbar button:active { transform:scale(.97); }
.editor-toolbar input[type="color"] { width:32px;height:24px;padding:0;border:none;cursor:pointer;background:transparent; }

/* Emoji popup — anchored under the Emoji button. Compact grid; closes on outside click. */
.emoji-popup {
  position:relative;display:flex;flex-wrap:wrap;gap:4px;
  margin-top:6px;padding:8px;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,0.08);
  max-width:420px;
}
.emoji-popup.hidden { display:none; }
.emoji-popup button {
  width:34px;height:34px;padding:0;
  border:1px solid transparent;border-radius:6px;background:transparent;
  font-size:1.15rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--transition),border-color var(--transition);
}
.emoji-popup button:hover { background:var(--accent-glow);border-color:var(--accent); }

/* Rich content editor */
.rich-editor {
  min-height:520px;padding:24px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:#fff;font-size:1.05rem;line-height:1.7;color:var(--ink);
  outline:none;overflow-y:auto;font-family:Georgia,'Iowan Old Style',serif;
}
.rich-editor:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow); }
.rich-editor h2 { font-size:1.4rem;margin:1em 0 .4em;color:var(--ink); }
.rich-editor h3 { font-size:1.15rem;margin:.9em 0 .3em;color:var(--ink); }
.rich-editor p { margin:.6em 0; }
.rich-editor img,.rich-editor video { max-width:100%;border-radius:6px;margin:.7em 0; }

/* Media picker — collapsible card, no longer dominant */
.media-picker-shell {
  border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(255,249,241,0.4);
}
.media-picker-shell summary {
  padding:14px 18px;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:8px;user-select:none;
}
.media-picker-shell summary::-webkit-details-marker { display:none; }
.media-picker-shell summary::before { content:'▶';font-size:.75rem;transition:transform .15s;color:var(--accent); }
.media-picker-shell[open] summary::before { transform:rotate(90deg); }
.media-picker-shell summary:hover { background:rgba(255,243,232,0.7); }
.media-picker-inner { padding:6px 18px 18px; }
.media-picker-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;max-height:340px;overflow-y:auto;margin-top:12px;padding:4px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
}
.upload-form { margin-bottom:12px; }
.upload-field { display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--ink2); }
.upload-field input[type="file"] {
  padding:10px;border:1.5px dashed var(--line-strong);border-radius:8px;background:#fff;cursor:pointer;
}

/* Save/delete actions: clear hierarchy, not crammed */
.editor-form > .form-actions {
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:14px;background:var(--cream);border-radius:10px;
  border:1px solid var(--line);position:sticky;bottom:14px;z-index:4;
}

/* Mobile: stack everything, full-width controls */
@media (max-width: 720px) {
  .editor-layout { grid-template-columns:1fr;gap:16px; }
  .blog-sidebar { position:static;padding:14px; }
  .editor-panel { padding:16px; }
  .editor-form { gap:14px; }
  .rich-editor { min-height:380px;padding:18px;font-size:1rem; }
  .editor-toolbar { padding:8px;gap:5px;top:56px; }
  .editor-toolbar button { padding:8px 12px;font-size:.85rem; }
  .editor-form > .form-actions { padding:12px;flex-direction:column;align-items:stretch; }
  .editor-form > .form-actions .button { width:100%;justify-content:center; }
}
.compact-upload-actions { margin-top:6px; }
.sidebar-head { margin-bottom:14px; }
.blog-list { display:flex;flex-direction:column;gap:2px; }
.blog-list-item { display:block;padding:10px 13px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink2);font-size:.87rem;transition:background var(--transition); }
.blog-list-item:hover { background:var(--accent-glow); }
.blog-list-item.active { background:var(--accent-glow);color:var(--accent-deep);font-weight:600; }
.blog-list-item .meta { font-size:.72rem;color:var(--subtle);margin-bottom:2px; }
.blog-list-item strong { display:block; }
.blog-article { padding:clamp(22px,3.5vw,38px); }
.blog-hero-image { width:100%;border-radius:var(--radius-md);margin-bottom:24px;max-height:380px;object-fit:cover; }
.rich-article h1 { font-size:clamp(1.4rem,3.5vw,2rem);margin-bottom:14px; }
.rich-article h2 { font-size:1.3rem;margin-top:28px;margin-bottom:10px; }
.rich-article h3 { font-size:1.05rem;margin-top:22px;margin-bottom:7px; }
.rich-article p  { margin-bottom:14px; }
.rich-article ul,.rich-article ol { padding-left:1.5em;margin-bottom:14px;color:var(--ink2); }
.rich-article blockquote { border-left:3px solid var(--accent);padding-left:14px;margin:18px 0;color:var(--muted);font-style:italic; }
.empty-message { text-align:center;padding:52px 20px;color:var(--muted);font-size:.92rem; }
.empty-message strong { display:block;font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--ink);margin-bottom:7px; }

/* ── Sub-pages ──────────────────────────────────────────────── */
.page-hero { margin-top:20px; }
.page-hero h1 { max-width:22ch;margin-bottom:10px; }
.page-hero .lede { font-size:1.02rem;color:var(--muted);max-width:52ch; }
.page-content { margin-top:16px; }
.page-content p { color:var(--ink2);margin-bottom:12px;font-size:.94rem; }
.privacy-section h2 { font-size:1.15rem;margin-top:28px;margin-bottom:8px; }
.privacy-section ul { padding-left:1.5em;color:var(--ink2);margin-bottom:10px; }

/* ── 404 ────────────────────────────────────────────────────── */
.not-found { min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px; }
.not-found-inner { max-width:460px; }
.not-found-code { font-family:'Playfair Display',serif;font-size:clamp(5rem,14vw,8rem);color:var(--accent);line-height:1;margin-bottom:6px;opacity:.22; }
.not-found h1 { margin-bottom:10px; }
.not-found p  { color:var(--muted);margin-bottom:22px; }

/* ── Admin ──────────────────────────────────────────────────── */
.admin-body { background:var(--bg); }
/* Cap the admin content rail so panels don't sprawl edge-to-edge on wide
   monitors. Combined with the 220px sidebar (#adminApp.has-admin-nav adds
   padding-left:236px), the usable content area is ~1040px — readable line
   length for forms and tables. */
.admin-shell { padding-block:36px 80px;max-width:1280px;margin-inline:auto;padding-inline:24px; }
.admin-login-panel { max-width:440px;margin:72px auto 0;padding:38px; }
.admin-login-form { display:flex;flex-direction:column;gap:13px;margin-top:22px; }
.admin-topbar { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line); }

/* ─── Admin in-page nav (built at runtime by admin-nav.js) ──────────────
   Sticky left rail of section anchors. Click to smooth-scroll; the link
   for the section currently in view is highlighted via IntersectionObserver.
   All admin panels stay visible (this is anchor-scroll, not tab-switching). */
#adminApp { position:relative; }
#adminApp.has-admin-nav { padding-left:236px; }
.admin-nav { position:fixed; top:0; left:0; width:220px; height:100vh; padding:24px 14px;
  background:linear-gradient(180deg,#fff 0%,#fff8ef 100%);
  border-right:1px solid var(--line); overflow-y:auto;
  z-index:40; transition:transform var(--transition); }
.admin-nav-section { margin-bottom:18px; }
.admin-nav-heading { font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px 8px; }
.admin-nav-link { display:block; padding:7px 10px; margin:1px 0; border-radius:6px;
  font-size:.86rem; color:var(--ink2); text-decoration:none; cursor:pointer;
  transition:background var(--transition),color var(--transition); }
.admin-nav-link:hover { background:var(--accent-glow); color:var(--accent-deep); }
.admin-nav-link.active { background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff; font-weight:600; }
.admin-nav-toggle { display:none; padding:6px 10px; border:1.5px solid var(--line-strong);
  border-radius:8px; background:#fff; cursor:pointer; font-weight:600; font-size:.85rem; }
/* Backdrop dimmer behind the slide-in drawer. Tap outside the drawer
   to close it — gives a familiar mobile-app dismissal pattern in
   addition to the close button inside the drawer. */
.admin-nav-backdrop {
  display:none; position:fixed; inset:0; background:rgba(20,15,12,.45);
  z-index:39; cursor:pointer;
}
body.admin-nav-open .admin-nav-backdrop { display:block; }
/* Dedicated close (×) inside the drawer. Hidden at desktop widths
   (the drawer is permanently visible there); only renders on mobile
   when the drawer is open. */
.admin-nav-close {
  display:none; position:absolute; top:8px; right:8px;
  width:36px; height:36px; line-height:1;
  border:1.5px solid var(--line-strong); border-radius:50%;
  background:#fff; cursor:pointer; font-size:1.2rem; font-weight:700;
  color:var(--ink); z-index:1;
}
@media (max-width: 980px) {
  #adminApp.has-admin-nav { padding-left:0; }
  .admin-nav { transform:translateX(-100%); box-shadow:0 0 24px rgba(0,0,0,0.15); }
  body.admin-nav-open .admin-nav { transform:translateX(0); }
  .admin-nav-toggle {
    display:inline-block;
    /* User feedback 2026-04-30: 'menu button should remain visible if
       the admin user scrolls down the page.' Pin the hamburger to the
       top-right of the viewport via position:fixed with a high z-index
       so it never disappears as the page scrolls. Sized + spaced to
       sit clear of the address bar / safe-area on mobile. */
    position:fixed; top:12px; right:12px; z-index:42;
    background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  /* Reveal the in-drawer close button only on mobile — addresses
     'admin menu covers its button when it opens so it is not obvious
     how to close the menu without clicking on a section link.' */
  body.admin-nav-open .admin-nav-close { display:flex;
    align-items:center; justify-content:center; }
}

/* Anchor-scroll offset: prevent the fixed top-of-page UI from covering the
   target panel when the user clicks a sidebar link or jumps to a hash. */
#adminGrid > .admin-panel[data-nav-key] { scroll-margin-top:18px; transition: background var(--transition); }
/* User feedback 2026-04-30: 'the background color of an expanded panel
   should shift slightly to indicate that it is open, then restore when
   it is closed or when another panel is open. this is true for both
   the public and admin pages.' Admin panels are anchor-scroll (always
   visible), so 'expanded' = whichever panel currently dominates the
   viewport. admin-nav.js's setActiveLink mirrors that state onto the
   panel via .is-active-section. */
#adminGrid > .admin-panel.is-active-section { background:rgba(232,130,58,.05); }

/* Cmd-K palette overlay */
.admin-palette { position:fixed; inset:0; background:rgba(20,15,12,0.55);
  display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
  z-index:200; }
.admin-palette.hidden { display:none; }
.admin-palette-card { width:min(540px,92vw); background:#fff; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35); overflow:hidden; }
.admin-palette-input { width:100%; padding:18px 22px; border:0; outline:0;
  font-size:1.05rem; border-bottom:1px solid var(--line); }
.admin-palette-results { list-style:none; max-height:50vh; overflow-y:auto;
  margin:0; padding:6px; }
.admin-palette-result { display:flex; align-items:baseline; gap:10px; padding:10px 14px;
  border-radius:8px; cursor:pointer; }
.admin-palette-result.active,
.admin-palette-result:hover { background:var(--accent-glow); }
.admin-palette-group { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); width:80px; flex-shrink:0; }
.admin-palette-label { font-weight:500; color:var(--ink2); }
.admin-palette-empty { padding:14px 22px; color:var(--muted); font-size:.9rem; }
.admin-palette-hint { padding:10px 18px; margin:0; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted); background:rgba(255,250,242,.8); }

/* Switched from auto-fill minmax(320,1fr) (which produced 3–5 columns at
   desktop widths and forced full-width panels to leap across them, leaving
   narrow panels squeezed into a single column) to an explicit 12-col grid.
   Default panel width is full (12 cols) — most content reads better at the
   capped rail width than crammed into 320px. Use --half / --third for the
   handful of genuinely-narrow panels (Visitor activity, AI insights,
   Campfire friends, Merch). */
.admin-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:18px; }
.admin-panel { padding:22px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(255,252,247,.92);grid-column:1/-1; }
.admin-panel--full  { grid-column: 1 / -1; }
.admin-panel--half  { grid-column: span 6; }
.admin-panel--third { grid-column: span 4; }
@media (max-width: 760px) {
  .admin-panel--half, .admin-panel--third { grid-column: 1 / -1; }
}
/* Generic list-scroll utility for inner panel content (postcards, chats,
   inquiries, armor logs, bug reports, orders, scan status, jobs). Replaces
   the per-panel inline style="max-height:520px;overflow-y:auto". */
.admin-list-scroll { max-height:560px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin; }
.admin-list-scroll::-webkit-scrollbar { width:8px; }
.admin-list-scroll::-webkit-scrollbar-thumb { background:var(--accent-glow);border-radius:4px; }
.admin-list-scroll::-webkit-scrollbar-thumb:hover { background:var(--accent); }
/* Belt-and-suspenders for the GCP Jobs panel: the renderer rebuilds
   #jobsList via innerHTML (admin.js renderJobs) and could lose the
   scroll class if a future refactor drops it. Pin the cap on the ID. */
#jobsList { max-height:560px;overflow-y:auto;scrollbar-gutter:stable; }
.admin-panel h2 { font-size:1rem;margin-bottom:3px; }
.admin-desc { font-size:.78rem;color:var(--muted);margin-bottom:14px; }
.toggle-row { display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.87rem;cursor:pointer; }
.toggle-row:last-of-type { border-bottom:none; }
.toggle-row input[type="checkbox"] { display:none; }
.toggle-switch { width:38px;height:20px;border-radius:999px;background:var(--line-strong);position:relative;transition:background var(--transition);flex-shrink:0; }
.toggle-switch::after { content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--transition); }
.toggle-row input:checked + .toggle-switch { background:var(--accent); }
.toggle-row input:checked + .toggle-switch::after { transform:translateX(18px); }
.admin-card { padding:13px 15px;border-radius:var(--radius-sm);border:1px solid var(--line);margin-bottom:9px;background:rgba(255,255,255,.7);font-size:.87rem; }
.admin-card strong { display:block;margin-bottom:3px; }
.admin-card-meta { font-size:.73rem;color:var(--muted);margin-bottom:3px; }
.admin-empty { text-align:center;color:var(--muted);font-size:.87rem;padding:20px; }
/* Media library cards carry 5 override blocks + an audio-track row + per-
   platform publish badges. The previous minmax(120px,1fr) crushed everything
   together — override inputs and the audio-track select overlapped on
   desktop. Bumped to 380px so each card has room; auto-fill still keeps
   multiple columns at wider viewports. max-height bumped 340→720 so admins
   aren't fighting a tiny inner scroller while editing. */
.media-library-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;margin-top:14px;max-height:720px;overflow-y:auto; }
@media (max-width: 600px) {
  .media-library-grid { grid-template-columns: 1fr; max-height: none; }
}
.media-lib-item { border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;background:var(--bg);cursor:pointer;position:relative;border:2px solid transparent;transition:border-color var(--transition); }
.media-lib-item:hover { border-color:var(--accent); }
.media-lib-item img { width:100%;height:100%;object-fit:cover; }

/* ── Games page ─────────────────────────────────────────────── */
.game-tabs { display:flex;gap:7px;flex-wrap:wrap;margin-top:clamp(16px,3vw,28px); }
.game-tab { padding:9px 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:rgba(255,255,255,.82);color:var(--ink2);font-weight:600;font-size:.86rem;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:7px; }
.game-tab:hover { border-color:var(--accent);color:var(--accent-deep); }
.game-tab.active { background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:var(--accent-deep);color:#fff; }
.game-section { margin-top:clamp(16px,3vw,28px); }
.game-section.hidden { display:none; }
.game-layout { display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start;margin-top:18px; }
.game-canvas { width:100%;border-radius:var(--radius-md);display:block;background:#fff8f2;border:1.5px solid var(--line); }
.game-side { display:flex;flex-direction:column;gap:10px; }
.game-status { padding:13px 15px;background:rgba(255,244,228,.82);border-radius:var(--radius-sm);border:1px solid rgba(232,130,58,.2);font-size:1.05rem;color:var(--ink2);line-height:1.6;min-height:56px; }
@media (min-width: 720px) {
  /* On desktop the .game-status was reading too small (was .87rem ≈ 14px).
     Bumping up so the play-by-play feedback ("Good return!", "Henrietta scores!")
     is comfortably readable without leaning on browser zoom. */
  .game-status { font-size: 1.15rem; }
  .game-tip-list li { font-size: .92rem; }
}
.game-actions { display:flex;gap:7px;flex-wrap:wrap; }
.game-score { font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--accent); }
.game-tip-list { list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:4px; }
.game-tip-list li { font-size:.86rem;color:var(--muted);padding-left:13px;position:relative; }
.game-tip-list li::before { content:'•';position:absolute;left:0;color:var(--accent); }

/* ── Skeleton ───────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--bg) 25%,rgba(255,255,255,.6) 50%,var(--bg) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm); }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { padding:clamp(24px,3.5vw,40px);margin-top:clamp(24px,3.5vw,44px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;position:relative;z-index:1; }
.footer-brand { font-family:'Playfair Display',serif;font-size:1.02rem;margin-bottom:3px; }
.footer-tagline { font-size:.8rem;color:var(--muted);margin-top:3px; }
.footer-links { display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end; }
.footer-links a { font-size:.8rem;color:var(--muted);padding:3px 9px;border-radius:999px;transition:background var(--transition),color var(--transition); }
.footer-links a:hover { background:var(--accent-glow);color:var(--accent-deep); }

/* ── Focus / accessibility ──────────────────────────────────── */
:focus-visible { outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important;transition-duration:.01ms !important; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr;min-height:auto; }
  .hero-spotlight { max-height:280px; }
  .player-layout { grid-template-columns:1fr; }
  .player-meta { flex-direction:row;flex-wrap:wrap; }
  .places-layout { grid-template-columns:1fr; }
  .blog-layout { grid-template-columns:1fr; }
  .blog-sidebar { position:static; }
  .game-layout { grid-template-columns:1fr; }
  .social-rail { display:none; }
}

@media (max-width: 640px) {
  :root { --shell:calc(100vw - 20px); }
  .nav { display:none;position:fixed;top:58px;left:0;right:0;bottom:0;background:#fdf6ed !important;background-color:#fdf6ed !important;opacity:1 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;flex-direction:column;align-items:stretch;padding:18px;gap:3px;z-index:9999;border-top:2px solid var(--accent);box-shadow:0 8px 32px rgba(92,40,12,0.22); }
  .nav.open { display:flex !important;background:#fdf6ed !important;background-color:#fdf6ed !important;opacity:1 !important; }
  .nav a { padding:11px 15px;font-size:.97rem;border-radius:var(--radius-sm); }
  .nav-toggle { display:flex; }
  .site-header { height:58px; }
  .field-row { grid-template-columns:1fr; }
  .admin-grid { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
  .accordion-trigger { padding:14px 16px; }
  /* Blog editor: on small screens drop the sticky toolbar so it doesn't float over the
     visible editor area while the user is typing (especially with the on-screen keyboard
     up — the toolbar would otherwise cover the cursor's neighborhood). The toolbar
     scrolls naturally inline above the editor; user scrolls back up to use it. */
  .editor-toolbar { position:static !important;top:auto !important;flex-wrap:wrap;gap:6px; }
  .editor-toolbar button,
  .editor-toolbar label { padding:5px 8px;font-size:.82rem; }
  .accordion-body { padding:16px 18px 20px; }
  .player-counter { display:none; }
}

@media (max-width: 380px) {
  h1 { font-size:1.65rem; }
  .search-form { flex-direction:column; }
  .search-input { border-right:1.5px solid var(--line-strong);border-radius:var(--radius-md); }
  .search-submit { border-radius:var(--radius-md);text-align:center; }
}

/* ══════════════════════════════════════════════════════════
   PATCH v22.1 — Logo, watermark, nav fix, watch history
   ══════════════════════════════════════════════════════════ */

/* #10 — Hamburger nav link styling */
@media (max-width: 640px) {
  .nav a {
    font-size: 1.05rem;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: none; }
}

/* #1 — Logo image in header (circular, sharp) */
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(92, 40, 12, 0.18);
  background: #fff;
}

/* About page logo display */
.about-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 24px;
}
.about-logo {
  width: clamp(160px, 28vw, 240px);
  height: clamp(160px, 28vw, 240px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.9);
}

/* Seasonal footer image — only injected on the home page when the admin feature is on.
   Sized to match the circular about-logo so it visually anchors the bottom of the page. */
.footer-image-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 24px;
}

.footer-legal {
  font-size: 0.72rem;
  color: var(--subtle);
  margin-top: 14px;
  line-height: 1.5;
  flex-basis: 100%;
}
.footer-legal a { color: inherit; text-decoration: underline; opacity: 0.85; }
.footer-legal a:hover { opacity: 1; }
.footer-image {
  width: clamp(160px, 28vw, 240px);
  height: clamp(160px, 28vw, 240px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.9);
}

/* #2 — Video watermark overlay */
.player-watermark-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.player-watermark {
  position: absolute;
  /* Size + offset history:
       52×52 @12 (orig) → 39×39 @9 (PR #51, ~25% smaller) →
       27×27 @6 (PR per user 2026-05-01: 'video watermark should be 30% smaller').
     Opacity 0.45 with drop-shadow keeps the smaller mark legible against bright
     reels (PR #59). The 30% reduction is applied to BOTH dimensions and the
     offset, so the corner footprint shrinks proportionally. */
  bottom: 6px;
  right: 6px;
  width: 27px;
  height: 27px;
  opacity: 0.45;
  border-radius: 50%;
  transition: opacity 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* Slight dimming on hover so the watermark doesn't compete when the
   visitor is actively interacting; never below the visibility floor. */
.featured-player:hover .player-watermark { opacity: 0.30; }
/* Fullscreen: move the watermark to the top-right corner so it doesn't
   sit behind the browser's native video chrome (volume / scrubber /
   fullscreen toggle) at the bottom. Bump opacity + a deeper drop
   shadow for contrast against the wider colour range a fullscreen
   reel can render against. Both standard and -webkit-full-screen
   pseudos required for Safari. */
.featured-player:fullscreen .player-watermark,
.featured-player:-webkit-full-screen .player-watermark {
  /* Top/right offset also shrunk 30% (16 → 11) so the fullscreen
     reposition keeps the same visual proportion as the regular view. */
  top: 11px;
  right: 11px;
  bottom: auto;
  opacity: 0.55;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.featured-player:fullscreen:hover .player-watermark,
.featured-player:-webkit-full-screen:hover .player-watermark {
  opacity: 0.45;
}

/* #3 — Watch history prev/next controls */
.player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-history {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink2);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.btn-history:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent-deep);
}
.btn-history:disabled {
  opacity: 0.3;
  cursor: default;
  border-color: var(--line);
}

/* #4 — Silent video music player */
.music-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 249, 241, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  animation: fadeIn 0.4s ease;
}
.music-bar.hidden { display: none; }
.music-label { flex: 1; min-width: 0; }
.music-label strong {
  display: block;
  color: var(--ink2);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-vol {
  width: 70px;
  accent-color: var(--accent);
  cursor: pointer;
}
.music-toggle {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.9);
  color: var(--ink2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.music-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }

/* Game scores and countdown timers */
.game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 249, 241, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.game-hud-stat {
  text-align: center;
  min-width: 56px;
}
.game-hud-stat .val {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  color: var(--accent);
  line-height: 1;
  font-weight: 700;
}
.game-hud-stat .lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.game-hud-stat.timer .val { color: var(--ink2); }
.game-hud-stat.timer.urgent .val { color: #c0392b; }
.game-hud-stat.best .val { color: var(--subtle); font-size: 1.1rem; }

/* Difficulty badge */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.difficulty-badge.easy   { background: rgba(58,138,78,0.12);  color: #3a8a4e; }
.difficulty-badge.medium { background: rgba(232,130,58,0.14); color: var(--accent-deep); }
.difficulty-badge.hard   { background: rgba(192,57,43,0.12);  color: #c0392b; }
.difficulty-badge.expert { background: rgba(100,30,120,0.12); color: #6a1e78; }