/* /what-to-sing (tools/build_sing_pages.py build_hub): Ask Magic Mic on top
   (the picker, shared with /what-to-sing/what-should-i-sing), the Songbook
   beneath. Everything here is still: the sign's bulb frame is the page's one
   hero in motion; the binder may glow but never moves. */
:root{--binder:#0f0c19; --binder-page:#171329; --binder-page-lo:#141022; --binder-label:#1b1630;
  --binder-hole:#05030a; --ring:#a8a1c0; --ring-hi:#d8d2ea; --ring-lo:#6b6482; --leader:#3f3658}

/* gels: an index tab is lit in its gel, the way a tag medallion is */
.g-b{--gel:var(--accent); --gl:145,132,217; --gfill:var(--blurple-fill); --glbl:var(--accent-400)}
.g-a{--gel:var(--gel-b); --gl:232,162,74;  --gfill:var(--amber-fill); --glbl:var(--tube-a)}
.g-p{--gel:var(--gel-a); --gl:224,85,155;  --gfill:var(--pink-fill); --glbl:var(--tube-p)}

/* ---- the top: hero words + the live booth ---- */
.hubhero .hh-in{position:relative; z-index:2; width:min(100% - 36px, 600px); margin-inline:auto; padding:14px 0 28px}
.hubhero .crumb{margin:0 0 8px}
.hubhero .dek{max-width:38ch}
.hubhero .jumps, .hubhero .own{display:none}
.hubpicker{margin-top:-10px}
.hubpicker.sw{position:relative; z-index:3}

/* ---- the songbook ---- */
.songbook{width:min(100% - 24px, 1180px); margin:64px auto 0; padding:0}
.sb-head{padding:0 6px}
.sb-k{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:500; color:var(--kicker)}
.sb-k .ico{width:20px; height:20px; color:var(--accent-400); filter:drop-shadow(0 0 5px rgba(145,132,217,.6))}
.songbook h2{font-size:clamp(32px,5vw,46px); line-height:1.08; margin:0 0 10px; color:var(--text); text-shadow:var(--neon-b)}
.sb-lede{margin:0; color:var(--secondary); font-size:15.5px; line-height:1.5; max-width:46ch}

/* the binder: padded vinyl, stitched round the edge, rings across the top */
.binder{position:relative; margin-top:26px; border-radius:22px; padding:16px 10px 20px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 50% at 50% 0%,rgba(145,132,217,.07),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),
    var(--binder);
  border:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04)}
.binder::before{content:""; position:absolute; inset:7px; border:1px dashed rgba(74,63,102,.75);
  border-radius:16px; pointer-events:none}
.sb-label{position:relative; display:table; margin:0 auto; padding:5px 14px 4px; border-radius:4px;
  background:var(--binder-label); border:1px solid var(--control-line); font:400 15px/1.2 var(--display);
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.sb-label i{font-style:normal; color:var(--gel-b)}
.sb-label{order:0} .sb-rings{order:1} .sb-page.left{order:2} .sb-page.right{order:3}
.sb-rings{display:flex; justify-content:space-around; padding:14px 8% 0}
.ring{position:relative; width:22px; height:30px}
/* a punched hole, and the ring rising out of it */
.ring::before{content:""; position:absolute; left:50%; bottom:0; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--binder-hole); box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)}
.ring::after{content:""; position:absolute; left:50%; bottom:5px; width:16px; height:26px; margin-left:-8px;
  border:3px solid var(--ring); border-bottom:0; border-radius:10px 10px 0 0;
  border-left-color:var(--ring-hi); border-right-color:var(--ring-lo); box-shadow:0 -2px 6px rgba(0,0,0,.6)}

/* a divider page, with its tab standing up off the top edge */
.sb-div{position:relative; margin-top:52px; padding:16px 14px 6px; border-radius:14px;
  background:linear-gradient(var(--binder-page),var(--binder-page-lo) 120px); border:1px solid var(--line);
  border-top:1.5px solid rgba(var(--gl),.6); box-shadow:0 -6px 18px -12px rgba(var(--gl),.6)}
.sb-div[id]{scroll-margin-top:130px}
.sb-tab{position:absolute; bottom:calc(100% - 1.5px); left:calc(8px + var(--n) * 22%);
  min-width:80px; min-height:44px; padding:6px 10px 5px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; border:1.5px solid var(--gel); border-bottom:0;
  border-radius:10px 10px 0 0; background:var(--binder-page); color:var(--glbl);
  box-shadow:0 -4px 14px -4px rgba(var(--gl),.55)}
.sb-tab .ico{width:21px; height:21px; color:var(--gfill); filter:drop-shadow(0 0 5px rgba(var(--gl),.85))}
.sb-tab span{font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1}
.sb-div h3{font:400 24px/1.12 var(--display); margin:2px 0 4px; color:var(--gfill);
  text-shadow:0 0 3px rgba(255,255,255,.4),0 0 12px rgba(var(--gl),.65)}
.sb-sub{margin:0 0 8px; color:var(--secondary); font-size:14px; line-height:1.45}

/* a row of the book: title, the host's hook, and on the calendar its date */
.sb-rows{list-style:none; margin:0 -6px; padding:0}
.sb-rows li{border-top:1px dotted var(--chip-line)}
.sb-rows a{position:relative; display:block; min-height:44px; padding:12px 8px 13px 12px;
  color:var(--text); text-decoration:none; border-radius:8px}
