/* ============ playlists ============ */
.tmplrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px}
.tmpl{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:15px;text-align:start;
  border:1px solid var(--line);background:var(--panel-2);transition:.15s}
.tmpl:hover{border-color:var(--cc);background:color-mix(in srgb, var(--cc) 9%, var(--panel-2))}
.tmpl .ti{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;font-size:18px;
  background:var(--cc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tmpl .tt{display:flex;flex-direction:column;min-width:0}
.tmpl .tn{font-size:14.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tmpl .tc{font-size:11.5px;color:var(--fnt);font-weight:700;font-variant-numeric:tabular-nums}
.tmpl-blank{border-style:dashed}

.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:13px}
.plcard{text-align:start;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);transition:.16s;box-shadow:var(--sh-1)}
.plcard:hover{border-color:var(--cc);transform:translateY(-2px);
  box-shadow:0 16px 34px -18px color-mix(in srgb, var(--cc) 80%, transparent)}
.plart{height:74px;position:relative;display:grid;place-items:center}
.plart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.42))}
.plcount{position:relative;z-index:1;font-size:27px;font-weight:900;color:#fff;letter-spacing:-.04em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.plbody{padding:12px 14px 14px}
.plbody h4{font-size:17px;font-weight:900;margin:0 0 3px;letter-spacing:-.03em}
.plsub{font-size:12.5px;color:var(--mut);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.plwhen{font-size:11.5px;color:var(--fnt);font-weight:700;margin-top:5px}

.pickres{margin-top:10px;max-height:340px;overflow-y:auto;scrollbar-width:thin;
  border:1px solid var(--line);border-radius:14px;padding:6px}
.pickres::-webkit-scrollbar{width:6px}
.pickres::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.pickrow{width:100%;display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:11px;
  text-align:start;transition:.13s;border:1px solid transparent}
.pickrow:hover{background:var(--panel-2);border-color:var(--cc)}
.pickplus{font-size:19px;color:var(--cc);font-weight:900;flex:0 0 auto;line-height:1}

.setrow{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--panel-2);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;margin-bottom:7px}
.setrow .idx{font-size:12px;color:var(--fnt);font-weight:900;width:20px;font-variant-numeric:tabular-nums;
  flex:0 0 auto}
.cover.small{width:34px;height:34px;border-radius:9px;font-size:13px}
/* title and performer as one block: the song name is the line that carries the
   row, the performer sits under it. this is also what stops the title being
   squeezed to zero width by the fixed-size controls beside it. */
.setrow .st-main{flex:1 1 0;min-width:120px}
.setrow .nm{font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;color:var(--tx)}
.setrow .ar{display:flex;align-items:baseline;gap:7px;margin-top:2px;min-width:0}
.setrow .arn{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.setrow .ark{flex:0 0 auto;font-size:12px;font-weight:900;color:var(--tx-2);direction:ltr;
  font-variant-numeric:tabular-nums}
/* note and remove shrink to their marks at every width — a wrapped second line
   would double the height of every row in a set list. tooltips carry the words. */
.setrow .notebtn,.setrow .rmbtn{font-size:0;padding:5px 8px;border-radius:9px;flex:0 0 auto}
.setrow .notebtn::before{content:"✎";font-size:13px}
.setrow .rmbtn::before{content:"✕";font-size:12px}
.setrow .notebtn.has{color:var(--acc);border-color:var(--acc-line)}
.setrow .rmbtn:hover{color:var(--no);border-color:var(--no)}
.setrow.tappable{cursor:pointer;transition:.14s}
.setrow.tappable:hover{border-color:var(--cc);background:var(--panel-3)}
.setrow.tappable:hover .nm{color:var(--cc);color:color-mix(in srgb, var(--cc), #000 var(--cc-dark))}
@media(max-width:620px){
  .setrow{gap:8px;padding:8px 10px;flex-wrap:nowrap}
  .setrow .st-main{min-width:0}
  .setrow .nm{font-size:16px}
  /* the two dots are decoration next to a name that needs the room */
  .setrow .row-marks{display:none}
}
.ord{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.ord button{width:22px;height:15px;font-size:9px;color:var(--fnt);line-height:1}
.ord button:hover{color:var(--cc)}

.sharepre{background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;
  font-family:inherit;font-size:14px;line-height:1.75;white-space:pre-wrap;max-height:320px;
  overflow-y:auto;margin:0;color:var(--tx-2);direction:rtl;text-align:start}
.swrow{display:flex;gap:7px;flex-wrap:wrap}
.swatchbtn{width:30px;height:30px;border-radius:10px;border:2px solid transparent;transition:.14s}
.swatchbtn[aria-pressed="true"]{border-color:var(--tx);transform:scale(1.08)}

/* ============ completion centre ============ */
.prog+.prog{margin-top:15px}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.prog-l{font-size:13.5px;font-weight:900;color:var(--tx-2)}
.prog-n{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums;font-weight:800}
.prog-track{height:9px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.prog-fill{height:100%;border-radius:99px}
.todorow{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:9px;background:var(--panel-2)}
.todo-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.todo-nm{font-size:16.5px;font-weight:900;color:var(--tx);text-align:start;letter-spacing:-.03em}
.todo-nm:hover{color:var(--cc)}
.todo-meta{font-size:12px;color:var(--fnt);font-weight:700}
.todo-ta{min-height:56px;font-family:"Frank Ruhl Libre",serif;font-size:16px;line-height:1.75}
.todo-act{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.todo-more{font-size:12.5px;color:var(--fnt);text-align:center;padding:13px 0 2px}

/* ============ stage — built for a dark hall, one hand, three seconds ============ */
#stage{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:none;flex-direction:column}
#stage.on{display:flex}
.stagebar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #171B24;
  flex-wrap:wrap;background:#000;transition:opacity .4s, transform .4s;position:relative;z-index:6}
.stagebar.away{opacity:0;transform:translateY(-100%);pointer-events:none}
.stagebar .st{font-size:15px;font-weight:800;flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:-.02em;color:#C9CFDD}
.stagebar .stkey{font-size:17px;font-weight:900;color:#000;background:#FFB43D;border-radius:9px;
  padding:3px 12px;direction:ltr;letter-spacing:.01em;flex:0 0 auto}
.stagebar button{color:#9AA3B8;padding:8px 12px;border-radius:99px;border:1px solid #262D3D;
  font-size:13.5px;font-weight:800;min-width:42px}
.stagebar button:hover{background:#141926;color:#FFB43D}
.stagebar button.act-on{background:#3B2C10;color:#FFB43D;border-color:#5E471A}
#stagebarshow{position:fixed;top:8px;inset-inline-end:12px;z-index:7;width:44px;height:34px;
  border-radius:99px;background:#111622;color:#8B94AA;font-size:18px;border:1px solid #262D3D}

#stagebody{flex:1;overflow-y:auto;padding:40px 22px 70vh;scrollbar-width:none;position:relative;z-index:2}
#stagebody::-webkit-scrollbar{display:none}
#stagetext{font-family:"Frank Ruhl Libre",serif;font-size:var(--sly,44px);line-height:1.65;
  white-space:pre-wrap;max-width:24ch;margin:0 auto;text-align:center;color:#fff}

/* verse view — no scrolling, the words fill the screen */
#versewrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:16px 24px 74px;overflow:hidden}
#versetext{font-family:"Frank Ruhl Libre",serif;line-height:1.5;white-space:pre-wrap;text-align:center;
  color:#fff;font-weight:500;position:relative;z-index:3;pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.9);max-width:100%}
#versedots{position:absolute;bottom:14px;inset-inline:0;display:flex;gap:7px;justify-content:center;
  z-index:5}
#versedots i{width:9px;height:9px;border-radius:50%;background:#2A3142;cursor:pointer;display:block}
#versedots i.on{background:#FFB43D;transform:scale(1.25)}
.tapzone{position:absolute;top:0;bottom:0;z-index:4;background:transparent;border:0}
.tapzone.fwd{inset-inline-start:0;width:70%}
.tapzone.back{inset-inline-end:0;width:30%}
.tapzone:active{background:rgba(255,255,255,.04)}
.versehint{position:absolute;bottom:38px;inset-inline:0;text-align:center;font-size:12.5px;
  color:#4B5468;font-weight:700;z-index:5;pointer-events:none;animation:fadepulse 2.6s infinite}
@keyframes fadepulse{0%,100%{opacity:.35}50%{opacity:.9}}

#stagenextbar{display:flex;align-items:center;gap:11px;padding:11px 18px;border-top:1px solid #171B24;
  background:#07080C;cursor:pointer;flex-wrap:wrap;position:relative;z-index:6}
#stagenextbar:hover{background:#0E121C}
#stagenextbar .nl{font-size:10.5px;font-weight:900;letter-spacing:.11em;color:#4B5468}
#stagenextbar .nn{font-size:16px;font-weight:800;color:#D6DBE6;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#stagenextbar .nk{font-size:13px;font-weight:900;color:#FFB43D;direction:ltr;
  border:1px solid #5E471A;border-radius:8px;padding:2px 9px}
#stagenextbar .ni{font-size:12px;color:#4B5468;font-weight:800;font-variant-numeric:tabular-nums}

@media (orientation:landscape) and (max-height:520px){
  .stagebar{padding:5px 10px}
  .stagebar button{padding:5px 10px;font-size:12.5px}
  #versewrap{padding:8px 20px 52px}
  #stagenextbar{padding:7px 14px}
}

/* ============ modal / toast ============ */
.scrim{position:fixed;inset:0;background:rgba(4,6,10,.7);z-index:90;display:none;align-items:flex-start;
  justify-content:center;padding:6vh 16px;overflow-y:auto;backdrop-filter:blur(7px)}
.scrim.on{display:flex}
.modal{background:var(--panel);border-radius:22px;box-shadow:var(--sh-2);width:100%;max-width:560px;
  border:1px solid var(--line);overflow:hidden}
.modalhead{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.modalhead h3{font-size:20px;margin:0;font-weight:900;letter-spacing:-.03em}
.modalbody{padding:20px 22px}
.modalfoot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;
  background:var(--panel-2)}
.toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(50%) translateY(80px);
  background:var(--cc);color:#0B0C10;padding:11px 21px;border-radius:99px;font-size:14px;font-weight:900;
  z-index:120;opacity:0;transition:.24s cubic-bezier(.4,0,.2,1);pointer-events:none;box-shadow:var(--sh-2)}
:root[data-theme="light"] .toast,:root:not([data-theme="dark"]) .toast{color:#fff}
:root[data-theme="dark"] .toast{color:#0B0C10}
.toast.on{opacity:1;transform:translateX(50%) translateY(0)}
.savestate{font-size:11.5px;color:var(--fnt);display:flex;align-items:center;gap:6px;font-weight:700}
.savestate .dot{width:6px;height:6px;border-radius:50%;background:var(--fnt)}
.savestate.live .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent)}
.savestate.local .dot{background:var(--acc);box-shadow:0 0 0 3px var(--acc-dim)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============ on stage ============ */
/* the setup controls stay hidden until the gear is pressed */
#stagebar:not(.tools) #stagemode,
#stagebar:not(.tools) #stagenikud,
#stagebar:not(.tools) #stageeve,
#stagebar:not(.tools) #stagesmaller,
#stagebar:not(.tools) #stagebigger,
#stagebar:not(.tools) #stagescroll,
#stagebar:not(.tools) #stageslower,
#stagebar:not(.tools) #stagefaster{display:none}
#stagebar.tools #stagegear{background:#FFB43D;color:#0B0C10;border-color:#FFB43D}
/* a thumb in motion needs a target it cannot miss */
#stagebar button{min-height:48px;min-width:48px;font-size:15px}
#stagebar #stagegear{font-size:19px}
#stagebar #stageprev,#stagebar #stagenext{font-size:26px;font-weight:700;padding:0 4px}
#stagebar{flex-wrap:wrap;gap:6px;row-gap:2px}
/* the title gets its own full line and is centred: squeezed between the buttons it
   was 23px wide, which is exactly the thing he needs to read to know he opened the
   right song. the key rides at the start of the control row, large. */
#stagebar .st{order:-2;flex:0 0 100%;text-align:center;font-size:22px;font-weight:900;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:2px 4px 0}
#stagebar .stkey{order:-1;font-size:22px;font-weight:900;padding:6px 15px;margin-inline-end:auto}
#stagebar .stbpm{order:-1}

/* during an event the brand row is dead weight — the gig bar carries the exit */
#app.gig .topbar .brand,
#app.gig .topbar .gigbtn,
#app.gig .topbar #addbtn,
#app.gig .topbar #reqbtn,
#app.gig .topbar #themebtn{display:none}
#app.gig .topbar-in{padding:8px 18px}
/* his running order, numbered, so he always knows where he is in the evening */
.gignum{flex:0 0 auto;min-width:26px;font-size:15px;font-weight:900;color:var(--fnt);
  font-variant-numeric:tabular-nums;text-align:center}
#app.gig .row.gigrow.sung .gignum{color:var(--ok)}