/* Layout: bright game-day header -> role/search controls -> sections (cards on phone, full table on desktop) with a live NOW/NEXT bar */
:root{
  --bg:#faf8f4; --surface:#ffffff; --surface-2:#f3eee3; --fg:#1c1a17; --muted:#6f675c; --line:#e5ddcf;
  --maroon:#8a100b; --maroon-ink:#ffffff; --gold:#b29d6c; --gold-soft:#efe6d1;
  --board:#8a100b; --board-soft:#f5e3e1; --audio:#76612f; --audio-soft:#f0e8d5;
  --pa:#3d3a36; --pa-soft:#e9e5de; --note:#8a100b; --note-soft:#e8dbb8;
  --live:#1d8a4f; --live-soft:#dcf1e4; --cond:#f4e8c6; --cond-ink:#5a4512;
  --shadow:0 1px 2px rgba(40,20,10,.06),0 6px 20px -10px rgba(60,25,10,.22);
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Archivo",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121010; --surface:#1b1817; --surface-2:#25211f; --fg:#f3efe8; --muted:#a39b8f; --line:#36302b;
  --maroon:#c9463d; --maroon-ink:#ffffff; --gold:#c9b27f; --gold-soft:#3a3122;
  --board:#e0857c; --board-soft:#3a1714; --audio:#d6c08a; --audio-soft:#332a17;
  --pa:#d3ccc1; --pa-soft:#2d2a26; --note:#e0857c; --note-soft:#3a3122;
  --live:#45c983; --live-soft:#123222; --cond:#352c17; --cond-ink:#e8d39c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121010; --surface:#1b1817; --surface-2:#25211f; --fg:#f3efe8; --muted:#a39b8f; --line:#36302b;
  --maroon:#c9463d; --maroon-ink:#ffffff; --gold:#c9b27f; --gold-soft:#3a3122;
  --board:#e0857c; --board-soft:#3a1714; --audio:#d6c08a; --audio-soft:#332a17;
  --pa:#d3ccc1; --pa-soft:#2d2a26; --note:#e0857c; --note-soft:#3a3122;
  --live:#45c983; --live-soft:#123222; --cond:#352c17; --cond-ink:#e8d39c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.4 var(--body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.app{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:12px 120px}

/* top bar */
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{flex:1 0 100%;display:flex;align-items:center;gap:8px;font:800 1.15rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);margin-right:auto}
.puck{width:22px;height:22px;border-radius:50%;background:var(--maroon);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 0 0 3px var(--gold)}
select.games{flex:1 1 160px;min-width:0;max-width:340px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:.92rem}
.btn.primary{background:var(--maroon);border-color:var(--maroon);color:var(--maroon-ink)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:.82rem}

