/* 'Before you sing it' on the /what-to-sing guides (tools/song_panel.py).
   Approved design: docs/design-research/song-labels-2026-10-12/mockup-b2-night-out.html.
   Nothing here moves: the hero is the page's one thing in motion. */
.dz-e{--dz-g:var(--accent); --dz-t:var(--accent-400)}
.dz-m{--dz-g:var(--gel-b); --dz-t:var(--tube-a)}
.dz-h{--dz-g:var(--gel-a); --dz-t:var(--tube-p)}
.gl-a{--dz-g:var(--gel-b); --dz-t:var(--tube-a)} .gl-p{--dz-g:var(--gel-a); --dz-t:var(--tube-p)}

/* the dial: a VU meter, the lit arc in the sign's gel */
.dial{display:grid; justify-items:center; padding:6px 6px 4px; border:1px solid var(--divider); border-radius:12px;
  background:radial-gradient(90% 90% at 50% 100%, #1c1530, #100c1b)}
.dial svg{width:100%; max-width:220px; height:auto; display:block; overflow:visible}
.readout{margin:2px 0 0; font-family:var(--display); font-size:14px; line-height:1.2; color:#fff; text-align:center;
  text-shadow:0 0 4px #fff, 0 0 12px var(--dz-g), 0 0 24px var(--dz-g)}
.dial.big{padding:12px 12px 10px; border-radius:16px}
.dial.big svg{max-width:250px}
.dial.big .readout{font-size:22px; line-height:1.15}
.tilt{display:inline-block; transform:rotate(-3deg)}
.gelsign{display:inline-block; font-family:var(--display); font-size:16px; line-height:1.3; color:#fff; padding:5px 12px;
  border:1.5px solid var(--dz-t); border-radius:10px; white-space:nowrap; text-shadow:0 0 10px var(--dz-g);
  box-shadow:0 0 10px var(--dz-g), inset 0 0 10px color-mix(in srgb,var(--dz-g) 18%,transparent)}

/* the strip: dial + sign inside a card (desktop) */
.strip{display:none}

/* the panel: a neon-outline toggle, then the slip and the beer mat */
.pick .bysi{grid-column:1 / -1; margin-top:4px}
.bysi summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 16px;
  border:1.5px solid var(--accent-400); border-radius:999px; background:rgba(12,10,20,.55); color:var(--text);
  box-shadow:0 0 10px rgba(145,132,217,.3), inset 0 0 10px rgba(145,132,217,.08)}
.bysi summary::-webkit-details-marker{display:none}
.bysi summary:hover{box-shadow:0 0 16px rgba(145,132,217,.5), inset 0 0 12px rgba(145,132,217,.14)}
.bysi summary:active{background:rgba(145,132,217,.14)}
.bysi summary:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.bysi .st{font-size:14.5px; font-weight:500}
.bysi .sum{margin-left:auto; font-family:var(--display); font-size:14px; color:var(--dz-t); text-shadow:0 0 8px var(--dz-g);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.chev{width:8px; height:8px; flex:none; border-right:1.5px solid var(--accent-400); border-bottom:1.5px solid var(--accent-400);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s}
.bysi:not(:has(.sum)) .chev{margin-left:auto}
.bysi[open] .chev{transform:rotate(-135deg)}
.more{display:grid; gap:18px; padding:18px 2px 4px}
.pdial{display:grid; gap:14px; justify-items:center}

.slip{position:relative; padding:20px 16px 8px; border-radius:6px; background:#17122a; border:1px solid var(--divider);
  -webkit-mask:radial-gradient(circle 4px at 8px 0, transparent 98%, #000) -8px 0/16px 100% repeat-x;
  mask:radial-gradient(circle 4px at 8px 0, transparent 98%, #000) -8px 0/16px 100% repeat-x}
.slip .hd{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; margin:0 0 4px;
  font-size:13px; color:var(--ghost)}
.slip .hd b{font:400 18px/1.2 var(--display); color:#e9e5ff; text-shadow:var(--neon-b)}
.slip ol{margin:0; padding:0; list-style:none}
.slip li{display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; border-bottom:1px dashed var(--divider)}
.slip li:last-child{border-bottom:0}
.slip .fld{font-size:11.5px; color:var(--ghost)}
.slip a{display:block; min-height:44px; padding:8px 0; color:var(--text); text-decoration:none; font-size:15.5px; line-height:1.3}
.slip a .by{display:block; color:var(--ghost); font-size:13px}
.slip a:hover{color:var(--accent-400)}
.slip a:focus-visible{outline:2px solid var(--accent-400); outline-offset:2px; border-radius:4px}

.mat{position:relative; margin:6px; transform:rotate(-1.2deg); border-radius:18px; padding:16px 18px; background:#120e1f;
  border:2px solid rgba(232,162,74,.55);
  box-shadow:0 0 0 5px #120e1f, 0 0 0 6.5px rgba(232,162,74,.3), 0 0 22px rgba(232,162,74,.18)}
.mat .mh{margin:0 0 8px; font:400 20px/1.2 var(--display); color:#ffe9c9; text-shadow:var(--neon-a)}
.mat ol{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.mat li{position:relative; padding-left:16px; font-size:14.5px; line-height:1.5; color:var(--muted)}
.mat li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%;
  background:var(--tube-a); box-shadow:0 0 6px var(--gel-b)}

.rail, .lkey{display:none}

/* ---- desktop: hero key, rail + two-across cards, capped at 1360px ---- */
@media (min-width:1100px){
  .lb .hero::before{content:""; position:absolute; inset:10px; z-index:2; pointer-events:none;
    background:var(--bulb-h) top/66px 12px round no-repeat, var(--bulb-h) bottom/66px 12px round no-repeat,
      var(--bulb-v) left/12px 66px no-repeat round, var(--bulb-v) right/12px 66px no-repeat round}
  .lb .hero > .wrap{width:min(100% - 96px, 1360px); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:56px; align-items:start}
  .lb .hero > .wrap > *{grid-column:1}
  .lb .hero > .wrap > .lkey{display:block; grid-column:2; grid-row:1 / span 9; align-self:center}
  .lb .intro .wrap{width:min(100% - 96px, 1360px)}
  .lkey{position:relative; z-index:2; border:1.5px solid rgba(181,171,252,.55); border-radius:22px; padding:22px 24px;
    background:rgba(12,10,20,.72); box-shadow:0 0 24px rgba(145,132,217,.25), inset 0 0 24px rgba(145,132,217,.06)}
  .lkey .kh{margin:0 0 14px; font:400 26px/1.15 var(--display); color:#e9e5ff; text-shadow:var(--neon-b)}
  .lkey .kd{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:center}
  .lkey .kt{margin:0 0 6px; font-size:13px; color:var(--ghost)}
  .lkey .kg{margin:0; display:flex; flex-wrap:wrap; gap:8px}
  .lkey .gelsign{font-size:13px; padding:4px 9px}
  .lkey .kp{margin:16px 0 0; font-size:14px; line-height:1.5; color:var(--muted)}

  .lbody{display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; align-items:start;
    width:min(100% - 96px, 1360px); margin-inline:auto; padding-top:24px}
  .lbody > .lsec > .district > .wrap{width:auto}
  .lbody .district{padding:34px 0}
  .rail{display:grid; gap:22px; position:sticky; top:96px; padding-top:40px}
  .rail .rnav{display:grid; gap:8px}
  .rail .rnav a{display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 16px; border:1.5px solid var(--dz-t);
    border-radius:12px; text-decoration:none; font-family:var(--display); font-size:19px; line-height:1.15; color:#fff;
    text-shadow:0 0 8px var(--dz-g); box-shadow:0 0 8px color-mix(in srgb,var(--dz-g) 55%,transparent),
      inset 0 0 8px color-mix(in srgb,var(--dz-g) 12%,transparent)}
  .rail .rnav a:nth-child(odd){transform:rotate(-.8deg)} .rail .rnav a:nth-child(even){transform:rotate(.8deg)}
  .rail .rnav a:hover{background:color-mix(in srgb,var(--dz-g) 10%,transparent)}
  .rail .rnav a:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
  .rdot{width:10px; height:10px; border-radius:50%; flex:none}
  .rdot.g-a{background:var(--tube-p); box-shadow:0 0 8px var(--gel-a), 0 0 18px var(--gel-a)}
  .rdot.g-b{background:var(--tube-a); box-shadow:0 0 8px var(--gel-b), 0 0 18px var(--gel-b)}
  .rmic{border:1.5px solid rgba(255,156,204,.6); border-radius:18px; padding:18px;
    background:radial-gradient(circle at 30% 0%, rgba(224,85,155,.16), #0e0a18 70%); box-shadow:0 0 20px rgba(224,85,155,.2)}
  .rmic .ico{width:30px; height:30px; color:var(--tube-p); filter:drop-shadow(0 0 8px rgba(224,85,155,.6)); margin-bottom:8px}
  .rmic p{margin:0; font-size:15px; color:var(--muted); line-height:1.5}
  .rmic p b{display:block; font:400 21px/1.2 var(--display); color:#ffe3f1; text-shadow:var(--neon-p); margin-bottom:6px}
  .rmic .go{display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-top:14px; padding:0 18px;
    border:1.5px solid var(--tube-p); border-radius:999px; color:#ffe3f1; text-decoration:none; font-size:14.5px; font-weight:500;
    box-shadow:0 0 10px rgba(224,85,155,.45), inset 0 0 8px rgba(224,85,155,.12)}
  .rmic .go:hover{box-shadow:0 0 16px rgba(224,85,155,.6), inset 0 0 10px rgba(224,85,155,.2)}
  .rmic .go:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}

  /* section headers hang like signs */
  .lbody .district h2{display:inline-block; position:relative; margin-top:26px; padding:12px 18px 14px;
    border:2px solid var(--dz-t); border-radius:12px; transform:rotate(-1.2deg);
    box-shadow:0 0 14px var(--dz-g), inset 0 0 14px color-mix(in srgb,var(--dz-g) 15%,transparent)}
  .lbody .district h2::before, .lbody .district h2::after{content:""; position:absolute; top:-28px; width:1px; height:28px; background:#5a4f78}
  .lbody .district h2::before{left:22%} .lbody .district h2::after{right:22%}
  .lbody .g-a{--dz-g:var(--gel-a); --dz-t:var(--tube-p)} .lbody .g-b{--dz-g:var(--gel-b); --dz-t:var(--tube-a)}
  .lbody .district .lede{margin:18px 0 26px}

  /* songs as cards, two across; an opened card spans the row */
  .lbody .picks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; grid-auto-flow:row dense}
  .lbody .picks .pick{grid-template-columns:minmax(0,1fr); gap:10px; align-content:start; padding:20px 22px 14px;
    border:1px solid var(--hairline); border-radius:18px; background:linear-gradient(180deg,#120e1f,#0e0b18)}
  .lbody .picks .pick:last-child{border-bottom:1px solid var(--hairline)}
  .lbody .strip{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:center;
    padding:12px 0 2px; border-top:1px dashed var(--hairline)}
  .lbody .strip:not(:has(.dial)){grid-template-columns:minmax(0,1fr)}
  .lbody .strip .tilt{justify-self:start}
  .lbody .pdial{display:none}
  .lbody .bysi.thin{display:none}
  .lbody .bysi .sum{display:none}
  .lbody .bysi .chev{margin-left:auto}
  .lbody .bysi summary{min-height:44px; padding:4px 14px; font-size:14px}
  .lbody .more{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-top:14px; align-items:start}
  .lbody .more:not(:has(.slip)) .mat, .lbody .more:not(:has(.mat)) .slip{grid-column:1 / -1}
  .lbody .picks .pick:has(> details[open]){grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); column-gap:30px}
  .lbody .picks .pick:has(> details[open]) > :not(details){grid-column:1}
  .lbody .picks .pick:has(> details[open]) > details{grid-column:2; grid-row:1 / span 3; align-self:start; margin-top:0}
  .lbody .ask{margin-top:26px}
}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}