/* Setlist Lizard ... With — show page styles. Generated pages link this. */
.crumb { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
  .crumb a { color:var(--muted); }
  .glance { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem; max-width:820px; margin:0 auto 2rem; }
  .stat { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; text-align:center; }
  /* Inter, not Fraunces: the serif was both hard to read at a glance and wide
     enough that a long single word ("Tweezerfest") ran out of its tile. */
  .stat .n { font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1.45rem;
             font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--accent-soft);
             font-variant-numeric:tabular-nums; overflow-wrap:break-word; }
  .stat .l { font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
  .board { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.8rem; max-width:820px; margin:0 auto; }
  .setblock { margin-top:1.4rem; }
  .setblock:first-child { margin-top:0; }
  .setname { font-family:"Fraunces",Georgia,serif; color:var(--accent-soft); font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:.4rem; margin-bottom:.6rem; display:flex; justify-content:space-between; }
  .setname .sl { color:var(--muted); letter-spacing:.08em; }
  .board ol { list-style:none; margin:0; padding:0; }
  .srow { padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .srow:last-child { border-bottom:none; }
  .sline { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; }
  .sline .tr { color:var(--muted); }
  .sline .fn { color:var(--accent-soft); font-size:.8em; }
  .sline .len { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.88rem; white-space:nowrap; }
  .lenbar { height:3px; background:var(--accent); opacity:.5; border-radius:2px; margin-top:.3rem; transition:opacity .15s ease; }
  .srow:hover .lenbar { opacity:1; }
  .srow.big .lenbar { opacity:.85; }
  .fnlist { margin-top:1.4rem; color:var(--muted); font-size:.85rem; line-height:1.7; }
  .fnlist p { margin:.25rem 0; }
  .shownote { margin-top:1.4rem; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:.85rem 1.05rem; color:var(--muted); font-size:.9rem; line-height:1.6; }
  .tube { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.6rem; }
  .tube .lab { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem; display:inline-block; margin-bottom:.9rem; }
  .tube ul { list-style:none; margin:0; padding:0; }
  .tube li { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.92rem; }
  .tube li:last-child { border-bottom:none; }
  .tube .x { color:var(--accent-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tube .cav { margin-top:1rem; font-size:.76rem; color:var(--muted); line-height:1.6; }
  .srcs { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem; max-width:820px; margin:0 auto; }
  .srcs a { display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem; color:var(--text); font-size:.88rem; transition:border-color .15s ease, transform .15s ease; }
  .srcs a:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
  .srcs .w { display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }
  /* Keyboard-nav hint. Quiet, and hidden on touch where arrow keys do not
     exist -- a tip you cannot act on is just clutter. */
  .keyhint { max-width:820px; margin:.7rem auto 0; text-align:center; font-size:.72rem; color:var(--muted); }
  .keyhint kbd { font-family:inherit; font-size:.7rem; border:1px solid var(--border); border-radius:3px;
                 padding:.05rem .3rem; margin:0 .1rem; background:var(--card); }
  @media (hover:none) and (pointer:coarse) { .keyhint { display:none; } }

  /* Covers wear their author inline. About a fifth of any DIAP night is
     somebody else's song, so this is the highest-value thing to be able to
     scan for. Kept quiet enough not to compete with the song title -- the
     accent tint is the signal, the size keeps it subordinate. */
  .srow .cov { margin-left:.5rem; font-size:.74rem; color:var(--accent-soft); opacity:.85;
               letter-spacing:.02em; white-space:nowrap; }
  .srow .cov::before { content:"\2022"; margin-right:.4rem; opacity:.5; }
  @media (max-width:520px) { .srow .cov { white-space:normal; } }

  /* Per-show charts. Two cards side by side, stacking on narrow screens.
     Colours live in the generator (validated there against this surface);
     this file only does layout, so a palette change never means a CSS edit. */
  .charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem;
            max-width:820px; margin:1.4rem auto 0; }
  .chart { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
  .chart .ch { font-family:"Fraunces",Georgia,serif; color:var(--accent-soft); font-size:.72rem;
               letter-spacing:.16em; text-transform:uppercase; margin-bottom:.8rem; }
  .donut { display:block; width:150px; height:150px; margin:0 auto .6rem; }
  /* Identity is never colour alone: every slice is named and counted here. */
  .ckey { list-style:none; padding:0; margin:0; font-size:.82rem; }
  .ckey li { display:flex; align-items:center; gap:.5rem; padding:.22rem 0; }
  .ckey i { width:10px; height:10px; border-radius:2px; flex:none; }
  .ckey .k { color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ckey .v { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ckey .v em { font-style:normal; margin-left:.45rem; opacity:.75; font-size:.75rem; }
  /* Ordinal bars: ordered data keeps its order, one hue darkening with size. */
  .obars { display:flex; flex-direction:column; gap:.3rem; }
  .obar { display:flex; align-items:center; gap:.55rem; font-size:.8rem; }
  .obar .ol { width:2.6rem; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
  .obar .ot { flex:1; height:9px; background:rgba(255,255,255,.05); border-radius:5px; overflow:hidden; }
  .obar .ot i { display:block; height:100%; border-radius:5px; }
  .obar .on { width:1.6rem; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; flex:none; }
  .chart .cnote { margin:.7rem 0 0; font-size:.7rem; color:var(--muted); line-height:1.5; }

  /* Year picker (Hound archive spans 2018-2026). Deliberately NOT .srcs:
     that grid's 230px minimum is sized for source cards with a sentence of
     description, and a year plus a count left it sparse and hard to scan.
     Narrower tiles fit a whole decade on one row, and the year has to be the
     thing the eye lands on -- the count is secondary. */
  .ynav { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:.6rem; max-width:820px; margin:0 auto; }
  .ynav a, .ynav .cur { display:block; background:var(--card); border:1px solid var(--border);
                        border-radius:var(--radius); padding:.7rem .55rem; text-align:center;
                        transition:border-color .15s ease, transform .15s ease; }
  .ynav a { color:var(--text); }
  .ynav a:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
  .ynav .yr { display:block; font-family:"Fraunces",Georgia,serif; font-size:1.45rem;
              font-weight:600; line-height:1.1; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
  .ynav .w { display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
             color:var(--muted); margin-top:.3rem; }
  /* The year you are already on: same tile so the grid stays even, but it is
     not a link and it is unmistakably the current one. */
  .ynav .cur { border-color:var(--accent-soft); }
  .ynav .cur .yr { color:var(--accent-soft); }

  /* Show-to-show navigation. These were plain text links tucked under the
     setlist; as buttons they read as the primary way to walk the run. */
  .pager { display:flex; justify-content:space-between; gap:1rem; max-width:820px; margin:2.4rem auto 0; font-size:.85rem; }
  .pager a { display:flex; align-items:center; gap:.5rem; min-width:0; flex:1;
             background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
             padding:.75rem 1.05rem; color:var(--text); line-height:1.35;
             transition:border-color .15s ease, transform .15s ease, color .15s ease; }
  .pager a:last-child { justify-content:flex-end; text-align:right; }
  .pager a:only-child { flex:0 1 auto; }
  .pager a:hover { border-color:var(--accent); color:var(--accent-soft); transform:translateY(-2px); text-decoration:none; }
  .pager a .pg-l { display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .pager a .pg-v { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pager > span:empty { flex:1; }
  @media (max-width:560px) { .pager a .pg-v { white-space:normal; } }
  .srcline { text-align:center; color:var(--muted); font-size:.78rem; margin-top:2.4rem; line-height:1.7; letter-spacing:.05em; }
  .srcline a { color:var(--muted); }

/* ---- v2: song links, energy curve, song pages ---- */
a.song-t { color: var(--text); }
a.song-t:hover { color: var(--accent-soft); text-decoration: none; }

.curvewrap { max-width:820px; margin:1.2rem auto 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem 0.6rem; }
.curvehead { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  font-family:"Fraunces",Georgia,serif; color:var(--accent-soft); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:.4rem; margin-bottom:.7rem; }
.curvehead .ch-sub { font-family:Inter,sans-serif; font-size:.7rem; letter-spacing:.04em; text-transform:none; color:var(--muted); }
svg.ec { display:block; width:100%; overflow:visible; }
.ec-line { fill:none; stroke:var(--accent); stroke-width:1.6; stroke-opacity:.75; stroke-linejoin:round; }
.ec-dot { fill:var(--accent); fill-opacity:.85; cursor:pointer; transition:r .12s ease, fill-opacity .12s ease; }
.ec-dot:hover { r:6; fill-opacity:1; }
.ec-dot.big { fill:var(--accent-soft); }
.ec-div { stroke:var(--border); stroke-width:1; }
.ec-set { font-size:9px; fill:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.ec-y { font-size:9px; fill:var(--muted); text-anchor:end; font-variant-numeric:tabular-nums; }

.plc { display:flex; align-items:center; gap:.7rem; padding:.3rem 0; font-size:.9rem; }
.plc .pl { width:5.5rem; color:var(--muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.plc .pbar { flex:1; height:8px; background:rgba(255,255,255,.05); border-radius:4px; overflow:hidden; }
.plc .pbar i { display:block; height:100%; background:var(--accent); opacity:.8; }
.plc .pn { width:2rem; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; }

.vlist { display:flex; flex-direction:column; gap:.3rem; }
a.vrow { display:block; padding:.5rem .2rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text); }
a.vrow:last-child { border-bottom:none; }
a.vrow:hover { text-decoration:none; background:rgba(255,255,255,.02); }
.vtop { display:flex; align-items:baseline; gap:.7rem; }
.vtop .vd { font-weight:600; width:3.6rem; }
.vtop .vv { flex:1; color:var(--muted); font-size:.88rem; }
.vtop .vs { color:var(--muted); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.vtop .vl { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.88rem; width:3.2rem; text-align:right; }
.vbar { height:3px; background:var(--accent); opacity:.45; border-radius:2px; margin-top:.3rem; }
a.vrow.big .vbar { opacity:.85; background:var(--accent-soft); }
a.vrow:hover .vbar { opacity:1; }
.vfn { color:var(--muted); font-size:.8rem; margin-top:.25rem; }
.board .cav { margin-top:1.2rem; font-size:.78rem; color:var(--muted); line-height:1.6; }

/* ---- v4: credits page, top pager ---- */
/* The pager repeats above the setlist because the bottom one was easy to miss
   on a long night. Same markup, tighter margins, quieter until hovered. */
.pager.top { margin:0 auto 1.4rem; font-size:.8rem; }
.pager.top a { padding:.5rem .9rem; }

.credit { max-width:820px; margin:0 auto 1.1rem; background:var(--card); border:1px solid var(--border);
          border-left:3px solid var(--accent); border-radius:var(--radius); padding:1.2rem 1.5rem; }
.credit-k { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
a.credit-n { display:inline-block; font-family:"Fraunces",Georgia,serif; font-size:1.5rem;
             color:var(--accent-soft); margin:.15rem 0 .5rem; }
a.credit-n:hover { text-decoration:underline; }
.credit p { color:var(--muted); font-size:.92rem; line-height:1.7; margin:.55rem 0 0; }
.credit p:first-of-type { margin-top:0; }

.faq { max-width:820px; margin:0 auto; background:var(--card); border:1px solid var(--border);
       border-radius:var(--radius); padding:.6rem 1.5rem 1.4rem; }
.qa { padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.qa:last-child { border-bottom:none; }
.qa h3 { font-family:"Fraunces",Georgia,serif; font-size:1.02rem; font-weight:600; color:var(--text); margin:0 0 .45rem; }
.qa p { color:var(--muted); font-size:.92rem; line-height:1.7; margin:0; }
.mus { color:var(--accent-soft); }

/* ---- v5: facelift, mobile pass, inline player, Lab pies ---- */

/* A whisper of warmth at the top of every card — same accent, stretched. */
.board, .tube, .lp {
  background-image:linear-gradient(180deg, rgba(240,118,92,.05), rgba(240,118,92,0) 130px);
}
.stat { transition:border-color .15s ease, transform .15s ease; }
.stat:hover { border-color:var(--accent); transform:translateY(-2px); }

/* Mobile: the board should read like a setlist in your pocket, not a
   shrunken desktop page. */
@media (max-width:640px) {
  /* The site nav's off-canvas <ul> widens the document by ~60px on phones
     (pre-existing, from the global stylesheet); clip it so the setlist
     never side-scrolls. */
  html, body { overflow-x:hidden; }
  .glance { grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .stat { padding:.6rem .55rem; }
  .stat .n { font-size:1.2rem; }
  .board { padding:1.05rem .95rem; }
  .tube { padding:1.05rem .95rem; }
  .pager { gap:.5rem; }
  .pager a { padding:.55rem .7rem; }
  .pager a .pg-v { white-space:normal; font-size:.8rem; }
  .sline { flex-wrap:wrap; row-gap:.15rem; }
  .sline .len { margin-left:auto; }
  .curvewrap { padding:.8rem .8rem .4rem; }
  .lz-play { width:28px; height:28px; }
}

/* Play buttons, injected by lizard.js beside every ♫. */
.lz-play {
  width:22px; height:22px; padding:0; margin-left:.5rem; vertical-align:middle;
  border:1px solid var(--accent); border-radius:50%; background:transparent;
  color:var(--accent-soft); font-size:.6rem; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.lz-play:hover { background:var(--accent); color:#fff; transform:scale(1.08); }
.lz-play.on { background:var(--accent); color:#fff; }

/* The player bar. Fixed to the bottom, attribution built in. */
#lizard-player {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem max(.95rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(13,17,23,.96); border-top:1px solid var(--accent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
body.lz-open { padding-bottom:74px; }
.lz-main {
  flex:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--accent); background:var(--card); color:var(--accent-soft);
  font-size:.95rem; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.lz-main:hover { background:var(--accent); color:#fff; }
.lz-meta { min-width:0; flex:0 1 15rem; }
.lz-title { font-weight:600; font-size:.87rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lz-sub { font-size:.66rem; letter-spacing:.05em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lz-sub a { color:var(--accent-soft); }
.lz-seek { flex:1 1 auto; min-width:70px; accent-color:var(--accent); height:4px; cursor:pointer; }
.lz-time { flex:none; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lz-x { flex:none; background:none; border:none; color:var(--muted); font-size:1.25rem; line-height:1; cursor:pointer; padding:.2rem .4rem; }
.lz-x:hover { color:var(--text); }
@media (max-width:560px) {
  .lz-time { display:none; }
  .lz-meta { flex:1 1 auto; }
  .lz-seek { flex:1 1 100%; order:5; }
  #lizard-player { flex-wrap:wrap; row-gap:.35rem; }
  body.lz-open { padding-bottom:96px; }
}

/* Lab pies. */
.labpies {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(236px, 1fr));
  gap:1rem; max-width:820px; margin:1rem auto 0;
}
.lp { background-color:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.lp h4 {
  font-family:"Fraunces",Georgia,serif; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-soft); margin:0 0 .2rem;
}
.lp .lps { font-size:.69rem; color:var(--muted); line-height:1.5; margin:0 0 .75rem; }
.lp .lpc { display:flex; align-items:center; gap:.9rem; }
.lp svg { width:104px; flex:none; display:block; overflow:visible; }
.lp ul { list-style:none; margin:0; padding:0; flex:1; min-width:0; font-size:.75rem; }
.lp li { display:flex; align-items:baseline; gap:.45rem; padding:.13rem 0; color:var(--muted); }
.lp li i { width:8px; height:8px; border-radius:2px; flex:none; transform:translateY(1px); }
.lp li b { color:var(--text); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp li .n { margin-left:auto; font-variant-numeric:tabular-nums; }
.lp .lpe { font-size:.73rem; color:var(--muted); line-height:1.6; margin:0; }
@media (max-width:520px) { .labpies { grid-template-columns:1fr; } }