/* hero */
.hero{margin-top:14px;border-radius:18px;padding:18px 18px 16px;background:
  linear-gradient(120deg,#5c0a06 0%,#8a100b 58%,#9e2a1f 100%);color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(178,157,108,.45)}
.eyebrow{font:700 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.hero h1{font:800 clamp(2rem,6vw,3.4rem)/.95 var(--display);text-transform:uppercase;margin:.25rem 0 .5rem;letter-spacing:.01em;text-wrap:balance;position:relative;z-index:1}
.hero h1 .vs{color:#d9c79b;font-weight:700;padding-inline:.15em}
.meta{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:600;font-size:.88rem;backdrop-filter:blur(2px)}
.pill.gold{background:#b29d6c;color:#241c0a}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.roles{display:flex;gap:6px;flex-wrap:wrap}
.role{padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:.88rem}
.role[aria-pressed="true"]{color:#fff;border-color:transparent}
.role[data-r="all"][aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.role[data-r="vb"][aria-pressed="true"]{background:var(--board)}
.role[data-r="au"][aria-pressed="true"]{background:var(--audio)}
.role[data-r="pa"][aria-pressed="true"]{background:var(--pa)}
.role[data-r="notes"][aria-pressed="true"]{background:var(--note)}
.search{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.search input{border:0;outline:0;background:transparent;width:100%;min-width:0}
.search svg{flex:none;color:var(--muted)}

/* layout */
.layout{display:grid;gap:18px;margin-top:14px}
@media (min-width:640px){.brand{flex:0 1 auto;margin-right:auto}}
@media (min-width:1100px){.layout{grid-template-columns:220px minmax(0,1fr)}}
.side{display:none}
@media (min-width:1100px){.side{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);align-self:start}}
.side a{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--fg);font:700 1.05rem var(--display);letter-spacing:.05em;text-transform:uppercase}
.side a:hover{background:var(--surface-2)}
.side a span{font:600 .78rem var(--body);color:var(--muted);letter-spacing:0}
.side a.here{background:var(--gold-soft)}
.chips{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:10px 16px;background:var(--bg)}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;padding:6px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);text-decoration:none;color:var(--fg);font:700 .95rem var(--display);letter-spacing:.05em;text-transform:uppercase}
.chips a.here{background:var(--maroon);border-color:var(--maroon);color:#fff}
@media (min-width:1100px){.chips{display:none}}

section.sec{scroll-margin-top:70px;margin-bottom:26px}
.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.sec-h h2{margin:0;font:800 1.7rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.sec-h .count{font-size:.85rem;color:var(--muted);font-weight:600}
.sec-h::before{content:"";width:6px;align-self:stretch;border-radius:3px;background:var(--maroon)}
.sub{font:700 .95rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--audio);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.sub::after{content:"";flex:1;height:1.5px;background:var(--line)}
.sub.empty::after{background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}

/* cue list */
.list{display:grid;gap:8px}
.thead{display:none}
.cue{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,opacity .2s}
.cue:active{transform:scale(.995)}
.cue.cond{background:var(--cond);border-color:transparent}
.cue.dim{opacity:.35}
.cue.done .el,.cue.done .f,.cue.done .clock{text-decoration:line-through;opacity:.5}
.cue.now{border-color:var(--live);box-shadow:0 0 0 3px var(--live-soft),var(--shadow)}
.cue.next{border-color:var(--gold)}
.when{display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums}
.clock{font:800 1.3rem/1 var(--display);color:var(--maroon)}
.num{font:700 .74rem var(--body);color:var(--muted);letter-spacing:.04em}
.el{font-weight:700;font-size:1.06rem;line-height:1.25}
.el.caps{text-transform:uppercase;letter-spacing:.03em;color:var(--maroon)}
.tag{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 7px;border-radius:6px;font:700 .66rem var(--body);letter-spacing:.08em;text-transform:uppercase}
.tag.win{background:#b29d6c;color:#241c0a}
.tag.now{background:var(--live);color:#fff}
.tag.next{background:var(--gold-soft);color:var(--fg)}
.fields{grid-column:2;display:flex;flex-direction:column;gap:5px;margin-top:2px}
.f{display:flex;gap:8px;align-items:flex-start;font-size:.93rem;min-width:0}
.f b{flex:none;font:700 .66rem/1.9 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:0 7px;border-radius:6px}
.f span{white-space:pre-line;overflow-wrap:anywhere;min-width:0}
.f.vb b{background:var(--board-soft);color:var(--board)}
.f.au b{background:var(--audio-soft);color:var(--audio)}
.f.pa b{background:var(--pa-soft);color:var(--pa)}
.f.notes b{background:var(--note-soft);color:var(--note)}
.f.notes span{color:var(--note);font-weight:600}
.f.hl span{font-weight:700}
.golive{position:absolute;right:10px;top:10px;padding:4px 9px;border-radius:8px;border:1.5px solid var(--live);background:transparent;color:var(--live);font:700 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase}
.golive:hover{background:var(--live);color:#fff}

/* desktop table */
@media (min-width:1100px){
  .list{gap:0;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
  .thead,.cue{display:grid;grid-template-columns:var(--gtc,62px 46px minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,1fr) 70px minmax(0,1fr) 56px);gap:0 14px;align-items:start}
  .thead{padding:9px 14px;background:var(--maroon);color:#fff;font:700 .74rem var(--body);letter-spacing:.1em;text-transform:uppercase}
  .cue{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:11px 14px}
  .cue:first-of-type{border-top:0}
  .cue.now{box-shadow:inset 5px 0 0 var(--live);background:var(--live-soft)}
  .cue.next{box-shadow:inset 5px 0 0 var(--gold)}
  .cue:hover:not(.now){background:var(--surface-2)}
  .cue.cond:hover{background:var(--cond)}
  .when{display:contents}
  .num{font-size:.9rem;color:var(--fg);font-weight:600}
  .fields{display:contents}
  .f{margin:0}
  .f b{display:none}
  .f.empty{visibility:hidden}
  .el{font-size:1rem}
  .golive{position:static;justify-self:end}
  .col-main{min-width:0}
}
@media (max-width:1099px){.f.empty{display:none}.cue:has(.golive) .col-main{padding-right:46px}}

/* live bar */
.livebar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:3px solid var(--live);box-shadow:0 -10px 30px -16px rgba(0,0,0,.35)}
.livebar .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:12px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--live);flex:none;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,174,107,.6)}70%{box-shadow:0 0 0 10px rgba(15,174,107,0)}100%{box-shadow:0 0 0 0 rgba(15,174,107,0)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}html{scroll-behavior:auto}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.lb-text{flex:1;min-width:0;display:grid;gap:2px}
.lb-now{font:800 1.15rem/1.1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-next{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-btns{display:flex;gap:6px;flex:none}

/* empty + modal */
.empty-state{margin-top:22px;padding:34px 22px;border-radius:18px;border:2px dashed var(--line);background:var(--surface);text-align:center;display:grid;gap:12px;justify-items:center}
.empty-state h2{margin:0;font:800 1.8rem var(--display);text-transform:uppercase}
.empty-state p{margin:0;color:var(--muted);max-width:52ch}
.drop{border:2px dashed var(--maroon);border-radius:14px;padding:22px;text-align:center;background:var(--surface-2);display:grid;gap:8px;justify-items:center}
.drop.over{background:var(--gold-soft)}
dialog{border:0;border-radius:18px;padding:0;width:min(560px,calc(100vw - 32px));background:var(--surface);color:var(--fg);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(30,10,15,.5)}
.dlg{padding:20px;display:grid;gap:14px}
.dlg h3{margin:0;font:800 1.6rem var(--display);text-transform:uppercase}
.dlg label{display:grid;gap:4px;font-size:.82rem;font-weight:600;color:var(--muted)}
.dlg input[type=text]{padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:1rem}
.grid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.summary{display:flex;flex-wrap:wrap;gap:6px}
.summary span{padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:.82rem;font-weight:600}
.row-end{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.msg{font-size:.88rem;color:var(--note);font-weight:600}
.foot{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.85rem}
.foot .sp{flex:1}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;z-index:40;box-shadow:var(--shadow)}

/* edit mode */
.mv{display:flex;align-items:center;gap:4px;position:absolute;right:8px;top:8px}
.mvbtn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);font-size:.8rem;line-height:1}
.mvbtn:hover{border-color:var(--maroon);color:var(--maroon)}
.handle{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:1.2rem;cursor:grab;touch-action:none;user-select:none}
.handle:active{cursor:grabbing}
.editing .cue{cursor:grab;-webkit-user-select:none;user-select:none}
.editing .cue{touch-action:pan-y}
.editing .cue.dragging{box-shadow:0 0 0 3px var(--maroon),0 12px 30px -10px rgba(0,0,0,.45)!important;background:var(--gold-soft)!important;position:relative;z-index:5;cursor:grabbing}
body.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
body.is-dragging .editing .cue{touch-action:none}
.editing .cue .col-main{padding-right:118px}
.editing .list{outline:2px dashed var(--gold);outline-offset:3px}
.drophint{padding:14px;text-align:center;color:var(--muted);font-size:.85rem}
.ghost{opacity:.4;background:var(--gold-soft)!important}
.cue.moved{animation:flash 1s ease}
@keyframes flash{from{background:var(--gold-soft)}to{}}
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:22;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:3px solid var(--maroon);box-shadow:0 -10px 30px -16px rgba(0,0,0,.35)}
.editbar .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.editbar strong{font:800 1.1rem var(--display);text-transform:uppercase;letter-spacing:.04em;margin-right:auto}
.editbar label{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600}
@media (min-width:1100px){.mv{position:static;justify-self:end}.editing .cue .col-main{padding-right:0}}
@media (prefers-reduced-motion:reduce){.cue.moved{animation:none}}

.sec-move{margin-left:auto;align-self:center}

/* editing + sync */
.addcue{width:100%;padding:10px;border:1.5px dashed var(--gold);border-radius:12px;background:transparent;color:var(--audio);font-weight:700;font-size:.9rem;margin-top:8px}
.addcue:hover{background:var(--gold-soft)}
@media (min-width:1100px){.addcue{margin:0;border-radius:0;border:0;border-top:1px dashed var(--line)}}
.editing .cue:hover{outline:2px solid var(--gold);outline-offset:-2px}
.dlg textarea{padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;resize:vertical}
.dlg .check{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--fg);font-size:.9rem}
.dlg .sp{flex:1}
.btn.danger{color:var(--maroon)}
.sheetbar{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--gold-soft);border:1.5px solid var(--gold);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:600}
.sheetbar span{flex:1;min-width:180px}
.changes{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.changes li{padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:.9rem}
.changes li b{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-right:6px}
.changes .add b{background:var(--live-soft);color:var(--live)}
.changes .remove b{background:var(--board-soft);color:var(--maroon)}
.changes .edit b{background:var(--audio-soft);color:var(--audio)}
.changes small{display:block;color:var(--muted);margin-top:2px}
.changes del{color:var(--muted)}
.sheetlink{font-size:.85rem;color:var(--muted)}
#cDelete{color:var(--maroon);border:1.5px solid var(--maroon);opacity:1}
#cDup{color:var(--fg);border:1.5px solid var(--line);opacity:1}

.tag.ribbon{background:var(--maroon);color:#fff}
.tag.dur{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.f.area b{background:var(--surface-2);color:var(--fg)}
.f.av b{background:var(--board-soft);color:var(--board)}
.f.area span{font-weight:600}
.cuefields{display:grid;gap:10px}

.whenmain{display:flex;flex-direction:column;gap:2px}
.gclock{font:700 .78rem var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.clock.note{font:700 .78rem/1.2 var(--body);color:var(--audio);text-transform:uppercase;letter-spacing:.03em}
@media (max-width:1099px){.has-time .cue{grid-template-columns:78px minmax(0,1fr)}}

/* ---------- game-day UI ---------- */
.btn.icon{width:42px;height:42px;padding:0;justify-content:center;font-size:1.1rem}
.role{min-height:40px}
.ctx{position:sticky;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:7;display:flex;align-items:center;gap:8px;margin:0 -16px;padding:6px 16px;background:var(--bg);border-bottom:1.5px solid var(--line);min-height:46px;opacity:0;pointer-events:none;transition:opacity .15s}
.ctx.show{opacity:1;pointer-events:auto}
.ctx-text{flex:1;min-width:0;font:800 1.05rem var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--maroon)}
@media (min-width:1100px){.ctx{top:env(safe-area-inset-top,0px);margin:0 -16px}}
.chips{order:0}
.sub{justify-content:space-between}
.sub span{flex:none}
.sub-edit{order:3;flex:none;margin-left:8px;padding:6px 12px;min-height:34px;border-radius:9px;border:1.5px solid var(--maroon);background:transparent;color:var(--maroon);font:700 .78rem var(--body);letter-spacing:.02em;text-transform:none}
.sub-edit:hover{background:var(--maroon);color:#fff}
.sec.folded .sec-h{opacity:.75}
.sec-h .btn{margin-left:auto}
.sec-h .btn + .btn{margin-left:6px}
.livebar .in{gap:10px}
.livebar .btn{min-height:48px;padding-inline:16px;font-size:.95rem}
#lbGo{min-width:120px;font-size:1.05rem}
.lb-edit{flex:none}
.lb-text{flex:1;min-width:0;display:grid;gap:2px;text-align:left;background:none;border:0;padding:4px 0;color:var(--fg);cursor:pointer}
.golive{min-height:38px;min-width:52px;font-size:.8rem}
@media (max-width:640px){
  .livebar .in{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"text text text" "edit . nav";gap:8px 8px}
  .lb-text{grid-area:text}
  .lb-edit{grid-area:edit}
  .lb-btns{grid-area:nav}
  #lbJump{grid-area:nav}
  #lbGo{min-width:120px}
}
.livebar .dot{display:none}
.livebar.is-live .lb-now::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--live);margin-right:8px;vertical-align:1px;animation:pulse 1.6s infinite}
.btn{white-space:nowrap}
.sec-h{flex-wrap:wrap;row-gap:6px}
.sec-h h2{min-width:0}
@media (max-width:1099px){
  .editing .cue .col-main{padding-right:0}
  .editing .cue .mv{position:static;grid-column:1 / -1;justify-content:flex-end;gap:8px;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
  .mvbtn,.handle{width:44px;height:40px}
  .editbar .in{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title renum" "undo actions";gap:8px}
  .editbar strong{grid-area:title}
  .editbar label{grid-area:renum}
  #editReset{grid-area:undo;justify-self:start}
  .editbar .in::after{content:none}
}
#editSave,#editCancel{min-height:46px;padding-inline:18px}
#editSave{font-size:1rem}

.synced{position:relative;z-index:1;margin-top:10px;font-size:.82rem;font-weight:600;opacity:.92}

/* sheet colour coding */
.cue.has-hl{box-shadow:inset 6px 0 0 var(--hl),var(--shadow)}
.cue.has-hl.now{box-shadow:inset 6px 0 0 var(--hl),0 0 0 3px var(--live-soft),var(--shadow)}
@media (min-width:1100px){.cue.has-hl{box-shadow:inset 6px 0 0 var(--hl)}.cue.has-hl.now{box-shadow:inset 6px 0 0 var(--hl);background:var(--live-soft)}}

@media (min-width:1100px){.side{top:calc(env(safe-area-inset-top,0px) + 58px)}}