/* Phones (js/compact.js sets body.compact from COMPACT_MQ, the one threshold):
   one slim row on top - the mark, the room as a menu, the room's essentials, a
   gear - and the rest in a sheet from below. Desktop never has body.compact. */
.cx-off { display: none !important; }

/* the top row */
body.compact header { flex-wrap: nowrap; gap: 6px; position: relative; z-index: 50;
  padding-top: max(4px, env(safe-area-inset-top, 0px)); padding-bottom: 4px;
  padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
body.compact header::before, body.compact header::after { display: none !important; }
body.compact header > :not(a.home):not(.brand):not(#roomBtn):not(#rooms):not(#ess):not(#gear) { display: none !important; }
body.compact header > a.home { order: 0; flex: none; }
/* (over the rooms' own "only the name and the rooms in the header": lab.css, learn.css, teach.css) */
body.compact[data-room][class] header > :is(#roomBtn, #gear):not(#cx-none) { display: inline-block !important; }
body.compact[data-room][class] header > #ess:not(#cx-none) { display: flex !important; }
body.compact header > #roomBtn { order: 1; }
body.compact header > #ess { order: 2; }
body.compact header > #gear { order: 3; }
/* the mark: the site's initial, home */
body.compact header .brand { font-size: 0; display: block; text-align: center; line-height: 38px; width: 40px; height: 40px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 50%; background: var(--nave); }
body.compact header .brand::first-letter { font-size: 21px; color: var(--gold); }
body.compact header a.home { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
body.compact #roomBtn, body.compact #gear, body.compact #ess button { min-height: 44px; min-width: 44px; box-sizing: border-box; white-space: nowrap; }
body.compact #roomBtn { font-size: 14px; padding: 0 12px; }
body.compact #gear { font-size: 22px; line-height: 1; padding: 0; }
body.compact #gear[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
body.compact #ess { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
body.compact #ess button { font-size: 13.5px; padding: 0 12px; }
body.compact #ess .rl, body.compact #ess .rs { display: none; }
body.compact #ess #bRecord #recDot { font-size: 18px; }
body.compact #ess #bRecord.rec { padding: 0 10px; }
body.compact #ess #stRec, body.compact #ess #stPlay { padding: 0 10px; }
/* the rooms: a menu under the room's name */
body.compact #rooms { display: none; }
body.compact.cx-rooms #rooms { display: flex; flex-direction: column; position: absolute; z-index: 60; top: calc(100% + 4px);
  left: max(10px, env(safe-area-inset-left, 0px)); margin: 0; padding: 4px; gap: 2px; min-width: 180px;
  background: var(--stone); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px #000a; }
body.compact.cx-rooms #rooms a { font-size: 16px; padding: 0 14px; min-height: 44px; display: flex; align-items: center; border-radius: 7px; }

/* the sheet: from below, over the lower part of the room; the top stays in view */
#sheet { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  max-height: min(60vh, 560px); max-height: min(60dvh, 560px); box-sizing: border-box;
  background: var(--stone); border-top: 1px solid var(--gold); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 34px #000b;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#sheet[hidden] { display: none; }
#sheet .cx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 16px; border-bottom: 1px solid var(--line); }
#sheet .cx-head b { font: 700 14px var(--label); letter-spacing: 0.06em; color: var(--gold); }
#sheet .cx-x { font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border-color: transparent; }
#sheet .cx-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px max(14px, env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; }
#sheet .cx-group { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
#sheet .cx-group:last-child { border-bottom: 0; }
#sheet .cx-group[hidden] { display: none; }
#sheet .cx-group h3 { margin: 0 0 7px; font-weight: 500; }
#sheet .cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#sheet .cx-row > * { margin: 0 !important; }
/* thumbs: every control at least 44 px, and 16 px text in fields (no zoom on focus) */
#sheet button, #sheet select, #sheet input:not([type=range]):not([type=checkbox]), #sheet a[href] { min-height: 44px; box-sizing: border-box; }
#sheet button { font-size: 14px; padding: 0 12px; }
#sheet select, #sheet input[type=text], #sheet input[type=search] { font-size: 16px; }
#sheet input[type=range] { min-height: 44px; }
#sheet input[type=checkbox] { width: 22px; height: 22px; }
#sheet label.check { min-height: 44px; }
#sheet .knob input[type=range] { width: 140px; }
/* the choir's controls, out of the header */
#sheet #clock { font-size: 16px; }
#sheet #voices button, #sheet .vstep button { min-width: 44px; min-height: 44px; }
#sheet .random { display: inline-flex; gap: 6px; }
#sheet .random select { max-width: 200px; }
#sheet #project { display: inline-flex; align-items: center; gap: 8px; position: relative; }
#sheet #projMenu { left: 0; right: auto; }
#sheet #sharePop { left: 0; right: auto; }
/* the stage's buttons: a grid */
#sheet #stagebar { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
#sheet #stagebar button { background: var(--stone-2); padding: 0 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet #stagebar button.on { background: color-mix(in srgb, var(--gold) 22%, var(--stone-2)); }
#sheet #stagebar button[hidden] { display: none; }
#sheet #stagebar .rl { display: inline; }
#sheet #stagebar .rs { display: none; }
/* the rooms' bars, laid flat in the sheet */
#sheet #stBar, #sheet #labBar, #sheet #learnBar, #sheet #teachBar { width: 100%; padding: 0; border: 0; background: none; gap: 8px; }
#sheet #stBar button, #sheet #labBar button, #sheet #labBar select, #sheet #learnBar button, #sheet #teachBar button { font-size: 14px; padding: 0 12px; }
#sheet #stMore { display: none !important; }
#sheet #stBar2 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
#sheet #stBar2 .sep, #sheet #stBar2 .spacer, #sheet #labBar .spacer, #sheet #learnBar .spacer, #sheet #teachBar .spacer { display: none; }
#sheet #stName { flex: 1 1 100%; width: auto; }
#sheet #stBar2 select { flex: 1 1 40%; max-width: none; min-width: 0; }
#sheet select { max-width: 100%; min-width: 0; }
#sheet #stBar #stVidKind { display: inline-block; }
#sheet #labBar .lab-text { flex: 1 1 100%; }
#sheet #labBar .lab-text input { flex: 1; min-width: 0; }
#sheet #labBar #labTextLang, #sheet #labBar #labAdd { flex: 1 1 40%; max-width: none; min-width: 0; }
#sheet #labBar .lab-views button { min-height: 44px; }
#sheet #labBar .lab-rate input[type=range] { width: 150px; }
#sheet #labMenu, #sheet #labRoomPop { left: 0; right: auto; }
#sheet .ln-voice { flex: 1 1 100%; }
#sheet .ln-voice select { flex: 1; max-width: none; }
/* a slider being dragged: only the slider stays, to watch what it does */
#sheet.peek { background: transparent; border-color: transparent; box-shadow: none; }
#sheet.peek * { visibility: hidden; }
#sheet.peek .cx-peeking, #sheet.peek .cx-peeking * { visibility: visible; }
#sheet.peek .cx-peeking { background: color-mix(in srgb, var(--stone) 92%, transparent); border-radius: 8px; }

/* the rooms, without the bars that moved */
body.compact #lab { grid-template-rows: minmax(0, 1fr) auto; }
body.compact.lab-vp-open #labMain { grid-row: 1; }
body.compact #labVoice { grid-row: 1 / span 2; }
body.compact #learn, body.compact #teach { grid-template-rows: minmax(0, 1fr); }
body.compact #stMain { padding-top: 8px; }

/* the stage: its overlays from the top edge, now the buttons have gone */
body.compact #toast { top: 8px; }
body.compact #pop { top: 8px !important; max-height: calc(100% - 16px); }
body.compact #pick { top: 8px; }
body.compact #discBar { top: 8px; }
body.compact.disc #toast { top: 54px; }
body.compact #hint { bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
/* the inspector: a panel along the bottom of the stage, the singers above it */
body.compact #inspector { top: auto; bottom: 6px; left: 6px; right: 6px; width: auto; max-height: 42%; }

/* the scopes: a strip along the top, small cards that grow on a tap; never a column over the stage */
body.compact #scopes { left: max(6px, env(safe-area-inset-left, 0px)); right: 104px; top: 6px; bottom: auto; width: auto;
  flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; gap: 6px; padding-bottom: 2px; max-height: 33%; }
body.compact #scopes canvas.scope { width: auto !important; height: 60px !important; scroll-snap-align: start; border-radius: 6px; }
body.compact.cx-scopes-big #scopes { right: max(6px, env(safe-area-inset-right, 0px)); top: 56px; }
body.compact.cx-scopes-big #scopes canvas.scope { height: min(156px, 26vh) !important; }
#scopeBar { display: none; }
/* the piece's title under the strip, not over it */
body.compact #stage:has(#scopes:not([hidden])) #nowTitle { top: 76px !important; }
body.compact.cx-scopes-big #stage:has(#scopes:not([hidden])) #nowTitle { top: calc(62px + min(156px, 26vh) + 10px) !important; }
body.compact #stage:has(#scopes:not([hidden])) #scopeBar { display: flex; position: absolute; z-index: 3; top: 6px; right: max(6px, env(safe-area-inset-right, 0px)); gap: 4px; }
#scopeBar button { min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; line-height: 1; background: rgba(32, 36, 45, 0.9); }
/* what cannot act yet (the Studio's take buttons with no take), grayed here as in the room */
#sheet :is(button, input, select):disabled, #ess button:disabled { opacity: 0.4; cursor: not-allowed; }
#sheet button:disabled:hover, #ess button:disabled:hover { border-color: var(--line); }
#sheet .tc-crumb { display: none; }

/* the copyright line: not in the corner on a phone; at the foot of the sheet */
body.compact #legal { display: none; }
#sheet .cx-legal { margin: 0; padding: 10px 0 2px; font: 12px var(--label); letter-spacing: 0.05em; color: var(--dim); text-align: center; }
#sheet .cx-legal a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }