/* MUNO - main player, venue control column, full-page views.
   Rule of this file: there is ONE player and it is the room. Nothing else plays audio. */

/* ============ full-page views (catalogue / settings) ============ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:2px 2px 22px}
.page-title{font-family:var(--font-display);font-size:30px;font-weight:700;margin:0}
.page-sub{font-size:12.5px;color:var(--muted);margin:6px 0 0;max-width:620px}
.page-head .search{min-width:300px}

/* ============ VENUE CONTROL column - this column owns the room ============ */
.col-ctl{display:flex;flex-direction:column;gap:10px;overflow:hidden}

/* 1. autonomy state */
.aut{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-2);
  background:var(--surface);border:1px solid var(--surface-brd)}
.aut-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#35C4B5;
  box-shadow:0 0 0 4px rgba(53,196,181,.16);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
.aut.warn .aut-dot{background:var(--sun);box-shadow:0 0 0 4px rgba(243,178,76,.18);animation:none}
.aut-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.aut-tx b{font-size:13.5px;font-weight:600;line-height:1.2}
.aut-tx span{font-size:11px;color:var(--muted);margin-top:2px}
.aut-btn{font-family:var(--font-ui);width:34px;height:34px;border-radius:8px;flex:none;cursor:pointer;display:grid;place-items:center;
  background:transparent;border:1px solid var(--surface-brd);color:var(--ink);transition:var(--t-fast)}
.aut-btn svg{width:15px;height:15px;display:block}
.aut-btn:hover{background:var(--surface-hover)}
.aut-btn:disabled{opacity:.35;cursor:not-allowed}

/* 2. fit to plan - an instrument, not decoration */
.fit{padding:0 2px}
.fit-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px}
.fit-top span{color:var(--muted)}
.fit-top b{font-family:var(--font-display);font-weight:700;font-size:12.5px}
.fit-scale{position:relative;height:10px;margin:10px 0 7px;border-radius:2px;background:var(--track)}
.fit-band{position:absolute;top:-3px;bottom:-3px;border-radius:3px;background:rgba(62,133,211,.18);
  border-left:1px solid rgba(62,133,211,.45);border-right:1px solid rgba(62,133,211,.45)}
.fit-mark{position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--accent);
  box-shadow:0 0 0 3px var(--glass-bg);transition:left 1.2s cubic-bezier(.25,1,.5,1)}
.fit-mark.off{background:var(--sun)}
.fit-ends{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.fit-ends span:nth-child(2){color:var(--ink);letter-spacing:.04em;text-transform:none;font-size:11px}

/* 3. temporary, self-expiring actions */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.act{position:relative;overflow:hidden;font-family:var(--font-ui);font-size:12px;font-weight:500;text-align:left;
  padding:9px 12px;border-radius:var(--r-1);cursor:pointer;color:var(--accent-deep);
  background:rgba(255,255,255,.38);backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(62,133,211,.28);
  box-shadow:0 2px 8px rgba(40,80,130,.08),inset 0 1px 0 rgba(255,255,255,.7);transition:var(--t-fast)}
[data-theme="dark"] .act{color:var(--accent-glow);background:rgba(255,255,255,.09);
  border-color:rgba(127,176,230,.3);box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14)}
.act i{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:2px;font-weight:400}
.act:hover{background:rgba(255,255,255,.55);transform:translateY(-1px)}
[data-theme="dark"] .act:hover{background:rgba(255,255,255,.15)}
.act.on{border-color:var(--sun);background:rgba(243,178,76,.14)}
.act.on i{color:var(--ink);opacity:.7}

/* 4. return to auto */
.ret{position:relative;overflow:hidden;width:100%;font-family:var(--font-ui);font-size:13px;font-weight:500;
  padding:11px;border-radius:var(--r-1);cursor:pointer;color:var(--accent-deep);
  background:rgba(62,133,211,.14);border:1px solid rgba(62,133,211,.42);transition:var(--t-fast)}
.ret[hidden]{display:none}
.ret:hover{background:rgba(62,133,211,.22)}

/* 5. system confidence */
.sys{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 14px;
  padding-top:10px;border-top:1px solid var(--hairline)}
.sys div{display:flex;align-items:baseline;gap:6px;font-size:11.5px}
.sys span{color:var(--muted)}
.sys b{font-weight:600;font-size:11.5px}

/* ============ queue rows - click starts that track in the room ============ */
.qrow .qplay{opacity:0}
.qrow:hover .qplay{opacity:1}

/* ============ MAIN PLAYER BAR - bottom of every screen, always the room ============ */
.playerbar{flex:none;margin-top:12px;display:flex;align-items:center;gap:22px;
  padding:10px 18px;border-radius:var(--r-2);border-top:2px solid var(--accent)}
.pb-now{display:flex;align-items:center;gap:13px;width:23%;min-width:0;flex:none}
.pb-cover{width:58px;height:58px;border-radius:4.5px;flex:none;background-size:cover;background-position:center;
  box-shadow:0 6px 16px rgba(60,90,130,.28),inset 0 0 0 1px rgba(255,255,255,.22)}
