/* ============================================================
   setlisthound.info -- HOUND skin
   Loaded AFTER /css/style.css and /css/setlistlizard.css.
   This file never ships to the Lizard site; the base sheets are
   shared and must not be edited. Everything Hound-specific that
   differs from STAGE LEFT lives here, as overrides.

   Palette: the navy room, the plaster light and the type stay.
   The kiln-brick accent warms into golden-retriever amber.
   Motifs (exactly two): amber coat-colour, and one paw print
   watermarked into the setlist board at 5% -- nothing else.

   OVERRIDDEN SELECTORS (for integration review):
     :root                        -- --accent, --accent-soft only
     .board, .tube, .lp           -- warmth gradient re-tinted amber
     .board                       -- adds the paw watermark layer
     .btn.primary                 -- dark ink on amber (was white on brick)
     .lz-play:hover, .lz-play.on,
     .lz-main:hover               -- same ink fix for the player controls
     header                       -- position:relative anchor + ::after trot
   NEW SELECTORS (no collisions with either base sheet):
     .hound-egg, #hound-pile, .hound-dog, .hound-solo, #hound-pill
   NOT TOUCHED (per the chart-colour rule): .donut, .ckey, .obars,
   and every inline-styled chart fill the generator writes.
   ============================================================ */

/* ---- 1. Palette: brick -> retriever ------------------------------
   --accent      #c68a36  copper coat   (5.65:1 on card #151c38)
   --accent-soft #e8a33d  golden amber  (7.76:1 on card, 8.78:1 on bg)
   Both clear WCAG AA for normal text everywhere they are used as
   text; the old --accent-soft sat at 4.85:1, so this is a contrast
   upgrade, not just a hue shift. --jumpsuit is deliberately left
   alone: the one-yellow rule belongs to the front page. */
:root {
  --accent: #c68a36;
  --accent-soft: #e8a33d;
}

/* Base sheet puts white text on the accent in three places; white on
   amber fails AA, so those get dark ink instead. */
