:root{
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px);
  --ground:#0D1014; --panel:#161B22; --panel2:#1E242E; --panel3:#262E3A;
  --line:#2C3440; --line2:#222A34;
  --ink:#E9EDF3; --dim:#A9B4C2; --dimmer:#909CAA;
  --brass:#DDA24A; --brass-soft:#8a6528;
  --panel-t:rgba(22,27,34,.74); --panel2-t:rgba(30,36,46,.7); --brass-t:rgba(221,162,74,.9);
  --live:#E15555; --freeze:#5B9BD5; --ok:#4CB782; --violet:#9B87D4;
  --r:6px;
  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --proj:'Manrope',system-ui,sans-serif;
}
/* Light palette. The console chrome follows this; the projected slide keeps its
   own colours from the theme panel, since a lit room must never lighten the screen. */
:root[data-ui="light"]{
  --ground:#EDEFF3; --panel:#FFFFFF; --panel2:#F5F7FA; --panel3:#E9EDF2;
  --line:#D5DBE3; --line2:#E5E9EF;
  --ink:#121820; --dim:#57626F; --dimmer:#596574;
  --brass:#8F6210; --brass-soft:#C39B52;
  --panel-t:rgba(255,255,255,.80); --panel2-t:rgba(245,247,250,.76); --brass-t:rgba(143,98,16,.92);
  --live:#BE3A3A; --freeze:#2A67A0; --ok:#1F7549; --violet:#65509F;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--dimmer);opacity:1}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:5px;border:2px solid var(--panel)}
:root[data-ui="light"] .btn.accent,:root[data-ui="light"] .seg button.on,
:root[data-ui="light"] .tbig.go,:root[data-ui="light"] .thumb.live .tfoot{color:#fff}
:root[data-ui="light"] .role:hover{background:var(--panel2)}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:7px 12px;border-radius:var(--r);font-weight:500;display:inline-flex;align-items:center;gap:7px;line-height:1;transition:background .12s,border-color .12s}
.btn:hover{background:var(--panel3);border-color:#3a4553}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.accent{background:var(--brass);color:#20160a;border-color:var(--brass);font-weight:600}
.btn.accent:hover{background:#eab259}
.btn.danger{color:var(--live);border-color:#4a2b2b}
.btn[disabled]{opacity:.35;cursor:not-allowed}
/* Panel toggles light up while their panel is showing. */
.btn.icon{padding:6px 9px;line-height:0}
.btn.icon svg{display:block}
.btn.on{color:var(--brass);border-color:var(--brass-soft);background:var(--panel3)}
.btn.ghost.on{background:var(--panel2)}
.key{font-family:var(--mono);font-size:10px;color:var(--dimmer);border:1px solid var(--line);border-radius:3px;padding:1px 4px;line-height:1.4}
.btn.accent .key{color:inherit;border-color:currentColor}
/* Size both states from the longer label in the current font. Keep the
   weight steady too: the active button must not gain width on other OSes. */
#btnFreeze,#btnBlack,#btnBlank{font-weight:600}
.freeze-label{display:inline-grid;text-align:left}
.freeze-label::after{content:"Review Hold";visibility:hidden;grid-area:1/1}
#freezeText{grid-area:1/1}
#btnRedo svg,#btnRedoStage svg{transform:scaleX(-1)}
.field{width:100%;background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;color:var(--ink)}
.field:focus{outline:none;border-color:var(--brass-soft)}
textarea.field{resize:vertical;line-height:1.55}

/* ---------- role gate ---------- */
/* A phone is shorter than this screen is tall. Centring a flex child that is
   taller than its box crops it at the TOP, where the wordmark lives, and an
   overflow of hidden means there is no way to scroll down to the rest either —
   so the page fits nothing and scrolls nowhere. Start the child at the top,
   let the box scroll, and centre it with auto margins, which give way instead
   of cropping when the content is the taller of the two. */
#gate{position:fixed;inset:0;background:var(--ground);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:24px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gate-inner{max-width:760px;width:100%;margin:auto 0;flex:none}
.wordmark{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.wordmark b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.wordmark span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.gate-sub{color:var(--dim);margin:0 0 30px;max-width:52ch;line-height:1.6}
/* Wraps on a phone rather than pushing the button off the edge — this is the
   one control a person on an iPad cannot get to any other way. */
.updbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding:11px 14px;
  border:1px solid var(--accent);border-radius:10px;background:rgba(90,150,255,.08);
  font-size:13px;line-height:1.5}
.updbar span{flex:1 1 220px;min-width:0}
.gate-update{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--dimmer);font-size:12px}
.gate-update span{flex:1;min-width:180px}
#btnRole,#btnRoleBand,#btnRoleDisp{position:relative}
.update-ready::after{content:"";position:absolute;right:1px;top:1px;width:8px;height:8px;
  border:2px solid var(--panel);border-radius:50%;background:var(--brass);pointer-events:none}
.gate-svc{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.gate-svc label{flex:none}
.gate-svc select{flex:1;max-width:320px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.roles{grid-template-columns:repeat(2,1fr)}}
.role{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:18px 16px 16px;transition:border-color .15s,background .15s}
.role:hover{border-color:var(--brass-soft);background:var(--panel2)}
.role h3{margin:10px 0 5px;font-size:16px;font-weight:600}
.role p{margin:0;color:var(--dim);font-size:12.5px;line-height:1.55}
.role .num{font-family:var(--mono);font-size:11px;color:var(--brass)}
.gate-note{margin-top:22px;font-size:12px;color:var(--dimmer);line-height:1.6;border-top:1px solid var(--line2);padding-top:14px}

/* ---------- shell ---------- */
/* A phone's address bar slides in and out, and the layout viewport does not
   follow it — so a full-height panel ends up partly behind the browser's own
   chrome and the top bar becomes unreachable. --appvh is the height the window
   ACTUALLY has right now, kept current in JS below. */
.shell{display:none;height:100vh;height:100dvh;height:var(--appvh,100dvh);flex-direction:column}
/* ---- the safe area ----
   The page asks for viewport-fit=cover so a moving-background fills the whole
   phone, which also means iOS draws it under the status bar and, held sideways,
   under the notch. Anything that starts at an edge has to be told where the
   usable area really begins, or the top bar ends up behind the clock. */
.shell,#bandView,#gate,#signin,#ceHost,#beHost{
  box-sizing:border-box;
  padding-top:var(--safe-top);
  padding-left:var(--safe-left);
  padding-right:var(--safe-right)}
#gate,#signin{padding-top:calc(24px + var(--safe-top));
  padding-bottom:calc(24px + var(--safe-bottom))}
.topbar,.bandhead{padding-left:max(12px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px))}
.shell.on{display:flex}
.topbar{display:flex;align-items:center;gap:10px;padding:3px 12px;min-height:48px;border-bottom:1px solid var(--line);background:var(--panel);flex:none;
  flex-wrap:wrap;row-gap:6px}
.topbar .spacer{min-width:0}
/* Sharing changes must not add/remove a flex item beside the live controls.
   Keep the full status and recovery action in a constant two-line space. */
#techSyncStatus{flex:0 0 140px;width:140px;height:36px;min-height:36px;
  padding:3px 8px;font-size:11.5px;line-height:14px;white-space:normal;
  overflow:hidden;text-align:left;justify-content:center;font-weight:400;color:var(--dim)}
#techSyncStatus[data-sync="pending"]{color:var(--brass)}
#techSyncStatus[data-sync="problem"]{color:var(--live)}
/* Home and My settings travel together, immediately after the service menu,
   and neither shrinks. flex:none on the group is what keeps them on the same
   row as the service controls when the bar wraps. */
.topbar .wayout{display:flex;align-items:center;gap:6px;flex:none}
.topbar .wayout #btnRole.home{flex:none}
.topbar .wordmark{margin:0}
.topbar .wordmark b{font-size:15px}
.spacer{flex:1}
.statelamp{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.statelamp{display:inline-grid;grid-template-columns:7px auto;flex:none}
.statelamp .lamp{grid-area:1/1}
.statelamp>span,.statelamp::after{grid-area:1/2;white-space:nowrap}
.statelamp::after{content:"Frozen";visibility:hidden}
.lamp{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,183,130,.14)}
.statelamp.hot{color:var(--live);border-color:#4a2b2b}
.statelamp.hot .lamp{background:var(--live);box-shadow:0 0 0 3px rgba(225,85,85,.16)}
.statelamp.cold{color:var(--freeze);border-color:#28405a}
.statelamp.cold .lamp{background:var(--freeze);box-shadow:0 0 0 3px rgba(91,155,213,.16)}

.body{position:relative;flex:1;display:grid;grid-template-columns:264px 1fr 348px;min-height:0}
/* Running a service: hide the working panel and give the screen back to the
   preview and the slide list. */
.body.nopanel{grid-template-columns:264px 1fr}
.body.nopanel .rail.right{display:none}
.body.norail{grid-template-columns:1fr 348px}
.body.norail.nopanel{grid-template-columns:1fr}
.body.norail .rail:not(.right){display:none}
.rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.rail.right{border-right:none;border-left:1px solid var(--line)}
.scrim,#btnPanelClose,.tech-phone-label{display:none}
.rail-head{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line2);flex:none}
.rail-head .eyebrow{flex:1}
.rail-scroll{flex:1;overflow-y:auto;min-height:0}

/* ---------- running order: section / song / slide ---------- */
.ord{padding:2px 0}
.osec{border-bottom:1px solid var(--line2)}
.osec-head,.oitem-head{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:9px 10px}
.osec-head{background:var(--panel2)}
.osec-head:hover,.oitem-head:hover{background:var(--panel3)}
.osec.sel>.osec-head{box-shadow:inset 3px 0 0 var(--brass)}
.ochev{font-family:var(--mono);font-size:9px;color:var(--dimmer);width:10px;flex:none;transition:transform .12s}
.closed>.osec-head .ochev,.closed>.oitem-head .ochev{transform:rotate(-90deg)}
.closed>.osec-body,.closed>.oitem-body{display:none}
.osec-head .nm{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oitem-head{padding-left:22px}
.oitem-head .nm{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oitem-head.stage-item-head{padding:0;gap:4px}
.stage-item-head .ofold{width:44px;min-height:44px;flex:none;display:flex;align-items:center;justify-content:center}
.stage-item-head .nm{min-height:44px;text-align:left}
.stage-item-head .ct{padding-right:10px}
.stage-item-head .ofold:hover,.stage-item-head .nm:hover{background:var(--panel3)}
.osec-head .ofold,.tech-item-head .ofold{flex:none;min-width:28px;min-height:32px;display:grid;place-items:center}
.osec-head .nm,.tech-item-head .nm{min-height:32px;text-align:left}
.osec-head:focus-within .otools,.oitem-head:focus-within .otools{opacity:1}
.oitem-song .stage-item-head .nm{color:var(--brass)}
.ord .ct{font-family:var(--mono);font-size:10px;color:var(--dimmer);flex:none}
.oslide{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;
  padding:6px 10px 6px 36px;border-left:2px solid transparent}
.osec.flat .oslide{padding-left:24px}
.oslide:hover{background:var(--panel2)}
.oslide.live{background:var(--panel2);border-left-color:var(--brass)}
.oslide.here{background:var(--panel2);border-left-color:var(--freeze)}
.oslide .n{font-family:var(--mono);font-size:10px;color:var(--dimmer);flex:none;width:24px;text-align:right}
.oslide.live .n{color:var(--brass)}
.oslide .lb{font-family:var(--mono);font-size:10px;color:var(--dim);flex:none;max-width:82px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oslide .tx{font-size:12.5px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oslide.live .tx{color:var(--ink)}
/* Part headings inside a song — Verse, Chorus, Bridge. Not collapsible; tapping
   one jumps to its first slide. */
.opart{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:7px 10px 3px 36px}
.opart:hover{background:var(--panel2)}
.opart .pdot{width:6px;height:6px;border-radius:50%;flex:none}
.opart .pnm{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.opart.live .pnm{color:var(--brass)}
.opart .pct{font-family:var(--mono);font-size:9.5px;color:var(--dimmer);margin-left:auto}
.oslide.inpart{padding-left:50px}
.oslide.inpart .lb{max-width:34px;text-align:right}
.onote{padding:1px 10px 7px 36px;font-size:12px;color:var(--brass);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.osec.flat .onote{padding-left:24px}
.otools{display:flex;gap:1px;opacity:0;flex:none}
.osec-head:hover .otools,.oitem-head:hover .otools,.osec.sel>.osec-head .otools{opacity:1}
@media (pointer:coarse){.otools{opacity:.65}}

/* ---------- cue list ---------- */
.cue{display:grid;grid-template-columns:26px 1fr;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line2);cursor:pointer;align-items:start}
.cue:hover{background:var(--panel2)}
.cue.active{background:var(--panel2);box-shadow:inset 3px 0 0 var(--brass)}
.cue .n{font-family:var(--mono);font-size:11px;color:var(--dimmer);padding-top:2px;text-align:right}
.cue.active .n{color:var(--brass)}
.cue .t{font-weight:600;font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.cue .m{font-family:var(--mono);font-size:10.5px;color:var(--dimmer);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.kindchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid var(--line);color:var(--dim)}
.kindchip.song{color:var(--brass);border-color:var(--brass-soft)}
.kindchip.announcement{color:var(--violet);border-color:#413a5c}
.kindchip.image{color:var(--ok);border-color:#2b4a3b}
.kindchip.scripture{color:var(--freeze);border-color:#28405a}
.kindchip.blank{color:var(--dimmer)}
.cue-tools{display:flex;gap:3px;opacity:0;transition:opacity .12s}
.cue:hover .cue-tools,.cue.active .cue-tools{opacity:1}
.icb{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;color:var(--dimmer);font-family:var(--mono);font-size:12px}
.icb:hover{background:var(--panel3);color:var(--ink)}
.addrow{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line2);flex:none;flex-wrap:wrap;align-items:center}
.addrow .btn{flex:1}
/* One bronze plus. It is the thing you press most, so it is the biggest thing
   in the panel and it does not need a label to say so. */
.targetpick{font-size:11px;color:var(--brass);background:none;border:0;padding:0 2px;
  border-bottom:1px dashed var(--brass-soft);border-radius:0}
.targetpick:hover,.targetpick[aria-expanded="true"]{color:#eab259;border-bottom-color:var(--brass)}
/* Nothing behind the names but the page, the way he asked: the words are the
   menu. A little blur keeps them readable over whatever they land on. */
/* The bronze face that stands in front of a native select. */
.hubgrid{display:grid;gap:9px}
.hubtile{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink)}
.hubtile:hover{border-color:var(--brass-soft);background:var(--panel3)}
.hubtile .hi{flex:0 0 22px;display:grid;place-items:center;color:var(--brass);margin-top:1px}
.hubtile b{font-size:13.5px;display:block}
.hubtile .hd{display:block;font-size:11.5px;color:var(--dimmer);margin-top:2px;line-height:1.4}
.rolechips{display:flex;flex-wrap:wrap;gap:6px}
.rolechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--panel2);cursor:pointer}
.rolechip.on{color:var(--brass);border-color:var(--brass-soft);background:rgba(201,162,39,.10)}
.rolechip input{margin:0;accent-color:var(--brass)}
.lvlchip{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;border:1px solid var(--line);color:var(--dim);margin-left:7px}
.lvlchip.admin{color:var(--brass);border-color:var(--brass-soft)}
.lvlchip.tech{color:var(--freeze);border-color:#28405a}
.peoplerow .prhead{display:flex;align-items:center;gap:9px}
.peoplerow .pri{min-width:0}
.peoplerow.open{border-color:var(--brass-soft)}
.prbody{margin-top:11px;padding-top:11px;border-top:1px solid var(--line2)}
.peoplerow .code.dim{color:var(--dimmer);letter-spacing:.14em}
.psel{position:relative;display:inline-flex;vertical-align:middle}
.psel[hidden]{display:none}
.psel > select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  border:0;padding:0;margin:0}
/* ---- the real dropdown stays invisible, whatever else is being greyed ----

   A dressed dropdown is the operating system's own <select> lying underneath at
   nothing, with a bronze face drawn over it. The rule that greys an inherited
   control said "every .field in this row", and the hidden select IS a .field —
   so at a section or a song scope it was lifted to 42% and the room saw BOTH:
   the app's menu and the system's, one over the other, in two different
   typefaces. It only happened below the service level, which is why it looked
   like it came and went.
   What greys now is the dressed face. The select underneath is pinned at
   nothing by a rule specific enough that nothing can lift it again. */
.row.scoped.inherited .psel > select,
.scopeblock.inherited .psel > select{opacity:0}
.pselbtn{display:flex;width:100%;align-items:center;gap:8px;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--brass);background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;text-align:left}
.pselbtn:hover{border-color:var(--brass-soft);background:var(--panel3)}
.pselbtn .pv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pselbtn .pc{color:var(--dimmer);font-size:11px;flex:none}
.pselbtn[disabled]{opacity:.45}
#pselMenu .inner{max-height:52vh;overflow-y:auto}
.secmenu{position:fixed;inset:0;z-index:88;background:transparent}
.secmenu[hidden]{display:none}
/* This had a blur and NO background, which works beautifully over the dark
   panel it was designed on and fails completely over a photograph or a bright
   slide: brass text on a blurred photograph is brass text you cannot read.
   Kaleb's team hit it. A menu is a thing you must be able to read at a glance
   in a dark room with the service running, so it gets a real ground under it
   and the blur becomes the polish rather than the whole idea. */
.secmenu .inner{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:6px;border-radius:10px;
  background:rgba(14,16,20,.9);border:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(14px) saturate(.7);-webkit-backdrop-filter:blur(14px) saturate(.7)}
:root[data-ui="light"] .secmenu .inner{background:rgba(255,255,255,.94)}
.secmenu button{font-family:var(--mono);font-size:12px;color:var(--brass);background:none;
  border:0;padding:6px 9px;border-radius:6px;white-space:nowrap;text-align:left;
  text-shadow:0 1px 6px rgba(0,0,0,.85)}
.secmenu button:hover,.secmenu button:focus{color:#20160a;background:var(--brass);
  text-shadow:none;outline:none}
.secmenu button.on{text-decoration:underline;text-underline-offset:3px}
.addwrap{flex-basis:100%;display:flex;justify-content:center;padding:2px 0}
.addplus{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  padding:0;line-height:0;background:var(--brass);color:#20160a;border:1px solid var(--brass);
  box-shadow:0 4px 14px rgba(201,162,39,.22);position:relative;z-index:89;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s}
/* An inline SVG sits on a text baseline, which is what was nudging the plus
   off centre inside its square. As a block it is centred by the grid alone. */
.addplus svg{display:block}
.addplus:hover{background:#eab259}
/* Open: the button lifts clear of the bottom of the panel so the two lowest
   options have somewhere to sit beside it. */
.addplus[aria-expanded="true"]{background:#eab259;box-shadow:0 0 0 3px rgba(201,162,39,.28);
  transform:translateY(-50px)}
/* One button, one list. Seven buttons in a row was a wall to read every time
   you wanted the one you always want. */
/* The options fan out over the top of the plus. Nothing behind them but the
   page: each one is its own pill, only as wide as its own name. */
.addmenu{position:fixed;inset:0;z-index:88;background:transparent}
.addmenu[hidden]{display:none}
/* Barely there, like the section menu — just solid enough to read against the
   running order behind it. Small and tight, so the seven of them gather round
   the plus rather than ringing it at arm's length. */
.addmenu button{position:absolute;display:inline-flex;gap:7px;align-items:center;
  justify-content:center;white-space:nowrap;box-sizing:border-box;
  padding:7px 11px;border-radius:999px;border:1px solid var(--brass-soft);
  /* Was 62% over a 9px blur, which is readable over the running order and not
     over a bright slide. These pills fan out across the middle of the screen,
     so whatever is behind them is whatever is on the wall. */
  background:rgba(14,16,20,.9);backdrop-filter:blur(14px) saturate(.7);
  -webkit-backdrop-filter:blur(14px) saturate(.7);
  color:var(--brass);font-size:12.5px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.55);transform:translate(-50%,-50%) scale(.86);opacity:0;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),opacity .14s,background .12s,color .12s}
:root[data-ui="light"] .addmenu button{background:rgba(255,255,255,.94)}
.addmenu.up button{transform:translate(-50%,-50%) scale(1);opacity:1}
.addmenu button:hover,.addmenu button:focus{background:var(--brass);color:#20160a;
  border-color:var(--brass);outline:none}
.addmenu .ai{display:grid;place-items:center}

/* ---------- center ---------- */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ground)}
.previews{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;padding:14px;
  flex:1 1 auto;min-height:0;align-content:stretch}
/* The two preview screens take whatever height the slides panel leaves them —
   sizePreviews() works out how tall they can be and the aspect ratio does the
   width, so dragging All Slides moves both panels instead of one. */
.pv{min-width:0;display:flex;flex-direction:column;min-height:0}
.pv .screen{flex:none;height:var(--pvh,auto);width:auto;max-width:100%;margin:0 auto}
.pv-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;height:16px}
.pv-head .eyebrow{letter-spacing:.16em}
.pv-head .lbl{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.screen{aspect-ratio:var(--car,16/9);background:var(--slide-bg,#000);border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}
.screen.blackout,#displayView.blackout{background:#000}
.screen.hot{border-color:#5c3030;box-shadow:0 0 0 1px rgba(225,85,85,.25)}
.screen.cold{border-color:#2C405A;box-shadow:0 0 0 1px rgba(91,155,213,.22)}
.pv.next .screen{border-color:var(--line2)}

/* Every slide is composed on one fixed 1600x900 canvas and scaled to fit
   whatever shows it, so a preview, a thumbnail and the projector agree exactly. */
.slidebox{position:absolute;top:0;left:0;width:var(--cw,1600px);height:var(--ch,900px);transform-origin:0 0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:96px 112px;font-family:var(--proj);color:#fff;gap:0}
/* No gap between lines: spacing comes from line-height alone, so a line that
   wraps sits exactly as far from its neighbour as one that doesn't. */
.slidebox .line{font-weight:700;line-height:inherit;letter-spacing:-.005em;max-width:100%}
.slidebox.ann{gap:26px}
.slidebox .ann-title{font-weight:800;letter-spacing:-.015em;line-height:1.14;max-width:100%}
.slidebox .ann-body{font-weight:500;line-height:1.42;opacity:.92;max-width:100%}
/* A photo slide is full-bleed: the picture is the slide, not a framed inset. */
.photoslide{position:absolute;top:0;left:0;width:var(--cw,1600px);height:var(--ch,900px);transform-origin:0 0;overflow:hidden;background:#000}
.canvasslide{position:absolute;top:0;left:0;width:var(--cw,1600px);height:var(--ch,900px);
  transform-origin:0 0;overflow:hidden}
.cel{position:absolute;isolation:isolate}
/* ---- things arriving ----
   Four entrances, all short. A slide that takes a second and a half to assemble
   itself is a slide the room is waiting for rather than reading. */
@keyframes ceFade{from{opacity:0}to{opacity:1}}
@keyframes ceRise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes ceZoom{from{opacity:0;transform:scale(.90)}to{opacity:1;transform:none}}
@keyframes ceSlide{from{opacity:0;transform:translateX(-72px)}to{opacity:1;transform:none}}
.cel.enter-fade{animation:ceFade .42s ease both}
.cel.enter-rise{animation:ceRise .46s cubic-bezier(.2,.7,.3,1) both}
.cel.enter-zoom{animation:ceZoom .42s cubic-bezier(.2,.7,.3,1) both}
.cel.enter-slide{animation:ceSlide .46s cubic-bezier(.2,.7,.3,1) both}

/* ---- a piece that MOVES, once it is already there ----

   An entrance says how something arrives. This says what it does afterwards:
   crosses the slide, bounces, goes behind something else, leaves.

   The difference that matters in the code: an entrance always starts from
   nothing, so it can be a fixed keyframe. A move starts from wherever the
   piece has got to, which is different every time, so the two ends are handed
   in as custom properties and one keyframe serves them all. That is also what
   makes two moves in a row work — the second starts where the first stopped
   rather than snapping back.

   Everything here is under three quarters of a second on purpose. A slide that
   is still assembling itself is a slide the room is waiting for. */
@keyframes ceMove{from{transform:var(--from,none);opacity:var(--fromo,1)}
  to{transform:var(--to,none);opacity:var(--too,1)}}
.cel.act-move{animation:ceMove var(--ams,.6s) cubic-bezier(.3,.7,.3,1) both}
.cel.act-glide{animation:ceMove var(--ams,.9s) cubic-bezier(.45,0,.55,1) both}

/* In place: these end exactly where they began, so they leave no state behind
   and the piece keeps whatever a move had already done to it. */
@keyframes ceBounce{0%{transform:var(--from,none)}
  28%{transform:var(--from,none) translateY(-16%)}
  48%{transform:var(--from,none)}
  66%{transform:var(--from,none) translateY(-7%)}
  82%{transform:var(--from,none)}
  92%{transform:var(--from,none) translateY(-2%)}
  100%{transform:var(--from,none)}}
@keyframes ceJump{0%{transform:var(--from,none)}
  35%{transform:var(--from,none) translateY(-40%) scale(1.04)}
  100%{transform:var(--from,none)}}
@keyframes cePulse{0%{transform:var(--from,none)}
  45%{transform:var(--from,none) scale(1.10)}
  100%{transform:var(--from,none)}}
@keyframes ceShake{0%,100%{transform:var(--from,none)}
  15%{transform:var(--from,none) translateX(-5%)}
  35%{transform:var(--from,none) translateX(5%)}
  55%{transform:var(--from,none) translateX(-3%)}
  78%{transform:var(--from,none) translateX(3%)}}
@keyframes ceSpin{from{transform:var(--from,none) rotate(0)}
  to{transform:var(--from,none) rotate(360deg)}}
@keyframes ceFlip{from{transform:var(--from,none) rotateY(0)}
  to{transform:var(--from,none) rotateY(360deg)}}
@keyframes ceWobble{0%,100%{transform:var(--from,none) rotate(0)}
  25%{transform:var(--from,none) rotate(-5deg)}
  75%{transform:var(--from,none) rotate(5deg)}}
.cel.act-bounce{animation:ceBounce var(--ams,.8s) cubic-bezier(.3,.7,.3,1) both}
.cel.act-jump{animation:ceJump var(--ams,.55s) cubic-bezier(.3,.7,.3,1) both}
.cel.act-pulse{animation:cePulse var(--ams,.5s) ease-in-out both}
.cel.act-shake{animation:ceShake var(--ams,.5s) ease-in-out both}
.cel.act-spin{animation:ceSpin var(--ams,.7s) cubic-bezier(.4,0,.3,1) both}
.cel.act-flip{animation:ceFlip var(--ams,.7s) cubic-bezier(.4,0,.3,1) both}
.cel.act-wobble{animation:ceWobble var(--ams,.6s) ease-in-out both}

/* Leaving. The piece is still in the page afterwards, invisible, because
   taking it out would change what is underneath it. */
@keyframes ceOut{from{transform:var(--from,none);opacity:1}
  to{transform:var(--to,none);opacity:0}}
.cel.act-out{animation:ceOut var(--ams,.45s) cubic-bezier(.4,0,.7,.4) both}
.cel.gone{opacity:0;pointer-events:none}
/* ---- a slide arriving ----
   The transition belongs to the WORDS, not to the screen: the moving
   background behind them must not flinch every time a slide changes, which is
   the whole reason the holder exists. */
@keyframes trFade{from{opacity:0}to{opacity:1}}
@keyframes trRise{from{opacity:0;transform:translateY(3%)}to{opacity:1;transform:none}}
@keyframes trZoom{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes trPush{from{opacity:.15;transform:translateX(5%)}to{opacity:1;transform:none}}
.slideholder.tr-fade{animation:trFade var(--trms,.36s) ease both}
.slideholder.tr-rise{animation:trRise var(--trms,.42s) cubic-bezier(.2,.7,.3,1) both}
.slideholder.tr-zoom{animation:trZoom var(--trms,.42s) cubic-bezier(.2,.7,.3,1) both}
.slideholder.tr-push{animation:trPush var(--trms,.40s) cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .cel[class*="enter-"],.slideholder[class*="tr-"]{animation:none!important}
}
.ctext{display:flex;flex-direction:column;overflow:hidden;white-space:pre-wrap;word-break:break-word;position:absolute}
/* The text box's own colour sits behind the words as its own layer, so turning
   it on never nudges the words. */
.ctextbg{position:absolute;inset:0;z-index:0}
.ctextlines{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:inherit;width:100%;flex-shrink:0}
.ctextlines>div{flex-shrink:0}
.verse-start{white-space:nowrap}
.verse-num{font-family:inherit;font-size:.62em;font-style:normal;font-variant-numeric:lining-nums;line-height:0;vertical-align:baseline;position:relative;top:-.5em;margin-right:.12em}
.ctext[contenteditable]{outline:none;cursor:text}
.cewrap.typing{cursor:text;outline:2px solid var(--live)}
.shapepick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* An editor covers the console, so the console's own Add button has no
   business floating over it.

   This is the second time the plus has turned up over an editor, because the
   rule named ONE of the two: the slide editor had it and the full-screen song
   editor did not, so a big brass plus sat over the bottom-left corner of a
   slide being edited full screen. Both are named now, and the whole row goes
   rather than just the button — "Add to Opening Worship" over a full-screen
   editor is no more use than the plus was. */
body.editing-canvas .addrow,body.editing-big .addrow{display:none}
@media (max-width:620px){ .shapepick{grid-template-columns:repeat(2,1fr)} }
/* ---- colour, or something better than a colour ---- */
.paintgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:7px}
.paintbtn{height:56px;border:1px solid var(--line);border-radius:8px;position:relative;overflow:hidden;
  cursor:pointer;padding:0}
.paintbtn:hover{border-color:var(--brass)}
.paintbtn span{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;font-size:10px;
  background:rgba(6,8,11,.62);color:#fff;text-align:left}
.paintprev{height:44px;border-radius:8px;border:1px solid var(--line);margin-top:8px}
.paintchip{width:56px;height:26px;border-radius:5px;border:1px solid var(--line);display:inline-block}
/* ---- choosing a design, then a layout ---- */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dcard{border:1px solid var(--line);border-radius:10px;padding:0 0 9px;overflow:hidden;text-align:left;
  background:var(--panel2);cursor:pointer}
.dcard:hover{border-color:var(--brass-soft)}
.dcard.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.dprev{display:block;height:82px;padding:12px 13px;position:relative}
.dprev b{display:block;font-size:26px;font-weight:600;line-height:1}
.dprev i{display:block;width:26px;height:3px;border-radius:2px;margin:7px 0 6px}
.dprev u{display:block;font-size:11px;text-decoration:none}
/* With fifty-odd designs the grid needs shelves, and each card needs to show
   the picture rather than describe it. The words sit above a scrim so a card
   is legible over a bright photograph, exactly as the slide will be. */
.dtabs{flex-wrap:wrap}
.dtabs button{flex:0 0 auto;padding:6px 11px}
/* A shelf the church made, marked so it reads as theirs rather than as one
   that shipped with the app. */
.dtabs button.ours::before{content:"\2726";font-size:9px;margin-right:5px;opacity:.8;vertical-align:1px}
.dspick{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:5px;
  max-height:38vh;overflow-y:auto;padding:2px}
.dsrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--panel2);font-size:12.5px;cursor:pointer}
.dsrow.on{border-color:var(--brass-soft);color:var(--brass)}
.dsrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsrow .dsfrom{margin-left:auto;font-size:10px;color:var(--dimmer);flex:0 0 auto}
/* The design in force, shown rather than named. Small enough to sit in a
   settings row, big enough to recognise a background you chose last week. */
.dnow{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.dnowchip{flex:0 0 46px;height:28px;border-radius:5px;border:1px solid var(--line);
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dnowchip b{font-size:12px;line-height:1;position:relative;z-index:1}
.dnowchip i{position:absolute;left:5px;right:5px;bottom:4px;height:2px;border-radius:2px;opacity:.9}
.dnowtxt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.dnowtxt b{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnowtxt span{font-size:10px;color:var(--dimmer);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The same thing again, in the Services box, where it is the only look on show
   and can afford the room. */
.svclook{display:flex;align-items:center;gap:12px}
.svclook .dnowchip{flex:0 0 92px;height:54px;border-radius:7px}
.svclook .dnowchip b{font-size:19px}
.svclook .dnowtxt b{font-size:14px}
.svclook .dnowtxt span{font-size:11px}
/* Twelve shelves down the side, not along the top.

   They were a strip that scrolled sideways, which looked tidy and was useless:
   on a trackpad a sideways scroll is a gesture most people never make, so the
   last shelves were simply unreachable. A vertical list scrolls the way
   everything else on the screen scrolls, holds twelve names at full length
   with no cutting off, and leaves the shapes the whole width. */
.shapewrap{display:flex;gap:12px;align-items:flex-start}
.shshelf{flex:0 0 148px;display:flex;flex-direction:column;gap:3px;
  max-height:52vh;overflow-y:auto;padding-right:4px}
.shshelf button{text-align:left;padding:7px 10px;border-radius:7px;border:1px solid transparent;
  background:transparent;color:var(--dim);font-size:12.5px;white-space:normal;line-height:1.25}
.shshelf button:hover{background:var(--panel2);color:var(--ink)}
.shshelf button.on{background:var(--panel2);border-color:var(--brass-soft);color:var(--brass);font-weight:600}
.shapecol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.shapepick{flex:1;min-width:0;max-height:52vh;overflow-y:auto;padding:2px}
/* ---- finding one of a hundred and eighty-three ----
   The shelves are how you BROWSE. This is how you find something when you
   already know what you want, which is most of the time once the library is
   this big. While it has anything in it the shelves fade back rather than
   vanish: one of them is still where you were. */
.shfind{width:100%;flex:none}
.shshelf.aside{opacity:.4}
.shshelf.aside:hover{opacity:1}
.shapebtn .shelfhint{font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dimmer);margin-top:-4px}
.shnone{grid-column:1/-1;padding:30px 14px;text-align:center;color:var(--dim);
  font-size:12.5px;line-height:1.6}
@media (max-width:620px){
  /* On a phone there is no room beside the grid, so the shelves go back on top
     — but as a list that wraps, never as a strip that has to be swiped. */
  .shapewrap{flex-direction:column}
  .shshelf{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;max-height:none;width:100%}
}
.dprev video.dvid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border:0}
.dprev .dscrim{position:absolute;left:0;top:0;right:0;bottom:0;background:#000}
.dprev b,.dprev i,.dprev u{position:relative;z-index:2}
/* A moving background looks exactly like a still one until it is on the wall,
   so it says so. A badge on the card rather than a row of playing videos: a
   grid of fifty decoding clips is a fan spinning up and a picker that stutters,
   and a word is quicker to read than a moving picture anyway. */
.dmotion{position:absolute;z-index:3;right:7px;top:7px;display:inline-flex;align-items:center;
  gap:4px;padding:2px 7px 2px 5px;border-radius:999px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#0B0D10;background:rgba(255,255,255,.88);
  backdrop-filter:blur(3px);pointer-events:none}
.dmotion s{text-decoration:none;font-size:8px;line-height:1}
.dtabs button.motion{margin-left:auto}
.dtabs button.motion::before{content:"\25b6";font-size:8px;margin-right:5px;vertical-align:1px}
.dname{display:block;font-size:13px;font-weight:600;color:var(--ink);padding:8px 11px 0}
.dnote{display:block;font-size:11px;color:var(--dimmer);padding:1px 11px 0}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
.lcard{border:1px solid var(--line);border-radius:9px;padding:8px 8px 7px;background:var(--panel2);cursor:pointer}
.lcard:hover{border-color:var(--brass);background:var(--panel3)}
.lprev{display:block;position:relative;width:100%;aspect-ratio:16/9;border-radius:5px;overflow:hidden}
.lp{position:absolute;display:block;border-radius:2px}
.lp.tx{opacity:.55}
.lp.img{background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.lname{display:block;font-size:11.5px;color:var(--dim);margin-top:6px;text-align:center}
@media (max-width:820px){ .dgrid{grid-template-columns:repeat(2,1fr)} }
/* ---- the music, tucked out of the way ----
   Docked bottom-left, above the transport. Small by default, because for four
   fifths of a service nobody needs to look at it. */
.spotdock{position:fixed;left:12px;bottom:12px;z-index:46;width:340px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
/* The head is the handle: press anywhere on it that is not a button and drag
   the player wherever it is wanted. It started life bottom-left, which is
   exactly where the Add button lives. */
.spothead{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line2);
  cursor:grab;touch-action:none;user-select:none}
.spothead:active{cursor:grabbing}
.spotdock.dragging{box-shadow:0 26px 54px -18px rgba(0,0,0,.8);opacity:.96}
.spotgrip{color:var(--dimmer);font-size:13px;line-height:1;letter-spacing:-1px;padding-right:2px}
.spothead .btn.sm{padding:2px 7px}
.spotbody{height:82px;transition:height .16s}
.spotdock.big .spotbody{height:380px}
.spotbody iframe{display:block;width:100%;height:100%;border:0}
.spotmsg{padding:12px;font-size:12px;color:var(--dim);line-height:1.5}
@media (max-width:900px){ .spotdock{width:auto;left:12px;right:12px} }
/* ---- a clip, and a clock, sitting on a slide ---- */
.cel.cvid{overflow:hidden;background:#000}
.cvnone{position:absolute;inset:0;display:grid;place-items:center;color:var(--dimmer);
  font-size:26px;font-family:var(--mono)}
.cel.ctimer{overflow:hidden;display:flex;align-items:center}
.cel.ctimer .tnum,.cel.ctimer .tmsg{flex:1;min-width:0;display:flex;align-items:center;line-height:1.1}
.cel.ctimer .tnum{font-variant-numeric:tabular-nums;white-space:nowrap}
/* The message is a sentence, not a number: it wraps, and it is allowed to be
   more than one line. Cutting "Welcome, the service starts shortly" off at the
   edge of a box sized for 5:00 is what used to happen. */
.cel.ctimer .tmsg{white-space:pre-wrap;word-break:break-word}
.cel.ctimer .tmsg[hidden],.cel.ctimer .tnum[hidden]{display:none}
/* Anything on a slide that is still standing in for something — a layout's
   words, an empty photo box, an empty clip box — belongs in the editor and in
   the desk's preview, where it says what goes here. It must never reach the
   room: a congregation reading "Presentation Title" is worse than a blank.
   Dimmed at the desk so the operator can see, at a glance down the running
   order, which slides still have not been filled in. */
/* CP.8.3: the Live monitor mirrors the room, so stand-in words are hidden there too; the Preview monitor, thumbnails and editor still show them dimmed. */
#displayView .cel.ph,#liveScreen .cel.ph{display:none!important}
#nextScreen .cel.ph,.thumb .cel.ph,.srow .cel.ph{opacity:.42}
#ceStage .cel.ph{opacity:1}
/* The background of a hand-built slide: a colour or gradient on the box, and
   over it a photograph or a loop, with a dimmer so words stay readable. */
.canvasslide .cbg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border:0}
.canvasslide .cbgdim{position:absolute;left:0;top:0;right:0;bottom:0;background:#000;pointer-events:none}
.bgchip{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;
  margin-right:5px;border:1px solid var(--line);background:#000}
.bgpick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bgpick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);color:var(--ink);text-align:left}
.bgpick button:hover{background:var(--panel3);border-color:var(--brass-soft)}
.bgpick b{font-size:13.5px;font-weight:600}
.bgpick span{font-size:11.5px;color:var(--dim);line-height:1.35}
@media(max-width:430px){.bgpick b{margin-right:-8px}}
.bgprev{height:96px;border-radius:var(--r);border:1px solid var(--line);position:relative;overflow:hidden;
  background-size:cover;background-position:center}
.bgprev video,.bgprev img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.bgprev i{position:absolute;left:0;top:0;right:0;bottom:0;background:#000}
/* An empty photo or clip box says what to do about it — but only in the
   editor, and tucked into its top corner rather than dead centre, because a
   full-bleed one centres itself right under the words the layout put there.
   On the screen an empty box is nothing, which is what it should be. */
#ceStage .cel.cimg{position:relative}
#ceStage .cel.cimg:empty{border:2px dashed var(--line);border-radius:inherit}
#ceStage .cel.cimg:empty::after{content:"◻ Click to choose a photo or a clip"}
#ceStage .cel.cvid .cvnone{font-size:0}
#ceStage .cel.cvid .cvnone::after{content:"▶ Click to choose a clip"}
#ceStage .cel.cimg:empty::after,#ceStage .cel.cvid .cvnone::after{
  position:absolute;left:10px;top:10px;font-size:17px;font-family:var(--mono);
  color:var(--dim);background:rgba(0,0,0,.62);border:2px dashed var(--line);
  border-radius:6px;padding:5px 9px;white-space:nowrap}
.shapebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:18px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);color:var(--brass)}
.shapebtn:hover{background:var(--panel3);border-color:var(--brass-soft)}
.shapeart{height:44px;display:grid;place-items:center}
.shapeart>span{display:block}
.shapelbl{font-size:12.5px;color:var(--ink)}
.cimg{overflow:hidden}
.photoslide img{position:absolute;inset:0;width:var(--cw,1600px);height:var(--ch,900px);display:block}
.photoslide img.fill{object-fit:cover}
.photoslide img.fit{object-fit:contain}
.photoslide .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 112px 56px;text-align:center;
  font-family:var(--proj);font-weight:700;color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.75);
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
.photoslide .none{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--proj);
  font-size:56px;color:rgba(255,255,255,.45)}
.slidebox .caption{font-weight:600;opacity:.9;margin-top:22px}
.slidebox .ref{font-weight:600;opacity:.72;margin-top:.7em;letter-spacing:.04em;line-height:1.3}
.bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.34}
.screen .stamp{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff}
/* Blackout must hide the picture on every surface, the projector included —
   this previously matched the console preview only.
   .cuevid is in this list because a clip playing as a slide was the one
   surface it missed: the player was paused, correctly, and then left sitting
   there showing its frozen frame to the room. A blackout that leaves a picture
   on the wall is not a blackout. .vidslide is the stand-in shown when a video
   cue has no clip chosen yet, and belongs here for the same reason. */
.blackout .slidebox,.blackout .photoslide,.blackout .canvasslide,.blackout .bg,
.blackout .bgdim,.blackout .bgvid,.blackout .cuevid,.blackout .vidslide{display:none!important}
/* BLANK is the other half of that thought, and Kaleb's own answer to a question
   I was going to make a setting: two buttons rather than one with a mood.

   Black means nothing on the wall — the offering, a technical problem, the
   moment before a video. Blank means take the WORDS away and leave the room
   looking at what it was already looking at: the loop, the photograph, the
   ground the design chose. Cutting a moving background to flat black between
   two songs is a jolt the congregation can see and nobody asked for.

   So blank hides the words and whatever is mounted over the slide, and leaves
   the background exactly where it was. */
.blankout .slidebox,.blankout .photoslide,.blankout .canvasslide,
.blankout .cuevid,.blankout .vidslide{display:none!important}
video.bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
/* The scrim that "dim" actually means: black over the picture, under the
   words. Never the picture's own opacity — that lets the ground colour show
   through the photograph instead of darkening it. */
.bgdim{position:absolute;inset:0;background:#000;pointer-events:none}
/* The moving background lives OUTSIDE the slide markup, so redrawing the words
   never touches the picture. Two players inside it hand over at the loop point
   so the restart is a half-second dissolve instead of a visible snap. */
.bgvid{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
/* The words live in here so redrawing them never touches the layer next door. */
.slideholder{position:absolute;inset:0;overflow:hidden}
.bgvid video{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:0;transition:opacity .7s linear}
/* Where the next slide's loop is fetched before anybody needs it. Off-screen
   rather than display:none, because a browser will not preload something it
   has been told is not being laid out. */
#mediaWarm,#mediaSeam{position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none}

/* Above the previews, not under them. The re-measure above is the fix; this is
   the floor under it, so a preview that is briefly the wrong height can never
   take a press meant for Play. */
.vidbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 14px 10px;flex:none;
  position:relative;z-index:2}
.vidbar[hidden]{display:none}
.vidseek{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;flex:1 0 100%;min-width:0}
.vidseek input[type="range"]{grid-column:1/-1;min-width:0;width:100%;accent-color:var(--accent)}
.vidseek .field{width:78px;min-width:0;padding:6px 8px;font-variant-numeric:tabular-nums}
.vidbar #vidTime{max-width:100%;white-space:normal}

.vidbar .mono{font-size:10.5px;color:var(--dimmer);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}
/* A clip plays where the slide would be, and is never rebuilt mid-play for the
   same reason the moving backgrounds are not. */
.cuevid{position:absolute;inset:0;background:#000}
.cuevid video,.cuevid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000;color:var(--dimmer);gap:10px;flex-direction:column}
.vidslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.55}
.vidslide .vmark{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(0,0,0,.55);padding:5px 12px;border-radius:999px;color:#e8e2d6}
.transport{display:flex;align-items:center;gap:8px;padding:0 14px 12px;flex:none}
.tbig{flex:1;height:46px;border:1px solid var(--line);background:var(--panel2);border-radius:var(--r);font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}
.tbig:hover{background:var(--panel3)}
.tbig.go{background:var(--brass);color:#20160a;border-color:var(--brass)}
.tbig.go:hover{background:#eab259}

/* All Slides takes whatever share of the console the operator gives it —
   dragged by the grip, or folded away entirely so the live screen has the lot.
   Remembered per device, like the notes pane on a stage screen. */
.gridwrap{flex:0 0 var(--gridh,42%);min-height:64px;display:flex;flex-direction:column;
  border-top:1px solid var(--line)}
.body.gridhidden .gridwrap{flex:0 0 auto;min-height:0}
.body.gridhidden .grid{display:none}
.gridgrip{flex:none;height:13px;display:flex;align-items:center;justify-content:center;
  cursor:ns-resize;background:var(--panel);touch-action:none}
.gridgrip .bar{width:42px;height:3px;border-radius:2px;background:var(--line)}
.gridgrip:hover .bar{background:var(--brass-soft)}
.body.gridhidden .gridgrip .bar{background:var(--brass-soft)}
.gridhead{display:flex;align-items:center;gap:10px;padding:9px 14px;flex:none;border-bottom:1px solid var(--line2);background:var(--panel)}
/* Fixed tile width so tiles never shrink as the service grows — the section
   scrolls instead. */
.grid{flex:1;overflow-y:auto;padding:12px 14px;display:grid;
  grid-template-columns:repeat(auto-fill,204px);justify-content:start;gap:11px;
  align-content:start;grid-auto-rows:min-content}
.thumb{text-align:left;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);transition:border-color .12s}
.thumb:hover{border-color:#3f4a59}
.thumb.live{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
/* Two cursors, told apart at a glance: brass is what the room is looking at,
   blue is what you are working on. */
.thumb.editing{border-color:#5B9BD5;box-shadow:0 0 0 1px rgba(91,155,213,.55)}
.thumb.editing .tfoot{color:#8FBEE6}
.oslide.editing{background:rgba(91,155,213,.10);border-left-color:#5B9BD5}
.oslide.editing .n{color:#8FBEE6}
/* Fixed pixel size, not an aspect ratio: inside a grid a ratio-sized box with only
   absolutely-positioned children can collapse to nothing once rows overflow. */
.thumb{width:204px}
.thumb .tscreen{width:202px;height:var(--thumbh,114px);background:var(--slide-bg,#000);position:relative;overflow:hidden}
/* ---- the running order does not light its shapes ----
   Lighting a shape costs about four and a half milliseconds of paint for every
   shape actually on screen. On the one slide the room is looking at — three or
   four shapes — that is nothing. Across a wall of thumbnails it is the
   difference between the grid appearing and the grid arriving: measured in this
   build, a hundred and fifty lit shapes take 710ms to lay out and the same
   hundred and fifty flat take 50ms.
   At 202 by 114 the bevel is thinner than a pixel and the shadow is two, so
   there is nothing to see for the money. A CSS rule beats the filter attribute
   on the element, which is why the attribute is set in the markup and switched
   off here rather than the other way round. */
.thumb .tscreen svg.cshape > g[filter]{filter:none}
.thumb .tfoot{display:flex;align-items:center;gap:6px;padding:5px 7px;font-family:var(--mono);font-size:9.5px;color:var(--dimmer);border-top:1px solid var(--line2);background:var(--panel)}
.thumb.live .tfoot{color:var(--brass)}
.thumb .tfoot .sec{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb.live .tfoot .sec{color:var(--ink)}
/* Sections head the tile grid too, so it reads like the running order. */
.gridsec{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:16px 0 2px}
.gridsec:first-child{margin-top:0}
.gridsec span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);white-space:nowrap}
.gridsec .ln{flex:1;height:1px;background:var(--brass-soft);opacity:.45}
.dragghost{position:fixed;z-index:90;pointer-events:none;background:var(--panel3);
  border:1px solid var(--brass);border-radius:6px;padding:7px 11px;font-size:13px;font-weight:600;
  color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.45);max-width:230px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* While dragging, the bronze marks the ONE thing you will land in front of.
   It used to ring the whole section, which told you which section and nothing
   about where. The section only speaks up now when it will refuse the drop. */
.oitem.dropok{outline:2px solid var(--brass);outline-offset:-2px}
.osec.dropok{background:rgba(201,162,39,.045)}
.osec.dragging{opacity:.4}
.osec-head{cursor:grab}
.osec-head .icb{cursor:pointer}
.osec.dropno,.oitem.dropno{outline:2px solid var(--live);outline-offset:-2px}
.dropinto{outline:2px solid var(--brass);outline-offset:-2px;border-radius:5px}
.droplast{box-shadow:inset 0 -3px 0 var(--brass)}
.oitem.dragging>.oitem-head,.oslide.dragging,.opart.dragging{opacity:.35}
.dropbefore{box-shadow:inset 0 2px 0 var(--brass)}
.dropafter{box-shadow:inset 0 -2px 0 var(--brass)}
.arrlist .secpill.dropbefore{box-shadow:inset 3px 0 0 var(--brass)}
.arrlist .secpill.dropafter{box-shadow:inset -3px 0 0 var(--brass)}
.arrlist .secpill.dragging{opacity:.35}
#seArrangement .arrlist{min-height:48px}
#seArrangement .secpill{min-height:44px}
.arrlist .secpill{max-width:100%;flex-wrap:wrap;border-radius:10px;cursor:grab}
.arrlist .secpill .x{min-width:44px;min-height:44px;cursor:pointer;border:1px solid var(--line);border-radius:6px;flex:none}
.arrlist .secpill .arr-remove{margin-left:10px;color:var(--live)}
.arr .secpill.avail{min-height:44px}
#seArrangement .secpill .x{min-width:44px;min-height:44px;cursor:pointer}
#seArrangement .secpill .x:disabled{opacity:.3}
.secpill.avail{cursor:grab}
.secpill.avail:active{cursor:grabbing}
.arrlist{min-height:34px;align-content:flex-start}
#scBody .sect{margin-bottom:14px}
.grouphead{grid-column:1/-1;display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  margin-top:9px;padding:5px 6px;border-radius:5px}
.grouphead:first-child{margin-top:0}
.grouphead:hover{background:var(--panel)}
.grouphead .chev{font-family:var(--mono);font-size:9px;color:var(--dimmer);width:10px;transition:transform .12s}
.grouphead.closed .chev{transform:rotate(-90deg)}
.grouphead .eyebrow{white-space:nowrap;color:var(--dim);overflow:hidden;text-overflow:ellipsis;max-width:60%}
.grouphead.holds-live .eyebrow{color:var(--brass)}
.grouphead .ln{flex:1;height:1px;background:var(--line2)}
.grouphead .ct{font-family:var(--mono);font-size:10px;color:var(--dimmer)}
/* List view — same grouping, one scannable row per slide */
.grid.list{grid-template-columns:1fr;gap:1px}
.srow{display:grid;grid-template-columns:32px 128px 1fr;gap:10px;align-items:center;width:100%;
  padding:7px 9px;border-radius:5px;text-align:left;border:1px solid transparent}
.srow:hover{background:var(--panel);border-color:var(--line)}
.srow.live{background:var(--panel2);border-color:var(--brass);box-shadow:inset 3px 0 0 var(--brass)}
.srow .n{font-family:var(--mono);font-size:11px;color:var(--dimmer);text-align:right}
.srow.live .n{color:var(--brass)}
.srow .sec{font-family:var(--mono);font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .txt{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow.live .txt{color:var(--ink);font-weight:500}
.dropzone{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;
  background:rgba(13,16,20,.82);border:3px dashed var(--brass);color:var(--ink);font-size:17px;font-weight:600}
.dropzone.on{display:flex}

/* ---------- right rail tabs ---------- */
.tabs{display:flex;gap:2px;padding:8px 8px 0;flex:none}
.tab{flex:1;padding:7px 6px;border-radius:6px 6px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);border-bottom:2px solid transparent}
.tab:hover{color:var(--dim)}
.tab.on{color:var(--brass);border-bottom-color:var(--brass);background:var(--panel2)}
.pane{display:none;flex:1;overflow-y:auto;min-height:0;padding:12px}
.pane.on{display:block}
/* The library is the one pane you scroll a long way down. Searching and adding
   must not be somewhere you have to scroll back to, so only the list moves. */
#pane-library.on{display:flex;flex-direction:column;overflow:hidden}
#libSearch{flex:none;margin-bottom:10px}
#libList{flex:1 1 auto;overflow-y:auto;min-height:0;margin:0 -12px;padding:0 12px}
.libfoot{flex:none;border-top:1px solid var(--line2);margin:10px -12px 0;padding:10px 12px 0}
.libfoot .hint{margin:8px 0 0}
.pane h4{margin:0 0 8px;font-size:13px;font-weight:600}
/* Settings are tried out live and only stored when saved. */
.savebar{position:sticky;top:-12px;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:-12px -12px 14px;padding:11px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.savebar #btnRevertSettings,.savebar #saveHint{display:none}
.savebar.dirty #btnRevertSettings,.savebar.dirty #saveHint{display:inline-flex}
.savebar.sharing #saveHint,.savebar.autosaved #saveHint{display:inline-flex;color:var(--dim)}
.savebar.autosaved{border-bottom-color:var(--line2)}
.savebar.dirty{border-bottom-color:var(--brass-soft)}
.savebar #saveHint{color:var(--brass);flex-basis:100%}
.sect{border-top:1px solid var(--line2);margin-top:16px;padding-top:14px}
.sect:first-child{border-top:none;margin-top:0;padding-top:0}
.hint{font-size:11.5px;color:var(--dimmer);line-height:1.55;margin:6px 0 0}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;align-items:center}

.libitem{width:100%;text-align:left;padding:8px 9px;border-radius:6px;border:1px solid transparent;display:flex;gap:9px;align-items:center}
.libitem.selected{background:var(--panel2);border-color:var(--brass)}
.libitem:hover{background:var(--panel2);border-color:var(--line)}
.libselect{display:block;text-align:left;min-height:44px;padding:0;min-width:0}
.libitem .btn,.libitem .icb,.workspace-theme .libitem .btn.sm,.stage-workspace .libitem .btn.sm{min-height:44px;min-width:44px;flex-shrink:0}
.libpreview{max-height:28vh;overflow:auto;border-top:1px solid var(--line);padding:10px 0;font-size:13px}
.libpreview p{line-height:1.5}
.libitem .t{flex:1;min-width:0}
.libitem .t b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libitem .t span{font-family:var(--mono);font-size:10px;color:var(--dimmer)}

.secpill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;background:var(--panel2)}
.secpill.off{opacity:.4}
.secpill .x{font-family:var(--mono);font-size:11px;color:var(--dimmer)}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.dot.verse{background:var(--freeze)} .dot.chorus{background:var(--brass)}
.dot.bridge{background:var(--violet)} .dot.prechorus{background:var(--ok)}
.dot.other{background:var(--dimmer)}

.arr{display:flex;flex-wrap:wrap;gap:6px}
.arr .secpill{cursor:grab}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;padding:6px 4px;font-size:12px;color:var(--dim);border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--panel2)}
.seg button.on{background:var(--brass);color:#20160a;font-weight:600}
input[type=range]{accent-color:var(--brass);background:transparent}
.swatch{width:40px;height:28px;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2)}
input[type=checkbox]{accent-color:var(--brass)}

/* ---------- display view ---------- */
#displayView{position:fixed;top:0;left:0;right:0;height:var(--appvh,100dvh);
  background:var(--slide-bg,#000);z-index:50;display:none}
#displayView.on{display:block}
.dhud{position:fixed;top:12px;right:12px;z-index:52;display:flex;gap:6px;opacity:0;transition:opacity .2s}
#displayView:hover .dhud,.dhud:focus-within{opacity:1}
#displayView.needs-playback .dhud,#displayView.fs.needs-playback .dhud{opacity:1;display:flex}
.dhud .btn{background:rgba(20,24,30,.9);backdrop-filter:blur(6px)}
/* CP.8.3 (F11): nothing floats over the audience output. */
body:has(#displayView.on) #toast{display:none!important}

/* The containing modal supplies the single close control. */
#modalBody #btnPanelClose{display:none}

.arr-handle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.arr-handle:active{cursor:grabbing}

/* ---------- band view ---------- */
#bandView{position:fixed;top:0;left:0;right:0;height:var(--appvh,100dvh);
  background:var(--ground);z-index:45;display:none;flex-direction:column;overflow:clip}
/* Only the inner reading/list panes scroll. Focus in a closing drawer must
   never pan this fixed screen sideways and carry its toolbar out of reach. */
#bandView.on{display:flex}
/* Everything in these two bars wraps onto a second row rather than running off
   the edge. An iPad held sideways is wide but not endless, and a control you
   cannot see is a control you do not have. */
.bandhead{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel);flex:none;
  flex-wrap:wrap;row-gap:8px;position:relative;z-index:1;transform:translateZ(0)}
/* Keep the wrapped toolbar on its own paint layer during iPad panel changes. */
.stage-modebar{display:flex;align-items:center;gap:6px;width:192px;max-width:100%;height:40px;
  color:var(--dim);font-size:11.5px;line-height:1.25;flex:none}
.stage-status-copy{display:grid;flex:1;min-width:0}
.stage-status-copy>*{grid-area:1/1;align-self:center}
#stageModeHint{display:block;min-width:0}
#stageModeHint>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-status-copy .btn.syncstate{padding:0;border:0;min-height:0;max-width:100%;justify-self:stretch;align-self:stretch;
  font:inherit;line-height:inherit;text-align:left;white-space:normal;overflow:hidden;
  color:var(--brass);background:none}
/* Keep the guidance in the layout while save status uses the same space. */
.stage-modebar.sharing #stageModeHint{visibility:hidden}
.stagepaneltools{display:flex;gap:8px;flex:none;margin-left:auto}
.stagepaneltools .btn{min-width:40px;min-height:40px}
.stage-modebar #btnStageModeHelp{flex:none;width:40px;min-width:40px;height:40px;min-height:40px;padding:0}
.stage-modebar.projector-on{color:var(--brass)}
/* Status and help travel with the toolbar rather than taking a separate row. */
#bandView.full .stagefulltools{order:-1}
.bandhead .wordmark{min-width:0}
.bandhead #stageSvc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:620px){
  /* Keep reading controls reachable on phones as well as tablets. */
  .bandhead{flex-wrap:wrap;row-gap:7px;padding:8px 12px;gap:8px}
  .bandhead .wordmark b{font-size:17px}
  .bandhead #stageSvc{display:none}
  #btnUndoStage,#btnRedoStage,#btnUIBand,#btnMeStage{display:none}
  #btnBandFull{min-width:44px;min-height:44px}
  .bandhead .leadseg{width:100%;order:9}
  .bandhead .leadwho{order:10}
  .bandhead .textseg{width:66px}
  #previewBar{grid-template-columns:1fr;gap:7px;padding:8px 12px}
  .previewbar .pvtile:nth-child(2){display:none}   /* one card is enough on a phone */
  .topbar{flex-wrap:wrap;height:auto;row-gap:6px;padding-top:6px;padding-bottom:6px}
  .cuestrip{padding:7px 9px;gap:6px}
  .cuestrip .what{font-size:15px}
  .chartbar{padding:7px 9px;gap:6px}
}
.bandhead h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em}
/* ---- stage view: band, teacher, announcements ---- */
.previewbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel)}
.previewbar.off{display:none}
.pvtile{min-width:0}
.pvtile .eyebrow{margin-bottom:5px}
.pvtile .nextcard{min-height:74px;max-height:112px;overflow:hidden}
.pvtile .nl{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* Notes sit UNDER the words as a second pane, so a teacher reads the slide and
   their own note at once. The grip between them drags to change the split. */
.stagebody{flex:1;display:flex;min-height:0;min-width:0}
.stagemain{flex:1;display:grid;grid-template-rows:1fr;min-height:0;min-width:0}
/* Docked: the panel takes its own column and the rest of the screen resizes
   around it, the way the tech console works. */
/* The docked panel's width, said once, because the bottom bar has to stop
   short of it and two numbers that must agree will one day not. */
#bandView.docked{--dockw:288px}
#bandView.docked .orderdrawer{position:static;transform:none;width:var(--dockw);flex:none;
  border-left:1px solid var(--line);box-shadow:none;height:auto;padding-top:0;padding-right:0}
/* The bottom bar is FIXED across the whole window, so a docked panel sat on top
   of the right-hand end of it — which is the end Next lives at. It still took a
   press, because the bar is above the panel in the stack, but half of the one
   button a singer uses all morning was behind a wall. It ends where the panel
   begins now. */
#bandView.docked .bandnav{right:var(--dockw)}
#bandView.docked.noorder .bandnav{right:0}
#bandView.docked .drawerscrim{display:none}
#bandView.docked #btnOrderClose{display:none}
#bandView.docked #btnOrderDock{color:var(--brass)}
#bandView.docked.noorder .orderdrawer{display:none}
@media (max-width:820px){ #bandView.docked{--dockw:246px} }
@media (max-width:660px){
  /* Narrow enough that the panel slides over the words again rather than
     taking a column, so the bar goes back to the full width. */
  #bandView.docked .orderdrawer{position:absolute;transform:translateX(100%);width:292px;height:auto;top:0;bottom:0;
    padding-top:var(--safe-top);padding-right:var(--safe-right)}
  #bandView.docked .orderdrawer.on{transform:none}
  #bandView.docked #btnOrderClose{display:inline-flex}
  #bandView.docked .bandnav{right:0}
}
.stagemain.withnotes{grid-template-rows:1fr auto;padding-bottom:56px}
.notespane{display:none;background:var(--panel);border-top:1px solid var(--line);
  height:var(--noteh,46vh);min-height:34px;overflow:hidden;flex-direction:column}
.stagemain.withnotes .notespane{display:flex}
.stagemain.withnotes.notesdown .notespane{height:36px}
.notegrip{height:36px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;
  cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;
  border-bottom:1px solid var(--line2)}
.notegrip .bar{width:40px;height:4px;border-radius:2px;background:var(--line)}
.notegrip:hover .bar{background:var(--brass-soft)}
.notegrip .chev{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dimmer);transition:transform .15s}
.stagemain.notesdown .notegrip .chev{transform:rotate(180deg)}
/* The writing box takes the space; the list of other notes sits under it. */
.notebody{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;min-height:0;overflow:hidden}
.stagemain.withnotes.notesdown .notebody{display:none}
.noteedit{flex:1;display:flex;flex-direction:column;gap:6px;min-height:84px}
#noteBox{flex:1}
#noteBox{flex:1;min-height:64px;resize:none;line-height:1.55}
/* ---- the running document ----
   Everything written, in the order it will be said. Only the teacher gets this;
   announcements stay a note per slide, because a notice IS a slide and a
   sermon is not. */
.noterun{display:none}
.notebody.running .noterun{display:flex;flex-direction:column;gap:2px;flex:1;
  overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
/* Let the final note scroll above the floating chat button. This is end-of-
   document space, not a gap between every note or song. */
.noterun::after{content:"";display:block;flex:0 0 64px}
.notebody.running>.noteedit{display:none}      /* it has been moved into a block */
.nblk{padding:9px 11px;border-left:2px solid transparent;border-radius:0 6px 6px 0;
  cursor:pointer}
.nblk:hover{background:var(--panel2)}
.nblk.on{border-left-color:var(--brass);background:var(--panel2);cursor:default}
.nblk .nlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dimmer);display:flex;align-items:center;gap:8px;
  margin-bottom:5px}
.nblk.on .nlbl{color:var(--brass)}
.nblk .ntext{font-size:14.5px;line-height:1.55;color:var(--dim);white-space:pre-wrap}
.nblk.on .noteedit{flex:none;min-height:0}
.nblk.on #noteBox{flex:none;height:auto;min-height:84px;overflow:hidden}
.nblk .nempty{font-size:13px;color:var(--dimmer);font-style:italic}
/* ---- reading, and writing ----
   The lit block reads as words with live references until it is tapped, and is
   a writing box while it is being written in. A textarea cannot hold a link, so
   rather than turn the notes into a rich editor — and take the undo, the split
   and everything that knows about that box with it — the block simply has two
   faces and shows the right one. */
.nblk.on .nread{font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;
  cursor:text;min-height:40px}
.nblk.on.editing .nread{display:none}
.nblk.on .noteedit{display:none}
.nblk.on.editing .noteedit{display:flex}
a.vref{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-soft);
  cursor:pointer}
a.vref:hover,a.vref:focus{border-bottom-color:var(--brass);outline:none}
/* ---- the passage, where you are reading ----
   Anchored to the reference, not thrown over the whole screen: a teacher
   glancing at a verse has not left their notes and should not be made to feel
   that they have. Bigger than the one Kaleb was looking at, and still capped so
   it can never take the screen. */
.vpop{position:fixed;z-index:75;width:min(520px,92vw);height:min(62vh,560px);max-height:calc(var(--appvh,100dvh) - 24px);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.vpopbody{padding:16px 18px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;
  font-size:15px;line-height:1.62;color:var(--ink);white-space:pre-wrap;
  overflow-wrap:break-word}
.vpopbody .vnum{font-family:var(--mono);font-size:10.5px;color:var(--dimmer);
  vertical-align:super;margin-right:2px}
.vpopfoot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:9px 12px;flex:none;order:-1;
  border-top:1px solid var(--line2);background:var(--panel2)}
.vpopfoot .spacer{flex:1}
.vpopfoot .vname{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpopfoot button{min-height:40px;min-width:44px}
.vpicks{display:flex;gap:4px}
.vpicks button{border:1px solid var(--line);background:var(--panel);color:var(--dim);
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-family:var(--mono);cursor:pointer}
.vpicks button.on{background:var(--brass-t);border-color:var(--brass);color:var(--ink)}
.vpopwait{padding:22px 18px;color:var(--dim);font-size:14px}
.notehere{margin:8px 0 0;padding:9px 11px;border-left:2px solid var(--brass);background:var(--panel2);
  border-radius:0 6px 6px 0;font-size:14px;color:var(--dim);line-height:1.5;white-space:pre-wrap}
/* Opens from the RIGHT: a left-edge swipe is the browser's own back gesture. */
.orderdrawer{position:absolute;right:0;top:0;bottom:0;width:292px;max-width:86vw;background:var(--panel);
  border-left:1px solid var(--line);z-index:46;display:flex;flex-direction:column;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-right:var(--safe-right);
  transform:translateX(100%);transition:transform .18s ease}
.orderdrawer.on{transform:none;box-shadow:0 14px 48px rgba(0,0,0,.45)}
.orderdrawer[inert]{visibility:hidden}
.odhead{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line2);flex:none}
/* Four little buttons and a heading in a narrow drawer: the heading is the one
   that gives way, or they start sitting on top of one another. */
.odhead .eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odhead .icb{flex:none}
.odbody{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}
.odadd{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line2);flex:none}
.odadd .btn{flex:1;justify-content:center}
.drawerscrim{position:fixed;inset:0;background:rgba(6,8,11,.45);z-index:45;display:none}
.drawerscrim.on{display:block}
.bandlyrics{overflow-y:auto;padding:22px 30px 108px;min-height:0}
.stage-song-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.stage-song-title h2{margin:0;min-width:0;flex:1;font-size:26px;letter-spacing:-.02em;overflow-wrap:anywhere}
.stage-song-title .btn{flex:none}
.stage-song-key{font-family:var(--mono);font-size:13px;color:var(--brass)}
.bsec{margin-bottom:26px;padding-left:16px;border-left:2px solid var(--line);transition:border-color .15s}
.bsec.on{border-left-color:var(--brass)}
.bsec .blbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.bsec.on .blbl{color:var(--brass)}
.bsec .bline{font-family:var(--proj);font-size:calc(24px * var(--lyricScale,1));font-weight:600;line-height:1.5;color:var(--dim)}
.bsec.on .bline{color:var(--ink)}
.bsec .bchunk{position:relative;padding:3px 8px;margin-left:-8px;border-radius:5px;cursor:pointer}
.bsec .bchunk:hover{background:var(--panel2)}
.bsec .bchunk.live{background:var(--panel2);box-shadow:inset 3px 0 0 var(--brass)}
/* The audience marker lives in the existing left gutter: no extra row and no
   change to lyric/chord wrapping when projection moves independently. It sits
   at the vertical middle of its slide's block (ch.2), so it reads as "this
   block" rather than "this first line". */
.onair.stage-onair{position:absolute;left:-16px;top:50%;margin:-5px 0 0;display:block;
  width:10px;height:10px;padding:0;border:0;border-radius:50%;
  background:var(--live);box-shadow:0 0 0 3px var(--ground);visibility:hidden}
.onair.stage-onair.on{visibility:visible}
/* ---- chord charts ----
   Each chord sits on top of the syllable it lands on. The pieces are inline
   blocks so a long line wraps like text does, and a chord wider than its word
   pushes the next piece along instead of colliding with it. */
.cline{font-family:var(--proj);font-size:calc(23px * var(--lyricScale,1));font-weight:600;line-height:1.24;
  color:var(--dim);margin-bottom:6.6px;display:block}
.bsec.on .cline{color:var(--ink)}
.cline.empty{height:.7em;margin-bottom:4px}
.cseg{display:inline-block;vertical-align:bottom;white-space:pre-wrap}
.cseg .chd,.cseg .chord-space{display:block;font-family:var(--mono);font-size:calc(1em - 1px);font-weight:700;
  letter-spacing:.01em;line-height:1.5;color:var(--brass);padding-right:.55em;white-space:pre}
.cseg .chord-space{visibility:hidden}
.cseg .cwords{display:block;min-height:1.24em}
.cline.barline{font-family:var(--mono);font-size:calc(23px * var(--lyricScale,1) - 1px);font-weight:700;color:var(--brass);letter-spacing:.04em}
.chordsonly .cline{font-family:var(--mono);font-size:calc(23px * var(--lyricScale,1) - 1px);color:var(--brass);font-weight:700}
.chartbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);margin-bottom:16px}
.chartbar .kk{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--brass)}
.chartbar .sub{font-size:11px;color:var(--dimmer)}
.roadmap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.roadmap .rm{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--dimmer);cursor:pointer}
.roadmap .rm.on{border-color:var(--brass);color:var(--brass)}
.roadmap .rm .bars{opacity:.6;margin-left:5px}
.bandtag{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);border:1px solid var(--line);border-radius:3px;padding:0 4px;margin-left:6px}
/* ---- signals across the stage ---- */
.textseg{flex:none;width:74px}
.textseg button{padding:5px 2px;font-size:12px}
/* ---- what is queued, shown where people are already looking ---- */
.qtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:1px 7px;margin-right:7px}
.qline{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line);font-size:13px;color:var(--brass)}
.bsec.queued{border-left-style:dashed;opacity:.9}
/* The next song, standing apart from the one still being played. */
.bsec.nextsong{border-left-color:var(--brass);background:rgba(201,162,89,.055);
  border-radius:0 8px 8px 0;padding-top:10px;padding-bottom:6px;margin-top:20px}
.bsec.nextsong .blbl{flex-wrap:wrap;row-gap:4px;color:var(--brass)}
.nskey{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brass)}
.bsec.queued .blbl{color:var(--brass)}
.bsec.queued .bline,.bsec.queued .cline{color:var(--dim)}
/* The part types keep the colours they have in the running order, so a bridge
   is a bridge wherever you are looking. */
.bsec.p-verse.on,.bsec.p-verse.queued{border-left-color:var(--freeze)}
.bsec.p-chorus.on,.bsec.p-chorus.queued{border-left-color:var(--brass)}
.bsec.p-bridge.on,.bsec.p-bridge.queued{border-left-color:var(--violet)}
.bsec.p-prechorus.on,.bsec.p-prechorus.queued{border-left-color:var(--ok)}
.bsec.p-verse.on .blbl{color:var(--freeze)}
.bsec.p-bridge.on .blbl{color:var(--violet)}
.bsec.p-prechorus.on .blbl{color:var(--ok)}
.roadmap .rm .dot{margin-right:5px;display:inline-block;vertical-align:middle}
.roadmap .rm.queued{border-style:dashed;border-color:var(--brass);color:var(--brass)}
/* The signal has to be readable from wherever you have scrolled to. */
.bandlyrics .cuestrip{position:sticky;top:-1px;z-index:6;background:var(--panel);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.55)}
.bandlyrics .cuestrip.armed{background:var(--panel);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.55),inset 0 0 0 1px var(--brass)}
/* Everyone reads at a different distance from the stand. */
.bandlyrics{--lyricScale:1}
.leadseg{flex:none;width:258px}
.leadseg button{padding:5px 4px;font-size:11px;white-space:nowrap}
/* Following is the resting state, so it lights white — plainly on, but not the
   colour that means you have taken the room. Bronze is only ever "people are
   moving when I move". Pressing a lit bronze button puts it out and hands the
   room back. */
.leadseg button[data-lead="follow"].on{background:var(--ink);color:var(--ground)}
.leadwho{font:inherit;color:inherit}
.cuestrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);margin-bottom:12px}
.cuestrip.armed{border-color:var(--brass);background:rgba(201,162,89,.10)}
.cuestrip .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.cuestrip .what{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cuestrip .meta{font-family:var(--mono);font-size:12px;color:var(--brass)}
.cuestrip .who{font-size:11px;color:var(--dimmer)}
.cuestrip .tempo{font-family:var(--mono);font-size:11.5px;color:var(--dimmer)}

/* Inline chords inside one lyric word share a wrap boundary. */
.cwordgroup{display:inline-block;vertical-align:bottom;white-space:nowrap}.cwordgroup .cseg{white-space:pre}
/* ---- who is on today ---- */
/* A floor under it, so filling it in never moves what is below. */
.gate-roster{width:100%;margin:12px 0 0;padding:12px 14px;min-height:70px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);text-align:left}
.gate-roster .arr{margin-top:9px}
.gate-roster .secpill{opacity:.5}
.gate-roster .secpill.on{opacity:1;border-color:var(--brass);color:var(--brass)}
.rosterlist{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.rperson{font-size:12px;color:var(--dimmer)}
.rperson b{color:var(--dim);font-weight:600}
.leadbox{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.leadbox .row{margin-bottom:7px}
.leadrow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.leadrow .t{flex:1;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leadrow .k{font-family:var(--mono);font-weight:700;color:var(--brass);min-width:30px;text-align:right}
.leadrow .src{font-size:10.5px;color:var(--dimmer);min-width:78px}
.leadrow .btn.sm{padding:2px 8px;font-size:11px}
.cuestrip .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);
  border-radius:999px;padding:2px 8px}
.cuestrip .btn.sm{padding:5px 10px;font-size:12px}
/* A row of its own, so the parts and the calls do not shuffle about as a song
   with four parts follows one with nine. */
.cbreak{flex-basis:100%;height:0;margin:0}
/* Each part in the colour it already wears in the running order and on the
   roadmap, because a bridge should be a bridge wherever you are looking. */
.cuestrip .partbtn{border-color:var(--line);color:var(--dim)}
.cuestrip .partbtn.p-verse{border-color:var(--freeze);color:var(--freeze)}
.cuestrip .partbtn.p-chorus{border-color:var(--brass);color:var(--brass)}
.cuestrip .partbtn.p-bridge{border-color:var(--violet);color:var(--violet)}
.cuestrip .partbtn.p-prechorus{border-color:var(--ok);color:var(--ok)}
.cuestrip .partbtn.armed{color:#16110a;font-weight:700}
.cuestrip .partbtn.p-verse.armed{background:var(--freeze)}
.cuestrip .partbtn.p-chorus.armed{background:var(--brass)}
.cuestrip .partbtn.p-bridge.armed{background:var(--violet);color:#fff}
.cuestrip .partbtn.p-prechorus.armed{background:var(--ok)}
.cuestrip .partbtn.p-other.armed{background:var(--dim)}
.cuesignal{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--brass);color:var(--brass);font-size:11.5px;white-space:nowrap}
.cuesignal .cs-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.cuesignal .cs-w{font-weight:700}
@keyframes cuepulse{0%,100%{opacity:1}50%{opacity:.55}}
.cuestrip.armed .tag,.cuesignal{animation:cuepulse 1.9s ease-in-out infinite}
.bside{border-left:1px solid var(--line);background:var(--panel);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
#bandView.full .bandhead{display:none}
/* Keep panel controls together at the right in both normal and full screen. */
.stagefulltools{display:none;flex:none;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:6px 18px;background:var(--panel);position:relative;z-index:47}
#bandView.full .stagefulltools{display:flex}
.stagefulltools .stagepaneltools{margin-left:0}
.stagefulltools .stagepaneltools .btn{display:inline-flex}
#bandView.full #btnStagePreview{display:inline-flex}
/* ci: mode controls in the full-screen bar keep touch-sized targets and the
   same order as the header. The text-size control stays at the far end. */
.stagefulltools .leadseg button{min-height:40px}
.stagefulltools #bandControlRow{min-height:40px}
.stagefulltools #btnBandLive{min-height:40px}
.stagefulltools .stagepaneltools{margin-left:auto}
.stagefulltools .textfull{margin-left:0}
@media(max-width:620px){
  .stagefulltools .leadseg{width:100%;order:9}
  .stagefulltools #bandControlRow{order:10}
  .stagefulltools #btnBandLive{order:11;margin-left:auto}
  .stagefulltools .textfull{width:66px}
}
@media(max-width:620px){.stagefulltools{padding-left:12px;padding-right:12px;column-gap:8px}}
#bandView.full .orderdrawer{top:calc(var(--safe-top) + var(--stage-tools-height,58px));padding-top:0}
.textfull{display:flex;width:88px;margin-left:auto;flex:none}
.textfull button{padding:8px 2px;font-size:12px;min-height:40px}
/* Bright enough to catch the corner of an eye from a music stand, gone before
   it can pull one off the words. Beat one is wider and brighter than the rest,
   because knowing WHERE you are in the bar is most of the point. */
#metroRing{position:fixed;inset:0;z-index:44;pointer-events:none;display:none}
#metroRing.on{display:block}
#metroRing.beat{animation:metrobeat 120ms ease-out}
#metroRing.one{animation:metroone 150ms ease-out}
@keyframes metrobeat{from{box-shadow:inset 0 0 0 6px rgba(255,255,255,.30)}
  to{box-shadow:inset 0 0 0 6px rgba(255,255,255,0)}}
@keyframes metroone{from{box-shadow:inset 0 0 0 12px rgba(255,255,255,.55)}
  to{box-shadow:inset 0 0 0 12px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){ #metroRing{display:none!important} }
.bandexit{min-height:40px;flex:none}
.onair{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--live);border:1px solid #4a2b2b;border-radius:3px;padding:1px 5px;margin-left:8px}
.bsong{width:100%;text-align:left;padding:6px 8px;border-radius:5px;display:flex;gap:8px;align-items:baseline;color:var(--dim)}
.bsong:hover{background:var(--panel2)}
.bsong.here{background:var(--panel2);color:var(--ink);box-shadow:inset 3px 0 0 var(--brass)}
.bsong .n{font-family:var(--mono);font-size:10px;color:var(--dimmer)}
#displayView.fs .dhud{display:none}
.nextcard{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel2)}
.nextcard .nl{font-family:var(--proj);font-size:16px;font-weight:600;line-height:1.45;color:var(--dim)}

.modal{position:fixed;inset:0;background:rgba(6,8,11,.78);z-index:84;display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:660px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.sheet-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line2);flex:none}
.sheet-head h3{margin:0;font-size:15px;font-weight:600;flex:1}
.sheet-body{padding:16px;overflow-y:auto;min-height:0}
.sheet-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line2);flex:none}
#modal #ordinaryReviewControls .btn{min-height:44px;white-space:normal}
.ordinary-review li{overflow-wrap:anywhere;margin-bottom:12px}
.empty{padding:26px 16px;text-align:center;color:var(--dimmer);font-size:12.5px;line-height:1.6}
.trashrow{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line2)}
.trashrow:last-child{border-bottom:none}
.trashrow .ti{flex:1;min-width:0}
.trashrow .ti b{font-size:14px;font-weight:600}
.trashrow .when{font-size:10.5px;color:var(--dimmer);margin-top:2px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel3);border:1px solid var(--line);color:var(--ink);padding:9px 16px;border-radius:12px;font-size:13px;z-index:92;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px);width:max-content;overflow-wrap:anywhere}
.toast.on{opacity:1}
.toast.actionable.on{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);border-radius:12px}
#bandView.on ~ .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:1180px){.body{grid-template-columns:224px 1fr 300px}.previews{grid-template-columns:1fr}.pv.next{display:none}}

/* ---------- free-form slide editor ---------- */
#ceHost{position:fixed;top:var(--ce-viewport-top,0px);left:0;right:0;height:var(--appvh,100dvh);z-index:78;
  background:var(--ground);display:flex;flex-direction:column}
#ceHost[hidden]{display:none}
.cehead{display:flex;align-items:center;gap:9px;padding:9px 12px;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.cetools{display:flex;gap:6px;flex-wrap:wrap}
.cebody{flex:1;display:flex;min-height:0}
#ceWrap{flex:1;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;
  background:repeating-conic-gradient(var(--panel2) 0% 25%,var(--panel) 0% 50%) 50%/22px 22px}
/* The frame takes up the SCALED size in the layout; the stage inside it is
   always the full canvas, scaled from its top-left corner. Without this the
   stage still occupies 1600x900 and its right-hand edge — handles and all —
   slides underneath the properties panel. */
#ceFrame{position:relative;width:var(--ceW,800px);height:var(--ceH,450px);
  box-shadow:0 12px 48px rgba(0,0,0,.5);outline:1px solid var(--line)}
#ceStage{position:absolute;top:0;left:0;transform-origin:0 0}
#cePanel{flex:0 0 268px;border-left:1px solid var(--line);background:var(--panel);
  padding:12px;overflow-y:auto}
/* ---------- the big edit view ----------
   A slide at a size you can actually read, with its words next to it. What is
   being edited and what is on the screen are two different things, and this is
   where that difference is made obvious. */
#beHost{position:fixed;top:0;left:0;right:0;height:var(--appvh,100dvh);z-index:76;
  background:var(--ground);display:flex;flex-direction:column}
#beHost[hidden]{display:none}
.behead{display:flex;align-items:center;gap:9px;padding:9px 12px;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.behold{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
  border:1px solid #2C405A;background:rgba(91,155,213,.12);border-radius:999px;padding:3px 11px}
.behold b{color:var(--ink);font-weight:600}
.bebody{flex:1;display:flex;min-height:0}
#beWrap{flex:1;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:16px}
#beScreen{width:var(--beW,900px);height:var(--beH,506px);box-shadow:0 12px 48px rgba(0,0,0,.5)}
#bePanel{flex:0 0 320px;border-left:1px solid var(--line);background:var(--panel);
  padding:12px;overflow-y:auto}
#bePanel textarea{min-height:120px}
.befoot{display:flex;align-items:center;gap:8px;padding:8px 12px;flex:none;
  border-top:1px solid var(--line);background:var(--panel)}
.bestep{font-family:var(--mono);font-size:11px;color:var(--dimmer)}
@media (max-width:900px){
  .bebody{flex-direction:column}
  #bePanel{flex:0 0 auto;max-height:46vh;border-left:0;border-top:1px solid var(--line)}
}
.cewrap{position:absolute;isolation:isolate;cursor:move;outline:1px dashed transparent}
.cewrap:hover{outline-color:var(--brass-soft)}
.cewrap.sel{outline:2px solid var(--brass);outline-offset:0}
.cewrap .cel{position:absolute;left:0;top:0;width:100%!important;height:100%!important}
/* The stage is scaled to fit, so anything drawn inside it shrinks too. The
   grab handles are counter-scaled to stay a real finger's worth on screen. */
.ch{position:absolute;width:var(--chs,13px);height:var(--chs,13px);background:var(--brass);
  border:calc(var(--chs,13px)/6) solid var(--panel);border-radius:calc(var(--chs,13px)/4);z-index:3}
.ch.nw{left:calc(var(--chs,13px)/-2);top:calc(var(--chs,13px)/-2);cursor:nwse-resize}
.ch.ne{right:calc(var(--chs,13px)/-2);top:calc(var(--chs,13px)/-2);cursor:nesw-resize}
.ch.sw{left:calc(var(--chs,13px)/-2);bottom:calc(var(--chs,13px)/-2);cursor:nesw-resize}
.ch.se{right:calc(var(--chs,13px)/-2);bottom:calc(var(--chs,13px)/-2);cursor:nwse-resize}
/* Round, so it reads as "pull me" rather than as another corner. */
.ch.bend{border-radius:50%;background:var(--live);cursor:ns-resize;
  margin-left:calc(var(--chs,13px)/-2);margin-top:calc(var(--chs,13px)/-2)}
.cewrap.sel{outline-width:calc(2px / var(--cescale,1))}
/* The destination of a move: an empty outline the size of the piece, sitting
   where the piece will finish. Draggable, and labelled with the press it
   belongs to so two moves are telling apart. */
/* One row per thing a piece does: which press, what it does, and a way to
   take it off again. Deliberately narrow rows — a slide with four moves on it
   should still read as a short list rather than a form. */
/* One card per thing a piece does. Two plain lines inside it rather than a
   grid: the panel is narrow, "Drift slowly to a new place" is a sentence, and
   a grid that has to be told which cell each control lives in is a grid that
   will put one of them somewhere surprising the moment a row has a different
   number of controls — which is exactly what it did. */
.actlist{display:flex;flex-direction:column;gap:8px}
.actrow{border:1px solid var(--line);border-radius:7px;padding:7px 8px;background:var(--panel2)}
.actrow .actline{display:flex;align-items:center;gap:6px}
.actrow .actline+.actline{margin-top:6px}
.actrow .ceact{min-width:0}
.actrow .ceact[data-f="on"],.actrow .psel[data-f="on"]{flex:0 0 96px;width:96px}
.actrow .ceact[data-f="kind"],.actrow .psel[data-f="kind"]{flex:1 1 auto;width:100%;min-width:0}
.actrow .actsp{flex:1}
.actrow .acthint{color:var(--brass);cursor:help}
.cedest{position:absolute;border:2px dashed var(--brass);border-radius:4px;
  background:rgba(201,162,39,.07);cursor:move;z-index:6}
.cedest .cedlbl{position:absolute;left:0;top:-19px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brass);background:rgba(6,8,11,.7);
  padding:1px 5px;border-radius:3px;white-space:nowrap}
#cePanel .row{margin-bottom:7px}
#cePanel .eyebrow{display:block;margin-bottom:5px}
@media (max-width:820px){
  .cebody{flex-direction:column}
  #cePanel{flex:0 0 auto;max-height:42vh;border-left:0;border-top:1px solid var(--line)}
}
/* ---------- talkback ----------
   A bubble in the corner of every working view. Most of what anyone needs to
   say to the desk mid-service is three taps, so the taps come first and the
   keyboard second. */
/* The bubble sits in whichever bottom corner its owner put it in — a left
   hander wants it under their left thumb, and a guitarist wants it away from
   the neck. Dragged, it snaps to the nearer corner and stays there. */
body.chatleft .chatbub,body.chatleft .chatpanel{right:auto;left:16px}
body.chatleft.chatmin .chatbub{right:auto;left:20px}
.chatbub.dragging{transition:none;cursor:grabbing;opacity:.9}
.chatbub{position:fixed;right:16px;bottom:16px;z-index:70;display:none;touch-action:none;
  width:48px;height:48px;border-radius:999px;align-items:center;justify-content:center;
  background:var(--panel3);color:var(--dim);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer}
body.chaton .chatbub{display:flex}
body.chatoff .chatbub{display:none}
.chatbub:hover{color:var(--ink);border-color:var(--brass-soft)}
.chatbub.unread{background:var(--brass);color:#20160a;border-color:transparent}
:root[data-ui="light"] .chatbub.unread{color:#fff}
/* Tucked away: a dot, not a button. It still turns brass when something
   arrives, so hiding it never means missing it. */
body.chatmin .chatbub{width:15px;height:15px;opacity:.42;box-shadow:none;right:20px;bottom:20px}
body.chatmin .chatbub svg{display:none}
body.chatmin .chatbub:hover{opacity:1}
.chatbub.nudge{animation:chatnudge .42s ease}
@keyframes chatnudge{0%,100%{transform:none}30%{transform:translateY(-5px) scale(1.06)}60%{transform:translateY(0) scale(1.02)}}
.chatbub .badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--live);color:#fff;font:600 11px/19px var(--mono);
  text-align:center;box-shadow:0 0 0 2px var(--bg)}
#bandView.on ~ .chatbub{bottom:calc(64px + var(--safe-bottom))}
.chatpanel{position:fixed;right:16px;bottom:74px;z-index:71;width:380px;max-width:calc(100vw - 32px);
  height:min(650px,calc(100dvh - 120px));display:none;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 56px rgba(0,0,0,.5);overflow:hidden}
.chatpanel.on{display:flex}
.chathead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line2);flex:none}
.chathead .mono{font-size:10.5px;color:var(--dimmer);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.chatto{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line2);flex:none}
.tobar{display:flex;gap:5px;flex-wrap:wrap;flex:1;max-height:96px;overflow-y:auto}
.tobar button{border:1px solid var(--line);background:var(--panel2);color:var(--dim);
  border-radius:999px;padding:3px 9px;font-size:11.5px;cursor:pointer}
.tobar button.on{background:var(--brass-t);border-color:var(--brass);color:var(--ink)}
/* Here today. Small enough to be a detail and not a decoration, and it carries
   its meaning in a title as well as a colour, because a green dot means nothing
   to somebody who cannot tell it from the grey one. */
.tobar .ondot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:5px;vertical-align:1px}
/* A channel is a place, a person is a person, and when the two share a name the
   only thing that tells them apart is how the chip is drawn. */
.tobar button.chan{border-style:dashed;letter-spacing:.04em}
.chatlog{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:68px}
.chatlog .empty{margin:auto;text-align:center}
.msg{max-width:88%;padding:7px 10px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line2);font-size:13px;line-height:1.45}
.msg.mine{align-self:flex-end;background:var(--brass-t);border-color:var(--brass-soft)}
.msg .who{display:block;font:600 10.5px/1.6 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--dimmer)}
.msg .tm{font-family:var(--mono);font-size:10px;color:var(--dimmer);margin-left:6px}
.chatcompose{flex:0 1 auto;min-height:0;max-height:60%;overflow-y:auto;
  border-top:1px solid var(--line2);padding:9px 12px 11px;display:flex;flex-direction:column;gap:8px}
.chatcompose>*{flex-shrink:0}
.chatrequest{border-top:1px solid var(--line2);padding-top:8px;display:flex;align-items:center;gap:8px}
.chatrequest p{flex:1;font-size:13px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.chatcustom{border-top:1px solid var(--line2);padding:9px 12px;flex:none}
.crumbs{display:flex;gap:5px;flex-wrap:wrap;min-height:0}
.crumbs:empty{display:none}
.crumbs .cr{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--brass-soft);
  background:var(--brass-t);border-radius:999px;padding:3px 5px 3px 9px;font-size:11.5px;color:var(--ink)}
.crumbs .cr button{font-family:var(--mono);font-size:10px;color:var(--dimmer);cursor:pointer}
.bubrow{display:flex;gap:6px;flex-wrap:wrap;max-height:116px;overflow-y:auto}
.bubrow button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.bubrow button:hover{border-color:var(--brass);background:var(--panel3)}
.bubrow button.back{color:var(--dimmer);font-family:var(--mono);font-size:11px}
.bubrow button.on{border-color:var(--brass);background:var(--brass-t)}
.tplrow{max-height:74px}
/* Every blank in the sentence, side by side. What it says now is what will be
   sent — tap only the one that is wrong. */
.slotrow{display:flex;gap:6px;flex-wrap:wrap}
.slotrow .slot{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--line);background:var(--panel2);border-radius:8px;
  padding:5px 10px;cursor:pointer;min-width:0;flex:1 1 auto}
.slotrow .slot:hover{border-color:var(--brass-soft)}
.slotrow .slot.open{border-color:var(--brass);background:var(--brass-t)}
.slotrow .slot .sk{font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer)}
.slotrow .slot .sv{font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.optrow{border-top:1px dashed var(--line2);padding-top:8px}
.chatsend{display:flex;gap:7px;align-items:center}
.chatsend .field{flex:1;height:36px;font-size:13px}
.chatsend .send{flex:0 0 36px;width:36px;height:36px;padding:0;justify-content:center;
  font-size:16px;background:var(--brass-t);border-color:var(--brass-soft)}
.chatsend .send:disabled{opacity:.4}
.msg.mine,.tobar button.on,.bubrow button.on,.slotrow .slot.open,.crumbs .cr{color:#20160a}
.msg.mine .who,.msg.mine .tm,.slotrow .slot.open .sk,.slotrow .slot.open .sv,.crumbs .cr button{color:inherit}
:root[data-ui="light"] .msg.mine,:root[data-ui="light"] .tobar button.on,:root[data-ui="light"] .bubrow button.on,
:root[data-ui="light"] .slotrow .slot.open,:root[data-ui="light"] .crumbs .cr{color:#fff}
@media (max-width:560px){
  .chatpanel{right:0;left:0;bottom:0;width:auto;max-width:none;border-radius:14px 14px 0 0;
    height:min(85dvh,650px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .chatbub{right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
@media (max-height:560px){
  .chatpanel{bottom:8px;height:calc(100dvh - 16px)}
}

#chatRecoveryLabel{max-height:80px;overflow:auto;overflow-wrap:anywhere}
#chatRecovery .btn{min-height:44px;margin:0 4px 6px 0}

.cewrap.passage-select,.cewrap.passage-select .ctextlines{cursor:text;user-select:text;-webkit-user-select:text;touch-action:auto}
.cewrap.passage-select .ch{display:none}
.rich-flow{display:block;width:100%;min-width:0}.cap[data-font-max]{max-height:100%;box-sizing:border-box;overflow:hidden}

@media(max-width:820px),(pointer:coarse){
  /* Native focus zoom must not strand the existing text properties off-screen. */
  #cePanel textarea,#cePanel select,#cePanel input:not([type=range]):not([type=checkbox]):not([type=color]){font-size:16px}
  #cePanel{min-width:0;max-width:100%}
}

/* A native landscape keyboard can leave only 130px. Keep full-size exit and
   recovery actions in the existing header rail while the active property owns
   the remaining height; dismissal restores the ordinary canvas unchanged. */
#ceHost.workspace-theme.ce-keyboard-tight{flex-direction:row;padding-top:0;padding-bottom:0}
#ceHost.workspace-theme.ce-keyboard-tight .cehead{flex:0 0 88px;width:88px;height:100%;min-height:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:4px;padding:4px;border-bottom:0;border-right:1px solid var(--line);overflow-y:auto}
#ceHost.workspace-theme.ce-keyboard-tight .cehead>:not(#ceDone):not(#ceCancel):not(#ceUndo):not(#ceRedo):not(#ceStatus){display:none!important}
#ceHost.workspace-theme.ce-keyboard-tight .cehead>.btn{flex:none;width:100%;margin:0;min-height:40px}
#ceHost.workspace-theme.ce-keyboard-tight #ceDone{order:-2}
#ceHost.workspace-theme.ce-keyboard-tight #ceCancel{order:-1}
#ceHost.workspace-theme.ce-keyboard-tight #ceStatus{flex:none;white-space:normal;overflow-wrap:anywhere}
#ceHost.workspace-theme.ce-keyboard-tight .cebody{flex:1;flex-direction:row;min-width:0}
#ceHost.workspace-theme.ce-keyboard-tight #ceWrap{display:none}
#ceHost.workspace-theme.ce-keyboard-tight #cePanel{flex:1;max-height:none;padding:4px;border-top:0;border-left:0}

#ceHost.workspace-theme.ce-keyboard-tight #cePanel textarea{min-height:40px;max-height:max(40px,var(--appvh,100dvh))}
/* ---------- touch and small screens (the band is on iPads) ---------- */
/* Bottom nav floats over the words: small, translucent, always reachable. */
.bandnav{position:fixed;left:0;right:0;bottom:0;z-index:44;display:none;gap:8px;
  padding:8px 12px;padding-bottom:calc(8px + var(--safe-bottom));
  background:var(--panel-t);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--brass)}
#bandView.on .bandnav{display:flex}
.bandnav .btn{height:40px;font-size:14px;justify-content:center;border-color:var(--line)}
#bandPrev{flex:0 0 96px;background:var(--panel2-t)}
#bandNextBtn{flex:1;background:var(--brass-t);color:#20160a;border-color:transparent;font-weight:600}
/* The same button, doing the other job it is in the right place to do. */
#bandNextBtn.go{background:var(--brass);font-weight:800;letter-spacing:.04em;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);animation:cuepulse 1.9s ease-in-out infinite}
.cuestrip .btn.sm.cancelbig{padding:8px 20px;font-size:13px}
:root[data-ui="light"] #bandNextBtn{color:#fff}
#btnOrder{display:none}
@media (pointer:coarse){
  .bsec .bchunk{padding:9px 12px;margin-left:-12px}
  .btn{padding:9px 14px}
  .btn.sm{padding:8px 11px}
  .libitem,.bsong{padding:11px 10px}
  .osec-head,.oitem-head{padding-top:11px;padding-bottom:11px}
  .oslide{padding-top:9px;padding-bottom:9px}
}
@media (max-width:1100px){ .bandmain{grid-template-columns:1fr 268px} }
@media (pointer:coarse){
  .osec-head,.tech-item-head{flex-wrap:wrap}
  .osec-head .nm,.tech-item-head .nm{min-width:100px}
  .osec-head .otools,.tech-item-head .otools{flex-basis:100%;justify-content:flex-end;opacity:1;gap:6px}
  .osec-head .ofold,.tech-item-head .ofold,.odhead .icb,.otools .icb{min-width:44px;min-height:44px}
  .otools [data-secdel],.otools [data-del],.otools [data-delslide]{margin-left:10px}
  .stage-song-title .btn,#scBody .btn,#pane-edit .btn{min-height:44px}
}
@media (max-width:1024px){
  #btnOrder{display:inline-flex}
  .topbar{height:auto;min-height:48px;flex-wrap:wrap;padding:6px 10px;row-gap:6px}
  .body{grid-template-columns:1fr!important}
  /* The body begins after the toolbar in normal flow, including wrapping,
     font changes and the safe area. Drawers are anchored HERE, not to a
     remembered toolbar height in viewport coordinates. */
  .topbar{position:relative;z-index:34}
  .rail{position:absolute;top:0;bottom:0;width:290px;max-width:100%;z-index:32;
        box-shadow:0 12px 44px rgba(0,0,0,.5)}
  #btnPanelClose{display:inline-flex;align-items:center;justify-content:center;
    flex:none;width:40px;min-height:40px;align-self:center}
  .tabs .tab{min-height:40px}
  .rail:not(.right){left:0;display:none}
  .rail.right{right:0;border-left:1px solid var(--line)}
  .body.showleft .rail:not(.right){display:flex}
  .body.nopanel .rail.right{display:none}
  /* Reserve the tablet panel's width so it cannot intercept preview or
     transport taps. The phone sheet below reserves transport vertically. */
  .body:not(.nopanel) .center{padding-right:290px}
  .scrim{display:block;position:absolute;left:0;right:0;bottom:0;top:0;
         background:rgba(6,8,11,.5);z-index:31}
  .previews{grid-template-columns:1fr}
  .pv.next{display:none}
}
@media (max-width:620px){
  /* The working panel is a sheet on phones. Transport keeps its own row
     below either drawer, so Next/Previous never point through to a field. */
  #opShell .body{--tech-transport:calc(64px + env(safe-area-inset-bottom,0px));
    padding-bottom:var(--tech-transport)}
  #opShell .body:not(.nopanel) .center{padding-right:0}
  #opShell .rail,#opShell .scrim{bottom:var(--tech-transport)}
  #opShell .rail.right{width:100%}
  #opShell .transport{position:absolute;left:0;right:0;bottom:0;z-index:33;
    height:var(--tech-transport);padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--panel)}
  #opShell .topbar{column-gap:6px}
  #opShell .topbar .wordmark,#opShell .tech-wide-label{display:none}
  #opShell .tech-phone-label{display:inline}
  #opShell .topbar .btn{min-height:36px;min-width:36px}
  #opShell .topbar .key{display:none}
  #opShell .tabs .tab,#btnPanelClose{min-height:44px}
  #opShell.on ~ .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  #opShell.on ~ .chatbub{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:900px){
  .bandlyrics{padding:18px 20px 96px}
  /* Smaller to start with on a small screen, but still a starting point the
     reader can move — this used to be a flat 21px, which quietly beat the size
     each person had chosen and made A+ and A− do nothing at all on an iPad. */
  .bsec .bline{font-size:calc(21px * var(--lyricScale,1))}
  .bandhead{flex-wrap:wrap;row-gap:6px;padding:10px 12px}
  .bandhead .stagectl{font-size:11.5px}
  .previewbar{padding:8px 10px;gap:8px}
  .pvtile .nextcard{padding:9px;min-height:0}
  .pvtile .nl{font-size:14px}
}
@media (max-width:720px){
  .roles{grid-template-columns:1fr}
  .gate-inner .wordmark b{font-size:22px}
  .transport .tbig{height:52px}
}
/* On a phone the home screen has to earn its height: the blurb and the notes
   shrink so the three doors are reachable without a scroll, and what is left
   over scrolls. */
@media (max-width:620px){
  #gate,#signin{padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right))
    calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left))}
  .gate-sub{margin-bottom:18px;font-size:13px;line-height:1.5}
  .gate-svc{margin-bottom:14px;padding:10px 12px;flex-wrap:wrap}
  .gate-svc select{max-width:none;width:100%}
  .role{padding:13px 13px 12px}
  .role h3{margin:7px 0 3px;font-size:15px}
  .role p{font-size:12px;line-height:1.45}
  .roles{gap:9px}
  .gate-note{margin-top:16px;padding-top:11px;font-size:11.5px}
}
/* ---------- sign in and who you are ---------- */
#authStartup{position:fixed;inset:0;z-index:1000;display:none;align-items:center;
  justify-content:center;padding:24px;background:var(--ground);overflow-y:auto}
#authStartup .gate-inner{max-width:380px}
#authStartupTitle{font-size:18px;margin:24px 0 10px;font-weight:500}
#authStartupMessage{color:var(--dim);line-height:1.6;margin:0 0 18px}
/* Keep the offscreen measuring host laid out while the app is covered. A
   display:none measurement has zero dimensions and falsely fits every word. */
html.authpending body>:not(#authStartup):not(#textMeasure):not(#lyricMeasure):not(#presentationMeasure){display:none!important}
html.authpending #authStartup{display:flex}
#signin{position:fixed;top:0;left:0;right:0;height:var(--appvh,100dvh);
  z-index:60;display:none;align-items:flex-start;justify-content:center;
  background:var(--ground);overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
body.needsignin #signin{display:flex}
body.needsignin #gate,body.needsignin #opShell,body.needsignin #bandView,
body.needsignin #displayView{display:none!important}
.gate-inner.narrow{max-width:380px}
#signinForm{margin-top:18px}
#signinForm .eyebrow{display:block;margin-bottom:6px}
#signinForm .btn{justify-content:center;height:42px;margin-top:4px}
.siwarn{padding:8px 11px;border-radius:6px;border-left:2px solid var(--live);
  background:var(--panel2);color:var(--dim);font-size:13px;line-height:1.45}
.whoami{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.whoami .mono{font-size:11px;color:var(--dimmer);letter-spacing:.06em;text-transform:uppercase;margin-right:auto}
.peoplerow{display:block;padding:9px 0;border-bottom:1px solid var(--line2)}
.peoplerow:last-child{border-bottom:0}
.peoplerow .nm{font-weight:600;font-size:14px}
.peoplerow .sub{font-family:var(--mono);font-size:10.5px;color:var(--dimmer);letter-spacing:.05em}
.peoplerow .code{font-family:var(--mono);font-size:12px;color:var(--brass);
  background:var(--panel2);border-radius:5px;padding:3px 8px;letter-spacing:.08em}
.peoplerow .spacer{flex:1}
/* The shelf is no longer one list: photographs and clips belong to a service,
   so it is this service's, then the shared ones, then the other services'
   folded away. The grid is per BLOCK now and the scroll is on the outside. */
.mlgrid{max-height:44vh;overflow-y:auto;padding:2px}
.mlrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
/* Which service a file belongs to, and the one tap that moves it. Deliberately
   quiet: it is a label first and a button second. */
.mlown{position:absolute;top:3px;left:3px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;
  background:rgba(6,8,11,.74);color:var(--dim);border:1px solid transparent;z-index:2}
.mlown:not(.locked):hover{color:var(--brass);border-color:var(--brass-soft)}
.mlown.locked{color:var(--dimmer)}
/* Somebody else's. Visible enough to find, dim enough not to be mistaken for
   one of yours. */
.mlitem.faraway{opacity:.66}
.mlitem.faraway:hover{opacity:1}
.mlitem{position:relative;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:var(--panel2);cursor:pointer;padding-bottom:26px}
.mlitem:hover{border-color:var(--brass)}
.mlitem img,.mlitem video,.mlitem .noposter{width:100%;height:76px;object-fit:cover;display:block;background:#000;pointer-events:none}
.mlitem .noposter{display:grid;place-items:center;color:var(--brass);font-size:19px}
.mlname{position:absolute;left:0;right:0;bottom:12px;padding:0 6px;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mlsize{position:absolute;left:6px;bottom:1px;font-family:var(--mono);font-size:9.5px;color:var(--dimmer)}
.mldel{position:absolute;top:3px;right:3px;background:rgba(6,8,11,.72);border-radius:4px}
.oslidewrap{position:relative;display:block}
.oslidewrap .solotools{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:flex;gap:2px;opacity:0;transition:opacity .12s;z-index:2}
.oslidewrap:hover .solotools,.solotools:focus-within{opacity:1}
.oslidewrap .slidedel{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  opacity:0;transition:opacity .12s;background:var(--panel3);border-radius:4px}
.oslidewrap:hover .slidedel,.slidedel:focus{opacity:1}
.gridcell{position:relative;display:block}
.gridcell .celldel{position:absolute;top:5px;right:5px;z-index:3;opacity:0;
  background:rgba(6,8,11,.78);border-radius:4px;transition:opacity .12s}
.gridcell .celledit{position:absolute;top:5px;right:33px;z-index:3;opacity:0;
  background:rgba(6,8,11,.78);border-radius:4px;transition:opacity .12s}
/* The pencil sits on top of a slide that might be any colour at all, so it
   carries its own dark disc and a ring — at 0.55 opacity it was legible over
   a black background and invisible over a photograph. */
.gridcell .celledit,.gridcell .celldel{width:26px;height:26px;font-size:14px;line-height:22px;
  background:rgba(6,8,11,.72);border:1px solid rgba(255,255,255,.30);
  box-shadow:0 1px 6px rgba(0,0,0,.5);color:#F2F4F7;opacity:.72}
.gridcell .celledit{color:var(--brass);border-color:rgba(201,162,39,.55)}
.gridcell:hover .celldel,.celldel:focus,.gridcell:hover .celledit,.celledit:focus{opacity:1}
.gridcell .celledit:hover{background:var(--brass);color:#101216;border-color:var(--brass)}
.keysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:18px}
.keygroup .eyebrow{margin-bottom:8px}
.keyrow{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:13px;color:var(--dim);line-height:1.4}
.keyrow kbd{flex:0 0 auto;min-width:96px;font-family:var(--mono);font-size:11px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:3px 7px;white-space:nowrap}
/* Which part of the service you are dressing. Everything below the bar is
   read as "for this". */
.scopetabs{display:flex;gap:2px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:2px}
.scopetabs button{flex:1;padding:6px 4px;border-radius:6px;border:0;background:none;
  font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.01em}
.scopetabs button:hover{color:var(--ink)}
.scopetabs button.on{background:var(--panel);color:var(--brass);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.scopetabs button[disabled]{opacity:.38}
.scopebar{padding:11px 14px;border-bottom:1px solid var(--line2);background:var(--panel)}
.scopebar .eyebrow{margin-bottom:6px}
.scopebar .field{width:100%}
/* A control showing a value it inherited rather than one set here. */
.inh{position:relative}
.inh>.ovr{position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  margin:0;cursor:pointer}
.row.scoped{padding-left:20px;padding-right:62px;position:relative}
.row.scoped.inherited .field,.row.scoped.inherited input[type=range],
.row.scoped.inherited .seg,.row.scoped.inherited .psel{opacity:.42}
/* The tag lives in a gutter of its own rather than in the row's flex line.
   Sharing the line, it wrapped to two lines in a 340px panel and squeezed
   every label beside it into three or four — and when the labels were given a
   floor instead, the tag fell off the right edge. A reserved gutter is the
   only arrangement where both are always right. */
.row.scoped .fromtag{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dimmer);margin:0;white-space:nowrap}
.row.scoped.set .fromtag{color:var(--brass)}
/* The block shape: a heading over a full-width control. The tick sits in the
   same left gutter the rows use, and the tag rides the heading line. */
.scopeblock{position:relative;padding-left:20px}
.scopeblock.inherited .seg,.scopeblock.inherited .field,
.scopeblock.inherited input[type=range],.scopeblock.inherited .psel{opacity:.42}
.scopeblock>.eyebrow{display:flex;align-items:center;gap:6px}
.scopeblock .ovr{position:absolute;left:0;top:1px;width:14px;height:14px;margin:0;cursor:pointer}
.scopeblock .fromtag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dimmer);margin-left:auto}
.scopeblock.set .fromtag{color:var(--brass)}
/* In a 340px panel a 150px dropdown that refuses to shrink leaves a label four
   words wide and four lines tall. Let them give a little; they still open at
   full width. */
#pane-setup .row>.psel,#pane-setup .row>select.field,
#pane-setup .row>input[type=range]{min-width:0;flex:0 1 auto}
.prob{padding:7px 9px;margin-bottom:6px;border-left:2px solid var(--live);
  background:var(--panel2);border-radius:0 5px 5px 0;font-size:12.5px;line-height:1.45;
  color:var(--dim);word-break:break-word}
.prob .mono{display:block;font-family:var(--mono);font-size:10px;color:var(--dimmer);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px}
.role.suggested{border-color:var(--brass-soft)}
.role.suggested .num{color:var(--brass)}

/* Retry stays below shared/delete badges, on the thumbnail's black surface in
   either theme. The fixed still height keeps tile/name/selection geometry. */
.mlposter .mlfailed{box-sizing:border-box;padding:25px 3px 3px;display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:2px;
  font-size:11px;line-height:13px;color:#e8c98d;pointer-events:auto}
.mlposter .mlfailed [data-mlretry]{min-height:26px;padding:2px 6px;font-size:11px;
  line-height:16px;color:#fff;background:#292929;border:1px solid #aaa}
.mlposter .mlfailed [data-mlretry]:focus-visible{outline:2px solid #f3cc87;outline-offset:1px}
/* CN.1 / Blaugrana. Scoped to the Singer/Band preview; audience designs and
   the other role workspaces retain their own palettes and layout. */
#bandView.stage-workspace{
  --ground:#191a27;--panel:#191a27;--panel2:#242336;--panel3:#362d43;
  --ink:#fff0fa;--dim:#cdbbcc;--dimmer:#cdbbcc;--line:#695160;--line2:#493d50;
  --brass:#e5bc63;--brass-soft:#e5bc63;--live:#ff99a6;--freeze:#96bdff;
  --panel-t:#191a27ee;--panel2-t:#242336e8;--brass-t:#e5bc63;--stage-on-accent:#500f24;
  --stage-verse:#96bdff;--stage-chorus:#edc976;--stage-bridge:#cdb0fa;--stage-prechorus:#f0a7c7;--stage-other:#94d4ca;
  --stage-glass:#191a27e8;--stage-accent-soft:#452233;--dockw:220px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --proj:var(--ui);
  background:radial-gradient(ellipse at 3% 8%,#163f78,transparent 64%),radial-gradient(ellipse at 98% 96%,#591426,transparent 68%),#070e1d;
  color:var(--ink);font-family:var(--ui);padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  color-scheme:dark;
}
:root[data-ui="light"] #bandView.stage-workspace{
  --ground:#fffcf9;--panel:#fffcf9;--panel2:#f1ecf5;--panel3:#e6daeb;
  --ink:#302035;--dim:#695263;--dimmer:#695263;--line:#d4b6cc;--line2:#e3d3de;
  --brass:#9b173c;--brass-soft:#9b173c;--live:#b52e3f;--freeze:#2058a2;
  --panel-t:#fffcf9ee;--panel2-t:#f1ecf5e8;--brass-t:#9b173c;--stage-on-accent:#fff;
  --stage-verse:#2058a2;--stage-chorus:#806015;--stage-bridge:#7551a3;--stage-prechorus:#a13b66;--stage-other:#316a69;
  --stage-glass:#fffcf9e8;--stage-accent-soft:#f8e1e7;
  background:linear-gradient(125deg,#b6cef1 0%,#e7eef7 34%,#f3f4f2 62%,#f2e8c9 82%,#edcf83 100%);color-scheme:light;
}
.stage-workspace .bandhead{min-height:58px;padding:7px 16px;background:var(--stage-glass);gap:10px;box-shadow:inset 0 1px #ffffff15;transform:none}
.stage-workspace .bandhead .wordmark{order:0}
.stage-workspace .wordmark b{font-size:18px}
.stage-workspace .wordmark span{font:10px var(--ui);letter-spacing:.12em;color:var(--dim)}
.stage-workspace .bandhead #btnRoleBand{order:-1}
.stage-workspace #stageSvc{font:12px var(--ui);display:block;max-width:32vw}
.stage-workspace .bandhead #segLead,.stage-workspace #stagePanelTools,.stage-workspace .stagefulltools{display:none!important}
.stage-workspace .btn,.stage-workspace .icb{border-radius:8px;font-family:var(--ui)}
.stage-workspace .btn.sm{min-height:40px;padding:7px 11px;font-size:12px}
.stage-workspace .btn.ghost{background:transparent}
.stage-workspace .btn:hover{background:var(--panel2)}
.stage-workspace .btn.on,.stage-workspace .btn[aria-pressed="true"]{background:var(--stage-accent-soft);border-color:var(--brass)}
.stage-workspace .btn:focus-visible,.stage-workspace select:focus-visible,.stage-workspace .bchunk:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.stage-workspace .stagebody{position:relative;min-height:0}
.stage-workspace .stagemain{display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden}
#stageWorkspaceTools[hidden],#stageParts[hidden],#stageCueStatus[hidden],#stageReadingOptions[hidden]{display:none!important}
#stageWorkspaceTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none;padding:7px 12px;background:var(--stage-glass);border-bottom:1px solid var(--line2);z-index:4}
#stageWorkspacePanels{display:flex;flex:none}
.stage-workspace #bandControlRow{order:2;white-space:nowrap;font-size:12px!important;min-height:40px}
.stage-workspace #bandControl{width:18px;height:18px;accent-color:var(--brass)}
.stage-workspace #btnBandLive{order:4}
.stage-workspace #btnStageReadingOptions{order:5}
.stage-workspace #btnBandFull,.stage-workspace #btnBandExit{order:6}
.stage-workspace #stageModeBar{order:7;width:40px;height:40px;margin-left:0}
.stage-workspace #stageWorkspaceTools>.spacer{order:3;flex:1}
.stage-lead-picker{order:1;min-width:0;width:155px;flex:none;display:flex;flex-direction:column;gap:3px}
.stage-lead-picker .stage-status-copy{width:155px;height:26px;font-size:10px;line-height:13px;color:var(--dim)}
.stage-lead-picker .syncstate{font:inherit;text-align:left;padding:0;border:0;min-height:0;background:none;color:var(--brass)}
.stage-lead-picker select{max-width:155px;min-height:40px;border-radius:8px;border:1px solid var(--line);padding:7px 26px 7px 10px;background:var(--panel2);font:12px var(--ui)}
.stage-workspace #btnStageModeHelp{color:var(--stage-chorus)}
.stage-workspace .bandexit{position:static!important;display:inline-flex;align-items:center;justify-content:center;transform:none;margin:0;font-size:12px}
.stage-workspace .bandexit[hidden],.stage-workspace #btnBandFull[hidden]{display:none!important}
.stage-workspace #stageReadingOptions{position:absolute;top:56px;right:12px;z-index:12;width:340px;max-width:calc(100% - 24px);max-height:calc(100% - 64px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 14px 48px #0004}
.stage-reading-option-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#stageReadingSize{color:var(--dim);margin-left:4px}
#stageReadingActions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.stage-workspace #stageReadingActions .btn{display:inline-flex}
.stage-workspace #stageReadingActions #btnStageBeat[hidden]{display:none}
.stage-workspace #stageReadingActions #btnStagePreview::after{content:" Preview"}
.stage-workspace #stageReadingActions #btnUIBand::after{content:" Appearance"}
.stage-workspace #stageChartOptions .chartbar{border:0;padding:8px 0;flex-wrap:wrap}
.stage-workspace #stageSizeControls .seg{display:flex}
#stageParts{display:flex;gap:6px;flex:none;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 12px;border-bottom:1px solid var(--line2);background:var(--panel);scrollbar-width:thin}
#stageParts:empty{display:none}
#stageParts .workspace-part{flex:none;white-space:nowrap;background:var(--panel2);border:1px solid transparent;color:var(--part-color);min-height:38px}
#stageParts .workspace-part.on{border-color:var(--brass);background:var(--stage-accent-soft)}
#stageParts .workspace-part.queued{border-style:dashed;border-color:var(--brass)}
.workspace-part-live{display:inline-block;width:6px;height:6px;vertical-align:middle;border-radius:50%;background:var(--live);visibility:hidden;margin-right:5px}
.on-screen .workspace-part-live{visibility:visible}
#stageCueStatus{flex:none;max-height:30%;overflow:auto;background:var(--panel)}
#stageCueStatus:empty{display:none}
#stageCueStatus .cuestrip{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:8px 12px}
.stage-workspace .previewbar{padding:8px 12px;background:var(--panel);border-color:var(--line2)}
.stage-workspace .previewbar .nextcard{min-height:44px;max-height:70px;background:var(--panel2);border-color:var(--line2);padding:8px 10px}
.stage-workspace .previewbar .eyebrow{font:10px var(--ui);letter-spacing:.1em}
.stage-workspace .previewbar .nl{font-size:13px;-webkit-line-clamp:2}
.stage-workspace .bandlyrics{flex:1;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;padding:24px 30px 24px;background:var(--panel);scroll-behavior:auto}
.workspace-cue{margin-bottom:38px}
.stage-workspace .stage-song-title{gap:12px;align-items:center;margin:0 0 6px}
.stage-workspace .stage-song-title h2{font:500 32px/1.2 ui-serif,Georgia,serif;letter-spacing:-.02em}
.stage-workspace .workspace-cue>.eyebrow{font:10px var(--ui);letter-spacing:.1em;color:var(--dim);margin-bottom:14px!important}
.stage-workspace .stage-song-key{font:12px var(--ui);color:var(--dim)}
.stage-workspace .bsec,.stage-workspace .workspace-part{--part-color:var(--stage-other)}
.stage-workspace .p-verse{--part-color:var(--stage-verse)}
.stage-workspace .p-chorus{--part-color:var(--stage-chorus)}
.stage-workspace .p-bridge{--part-color:var(--stage-bridge)}
.stage-workspace .p-prechorus,.stage-workspace .p-pre-chorus{--part-color:var(--stage-prechorus)}
.stage-workspace .bsec{margin-bottom:14px;padding-left:16px;border-left:2px solid var(--line);transition:none}
.stage-workspace .bsec.on{border-left-color:var(--brass)}
.stage-workspace .bsec .blbl{font:600 11px var(--ui);letter-spacing:.07em;margin-bottom:5px;color:var(--part-color)}
.stage-workspace .bsec .bline,.stage-workspace .bsec .cline{font-weight:500;color:var(--part-color)}
.stage-workspace .bsec .bchunk{padding:2px 8px;margin-left:-8px;border-radius:4px;min-height:44px}
.stage-workspace .bsec .bchunk.live{background:transparent;box-shadow:none}
.stage-workspace .bsec .bchunk:hover{background:var(--panel2)}
.stage-workspace .bsec .chd{color:var(--ink)}
.stage-workspace .stage-onair{left:-14px;box-shadow:0 0 0 3px var(--panel)}
.stage-workspace .orderdrawer{left:0;right:auto;transform:translateX(-100%);background:var(--stage-glass);border-left:0;border-right:1px solid var(--line);padding:0;width:270px}
.stage-workspace .orderdrawer.on{transform:none}
#bandView.stage-workspace.docked{--dockw:220px}
#bandView.stage-workspace.docked .orderdrawer{order:-1;transform:none;border-left:0;border-right:1px solid var(--line);width:var(--dockw)}
.stage-workspace .odhead{padding:8px;flex-wrap:wrap;gap:3px}
.stage-workspace .odhead .eyebrow{width:100%;font:10px var(--ui);letter-spacing:.1em;padding:8px 4px}
.stage-workspace .odhead>.spacer{display:none}
.stage-workspace .odhead .icb{width:40px;min-height:40px;flex:none}
.stage-workspace .odbody{padding:10px}
.stage-workspace .osec{border:0;background:none;margin:0 0 18px}
.stage-workspace .osec-head{padding:0;border-bottom:1px solid var(--line);background:none;margin-bottom:8px;min-height:44px}
.stage-workspace .osec-head .nm{font:600 11px var(--ui);letter-spacing:.03em;white-space:normal}
.stage-workspace .osec-head .ofold{min-height:44px;width:44px;flex:0 0 44px}
.stage-workspace .oitem{border:0;background:none;margin:3px 0}
.stage-workspace .oitem-head{padding:0;min-height:44px;background:none;border:0}
.stage-workspace .oitem-head .nm{min-height:44px;white-space:normal;overflow-wrap:anywhere;font:500 14px/1.4 var(--ui);padding:10px;color:var(--ink);text-align:left;width:100%}
.stage-workspace .workspace-here .oitem-head{background:var(--panel);box-shadow:inset 3px 0 0 var(--brass);border-radius:8px}
.stage-workspace .odadd{padding:10px;gap:8px;font-size:11px}
.stage-workspace .odadd .targetpick{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--ui)}
.stage-workspace .addplus{width:44px;height:44px;border-radius:10px;background:var(--brass);color:var(--stage-on-accent)}
.stage-workspace .addplus svg{width:26px;height:26px}
#bandView.stage-workspace .bandnav{position:static;flex:none;padding:8px 12px;background:var(--stage-glass);border-top:1px solid var(--line2);border-top-color:var(--brass);backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-end}
.stage-workspace #bandPrev{flex:0 0 90px}
.stage-workspace #bandNextBtn{flex:0 1 240px;color:var(--stage-on-accent)}
.stage-workspace .bandnav .btn{min-height:44px}
#bandView.stage-workspace.full{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
#bandView.stage-workspace.full .bandhead{display:none}
#bandView.stage-workspace.full .orderdrawer{top:0;padding-top:0}
@media(max-width:900px){
  #bandView.stage-workspace.docked{--dockw:200px}
  .stage-workspace .bandlyrics{padding:18px 22px 20px}
  .stage-workspace .stage-song-title h2{font-size:29px}
  #stageWorkspaceTools{gap:5px;padding:6px 8px}
  .stage-workspace #stageModeBar{width:40px}
}
@media(max-width:660px){
  .stage-workspace .bandhead{padding:7px 10px;min-height:50px}
  .stage-workspace #stageSvc{max-width:25vw;font-size:11px}
  .stage-workspace #bandLamp{margin-left:auto}
  #stageWorkspaceTools>.spacer{display:none}
  .stage-workspace #bandControlRow{font-size:11px!important}
  .stage-workspace #stageModeBar{width:40px}
  .stage-workspace #stageReadingOptions{top:100px;max-height:calc(100% - 105px)}
  .stage-workspace .bandlyrics{padding:18px 20px}
  .stage-workspace .stage-song-title h2{font-size:27px}
  .stage-workspace .bandnav #bandNextBtn{flex:1}
  .stage-workspace .orderdrawer{padding-top:0}
}

#bandView.stage-workspace:not(.docked) .orderdrawer{top:var(--workspace-tools-height,72px)}
.stage-workspace .drawerscrim{top:var(--workspace-scrim-top,130px)}
.stage-workspace #stageReadingOptions{top:var(--workspace-tools-height,72px);max-height:calc(100% - var(--workspace-tools-height,72px) - 8px)}
.stage-workspace .osec-head .nm{color:var(--dim);text-transform:none}
.stage-workspace .workspace-here .oitem-head .nm{border-left:3px solid var(--brass);border-radius:8px;background:var(--panel)}
.stage-workspace:has(.stage-modebar.sharing) .stage-lead-picker #stageModeHint{visibility:hidden}

.workspace-slide-preview{position:relative;aspect-ratio:16/9;width:100%;max-width:480px;overflow:hidden;background:#080a0d;border-radius:8px;margin:8px 0;color:#fff;pointer-events:none}
.workspace-slide-preview .vidslide{position:absolute;inset:0}
.workspace-slide-preview .vidslide img{width:100%;height:100%;object-fit:contain}

/* Neither transient save text nor theme/sidebar changes move stage controls. */
.stage-workspace .stage-lead-picker .syncstate{min-height:0!important;height:26px;padding:0!important;font:10px/13px var(--ui);max-width:155px;overflow:hidden;white-space:normal;align-self:stretch;text-align:left}
.stage-workspace .orderdrawer,.stage-workspace .btn{transition:none}

/* CN.2: a complete stage shell. All new presentation stays inside the preview. */
#stageWorkspaceHeader[hidden],#stagePerformanceRow[hidden],#workspaceDock[hidden],#workspaceQueuePreview[hidden],#stageSignalsTray[hidden]{display:none!important}
.stage-workspace .bandhead,.stage-workspace #stageAdd,.stage-workspace #bandNav{display:none!important}
#stageWorkspaceHeader{display:flex;align-items:center;gap:8px;flex:none;min-height:60px;padding:8px 18px;background:var(--stage-glass);border-bottom:1px solid var(--line);z-index:6}
#stageWorkspaceHeader .spacer{flex:1}
.workspace-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.workspace-brand b{font-size:20px;letter-spacing:-.045em}.workspace-brand span{font-size:10px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
#stageWorkspaceHeader .btn{border-color:transparent;background:none;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;padding:7px}
#stageWorkspaceHeader .addplus{background:var(--brass);color:var(--stage-on-accent);border:0}
#stageWorkspaceHeader #btnUIBand{border-color:var(--line)}
#stageWorkspaceHeader #btnStageModeHelp{color:var(--stage-chorus);width:32px;padding:0}
#stageWorkspaceHeader #btnRoleBand{border:0;width:34px}
#stageWorkspaceTools{display:block;position:relative;min-height:57px;padding:0;z-index:5;overflow:visible;background:var(--stage-glass)}
#stageControlsRow{height:57px;display:flex;align-items:center;gap:8px;padding:6px 16px;white-space:nowrap;overflow:hidden}
#stageControlsRow>.spacer{order:3;flex:1}
#stageControlsRow .btn{background:none;border-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:600;padding:6px 9px}
#stageControlsRow .stage-lead-picker{order:1;width:132px;flex:0 0 132px}
#stageControlsRow .stage-lead-picker select{width:132px;min-height:40px;color:var(--ink);background:var(--panel2);font-size:11px}
#stageControlsRow #bandControlRow{order:2;font-size:11px!important;gap:5px!important}
#stageControlsRow #bandControlRow{font-size:0!important}
#stageControlsRow #bandControlRow::after{content:'Projector';font-size:11px}
#stageControlsRow #btnBandLive{order:4}#stageControlsRow #btnStageReadingOptions{order:5}#stageControlsRow #btnBandFull,#stageControlsRow #btnBandExit{order:6;min-width:36px}
#stageSignalsTray{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:6px 14px;overflow-x:auto;background:var(--panel);z-index:2}
#stageSignalsTray .btn{flex:none;white-space:nowrap}.workspace-tempo{white-space:nowrap;font-size:11px}
.signals-open #stageControlsRow{visibility:hidden}
#stagePerformanceRow{display:flex;align-items:stretch;flex:none;min-width:0;background:var(--panel);border-bottom:1px solid var(--line);height:53px}
#stageInteractionMode{display:flex;gap:3px;padding:7px 8px;flex:none;border-right:1px solid var(--line)}
#stageInteractionMode .btn,#btnWorkspaceSignals{border-color:transparent;font-size:11px;white-space:nowrap;padding:5px 7px;min-height:36px}
#stageInteractionMode .btn[aria-pressed=true]{border-color:var(--brass);color:var(--ink)}
#stageParts{flex:1;min-width:0;align-items:center;border:0;padding:6px 8px;gap:5px;scrollbar-width:none}
#stageParts .workspace-part{padding:5px 9px;min-height:35px;font-size:11px;border-radius:6px}
#btnWorkspaceSignals{flex:none;margin:5px 6px 5px 0;background:transparent}
#stageCueStatus{display:flex;align-items:center;gap:10px;flex:none;height:32px;min-height:32px;padding:4px 16px;overflow:hidden;background:#e5bc631a;color:var(--ink);border-bottom:1px solid var(--line2);font-size:12px}
#stageCueStatus[hidden]{display:none!important}#stageCueStatus strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#stageCueStatus .tag{text-transform:uppercase;letter-spacing:.15em;font-size:10px}#stageCueStatus .who{margin-left:auto;white-space:nowrap;font-size:11px}
.part-cue-flash{animation:part-cue-attention 900ms ease-out 1}
@keyframes part-cue-attention{0%,18%{background:#ffcf52;color:#302035}100%{background:#e5bc631a;color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.part-cue-flash{animation:none!important}}
.stage-workspace .bandlyrics{padding:20px 28px 140px}
.stage-workspace .bsec{margin-bottom:24px}
.stage-workspace .bline{line-height:1.55;font-weight:450}
.stage-workspace .stage-song-title{margin-bottom:12px}.stage-workspace .stage-song-title h2{font-size:31px}
.stage-workspace .stage-song-title [data-stage-edit]{border-color:transparent;white-space:nowrap;font-weight:600}
#workspaceQueuePreview{position:absolute;z-index:3;background:var(--panel);overflow:auto;border-top:2px solid var(--brass);padding:10px 0 8px;box-shadow:0 -12px 24px var(--panel);overscroll-behavior:contain}
.workspace-preview-heading{font-size:11px;letter-spacing:.07em;color:var(--brass);display:flex;gap:8px;margin-bottom:10px}.workspace-preview-heading small{margin-left:auto;color:var(--dim)}
#workspaceQueuePreview .bsec{margin:0}#workspaceQueuePreview .bchunk{cursor:pointer}
#workspaceDock{position:absolute;bottom:calc(var(--safe-bottom) + 10px);right:calc(var(--safe-right) + 14px);z-index:7;width:246px;display:flex;flex-direction:column;gap:4px;padding:7px;border:1px solid var(--line);border-radius:15px;background:var(--stage-glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 5px 22px #0002}
#workspaceDock>div{display:grid;grid-template-columns:72px 1fr;gap:5px}#workspaceDock #workspaceStepRow{grid-template-columns:1fr 1fr}
#workspaceDock .btn{min-height:40px;border-color:transparent;background:none;font-size:12px;font-weight:600;padding:6px 10px}
#workspaceDock #workspaceGo{min-height:47px;background:var(--brass);color:var(--stage-on-accent);font-size:19px}
#workspaceDock #bandNextBtn{color:var(--ink)}#workspaceDock .btn:disabled{opacity:.4}
.stage-workspace #chatBub{bottom:calc(var(--safe-bottom) + 130px)!important;width:48px;height:48px;right:calc(var(--safe-right) + 18px);background:var(--brass);color:var(--stage-on-accent)}
.stage-workspace #stageReadingOptions{top:var(--workspace-tools-height,57px);z-index:20}
.stage-workspace #stageReadingActions #stageModeBar{width:100%;height:auto;display:flex;order:0}
.stage-workspace #stageModeHint{font-size:11px;line-height:16px}.stage-workspace .stage-status-copy{min-height:32px;width:100%}
.stage-workspace #stageReadingActions{gap:6px}
.workspace-auto{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin:12px 0;padding:12px 0}.workspace-auto small{color:var(--dim);font-size:11px}
.workspace-auto select{color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px}
.workspace-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#workspaceSearchResults{display:grid;gap:8px;margin-top:12px}
#bandView.stage-workspace.docked{--dockw:190px}.stage-workspace .odhead{padding:14px 10px}.stage-workspace .odhead .eyebrow{font-size:10px;margin-right:auto;width:calc(100% - 44px)}
.stage-workspace .odhead>.icb{width:34px;min-height:34px}
.stage-workspace .odbody{padding:8px 12px}.stage-workspace .osec-head .ct{display:none}
.stage-workspace .oitem-head .nm{font-size:14px;font-weight:450;padding:10px 4px;color:var(--ink)}
.stage-workspace .oitem-head{gap:0}.stage-workspace .oitem-head .otools{display:flex;position:static;opacity:1;flex:none}.stage-workspace .oitem-head .otools .icb{width:28px;min-height:40px;padding:0}
.stage-workspace .workspace-drag{border:0;background:none;color:var(--dim);width:20px;flex:0 0 20px;padding:0;min-height:44px;cursor:grab;touch-action:none}
.stage-workspace .workspace-here .oitem-head .nm{border:0;background:none}.stage-workspace .workspace-here .oitem-head{box-shadow:inset 3px 0 0 var(--brass)}
.stage-workspace .oitem-head .nm:hover{background:var(--panel2)}
#bandView.stage-workspace:not(.docked) .orderdrawer{top:0}
#bandView.stage-workspace.full #stageWorkspaceHeader{display:none}
#bandView.stage-workspace.full #stageControlsRow #btnStageOrder{flex:none}
#bandView.stage-workspace.full #stageControlsRow #btnStageOrder span{display:none}
#addMenu.stage-add-menu{background:transparent;pointer-events:none}
#addMenu.stage-add-menu button{position:relative;left:var(--add-left)!important;top:var(--add-top)!important;display:flex;width:210px!important;transform:none!important;opacity:1;pointer-events:auto;margin:6px 0;background:var(--panel2)}
@media(max-width:900px){#stageWorkspaceHeader{padding:7px 12px;gap:5px}.workspace-brand{gap:8px}.workspace-brand b{font-size:18px}#stageWorkspaceHeader .btn{font-size:11px;padding:6px}#stageControlsRow{gap:4px;padding:6px 10px}.stage-workspace .bandlyrics{padding:20px 28px 140px}#stageControlsRow .stage-lead-picker{width:126px;flex-basis:126px}#stageControlsRow .stage-lead-picker select{width:126px}#workspaceDock{width:226px;right:9px}}
@media(max-width:660px){#stageWorkspaceHeader{min-height:52px;gap:4px;padding:5px 8px}.workspace-brand{display:none}#btnStageOrder span,#btnWorkspaceSearch span{display:none}#stageWorkspaceHeader .btn{font-size:12px;min-height:40px}#stageWorkspaceHeader #btnWorkspaceTools{padding:5px 10px}.stage-workspace .addplus{width:40px;height:40px}#stageControlsRow{padding:5px 6px;gap:1px}#stageControlsRow .stage-lead-picker{width:114px;flex-basis:114px}#stageControlsRow .stage-lead-picker select{width:114px;padding-left:6px;font-size:10px}#stageControlsRow #bandControlRow::after{font-size:10px}#stageControlsRow .btn{font-size:10px;padding:5px}#stageControlsRow #bandControl{width:16px;height:16px}#stageInteractionMode{padding:7px 4px;gap:0}#stageInteractionMode .btn{font-size:10px;padding:5px}#stageParts{padding:6px 4px}#btnWorkspaceSignals{font-size:10px;padding:5px 4px;margin-right:2px}.stage-workspace .bandlyrics{padding:18px 20px 145px}.stage-workspace .stage-song-title h2{font-size:27px}.stage-workspace .stage-song-title{flex-wrap:wrap}.stage-workspace .stage-song-key{margin-right:auto}#workspaceDock{width:218px}#stageCueStatus{padding:4px 8px}#stageCueStatus .who{max-width:90px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:360px){#stageControlsRow .stage-lead-picker{width:106px;flex-basis:106px}#stageControlsRow .stage-lead-picker select{width:106px;padding-right:14px}#stageControlsRow #bandControlRow::after{content:''}#stageControlsRow #bandControlRow{gap:0!important}#stageControlsRow .btn{padding:5px 4px}}
#stageHomeSlot #btnRoleBand svg{width:25px;height:25px}
#stageControlsRow .stage-lead-picker select{padding-right:15px}

#workspaceSyncStatus{position:fixed;bottom:calc(var(--safe-bottom) + 14px);left:calc(var(--safe-left) + 12px);max-width:calc(100vw - 260px);white-space:normal!important;z-index:47;background:linear-gradient(var(--panel2),var(--panel2)),var(--workspace-background)!important;border:1px solid var(--line)!important;font-size:10px!important;color:var(--brass);padding:6px!important}#workspaceSyncStatus[hidden]{display:none!important}

/* The compact full-screen order button stays above its overlay drawer. */
#bandView.stage-workspace.full:not(.docked) .orderdrawer{top:var(--workspace-tools-height,57px)}

/* CP12 private queue: existing dialog and a compact, distinctly named read action. */
#btnSingerQueue{flex:none;white-space:nowrap;margin:0 4px}
#workspaceDock #singerQueueNextRow{display:block;border-bottom:1px solid var(--line);padding-bottom:4px}
#workspaceDock #singerQueueReadNext{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brass);text-align:left}
#bandView.stage-workspace.has-personal-queue .bandlyrics{padding-bottom:195px}
.singer-queue-add{display:flex;gap:8px;margin:8px 0 16px;min-width:0}
.singer-queue-add select{min-width:0;flex:1}.singer-queue-add .custom-select{min-width:0;flex:1}
.singer-queue-list{padding-left:24px;margin:0}
.singer-queue-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.singer-queue-list li>div{overflow-wrap:anywhere}.singer-queue-list small{display:block;color:var(--dim);margin-top:4px}
.singer-queue-list li>span{display:flex;gap:6px;margin-top:6px}#modal .singer-queue-list .btn{min-width:44px;min-height:44px}
@media(max-width:660px){#btnSingerQueue{font-size:10px;padding:5px;margin:0 2px}}

/* The floating order keeps the workspace gradient without lyrics bleeding through. */
#bandView.stage-workspace:not(.docked) .orderdrawer{background:linear-gradient(var(--order-overlay),var(--order-overlay)),var(--workspace-background);background-attachment:fixed;overscroll-behavior:contain;--order-overlay:#191a27dd}
:root[data-ui="light"] #bandView.stage-workspace:not(.docked) .orderdrawer{--order-overlay:#fffcf9dd}

.stage-workspace #btnStageReadingOptions,#stageControlsRow #btnBandFull,#stageControlsRow #btnBandExit{min-width:44px;min-height:44px}
.stage-workspace #stageReadingActions #btnStageAdd{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:72px;height:44px;padding:0 10px;font:inherit}
.stage-workspace #stageReadingActions #btnStageAdd svg{width:20px;height:20px}
.stage-workspace #stageReadingActions #btnStageAdd::after{content:"Add"}
.stage-workspace #stageReadingActions #btnWorkspaceSearch span{display:inline}

/* Floating order leaves the left-aligned reader visible; docking retains its left column. */
#bandView.stage-workspace:not(.docked) .orderdrawer{left:auto;right:0;transform:translateX(100%);border-right:0;border-left:1px solid var(--line)}
#bandView.stage-workspace:not(.docked) .orderdrawer.on{transform:none}
/* Shared Blaugrana shells. Audience slide typography is intentionally scoped out. */
.workspace-theme{
 --ground:#191a27;--panel:#191a27;--panel2:#242336;--panel3:#362d43;--ink:#fff0fa;--dim:#cdbbcc;--dimmer:#cdbbcc;
 --line:#695160;--line2:#493d50;--brass:#e5bc63;--brass-soft:#e5bc63;--live:#ff99a6;--freeze:#96bdff;
 --panel-t:#191a27ee;--panel2-t:#242336e8;--brass-t:#e5bc63;--stage-on-accent:#500f24;
 --stage-verse:#96bdff;--stage-chorus:#edc976;--stage-bridge:#cdb0fa;--stage-prechorus:#f0a7c7;--stage-other:#94d4ca;
 --stage-glass:#191a27ed;--stage-accent-soft:#452233;--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 color:var(--ink);font-family:var(--ui);color-scheme:dark;
}
:root[data-ui="light"] .workspace-theme{
 --ground:#fffcf9;--panel:#fffcf9;--panel2:#f1ecf5;--panel3:#e6daeb;--ink:#302035;--dim:#695263;--dimmer:#695263;
 --line:#d4b6cc;--line2:#e3d3de;--brass:#9b173c;--brass-soft:#9b173c;--live:#b52e3f;--freeze:#2058a2;
 --panel-t:#fffcf9ee;--panel2-t:#f1ecf5e8;--brass-t:#9b173c;--stage-on-accent:#fff;
 --stage-verse:#2058a2;--stage-chorus:#806015;--stage-bridge:#7551a3;--stage-prechorus:#a13b66;--stage-other:#316a69;
 --stage-glass:#fffcf9ed;--stage-accent-soft:#f8e1e7;color-scheme:light;
}
.workspace-theme .btn{font-family:var(--ui);border-radius:8px;min-height:40px;padding:8px 12px;font-size:12px;gap:6px;white-space:nowrap}
.workspace-theme .btn.sm{min-height:34px;padding:6px 9px}
.workspace-theme .btn.ghost{background:transparent}
.workspace-theme .btn.accent,.workspace-theme .tech-mode [aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--stage-on-accent)}
.workspace-theme .btn:focus-visible,.workspace-theme button:focus-visible,.workspace-theme select:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.workspace-theme select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;min-height:38px;color:var(--ink);padding:6px 26px 6px 10px;font:12px var(--ui);max-width:100%}
.workspace-theme h1,.workspace-theme h2{font-family:Georgia,'Times New Roman',serif;font-weight:500}
.workspace-theme .eyebrow{font:10px var(--ui);letter-spacing:.12em;line-height:1.4}
.workspace-theme .hint{font:12px/1.6 var(--ui);color:var(--dim);margin:8px 0}
.workspace-theme .spacer{flex:1;min-width:0}
#modal.workspace-sheet{padding:0;align-items:stretch;justify-content:flex-end;background:#03051188;backdrop-filter:blur(2px)}
#modal.workspace-sheet .sheet{width:min(400px,100%);max-width:100%;height:100%;max-height:100%;border-radius:0;border-width:0 0 0 1px;background:var(--panel);box-shadow:-12px 0 48px #0002;padding:0;display:flex;flex-direction:column}
#modal.workspace-sheet .sheet-head{padding:20px 24px;padding-top:max(20px,var(--safe-top));min-height:68px;border-bottom:1px solid var(--line2);flex:none}
#modal.workspace-sheet #modalTitle{font:600 18px var(--ui);margin:0}
#modal.workspace-sheet #modalX{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;flex:none}
#modal.workspace-sheet #modalBody{padding:20px 24px;padding-bottom:max(20px,var(--safe-bottom));flex:1;min-height:0;overflow:auto}
#modal.workspace-sheet #modalFoot:empty{display:none}
#modal.workspace-sheet.workspace-wide .sheet{width:min(660px,100%)}
.workspace-menu-group{padding:10px 0 22px;border-bottom:1px solid var(--line2);margin-bottom:18px}
.workspace-menu-group h3{font:600 10px var(--ui);text-transform:uppercase;letter-spacing:.1em;margin:4px 0 14px;color:var(--dim)}
.workspace-menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:7px;background:transparent;color:var(--ink);font:13px var(--ui);text-align:left;min-height:44px;padding:12px 10px;cursor:pointer}
.workspace-menu-row:hover{background:var(--panel2)}
.workspace-menu-row:disabled{opacity:.4;cursor:default}
.workspace-menu-row>span:last-child:not(:first-child){color:var(--dim);font-size:11px}
.workspace-add-target{display:grid;gap:10px;color:var(--dim);font-size:12px;margin:8px 0 20px}
.workspace-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.workspace-add-grid .btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;min-height:110px;padding:18px;color:var(--ink);background:var(--panel2);border:1px solid var(--line2)}
.workspace-add-grid .btn svg{color:var(--brass)}
.workspace-add-grid strong{font-size:13px;font-weight:600}
.workspace-add-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--line2)}
.workspace-choice{display:flex;flex-direction:column;gap:8px}
.workspace-choice label{min-height:44px;display:flex;align-items:center;gap:12px;font-size:13px;padding:8px 0}
.workspace-choice input{width:18px;height:18px;accent-color:var(--brass);flex:none}
.workspace-context{position:fixed;z-index:220;width:260px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 45px #0006}
.workspace-context .workspace-menu-row{min-height:40px;padding:8px;border:0;border-radius:6px}
.workspace-context .workspace-menu-row:hover{background:var(--panel3)}
.workspace-context>.eyebrow{padding:6px 8px 10px}.workspace-context .workspace-add-target{padding:8px;margin:0;border-top:1px solid var(--line2)}
#modal.workspace-native #modalBody{padding:0;overflow:hidden;display:flex}
#techNativePanel{height:100%;width:100%;min-height:0;display:flex}
#techNativePanel #techPanel,#techNativePanel #techOrder{position:static!important;display:flex!important;transform:none!important;width:100%!important;height:100%;min-width:0;max-width:none;border:0;visibility:visible!important;box-shadow:none}
#techNativePanel #techOrder .addrow{display:flex;flex-wrap:nowrap;gap:12px;padding:12px 18px}
#techNativePanel #techOrder .addrow>div:first-child{flex:1 1 0!important;min-width:0}
#techNativePanel #techOrder .addwrap{flex:0 0 auto;padding:0}
#techNativePanel #techOrder .targetpick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#techNativePanel #techOrder .addplus{width:44px;height:44px;border-radius:12px;background:var(--brass);color:var(--stage-on-accent);box-shadow:none;margin:0;z-index:auto;transform:none}
#techNativePanel #techOrder .addplus svg{width:23px;height:23px}
#techNativePanel .pane{flex:1;min-height:0;overflow:auto;padding:18px}
#techNativePanel .rail-scroll{flex:1;min-height:0}
#techWorkspace[hidden]{display:none!important}
#opShell.tech-workspace{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:#191a27}
#opShell.tech-workspace>.topbar,#opShell.tech-workspace>.body{display:none}
/* CP.8.3 (U11): the Tech chrome panels (header, Running Order, monitors, footer when undocked,
   Build outline) are a light glass over the page gradient (`--workspace-background`, fixed to
   the viewport by the CO.3.8 polish), so the gradient reads through with slight shading. */
#techWorkspace{--stage-glass:#191a2766}
:root[data-ui="light"] #techWorkspace{--stage-glass:#fffcf999}
#techWorkspace{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 4% 8%,#24285c,transparent 62%),radial-gradient(ellipse at 98% 96%,#501022,transparent 70%),#110e1d}
:root[data-ui="light"] #techWorkspace{background:linear-gradient(125deg,#cbdcf4,#f5f3f5 60%,#f2e5bd)}
#techWorkspaceHeader{display:flex;gap:12px;align-items:center;flex:none;min-height:66px;padding:10px 24px;background:var(--stage-glass);border-bottom:1px solid var(--line2);overflow-x:auto}
#techWorkspaceHeader{position:relative;z-index:6}
#techProjectorActivity{min-width:0;max-width:300px;font-size:11px;color:var(--ink);flex:0 1 300px}
#techProjectorActivity summary{cursor:pointer;min-height:40px;height:40px;display:flex;flex-direction:column;justify-content:center;line-height:1.4;padding:4px 22px 4px 8px;position:relative;list-style:none;border-radius:8px}
#techProjectorActivity summary:after{content:'';position:absolute;right:8px;top:40%;width:6px;height:6px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg)}
#techProjectorActivity[open] summary:after{transform:rotate(225deg)}
#techProjectorActivity summary:hover,#techProjectorActivity[open] summary{background:var(--stage-accent-soft)}
#techProjectorActivity summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#techProjectorActivity.unavailable{color:var(--dim)}
#techProjectorActivity [data-projector-names]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--dim)}
#techProjectorActivity [data-projector-label]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#techProjectorActivity [data-projector-compact]{display:none}
#techProjectorActivity [data-projector-list]{position:fixed;top:68px;left:24px;max-width:min(440px,calc(100vw - 32px));max-height:60vh;overflow:auto;white-space:pre-line;padding:16px;background:var(--ground);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0003;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:760px){#techProjectorActivity [data-projector-names],#techProjectorActivity [data-projector-label]{display:none}#techProjectorActivity{flex:0 0 46px;width:46px;font-size:12px}#techProjectorActivity[hidden]{display:block!important;visibility:hidden;pointer-events:none}#techProjectorActivity summary{padding:6px 16px 6px 4px;height:40px;min-height:40px}#techProjectorActivity summary:after{right:5px}#techProjectorActivity [data-projector-compact]{display:block;white-space:nowrap}#techProjectorActivity [data-projector-list]{top:60px}}
#techAddSlot .addplus,#stageWorkspaceHeader .addplus{z-index:auto;transform:none}
.tech-brand{display:flex;gap:16px;align-items:center;white-space:nowrap}.tech-brand b{font-size:18px;letter-spacing:-.6px}.tech-brand span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;border-left:1px solid var(--line2);padding-left:12px;color:var(--dim)}
#techHomeSlot .btn{border:0;background:none;padding:8px;min-width:34px}#techHomeSlot svg{width:24px;height:24px}
.tech-mode{display:flex;margin-left:2px;flex:none}.tech-mode .btn{border-radius:0;min-height:36px}.tech-mode .btn:first-child{border-radius:8px 0 0 8px}.tech-mode .btn:last-child{border-radius:0 8px 8px 0}
#techAddSlot .addplus{width:40px;height:40px;border-radius:12px;background:var(--brass);color:var(--stage-on-accent);box-shadow:none;margin:0}#techAddSlot svg{width:21px;height:21px}
#techWorkspaceHeader .tech-info{font-size:17px;color:var(--stage-chorus);border:0;min-width:40px;padding:8px}
#techWorkspaceBody{display:flex;flex:1;min-height:0;overflow:hidden}
#techMonitors{width:32%;min-width:245px;max-width:440px;display:flex;flex-direction:column;gap:0;margin:0;padding:12px 14px;background:var(--stage-glass);border-right:1px solid var(--line2);overflow:auto;flex:none}
#techWorkspace.tech-many #techMonitors{width:22%;min-width:225px;max-width:300px}
#techMonitors[hidden],#techBuildOutline[hidden]{display:none}
#techMonitors>.pv,#techMonitors>div{flex:none;min-height:0}
#techMonitors .pv{padding:0;display:flex;flex-direction:column;gap:7px;min-width:0;background:none}
#techMonitors .pv-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;margin:0;overflow:hidden}
#techMonitors .pv-head .lbl{width:100%;font:11px/1.35 var(--ui)}
#techMonitors .pv .screen{width:100%;height:auto!important;margin:0;aspect-ratio:var(--car,16/9)}
#techNextSlot{padding-top:10px;margin-top:12px;border-top:1px solid var(--line2)}
#techNextSlot .screen{max-width:150px}
#techMonitors #techSelected{padding:12px 0 0;margin-top:8px;border:0;border-top:1px solid var(--line2);width:100%;min-width:0;overflow:visible;background:none}
#techMonitors #techSelectedScreen{width:150px;max-width:100%}
#techMonitors .tech-selected-actions{gap:6px;margin-top:8px;display:flex;flex-wrap:wrap}
#techMonitors #techArrangement,#techMonitors #techCueMenu{display:none}
#techMonitors #techSendLive{width:auto;flex:1}
#techMonitors #vidBar{margin:8px 0;padding:8px;flex-wrap:wrap}#techMonitors #vidBar[hidden]{display:none}
#techMonitors #cueSignal{margin:8px 0;white-space:normal}
#techWork{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
#techWorkToolbar{display:flex;gap:8px;align-items:center;padding:12px 18px;min-height:62px;flex:none;border-bottom:1px solid var(--line2);overflow-x:auto;white-space:nowrap}
#techWorkToolbar h1{font-size:29px;margin:8px 0;white-space:normal}#techWorkToolbar>div:first-child{flex:1}
#techWorkToolbar .hint{margin:0;white-space:nowrap}#techWorkToolbar .eyebrow{white-space:nowrap}
#techWorkContent{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--tech-section-count,1),minmax(0,1fr));overflow:auto}
.tech-section{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line2)}.tech-section:last-child{border:0}
.tech-section-heading{display:flex;gap:5px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line2);flex:none}.tech-section-heading select{flex:1;min-width:0;font-weight:600}
.tech-lanes{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0}.tech-lanes.split{grid-template-columns:repeat(2,minmax(0,1fr))}
.tech-lane{display:flex;flex-direction:column;min-height:0;min-width:0;padding:16px 18px 0;gap:12px}.tech-lane+.tech-lane{border-left:1px solid var(--line2)}
.tech-lane-heading{display:flex;gap:6px;min-width:0;align-items:center;flex-wrap:wrap}.tech-lane-heading select{min-width:0;flex:1}.tech-lane-heading>.btn{padding:5px;min-width:32px;border:0}
.tech-part-tabs{display:flex;gap:4px;overflow-x:auto;flex-basis:100%;padding-bottom:6px}.tech-part-tabs .btn{font-size:10px;padding:5px 8px;min-height:30px;flex:none;border:0;background:var(--panel2)}
.tech-lane-scroll{flex:1;min-height:0;overflow:auto;padding:0 12px 24px 0;overscroll-behavior:contain;scrollbar-gutter:stable}
.tech-part{margin:0 0 12px;min-width:0;color:var(--part-color,var(--ink))}
.tech-part-tabs .btn{color:var(--part-color,var(--ink))}
.tech-part-tabs .btn.selected{box-shadow:inset 0 0 0 1px var(--brass)}
.tech-part-tabs .btn.live:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
.tech-flat-tabs{flex-wrap:wrap;max-height:150px;overflow:auto;flex:1!important}
.tech-part-head{display:flex;align-items:center;gap:5px;min-height:40px;font-size:11px;font-weight:600;margin:2px 0 8px}
.tech-lane-scroll .tech-part-head{min-height:24px;margin-top:0}
.tech-part-head>span{margin-right:4px}.tech-part-head .tech-drag{order:-1}
.tech-slide{border:1px solid transparent;border-radius:8px;background:var(--panel2-t);color:inherit;display:flex;gap:10px;padding:12px 10px;width:100%;min-height:55px;text-align:left;margin:0 0 8px;font:13px/1.65 var(--ui);cursor:pointer;overflow:hidden;box-sizing:border-box;position:relative}
.tech-slide:hover{background:var(--panel3)}.tech-slide.selected{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass);background:var(--stage-accent-soft)}
.tech-slide.live:before{content:'';position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--live)}
.tech-slide-number{font:10px var(--mono);opacity:.7;flex:none;padding-top:4px;min-width:18px}.tech-slide-copy{min-width:0;flex:1;overflow-wrap:anywhere}
.tech-slide .workspace-slide-preview{width:100%;height:auto;aspect-ratio:var(--car,16/9);position:relative;overflow:hidden;background:#000}
/* Standalone sections keep one complete, scrollable collection in either view.
   Thumbnail width is capped so a short section never becomes one giant tile. */
.tech-lane-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;flex:none}
.tech-flat-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tech-flat-switch{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.tech-flat-switch .btn{border:0;border-radius:0;min-height:40px;padding:7px 10px;font-size:11px}
.tech-flat-switch .btn[aria-pressed="true"]{background:var(--stage-accent-soft);color:var(--brass);box-shadow:inset 0 -2px var(--brass)}
.tech-flat-controls select{min-height:40px;width:83px;padding:6px;font-size:11px}
.tech-flat-scroll{--tech-tile-width:160px}
.tech-flat-scroll[data-tile-size="medium"]{--tech-tile-width:210px}
.tech-flat-scroll[data-tile-size="large"]{--tech-tile-width:280px}
.tech-flat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tech-tile-width)),1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:12px}
.tech-slide.tech-flat-slide{color:var(--ink);margin:0;padding:7px;gap:8px;min-width:0;min-height:0;border-color:var(--line2)}
.tech-flat-tiles .tech-flat-slide{flex-direction:column;max-width:calc(var(--tech-tile-width) * 1.35)}
.tech-flat-slide .workspace-slide-preview{display:block;flex:none;pointer-events:none;border-radius:4px}
.tech-flat-caption{display:flex;flex-direction:column;min-width:0;width:100%;gap:3px}
.tech-flat-title{display:flex;align-items:baseline;gap:7px;font:500 12px/1.4 var(--ui)}
.tech-flat-title>span:last-child{overflow-wrap:anywhere}
.tech-flat-title .tech-slide-number{padding:0;min-width:16px}
.tech-flat-state{display:flex;flex-wrap:wrap;gap:4px 8px;min-height:16px;font:600 10px/1.4 var(--ui)}
.tech-flat-selected,.tech-flat-live{visibility:hidden}
.tech-flat-selected{color:var(--brass)}.tech-flat-live{color:var(--live)}
.tech-flat-slide.selected .tech-flat-selected,.tech-flat-slide.live .tech-flat-live{visibility:visible}
.tech-slide.tech-flat-slide.selected{border-color:var(--brass)}
.tech-flat-list .tech-flat-slide{align-items:center;margin-bottom:8px;min-height:68px}
.tech-flat-list .workspace-slide-preview{width:88px;max-width:32%}
.tech-flat-list .tech-flat-caption{flex:1}
.tech-flat-slide:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#techWorkspaceFooter{display:flex;align-items:center;gap:10px;flex:none;min-height:58px;padding:9px 18px;background:var(--stage-glass);border-top:1px solid var(--line2);overflow-x:auto}
#techOutputSlot,#techStepSlot,#techExtraSlot{display:flex;align-items:center;gap:7px;flex:none}
#techOutputSlot .key{display:none}#techOutputSlot .statelamp{background:none;border:0;padding:0 7px 0 0;font-size:10px}#techStepSlot{border-left:1px solid var(--line2);padding-left:8px}
#techStepSlot .tbig{min-width:0;min-height:38px;padding:8px 12px;background:none;color:var(--ink);border:0;font:600 12px var(--ui);border-radius:8px}
#techStepSlot .tbig:hover{background:var(--panel2)}#techExtraSlot .btn{min-height:36px}
#techChat{display:flex;align-items:center;justify-content:center;border-radius:50%;width:44px;height:44px;background:var(--brass);color:var(--stage-on-accent);border:0;position:relative;flex:none}#techChat svg{width:22px;height:22px}#techChat .unread{position:absolute;right:-2px;top:-2px}
body.workspace-tech>#chatBub{display:none!important}
#techBuildOutline{width:24%;min-width:230px;max-width:310px;flex:none;background:var(--stage-glass);padding:24px 18px;overflow:auto;border-right:1px solid var(--line2);overscroll-behavior:contain}
.tech-outline-title{display:flex;align-items:center;margin:5px 0 16px}.tech-outline-title>div{flex:1;min-width:0}.tech-outline-title h2{font-size:23px;line-height:1.3;margin:9px 0;overflow-wrap:anywhere}
.tech-outline-section{display:flex;align-items:center;border-bottom:1px solid var(--line2);margin:12px 0 6px;gap:0}.tech-outline-section .btn{border:0;padding:4px;min-width:30px;min-height:38px}.tech-outline-section .btn:first-child{flex:1;justify-content:flex-start;white-space:normal;text-align:left}
.tech-outline-cue{display:flex;align-items:center;min-height:54px;border-radius:8px}.tech-outline-cue.selected{background:var(--stage-accent-soft)}.tech-outline-cue>.btn{border:0;min-width:26px;padding:5px}
.tech-outline-cue .tech-outline-name{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:normal;text-align:left;min-width:0}.tech-outline-name strong{font-weight:600}.tech-outline-name small{font-size:10px;color:var(--dim)}
.tech-drag{touch-action:none;cursor:grab}.tech-dragging{cursor:grabbing;user-select:none}
.tech-drag-source{opacity:.45;background:var(--stage-accent-soft);outline:1px dashed var(--brass)}
.tech-drop-before,.tech-drop-after,.tech-drop-end{position:relative}
.tech-drop-before:before,.tech-drop-after:after,.tech-drop-end:after{content:'';position:absolute;left:0;right:0;height:3px;background:var(--brass);box-shadow:0 0 8px var(--brass);z-index:2;pointer-events:none}
.tech-drop-before:before{top:0}.tech-drop-after:after,.tech-drop-end:after{bottom:0}
#techWorkspace.tech-build #techWorkContent{display:block;overflow:auto}
.tech-build-slides{padding:20px 26px;overflow:auto;min-height:0;height:100%;box-sizing:border-box}.tech-build-slides h3{font-size:14px;margin:0 0 8px}.tech-build-slides>.hint{margin-bottom:18px}
#techSelected{padding:24px;border-left:1px solid var(--line2);background:var(--stage-glass);overflow:auto;width:30%;max-width:380px;min-width:240px;box-sizing:border-box}
#techSelectedLabel{font:600 12px/1.5 var(--ui);margin:6px 0 10px}.tech-selected-actions{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}#techSendLive{width:100%}#techSelectedScreen{height:auto;aspect-ratio:var(--car,16/9);width:100%}
#techSelected.empty .tech-selected-actions{display:none}.tech-welcome{padding:70px 8%;line-height:1.9;font-size:13px;color:var(--dim)}.tech-welcome h2{font-size:42px;color:var(--ink);margin:14px 0}.tech-welcome .btn{margin:20px 8px 8px 0}
.tech-build #techWorkToolbar{padding:24px 26px}.tech-build #techBuildLiveSlot{display:block;flex:1;min-width:180px;max-width:36%;overflow:hidden}.tech-build #techBuildLiveSlot .pv{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:8px;padding:0}
#techBuildLiveSlot .pv-head{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;font:11px var(--ui)}#techBuildLiveSlot .pv-head .lbl{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#techBuildLiveSlot .screen{width:108px;height:auto!important;flex:none;margin:0;aspect-ratio:var(--car,16/9)}#techBuildLiveSlot #bgWarning{display:none}
#techBuildLiveSlot:empty{display:none}.tech-warning{border-left:3px solid var(--brass);padding:10px;font-size:12px;background:var(--stage-accent-soft)}
@media(max-width:1100px){
 #techWorkspaceHeader{gap:7px;padding:9px 12px}.tech-brand span{display:none}#techWorkToolbar{padding:10px;gap:5px}#techWorkToolbar .btn{padding:6px 8px;font-size:11px}
 #techMonitors{width:27%;min-width:210px}#techWorkspace.tech-many #techMonitors{min-width:190px}.tech-lane{padding:12px 10px 0}.tech-section-heading{padding:10px}
 #techWorkspace.tech-many .tech-lanes.split{display:flex;flex-direction:column}.tech-many .tech-lane{flex:1}.tech-many .tech-lane+.tech-lane{border-left:0;border-top:1px solid var(--line2)}
 #techSelected{min-width:200px;padding:16px}.tech-build-slides{padding:16px}.tech-part-head{flex-wrap:wrap}#techWorkspaceFooter{gap:5px;padding:8px}#techExtraSlot #btnDisplay{font-size:0}#techExtraSlot #btnDisplay:before{content:'Display';font-size:11px}
 #techOutputSlot .btn{padding:8px;font-size:11px}#techStepSlot .tbig{padding:8px}
}
@media(max-width:760px){
 #techWorkspaceHeader{padding:7px 10px;gap:6px;min-height:58px}#techWorkspaceHeader .btn{padding:8px}#techSearch span{display:none}.tech-brand b{font-size:17px}#techRunningOrder{font-size:0!important;min-width:38px}#techRunningOrder:before{content:'☰';font-size:17px}#techWorkspaceHeader .spacer{min-width:5px}#techWorkspaceHeader .tech-info{display:none}
 #techWorkspaceBody{flex-direction:column;overflow:auto}#techMonitors,#techWorkspace.tech-many #techMonitors{width:100%;max-width:none;min-width:0;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;border-right:0;border-bottom:1px solid var(--line2);padding:10px;box-sizing:border-box;max-height:40vh;overflow:auto}#techMonitors[hidden]{display:none}
 #techNextSlot{margin:0;padding:0;border:0}#techMonitors #techSelected{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:4px;margin:0;padding:8px 0 0}#techMonitors #techSelected .tech-selected-actions{grid-column:2;grid-row:1/4;max-width:220px;margin:0}#techMonitors #techSelectedScreen{display:none}#techMonitors #techSelectedLabel{margin:0}#techMonitors #techClickHint{font-size:10px;margin:0}
 #techWork{min-height:320px;flex:1}#techWorkContent{min-height:220px}#techWorkToolbar{min-height:50px}#techWorkToolbar>.eyebrow,#techWorkToolbar>.hint{display:none}#techWorkToolbar>div.spacer{display:none}
 #techWorkContent{grid-template-columns:repeat(var(--tech-section-count,1),minmax(270px,1fr));overflow-x:auto}#techWorkspaceFooter{gap:5px;flex-wrap:nowrap;min-height:54px}#techExtraSlot{display:none}#techChat{width:36px;height:36px}#techOutputSlot{gap:4px}#techOutputSlot .statelamp{display:none}#techStepSlot{gap:0;padding-left:2px}#techStepSlot .tbig{font-size:11px;padding:8px 6px}
 #techBuildOutline{width:100%;max-width:none;min-width:0;max-height:210px;box-sizing:border-box;padding:12px;border-right:0;border-bottom:1px solid var(--line2)}.tech-outline-title h2{font-size:20px}.tech-outline-title{margin:0}.tech-build #techWorkspaceBody>#techSelected{width:100%;max-width:none;min-width:0;border-left:0;border-top:1px solid var(--line2);flex:none}.tech-build #techSelectedScreen{max-width:240px}.tech-build #techBuildLiveSlot{display:none}.tech-build #techWorkToolbar{padding:12px}.tech-build #techWorkToolbar h1{font-size:24px}.tech-welcome{padding:25px}.tech-welcome h2{font-size:30px}.tech-build-slides{height:auto}
}
@media(max-height:740px) and (min-width:761px){#techMonitors #techSelectedScreen{width:125px}#techNextSlot .screen{max-width:145px}#techMonitors{padding-top:10px;padding-bottom:8px}#techMonitors .tech-selected-actions .btn{min-height:32px;padding:5px 8px}#techSelected .hint{font-size:11px;margin:5px 0}}

#techMonitors .pv-head,#techBuildLiveSlot .pv-head{height:auto;min-height:30px}
#techMonitors .pv-head .lbl,#techBuildLiveSlot .pv-head .lbl{margin-left:0;max-width:100%}
#techStepSlot .tbig{flex:none;display:inline-flex;align-items:center;white-space:nowrap;gap:5px}

.tech-chat-badge{position:absolute;right:-3px;top:-4px;min-width:18px;padding:2px;border-radius:20px;background:var(--live);color:#251327;font:600 10px var(--ui)}
.tech-chat-badge[hidden]{display:none}

#techWorkspace{position:relative}
#techWorkspace #techSyncStatus{position:absolute;right:12px;bottom:calc(var(--tech-footer-h,58px) + 18px);max-width:min(360px,80%);z-index:12;white-space:normal;background:var(--panel2);font-size:11px;color:var(--brass)}
#techWorkspace #techSyncStatus[data-sync="ready"]{display:none}

#techWorkspaceHeader .btn.ghost{border-color:transparent}
#techWorkspaceHeader #btnUI{border-color:var(--line)}
#techViewOutput{display:none}.tech-build #techViewOutput{display:inline-flex}
#techOutputPreview{width:100%;height:auto;aspect-ratio:var(--car,16/9)}
#techOutputVideo .vidbar{display:flex;flex-wrap:wrap}#techOutputVideo .vidbar[hidden]{display:none}
@media(min-width:1101px){.tech-lane-heading{flex-wrap:nowrap}.tech-lane-heading select{flex:0 1 118px;width:118px}.tech-part-tabs{flex:1;min-width:80px;margin:0;padding:0 0 6px}.tech-many .tech-lane-heading{flex-wrap:wrap}.tech-many .tech-part-tabs{flex-basis:100%}}
@media(max-width:760px){.tech-build #techViewOutput{display:none}}
/* Keep every phone action in view even with wider Windows/Linux system fonts.
   The brand yields its space before controls do; output and navigation get
   explicit rows rather than an off-screen end to the emergency toolbar. */
@media(max-width:480px){
 #techWorkspaceHeader{gap:4px;padding:7px 8px}
 #techWorkspaceHeader .tech-brand,#techWorkspaceHeader>.spacer{display:none}
 #techWorkspaceHeader #techTools{margin-left:auto}
 #techWorkspaceFooter{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 8px}
 #techWorkspaceFooter>.spacer{display:none}
 #techOutputSlot{grid-column:1;grid-row:1;min-width:0}
 #techOutputSlot .btn{flex:1}
 #techStepSlot{grid-column:1;grid-row:2;border:0;padding:0}
 #techStepSlot .tbig{flex:1;justify-content:center;min-height:40px}
 #techChat{grid-column:2;grid-row:1/3;justify-self:center}
}
/* CP.6 local view groups and optional left dock (sizing rewritten in CP.8 below). */
#techLiveOrder{width:var(--tech-order-width,310px);flex:none;box-sizing:border-box;padding:12px;overflow:auto;border-right:1px solid var(--line2);background:var(--stage-glass);overscroll-behavior:contain}
#techLiveOrder[hidden]{display:none}
#techWorkspace{--tech-order-width:310px;--monitor-clearance:340px;--tech-footer-h:58px;--mon-inset:8px;--mon-hang:10px;--mon-next-w:150px;--mon-bottom:12px;--mon-state-w:58px;--mon-state-gap:22px;--tech-banner:#171428}
:root[data-ui="light"] #techWorkspace{--tech-banner:#eef0f5}
#techWorkspace.tech-docked #techLiveOrder{padding-bottom:calc(var(--monitor-clearance) + var(--safe-bottom) + 20px)}
/* ---- CP.8.3: undocked Live keeps the Running Order too. The monitor column becomes
   a two-row grid column: monitors on top, the Running Order filling the space
   beneath with its own scroll. Nothing is reparented (the monitors host players);
   the same delegated click / double-click / touch / menu handlers serve both
   placements. Docked remains the full-height list with the block in the footer. ---- */
@media(min-width:761px){
 #techWorkspace:not(.tech-build):not(.tech-docked) #techWorkspaceBody{display:grid;grid-template-columns:clamp(245px,32%,440px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 #techWorkspace.tech-many:not(.tech-build):not(.tech-docked) #techWorkspaceBody{grid-template-columns:clamp(225px,22%,300px) minmax(0,1fr)}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techMonitors{grid-column:1;grid-row:1;width:auto;min-width:0;max-width:none;overflow:visible}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techLiveOrder{grid-column:1;grid-row:2;width:auto;min-width:0;min-height:0;border-top:1px solid var(--line2);padding-top:8px}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techLiveOrder .tech-outline-title{margin-bottom:4px}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techLiveOrder .tech-outline-title h2{font-size:15px}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techWork{grid-column:2;grid-row:1/3;min-width:0;min-height:0}
 /* Undocked there is no Running Order boundary to align with: the Preview name row stays inside the monitor column, NEXT/PREVIEW and Locate at its right edge. */
 #techWorkspace:not(.tech-build):not(.tech-docked) #techNextSlot{width:clamp(150px,42%,220px)}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techNextSlot .pv-head{width:100%}
 #techWorkspace:not(.tech-build):not(.tech-docked) #techNextSlot .pv-head>.eyebrow{width:auto;padding:1px 5px;border-radius:4px;background:#000a;color:#fff;bottom:30px;right:2px;text-align:right}
}
@media(max-width:1100px) and (min-width:761px){
 #techWorkspace:not(.tech-build):not(.tech-docked) #techWorkspaceBody{grid-template-columns:clamp(210px,27%,440px) minmax(0,1fr)}
 #techWorkspace.tech-many:not(.tech-build):not(.tech-docked) #techWorkspaceBody{grid-template-columns:clamp(190px,22%,300px) minmax(0,1fr)}
}
/* ---- CP.8: one monitor block, shared by the docked and undocked Live layouts.
   Row 1 holds both monitors; the Preview/Next card overlaps the Live picture's
   lower-right corner (picture-in-picture). Row 2 is the reserved action row:
   compact Edit/Details/Send live at the left, Clear Preview at the right.
   Nothing here changes size when a slide is selected, cleared or sent. ---- */
#techWorkspace:not(.tech-build) #techMonitors{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto var(--mon-clear-h,36px) var(--mon-icon-h,34px);gap:0;padding:var(--mon-top,4px) var(--mon-right,6px) var(--mon-bottom,14px) var(--mon-inset);box-sizing:border-box;align-content:start}
#techMonitors>#techLiveSlot{grid-row:1;grid-column:1/-1;min-width:0;min-height:0}
#techMonitors>#techNextSlot{grid-row:1/4;grid-column:1/-1;min-width:0;min-height:0}
#techLiveSlot{width:100%;padding-bottom:var(--mon-hang);box-sizing:border-box}
#techLiveSlot .pv{gap:2px}
#techMonitors .pv-head{display:flex;flex-direction:row;align-items:center;gap:4px;height:26px;min-height:0;width:calc(100% - (var(--mon-right-pad,12px) - var(--mon-right,6px)));margin:0;overflow:visible}
#techMonitors .pv-head .lbl{flex:1;min-width:0;max-width:none;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px/1.3 var(--ui);color:var(--ink);max-height:none}
.tech-live-dot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:none;margin:0 3px 0 1px;box-shadow:0 0 0 2px color-mix(in srgb,var(--live) 25%,transparent)}
#techMonitors .tech-locate{font:600 10px var(--ui);min-height:26px;padding:3px 5px;gap:4px;flex:none;border:0;background:var(--panel2);color:var(--brass);max-width:none;white-space:nowrap;line-height:1}
#techMonitors .tech-locate svg{flex:none}
#techMonitors .tech-monitor-menu{min-width:26px;width:26px;min-height:26px;padding:0 5px;border:0;flex:none;font-size:14px;line-height:1;justify-content:center}
#techMonitors .tech-locate[hidden],#techMonitors .tech-monitor-menu[hidden]{display:none}
/* The Live picture's right edge meets Locate's right edge: the row minus the menu button and its gap. */
#techLiveSlot .screen{width:calc(100% - (var(--mon-right-pad,12px) - var(--mon-right,6px)) - 30px)!important;margin:0}
#techLiveSlot #bgWarning{display:none}
/* Preview/Next: the picture alone overlaps the Live picture's lower-right
   corner and reaches the panel edge. Its name row sits beneath it, level with
   the slide action icons: name, then the menu aligned with the Live menu and
   the Running Order menus, then — past the Running Order boundary, lined up
   with the first open section's tiles — the NEXT/PREVIEW state above Locate.
   The state column has a reserved width so the footer controls never move. */
#techNextSlot{align-self:end;justify-self:end;z-index:1;width:var(--mon-next-w,150px);padding:0;margin:0 calc(1px - var(--mon-right,6px)) 0 0;border:0;display:flex;flex-direction:column;align-items:stretch}
#techNextSlot .pv{display:flex;flex-direction:column;gap:3px;background:none;border:0;padding:0;overflow:visible}
#techNextSlot .screen{order:1;width:100%!important;max-width:none;margin:0;border-color:var(--line);box-shadow:0 2px 8px #0005}
#techNextSlot .pv-head{order:2;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 26px var(--mon-state-gap,22px) var(--mon-state-w,58px);column-gap:0;grid-template-rows:24px;align-items:end;height:24px;width:calc(100% - 11px + var(--mon-state-gap,22px) + var(--mon-state-w,58px));min-width:0;align-self:flex-start;padding:0;overflow:visible}
#techNextSlot .pv-head .lbl{grid-column:1;grid-row:1;font-size:10px;line-height:1.4;min-width:0;padding:0 4px 4px 0}
#techNextSlot .tech-monitor-menu{grid-column:2;grid-row:1;min-height:24px;margin:0;justify-self:end}
#techNextSlot .tech-locate{grid-column:4;grid-row:1;min-height:24px;padding:2px 5px;margin:0;justify-self:start}
#techNextSlot .pv-head>.eyebrow{position:absolute;right:0;width:var(--mon-state-w,58px);bottom:27px;display:block;font:10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0;padding:0;line-height:12px;white-space:nowrap;text-align:left;box-sizing:border-box}
#techMonitors .tech-gold,#techSendLive{background:var(--brass);border-color:var(--brass);color:var(--stage-on-accent)}
#techMonitors .tech-gold:hover,#techSendLive:hover{filter:brightness(1.06)}
.tech-selected-actions .tech-text{margin-left:2px}
#techMonitors #techSelected{grid-row:3;grid-column:1;margin:0;padding:0;border:0;background:none;width:auto;min-width:0;max-width:none;display:flex;align-items:center;min-height:0;overflow:visible;align-self:end}
#techMonitors #techSelectedLabel,#techMonitors #techSelectedState,#techMonitors #techClickHint,#techMonitors #techSelectedScreen{display:none}
#techMonitors .tech-selected-actions{display:flex;gap:6px;margin:0;flex-wrap:nowrap}
#techMonitors #techSelected.empty .tech-selected-actions{display:flex;visibility:hidden}
#techMonitors .tech-selected-actions .btn{width:34px;min-width:34px;height:34px;min-height:34px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
#techMonitors .tech-selected-actions .btn[hidden]{display:none}
#techMonitors .tech-selected-actions .tech-text{display:none}
#techMonitors #techSendLive{width:34px;flex:none}
#techMonitorActions{grid-row:2;grid-column:1;display:flex;align-items:end;justify-content:flex-start;gap:4px;min-height:0;padding-bottom:4px}
#techMonitorActions[hidden]{display:none}
#techMonitorActions .btn{font-size:10px;padding:5px 8px;min-height:32px;white-space:nowrap;flex:none}
#techMonitorTools{display:none}
/* Docked: the block rises out of the footer. It is as wide as the Running Order,
   starts at the left edge, and its border runs up the right side and across the
   top, continuing the footer's top border. The action row sits level with the
   footer controls, which begin after the Running Order boundary.
   CP.8.2: the footer's top border also continues across the block to the left
   edge of the screen (::before), passing behind the Preview picture and the
   Clear Preview button. Below that line the block is the footer's surface;
   above it the block is a translucent glass over the Running Order so the
   gradient behind shows through while the text stays legible. */
#techWorkspace.tech-docked #techMonitors{position:absolute;z-index:5;left:0;bottom:0;width:var(--tech-order-width);min-width:0;max-width:none;border:0;border-top:1px solid var(--brass);border-radius:0;background:linear-gradient(to top,var(--tech-banner) 0 var(--tech-footer-h),transparent var(--tech-footer-h)),linear-gradient(var(--stage-glass),var(--stage-glass)),var(--workspace-background,#110e1d);background-attachment:scroll,scroll,fixed,fixed;overflow:visible;align-content:end}
#techWorkspace.tech-docked #techMonitors::after{content:'';position:absolute;top:-1px;right:0;bottom:calc(var(--tech-footer-h) - 1px);width:1px;background:var(--brass);pointer-events:none}
/* CP.8.4 (U9): the continued line takes the header's border colour; the footer border and the block's top/right border stay in the accent. */
#techWorkspace.tech-docked #techMonitors::before{content:'';position:absolute;left:0;right:0;bottom:calc(var(--tech-footer-h) - 1px);height:1px;background:var(--line);z-index:0;pointer-events:none}
#techWorkspace.tech-docked #techLiveSlot,#techWorkspace.tech-docked #techMonitorActions,#techWorkspace.tech-docked #techMonitors #techSelected{position:relative;z-index:1}
#techWorkspace.tech-docked #techNextSlot{z-index:2}
#techWorkspace.tech-docked #techClearPreview{background:var(--tech-banner)}
#techWorkspace.tech-docked #techWorkspaceFooter{margin-left:0;padding-left:calc(var(--tech-order-width) + var(--mon-state-gap,22px) + var(--mon-state-w,58px) + 10px);background:var(--tech-banner)}
/* Clip controls share the footer row. The strip yields before the output,
   navigation, Display and Talkback controls do, and scrolls inside itself on
   narrow desks rather than growing the footer or the monitor block. */
#techFooterMedia{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
#techFooterMedia:empty,#techFooterMedia:not(:has(> :not([hidden]))){display:none}
#techFooterMedia #vidBar{margin:0;padding:0;flex-wrap:nowrap;gap:6px;z-index:auto;flex:none}
#techFooterMedia #vidBar[hidden]{display:none}
#techFooterMedia .vidseek{flex:none;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:2px 6px;width:auto}
#techFooterMedia .vidseek input[type="range"]{grid-column:1/-1;width:132px;height:14px;margin:0}
#techFooterMedia .vidseek .field{width:52px;padding:2px 6px;min-height:22px;height:22px;font-size:11px;box-sizing:border-box}
#techFooterMedia .vidseek .btn{min-height:22px;padding:2px 8px}
#techFooterMedia #vidName{display:none}
#techFooterMedia #vidTime{white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
#techFooterMedia .vidbar .btn{padding:6px 8px;flex:none}
/* CP.8.3 compact clip controller (U8): icon Play/Pause, skip-to-start Restart and a speaker
   that is gold while sound is on and struck through while off; the footer arrows become
   thick compact arrows while a clip is live so the strip fits without a scrollbar. */
#techFooterMedia{scrollbar-width:none}#techFooterMedia::-webkit-scrollbar{display:none}
#techFooterMedia #vidPlay,#techFooterMedia #vidRestart,#techFooterMedia #vidMute{font-size:0;width:34px;min-width:34px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0}
#techFooterMedia #vidPlay::before,#techFooterMedia #vidRestart::before,#techFooterMedia #vidMute::before,#techWorkspaceFooter:has(#vidBar:not([hidden])) #techStepSlot .tbig::before{content:'';display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
#techFooterMedia #vidPlay.accent::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E")}
#techFooterMedia #vidPlay:not(.accent)::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4.5v14H6zM13.5 5H18v14h-4.5z'/%3E%3C/svg%3E")}
#techFooterMedia #vidRestart::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.5h3v15H5zM19.5 4.5v15L8.5 12z'/%3E%3C/svg%3E")}
#techFooterMedia #vidMute::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5.5 4.5v-15L7 9z'/%3E%3Cpath d='M15.5 8.2a5.2 5.2 0 0 1 0 7.6M18.3 5.4a9 9 0 0 1 0 13.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
#techFooterMedia #vidMute:not(.accent)::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5.5 4.5v-15L7 9z'/%3E%3Cpath d='M15.5 8.2a5.2 5.2 0 0 1 0 7.6M18.3 5.4a9 9 0 0 1 0 13.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.5 2.5l19 19' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.workspace-theme #techFooterMedia #vidMute.accent{background:transparent;border-color:var(--line);color:var(--brass)}
.workspace-theme #techFooterMedia #vidMute:not(.accent){color:var(--dim)}
#techWorkspaceFooter:has(#vidBar:not([hidden])) #techStepSlot .tbig{font-size:0;width:46px;min-width:46px;padding:0;justify-content:center;gap:0}
#techWorkspaceFooter:has(#vidBar:not([hidden])) #techStepSlot .tbig::before{width:20px;height:20px}
#techWorkspaceFooter:has(#vidBar:not([hidden])) #techStepSlot #btnPrev::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#techWorkspaceFooter:has(#vidBar:not([hidden])) #techStepSlot #btnNext::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Docked on a narrow desk (≤1100px) the arrows are always compact so the footer keeps one row with a text slide. */
@media(max-width:1100px){
 #techWorkspace.tech-docked #techStepSlot .tbig{font-size:0;width:46px;min-width:46px;padding:0;justify-content:center;gap:0}
 #techWorkspace.tech-docked #techStepSlot .tbig::before{content:'';display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
 #techWorkspace.tech-docked #techStepSlot #btnPrev::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M11 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 #techWorkspace.tech-docked #techStepSlot #btnNext::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}
/* Reserve the longer recovery label so Freeze never shifts its neighbours. */
#techOutputSlot .freeze-label::after{content:"Review Hold"}
#techOutputSlot .btn{padding-left:10px;padding-right:10px}
#techWorkspaceFooter{scrollbar-width:none}#techWorkspaceFooter::-webkit-scrollbar{display:none}
#techFooterMedia .vidbar>.spacer{display:none}
#techFooterMedia #cueSignal{flex:none}
/* Narrow desks and tablets: the clip strip wraps onto its own footer row (only
   while a clip is live) so every control stays inside the viewport. */
@media(max-width:1100px){
 #techWorkspaceFooter{flex-wrap:wrap}
 #techFooterMedia{flex:1 0 100%;overflow:visible;flex-wrap:wrap;order:9}
 #techFooterMedia #vidBar{flex-wrap:wrap;flex:1 1 auto;min-width:0}
 #techFooterMedia #vidBar:not([hidden]){display:flex}
 #techFooterMedia .vidseek{flex:1 1 auto;min-width:0}
 #techFooterMedia .vidseek input[type="range"]{width:100%;min-width:90px}
 #techFooterMedia #vidTime{max-width:100%}
}
@media(max-width:480px){
 #techFooterMedia{grid-column:1/-1;grid-row:3}
}
#techFooterMedia #cueSignal{margin:0}
#techWorkspace:not(.tech-build) #techSelectedScreen{display:none}
#techWorkspaceFooter{border-top-color:var(--brass)}
#techWorkspaceHeader .tech-info{color:var(--brass);font-size:0}
#techWorkspaceHeader .tech-info svg{width:20px;height:20px;display:block}
.workspace-choice label.tech-section-asked{background:var(--stage-accent-soft);border-radius:8px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--brass)}
/* Sections and cue columns share the width they have; the shell never scrolls
   sideways on tablets and desktops. Phones keep a contained sideways scroll. */
#techWorkContent{display:flex;overflow:hidden}
.tech-section{flex:var(--section-weight,1) 1 0;min-width:0;width:auto}
.tech-section.tech-expanded{flex-grow:2}
.tech-lanes{grid-template-columns:repeat(var(--cue-columns,1),minmax(0,1fr));overflow:hidden}
.tech-lane{padding:12px 10px 0;gap:8px;overflow:hidden}
.tech-section-layout{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 10px;border-bottom:1px solid var(--line2)}
.tech-section-layout .hint,.tech-column-shortage{margin:4px 10px}
.tech-view-controls{display:flex;gap:4px;align-items:center;flex:none}
.tech-section-layout .tech-view-controls{margin-left:auto}
.tech-lane-heading{flex-wrap:wrap}
.tech-lane-heading .psel{flex:1;min-width:0;max-width:100%}
.tech-section-heading .psel{flex:1;min-width:0}
.workspace-theme .pselbtn{width:100%;min-height:40px;background:var(--panel2);border-color:var(--line);color:var(--ink);font:12px var(--ui)}
#pselMenu.workspace-theme .inner{background:var(--tech-banner,#171428);border-color:var(--line);color:var(--ink)}
:root[data-ui="light"] #pselMenu.workspace-theme .inner{background:#f4f0f6}
.tech-lane{position:relative}
.tech-live-edge{position:absolute;left:12px;right:12px;color:var(--live);background:var(--panel2)!important;z-index:2}
.tech-live-edge[data-tech-live-edge="down"]{bottom:6px}
.tech-live-edge[hidden]{display:none}
.tech-revealed{animation:tech-reveal 1.5s ease-out}
.tech-section-heading.tech-revealed{border-radius:8px}
@keyframes tech-reveal{0%,70%{outline:3px solid var(--freeze);outline-offset:-3px}100%{outline:3px solid transparent;outline-offset:-3px}}
@media(prefers-reduced-motion:reduce){.tech-revealed{animation-duration:2s}}
@media(max-width:1100px){
 #techWorkContent>.tech-section:not(:only-child) .tech-lanes{display:flex;flex-direction:column}
 #techWorkContent>.tech-section:not(:only-child) .tech-lane{flex:1;min-height:0}
 #techWorkContent>.tech-section:not(:only-child) .tech-lane+.tech-lane{border-left:0;border-top:1px solid var(--line2)}
}
@media(min-width:761px){
 #techWorkspace.tech-many .tech-lanes.split{display:grid}
 #techWorkspace:not(.tech-build) #techWorkContent:has(>.tech-section:only-child)>.tech-section{flex:1 0 0;min-width:0}
 #techWorkspace:not(.tech-build) #techWorkContent:has(>.tech-section:only-child) .tech-lanes{grid-template-columns:repeat(var(--cue-columns,1),minmax(210px,1fr))}
}
@media(max-width:1100px) and (min-width:761px){#techWorkspace{--tech-order-width:270px}.tech-section{flex-basis:240px}}
@media(max-width:760px){
 #techWorkspace.tech-docked #techWorkspaceBody{overflow:auto}
 #techWorkspace:not(.tech-build) #techLiveOrder{width:100%;max-height:230px;padding:10px;min-height:140px;border-right:0;border-bottom:1px solid var(--line2)}
 #techWorkspace.tech-docked #techMonitors{position:static;order:0;width:100%;padding:10px 10px 0;border:0;border-bottom:1px solid var(--brass);max-height:none;flex:none;overflow:visible}
 #techWorkspace.tech-docked #techMonitors::after,#techWorkspace.tech-docked #techMonitors::before{display:none}
 #techWorkspace.tech-docked #techMonitors{background:var(--tech-banner)}
 #techWorkspace.tech-docked #techWorkspaceFooter{margin-left:0;padding-left:8px}
 #techWorkspace:not(.tech-build) #techMonitors,#techWorkspace.tech-many:not(.tech-build) #techMonitors{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0;border-right:0}
 #techLiveSlot{width:min(360px,100%)}
 #techNextSlot{width:min(170px,46%)}
 #techWorkspace.tech-docked #techMonitors #techSelected,#techWorkspace.tech-docked #techMonitorActions{min-height:48px}
 #techWorkContent{overflow-x:auto}
 #techWorkContent>.tech-section{flex-basis:280px;flex-shrink:0}
 #techWorkspace.tech-docked #techWork{min-height:420px}
}
@media(min-width:761px){.tech-section-heading .pselbtn .pv{overflow:hidden;text-overflow:ellipsis}}

/* Cue tiles retain their parts and bounded columns; every picture is a still. */
.tech-cue-tiles .tech-part{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tech-tile-width)),1fr));align-content:start;gap:12px;margin-bottom:14px}
.tech-cue-tiles .tech-part-head{grid-column:1/-1}
.tech-cue-tiles .tech-flat-slide{flex-direction:column;max-width:var(--tech-tile-width);padding:5px;gap:4px}
.tech-cue-tiles .workspace-slide-preview{margin:0}

/* Secondary view choices stay in the section menu on narrow desks. */
@media(max-width:700px){
 #techWorkContent .tech-flat-controls select,#techWorkContent .tech-flat-controls [data-tech-view-reset],#techWorkContent .tech-flat-controls .hint{display:none}
 #techWorkContent .tech-flat-controls{gap:0;flex-wrap:nowrap}
 #techWorkContent .tech-flat-switch button{min-height:40px}
}

.tech-section-actions{display:contents}
.tech-menu-layout{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
@media(max-width:700px){
 #techWorkContent .tech-section-actions,#techWorkContent .tech-column-shortage{display:none}
}

/* Cue selection and part navigation occupy distinct rows in every column. */
.tech-lane>.tech-part-tabs{flex:none;width:100%;min-width:0;margin:0;padding:0 0 6px}
/* Shared section controls wrap within their own column, including three docked sections. */
.tech-section-heading{flex-wrap:wrap}
.tech-section-heading .psel{flex:1 1 110px;max-width:100%}
.tech-section-view-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%;flex:1 1 auto}

.reset-choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 4px;flex-wrap:wrap}.reset-choice input{width:20px;height:20px;flex:none}.reset-choice small{flex-basis:100%;padding-left:32px;color:var(--muted)}

/* Wrapped section actions must not consume the last tile's reading viewport.
   The existing narrow work scroller contains taller sections when needed. */
@media(max-width:760px){
 #techWorkspace:not(.tech-build) .tech-section:has(.tech-cue-tiles),
 #techWorkspace:not(.tech-build) .tech-section:has(.tech-cue-tiles) .tech-lanes,
 #techWorkspace:not(.tech-build) .tech-section:has(.tech-cue-tiles) .tech-lane{min-height:min-content}
 #techWorkspace:not(.tech-build) .tech-section:has(.tech-cue-tiles) .tech-lane-scroll{contain:size}
 #techWorkspace:not(.tech-build) .tech-cue-tiles{min-height:220px}
}
/* CO.2 Home and account screens share the approved Blaugrana palette. */
.account-workspace{font-family:var(--ui);background:radial-gradient(ellipse at 3% 8%,#163f78,transparent 64%),radial-gradient(ellipse at 98% 96%,#591426,transparent 68%),#070e1d;color:var(--ink)}
:root[data-ui="light"] .account-workspace{background:linear-gradient(125deg,#b6cef1 0%,#e7eef7 34%,#f3f4f2 62%,#f2e8c9 82%,#edcf83 100%)}
#gate.account-workspace{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);overflow:auto}
#gate.account-workspace>.gate-inner{width:100%;max-width:1280px;padding:44px 5%;margin:0 auto;flex:none}
.account-home-header{display:flex;gap:20px;align-items:center;padding:10px 22px;background:var(--stage-glass);border-bottom:1px solid var(--line);flex:none;min-height:64px}
.account-home-header .wordmark b{font:700 20px var(--ui);letter-spacing:-.05em}
.account-home-header .whoami{flex:1;display:flex;justify-content:flex-end;gap:6px;margin:0;flex-wrap:wrap;border:0;padding:0;background:none}
.account-home-header #whoName{font:12px var(--ui);color:var(--dim);margin-right:auto}
.account-home-header #btnMySettings[hidden],.account-home-header #btnPeople[hidden],.account-home-header #btnGateDisplay[hidden],.account-home-header .whoami[hidden]{display:none}
.account-home-header .btn{border-color:transparent;min-height:44px}
.account-home-intro{display:grid;grid-template-columns:1fr minmax(230px,32%);align-items:center;gap:30px;margin:0 0 30px}
.account-home-intro h1{font:500 48px/1.15 ui-serif,Georgia,serif;letter-spacing:-.04em;margin:12px 0}
.account-home-intro p{color:var(--dim);font-size:16px;margin:0}
#gate.account-workspace .gate-svc{display:flex;align-items:stretch;flex-direction:column;gap:12px;background:none;border:0;margin:0;padding:0;min-width:0}
#gate.account-workspace .gate-svc .field{width:100%;min-height:44px}
#accountServiceOptions{align-self:flex-start}
#accountServiceOptions[hidden]{display:none}
.account-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.account-section-head h2{font:600 18px var(--ui);margin:0}
#gate.account-workspace .roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 36px}
#gate.account-workspace .role{position:relative;min-height:172px;border:1px solid var(--line);border-radius:14px;background:var(--stage-glass);text-align:left;padding:22px 18px;color:var(--ink);font-family:var(--ui)}
#gate.account-workspace .role[hidden],#gate.account-workspace .role[data-open]{display:none!important}
#gate.account-workspace .role:hover{background:var(--panel2);border-color:var(--brass)}
#gate.account-workspace .role.suggested{border-color:var(--brass)}
#gate.account-workspace .role .num{font:22px var(--ui);margin:0 0 15px;color:var(--brass)}
#gate.account-workspace .role h3{font:600 17px var(--ui);margin:0 0 8px}
#gate.account-workspace .role p{font:13px/1.55 var(--ui);color:var(--dim);margin:0}
.account-launch-arrow{position:absolute;top:18px;right:16px;color:var(--dim)}
.account-home-overview{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:40px}
#accountServiceGlance,#gate.account-workspace .gate-roster{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:22px 0;margin:0;min-width:0}
.account-glance{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line2)}
.account-glance>span{font:12px var(--mono);color:var(--dim);padding-top:2px}
.account-glance h3{font:600 14px var(--ui);margin:0 0 6px}
.account-glance p{font:13px/1.6 var(--ui);color:var(--dim);margin:0;overflow-wrap:anywhere}
#gate.account-workspace .rosterlist{display:flex;flex-direction:column;gap:0;margin-top:16px}
#gate.account-workspace .rperson{border:0;border-bottom:1px solid var(--line2);background:none;border-radius:0;padding:12px 0;font:12px/1.5 var(--ui);color:var(--dim)}
#gate.account-workspace .rperson b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
#gate.account-workspace .gate-note{border:0;margin-top:24px;font:12px var(--ui)}
#signin.account-workspace,#authStartup.account-workspace{padding:max(24px,var(--safe-top)) max(20px,var(--safe-right)) max(24px,var(--safe-bottom)) max(20px,var(--safe-left))}
#signin.account-workspace .gate-inner{padding:32px;max-width:480px;background:var(--stage-glass);border:1px solid var(--line);border-radius:18px}
#signin.account-workspace h1{font:500 36px ui-serif,Georgia,serif;letter-spacing:-.035em;margin:30px 0 10px}
.account-workspace .field,.account-sheet .field{background:var(--panel2);color:var(--ink);border-color:var(--line);border-radius:9px;min-height:44px;font:14px var(--ui);padding:10px 12px;min-width:0}
#signin.account-workspace .gate-sub{font:14px/1.6 var(--ui);color:var(--dim)}
#signin.account-workspace #siGo{background:var(--brass);color:var(--stage-on-accent);min-height:46px}
#modal.account-sheet{align-items:center;justify-content:center;padding:20px}
#modal.account-sheet .sheet{border:1px solid var(--line);border-radius:17px;height:auto;max-height:calc(100% - 20px);width:min(520px,100%)}
#modal.account-sheet.workspace-wide .sheet{width:min(1120px,100%);height:calc(100% - 20px)}
#modal.account-sheet .sheet-head{padding:18px 24px;min-height:72px}
#modal.account-sheet .sheet-foot{padding:16px 24px;border-top:1px solid var(--line2);gap:12px}
#modal.account-sheet #modalBody{padding:26px 30px;overflow:auto}
#modal.account-sheet:has(.account-settings) #modalBody{padding:0}
.account-settings{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100%}
.account-settings>nav{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;gap:7px;padding:26px 18px;min-height:100%;border-right:1px solid var(--line2);background:var(--stage-glass)}
.account-settings>nav>small{font:12px var(--ui);color:var(--dim);margin:0 0 16px}
.account-settings>nav>.btn{text-align:left;justify-content:flex-start;white-space:normal;min-height:44px;border:0}
.account-settings form{padding:30px 32px;min-width:0}
.account-settings h2,.account-people-intro h2{font:500 28px/1.2 ui-serif,Georgia,serif;letter-spacing:-.02em;margin:7px 0 10px}
.account-settings section{padding:24px 0;border-bottom:1px solid var(--line2);scroll-margin-top:16px}
.account-settings h3{font:600 16px var(--ui);margin:0 0 18px}
.account-grid,.account-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
.account-field{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-bottom:16px;font:550 13px var(--ui);min-width:0}
.account-field small{font:400 12px/1.55 var(--ui);color:var(--dim)}
.account-field .field{width:100%;box-sizing:border-box}
.account-check{display:flex;gap:10px;align-items:center;min-height:44px;font:13px/1.4 var(--ui)}
.account-check input{width:18px;height:18px;flex:none;accent-color:var(--brass)}
.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--stage-accent-soft);color:var(--brass);font:600 13px var(--ui);flex:none}
#accountSaveStatus{font:12px/1.4 var(--ui);color:var(--dim)}
.account-people-intro{display:flex;align-items:center;gap:16px}.account-people-intro>div{flex:1}
.account-people-toolbar{display:flex;align-items:center;gap:18px;margin:24px 0 8px}
#accountPeopleSearch{max-width:390px;flex:1}
.account-sheet .peoplerow{border:0;border-bottom:1px solid var(--line2);border-radius:0;background:none;margin:0;padding:10px 0}
.account-sheet .prhead{gap:14px;padding:12px 0;background:none;flex-wrap:wrap}
.account-sheet .prhead .pri{flex:1;min-width:160px}
.account-sheet .prhead .nm{font:600 16px var(--ui);overflow-wrap:anywhere}
.account-sheet .prhead .sub{font:12px/1.6 var(--ui);margin-top:6px;white-space:normal}
.account-sheet .prhead>.spacer{display:none}
.account-sheet .prbody{padding:20px;background:var(--panel2);border:0;border-radius:10px}
.account-sheet .prbody .account-field{max-width:400px}
.account-sheet .rolechip{min-height:44px;gap:9px;padding:10px 12px;border-radius:9px}
.account-sheet .rolechip input{width:18px;height:18px;accent-color:var(--brass)}
.account-code,.account-password{display:flex;align-items:center;gap:8px;min-width:0}
.account-password{flex:1}.account-password input{flex:1;min-width:0;width:100%}
.account-code .code{min-width:74px;max-width:220px;overflow-wrap:anywhere;white-space:normal}
.account-code .btn,.account-password .btn{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px;flex:none}
.account-sheet .btn{min-height:44px}
#accountNewPerson{scroll-margin-top:14px}#accountNewPerson[hidden]{display:none}
@media(max-width:1000px){#gate.account-workspace .roles{grid-template-columns:repeat(3,minmax(0,1fr))}.account-home-header #whoName{width:100%;margin:0;text-align:right}.account-home-header{align-items:flex-start}}
@media(max-width:800px){.account-settings{grid-template-columns:160px minmax(0,1fr)}.account-settings form{padding:22px}.account-grid,.account-checks{grid-template-columns:1fr}.account-home-overview{gap:24px;grid-template-columns:minmax(0,1fr) minmax(220px,1fr)}}
@media(max-width:600px){
 #gate.account-workspace>.gate-inner{padding:26px 18px}.account-home-header{position:relative;padding:40px 14px 8px;gap:0;align-items:center}.account-home-header .wordmark{position:absolute;top:12px;left:14px}.account-home-header .whoami{gap:2px}.account-home-header #whoName{position:absolute;top:17px;right:18px;max-width:55%;width:auto;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-home-header .btn{padding:6px 8px;font-size:12px}
 .account-home-intro{grid-template-columns:1fr;gap:24px}.account-home-intro h1{font-size:38px}.account-home-overview{grid-template-columns:1fr;gap:12px}#gate.account-workspace .roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#gate.account-workspace .role{padding:16px;min-height:154px}.account-section-head{align-items:flex-start}.account-section-head>.hint{text-align:right;max-width:120px;margin:0}
 #modal.account-sheet{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}#modal.account-sheet .sheet,#modal.account-sheet.workspace-wide .sheet{height:100%;max-height:100%;width:100%;border:0;border-radius:0}#modal.account-sheet .sheet-head{padding:14px 18px;min-height:62px}#modal.account-sheet .sheet-foot{padding:12px 18px}#modal.account-sheet #modalBody{padding:20px}
 .account-settings{display:block}.account-settings>nav{position:static;min-height:0;flex-direction:row;flex-wrap:wrap;padding:12px;border-right:0;border-bottom:1px solid var(--line2);gap:3px}.account-settings>nav>.account-avatar,.account-settings>nav>small{display:none}.account-settings>nav>strong{width:100%;padding:4px 8px}.account-settings>nav>.btn{padding:8px}.account-settings form{padding:22px 20px}.account-people-intro{flex-wrap:wrap}.account-people-toolbar{flex-direction:column;align-items:stretch;gap:6px}#accountPeopleSearch{max-width:none}.account-sheet .prhead .account-avatar{display:none}.account-sheet .prhead .pri{min-width:180px}.account-sheet .prhead{gap:6px}.account-code{margin-left:auto}
}
@media(max-width:370px){#gate.account-workspace .roles{grid-template-columns:1fr}}
#gate.account-workspace,#signin.account-workspace,#authStartup.account-workspace{background:radial-gradient(ellipse at 3% 8%,#163f78,transparent 64%),radial-gradient(ellipse at 98% 96%,#591426,transparent 68%),#070e1d}
:root[data-ui="light"] #gate.account-workspace,:root[data-ui="light"] #signin.account-workspace,:root[data-ui="light"] #authStartup.account-workspace{background:linear-gradient(125deg,#b6cef1 0%,#e7eef7 34%,#f3f4f2 62%,#f2e8c9 82%,#edcf83 100%)}
.account-roster-person{display:flex;align-items:center;gap:12px;padding:12px 0}.account-roster-person strong{display:block;font:600 13px var(--ui);margin-bottom:4px}.account-roster-person small{color:var(--dim);font:12px/1.5 var(--ui)}
.account-checkin{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.account-settings-save{display:flex;gap:14px;align-items:center;margin-left:auto;margin-right:12px}.account-settings-save .spacer{display:none}
@media(max-width:600px){.account-settings-save{gap:6px;margin-right:4px}.account-settings-save #accountSaveStatus{max-width:110px;font-size:10px}.account-settings-save .btn{padding:8px;font-size:11px}#modal.account-sheet .sheet-head{gap:6px}}
/* CO.3 notes-first workspaces use the same stage shell and compact dock. */
#notesLayouts[hidden],#notesShow[hidden]{display:none!important}
.stage-workspace:not(.notes-workspace) #notesCurrent{display:none}
.notes-workspace #bandLyrics,.notes-workspace #noteGrip,.notes-workspace #stageInteractionMode,.notes-workspace #btnWorkspaceSignals,.notes-workspace .workspace-fire-row,.notes-workspace #stageChartOptions,.notes-workspace #workspaceLyricsLabel{display:none!important}
.notes-workspace #stagePerformanceRow{display:flex}
.notes-workspace #stageMain{padding-bottom:0!important}
.notes-workspace #stageParts{flex:1;min-width:0}
.notes-workspace #stageParts [aria-pressed="true"]{border-color:var(--brass);background:var(--stage-accent-soft)}
.notes-slide-label{align-self:center;padding:0 8px;font-size:11px;color:var(--dim)}
#bandView.notes-workspace #notesPane{display:flex!important;flex:1;min-height:0;height:auto!important;border:0;background:var(--panel)}
.notes-workspace .notebody.running{display:flex;flex:1;min-height:0;padding:0;overflow:hidden}
.notes-workspace #noteRun{flex:1;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;padding:24px 32px 60px;--note-size:24px}
.notes-workspace .notes-cue{margin:0 0 38px}
.notes-workspace .notes-cue h2{font:600 13px/1.5 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.notes-workspace .nblk{position:relative;padding:10px 16px;margin:0 0 12px;border:0;border-left:2px solid var(--line2);border-radius:0;background:transparent}
.notes-workspace .nblk.on{border-left-color:var(--brass);background:transparent}
.notes-workspace .nlbl{display:flex;align-items:center;gap:8px;min-height:44px;font:12px var(--ui);color:var(--dim)}
.notes-workspace .nlbl>span:first-child{flex:1;min-width:0}
.notes-workspace .notebody.running .ntext,.notes-workspace .notebody.running .nread,.notes-workspace #noteBox{font:400 var(--note-size)/1.65 var(--ui);white-space:pre-wrap;color:var(--ink)}
.notes-workspace .nempty{font:16px/1.6 var(--ui);color:var(--dim)}
.notes-workspace .noteedit{padding:0;background:none;border:0}
.notes-workspace .noteedit>#noteFor{display:none}
.notes-workspace #noteBox{width:100%;resize:vertical;min-height:180px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px}
.notes-workspace .stage-onair{left:-5px}
.notes-cue-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;color:var(--dim);font-size:12px}
#notesReferences{font:14px/1.6 var(--ui);padding:8px 0;display:flex;flex-wrap:wrap;gap:6px}
#notesReferences:empty{display:none}
.notes-workspace #workspaceDock{position:static;width:auto;max-width:none;display:flex;flex-direction:row;align-items:center;gap:10px;flex:none;align-self:stretch;border-radius:0;padding:12px 24px;border-width:1px 0 0;box-shadow:none}
.notes-workspace .workspace-drag{display:none}
#notesCurrent{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--dim)}
.notes-workspace #notesLayouts button{white-space:nowrap;font-size:11px;min-height:40px;padding:8px}
.notes-workspace #workspaceStepRow{flex:none}
.notes-workspace #stageControlsRow>.spacer{min-width:0}
.notes-workspace #stageControlsRow{gap:6px}
.notes-workspace #stageControlsRow .stage-lead-picker[hidden]{display:none!important}
@media(max-width:660px){.notes-workspace #noteRun{padding:18px 16px 35px}.notes-workspace #notesCurrent{display:none}.notes-workspace #workspaceDock{justify-content:flex-end}.notes-workspace #stageControlsRow{overflow-x:auto;flex-wrap:nowrap}.notes-workspace #stageControlsRow>*{flex-shrink:0}.notes-workspace #workspaceStepRow .btn{min-width:60px}.notes-workspace .nlbl{flex-wrap:wrap}}
/* Existing specialist dialogs keep their controls and save/Undo ownership. */
#modal.shared-workspace-dialog .sheet{width:min(880px,100%);max-height:100%;border-radius:0;background:var(--panel);color:var(--ink)}
#modal.shared-workspace-dialog .sheet-head{padding:20px 24px;border-bottom:1px solid var(--line2)}
#modal.shared-workspace-dialog #modalBody{padding:22px 24px}
#modal.shared-workspace-dialog .sect{background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:16px 0}
#modal.shared-workspace-dialog .field{border-radius:9px;min-height:40px}
#modal.shared-workspace-dialog .btn{min-height:40px;border-radius:9px}
#modal.shared-workspace-dialog .sheet-foot{border-top:1px solid var(--line2);padding:16px 24px;gap:8px;flex-wrap:wrap}
#modal.shared-workspace-dialog #modalTitle{font:600 20px var(--ui)}
.workspace-theme#chatPanel{font-family:var(--ui);background:var(--panel);color:var(--ink);border-color:var(--line);border-radius:16px;box-shadow:0 16px 50px #0004}
.workspace-theme#chatPanel .field{border-radius:9px;background:var(--panel2);color:var(--ink)}
.workspace-theme#vPop{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;font-family:var(--ui);max-width:none;max-height:none;overflow:hidden}
.workspace-passage .passage-drag{order:-3;flex:none;padding:12px 20px;min-height:44px;font:600 12px var(--ui);background:var(--panel2);color:var(--dim);touch-action:none;cursor:move;user-select:none}
.workspace-passage .vpopfoot{order:-2;flex:none;flex-wrap:wrap;padding:10px 20px}
.workspace-passage #vPopBody{flex:1;min-height:0;overflow:auto;padding:18px 20px}
.passage-resize{position:absolute;width:32px;height:32px;border:0;background:transparent;touch-action:none;z-index:5;color:var(--brass)}
.passage-resize:after{content:'';position:absolute;right:7px;bottom:7px;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0}
.passage-resize.se{right:0;bottom:0;cursor:nwse-resize}.passage-resize.sw{left:0;bottom:0;transform:rotate(90deg);cursor:nesw-resize}.passage-resize.ne{right:0;top:0;transform:rotate(-90deg);cursor:nesw-resize}.passage-resize.nw{left:0;top:0;transform:rotate(180deg);cursor:nwse-resize}

#noteRichPanel[hidden]{display:none}
.note-rich-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;align-items:center}
.note-rich-toolbar .btn{min-height:40px;min-width:40px}
.note-rich-toolbar label{display:flex;align-items:center;gap:5px;font:12px var(--ui)}
.note-rich-toolbar select{max-width:150px;min-height:40px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.note-rich-toolbar input[type=color]{width:40px;height:40px;background:var(--panel2);border:1px solid var(--line)}
#noteRich{min-height:180px;max-height:55vh;overflow:auto;white-space:pre-wrap;font:400 var(--note-size,24px)/1.65 var(--ui);color:var(--ink);padding:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
#noteRich:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#noteRich ul,#noteRich ol,.nread ul,.nread ol,.ntext ul,.ntext ol{margin:0;padding-inline-start:1.5em}
#noteRichStatus,.note-style-warning{font:13px/1.5 var(--ui);color:var(--dim);margin:8px 0}
.note-style-warning{color:var(--ink);padding:8px;background:var(--panel2)}
.note-rich-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
@media(max-width:660px){.note-rich-toolbar{gap:4px}.note-rich-toolbar .btn{min-height:44px}#noteRich{max-height:45vh}.note-rich-actions .btn{min-height:44px}}

.rich-note-editing .note-split-help{display:none}

#noteRichRecovery pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;max-height:25vh;overflow:auto;padding:12px;border:1px solid var(--line)}
.note-rich-actions{scroll-margin-bottom:100px}
#noteRichPanel.reviewing .note-rich-toolbar,#noteRichPanel.reviewing #noteRich,#noteRichPanel.reviewing #noteRichSave,#noteRichPanel.reviewing #noteRichReapply{display:none}
/* Keep accent actions legible under the stage button hover cascade. */
.notes-workspace .note-rich-actions .btn.accent:hover{background:var(--brass);color:var(--stage-on-accent);border-color:var(--brass)}

#presentationRich{min-height:180px;max-height:45vh;overflow:auto;white-space:pre-wrap;font-size:24px;line-height:1.5;padding:14px}
.presentation-rich-dialog .sheet{width:min(900px,100%)}
.presentation-rich-dialog .sheet-foot{flex-wrap:wrap}
.presentation-rich-dialog .sheet-foot .btn{min-height:44px}

/* CP.12.1.19: note actions share one persistent row; secondary choices keep the same selection owner. */
#noteRichPanel{position:relative;min-width:0}
#noteRichPanel .note-rich-toolbar{flex-wrap:nowrap;position:sticky;top:0;z-index:5;background:var(--ground);gap:6px}
#noteRichPanel .note-rich-toolbar>*{flex:none}
#noteRichPanel .note-rich-toolbar .btn,#noteRichPanel .note-rich-toolbar input{min-width:44px;min-height:44px}
#noteRichPanel .note-format-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:7px}
.note-format-icon svg{width:22px;height:22px}
.note-format-icon[data-note-command=bold]{font-weight:700}
.note-format-icon[data-note-command=italic]{font-style:italic}
.note-format-icon[data-note-command=underline]{text-decoration:underline}
.note-format-icon[data-note-command=strikeThrough]{text-decoration:line-through}
#noteRichPanel #noteRichSave{margin-left:auto;background:var(--brass);color:var(--stage-on-accent)}
#noteRichOverflow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:var(--ground);border:1px solid var(--line);border-radius:8px;max-height:35vh;overflow:auto}
#noteRichOverflow[hidden]{display:none}
#noteRichOverflow label{display:flex;align-items:center;gap:6px}
#noteRichOverflow select{max-width:170px;min-height:44px}
#noteRichHelp{position:fixed;z-index:100;pointer-events:none;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font:13px/1.4 var(--ui);max-width:calc(100vw - 16px)}
#noteRichHelp[hidden]{display:none}

.notes-keyboard-constrained #previewBar{display:none}
.notes-keyboard-constrained #noteRun{padding:8px 16px 16px}
.notes-keyboard-constrained .notes-cue>h2,.notes-keyboard-constrained .notes-cue-actions,.notes-keyboard-constrained .nblk:not(.editing),.notes-keyboard-constrained .nblk.editing>.nlbl,.notes-keyboard-constrained .nblk.editing .nread{display:none}
.notes-keyboard-constrained .notes-cue{margin:0}
.notes-keyboard-constrained #noteRich,.notes-keyboard-constrained #noteBox{min-height:96px;max-height:max(96px,calc(var(--workspace-height,100dvh) - 260px));resize:none}

/* The constrained editor scrolls its words, so the action row never covers the caret. */
.notes-keyboard-constrained #noteRun{overflow:hidden}
.notes-keyboard-constrained .notes-cue:not(:has(.nblk.editing)){display:none}
.notes-keyboard-constrained .notes-cue:has(.nblk.editing),.notes-keyboard-constrained .nblk.editing{height:100%;min-height:0}
.notes-keyboard-constrained .nblk.editing{display:flex;flex-direction:column;margin:0;padding:0;border:0}
.notes-keyboard-constrained .nslot,.notes-keyboard-constrained .noteedit,.notes-keyboard-constrained #noteRichPanel{display:flex;flex-direction:column;flex:1;min-height:0}
.notes-keyboard-constrained #noteRichPanel .note-rich-toolbar{position:static;flex:none}
.notes-keyboard-constrained #noteRich{flex:1;min-height:72px;max-height:none}
.notes-keyboard-constrained #noteRichStatus{flex:none;margin:4px 0;font-size:12px}
.notes-keyboard-constrained .note-rich-actions{flex:none;margin:4px 0}
#noteRichPanel .note-rich-toolbar select{max-width:150px;min-height:44px}
#noteRichPanel .note-rich-toolbar input[type=color]{width:44px;height:44px}

/* At a native landscape-keyboard height the surrounding navigation can leave
   no editing line. This focused state is temporary, never an account layout. */
#bandView.notes-keyboard-constrained{top:var(--notes-viewport-top,0px)}
.notes-keyboard-tight #stageWorkspaceHeader,.notes-keyboard-tight #stageWorkspaceTools,.notes-keyboard-tight #stagePerformanceRow,.notes-keyboard-tight #workspaceDock{display:none!important}
/* CO.3.3: all preview chrome shares the palette, including detached portals.
   Never target slidebox/cel content or the audience view with UI recolouring. */
.workspace-theme,.stage-workspace{
  --workspace-header:linear-gradient(110deg,#15315a 0%,#202038 48%,#492034 100%);
  --workspace-surround:radial-gradient(ellipse at 0% 0%,#163f7838,transparent 65%),radial-gradient(ellipse at 100% 100%,#59142638,transparent 65%),var(--ground);
}
:root[data-ui="light"] .workspace-theme,:root[data-ui="light"] .stage-workspace{
  --workspace-header:linear-gradient(110deg,#d5e4f8 0%,#f5edf4 52%,#f0dfb3 100%);
}
#techWorkspace.workspace-theme #techWorkspaceHeader,
.stage-workspace #stageWorkspaceHeader,
.account-workspace .account-home-header,
#ceHost.workspace-theme .cehead,#beHost.workspace-theme .behead,
#modal.workspace-theme .sheet-head,#chatPanel.workspace-theme .chathead,
#vPop.workspace-theme .passage-drag,#spotDock.workspace-theme .spothead{background:var(--workspace-header);color:var(--ink)}
#ceHost.workspace-theme,#beHost.workspace-theme{background:var(--ground);padding-bottom:var(--safe-bottom)}
#ceHost.workspace-theme #ceWrap,#beHost.workspace-theme #beWrap{background:var(--workspace-surround)}
#ceHost.workspace-theme .cehead,#beHost.workspace-theme .behead{gap:8px;padding:10px 16px}
#ceHost.workspace-theme #ceName{flex:1 1 170px;min-width:120px;max-width:260px;height:40px!important}
#ceHost.workspace-theme .cehead>.spacer{display:none}
#ceHost.workspace-theme .cetools{flex-wrap:nowrap;gap:4px}
#ceHost.workspace-theme #ceDone{margin-left:auto}
#ceHost.workspace-theme #cePanel,#beHost.workspace-theme #bePanel{padding:16px;background:var(--panel)}
#ceHost.workspace-theme .field,#beHost.workspace-theme .field{border-radius:8px}
#ceHost.workspace-theme .cepos{width:80px!important;min-width:0}
#ceHost.workspace-theme .btn,#beHost.workspace-theme .btn{min-height:40px}
#ceSnap[hidden]{display:none!important}
#ceSnap{min-width:82px;justify-content:center;touch-action:manipulation}
#ceSnap[aria-pressed="true"]{background:var(--stage-accent-soft);border-color:var(--brass);color:var(--brass)}
.workspace-theme .pselbtn{font-family:var(--ui);border-radius:8px;min-height:38px}
:root .secmenu.workspace-theme .inner{background:var(--panel);border-color:var(--line);box-shadow:0 12px 36px #0004;backdrop-filter:none;-webkit-backdrop-filter:none}
.secmenu.workspace-theme button{font-family:var(--ui);color:var(--ink);text-shadow:none;min-height:40px}
.secmenu.workspace-theme button:hover,.secmenu.workspace-theme button:focus{background:var(--panel3);color:var(--ink)}
.secmenu.workspace-theme button.on{color:var(--brass)}
.workspace-theme .seg button.on{color:var(--stage-on-accent)}
.workspace-theme .btn.accent:hover{background:var(--brass);filter:brightness(1.08)}
.workspace-theme .targetpick:hover,.workspace-theme .targetpick[aria-expanded="true"]{color:var(--brass)}
.addmenu.workspace-theme button:hover,.addmenu.workspace-theme button:focus{color:var(--stage-on-accent)}
#chatPanel.workspace-theme .msg.mine,#chatPanel.workspace-theme .tobar button.on,
#chatPanel.workspace-theme .bubrow button.on,#chatPanel.workspace-theme .slotrow .slot.open,
#chatPanel.workspace-theme .crumbs .cr,#chatBub.workspace-theme.unread{color:var(--stage-on-accent)}
#chatBub.workspace-theme{border-color:var(--line)}
.dhud.workspace-theme{border-radius:10px;background:var(--stage-glass);padding:6px}
@media(max-width:660px){
  #ceHost.workspace-theme .cehead,#beHost.workspace-theme .behead{padding:8px;gap:6px}
  #ceHost.workspace-theme .cetools{order:2;width:100%;overflow-x:auto}
  #ceHost.workspace-theme .cetools>.btn{flex:none}
  #ceHost.workspace-theme #cePanel,#beHost.workspace-theme #bePanel{padding:12px}
}

/* CO.3.8: one continuous canvas through the iPad status/safe areas. The main
   header samples the page behind it rather than restarting a short gradient. */
:root.workspace-app{
  --workspace-background:radial-gradient(ellipse at 3% 8%,#163f78,transparent 64%),radial-gradient(ellipse at 98% 96%,#591426,transparent 68%),#070e1d;
  --workspace-reading-glass:#00000038;
  --workspace-overlay:#00000030;
  background:var(--workspace-background);background-attachment:fixed;
}
:root.workspace-app[data-ui="light"]{
  --workspace-background:linear-gradient(125deg,#b6cef1 0%,#e7eef7 34%,#f3f4f2 62%,#f2e8c9 82%,#edcf83 100%);
  --workspace-reading-glass:#ffffff38;
  --workspace-overlay:#ffffff30;
}
.workspace-app body{min-height:100dvh;background:transparent}
:root .account-workspace,:root #bandView.stage-workspace,:root #opShell.tech-workspace{background:var(--workspace-background)}
:root #techWorkspace.workspace-theme{background:transparent}
:root #techWorkspace.workspace-theme #techWorkspaceHeader,
:root .stage-workspace #stageWorkspaceHeader,
:root .account-workspace .account-home-header{background:transparent;border:0;border-bottom:1px solid var(--line);box-shadow:none}
#bandView.stage-workspace,#bandView.stage-workspace.full{height:var(--workspace-height,100dvh);padding-bottom:0}
#opShell.tech-workspace{height:var(--workspace-height,100dvh);padding-bottom:0}
#techWorkspaceFooter{margin-top:auto;padding-bottom:calc(9px + var(--safe-bottom))}
#bandView.stage-workspace .bandlyrics,#bandView.notes-workspace #notesPane{
  background:var(--workspace-reading-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#bandView.stage-workspace:not(.notes-workspace) #workspaceDock{bottom:0;padding-bottom:calc(7px + var(--safe-bottom))}
#bandView.notes-workspace #workspaceDock{margin-top:auto;padding-bottom:calc(12px + var(--safe-bottom))}
#noteSplitError{flex:none;margin:0;padding:10px 18px;background:var(--panel2);color:var(--brass);font:13px/1.5 var(--ui)}
.note-split-help{font:12px/1.5 var(--ui);color:var(--dim);margin:8px 0}
#vPop.workspace-passage .vpopfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.workspace-passage .passage-actions{display:flex;align-items:center;gap:6px;flex:1 0 100%;min-width:0}
.workspace-passage .vpicks{flex:1;min-width:0;flex-wrap:wrap}
#vPop.workspace-passage .vpopfoot button{min-height:44px}
#vPop.workspace-passage #vPopClose{flex:0 0 44px;width:44px;min-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#vPop.workspace-passage #passageExpand,#vPop.workspace-passage #vPopWhole{flex:0 0 auto;width:auto;min-width:0;padding:7px 10px}
#vPop.workspace-passage #vPopRef{flex:1;min-width:100px}
#vPop.workspace-passage .vpopfoot{padding:10px 16px}

/* CO.3.9: neutral layers separate controls without replacing the shared
   gradient with the old purple panel colour. Opacity belongs to the surface,
   never to its text/icons. Detached panels carry the same canvas themselves;
   they do not need expensive blur layers over every nested control. */
:root .workspace-theme,:root #bandView.stage-workspace{
  --panel:#00000038;--panel2:#00000052;--panel3:#00000070;
  --panel-t:#000000b8;--panel2-t:#00000085;--stage-glass:var(--panel);
  --workspace-header:var(--panel2);
}
:root[data-ui="light"] .workspace-theme,:root[data-ui="light"] #bandView.stage-workspace{
  --panel:#ffffff38;--panel2:#ffffff70;--panel3:#ffffffa3;
  --panel-t:#ffffffb8;--panel2-t:#ffffff85;--stage-glass:var(--panel);
  --workspace-header:var(--panel2);
}
/* Keep the Home header in the fixed shell; only its page content scrolls. */
#gate.account-workspace{height:var(--workspace-height,100dvh);overflow:hidden}
#gate.account-workspace>.gate-inner{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* The content already uses a translucent layer, so nested strips must not
   double-darken it accidentally. Selected states keep their semantic accents. */
.stage-workspace #stagePerformanceRow #stageParts{background:transparent}
.stage-workspace .odhead,.stage-workspace .odadd{background:var(--panel)}
.stage-workspace #stageReadingOptions,
#modal.workspace-theme .sheet,#chatPanel.workspace-theme,#vPop.workspace-theme,
#spotDock.workspace-theme,.workspace-context.workspace-theme,
:root .secmenu.workspace-theme .inner{
  background:linear-gradient(var(--workspace-overlay),var(--workspace-overlay)),var(--workspace-background);
  background-attachment:fixed;
}
#ceHost.workspace-theme,#beHost.workspace-theme{background:var(--workspace-background)}
#ceHost.workspace-theme #ceWrap,#beHost.workspace-theme #beWrap{background:var(--panel)}
.stage-workspace #workspaceQueuePreview{
  background:linear-gradient(var(--workspace-overlay),var(--workspace-overlay)),var(--workspace-background);
  background-attachment:fixed;box-shadow:0 -12px 24px #0002;
}
@media(max-width:1000px){#techWorkspaceFooter{padding-bottom:calc(8px + var(--safe-bottom))}}

/* Section cleanup keeps a compact, keyboard/touch-accessible cue checklist. */
.section-cue-tools{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.section-cue-tools .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#gCueList{max-height:35vh;overflow:auto;margin:10px 0}
.section-cue-choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px;cursor:pointer;border-bottom:1px solid var(--line2)}
.section-cue-choice input{width:20px;height:20px;flex-shrink:0}
.section-cue-choice span{min-width:0;overflow-wrap:anywhere}
.section-cue-choice small{display:block;color:var(--muted);margin-top:3px}
#gCueConfirm{padding:12px;margin-top:12px;border:1px solid var(--accent);border-radius:8px}

/* The box outline is editor chrome; it never travels to the audience. */
#modal.song-layout-modal .sheet{max-width:900px}
.song-layout-preview{position:relative;margin:16px 0}
#songLayoutScreen{width:100%;border-radius:4px}
#songLayoutBox{position:absolute;border:2px dashed var(--brass);cursor:move;touch-action:none;outline-offset:3px}
#songLayoutResize{position:absolute;right:-12px;bottom:-12px;width:32px;height:32px;padding:0;border:1px solid var(--brass);background:var(--panel);color:var(--ink);border-radius:6px;cursor:nwse-resize;touch-action:none}
.song-layout-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}
.song-layout-fields label{font-size:13px;color:var(--dim)}
.song-layout-fields .field{width:100%;margin-top:4px}
#songLayoutEditor>.row{flex-wrap:wrap;gap:12px}
#songLayoutColour{width:50px;height:36px}
@media(max-width:550px){.song-layout-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CP.5.1: attention occupies the existing toolbar rather than inserting a row. */
#stageWorkspaceTools{position:relative}
.stage-workspace #stageCueStatus{position:absolute;top:0;bottom:0;left:var(--cue-left,0px);right:var(--cue-actions-width,190px);z-index:2;height:auto;min-height:0;max-height:none;border:0;background:linear-gradient(var(--panel2),var(--panel2)),var(--workspace-background);pointer-events:none}
.stage-workspace #stageWorkspaceTools.has-cue-status .stage-lead-picker,
.stage-workspace #stageWorkspaceTools.has-cue-status #bandControlRow,
.stage-workspace #stageWorkspaceTools.has-cue-status #stageSignalsTray{visibility:hidden}
.stage-workspace #stageCueStatus.part-cue-flash{animation:part-cue-attention 900ms ease-out 1}
@keyframes part-cue-attention{0%,18%{background:#ffcf52;color:#302035}100%{background:var(--panel2);color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.stage-workspace #stageCueStatus.part-cue-flash{animation:none}}
#stageReadingActions{gap:5px}
.stage-workspace #stageReadingActions>.btn,.stage-workspace #stageReadingActions>.statelamp{padding-left:7px;padding-right:7px;min-height:40px}
.stage-workspace #stageReadingActions>.statelamp{letter-spacing:.05em}
.stage-workspace #btnStageModeHelp{flex:none}
/* Continue the shell canvas under the home indicator; interactive controls
   remain padded above it. Browser-owned bars are outside the document. */
:root.workspace-app body{background:var(--workspace-background);background-attachment:fixed}
@media(min-width:661px) and (max-width:1050px){
 #techWorkspaceFooter{flex-wrap:wrap;overflow:visible}
 #techWorkspaceFooter>.spacer{display:none}
 #techStepSlot{margin-left:auto}
 #techWorkspaceFooter .btn{min-height:40px}
}

.stage-workspace #cueShowControls{pointer-events:auto;flex:none;min-width:34px;padding:4px;font-size:18px}
.stage-workspace #stageCueStatus .who{overflow:hidden;text-overflow:ellipsis;max-width:25%}
/* A visible recovery action must receive pointer/touch itself even if a
   surrounding notification surface is non-interactive. Hidden toasts cannot. */
#toast.on.actionable,#toast.on.actionable>button{pointer-events:auto}
#toast.on.takeover{animation:takeover-notice .8s ease-in-out 3}
@keyframes takeover-notice{0%,100%{opacity:1}50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){#toast.on.takeover{animation:none}}
/* The dock uses footer width after the Running Order border, never another row. */
/* CP.8.3: below 1101px the docked footer wraps like the undocked one (CP.8.1 rules); this nowrap/scroll rule applies only to wide desks. */
@media(min-width:1101px){#techWorkspace.tech-docked #techWorkspaceFooter{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}#techWorkspace.tech-docked #techWorkspaceFooter .btn{padding-left:6px;padding-right:6px}#techWorkspace.tech-docked #techStepSlot .tbig{padding-left:6px;padding-right:6px}}

/* Tighten chord leading and row gaps, keeping lyric metrics and word groups. */
#bandView.stage-workspace:not(.notes-workspace) .cseg .chd,
#bandView.stage-workspace:not(.notes-workspace) .cseg .chord-space{line-height:.875}
#bandView.stage-workspace:not(.notes-workspace) .cline:not(.empty):not(.barline){margin-bottom:calc(4px - .03em)}

/* Keep reading beside the floating cluster; only the scroll tail clears it. */
#bandView.stage-workspace:not(.notes-workspace) .bandlyrics{padding-bottom:calc(var(--workspace-dock-height,107px) + var(--safe-bottom) + 34px)}
#bandView.stage-workspace:not(.notes-workspace) #chatBub{bottom:calc(var(--workspace-dock-height,107px) + var(--safe-bottom) + 22px)!important}

/* Short landscape keeps the compact cluster in two columns. */
@media(max-height:500px){
 #bandView.stage-workspace:not(.notes-workspace) #workspaceDock{display:grid;grid-template-columns:1fr 1fr;width:min(360px,calc(100% - 28px));gap:4px}
 #bandView.stage-workspace:not(.notes-workspace) #workspaceDock #singerQueueNextRow{grid-column:1/-1}
 #bandView.stage-workspace:not(.notes-workspace) #workspaceDock #workspaceGo{min-height:40px}
}

#vPopActions{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}#vPopActions[hidden]{display:none}#vPopStatus{flex-basis:100%;font-size:12px;color:var(--dim)}

#ugBody .import-part-review h3,#ugBody .import-fields h3{font-size:16px;margin:18px 0 10px}#ugBody .import-part-row{border-top:1px solid var(--line);padding:14px 0}#ugBody .import-part-row h4{margin:0 0 10px;font-size:15px}#ugBody .import-part-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}#ugBody .import-part-columns pre{white-space:pre-wrap;font-size:13px;line-height:1.5;margin:8px 0}#ugBody .import-fields .row{min-height:40px}
@media(max-width:660px){#ugBody .import-part-columns{grid-template-columns:1fr}}
/* Personal annotations decorate the existing stage reading nodes. They never
   introduce another lyric layout, minimum line height or editable margin. */
.ann-inline{--ann-gold:var(--brass,#e7bf62);--ann-red:var(--live,#fa8fa0);--ann-teal:var(--stage-other,#8bcfc5)}
.annotation-host{position:relative;z-index:4;display:flex;flex-direction:column;flex:none;min-height:0;max-height:42%;overflow:auto;color:var(--ink);background:var(--stage-glass);border-bottom:1px solid var(--line);font-family:inherit}
.annotation-host[hidden],.annotation-host [hidden]{display:none!important}
.ann-panel button,.ann-panel select,.ann-panel input{font:inherit;color:inherit}
.ann-panel button,.ann-panel select{min-height:36px;border:1px solid var(--line);border-radius:9px;background:transparent;padding:5px 9px;cursor:pointer;font-size:12px}
.ann-panel button:focus-visible,.ann-panel select:focus-visible,.ann-panel input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.ann-panel button:disabled{opacity:.38;cursor:default}
.ann-panel button[aria-pressed=true],.ann-panel .ann-primary{background:var(--brass);color:var(--accent-ink,#211c16);border-color:var(--brass)}
:root[data-ui=light] .ann-panel .ann-primary,:root[data-ui=light] .ann-panel button[aria-pressed=true]{color:#fff}
.ann-top{padding:8px 12px;flex-shrink:0}
.ann-titlebar,.ann-layerbar,.ann-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ann-titlebar>div{min-width:0}.ann-titlebar h2{font-size:14px;margin:0}.ann-titlebar .ann-kicker{display:none}
.ann-spacer{flex:1}.ann-layerbar{margin-top:6px}.ann-layerbar select{max-width:200px}.ann-layerbar [data-ann=status]{font-size:12px;color:var(--dim)}
.ann-toolbar{margin-top:6px}.ann-panel [data-action=mode]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ann-pencil{width:30px;height:30px;flex:none}
.ann-hint{font-size:12px;color:var(--dim);line-height:1.5;margin:5px 0 0}
.ann-footer{display:flex;gap:10px;padding:4px 12px;align-items:center;flex-shrink:0;font-size:11px;color:var(--dim)}.ann-footer span{flex:1}
.ann-review{border:1px solid var(--live);border-radius:10px;padding:12px;margin:8px 12px}.ann-review h3{color:var(--live);margin:0 0 8px;font-size:15px}.ann-review p{font-size:14px;line-height:1.6;overflow-wrap:anywhere}.ann-review svg{width:180px;height:70px;background:#ffffff08}.ann-review svg path{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.ann-empty{padding:12px;font-size:14px;line-height:1.6}
.ann-layereditor{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:8px}.ann-layereditor input{max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px}.ann-layereditor label{min-width:0}
.ann-notice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line);font-size:13px}.ann-notice span{flex:1}
.ann-reading-size{position:relative;min-height:100%;box-sizing:border-box}.ann-reading-page{position:relative;left:0;top:0;transform-origin:top left;box-sizing:border-box}
:is(#bandLyrics,.ann-preview-body) .ann-row{position:relative}
:is(#bandLyrics,.ann-preview-body) .ann-surface{position:absolute;inset:0;overflow:hidden;pointer-events:none}
:is(#bandLyrics,.ann-preview-body) .ann-surface>svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:hidden;pointer-events:none}
:is(#bandLyrics,.ann-preview-body) .ann-surface svg path{fill:none;vector-effect:non-scaling-stroke;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
:is(#bandLyrics,.ann-preview-body) .ann-highlight{background:color-mix(in srgb,var(--brass) 15%,transparent)}
:is(#bandLyrics,.ann-preview-body) .ann-textboxes{position:absolute;inset:0;z-index:3;pointer-events:none}
:is(#bandLyrics,.ann-preview-body) .ann-textbox{position:absolute;pointer-events:auto;overflow:hidden;border:1px solid transparent;border-radius:4px;background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--ann-note-color,var(--brass));font-size:var(--ann-note-size,15px);line-height:1.25;box-sizing:border-box;cursor:pointer}
:is(#bandLyrics,.ann-preview-body) .ann-textcontent{height:100%;width:100%;padding:1px 4px;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;outline:none;user-select:none;-webkit-user-select:none}
:is(#bandLyrics,.ann-preview-body) .ann-textcontent[data-empty=true]:not([contenteditable=true])::before{content:'Double tap to type';opacity:.7;font-size:12px}
:is(#bandLyrics,.ann-preview-body) .ann-textcontent[contenteditable=true]{background:var(--panel);border:1px solid var(--brass);user-select:text;-webkit-user-select:text;touch-action:auto;cursor:text}
.ann-inline.is-editing :is(#bandLyrics,.ann-preview-body) .ann-textbox.selected{border:1px dashed var(--brass)}
.ann-inline.is-editing :is(#bandLyrics,.ann-preview-body) .ann-textbox{cursor:move;touch-action:none}
.ann-inline.is-editing :is(#bandLyrics,.ann-preview-body) .ann-surface{pointer-events:auto}
.ann-inline.is-editing :is(#bandLyrics,.ann-preview-body) .ann-surface svg path{pointer-events:stroke}
.ann-inline.is-editing :is(#bandLyrics,.ann-preview-body) .ann-surface svg path[data-provisional]{pointer-events:none}
.ann-inline.is-editing:not([data-tool=pan]) :is(#bandLyrics,.ann-preview-body),.ann-inline.is-editing:not([data-tool=pan]) :is(#bandLyrics,.ann-preview-body) .ann-surface{touch-action:none;user-select:none;-webkit-user-select:none}
.ann-inline.ann-typing.is-editing :is(#bandLyrics,.ann-preview-body),.ann-inline.ann-typing.is-editing :is(#bandLyrics,.ann-preview-body) .ann-surface,.ann-inline.ann-typing.is-editing :is(#bandLyrics,.ann-preview-body) .ann-textbox{touch-action:auto}
:is(#bandLyrics,.ann-preview-body) [data-attach]{position:absolute;right:0;top:0;z-index:5;font-size:12px;pointer-events:auto}
#stageControlsRow #btnSingerQueue,#stageControlsRow #btnSongAnnotations{order:3;flex:none;white-space:nowrap;font-size:11px;padding:5px 8px;min-height:36px}
#stageControlsRow #btnSongAnnotations[aria-expanded=true]{color:var(--brass);border-color:var(--brass)}
@media(max-width:660px){#stageControlsRow{flex-wrap:wrap}#stageControlsRow #btnSingerQueue,#stageControlsRow #btnSongAnnotations{font-size:10px;padding:5px}.ann-titlebar h2{display:none}.ann-titlebar{gap:4px}.ann-layerbar{margin-top:4px;gap:5px}.ann-layerbar select{max-width:140px}.ann-toolbar{gap:4px}.ann-footer{flex-wrap:wrap;column-gap:7px}.ann-hint{font-size:11px}.ann-top{padding:6px}}
@media(prefers-reduced-motion:reduce){.ann-inline *{scroll-behavior:auto}}

#stageControlsRow{height:auto;min-height:57px;flex-wrap:wrap;overflow:visible}
#stageControlsRow>.btn,#stageControlsRow #bandControlRow{flex-shrink:0}

.ann-layereditor [data-action$="copy"]{min-height:44px}

.ann-preview-body{max-height:44vh;overflow:auto;padding:12px;position:relative}.ann-preview-body .bsec{padding:8px}.ann-preview-body .bline{font-size:24px}.ann-preview-body .ann-reading-page{min-width:0}