.pb-meta{min-width:0}
.pb-eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block}
.pb-title{font-size:14px;font-weight:600;line-height:1.2;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-artist{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{flex:1;display:flex;align-items:center;gap:13px;min-width:0;max-width:680px;margin:0 auto}
/* No discs behind the transport: the glyph is the button. Press feedback is scale and
   colour on interruptible transitions, so releasing mid-press returns smoothly. */
.pb-btn,.pb-skip,.pb-prev{position:relative;font-family:var(--font-ui);flex:none;cursor:pointer;
  display:grid;place-items:center;background:none;border:none;border-radius:var(--r-1);color:var(--ink);
  transition:transform 140ms cubic-bezier(.2,0,0,1),color 160ms ease-out}
.pb-btn:hover,.pb-skip:hover,.pb-prev:hover{color:var(--accent-deep)}
[data-theme="dark"] .pb-btn:hover,[data-theme="dark"] .pb-skip:hover,[data-theme="dark"] .pb-prev:hover{color:var(--accent-glow)}
.pb-btn:active,.pb-skip:active,.pb-prev:active{transform:scale(.88)}
.pb-btn:focus-visible,.pb-skip:focus-visible,.pb-prev:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pb-btn{width:62px;height:62px;color:var(--accent-deep)}
[data-theme="dark"] .pb-btn{color:var(--accent-glow)}
.pb-btn svg{width:42px;height:42px;display:block}
.pb-skip,.pb-prev{width:42px;height:42px}
.pb-skip svg,.pb-prev svg{width:22px;height:22px;display:block;transition:transform 150ms ease-out}
.pb-skip:hover svg{transform:translateX(2px)}
.pb-prev:hover svg{transform:translateX(-2px)}
/* both icons live in the button and cross-fade, so play->pause animates in and out
   (better-ui: scale .25->1, opacity 0->1, blur 4px->0 on cubic-bezier(.2,0,0,1)) */
.ic{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity 300ms cubic-bezier(.2,0,0,1),transform 300ms cubic-bezier(.2,0,0,1),filter 300ms cubic-bezier(.2,0,0,1)}
.ic svg{width:42px;height:42px;display:block}
.ic-pause{opacity:0;transform:scale(.25);filter:blur(4px)}
.ic-play{opacity:1;transform:scale(1);filter:blur(0)}
.playing .ic-play{opacity:0;transform:scale(.25);filter:blur(4px)}
.playing .ic-pause{opacity:1;transform:scale(1);filter:blur(0)}
@media (prefers-reduced-motion: reduce){.ic{transition-duration:1ms!important}}

.pb-t{font-size:15.3px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.pb-vol{display:flex;align-items:center;gap:10px;flex:none}
.progress{flex:1;height:5px;border-radius:var(--r-pill);background:var(--track);position:relative;cursor:pointer}
.pfill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:var(--r-pill);background:var(--accent)}
/* one-tone icon, and it is the mute switch */
.vol-btn{font-family:var(--font-ui);width:36px;height:36px;flex:none;cursor:pointer;
  display:grid;place-items:center;color:var(--muted);background:transparent;border:none;
  border-radius:var(--r-1);transition:color 150ms ease-out,background 150ms ease-out,transform 150ms ease-out}
.vol-btn svg{width:24px;height:24px;display:block}
.vol-btn:hover{color:var(--ink);background:var(--surface-hover)}
.vol-btn:active{transform:scale(.94)}
.vol-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pb-vol.muted .vol-btn{color:#c0392f}
.pb-vol.muted .vol{opacity:.35}
/* volume: the same blocks, sliced diagonally so they climb - a cascade, not a bar */
.vol{width:104px;height:18px;position:relative;cursor:pointer;background:var(--track);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px);
  mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px);
  -webkit-clip-path:polygon(0 100%,100% 12%,100% 100%);
  clip-path:polygon(0 100%,100% 12%,100% 100%)}
.vol-fill{position:absolute;left:0;top:0;height:100%;width:70%;background:var(--accent)}

@media(max-width:900px){.pb-vol{display:none}.pb-now{width:38%}}

/* ============ settings controls - flat geometry, no capsules ============ */
.set-title.sm{font-size:18px}
.set-sub.tight{margin-bottom:10px}
.field.narrow{max-width:150px}
.btnrow{display:flex;gap:10px;margin-top:18px}
.rowsub.mt{margin-top:12px}
.seg.wrap{max-width:640px}

/* vocal <-> instrumental slider */
.mixhead{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 10px;max-width:600px}
.mixend{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mixval{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--accent-deep)}
[data-theme="dark"] .mixval{color:var(--accent-glow)}
.mix{position:relative;height:26px;max-width:600px;cursor:pointer;touch-action:none;outline:none}
.mix-track{position:absolute;top:9px;left:0;right:0;height:8px;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,rgba(53,196,181,.35),rgba(62,133,211,.35))}
.mix-fill{position:absolute;left:0;top:0;bottom:0;width:70%;background:var(--accent)}
.mix-knob{position:absolute;top:4px;left:70%;width:12px;height:18px;border-radius:3px;
  transform:translateX(-50%);background:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.28);pointer-events:none}
.mix:focus-visible .mix-knob{box-shadow:0 0 0 3px rgba(62,133,211,.45)}
.mixnote{margin-top:14px;max-width:600px;font-size:11.5px;color:var(--muted);line-height:1.55}

/* numeric stepper */
.step{display:inline-flex;align-items:center;gap:2px;margin-top:9px;
  border:1px solid var(--hairline);background:var(--surface);border-radius:var(--r-1);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.stepbtn{width:38px;height:38px;border-right:1px solid var(--hairline);font-size:16px;line-height:1;cursor:pointer;color:var(--ink);
  background:transparent;border:none;font-family:var(--font-ui);transition:var(--t-fast)}
.stepbtn:hover{background:var(--surface-hover);color:var(--accent-deep)}
.step-val{min-width:92px;border-right:1px solid var(--hairline);padding:0 4px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* the brief + its example buttons */
.field.brief{line-height:1.5;resize:vertical;min-height:88px}
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px}
.ex-lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.exbtn{font-family:var(--font-ui);font-size:12.5px;font-weight:500;padding:9px 14px;cursor:pointer;
  border-radius:var(--r-1);color:var(--accent-deep);background:var(--surface);
  border:1px solid var(--surface-brd);transition:var(--t-fast)}
[data-theme="dark"] .exbtn{color:var(--accent-glow)}
.exbtn:hover{background:var(--surface-hover);border-color:rgba(62,133,211,.5)}

/* editable opening hours */
.hours{margin-top:6px}
.hrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.hrow:last-child{border-bottom:none}
.hday{width:105px;font-size:13px;font-weight:500;flex:none}
.hfield{width:118px;flex:none;padding:8px 10px;font-size:12.5px}
.hfield:disabled{opacity:.35;cursor:not-allowed}
.hdash{color:var(--muted);font-size:12px}
.hclosed{font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.hclosed[hidden]{display:none}
.zonecount{margin-top:12px;font-size:11.5px;color:var(--muted)}


/* ============ toast ============ */
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1}}

/* device-role note in settings */
.note{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5;
  padding:9px 12px;border-radius:var(--r-1);background:var(--surface);border:1px solid var(--surface-brd)}