.btn.primary { color: #1a1206; }
.btn.primary:hover { color: #1a1206; }
.lz-play:hover, .lz-play.on { color: #1a1206; }
.lz-main:hover { color: #1a1206; }

/* ---- 2. Card warmth + the paw ------------------------------------
   setlistlizard.css paints a brick-tinted wash down the top of every
   card (hardcoded rgba, not a variable); re-tint it amber here. The
   setlist board additionally carries one paw print, top right, at 5%
   fill -- visible if you look for it, invisible if you don't. */
.tube, .lp {
  background-image: linear-gradient(180deg, rgba(232,163,61,.05), rgba(232,163,61,0) 130px);
}
.board {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23e8a33d' fill-opacity='.05' transform='rotate(-18 32 32)'%3E%3Cellipse cx='32' cy='41' rx='13' ry='10'/%3E%3Cellipse cx='15' cy='27' rx='5.5' ry='7'/%3E%3Cellipse cx='26' cy='20' rx='5.5' ry='7'/%3E%3Cellipse cx='38' cy='20' rx='5.5' ry='7'/%3E%3Cellipse cx='49' cy='27' rx='5.5' ry='7'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(232,163,61,.05), rgba(232,163,61,0) 130px);
  background-repeat: no-repeat, no-repeat;
  background-position: right 1.3rem top 1.1rem, 0 0;
  background-size: 88px 88px, auto;
}

/* ---- 3. Entrance: one quick trot ---------------------------------
   A 15px dog scampers once along the header's bottom edge, ~450ms,
   starting 120ms after style resolution. Pure CSS on an existing
   element: zero JS, zero layout work before first paint, and if the
   sheet loads late nothing is ever blocked on it. Gone for anyone
   who asked for reduced motion (the static paw above still greets
   them). The emoji faces left, so it runs mirrored. */
header { position: sticky; }               /* restate: ::after anchors here */
header::after {
  content: "\1F415" / "";
  position: absolute;
  left: 0;
  bottom: -3px;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transform: translateX(-40px) scaleX(-1);
  animation: hound-trot .45s linear .12s 1 forwards;
}
@keyframes hound-trot {
  0%   { opacity: 0; transform: translateX(-40px)  translateY(0)    scaleX(-1); }
  12%  { opacity: 1; transform: translateX(10vw)   translateY(-2px) scaleX(-1); }
  38%  { opacity: 1; transform: translateX(36vw)   translateY(1px)  scaleX(-1); }
  64%  { opacity: 1; transform: translateX(64vw)   translateY(-2px) scaleX(-1); }
  88%  { opacity: 1; transform: translateX(90vw)   translateY(1px)  scaleX(-1); }
  100% { opacity: 0; transform: translateX(104vw)  translateY(0)    scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  header::after { animation: none; opacity: 0; }
}

/* ---- 4. The easter egg trigger ------------------------------------
   hound.js lifts the existing dog emoji out of the footer credit line
   and makes it pressable. The affordance is a whisker of a hover lift,
   nothing more -- it should feel found, not advertised. */
.hound-egg {
  display: inline-block;
  cursor: pointer;
  transition: transform .15s ease;
}
.hound-egg:hover, .hound-egg:focus-visible { transform: translateY(-2px); }
.hound-egg:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 4px; }

/* ---- 5. The pile ---------------------------------------------------
   Positioning shell for hound.js physics. Dogs are fixed-layer,
   pointer-transparent, and never intercept a tap on the setlist. */
#hound-pile {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 75;                  /* over content, under nothing that matters */
}
.hound-dog {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
/* Reduced-motion fallback: one dog, one gentle bounce, done. */
.hound-solo {
  left: 50%;
  top: auto;
  bottom: 22px;
  font-size: 30px;
  margin-left: -15px;
  animation: hound-solo-bounce 1.1s ease-in-out 1;
}
@keyframes hound-solo-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-12px); }
}

/* ---- 6. New-song pill ----------------------------------------------
   Amber ground, near-black ink: 8.25:1. Sits clear of the lizard
   player bar's z-index (70) and the thumb zone's safe area. */
#hound-pill {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  background: #e8a33d;
  color: #1a1206;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .65);
  animation: hound-pill-in .25s ease-out;
}
#hound-pill:hover { background: #f0b562; }
@keyframes hound-pill-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #hound-pill { animation: none; }
}

/* ---- version badges (length superlatives; emitted only on this home) ---- */
.verbadge {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-soft); border: 1px solid var(--accent-soft);
  border-radius: 999px; padding: .1rem .5rem; margin-right: .55rem;
  white-space: nowrap; vertical-align: middle; opacity: .9;
}

/* ---- the one glow on the page: Live on X ---- */
.nav .x-live {
  border: 1px solid var(--accent-soft); border-radius: 999px;
  padding: .3rem .8rem; color: var(--accent-soft);
  animation: hound-glow 2.6s ease-in-out infinite;
}
.nav .x-live:hover { color: #1a1206; background: var(--accent-soft); }
@keyframes hound-glow {
  0%, 100% { box-shadow: 0 0 4px 0 rgba(232, 163, 61, .35); }
  50%      { box-shadow: 0 0 14px 2px rgba(232, 163, 61, .65); }
}
@media (prefers-reduced-motion: reduce) {
  .nav .x-live { animation: none; box-shadow: 0 0 8px 1px rgba(232, 163, 61, .5); }
}

/* ---- Noteworthy (standalone show pages) ---- */
.noteworthy { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.noteworthy .nw-head { font-family: "Fraunces", Georgia, serif;
  color: var(--accent-soft); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: .6rem; }
.nw-row { display: flex; gap: .8rem; padding: .28rem 0; font-size: .9rem;
  border-top: 1px solid var(--border); align-items: baseline; }
.nw-row:first-of-type { border-top: none; }
.nw-cat { flex: 0 0 8.5rem; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-soft); }
.nw-items { color: var(--ink); line-height: 1.7; }
.nw-d { color: var(--muted); font-size: .8rem; }

/* ---- stats scope toggles ---- */
.scope { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  max-width: 820px; margin: 0 auto; }
.scope a { border: 1px solid var(--border); border-radius: 999px;
  font-size: .78rem; color: var(--muted); text-align: center; }
.scope a:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
.scope a.on { color: #1a1206; background: var(--accent-soft);
  border-color: var(--accent-soft); }
.scope-main { margin-bottom: .6rem; }
.scope-main a { padding: .34rem 1.6rem; min-width: 7.2rem; }   /* wider, calmer */
.scope-years { margin-bottom: 1.6rem; }
.scope-years a { padding: .22rem .8rem; }
.scope-years a.on::before { content: "\2713\00a0"; }          /* toggled = checked */

/* ---- Dogs@JamPicks nav badge (companion pill, no glow: one glow rule) ---- */
.nav .jp-badge { border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .8rem; color: var(--muted); }
.nav .jp-badge:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

/* ---- stats page graphics ---- */
.paw-div { text-align: center; font-size: 1.15rem; letter-spacing: 1.2rem;
  opacity: .45; margin: 2.2rem 0 .6rem; user-select: none;
  filter: saturate(.6); }
.road { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* ---- toasts ---- */
.hound-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 9000;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.hound-toasts .toast { background: var(--card); border: 1px solid var(--accent-soft);
  border-radius: var(--radius); padding: .6rem .9rem; min-width: 220px;
  max-width: 320px; opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.hound-toasts .toast.in { opacity: 1; transform: none; }
.hound-toasts .toast strong { display: block; font-size: .92rem; }
.hound-toasts .toast span { color: var(--muted); font-size: .78rem; }
@media (prefers-reduced-motion: reduce) {
  .hound-toasts .toast { transition: opacity .35s ease; transform: none; } }

/* ---- the bell ---- */
.nav .bell { border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .8rem; color: var(--muted); }
.nav .bell:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
.nav .bell.on { color: var(--accent-soft); border-color: var(--accent-soft); }
.bell-panel { position: absolute; right: 0; top: 2.4rem; z-index: 9500;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem; width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); font-size: .85rem; }
.bell-panel p { margin: 0 0 .6rem; color: var(--muted); line-height: 1.5; }
.bell-panel button { display: block; width: 100%; margin: .3rem 0;
  background: none; border: 1px solid var(--accent-soft); border-radius: 999px;
  color: var(--accent-soft); padding: .4rem; cursor: pointer; font: inherit; }
.bell-panel button:hover { background: var(--accent-soft); color: #1a1206; }

/* ---- the actions bar: always visible, even where the menu collapses ---- */
.nav-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.nav-actions .jp-badge, .nav-actions .x-live, .nav-actions .install {
  border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; }
.nav-actions .jp-badge { border: 1px solid var(--border); color: var(--muted); }
.nav-actions .jp-badge:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
.nav-actions .install { border: 1px solid var(--border); color: var(--muted); }
.nav-actions .install:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
.container.nav { gap: .6rem; }
@media (max-width: 780px) {
  .nav-actions { margin-left: 0; flex: 1; justify-content: flex-end; }
  .nav-actions .jp-badge, .nav-actions .x-live, .nav-actions .install {
    font-size: .72rem; padding: .26rem .6rem; }
  .logo { font-size: 1.05rem; }
}
@media (max-width: 400px) { .nav-actions .install { display: none; } }

/* ---- front-page CTAs ---- */
.cta-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  margin: 1.2rem auto 0; }
.cta { border: 1px solid var(--accent-soft); color: var(--accent-soft);
  border-radius: 999px; padding: .55rem 1.6rem; font-size: .92rem; }
.cta:hover { background: var(--accent-soft); color: #1a1206; }
.cta-dim { border-color: var(--border); color: var(--muted); }
.cta-dim:hover { border-color: var(--accent-soft); color: var(--accent-soft);
  background: none; }