.sb-rows a::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px;
  background:var(--gel); box-shadow:0 0 8px rgba(var(--gl),.8); opacity:0}
.sb-rows a:hover{background:rgba(var(--gl),.06)}
.sb-rows a:hover::before, .sb-rows a:focus-visible::before{opacity:1}
.sb-rows a:hover b{color:var(--gfill)}
.sb-rows a:focus-visible{outline:2px solid var(--accent-400); outline-offset:-2px}
.sb-rows a:active{background:rgba(var(--gl),.12)}
.sb-t{display:flex; align-items:baseline; gap:8px}
.sb-t b{flex:0 1 auto; font:500 16px/1.3 var(--body); letter-spacing:-.005em}
.sb-lead{flex:1 1 14px; min-width:14px; border-bottom:2px dotted var(--leader); transform:translateY(-4px)}
.sb-date{flex:none; font:500 11.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tertiary); font-variant-numeric:tabular-nums}
.sb-hook{display:block; margin-top:3px; font-size:14px; line-height:1.45; color:var(--secondary)}
.is-next .sb-date{color:var(--amber-label); text-shadow:0 0 6px rgba(232,162,74,.6)}
.is-next a{padding-right:94px}
.sb-next{position:absolute; right:8px; top:50%; transform:translateY(-50%) rotate(-8deg); padding:1px 8px 0;
  border:2px solid var(--tube-a); border-radius:6px; font:400 15px/1.3 var(--display); letter-spacing:.06em;
  color:var(--amber-fill); text-shadow:var(--neon-ak); background:rgba(232,162,74,.07);
  box-shadow:0 0 10px rgba(232,162,74,.45),inset 0 0 6px rgba(232,162,74,.25)}

/* the way out to /whats-that-song, for a song you can't name yet */
.hub-wts{width:min(100% - 32px, 760px); margin:44px auto 0; text-align:center; font-size:15.5px}
.hub-wts a{display:inline-block; padding:12px 4px; color:var(--secondary); text-decoration:none}
.hub-wts b{color:var(--text); font-weight:500}
.hub-wts a:hover{color:var(--text)}

/* the back cover */
.backcover{width:min(100% - 32px, 760px); margin:64px auto 0}

/* ---- big screens: hero beside the booth; the binder opens flat, rings down the middle ---- */
@media (min-width:980px){
  .hubtop{display:grid; grid-template-columns:minmax(0,1fr) 600px; gap:56px;
    width:min(100% - 64px, 1180px); margin:0 auto; align-items:start}
  .hubhero{position:sticky; top:72px; overflow:visible; background:none; border:0}
  .hubhero .hh-in{width:auto; padding:28px 0 20px}
  .hubhero h1 .big{font-size:58px}
  .hubhero .dek{font-size:18px}
  .hubhero .jumps{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin:28px 0 0;
    padding-bottom:0; border-bottom:1px solid var(--line)}
  .jumps .jl{width:100%; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--kicker); margin-bottom:4px}
  .jt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:82px; min-height:48px;
    padding:6px 10px 5px; border:1.5px solid var(--gel); border-bottom:0; border-radius:10px 10px 0 0;
    color:var(--glbl); text-decoration:none; box-shadow:0 -4px 12px -6px rgba(var(--gl),.6)}
  .jt .ico{width:21px; height:21px; color:var(--gfill); filter:drop-shadow(0 0 5px rgba(var(--gl),.8))}
  .jt span{font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1}
  .jt:hover{background:rgba(var(--gl),.08)}
  .jt:focus-visible{outline:2px solid var(--accent-400); outline-offset:2px}
  .hubhero .own{display:block; margin:8px 0 0; font-size:14px}
  .own a{display:inline-block; padding:12px 0; line-height:20px; color:var(--secondary); text-decoration:none}
  .own a b{font-weight:500; color:var(--accent-400)}
  .own a:hover b{text-decoration:underline}
  .hubpicker{width:auto; margin:34px 0 0}

  .songbook{margin-top:96px}
  .sb-head{text-align:center}
  .sb-k{justify-content:center}
  .sb-lede{margin-inline:auto}
  .binder{display:grid; grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); padding:22px 26px 34px}
  .sb-label{grid-column:1/-1; margin-bottom:4px}
  .sb-page{min-width:0}
  .sb-page.left{grid-column:1; grid-row:2} .sb-rings{grid-column:2; grid-row:2} .sb-page.right{grid-column:3; grid-row:2}
  .sb-rings{flex-direction:column; justify-content:space-evenly; align-items:center; padding:50px 0 0}
  .ring{width:70px; height:22px; background:radial-gradient(circle at calc(100% - 12px) 50%,var(--binder-hole) 5px,transparent 6px)}
  .ring::before{left:6px; bottom:5px; margin:0}
  .ring::after{left:12px; right:12px; bottom:4px; width:auto; height:14px; margin:0; border:3px solid var(--ring);
    border-radius:9px; border-top-color:var(--ring-hi); border-bottom-color:var(--ring-lo)}
  .sb-page.left .sb-div{border-radius:14px 6px 6px 14px}
  .sb-page.right .sb-div{border-radius:6px 14px 14px 6px}
  .sb-div{padding:18px 20px 8px}
  .sb-tab{left:16px}
  .sb-page .sb-div + .sb-div .sb-tab{left:38%}
}