/* closed day in the schedule */
.cal-col.closed{background:repeating-linear-gradient(135deg,transparent 0,transparent 7px,var(--hairline) 7px,var(--hairline) 8px)}
.cal-closed{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* several services per day (service coupé) */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.btn.sm{font-size:12.5px;padding:9px 14px;background:var(--surface);border:1px solid var(--accent);color:var(--accent-deep);font-weight:600}
[data-theme="dark"] .btn.sm{color:var(--accent-glow)}
.btn.sm:hover{background:rgba(62,133,211,.14)}
.hrow{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.hrow:last-child{border-bottom:none}
.hrow.shut .hday{opacity:.5}
.hday{width:105px;font-size:13px;font-weight:500;flex:none;padding-top:9px}
.hrow .tog{flex:none;margin-top:8px}
.hslots{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hslot{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 8px;border-radius:var(--r-1);
  background:var(--surface);border:1px solid var(--hairline)}
.hdel{font-family:var(--font-ui);width:30px;height:30px;line-height:1;font-size:15px;cursor:pointer;color:var(--muted);
  background:transparent;border:1px solid transparent;border-radius:var(--r-1);transition:var(--t-fast)}
.hdel:hover{background:rgba(200,70,60,.14);color:#b8463a}
.hadd{font-family:var(--font-ui);font-size:12.5px;font-weight:600;padding:9px 14px;cursor:pointer;
  color:var(--accent-deep);background:transparent;border:1px dashed rgba(62,133,211,.55);
  border-radius:var(--r-1);transition:var(--t-fast)}
[data-theme="dark"] .hadd{color:var(--accent-glow)}
.hadd:hover{background:rgba(62,133,211,.12)}
.hcopy{flex:none;margin-top:4px;font-family:var(--font-ui);font-size:12.5px;font-weight:500;
  padding:9px 14px;cursor:pointer;color:var(--muted);background:var(--surface);
  border:1px solid var(--surface-brd);border-radius:var(--r-1);transition:var(--t-fast)}
.hcopy:hover{color:var(--accent-deep);background:var(--surface-hover)}

/* per-service brief lines inside the hours editor */
.hrow.per{align-items:flex-start}
.hslot.wide{flex-direction:column;align-items:stretch;gap:6px;min-width:330px}
.hslot-t{display:flex;align-items:center;gap:6px}
.hbrief{font-size:12px;padding:8px 10px}

/* single-device notice in Account */
.note.mt{margin-top:14px}
.devnow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#2fa76f}
[data-theme="dark"] .devnow{color:#67d9c6}

/* zone editor (Venue) */
.zrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.zrow:last-of-type{border-bottom:none}
.zname{flex:1;min-width:120px;max-width:240px;padding:9px 12px;font-size:13px}
.zout{display:flex;gap:5px;flex-wrap:wrap}
.zopt{font-family:var(--font-ui);font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:var(--r-1);
  cursor:pointer;background:var(--surface);border:1px solid var(--surface-brd);transition:var(--t-fast)}
.zopt:hover{background:var(--surface-hover)}
.zopt.on{background:rgba(62,133,211,.14);border-color:var(--accent);color:var(--accent-deep);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
[data-theme="dark"] .zopt.on{color:var(--accent-glow)}
.zmain{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.zrow .hdel{margin-left:auto}
.zones-edit .hadd{margin-top:12px}

/* per-zone music blocks (Schedule & music) */
.zmus{padding:14px 0;border-bottom:1px solid var(--hairline)}
.zmus:last-child{border-bottom:none;padding-bottom:0}
/* a zone name is a label wherever it appears - the same voice as in the panel header */
.zmus-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.zmus .seg{margin-top:8px}
.zbrief{margin-top:10px;min-height:60px}
/* the zone slider IS the main-room slider, just inside a zone block */
.zmus .mixhead{margin:16px 0 10px}
.zmus .mix{max-width:600px}
.zmus .examples{margin-top:10px}
.zmus .field-lab{margin-top:16px}

/* zone picker */
.zpick{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--hairline)}
.zpick[hidden]{display:none}
.exbtn.ghosted{color:var(--muted);background:transparent;border-color:var(--surface-brd)}

/* a zone's own week sits inside its card, tighter than the venue editor */
.zhours{margin-top:10px;padding:8px 12px;border-radius:var(--r-1);
  background:var(--surface);border:1px solid var(--hairline)}
.zhours .hrow{padding:8px 0}
.zhours .hday{width:92px;font-size:12.5px}
.zhours .hfield{width:106px;font-size:12px;padding:7px 9px}
.zhours .hcopy{font-size:10px;padding:6px 9px}

/* simple vs detailed setup */
.seg.setup{margin:6px 0 4px}
.seg.setup span{font-size:12.5px;padding:9px 14px}
.simplenote{margin-top:18px;line-height:1.6}
.simplenote[hidden]{display:none}
#scheduleBlock[hidden]{display:none}

/* note shown when each service carries its own description */
.perservicenote{margin-top:14px}
.perservicenote[hidden]{display:none}
#briefBlock[hidden]{display:none}

/* ---- "Set to": the dashboard mirror of Settings ----
   One vertical rhythm: 14px between sections, a hairline between them, and every section
   opens with the same label. Nothing here shares a shape with the transport controls. */
.ss{padding:11px 16px 12px;border-radius:var(--r-2);background:var(--surface);border:1px solid var(--surface-brd)}
.ss-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--hairline)}
.ss-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ss-edit{font-family:var(--font-ui);font-size:11.5px;font-weight:600;padding:4px 11px;cursor:pointer;
  border-radius:5px;color:var(--accent-deep);background:rgba(62,133,211,.14);
  border:1px solid var(--accent);transition:var(--t-fast)}
[data-theme="dark"] .ss-edit{color:var(--accent-glow)}
.ss-edit:hover{background:rgba(62,133,211,.22)}

.ss-sec{padding:11px 0;border-bottom:1px solid var(--hairline)}
.ss-sec:last-of-type{border-bottom:none;padding-bottom:6px}
.ss-lab{margin:0 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
/* the rule under a dial, not a setting: how two tracks are joined */
.ss-note{margin:8px 0 0;font-size:11px;color:var(--muted)}

.ss-line{display:flex;flex-direction:column;gap:3px;line-height:1.4}
.ss-line:empty{display:none}
.ss-line b{font-size:14px;font-weight:600}
.ss-line span{font-size:12.5px;color:var(--muted)}
.ss-zones{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline)}

.ss-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.ss-chips:empty{display:none}
.sschip{font-size:12px;padding:5px 10px;border-radius:5px;background:rgba(62,133,211,.14);
  border:1px solid rgba(62,133,211,.35);color:var(--accent-deep)}
[data-theme="dark"] .sschip{color:var(--accent-glow)}
.sschip.no{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4);color:#b8463a;
  text-decoration:line-through;text-decoration-thickness:1px}
[data-theme="dark"] .sschip.no{color:#f08a8d}
.ss-empty{font-size:12.5px;color:var(--muted);line-height:1.5}

/* the week: a label column and a right-aligned time column, so the eye can scan down */
.week{margin-top:2px}
.wk-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:3px 8px;
  border-radius:5px;font-size:12px}
.wk-row span{min-width:96px;flex:none;color:var(--muted);letter-spacing:.02em;font-weight:500}
.wk-row b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.wk-row i{font-style:normal;color:var(--muted)}
.wk-row.on{background:rgba(62,133,211,.14);box-shadow:inset 0 0 0 1px rgba(62,133,211,.35)}
.wk-row.on span{color:var(--accent-deep);font-weight:600}
[data-theme="dark"] .wk-row.on span{color:var(--accent-glow)}
.wk-none{font-size:12.5px;color:var(--muted);line-height:1.5;padding:2px 2px 0}

/* ---- the balance control: a third kind of scale ----
   The progress bar fills from the left and the volume steps up in blocks; this one grows
   OUT FROM THE MIDDLE, so an even mix reads as nothing at all and a lean is obvious. */
/* the settings slider, reused verbatim on the dashboard */
.ss-sec .mixhead{margin:0 0 8px;max-width:none}   /* the header must span the same width as the track
                                                     or the right-hand label stops short of the edge */
.ss-sec .mix{max-width:none}
.ss-sec .mixnote{max-width:none}

/* the week: a label column and a right-aligned time column, so the eye can scan down */
.week{margin-top:2px}
.wk-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:3px 8px;
  border-radius:5px;font-size:12px}
.wk-row span{min-width:96px;flex:none;color:var(--muted);letter-spacing:.02em;font-weight:500}
.wk-row b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.wk-row i{font-style:normal;color:var(--muted)}
.wk-row.on{background:rgba(62,133,211,.14);box-shadow:inset 0 0 0 1px rgba(62,133,211,.35)}
.wk-row.on span{color:var(--accent-deep);font-weight:600}
[data-theme="dark"] .wk-row.on span{color:var(--accent-glow)}
.wk-none{font-size:12.5px;color:var(--muted);line-height:1.5;padding:2px 2px 0}

/* ---- the balance control: a third kind of scale ----
   The progress bar fills from the left and the volume steps up in blocks; this one grows
   OUT FROM THE MIDDLE, so an even mix reads as nothing at all and a lean is obvious. */
.bal-ends{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:6px}
.bal-ends span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bal-val{font-size:13px;font-weight:600;color:var(--accent-deep)}
[data-theme="dark"] .bal-val{color:var(--accent-glow)}

/* ============ day-curve gauge: the engine's plan, drawn ============ */
.gauge{padding:2px 2px 0}
.gauge-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.gauge-part{font-size:12.5px;font-weight:600}
.gauge-state{font-size:11px;color:var(--muted)}
.gauge-plot{height:104px;border-radius:var(--r-1);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06));
  border:1px solid var(--hairline)}
[data-theme="dark"] .gauge-plot{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.gsvg{width:100%;height:104px;display:block}
.gtick{font-size:9px;fill:var(--muted);text-anchor:middle;font-family:var(--font-ui);opacity:.8}
.gnow{stroke:#E5794C;stroke-width:1.4;stroke-dasharray:3 3;opacity:.85}
.gplan{fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.55}
.greal{fill:#fff;stroke:#E5794C;stroke-width:2.6}
[data-theme="dark"] .greal{fill:#1b2430}
.gauge-meta{display:flex;flex-wrap:wrap;gap:3px 16px;margin-top:6px}
.gauge-meta div{display:flex;align-items:baseline;gap:6px;font-size:11.5px}
.gauge-meta span{color:var(--muted)}
.gauge-meta b{font-weight:600;font-variant-numeric:tabular-nums}

/* full weekday names need a wider label column */
.wk-row span{min-width:92px;text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:500}

/* hour scale under the curve (kept out of the stretched SVG so type stays crisp) */
.gauge-ticks{position:relative;height:14px;margin-top:3px;overflow:hidden}
.gauge-ticks span:first-child{transform:none}
.gauge-ticks span:last-child{transform:translateX(-100%)}
.gauge-ticks span{position:absolute;transform:translateX(-50%);font-size:9.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.gauge-plot{height:124px}
.gsvg{height:124px}

/* live spectrum, same width as the day curve */
.eq{display:block;width:100%;height:76px;margin-top:6px;border-radius:var(--r-1);
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.04));
  border:1px solid var(--hairline)}
[data-theme="dark"] .eq{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}

/* the plan without the weather correction, for comparison */
.gplain{stroke:var(--muted);stroke-width:1.3;stroke-dasharray:4 4;opacity:.55}

/* dashed-line legend, only shown when the weather actually shifted the plan */
.gauge-wrap{position:relative}
.gauge-legend{position:absolute;top:5px;right:8px;font-size:9px;letter-spacing:.04em;color:var(--muted);
  background:var(--glass-bg);padding:2px 6px;border-radius:4px;pointer-events:none}
.gauge-legend[hidden]{display:none}

/* queue rows: style / tempo / instrumental as one quiet line, length on the right */
.qtags{margin-top:3px;font-size:10.5px;color:var(--muted);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qdur{font-size:13.4px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

/* ============ catalogue: one card, search first, then styles or tracks ============ */
/* The catalogue fills the stage so only its track list scrolls. Below its floor the page
   scrolls instead - a short window pushes the card down, it never squashes it. */
/* One scrollbar, and it belongs to the card. The stage's bar sat outside the panel, cutting across
   its rounded corner; the card's sits inside its own edge where the content it moves actually is.
   Everything below the search bar scrolls together - the styles no longer travel under a header
   while the collections above them stand still. */
#catalogue{height:100%;min-height:520px;display:flex}
.catcard{flex:1;display:flex;flex-direction:column;min-height:0;padding:16px 8px 8px 22px;
  border-radius:var(--r-2)}
.cat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 14px 12px 0}
/* the bar is a header, not a floating strip: it holds still because it is outside the scroller */
.cat-scroll::-webkit-scrollbar{width:10px}
.cat-scroll::-webkit-scrollbar-thumb{background:var(--track);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.cat-scroll::-webkit-scrollbar-track{background:transparent}
.cat-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:2px 14px 12px 0;border-bottom:1px solid var(--hairline)}
.searchwrap{position:relative;width:460px;max-width:100%;justify-self:center}
.search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%) rotate(-45deg);
  font-size:15px;color:var(--muted);pointer-events:none}
.search.big{width:100%;font-size:13.5px;padding:9px 16px 9px 36px;border-radius:var(--r-1);
  background:rgba(255,255,255,.5);border:1px solid var(--surface-brd);
  box-shadow:0 2px 10px rgba(40,80,130,.07)}
[data-theme="dark"] .search.big{background:rgba(255,255,255,.09)}
.search.big:focus{border-color:var(--accent);background:rgba(255,255,255,.68)}
/* the mode switch reads as one control, not two loose pills */

/* style tiles - a mosaic of the covers actually in that style */
.cat-nav{display:flex;gap:6px}
.cnav{width:30px;height:30px;padding:0;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--r-1);border:1px solid var(--surface-brd);background:var(--surface);
  color:var(--ink);transition:var(--t-fast)}
.cnav svg{width:17px;height:17px}
.cnav:hover:not(:disabled){background:var(--surface-hover)}
.cnav:active:not(:disabled){transform:scale(.94)}
.cnav:disabled{opacity:.35;cursor:default}
.cat-count{justify-self:end;font-size:11.5px;color:var(--muted);white-space:nowrap}

/* inside a style: the style itself on the left, its tracks listed on the right */
.style-view{flex:1;min-height:260px;display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;align-items:stretch}
.style-view[hidden]{display:none}
.sv-card{min-height:0;overflow:hidden}
.sv-card .styl-mos{position:relative;inset:auto;aspect-ratio:1;border-radius:7px;overflow:hidden;
  box-shadow:0 14px 32px rgba(10,20,35,.34)}
.sv-right{display:flex;flex-direction:column;min-height:0}
.sv-list{flex:1;min-height:0;overflow-y:auto;
  /* rows fade out as they pass under the fixed header - no plate, no hard cut */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12px)}
.sv-name{font-family:var(--font-display);font-size:24px;font-weight:700;margin:14px 0 4px}
.sv-meta{font-size:12px;color:var(--muted)}
.sv-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--hairline)}
.sv-search{width:100%;aspect-ratio:1;border-radius:7px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--surface-brd);color:var(--muted)}
.sv-search svg{width:44px;height:44px}

/* the track table: number, artwork, title, artist, tempo, time, like */
.trow{display:grid;grid-template-columns:36px 48px minmax(0,1.4fr) minmax(0,1fr) 94px 58px 40px;
  align-items:center;gap:17px;padding:7.5px 12px;border-radius:8px;cursor:pointer;
  border-bottom:1px solid var(--hairline);transition:var(--t-fast)}
.trow:hover{background:var(--surface-hover)}
.trow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.trow.thead{cursor:default;background:none;padding-bottom:8px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trow.thead:hover{background:none}
.tnum{font-size:14.4px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.tart{position:relative;width:48px;height:48px;border-radius:5.5px;background-size:cover;
  background-position:center;display:grid;place-items:center;overflow:hidden}
.thead .tart{background:none}
.tplay{position:absolute;inset:0;display:grid;place-items:center;opacity:0;color:#fff;
  background:rgba(8,16,28,.42);transition:var(--t-fast)}
.tplay svg{width:20px;height:20px}
.trow:hover .tplay{opacity:1}
.ttitle{font-size:16.2px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tartist{font-size:15px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbpm{font-size:13.8px;color:var(--muted);font-variant-numeric:tabular-nums}
.ttime{font-size:14.4px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.trow .like{position:relative;opacity:1}   /* relative, never static: the ::after target
   below is inset:-5px, and with a static button it would anchor to the nearest positioned
   ancestor instead - an invisible sheet over the whole list that swallowed every click */
.thead .like{display:none}

@media (max-width:1100px){
  .style-view{grid-template-columns:1fr;gap:16px}
  .sv-card{position:static;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
  .sv-card .styl-mos{width:120px}
  .sv-note{display:none}
  .trow{grid-template-columns:31px 43px minmax(0,1.4fr) minmax(0,1fr) 58px 40px}
  .tbpm{display:none}
}

/* rows are sized by the tiles themselves - never stretched to fill the box, or a short
   window squeezes the track below its 16/10 minimum and the artwork laps the row beneath */
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  grid-auto-rows:min-content;align-content:start;align-items:start;gap:18px}
.style-grid[hidden]{display:none}
.styl{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 24px rgba(60,90,130,.18);border:1px solid rgba(255,255,255,.5);
  transition:transform var(--t-fast),box-shadow var(--t-fast)}
.styl:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(60,90,130,.26)}
.styl-mos{position:absolute;inset:0;display:grid;gap:0}
.styl-mos i{display:block;background-size:cover;background-position:center}
.styl-mos.m1{grid-template-columns:1fr}
.styl-mos.m2{grid-template-columns:1fr 1fr}
.styl-mos.m3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.styl-mos.m3 i:first-child{grid-row:span 2}
.styl-mos.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.styl::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,26,44,.12) 0%,rgba(12,26,44,.72) 100%)}
.styl-name{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;
  font-size:14.5px;font-weight:600;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}

/* ============ weather scene ============
   Slow, ambient motion only: nothing here should pull the eye during service. */
.wx{width:96px;height:96px;display:block}
.wx-svg{width:100%;height:100%;display:block;overflow:visible}
.wx-fill{fill:var(--ink);opacity:.9}
.wx-ray{stroke:var(--ink);stroke-width:5;stroke-linecap:round;opacity:.85}

.wx-rays{transform-origin:var(--ox,50px) var(--oy,50px);animation:wxSpin 90s linear infinite}
.wx-disc{transform-origin:var(--ox,50px) var(--oy,50px);animation:wxBreathe 6s ease-in-out infinite}
@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

.wx-cloud{transform-origin:50px 50px;transform:translate(var(--dx),var(--dy)) scale(var(--sc))}
.wx-cloud.front{animation:wxDriftA 14s ease-in-out infinite}
.wx-cloud.back{opacity:.42;animation:wxDriftB 19s ease-in-out infinite}
@keyframes wxDriftA{0%,100%{transform:translate(var(--dx),var(--dy)) scale(var(--sc))}
  50%{transform:translate(calc(var(--dx) + 5px),var(--dy)) scale(var(--sc))}}
@keyframes wxDriftB{0%,100%{transform:translate(var(--dx),var(--dy)) scale(var(--sc))}
  50%{transform:translate(calc(var(--dx) - 5px),var(--dy)) scale(var(--sc))}}

.wx-drop{stroke:var(--accent-deep);stroke-width:3.4;stroke-linecap:round;opacity:0;
  animation:wxFall 1.5s linear infinite}
.wx-drop.d1{animation-delay:.35s}
.wx-drop.d2{animation-delay:.7s}
.wx-drop.d3{animation-delay:1.05s}
@keyframes wxFall{
  0%{opacity:0;transform:translateY(-6px)}
  18%{opacity:.85}
  75%{opacity:.55}
  100%{opacity:0;transform:translateY(14px)}}

.wx-stars circle{fill:var(--ink);opacity:.55;animation:wxTwinkle 4.5s ease-in-out infinite}
.wx-stars circle:nth-child(2){animation-delay:1.4s}
.wx-stars circle:nth-child(3){animation-delay:2.6s}
@keyframes wxTwinkle{0%,100%{opacity:.25}50%{opacity:.9}}
.wx-moon{transform-origin:var(--ox,50px) var(--oy,50px);animation:wxBreathe 8s ease-in-out infinite}

.wx-horizon{stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.35}
.wx-sunset .wx-rays{animation-duration:120s}

@media (prefers-reduced-motion: reduce){
  .wx-rays,.wx-disc,.wx-cloud,.wx-drop,.wx-stars circle,.wx-moon{animation:none!important}
  .wx-drop{opacity:.6}
}

/* ============ bottom player polish ============ */
.playerbar{padding:12px 22px;gap:26px}

/* three bars that only move while the room is actually playing */
/* scrub bars: thicker and with a head on hover, so they read as draggable */
.progress{transition:height 140ms ease-out}
.progress{height:5px}
.pb-ctl:hover .progress{height:6px}
.pfill,.vol-fill{position:relative;transition:width 120ms linear}
.phead{position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(50%,-50%) scale(0);background:#fff;
  box-shadow:0 1px 5px rgba(20,50,90,.35),0 0 0 1.5px var(--accent);
  transition:transform 140ms cubic-bezier(.2,0,0,1)}
.pb-ctl:hover .progress .phead{transform:translate(50%,-50%) scale(1)}
.progress:active .phead{transform:translate(50%,-50%) scale(1.15)}


@media (prefers-reduced-motion: reduce){
  .phead,.progress,.pfill,.vol-fill{transition-duration:1ms!important}
}


/* ============ review fixes: keyboard targets and hit areas ============ */
.qrow:focus-visible,.cat:focus-visible,.styl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qrow,.cat{border-radius:10px}
.styl{border-radius:7px}   /* artwork corners, half of what they were */

/* like was 20px - below the 24px minimum, and it is the main teaching control */
.like{position:relative;min-width:26px;min-height:26px;display:grid;place-items:center}
.like::after{content:'';position:absolute;inset:-5px}      /* extended target, no overlap */

/* the bottom player is used on an iPad behind the bar: keep targets generous */
.pb-btn .ic svg{width:42px;height:42px}

/* the save bar for guarded sections - it only appears once something is actually changed */
.set-save{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;
  justify-content:flex-end;margin-top:14px;padding:12px 16px;border-radius:var(--r-2);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),var(--glass-shadow)}
.set-save[hidden]{display:none}
.save-note{margin-right:auto;font-size:12px;color:var(--muted)}

/* leaving a guarded section with unsaved work */
.ask{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(6,14,26,.52);backdrop-filter:blur(3px)}
.ask[hidden]{display:none}
/* a dialog has to be readable over whatever it covers - solid, not glass */
.ask-card{width:min(430px,92vw);padding:22px 24px 18px;border-radius:var(--r-2);
  background:#eef3f9;border:1px solid rgba(20,40,70,.16);
  box-shadow:0 24px 60px rgba(8,18,32,.36)}
[data-theme="dark"] .ask-card{background:#16202e;border-color:rgba(255,255,255,.12)}
.ask-title{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0 0 8px}
.ask-text{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 18px}
.ask-btns{display:flex;justify-content:flex-end;gap:10px}



/* ---- the venue panel ----
   The header is outside the scroller, so it stays put however tall the panel's contents get. */
.ctl-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;
  /* rows fade under the header instead of being cut by a plate */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10px)}

/* ---- zones ----
   A single-zone venue never sees this. From the second zone on the panel header names the zone
   this device plays and opens a list of the others. */
.col-head{position:relative}
/* the zone is a label, so it is set like every other label in the app: uppercase, tracked out */
.zmenu-btn{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
  display:flex;align-items:center;gap:8px;margin:0 auto 0 10px;padding:6px 10px;
  background:none;border:none;color:var(--ink);border-radius:var(--r-1);transition:var(--t-fast)}
.zmenu-btn[hidden]{display:none}
.zmenu-btn::after{content:'';width:6px;height:6px;border-right:1.7px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;
  transition:transform 160ms ease-out}
.zmenu-btn:hover{background:var(--surface-hover)}
.zmenu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
".zmenu-btn.open::after{transform:translateY(1px) rotate(225deg)}
/* one zone: the name is a label - no chevron, no hover, nothing to open */
.zmenu-btn.single{cursor:default;padding-left:0}
.zmenu-btn.single::after{display:none}
.zmenu-btn.single:hover{background:none}
.zmenu-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;padding:6px;
  border-radius:var(--r-2);background:#eef3f9;border:1px solid rgba(20,40,70,.16);
  box-shadow:0 18px 44px rgba(8,18,32,.34)}
[data-theme="dark"] .zmenu-list{background:#16202e;border-color:rgba(255,255,255,.12)}
.zmenu-list[hidden]{display:none}
.zrow-z{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;cursor:pointer;
  border-radius:var(--r-1);background:none;border:none;color:var(--ink);text-align:left;
  transition:var(--t-fast)}
.zrow-z:hover{background:var(--surface-hover)}
.zrow-z.here{background:rgba(62,133,211,.14);box-shadow:inset 0 0 0 1px var(--accent)}
.zrow-tx{flex:1;min-width:0}
.zrow-n{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.zrow-n i{width:7px;height:7px;border-radius:50%;background:#c0392f;flex:none}
.zrow-z.on .zrow-n i{background:#1d9a5f}
[data-theme="dark"] .zrow-n i{background:#e8736a}
[data-theme="dark"] .zrow-z.on .zrow-n i{background:#4fd08a}
.zrow-here{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:600}
[data-theme="dark"] .zrow-here{color:var(--accent-glow)}
.zrow-t{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-top:2px}
.zrow-btns{display:flex;gap:2px;flex:none}
.zbtn{width:28px;height:28px;padding:0;display:grid;place-items:center;cursor:pointer;
  background:none;border:none;color:var(--muted);border-radius:var(--r-1);transition:var(--t-fast)}
.zbtn svg{width:15px;height:15px}
.zbtn:hover{color:var(--ink);background:var(--surface-hover)}
.zbtn:active{transform:scale(.94)}


/* the mirror reads another zone's mix - editing lives in that zone's settings */
.mix.locked{pointer-events:none}
.mix.locked .mix-knob{opacity:.55}

/* the third line of the hero: the same muted voice as the artist, one step quieter */
.np2-state{font-size:12px;color:var(--muted);letter-spacing:.01em;margin-top:4px}

/* the logo row in Settings - the same square, big enough to judge */
.logo-row{display:flex;align-items:center;gap:18px;margin:16px 0 4px}
.logo-box{width:88px;height:88px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--surface);border:1px dashed var(--surface-brd);background-size:cover;background-position:center}
.logo-box.has-logo{border-style:solid;border-color:rgba(20,40,70,.16);background-color:#fff}
.logo-ph{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logo-tx{min-width:0}
.logo-tx .btnrow{margin-top:10px;display:flex;gap:8px}

/* ---- notifications ----
   A page in the navigation rather than a bell with a dropdown: this is what the venue reads when
   something happened while nobody was watching, and it keeps a history worth scrolling. */
.navcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:8px;border-radius:9px;background:#c0392f;color:#fff;font-size:10px;font-weight:700;
  vertical-align:1px}
[data-theme="dark"] .navcount{background:#e8736a;color:#1b1010}
.navcount[hidden]{display:none}

#notifications{height:100%;min-height:0;display:flex}
.notif-card{flex:1;display:flex;flex-direction:column;min-height:0;padding:20px 24px 12px}
.notif-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.notif-filter{margin:14px 0 4px;align-self:flex-start}
.notif-list{flex:1;min-height:0;overflow-y:auto;margin-top:10px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 10px)}
.nrow-band{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:16px 0 6px;padding-top:12px;border-top:1px solid var(--hairline)}
.nrow-band:first-child{margin-top:4px;padding-top:0;border-top:none}

.nrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 10px;border-radius:var(--r-1);cursor:pointer;transition:var(--t-fast)}
.nrow:hover{background:var(--surface-hover)}
.nrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nrow-ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface);color:var(--muted)}
.nrow-ico svg{width:17px;height:17px}
.nrow.k-alert .nrow-ico{background:rgba(192,57,47,.14);color:#c0392f}
[data-theme="dark"] .nrow.k-alert .nrow-ico{background:rgba(232,115,106,.16);color:#e8736a}
.nrow.k-billing .nrow-ico{background:rgba(62,133,211,.16);color:var(--accent-deep)}
.nrow-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.nrow-t{font-size:13.5px;font-weight:600}
.nrow.new .nrow-t::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:8px;vertical-align:middle}
.nrow-b{font-size:12px;color:var(--muted);line-height:1.5}
.nrow-at{font-size:11px;color:var(--muted);white-space:nowrap}
.nrow-empty{padding:40px 16px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}

/* ---- billing sheets ---- */
.ask-card.sheet{width:min(680px,94vw)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.sheet-x{font-family:var(--font-ui);font-size:22px;line-height:1;cursor:pointer;background:none;
  border:none;color:var(--muted);padding:0 4px;border-radius:6px}
.sheet-x:hover{color:var(--ink);background:var(--surface-hover)}

.inv-head{display:grid;grid-template-columns:1.2fr 1fr 100px 150px;gap:12px;padding:0 4px 8px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--hairline)}
.inv-head .ir{text-align:right}
.invoices{max-height:min(52vh,420px);overflow-y:auto}
.inv{display:grid;grid-template-columns:1.2fr 1fr 100px 150px;gap:12px;align-items:center;
  padding:10px 4px;border-bottom:1px solid var(--hairline);font-size:12.5px}
.inv:last-child{border-bottom:none}
.iv-d{display:flex;flex-direction:column;gap:2px;font-weight:600}
.iv-no{font-size:10.5px;color:var(--muted);font-weight:400;letter-spacing:.04em}
.iv-p{color:var(--muted)}
.iv-a{text-align:right;font-weight:700;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.iv-tva{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.iv-s{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.iv-s .paid{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#1d9a5f}
.iv-s .due{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#c0392f}
[data-theme="dark"] .iv-s .paid{color:#4fd08a}
[data-theme="dark"] .iv-s .due{color:#e8736a}
.iv-dl{font-family:var(--font-ui);font-size:11.5px;font-weight:600;cursor:pointer;padding:5px 11px;
  border-radius:var(--r-1);background:var(--surface);border:1px solid var(--surface-brd);color:var(--ink)}
.iv-dl:hover{background:var(--surface-hover)}

.card-now{display:flex;align-items:center;gap:14px;margin:6px 0 14px;padding:14px 16px;
  border-radius:var(--r-1);background:var(--surface);border:1px solid var(--surface-brd)}
.card-brand{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--accent-deep)}
[data-theme="dark"] .card-brand{color:var(--accent-glow)}
.card-num{font-size:14px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.card-exp{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* the panel's state reads as a label, not as a chip */
.ctl-state{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap}

/* two fields on one line where they belong together, like SIREN and the TVA number */
.set-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:820px){.set-2col{grid-template-columns:1fr}}
/* a row that leads somewhere is a link, and says so on hover */
.set-row.link{text-decoration:none;color:inherit;cursor:pointer;transition:var(--t-fast)}
.set-row.link:hover{background:var(--surface-hover)}
.set-row.link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* a sub-heading inside a card needs air above it, or it reads as part of the paragraph before */
.set-title.sm{margin-top:22px}
.set-title.sm+.set-sub{margin-top:2px}
[data-theme="dark"] .devnow{color:#5fd39a}


/* ---- account menu on the venue identity ----
   Settings used to be a fifth tab in the navigation, which put a housekeeping screen next to the
   three places a venue actually works. It lives here now, behind the name of the venue, and so
   does the way out. */
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:12px;padding:4px;border:0;background:none;
  border-radius:var(--r-1);cursor:pointer;color:inherit;font:inherit;transition:var(--t-fast)}
.acct-btn:hover{background:var(--surface-hover)}
.acct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct-btn .venue-id{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.acct-btn .ava{pointer-events:none}

.acct-list{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:236px;padding:6px;
  border-radius:var(--r-2);background:#eef3f9;border:1px solid rgba(20,40,70,.16);
  box-shadow:0 18px 44px rgba(8,18,32,.34)}
[data-theme="dark"] .acct-list{background:#16202e;border-color:rgba(255,255,255,.12)}
.acct-list[hidden]{display:none}
.acct-head{padding:8px 10px 10px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.acct-head b{display:block;font-size:13px}
.acct-head span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;margin-right:9px}
.acct-row{display:flex;align-items:center;width:100%;padding:9px 10px;cursor:pointer;
  border-radius:var(--r-1);background:none;border:none;color:var(--ink);text-align:left;
  font-family:var(--font-ui);font-size:13px;transition:var(--t-fast)}
.acct-row:hover{background:var(--surface-hover)}
.acct-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acct-row.danger{color:#c0392f}
[data-theme="dark"] .acct-row.danger{color:#e8736a}
.acct-sep{height:1px;background:var(--hairline);margin:6px 4px}

@media (max-width:820px){
  .acct-btn .venue-id{display:none}
}


/* ---- the catalogue row that is in the room ----
   Four white bars on the cover and a lit row. The bars move only while the audio moves, so a
   paused room looks paused instead of pretending. */
.teq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:3px;
  padding-bottom:15px;background:rgba(10,18,30,.5);border-radius:inherit}
.trow.now .teq{display:flex}
.trow.now .tplay{display:none}
/* A loop rather than a meter, on purpose: driven by the analyser the bars twitch, and at 5px on a
   48px cover the eye reads the twitching as a fault. These are last year's mobile timings - four
   bars, each on its own duration and offset, ease-in-out both ways, so nothing ever lands in step
   with anything else and the whole thing breathes. */
.teq i{width:5px;border-radius:2px;background:#fff;height:5px;
  animation:teq 483ms cubic-bezier(.45,0,.55,1) infinite alternate}
.teq i:nth-child(1){animation-duration:460ms;animation-delay:0ms}
.teq i:nth-child(2){animation-duration:403ms;animation-delay:115ms}
.teq i:nth-child(3){animation-duration:518ms;animation-delay:230ms}
.teq i:nth-child(4){animation-duration:345ms;animation-delay:173ms}
@keyframes teq{from{height:5px}to{height:15px}}
/* held: the track is still the room's, but nothing is moving */
.trow.held .teq i{animation-play-state:paused;height:5px}

.trow.now{background:rgba(62,133,211,.14);box-shadow:inset 3px 0 0 var(--accent)}
.trow.now:hover{background:rgba(62,133,211,.2)}
.trow.now .ttitle{color:var(--accent-deep)}
[data-theme="dark"] .trow.now .ttitle{color:var(--accent-glow)}

@media (prefers-reduced-motion:reduce){
  .teq i{animation:none;height:9px}
}


/* ============ support ============
   Parked bottom right, above the player bar. Tucked, only a sliver shows - a venue that does not
   want it should be able to put it away without us deciding it is gone forever. */
.chat{position:fixed;right:22px;bottom:104px;z-index:60;display:flex;align-items:flex-end;gap:8px;
  transition:transform .28s var(--ease)}
.chat.tucked{transform:translateX(calc(100% - 26px))}
.chat-tuck{align-self:center;width:20px;height:44px;border-radius:6px 0 0 6px;cursor:pointer;
  border:1px solid var(--surface-brd);border-right:0;background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);color:var(--muted);font-size:15px;line-height:1}
.chat.tucked .chat-tuck{transform:rotate(180deg)}
.chat-fab{display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--r-1);
  cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#fff;
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  box-shadow:0 10px 26px rgba(44,104,174,.34)}
.chat-fab:hover{filter:brightness(1.06)}
.chat-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
.chat-panel{position:absolute;right:0;bottom:56px;width:352px;max-height:min(560px,70vh);
  display:flex;flex-direction:column;border-radius:var(--r-2);overflow:hidden;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--surface-brd);box-shadow:0 18px 44px rgba(18,40,70,.22)}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--hairline)}
.chat-head b{display:block;font-size:14px}
.chat-head span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.chat-x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);font-size:20px;
  line-height:1;font-family:var(--font-ui)}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:86%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.45}
.chat-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--surface-brd)}
.chat-msg.me{align-self:flex-end;background:var(--accent);color:#fff}
.chat-openers{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.chat-openers:empty{display:none}
.chat-openers button{font-family:var(--font-ui);font-size:12px;padding:7px 11px;border-radius:var(--r-2);
  cursor:pointer;background:var(--surface);border:1px solid var(--surface-brd);color:var(--ink)}
.chat-openers button:hover{background:var(--surface-hover)}
.chat-send{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--hairline)}
.chat-send .field{flex:1;font-size:13.5px;padding:9px 12px}
.chat-mail{display:block;text-align:center;font-size:11.5px;color:var(--accent-deep);
  padding:0 0 12px;text-decoration:none}
[data-theme="dark"] .chat-mail{color:var(--accent-glow)}
@media (max-width:900px){.chat{right:12px;bottom:92px}.chat-panel{width:min(340px,86vw)}}