/* TuttiRoom: two rooms in one house.
   The rehearsal room (#app) is dim: warm ebony surfaces, ivory text, one brass
   accent, the bar number the one loud thing. The opening page and your desk
   (#lobby) are the hall in the morning: white paper, sand and brass, the lit
   world map the one bold element. The same token names carry both palettes, so
   every component is written once; #lobby simply redefines them. */
/* The colours come from the wordmark: its teal is the room's dark and the lobby's text, its orange
   the one accent in both. The token names (--brass, --ivory) predate the logo and are kept, since
   they are used in hundreds of places: read --brass as "the accent" and --ivory as "the text". */
:root {
  color-scheme: dark;
  --ink: #0f1d21;        /* page: the wordmark's teal, near black */
  --panel: #16262b;      /* raised surface */
  --panel-2: #1f3238;    /* raised further */
  --field: var(--ink);   /* inputs */
  --line: #2d434a;
  --ivory: #f2ecdf;      /* text */
  --muted: #9fb0b3;      /* 7.6:1 on the page */
  --brass: #ef8a4a;      /* accent for text, lines, icons: 6.9:1 on the page */
  --brass-fill: #e67434; /* accent as a filled surface (primary buttons, chosen chips) */
  --brass-ink: #16262b;  /* text on an accent fill */
  --rosin: #e0705a;      /* warnings and the record dot: 5.4:1 on the page */
  --moss: #7fb07a;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  /* One scale for everything: nothing smaller than 12px except the studio's LCD labels. */
  --fs-xs: .8rem;        /* 12px */
  --fs-s: .867rem;       /* 13px */
  --fs-m: 1rem;          /* 15px */
  --fs-l: 1.133rem;      /* 17px */
  --fs-xl: 1.333rem;     /* 20px */
  --fs-2xl: 1.733rem;    /* 26px */
  --r: 8px;              /* controls and small blocks */
  --r-m: 10px;           /* rows and tiles */
  --r-l: 14px;           /* cards and panels */
}
#lobby {
  color-scheme: light;
  --ink: #fdfcf5;        /* the wordmark's paper */
  --panel: #ffffff;
  --panel-2: #f3f1e8;
  --field: #ffffff;
  --line: #e2dfd3;
  --ivory: #144248;      /* text: the wordmark's teal, 10.7:1 */
  --muted: #5c6f74;      /* 5.2:1 */
  --brass: #b24a16;      /* accent text and links: 5.3:1 */
  --brass-fill: #e67434;
  --brass-ink: #142e33;
  --rosin: #b5452c;
  --moss: #3f7a3a;
}
:root:has(#lobby:not([hidden])) { color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 var(--ui); background: var(--ink); color: var(--ivory); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-xl); }
p { margin: 0 0 .75rem; }
a { color: var(--brass); text-underline-offset: .15em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; color: var(--ivory); background: var(--ink); padding: 0 .3em; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }
.warn { color: var(--rosin); }
.spacer, .grow { flex: 1; }
/* Nothing here yet: said once, in the middle, with room for one link to what to do about it. */
.empty { color: var(--muted); font-size: var(--fs-m); padding: 1.5rem 1rem; max-width: 42ch; margin: 0 auto; text-align: center; line-height: 1.5; }
.empty a { color: var(--brass); }
[hidden] { display: none !important; }

/* ---- controls ---- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .55rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
textarea { resize: vertical; }
label { display: block; color: var(--muted); font-size: var(--fs-s); margin: 0 0 .55rem; }
label > input, label > select, label > textarea { margin-top: .25rem; color: var(--ivory); font-size: var(--fs-m); }
label.check, label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--ivory); font-size: var(--fs-s); }
label.inline input, label.inline select { width: auto; margin: 0; padding: .25rem .4rem; font-size: var(--fs-s); }
label.check input { margin: 0; accent-color: var(--brass); }
label.file { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
label.file span { border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .7rem; color: var(--ivory); font-size: .85rem; }
label.file span:hover { border-color: var(--brass); }
label.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
input[type=range] { width: 100%; accent-color: var(--brass); margin: .3rem 0 0; }
button { cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .8rem; color: var(--ivory); }
button:hover { border-color: var(--brass); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--brass-fill); color: var(--brass-ink); border-color: var(--brass-fill); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.danger { background: var(--rosin); border-color: var(--rosin); color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
button.danger-text { color: var(--rosin); }
button.big { font-size: 1.05rem; padding: .7rem 1.3rem; }
/* A link dressed as the primary button: the AuthKit sign-in is a plain navigation, not a form. */
.btn-link { display: inline-block; text-decoration: none; text-align: center; box-sizing: border-box; background: var(--brass-fill); color: var(--brass-ink); border: 1px solid var(--brass-fill); border-radius: var(--r); font-weight: 600; font-size: 1.05rem; padding: .7rem 1.3rem; margin-bottom: .6rem; }
.btn-link:hover { filter: brightness(1.08); }
.go { display: flex; gap: .6rem; align-items: center; margin-top: .4rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tri { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .8rem .8rem; margin: 0 0 .8rem; }
legend { color: var(--muted); font-size: var(--fs-s); padding: 0 .3rem; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: var(--fs-xs); padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
td input, td select { padding: .25rem .35rem; font-size: .85rem; }
table.compact td { padding: .15rem .3rem; white-space: nowrap; }
table.compact td:nth-child(2), table.compact td:nth-child(3) { min-width: 9rem; }
table.compact button { padding: .2rem .5rem; font-size: .8rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1rem; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: .45rem .9rem; color: var(--muted); }
.seg button.on { background: var(--panel-2); color: var(--ivory); }

/* ---- lobby ---- */
/* The opening page is the hall with the morning sun in: white paper with a
   wash of gold from the top left, the lit world map as the one bold element,
   and six plain doors in. */
body:has(#lobby:not([hidden])) {
  color: #144248;
  background: radial-gradient(110rem 60rem at 10% -25%, rgba(230,116,52,.16), transparent 60%),
              radial-gradient(80rem 50rem at 105% 110%, rgba(20,66,72,.08), transparent 60%), #fdfcf5;
  background-attachment: fixed;
}
#lobby { min-height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem) 2rem; box-sizing: border-box; color: var(--ivory); }
.lobby-top { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0 .4rem; flex-wrap: wrap; }
/* The wordmark is a picture (teal with the smiling "oo"; an ivory cut for the dark room). The
   height is the only size set, so the width follows the picture's own shape. */
.lobby-brand { display: inline-flex; align-items: center; text-decoration: none; }
.lobby-brand img { height: 34px; width: auto; display: block; }
.lobby-nav { margin: 0 auto; border-radius: 999px; background: rgba(255,255,255,.7); }
.lobby-nav button { padding: .5rem 1rem; border-radius: 999px; }
.lobby-nav button.on { background: var(--panel-2); color: var(--ivory); }
.signin { border-radius: 999px; padding: .45rem 1rem; border-color: rgba(178,74,22,.45); color: var(--brass); background: rgba(255,255,255,.7); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signin:hover, .signin.on { border-color: var(--brass); background: rgba(230,116,52,.12); }
.signin.in { color: var(--ivory); border-color: var(--line); }

/* The hero is sized to the window so the whole opening page fits one screen; the map is cropped at the poles. */
.find-hero { position: relative; margin: .8rem 0 .9rem; border-radius: 18px; overflow: hidden; background: #f3efe2; height: clamp(340px, calc(100vh - 330px), 620px); box-shadow: 0 30px 70px -40px rgba(20,66,72,.4), 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(20,66,72,.1); }
#findMap { display: block; width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-47%); }
.find-hero-text { position: absolute; inset: 0; padding: clamp(1.2rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; background: linear-gradient(100deg, rgba(252,249,242,.9) 0%, rgba(252,249,242,.6) 38%, rgba(252,249,242,0) 62%), linear-gradient(180deg, rgba(252,249,242,0) 40%, rgba(252,249,242,.9) 100%); }
.find-hello { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--brass); font-size: 1.3rem; margin: 0 0 .35rem; font-variation-settings: "opsz" 72; }
.find-hero-text h1 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); line-height: 1; font-weight: 400; letter-spacing: -0.02em; max-width: 15ch; text-wrap: balance; font-variation-settings: "opsz" 144; text-shadow: 0 1px 24px rgba(252,249,242,.9); }
.find-lede { color: var(--ivory); opacity: .9; max-width: 62ch; margin: 1rem 0 .5rem; font-size: 1rem; line-height: 1.55; }
.find-stat { color: var(--brass); font-family: var(--display); font-size: 1.1rem; margin: 0; max-width: 72ch; }
.find-stat:empty { display: none; }
.find-hover { position: absolute; right: .9rem; top: .7rem; background: rgba(255,255,255,.85); border-radius: 999px; padding: .2rem .7rem; pointer-events: none; }
.find-hover:empty { display: none; }
.find-key { position: absolute; left: .9rem; top: .7rem; background: rgba(255,255,255,.8); border-radius: 999px; padding: .2rem .7rem; pointer-events: none; display: flex; gap: .4rem; align-items: center; }
.find-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #e67434; box-shadow: 0 0 6px #f4a070; }
.find-key i.k-ppl { background: #9a6cc2; box-shadow: 0 0 6px #c9a0dc; margin-left: .5rem; }

/* Six doors in. */
.home-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin: 0 0 1rem; }
.home-act { text-align: left; display: grid; grid-template-columns: 22px 1fr; column-gap: .7rem; row-gap: .2rem; align-items: start; padding: 1rem 1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); color: var(--ivory); cursor: pointer; font: inherit; box-shadow: 0 1px 2px rgba(20,66,72,.04); transition: border-color 150ms, transform 150ms, box-shadow 150ms; }
.home-act svg { grid-row: 1 / span 2; width: 22px; height: 22px; stroke: var(--brass); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: .15rem; }
.home-act b { font-family: var(--display); font-size: var(--fs-l); font-weight: 500; line-height: 1.15; }
.home-act span { color: var(--muted); font-size: var(--fs-s); line-height: 1.4; }
.home-act:hover { border-color: var(--brass); transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(178,74,22,.4); }
.home-act:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* The footer: three short things, not one long sentence. */
#homePane .fine { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: var(--fs-xs); }
#homePane .fine span { white-space: nowrap; }
@media (max-width: 1200px) { .home-actions { grid-template-columns: repeat(3, 1fr); } }

/* The search: a sentence, then the facets lined up under one label column. */
.filters { border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.1rem 1.25rem .85rem; margin-bottom: 1rem; background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: 0 1px 2px rgba(20,66,72,.04); }
.ask { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-bottom: 1rem; }
.ask label { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--display); font-size: 1.2rem; color: var(--ivory); white-space: nowrap; }
.ask label.ask-text { flex: 1; min-width: 240px; }
.ask label.ask-text input { flex: 1; }
.ask select, .ask input { font-family: var(--ui); font-size: var(--fs-m); padding: .55rem .8rem; border-radius: var(--r-m); background: var(--field); border: 1px solid var(--line); margin: 0; width: auto; }
.ask .ask-play select { max-width: 15rem; }
.ask .ask-play input { width: 11rem; }
.ask input::placeholder { color: var(--muted); opacity: .8; }
.filters select { appearance: none; padding-right: 1.7rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6354' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; }
.facets { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; align-items: center; }
.facet-l { color: var(--muted); font-size: var(--fs-s); }
.facet-v { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; min-width: 0; }
.facet-pair { display: inline-flex; align-items: center; gap: .45rem; margin-left: .5rem; white-space: nowrap; }
.filters-foot button { white-space: nowrap; }
.facet-v select { width: auto; padding: .32rem 1.7rem .32rem .6rem; font-size: var(--fs-s); border-radius: var(--r); margin: 0; }
.filters-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-top: 1px solid var(--line); padding-top: .65rem; margin-top: .95rem; }
.filters-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .5rem; }
.filters-row:last-child { margin-bottom: 0; }
.filters-row label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.filters-row input, .filters-row select { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; font-size: var(--fs-s); color: var(--muted); cursor: pointer; margin: 0; background: var(--field); }
.chip input { margin: 0; accent-color: var(--brass); appearance: none; width: 0; height: 0; }
.chip:hover { border-color: var(--muted); color: var(--ivory); }
.chip:has(input:checked) { color: var(--brass-ink); border-color: var(--brass-fill); background: var(--brass-fill); }
.chip:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 1px; }
.small-btn { font-size: var(--fs-xs); padding: .25rem .6rem; }
.tag.soft { border-style: dashed; }
.tag b { color: var(--brass); font-weight: 600; }

.lobby-pane .board { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .8rem; }
.lobby-pane .board .item, .find-people .people .item { margin: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); gap: .45rem; transition: border-color 150ms, box-shadow 150ms; }
.lobby-pane .board .item { box-shadow: 0 1px 2px rgba(20,66,72,.04); }
.lobby-pane .board .item:hover { background: var(--panel); border-color: var(--brass); box-shadow: 0 10px 24px -14px rgba(178,74,22,.35); }
.lobby-pane .board .item .grow, .find-people .people .item .grow { flex: 0 0 auto; width: 100%; }
.lobby-pane .board .item b.title { font-family: var(--display); font-size: 1.2rem; font-weight: 500; white-space: normal; line-height: 1.15; }
.lobby-pane .board .item .wanted, .find-people .people .wanted { color: var(--ivory); font-size: .9rem; }
.lobby-pane .board .item .wanted b, .find-people .people .wanted b { color: var(--brass); font-weight: 600; }
.lobby-pane .board .item .blurb, .find-people .people .blurb { color: var(--ivory); opacity: .85; }
.lobby-pane .board .item .go, .find-people .people .go { margin-top: auto; padding-top: .3rem; width: 100%; }
.lobby-pane .board .item .go .code-btn { margin-left: auto; font-size: .82rem; }
#peoplePane .fine { margin-top: 1.2rem; }

/* People cards, the profile form, the sign-in box */
#peoplePane .board .item.composer b.title::after { content: ' ♩'; color: var(--brass); font-weight: 400; }
.people .works { font-size: .86rem; display: flex; flex-direction: column; gap: .15rem; }
.people .work a, .people .link-btn { font-size: .82rem; }
.people .link-btn { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ivory); }
.commission { color: var(--brass); }
.profile-box, .me-box { margin: 1rem auto 0; border: 1px solid var(--line); border-radius: var(--r-l); padding: 1.2rem 1.4rem 1.4rem; background: var(--panel); box-shadow: 0 1px 2px rgba(20,66,72,.04), 0 24px 60px -40px rgba(20,66,72,.3); max-width: 760px; }
.me-box { max-width: 640px; }
/* Pictures: a round avatar, initials when there is none. */
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(230,116,52,.16); color: var(--brass); font-family: var(--display); font-size: 1rem; font-weight: 500; overflow: hidden; vertical-align: middle; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.big { width: 84px; height: 84px; font-size: 1.8rem; }
.with-avatar { display: flex; gap: .7rem; align-items: flex-start; }
.with-avatar .titles { min-width: 0; }
.pic-field { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.pic-field .go, .pic-field label.file { margin: 0 .4rem 0 0; }
.report { color: var(--muted); font-size: var(--fs-xs); text-decoration: none; margin-left: auto; }
.report:hover { color: var(--rosin); }
.me-up { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; align-items: baseline; }
.me-up time { color: var(--brass); font-family: var(--display); font-size: .95rem; white-space: nowrap; }
.me-up .when { color: var(--muted); font-size: .8rem; }
.me-ens { display: flex; gap: .7rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); }
.me-ens:first-of-type { border-top: 0; }
.me-ens .grow { min-width: 0; }
.me-ens small { color: var(--muted); display: block; }
.me-box h2 { margin-bottom: .4rem; }
/* Storage bars (account page, plan panel, economics). */
.bar { display: inline-block; vertical-align: middle; width: 7rem; height: .5rem; border-radius: 999px; background: var(--line); overflow: hidden; margin-right: .3rem; }
.bar i { display: block; height: 100%; background: var(--brass); border-radius: 999px; }
.bar.full i { background: var(--rosin); }
.plan-storage { margin-top: .35rem; }
/* The economics report. */
.admin { max-width: 1200px; }
.admin h3 { margin: 1.4rem 0 .4rem; }
.econ-head label { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.econ-head label select { width: auto; }
.econ-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; }
.econ-card { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: var(--panel); display: grid; gap: .15rem; }
.econ-card small { color: var(--muted); font-size: .78rem; }
.econ-card b { font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: var(--ivory); line-height: 1.1; }
.econ-card span { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.econ-card.bad { border-color: var(--rosin); }
.econ-card.bad b { color: var(--rosin); }
.econ-card.ok b { color: var(--moss); }
.econ-cap { margin-top: .7rem; }
.econ-cap #econCap { width: 5.5rem; display: inline-block; padding: .2rem .4rem; } /* the id outranks the general input rule */
.econ-scroll { overflow-x: auto; }
table.econ { font-size: .82rem; white-space: nowrap; }
table.econ th { text-align: left; font-weight: 500; color: var(--muted); padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
table.econ td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.econ td small { display: block; color: var(--muted); font-size: .74rem; white-space: nowrap; }
table.econ td.wrap { white-space: normal; min-width: 14rem; max-width: 22rem; line-height: 1.35; }
table.econ tr.total td { font-weight: 600; color: var(--ivory); border-bottom: 0; }
table.econ tr.anon td { color: var(--muted); }
/* The bill reconciled: list price, the allowances taken off, the fee, the bill. */
table.econ.recon { margin: .7rem 0 .3rem; max-width: 42rem; white-space: normal; }
table.econ.recon td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.econ.recon td small { display: block; color: var(--muted); }
.me-list { margin-top: 1rem; font-size: .9rem; }
.me-list h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.me-list div { padding: .2rem 0; }
.me-list b { color: var(--ivory); font-weight: 500; }
.dev-link { margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--r-m); background: rgba(230,116,52,.1); border: 1px dashed rgba(178,74,22,.5); font-size: var(--fs-s); }
.profile-box .filters-row { margin: .4rem 0 .6rem; }
.inst-pick { display: inline-flex; gap: .4rem; align-items: center; }
.inst-pick select { width: auto; }
.chip.on { color: var(--brass-ink); border-color: var(--brass-fill); background: var(--brass-fill); }
.chip.on button { border: 0; background: none; color: inherit; font: inherit; padding: 0 0 0 .2rem; cursor: pointer; line-height: 1; }
.find-people { margin-top: 1rem; }
.find-people .people .item { margin: .4rem 0; }
.find-people .tri select, .find-people .tri input { width: 100%; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; }
.dots i.on { background: var(--brass); border-color: var(--brass); }
.lobby-card { max-width: 520px; margin: 1.5rem auto 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.lobby-card h1 { font-size: 2.4rem; margin-bottom: .5rem; }
.lede { color: var(--muted); max-width: 46ch; margin-bottom: 1.25rem; font-size: .98rem; }
.preview { min-height: 1.2rem; font-size: .88rem; color: var(--muted); margin: -.2rem 0 .7rem; }
.preview b { color: var(--ivory); }
.fine { color: var(--muted); font-size: var(--fs-xs); margin-top: 1rem; }
#joinBtn { width: 100%; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .home-act, .lobby-pane .board .item, .proj { transition: none; } .home-act:hover { transform: none; } .entry-cue.pulse .n { animation: none; } }

/* ---- app shell ---- */
/* overflow: clip, not hidden: a field focused far down a form cannot scroll the room off the screen. */
#app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: 56px 1fr; overflow: clip; }
/* The room fills the window; focusing a field far down a form must scroll its column, not the page. */
body:has(#app:not([hidden])) { overflow: clip; }
/* The top bar: the wordmark, the room's name and the invite code on the left; what is happening and who you are on the right. */
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.wordmark { display: inline-flex; align-items: center; margin-right: .2rem; }
.wordmark img { height: 24px; width: auto; display: block; }
.room-title { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.code { display: inline-flex; gap: .5rem; align-items: baseline; background: var(--ink); border-color: var(--line); padding: .25rem .6rem; font-size: var(--fs-s); font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 600; }
.code-hint { font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: var(--fs-xs); }
.pill { font-size: var(--fs-s); color: var(--muted); }
.pill.live { color: var(--brass); }
.pill.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rosin); margin-right: .4rem; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation: none; } }
.me { font-size: var(--fs-s); }
/* The connection dot carries a word for screen readers in its title; the colour alone says it to the eye. */
.status { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
.status.ok { background: var(--moss); }
.status.bad { background: var(--rosin); }
.badge { background: var(--brass-fill); color: var(--brass-ink); border-radius: 999px; font-size: var(--fs-xs); padding: 0 .45rem; margin-left: .2rem; font-weight: 600; }

.rail { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .5rem; border-right: 1px solid var(--line); background: var(--panel); }
.rail button { background: transparent; border: 0; text-align: left; padding: .6rem .75rem; color: var(--muted); border-radius: var(--r); font-size: var(--fs-s); font-weight: 500; }
.rail button:hover { color: var(--ivory); background: var(--panel-2); }
.rail button.on, .rail button[aria-current] { color: var(--ivory); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--brass); }
.rail button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.rail button[data-view=settings] { margin-top: auto; } /* set once, so kept apart from the daily screens */
.rail-foot { margin-top: auto; color: var(--muted); font-size: var(--fs-xs); padding: 0 .4rem; }

#main { min-height: 0; min-width: 0; }
.view { display: none; height: 100%; min-height: 0; }
.view.on { display: grid; }
.view[data-view=rehearse] { grid-template-columns: 1fr 340px; }
.view[data-view=repertoire], .view[data-view=schedule], .view[data-view=people], .view[data-view=review] { grid-template-columns: 380px 1fr; }
.view[data-view=settings] { grid-template-columns: minmax(0, 1fr); }
.settings-col { width: 100%; max-width: 920px; }
.col { min-height: 0; overflow: auto; padding: 1rem 1.2rem; }
.list-col { border-right: 1px solid var(--line); background: var(--panel); }
.col-head { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .8rem; }
.col-head h2 { flex: 1; }

/* ---- stage ---- */
.stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); position: relative; overflow-y: auto; }
/* The microphone strip and the check panel keep their full height; when they need more room than
   is left, the stage keeps a usable minimum and the column scrolls instead of cutting them off. */
.stage > .mic-strip, .stage > .check-panel, .stage > .stage-tabs { flex-shrink: 0; }
body:not(.perform) .stage > .stage-body { min-height: 200px; }
/* The count-in, large over the stage: a number per beat of the bar before the start, then GO. */
.count-big { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--display); font-weight: 700; font-size: min(38vh, 22rem); line-height: 1; color: var(--brass); text-shadow: 0 0 40px rgba(0,0,0,.6); }
/* Clipped, and the pulse scales what is inside rather than the box itself: a box scaled past the
   stage gave it scrollbars on every beat, and the music re-fitted to the narrower stage each time. */
.count-big { flex-direction: column; overflow: hidden; }
.count-big > * { display: block; } /* a transform needs a block, not an inline span */
.count-big small { font-family: var(--body, system-ui); font-weight: 600; font-size: min(5vh, 2rem); letter-spacing: .04em; color: var(--ivory); margin-top: -.1em; opacity: .9; }
.count-big.go { color: var(--moss); letter-spacing: .02em; }
.count-big.pulse > * { animation: count-pulse .45s ease-out; }
@keyframes count-pulse { from { transform: scale(1.25); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .count-big.pulse > * { animation: none; } }
/* The pickup cue: whose entry is coming and the beats left, across the top of the stage through the bar before it. */
.entry-cue { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: baseline; gap: .5rem; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(10,20,23,.84); border: 1px solid var(--brass); color: var(--ivory); font-size: 1.15rem; pointer-events: none; white-space: nowrap; }
.entry-cue b { color: var(--brass); font-weight: 600; }
.entry-cue .n { font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--brass); min-width: 1.2em; text-align: center; }
.entry-cue small { color: var(--muted); font-size: .8rem; }
.entry-cue.pulse .n { animation: count-pulse .35s ease-out; }
/* The words as they are sung: the line being sung lit syllable by syllable, the next line under it. */
.lyric-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .8rem 1.2rem 1rem; background: linear-gradient(180deg, rgba(10,20,23,0), rgba(10,20,23,.88) 35%); text-align: center; pointer-events: none; font-family: var(--display); }
.lyric-now { font-size: clamp(1.3rem, 3.2vw, 2.4rem); line-height: 1.25; color: var(--muted); }
.lyric-now .sung { color: var(--ivory); }
.lyric-now .sung:last-of-type { color: var(--brass); }
.lyric-next { font-size: clamp(1rem, 2vw, 1.4rem); color: var(--muted); opacity: .6; margin-top: .25rem; line-height: 1.25; }
.piece-top { padding: .2rem 0 .4rem; }
.piece-top label { display: block; }
.piece-top select { font-size: 1rem; }
.stage-tabs { display: flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
/* A phone's music stand: click / conductor or score. Only on a phone, and only on the Music stand tab. */
.stand-switch { display: none; }
.stage-tabs button { background: transparent; border: 0; color: var(--muted); padding: .35rem .7rem; }
.stage-tabs button.on { color: var(--ivory); box-shadow: inset 0 -2px 0 var(--brass); }
.stage-body { flex: 1; min-height: 0; position: relative; background: #0a1417; }
.pane { position: absolute; inset: 0; display: none; }
.pane.on { display: flex; flex-direction: column; }
#refVideo { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* The player's own camera, mirrored like a looking glass; a red dot while a take records it. */
.self-view { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 22%; min-width: 120px; max-width: 220px; aspect-ratio: 16 / 9; object-fit: cover; transform: scaleX(-1); background: #000; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.self-view.rec { border-color: var(--rosin); animation: rec-blink 1.2s steps(2, start) infinite; }
/* The earlier takes' pictures, a row of small tiles along the bottom left of the stage. */
.take-tiles { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; gap: 6px; max-width: 70%; flex-wrap: wrap; }
.take-tile { margin: 0; width: 16%; min-width: 96px; max-width: 160px; aspect-ratio: 16 / 9; position: relative; background: #000; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.take-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.take-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .4rem; font-size: var(--fs-xs); color: var(--ivory); background: linear-gradient(transparent, rgba(0,0,0,.7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri.two { grid-template-columns: 1fr 1fr; }
@keyframes rec-blink { from { box-shadow: 0 0 0 3px rgba(178, 74, 58, .55), 0 6px 18px rgba(0,0,0,.45); } to { box-shadow: 0 0 0 3px rgba(178, 74, 58, .1), 0 6px 18px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce) { .self-view.rec { animation: none; box-shadow: 0 0 0 3px rgba(178, 74, 58, .45); } }
/* Recorded pictures in the camera preview tiles. */
.cam-tile video.feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cam-tile video.feed.early { opacity: 0; }
.cam-tile.has-feed .ini { display: none; }
.cam-tile.has-feed .who { background: linear-gradient(transparent, rgba(0,0,0,.65)); margin: 0 -.35rem -.25rem; padding: .6rem .35rem .25rem; width: 100%; }
.cam-tile.big.has-feed .who { margin: 0 -.8rem -.6rem; padding: 1rem .8rem .6rem; }
#conductorCanvas { width: 100%; height: 100%; display: block; }
.score-box { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
#scoreCanvas { background: #fff; display: block; max-width: 100%; max-height: 100%; cursor: pointer; }
.score-bar #scorePart { width: auto; max-width: 220px; padding: .3rem .4rem; font-size: .85rem; }
/* With your part showing, your camera and the earlier takes' pictures never cover the music:
   the page gives up a strip on the right and they stand in it, camera on top. */
.stage-body:has(> .pane[data-pane=score].on):has(> #selfView:not([hidden]), > #takeTiles:not([hidden])) > .pane[data-pane=score] { right: 186px; }
.stage-body:has(> .pane[data-pane=score].on) > .self-view { top: 10px; bottom: auto; width: 166px; min-width: 0; max-width: none; }
.stage-body:has(> .pane[data-pane=score].on) > .take-tiles { left: auto; right: 10px; top: 112px; bottom: 10px; width: 166px; max-width: none; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; }
.stage-body:has(> .pane[data-pane=score].on) > .take-tiles .take-tile { width: 100%; max-width: none; min-width: 0; flex: none; }
/* The conducting video beside the music when the part is on the stage: the top tile of the margin, the camera and the takes under it. */
.stage-body > #refVideo.aside { position: absolute; right: 10px; top: 10px; z-index: 3; width: 166px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.stage-body:has(> #refVideo.aside:not([hidden])) > .pane[data-pane=score] { right: 186px; }
.stage-body:has(> #refVideo.aside:not([hidden])) > .self-view { top: 112px; }
.stage-body:has(> #refVideo.aside:not([hidden])) > .take-tiles { top: 214px; }
.stage-body:has(> #refVideo.aside:not([hidden])):has(> .self-view[hidden]) > .take-tiles { top: 112px; }
.perform-cams > #refVideo.aside { position: static; width: 100%; max-width: 360px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
/* Full screen: they move to the margin beside the music (the elements are moved there by setPerform). */
.perform-cams { display: flex; flex-direction: column; gap: 6px; align-items: center; }
body.perform .perform-cams .self-view { position: static; width: 100%; max-width: 220px; min-width: 0; }
.perform-cams .take-tiles { position: static; max-width: none; width: 100%; justify-content: center; }
.perform-cams .take-tile { width: calc(50% - 3px); min-width: 0; }

/* ---- performance layout: the music fills the screen, the controls keep to one side ---- */
body.perform #app { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.perform .top, body.perform .rail, body.perform .mic-strip, body.perform .check-panel, body.perform .setup-panel, body.perform .signals, body.perform .feed,
body.perform .listen, body.perform .listen-late, body.perform .solo, body.perform .transport, body.perform .scope, body.perform .ready, body.perform .take-done,
body.perform .piece-top, body.perform #soloInfo, body.perform #chatDrawer,
body.perform .score-bar, body.perform .stage-tabs { display: none; }
/* The page is drawn at the full height of the window; the stage column is exactly as wide as
   the page came out (--score-w, set when it is drawn) and the controls have the margin beside it. */
body.perform .view[data-view=rehearse] { grid-template-columns: minmax(190px, 1fr) var(--score-w, 3fr); }
body.perform .view[data-view=rehearse] .side { order: -1; border-right: 1px solid var(--line); padding: .7rem .8rem; gap: .9rem; justify-content: center; }
body.perform .view[data-view=rehearse] .stage { border-right: 0; }
body.perform.perform-right .view[data-view=rehearse] { grid-template-columns: var(--score-w, 3fr) minmax(190px, 1fr); }
body.perform.perform-right .view[data-view=rehearse] .side { order: 1; border-right: 0; border-left: 1px solid var(--line); }
body.perform #barBig { font-size: min(12vw, 6.5rem); }
body.perform .bar-block { text-align: center; padding: 0; }
body.perform .view[data-view=rehearse] .side { gap: .6rem; }
body.perform .go.main { justify-content: center; flex-wrap: wrap; }
body.perform .self-view { width: 14%; min-width: 90px; }
/* The microphone meter in the margin while the music fills the screen. */
.perform-meter { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.perform-meter #meter { width: min(60%, 220px); height: 10px; }
.perform-meter .off { color: var(--rosin); }
/* The words and the entry cue in the margin, under the Play, Record and Stop row, while the music fills the screen. */
.side .lyric-band { position: static; background: none; padding: 0; text-align: center; }
.side .lyric-now { font-size: clamp(1rem, 1.7vw, 1.4rem); }
.side .lyric-next { font-size: clamp(.85rem, 1.2vw, 1.05rem); }
.side .entry-cue { position: static; transform: none; align-self: center; }
/* The simulated conductor, small, in the margin beside the music. */
.side-conductor { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 24vh; flex: 0 1 auto; min-height: 0; border: 1px solid var(--line); border-radius: var(--r); background: #0a1417; }
/* The page turner and the way out, beside the music while it fills the screen. */
.perform-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .5rem; }
body.perform .perform-tools { order: 10; margin-top: auto; }
.perform-tools #pageLabel { flex-basis: 100%; text-align: center; }
/* A tablet or phone held upright: the controls become a strip above the music. */
@media (max-aspect-ratio: 1/1) {
  body.perform .view[data-view=rehearse], body.perform.perform-right .view[data-view=rehearse] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  body.perform .view[data-view=rehearse] .side, body.perform.perform-right .view[data-view=rehearse] .side { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; border: 0; border-bottom: 1px solid var(--line); padding: .4rem .8rem; }
  body.perform .bar-block { padding: 0; display: flex; align-items: center; gap: .6rem; }
  body.perform #barBig { font-size: 3rem; }
  body.perform .dots { margin: 0; }
  body.perform #barSub { display: none; }
  body.perform .go.main { margin: 0; }
  body.perform .side-conductor { display: none; }
  body.perform .perform-tools { order: 10; margin: 0; }
  .perform-tools #pageLabel { flex-basis: auto; }
}
.score-box .empty { position: absolute; inset: auto; text-align: center; }
.score-box.has-doc .empty { display: none; }
.score-box:not(.has-doc) #scoreCanvas { display: none; }
/* The part on paper, kept apart at the end of the stand's tools so it is easy to find. */
.score-paper { margin-left: auto; display: inline-flex; gap: .4rem; }
.score-paper a, .score-paper button { border: 1px solid var(--brass); color: var(--ivory); padding: .35rem .8rem; border-radius: 6px; font-size: var(--fs-s); text-decoration: none; white-space: nowrap; }
.score-paper a:hover, .score-paper button:hover { background: var(--brass); color: var(--ink); }
.score-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.mic-strip { display: flex; align-items: center; gap: .3rem .55rem; padding: .4rem .8rem; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.mic-strip select { width: auto; max-width: 200px; padding: .3rem .4rem; font-size: .85rem; }
.mic-strip #micInfo { min-width: 18rem; } /* a message wraps onto its own line rather than squeezing into a tall column */
/* Muted microphone, camera off: said in red so it is not missed before a take. */
.mic-strip button.muted-btn { color: var(--rosin); border-color: var(--rosin); }
/* The way into Setup; amber until this computer is calibrated. */
.setup-chip.needs { color: var(--brass); border-color: var(--brass); }
.setup-chip.on { background: var(--panel-2); }
/* Setup: four groups side by side on a wide screen, stacked on a narrow one. Takes over the stage like Calibrate. */
.setup-panel { padding: .8rem 1rem 1rem; border-top: 1px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column; gap: .6rem; overflow: auto; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; align-items: start; }
.setup-grid fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .8rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.setup-grid legend { font-family: var(--display); font-size: 1rem; padding: 0 .3rem; }
.setup-grid p { margin: 0; line-height: 1.4; }
.setup-grid label:not(.check):not(.inline) { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.setup-grid select { width: 100%; }
.setup-grid .go { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.setup-nums { display: flex; flex-direction: column; gap: .35rem; }
.setup-nums label { white-space: nowrap; font-size: .85rem; }
.setup-panel .setup-nums input[type=number] { width: 5.5rem; padding: .3rem .45rem; }
body:not(.perform) .stage:has(> .setup-panel:not([hidden])) > .stage-body { display: none; }
body:not(.perform) .stage > .setup-panel { flex: 1 0 auto; }
body.view-review .setup-panel { display: none; }
.mic-tip { font-size: .84rem; color: var(--ivory); line-height: 1.45; }
.mic-tip summary { cursor: pointer; color: var(--brass); font-size: .82rem; }
.mic-tip p { margin: .35rem 0 0; max-width: 78ch; }
#meter { width: 110px; height: 8px; background: var(--ink); border-radius: 4px; overflow: hidden; }
#meterBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--moss), var(--brass) 70%, var(--rosin)); transition: width 80ms linear; }
body.view-review .mic-strip, body.view-review .check-panel { display: none; }
.check-panel { padding: .6rem .9rem .7rem; border-top: 1px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column; gap: .35rem; }
.check-head { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.check-head b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
#checkWave { width: 100%; height: 56px; display: block; border-radius: var(--r); background: var(--ink); }
.check-panel .go { margin: .2rem 0 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.check-how ol { margin: .2rem 0 .4rem; padding-left: 1.3rem; display: grid; gap: .25rem; max-width: 60ch; }
.check-how p { margin: 0; max-width: 60ch; }
/* Beat strip: count-in numbers, then one square per click, grouped by bar. */
.check-beats { display: flex; flex-direction: column; gap: .45rem; padding: .3rem 0; }
.cb-cue { display: flex; align-items: center; gap: .8rem; min-height: 2.4rem; }
#checkCue { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
#checkCue.clap { color: var(--brass); }
.cb-heard { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: background .08s, color .08s; }
.cb-heard.on { background: var(--brass-fill); color: var(--brass-ink); border-color: var(--brass-fill); }
.cb-row { display: flex; gap: .9rem; flex-wrap: wrap; }
.cb-bar { display: flex; gap: .3rem; }
.cb { width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; font-size: .9rem; color: var(--muted); background: var(--ink); transition: background .06s, transform .06s; }
.cb.count { border-style: dashed; }
.cb.cb-step { width: auto; padding: 0 .6rem; height: 2rem; font-size: .78rem; white-space: nowrap; }
.cb.past { background: var(--panel); }
.cb.now { background: var(--brass-fill); color: var(--brass-ink); border-color: var(--brass-fill); transform: scale(1.12); }
.cb.count.now { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.cb.hit { background: color-mix(in srgb, var(--brass-fill) 55%, var(--panel)); color: var(--brass-ink); border-color: var(--brass); }
.cb.miss { background: transparent; border-color: var(--rosin); color: var(--rosin); }
@media (prefers-reduced-motion: reduce) { .cb, .cb-heard { transition: none; } .cb.now { transform: none; } }
/* Calibrate's picture: the clap video played back with its sound, judged by eye. */
.check-fps { color: var(--rosin); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.check-pic { display: flex; gap: .9rem; align-items: flex-start; flex-wrap: wrap; }
#checkVideo { width: min(360px, 100%); aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r); transform: scaleX(-1); }
.check-pic-tools { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .3rem; }
.check-pic-tools p { margin: 0; max-width: 50ch; }
/* While Calibrate or Sound check is open it takes over the stage (the conductor and part view),
   with the microphone strip above it; Close gives the stage back. */
body:not(.perform) .stage:has(> .check-panel:not([hidden])) > .stage-body { display: none; }
body:not(.perform) .stage > .check-panel { flex: 1 0 auto; }
/* A wide screen: the panel's results run down the left and the camera (live while you clap,
   then the clap video) stands beside them on the right. */
@media (min-width: 1100px) {
  .check-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); column-gap: 1.2rem; row-gap: .35rem; align-content: start; }
  .check-panel > * { grid-column: 1; }
  .check-panel > #checkPic { grid-column: 2; grid-row: 1 / span 9; flex-direction: column; gap: .5rem; }
  .check-panel > #checkPic #checkVideo { width: 100%; }
  .check-panel > #checkPic .check-pic-tools { flex: none; }
  .check-panel > #checkPic .go { flex-wrap: nowrap; gap: .4rem; }
  .check-panel > #checkPic .go button { padding: .3rem .6rem; }
}

/* ---- camera preview (review) ---- */
#cameraPanel { padding: .4rem .8rem .8rem; }
#cameraPanel:empty { display: none; }
.cam-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.cam-head h2 { font-size: 1.2rem; margin: .6rem 0 .4rem; }
.cam-head h2 small { color: var(--muted); font-weight: 400; font-family: var(--ui); font-size: .82rem; }
.cam-now { color: var(--brass); font-size: .85rem; }
.cam-stage { position: relative; aspect-ratio: 16 / 9; max-height: 300px; margin: 0 auto; container-type: inline-size; background: #0a1417; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cam-tiles { position: absolute; inset: 0; display: grid; gap: var(--gap, 0px); padding: var(--gap, 0px); grid-template-columns: repeat(var(--cols, 4), 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); }
.cam-stage.portrait { max-height: 420px; }
.cam-stage.portrait .cam-tile.corner { width: 36%; }
.cam-out { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0 0 .5rem; }
.cam-out label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; color: var(--ivory); }
.cam-out select { width: auto; padding: .25rem .4rem; font-size: .85rem; }
.cam-out input[type=number] { width: 3.6rem; }
.cam-out input[type=color] { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--line); background: none; }
.tl-lane.tl-hl { top: 87px; }
.tl-block.edit-highlight { background: #9fb6d9; color: var(--ink); }
.tl-key .k-hl { background: #9fb6d9; }
.tl-hlwrap { display: inline-flex; gap: .3rem; align-items: center; }
.tl-hlwrap input { width: auto; }
.tl-hls { margin-top: .3rem; }
.cam-tiles.conductor, .cam-tiles.spotlight { display: block; }
.cam-stage.captioned .cam-tiles:not(.conductor):not(.spotlight) { bottom: 1.8rem; }
.cam-tile { position: relative; background: var(--panel); border-left: 3px solid var(--fam); border-radius: 3px; min-width: 0; overflow: hidden; display: flex; align-items: flex-end; padding: .25rem .35rem; }
.cam-tile .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); color: var(--fam); opacity: .35; font-size: clamp(.9rem, 3cqw, 2.4rem); }
.cam-tile .who { position: relative; display: flex; flex-direction: column; line-height: 1.15; font-size: .72rem; min-width: 0; }
.cam-tile .who b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-tile .who small { color: var(--muted); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-tile.playing { outline: 1px solid var(--fam); }
/* A picture that has run out: the tile goes black, nothing on it. */
.cam-tile.gone { background: #000; border-left-color: transparent; outline: none; }
.cam-tile.gone .ini, .cam-tile.gone .who, .cam-tile.gone video.feed { visibility: hidden; }
/* What the Studio writes on the pictures: name over part, side by side, one of them, or nothing. */
.watch-stage.no-names .cam-tile .who b { display: none; }
.watch-stage.no-parts .cam-tile .who small { display: none; }
.watch-stage.no-names.no-parts .cam-tile .who { display: none; }
.watch-stage.label-inline .cam-tile .who { flex-direction: row; align-items: baseline; gap: .35em; }
.watch-stage.label-inline .cam-tile .who b { flex: 0 1 auto; }
.watch-stage.label-inline .cam-tile .who small { flex: 0 1 auto; font-size: inherit; }
.watch-stage.label-inline .cam-tile .who small::before { content: '· '; }
.cam-tile.dim { opacity: .45; }
.cam-tile.big { position: absolute; inset: 3px; padding: .6rem .8rem; }
.cam-tile.big .ini { font-size: clamp(3rem, 14cqw, 7rem); }
.cam-tile.big .who { font-size: 1rem; }
.cam-tile.big .who small { font-size: .8rem; }
.cam-tile.corner { position: absolute; right: 8px; top: 8px; width: 22%; aspect-ratio: 16 / 9; padding: .2rem .3rem; border: 1px solid var(--line); }
.cam-tile.corner .who { font-size: .62rem; }
.cam-tiles.wall .cam-tile { animation: cam-page 600ms ease-out; }
@keyframes cam-page { from { opacity: 0; } to { opacity: 1; } }
.cam-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: var(--ivory); font-family: var(--display); font-size: .95rem; pointer-events: none; }
.cam-caption:empty { display: none; }
.cam-bar { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
/* The producer's take-over strip: live only while the run plays; the held cut stays lit. */
.cam-live { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.cam-live button { padding: .3rem .6rem; font-size: .85rem; }
.cam-live button.on { background: var(--brass-fill); color: var(--brass-ink); border-color: var(--brass-fill); font-weight: 600; }
.cam-live .lv-status { flex-basis: 100%; }
.cam-bar label { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.cam-bar input[type=range] { width: 200px; margin: 0; }
.cam-log { margin-top: .3rem; }
.cam-tile.sel { outline: 2px solid var(--ivory); outline-offset: -2px; cursor: pointer; }
.cam-tiles[class] .cam-tile[data-id] { cursor: pointer; }
.cam-tiles.tr-dissolve { animation: cam-dissolve 500ms ease-out; }
.cam-tiles.tr-fade { animation: cam-fade 900ms ease-out; }
@keyframes cam-dissolve { from { opacity: 0; } to { opacity: 1; } }
@keyframes cam-fade { 0% { opacity: 0; } 45% { opacity: 0; } 100% { opacity: 1; } }
.cam-tiles[class*=" mv-"], .cam-tiles[class^="mv-"] { transform-origin: 50% 50%; animation-duration: var(--dur, 4s); animation-timing-function: linear; animation-fill-mode: forwards; }
.cam-tiles.mv-in { animation-name: cam-mv-in; }
.cam-tiles.mv-out { animation-name: cam-mv-out; }
.cam-tiles.mv-left { animation-name: cam-mv-left; }
.cam-tiles.mv-right { animation-name: cam-mv-right; }
.cam-tiles.mv-up { animation-name: cam-mv-up; }
.cam-tiles.mv-down { animation-name: cam-mv-down; }
@keyframes cam-mv-in { from { transform: scale(1); } to { transform: scale(var(--zoom, 1.3)); } }
@keyframes cam-mv-out { from { transform: scale(var(--zoom, 1.3)); } to { transform: scale(1); } }
@keyframes cam-mv-left { from { transform: scale(var(--zoom, 1.2)) translateX(4%); } to { transform: scale(var(--zoom, 1.2)) translateX(-4%); } }
@keyframes cam-mv-right { from { transform: scale(var(--zoom, 1.2)) translateX(-4%); } to { transform: scale(var(--zoom, 1.2)) translateX(4%); } }
@keyframes cam-mv-up { from { transform: scale(var(--zoom, 1.2)) translateY(4%); } to { transform: scale(var(--zoom, 1.2)) translateY(-4%); } }
@keyframes cam-mv-down { from { transform: scale(var(--zoom, 1.2)) translateY(-4%); } to { transform: scale(var(--zoom, 1.2)) translateY(4%); } }
.cam-tiles.tr-dissolve.mv-in, .cam-tiles.tr-fade.mv-in { animation-name: cam-dissolve, cam-mv-in; animation-duration: 500ms, var(--dur, 4s); }

/* timeline editor */
.cam-timeline { margin-top: .6rem; }
.tl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink); }
.tl-lanes { position: relative; min-width: 100%; height: 109px; user-select: none; touch-action: none; }
.tl-ruler { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.tl-ruler i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--line); font-style: normal; font-size: .62rem; color: var(--muted); padding-left: 3px; line-height: 1; }
.tl-ruler i.maj { height: 16px; background: var(--line); }
.tl-ruler i.maj:not(:empty) { width: auto; background: transparent; border-left: 1px solid var(--line); }
.tl-lane { position: absolute; left: 0; right: 0; height: 20px; }
.tl-cues { top: 18px; } .tl-auto { top: 41px; } .tl-edits { top: 64px; }
.tl-block { position: absolute; top: 1px; height: 18px; box-sizing: border-box; border-radius: 3px; font-size: .64rem; line-height: 18px; padding: 0 .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tl-block.cue-solo { background: var(--brass); } .tl-block.cue-section { background: #b8955a; } .tl-block.cue-feature { background: #c9a56b; } .tl-block.cue-tutti { background: #8d7a52; color: var(--ivory); }
.tl-block[class*="auto-"] { background: var(--panel-2); color: var(--ivory); border: 1px solid var(--line); }
.tl-block.auto-spotlight { border-color: var(--brass); } .tl-block.auto-conductor { color: var(--muted); }
.tl-block.tl-edit { background: var(--moss); cursor: pointer; }
.tl-block.edit-hide { background: var(--rosin); color: var(--ivory); }
.tl-block.edit-conductor { background: #5f6f5c; color: var(--ivory); }
.tl-block.tl-edit.on { outline: 2px solid var(--ivory); }
.tl-sel { position: absolute; top: 0; bottom: 0; background: rgba(242, 236, 223, .08); border-left: 1px solid var(--ivory); border-right: 1px solid var(--ivory); pointer-events: none; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brass); pointer-events: none; }
.tl-key { display: flex; gap: 1rem; align-items: center; margin: .3rem 0; flex-wrap: wrap; }
.tl-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.tl-key .k-cues { background: var(--brass); } .tl-key .k-auto { background: var(--panel-2); border: 1px solid var(--line); } .tl-key .k-edits { background: var(--moss); }
.tl-key .tl-hint { margin-left: auto; }
.tl-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.tl-tools label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .85rem; color: var(--ivory); }
.tl-tools input[type=number] { width: 4.2rem; }
.tl-tools select { width: auto; padding: .25rem .4rem; font-size: .85rem; }
.tl-btns { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.tl-btns button { padding: .3rem .6rem; font-size: .85rem; }
.tl-text { margin-top: .3rem; }
.tl-textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) { .cam-tiles { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .cam-tiles.wall .cam-tile { animation: none; } }

/* ---- side panel: the bar number is the one loud thing ---- */
.side { padding: 1rem 1.1rem 1.4rem; overflow: auto; display: flex; flex-direction: column; gap: .9rem; background: var(--panel); }
/* Each folded group is a quiet card, so the twelve blocks read as a few. */
.side > details.fold { border: 1px solid var(--line); border-radius: var(--r-m); padding: .15rem .8rem .3rem; background: var(--ink); }
.side > details.fold[open] { padding-bottom: .8rem; }
.side > .listen { border: 1px solid var(--line); border-radius: var(--r-m); padding: .6rem .8rem .7rem; background: var(--ink); }
.bar-block { text-align: center; padding: .4rem 0 .2rem; }
#barBig { font-family: var(--display); font-weight: 700; font-size: 7.5rem; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
#barBig.count-in { color: var(--brass); }
#barBig.idle { color: var(--line); }
.dots { display: flex; justify-content: center; gap: 10px; margin: .6rem 0 .5rem; min-height: 14px; }
#barSub { font-size: .9rem; }
.transport label, .solo label { margin-bottom: .5rem; }
.transport .tri input[type=number] { width: 4.2rem; }
/* Play, Record, Stop: one row for everyone. Record carries the red dot. */
.go.main { margin-top: 0; }
.go.main button { flex: 1; white-space: nowrap; padding-left: .6rem; padding-right: .6rem; }
button.record { background: var(--panel-2); border-color: var(--rosin); color: var(--ivory); font-weight: 600; }
button.record::before { content: ''; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--rosin); margin-right: .45em; vertical-align: -0.05em; }
button.record:hover { background: var(--rosin); color: #fff; }
.scope { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: -.4rem; }
.scope select { width: auto; padding: .3rem .4rem; font-size: .85rem; }
/* The readiness line: what the button above will record. On and off in the gear words. */
.ready { font-size: var(--fs-s); color: var(--muted); line-height: 1.45; margin-top: -.4rem; }
.ready:empty { display: none; }
.ready b { color: var(--ivory); font-weight: 600; }
.ready .ok { color: var(--moss); }
.ready .off { color: var(--rosin); }
.ready .gear { display: block; margin-bottom: .15rem; }
.session-tips { border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--r); padding: .55rem .8rem .6rem; font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
.session-tips[hidden] { display: none; }
.session-tips > b { color: var(--ivory); font-weight: 600; }
.session-tips ol { margin: .3rem 0 .4rem; padding-left: 1.2rem; }
.session-tips li { margin: .2rem 0; }
.session-tips li b { color: var(--ivory); font-weight: 600; }
.take-done { border: 1px solid var(--brass); border-radius: var(--r); padding: .6rem .8rem .7rem; margin-top: .6rem; font-size: .9rem; line-height: 1.45; }
.take-done b { color: var(--ivory); }
.take-done .go { margin-top: .5rem; flex-wrap: wrap; }
.take-done .check { font-size: .82rem; }
.listen { padding-top: .6rem; }
.listen-body { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; padding-top: .5rem; }
/* Folded settings in the side panel: the summary line says what they are set to. */
/* A plus in a ring says "there is more here"; Show/Hide on the right says what a press does. */
details.fold > summary { cursor: pointer; font-size: .9rem; color: var(--ivory); list-style: none; display: flex; align-items: center; gap: .55rem; min-height: 2rem; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '+'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid var(--brass); color: var(--brass); font-size: 1.05rem; font-weight: 600; line-height: 1; transition: background .12s, color .12s; }
details.fold[open] > summary::before { content: '\2212'; }
details.fold > summary::after { content: 'Show'; margin-left: auto; padding-left: .6rem; font-size: var(--fs-xs); font-weight: 400; color: var(--brass); }
details.fold[open] > summary::after { content: 'Hide'; }
details.fold > summary:hover::before, details.fold > summary:focus-visible::before { background: var(--brass); color: var(--ink); }
details.fold > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
details.transport[open] > summary { margin-bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { details.fold > summary::before { transition: none; } }
.signals { display: flex; flex-wrap: wrap; gap: .4rem; }
.signals button { font-size: var(--fs-s); padding: .35rem .6rem; }
.feed { font-size: var(--fs-s); color: var(--muted); min-height: 2rem; }
.feed div { padding: .15rem 0; }
.feed b { color: var(--brass); font-weight: 500; }

/* ---- lists ---- */
.list .item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--r); cursor: pointer; }
.list .item:hover { background: var(--panel-2); }
.list .item.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--brass); }
.list .item:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.list .item .grow { min-width: 0; }
.list .item b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item small { color: var(--muted); display: block; }
.list .item .num { font-family: var(--display); color: var(--muted); width: 1.6rem; text-align: right; font-size: 1.05rem; }
.online, .offline { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--moss); flex: none; }
.offline { background: var(--line); }
.tag { font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; white-space: nowrap; }
.tag.brass { color: var(--brass); border-color: var(--brass); }
.tag.dim { opacity: .6; border-style: dashed; }
/* ---- plan and billing ---- */
.plan { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .9rem; }
.plan-title { font-family: var(--display); font-size: 1.35rem; margin-bottom: .2rem; }
.plan-now .go { flex-wrap: wrap; }
.plan-now .go select { width: auto; max-width: 100%; }
.plan-now .go button { white-space: nowrap; }
.plan-tiers { display: grid; gap: .3rem; align-content: start; }
.plan-tiers .tier { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--r); font-size: .82rem; color: var(--muted); }
.plan-tiers .tier.on { border-color: var(--brass); color: var(--ivory); }
.plan-tiers .tier b { color: var(--ivory); font-weight: 500; }
.plan-pill { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; cursor: pointer; }
.plan-pill.warn { color: var(--brass); border-color: var(--brass); }
.plan-pill.bad { color: var(--rosin); border-color: var(--rosin); }
#planHistory div { padding: .15rem 0; }
.my-ensembles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.my-ensembles button { font-size: .8rem; padding: .3rem .6rem; }
.my-ensembles button small { color: var(--muted); margin-left: .3rem; }
.lock-banner { background: var(--panel-2); border-left: 3px solid var(--rosin); padding: .6rem .8rem; border-radius: var(--r); font-size: .85rem; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }
.map-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 .2rem; font-size: .8rem; color: var(--muted); }
.map-key span { display: inline-flex; align-items: center; gap: .4rem; text-transform: capitalize; }
.map-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.listen input[type=number] { padding: .25rem .4rem; font-size: .85rem; }
table.compact tr.pending td { opacity: .65; }
table.compact select { min-width: 7rem; }
table.compact input[type=text], table.compact input:not([type]) { min-width: 7rem; }
table.compact label.check small { white-space: nowrap; }
table.compact tr.pending input:focus, table.compact tr.pending select:focus { opacity: 1; }

/* ---- repertoire detail ---- */
.detail h2 { font-size: 1.7rem; }
.detail .composer { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .9rem; margin-bottom: 1rem; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
/* The piece form in sections, each with a heading; the save bar stays in view at the foot. */
.form-sec { padding: 0 0 1rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.form-sec > h3 { font-family: var(--display); font-weight: 500; font-size: 1.15rem; margin: 0 0 .7rem; }
.form-sec .small + fieldset, .form-sec .small + .fold { margin-top: .9rem; }
.form-fold { margin: .4rem 0 0; }
.form-fold[open] > summary { margin-bottom: .6rem; }
.form-save { position: sticky; bottom: -1rem; margin: 0 -1.2rem -1rem; padding: .7rem 1.2rem; background: var(--panel); border-top: 1px solid var(--line); z-index: 2; }
/* Repertoire: this project's pieces, or the organiser's own library. */
.seg-tabs { display: flex; gap: .2rem; padding: .2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 .8rem; }
.seg-tabs button { flex: 1; background: transparent; border: 0; padding: .4rem .6rem; color: var(--muted); border-radius: calc(var(--r) - 2px); font-size: .88rem; }
.seg-tabs button.on { background: var(--panel-2); color: var(--ivory); box-shadow: inset 0 -2px 0 var(--brass); }
.view[data-view=repertoire].rep-lib .proj-only, .view[data-view=repertoire].rep-lib #pieceDetail { display: none !important; }
.view[data-view=repertoire]:not(.rep-lib) .lib-only { display: none !important; }
.lib-add { display: flex; gap: .4rem; margin-bottom: .5rem; }
.lib-add input { flex: 1; }
.lib-search { width: 100%; margin-bottom: .6rem; }
#libList .item small .in { color: var(--moss); }
.track.drop.over { outline: 2px dashed var(--brass); outline-offset: 2px; }
/* The beat map editor: tools, then the waveform with bars and the tempo lane. */
.follow-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 .5rem; }
.follow-tools select { width: auto; }
.follow-tools .meter-tool { display: inline-flex; gap: .3rem; align-items: center; font-size: .88rem; color: var(--muted); }
.follow-tools .meter-tool b { color: var(--ivory); min-width: 1.6em; }
.follow-tools .tool-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .2rem; }
.follow-canvas { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r); outline: none; touch-action: none; }
.follow-canvas:focus-visible { border-color: var(--brass); }
.follow-score { margin-top: 10px; }
.follow-score p { margin: 0 0 6px; }
.follow-score-page { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.follow-score-page canvas { display: block; margin: 0 auto; }
.follow-status { min-height: 1.3em; margin-top: .3rem; }
/* Full page: the beats across the top, the score filling what is left. */
/* On a wide screen the score is a column of its own, the whole height of the window. */
.follow-full:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 1rem; padding: .8rem 1rem; background: var(--ink); overflow: hidden; }
.follow-full .follow-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.follow-full .follow-head .grow { flex: 1 1 24rem; min-width: 0; }
.follow-full .follow-head b { font-size: 1.05rem; margin-right: .4rem; }
.follow-full .follow-score:not([hidden]) { min-height: 0; display: flex; flex-direction: column; }
.follow-full .follow-score-page { flex: 1; min-height: 0; max-height: none; }
@media (min-width: 1100px) {
  .follow-full:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); grid-template-rows: auto auto auto 1fr; }
  .follow-full .follow-score:not([hidden]) { grid-column: 2; grid-row: 2 / -1; margin-top: .6rem; }
}
#followEditor .meter-tool { flex-direction: row; margin: 0; white-space: nowrap; }
#followEditor .meter-tool input[type=number] { width: 4.2rem; flex: none; padding: .3rem .4rem; margin: 0; }
#followEditor .meter-tool select { width: auto; flex: none; padding: .3rem .4rem; margin: 0; }
body.follow-open { overflow: hidden; }
.follow-page-head { display: flex; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.follow-page-head p { margin: 0; }
.small-file span { font-size: .85rem; }
.imslp { display: flex; gap: .5rem; margin-bottom: .6rem; }
.imslp-panel { border: 1px solid var(--brass); border-radius: var(--r); padding: .6rem .8rem; margin-bottom: .8rem; font-size: .88rem; max-height: 260px; overflow: auto; }
.imslp-panel label { display: flex; gap: .5rem; align-items: center; color: var(--ivory); margin: .2rem 0; font-size: .85rem; }
.imslp-panel label input { width: auto; margin: 0; }
.imslp-panel .sect { color: var(--muted); margin: .4rem 0 .2rem; font-size: .78rem; }
.track { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; }
.track + .track { border-top: 1px solid var(--line); }
.linklist a { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .5rem .4rem 0; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; color: var(--ivory); text-decoration: none; font-size: .85rem; }
.linklist a:hover { border-color: var(--brass); }
.linklist a.mine { border-color: var(--brass); color: var(--brass); }
.linklist a .x { color: var(--muted); }
.linklist a small { color: var(--muted); font-size: .75rem; }
.linklist a.mine b { font-weight: 500; }
.other-parts { margin-top: .4rem; }
.other-parts summary { cursor: pointer; }
.partlist { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.part-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.part-row a { color: var(--ivory); text-decoration: none; min-width: 0; display: flex; flex-direction: column; }
.part-row a b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-row a small { color: var(--muted); font-size: .75rem; }
.part-row select, .assign-row select { width: auto; max-width: 14rem; margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.assign-table { display: flex; flex-direction: column; gap: .2rem; }
.assign-row { display: flex; align-items: center; gap: .6rem; padding: .25rem .4rem; border-radius: 6px; }
.assign-row:nth-child(odd) { background: rgba(255,255,255,.025); }
.assign-row .grow { display: flex; flex-direction: column; min-width: 0; }
.assign-row small { color: var(--muted); font-size: .75rem; }
.assign-row.none select { border-color: var(--rust, #c8553d); }
.assign-row.set select { border-color: var(--brass); }
.assign-sum { padding: .4rem .4rem 0; }

/* ---- schedule ---- */
.hero { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; margin-bottom: 1rem; }
.hero .when { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; }
.hero .rel { color: var(--brass); font-size: .9rem; }
.hero .also { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
.hero.none { color: var(--muted); }
.hero:empty { display: none; }
#worldMap { width: 100%; max-width: 820px; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.tz-table { margin-top: .8rem; }
.tz-table td.late { color: var(--rosin); }
.tz-table td.ok { color: var(--moss); }

/* ---- review ---- */
/* ---- the studio: a workstation in the dark. Neutral greys instead of the room's warm ebony, track colours
   by family, an LCD in the transport, lanes with waveforms, a console of strips. ---- */
.view[data-view=review] {
  --ink: #1a1b1e; --panel: #232428; --panel-2: #2c2d32; --field: #141517; --line: #36373d;
  --ivory: #e9e9ec; --muted: #9a9ba3;
  background: var(--ink);
}
.review-col { display: flex; flex-direction: column; gap: .6rem; padding: .6rem 1rem 1rem; }
/* The rehearsal stage parks here, unseen, while the studio is open; "Show: conducting track" moves it into the watch area. */
#reviewSlot { display: none; }
.watch { display: flex; flex-direction: column; gap: .6rem; }
.st-bar { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; padding: .4rem .5rem; background: linear-gradient(#2e2f34, #26272b); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.st-transport { display: inline-flex; gap: .3rem; align-items: center; }
.st-transport button { width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: #1c1d20; border: 1px solid #45464c; color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.st-transport button:hover { background: #26272b; }
.st-transport .st-play { color: var(--moss); }
.st-transport .st-play.on { background: var(--moss); color: #10140f; border-color: var(--moss); }
.st-lcd { flex: 1; min-width: 16rem; display: flex; align-items: stretch; gap: 0; background: #0f1512; border: 1px solid #0a0d0b; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(170,220,190,.08), inset 0 2px 8px rgba(0,0,0,.6); color: #cfe6d6; font-variant-numeric: tabular-nums; }
.lcd-field { display: flex; flex-direction: column; justify-content: center; padding: .15rem .8rem; border-right: 1px solid rgba(170,220,190,.12); min-width: 4.2rem; }
.lcd-field b { font-family: var(--ui); font-weight: 600; font-size: 1.25rem; line-height: 1.1; letter-spacing: .02em; }
.lcd-field small { font-size: .62rem; color: rgba(207,230,214,.55); text-transform: lowercase; }
.lcd-title { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .15rem .8rem; min-width: 0; }
.lcd-title b { font-weight: 500; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd-title small { font-size: .7rem; color: rgba(207,230,214,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-show, .st-solo { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; color: var(--ivory); }
.st-show select { width: auto; padding: .25rem .4rem; font-size: .82rem; max-width: 16rem; background: #1c1d20; }
.watch-stage { position: relative; min-height: 100px; }
.watch-stage .cam-stage { max-height: min(42vh, 440px); border-color: #000; box-shadow: 0 0 0 1px var(--line); }
.watch-stage .stage { aspect-ratio: 16 / 9; max-height: min(42vh, 440px); border: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* A recording open for editing takes the whole Studio: the list is gone until Close, the picture as big as the window allows. */
.view[data-view=review].editing { grid-template-columns: 1fr; }
.view[data-view=review].editing .list-col { display: none; }
.view[data-view=review].editing .review-col { height: 100%; min-height: 0; overflow: hidden; }
.view[data-view=review].editing .watch { flex: 1; min-height: 0; }
.st-close { margin-left: auto; align-self: center; }
/* The door while joining is by invitation only, and the admin's list of who is invited. */
.invite-note { margin: .4rem 0 .8rem; padding: .5rem .7rem; border-left: 3px solid var(--brass); background: var(--panel); font-size: .88rem; }
.admin-invites { margin-bottom: 1.4rem; }
.admin-invites .form.inline { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.admin-invites .form.inline label { flex: 1 1 16rem; margin: 0; }
.admin-invites .list .item { align-items: center; gap: .5rem; }
/* The picture on the left, the work (Tracks, Mixer, Picture tabs) on the right, so the picture stays in view while editing. */
.st-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 0; }
.st-main { min-width: 0; }
.st-side { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.view[data-view=review].editing .st-body { flex-direction: row; gap: .8rem; align-items: stretch; }
.view[data-view=review].editing .st-main { flex: 0 0 56%; }
.view[data-view=review].editing .watch-stage .cam-stage, .view[data-view=review].editing .watch-stage .stage { max-height: calc(100vh - 10rem); }
@media (max-width: 980px) {
  .view[data-view=review].editing .st-body { flex-direction: column; }
  .view[data-view=review].editing .st-main { flex: 0 0 auto; }
  .view[data-view=review].editing .watch-stage .cam-stage, .view[data-view=review].editing .watch-stage .stage { max-height: 46vh; }
}
/* More room for a while: the tools put away, or the picture shrunk to a corner. */
.st-layout { display: inline-flex; align-self: center; border: 1px solid #45464c; border-radius: 5px; overflow: hidden; }
.st-layout button { background: #1c1d20; border: 0; color: var(--muted); padding: .35rem .7rem; font-size: .8rem; border-radius: 0; }
.st-layout button + button { border-left: 1px solid #45464c; }
.st-layout button.on { color: var(--ivory); background: #2c2d32; box-shadow: inset 0 -2px 0 var(--brass); }
.view[data-view=review].editing .watch.no-tools .st-side { display: none; }
.view[data-view=review].editing .watch.no-tools .st-main { flex: 1; }
.view[data-view=review].editing .watch.small-picture .st-body { flex-direction: column; }
.view[data-view=review].editing .watch.small-picture .st-main { flex: 0 0 auto; }
.view[data-view=review].editing .watch.small-picture .watch-stage .cam-stage, .view[data-view=review].editing .watch.small-picture .watch-stage .stage { max-height: 18vh; }
.st-tabs { display: flex; gap: .2rem; padding: 0 .2rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.st-tabs button { background: transparent; border: 0; color: var(--muted); padding: .4rem .8rem; font-size: .85rem; border-radius: 4px 4px 0 0; }
.st-tabs button:hover { color: var(--ivory); background: var(--panel); }
.st-tabs button.on { color: var(--ivory); box-shadow: inset 0 -2px 0 var(--brass); }
.st-panels { flex: 1; min-height: 8rem; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--panel); }
.st-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-panel > * { flex: 0 0 auto; }
.st-panel[hidden] { display: none; }
/* The console takes the height that is left: the faders are as long as the panel allows (set by the app). */
#reviewPanel .ch-fader { height: var(--fader-h, 7rem); }
/* lanes */
.st-lanes:empty { display: none; }
.lanes { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: #1e1f23; overflow: hidden; user-select: none; }
.lanes-ruler { display: flex; height: 20px; background: #26272b; border-bottom: 1px solid var(--line); }
.lanes-ruler canvas { display: block; cursor: pointer; }
.lane-head { flex: 0 0 176px; width: 176px; display: flex; align-items: center; gap: .4rem; padding: 0 .4rem 0 0; border-right: 1px solid var(--line); background: #26272b; min-width: 0; }
.lanes-corner { font-size: .7rem; color: var(--muted); padding-left: .5rem; }
.lane { display: flex; height: 44px; border-bottom: 1px solid #2a2b30; }
.lane:last-of-type { border-bottom: 0; }
.lane .swatch { flex: 0 0 5px; align-self: stretch; background: var(--fam); }
.lane-name { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.lane-name b { font-weight: 500; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-name small { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-btns { display: inline-flex; gap: 2px; }
.lane-btns button, .mx-btn span { width: 1.45rem; height: 1.3rem; padding: 0; font-size: .68rem; font-weight: 600; line-height: 1.3rem; text-align: center; border-radius: 3px; background: #1a1b1e; border: 1px solid #45464c; color: var(--muted); cursor: pointer; }
.lane-btns button.on { color: #111; }
.lane-btns button.m.on { background: #8b8f9c; border-color: #8b8f9c; }
.lane-btns button.s.on { background: var(--brass); border-color: var(--brass); }
.lane canvas.wave { display: block; cursor: pointer; }
.lane.stale { opacity: .55; }
.lane.empty .lane-name { color: var(--muted); }
.lane.empty .swatch { opacity: .35; }
.lane.empty canvas.wave { opacity: .6; }
.lane.punch .lane-name b { font-weight: 400; }
.lanes-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.6); pointer-events: none; }
.lanes-playhead::before { content: ''; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top: 7px solid #fff; }
/* folds */
.fold { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.fold > summary { cursor: pointer; padding: .5rem .8rem; color: var(--ivory); font-weight: 600; font-size: .88rem; list-style: none; }
.fold > summary::before { content: '▸'; display: inline-block; width: 1.1rem; color: var(--muted); }
.fold[open] > summary::before { content: '▾'; }
.fold > summary small { color: var(--muted); font-weight: 400; margin-left: .4rem; }
#reviewPanel { padding: .4rem .8rem .8rem; }
#reviewPanel:empty { display: none; }
#reviewPanel .rv-head h2, #reviewPanel .rv-play, #reviewPanel .rv-stop, #reviewPanel .rv-pos, #reviewPanel .rv-status { display: none; } /* the transport and LCD have these */
/* the console */
/* Thin strips, the names written upwards, wrapping into rows: the console fits beside the picture. */
.mx { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; padding: .4rem 0 .6rem; }
.mx-sec { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 1.7rem; padding: .4rem 0; background: #1c1d20; border: 1px solid var(--line); border-top: 3px solid var(--fam); border-radius: 4px; }
.mx-sec-name { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-flex; gap: .3rem; align-items: center; font-size: .72rem; color: var(--muted); }
.mx-sec-name b { color: var(--ivory); font-weight: 500; }
.mx-sec-btns { display: flex; flex-direction: column; gap: 2px; }
.ch { flex: 0 0 auto; width: 4.3rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .2rem .45rem; background: linear-gradient(#2a2b30, #222327); border: 1px solid var(--line); border-top: 3px solid var(--fam); border-radius: 4px; }
.ch.stale { opacity: .55; }
.ch.punch { border-top-style: dashed; }
/* The name and the part written upwards, side by side, so the strip stays thin. */
.ch-name { height: 6rem; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; gap: .15rem; line-height: 1.1; }
.ch-name b, .ch-name small { writing-mode: vertical-rl; transform: rotate(180deg); display: block; max-height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-name b { font-weight: 500; font-size: .78rem; }
.ch-name small { font-size: .66rem; color: var(--muted); }
.ch-take { width: 100%; text-align: center; font-size: .6rem; color: var(--muted); line-height: 1.2; min-height: 1.3em; white-space: nowrap; overflow: hidden; }
.ch-pan { width: 100%; display: flex; justify-content: center; }
.ch-pan input { width: 3.6rem; margin: 0; accent-color: var(--fam); }
.ch-hall input { accent-color: var(--brass); height: .9rem; }
.ch-fader { display: flex; gap: .2rem; align-items: stretch; height: 7rem; }
.ch-fader input { writing-mode: vertical-lr; direction: rtl; width: 1.4rem; height: 100%; margin: 0; accent-color: var(--fam); }
.ch-scale { display: flex; flex-direction: column; justify-content: space-between; font-size: .58rem; color: var(--muted); font-style: normal; padding: .1rem 0; }
.ch-scale i { font-style: normal; }
.ch-meter { width: 100%; text-align: center; line-height: 1.15; }
.ch-meter .gainv { display: block; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--ivory); }
.ch-meter small { display: block; font-size: .62rem; color: var(--muted); }
.ch-btns { display: flex; gap: 3px; }
.mx-btn { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.mx-btn input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.mx-btn span { display: inline-block; }
.mx-btn input:checked + span { color: #111; }
.ch-btns .mx-btn:first-child input:checked + span, .mx-sec-btns .mx-btn:first-child input:checked + span { background: #8b8f9c; border-color: #8b8f9c; }
.ch-btns .mx-btn:last-child input:checked + span, .mx-sec-btns .mx-btn:last-child input:checked + span { background: var(--brass); border-color: var(--brass); }
.mx-btn.use span { width: auto; padding: 0 .4rem; font-weight: 500; }
.mx-btn.use input:checked + span { background: var(--moss); border-color: var(--moss); }
.ch-foot { display: flex; flex-direction: column; gap: .25rem; align-items: center; }
.ch-nudge { display: inline-flex; align-items: center; gap: .15rem; margin: 0; font-size: .62rem; color: var(--muted); white-space: nowrap; }
.ch-nudge input { width: 2.7rem; padding: .1rem .15rem; font-size: .66rem; }
.ch-pic input { width: 2.7rem; }
.cam-keys { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cam-keys.off .cam-key { opacity: .6; }
.cam-keys-gap { width: .5rem; }
.cam-key { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .4rem .15rem .25rem; border: 1px solid var(--line); border-left: 3px solid var(--fam, var(--muted)); border-radius: 4px; background: var(--ink); color: var(--ivory); font-size: .78rem; line-height: 1.2; cursor: pointer; user-select: none; white-space: nowrap; }
.cam-key:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.cam-key.fixed { --fam: var(--line); }
.cam-key b { font-weight: 500; }
.cam-key kbd { font-family: var(--ui); font-size: .7rem; min-width: 1.3rem; text-align: center; padding: 0 .2rem; border: 1px solid var(--muted); border-radius: 3px; color: var(--muted); }
.cam-key kbd[title] { cursor: text; }
.cam-key kbd.editing { border-color: var(--brass); color: var(--brass); outline: none; }
.cam-key .x { font-style: normal; color: var(--muted); padding: 0 .1rem; cursor: pointer; }
.cam-key .x:hover { color: var(--rosin); }
.cam-key.on { background: var(--brass-fill); color: var(--brass-ink); border-color: var(--brass-fill); }
.cam-key.on kbd, .cam-key.on .x { color: var(--brass-ink); border-color: var(--brass-ink); }
.cam-add-solo { width: auto; padding: .15rem .3rem; font-size: .78rem; }
.rv-head h2 { font-size: 1.2rem; margin: .6rem 0 .4rem; }
.rv-head h2 small { color: var(--muted); font-weight: 400; font-family: var(--ui); font-size: .82rem; }
.rv-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rv-controls label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; color: var(--ivory); font-size: .85rem; }
.rv-controls input[type=range] { width: 90px; margin: 0; }
.rv-controls input[type=checkbox] { margin: 0; }
.rv-controls input[type=file] { width: auto; font-size: .8rem; }
.rv-status { font-size: .82rem; color: var(--muted); margin: .3rem 0; }
/* Effects, on their own tab: a row per effect, its name on the left. */
#effectsPanel { padding: .4rem .8rem .8rem; }
.rv-fx { display: flex; flex-direction: column; gap: .5rem; }
.fx-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .5rem .7rem; background: #1c1d20; border: 1px solid var(--line); border-radius: 4px; }
.fx-row h3 { margin: 0; flex: 0 0 7rem; font-size: .82rem; font-weight: 600; color: var(--ivory); }
.fx-row label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; color: var(--ivory); }
.fx-row input[type=checkbox] { margin: 0; }
.fx-row input[type=file] { width: auto; font-size: .78rem; }
.fx-row button { padding: .25rem .7rem; font-size: .8rem; }
.fx-slider { gap: .5rem; }
.fx-slider span { color: var(--muted); font-size: .76rem; }
.fx-slider input[type=range] { width: 9rem; margin: 0; accent-color: var(--brass); }
.fx-slider b { font-weight: 500; font-size: .78rem; min-width: 3.4rem; font-variant-numeric: tabular-nums; }
/* The master EQ: a slider per band, like a small graphic equaliser. */
.rv-eq { display: flex; align-items: flex-end; gap: .35rem; }
.rv-band { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; width: 2rem; }
.rv-band input { writing-mode: vertical-lr; direction: rtl; width: 1rem; height: 3.6rem; margin: 0; accent-color: var(--brass); }
.rv-band b { font-size: .62rem; font-weight: 500; color: var(--ivory); font-variant-numeric: tabular-nums; }
.rv-band.flat b { color: var(--muted); }
.rv-band small { font-size: .58rem; color: var(--muted); }
/* A big project: show one family of the console at a time. */
.rv-fams { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 0; }
.rv-fams:empty { display: none; }
.rv-fams button { background: #1c1d20; border: 1px solid var(--line); border-left: 3px solid var(--fam, var(--line)); color: var(--muted); padding: .25rem .6rem; font-size: .78rem; border-radius: 4px; }
.rv-fams button small { color: var(--muted); margin-left: .2rem; }
.rv-fams button.on { color: var(--ivory); background: #2c2d32; }
.rv-pos { color: var(--brass); font-family: var(--display); font-size: 1.1rem; }
.chat-to { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.chat-to select { width: auto; flex: 1; padding: .25rem .4rem; font-size: .85rem; }
.log .to { color: var(--muted); font-size: .78rem; }
.log .dm { border-left: 2px solid var(--brass); padding-left: .4rem; }
.invite { border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .9rem; margin-bottom: 1rem; }
.invite .link { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--muted); word-break: break-all; margin: .3rem 0; }
.apps .item { cursor: default; align-items: flex-start; }
.apps .item .go { margin: 0; }
.board .item { cursor: default; align-items: flex-start; flex-direction: column; gap: .3rem; }
.board .item .meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.board form { width: 100%; margin-top: .3rem; }
.lobby-card .board { max-height: 46vh; overflow: auto; margin-bottom: .5rem; }
/* Audition takes: the list on a profile, the players on cards and applications, the recorder panel. */
.takes-box { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.takes-box h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin: 0; }
.takes { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0 .6rem; }
.take { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.take .take-title { font-weight: 500; }
.take .take-meta { color: var(--muted); font-size: .8rem; }
.take .take-player { grid-column: 1 / -1; width: 100%; max-width: 420px; }
.take video.take-player { max-width: 320px; border-radius: 6px; background: #000; }
.take .take-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.take .take-tools select { width: auto; padding: .2rem .4rem; font-size: .8rem; }
.take.public .take-title::after { content: ' · public'; color: var(--brass); font-weight: 400; font-size: .8rem; }
.item .takes { margin: .2rem 0 0; gap: .3rem; }
.item .takes .take { padding: .35rem .6rem; }
.item .takes audio.take-player { height: 32px; }
.item .takes video.take-player { max-width: 260px; }
.take-pick { display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0; }
.take-pick label { display: flex; gap: .5rem; align-items: center; font-size: .88rem; }
.take-pick label span.muted { font-size: .78rem; }
.aud-rec { margin-top: .6rem; padding: .8rem .9rem; border: 1px solid var(--brass); border-radius: 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: .55rem; }
.aud-head { display: flex; justify-content: space-between; align-items: center; }
.aud-head b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.aud-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.aud-meter { width: 110px; height: 8px; background: var(--ink); border-radius: 4px; overflow: hidden; }
.aud-meter-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--moss), var(--brass) 70%, var(--rosin)); transition: width 80ms linear; }
.aud-preview { width: 240px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scaleX(-1); border-radius: 8px; background: #000; border: 1px solid var(--line); }
.aud-play audio { width: 100%; max-width: 420px; }
.aud-play video { width: 320px; max-width: 100%; border-radius: 8px; background: #000; }
.aud-keep .two { margin-bottom: .3rem; }
.my-apps { font-size: .82rem; color: var(--muted); }
.my-apps b { color: var(--ivory); }

/* ---- signed in: the menu and the desk ---- */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; color: var(--ivory); background: rgba(255,255,255,.7); display: inline-flex; gap: .55rem; align-items: center; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible, .room-switch summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.menu summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(45deg) translateY(-2px); }
.menu[open] summary, .menu summary:hover { border-color: var(--brass); }
.menu-list { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 20; min-width: 230px; display: flex; flex-direction: column; padding: .4rem; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 60px -24px rgba(20,66,72,.4); }
.menu-list button { text-align: left; background: transparent; border: 0; border-radius: var(--r); padding: .5rem .7rem; color: var(--ivory); font: inherit; cursor: pointer; }
.menu-list button:hover, .menu-list button.on { background: var(--panel-2); color: var(--brass); }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: .3rem .4rem; }
.lobby-top.in .lobby-nav, .lobby-top.in #signinBtn { display: none; }
.lobby-top.in #lobbyMenu { margin-right: auto; }
.menu.account summary { color: var(--ivory); max-width: 16rem; }
.menu.account summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.account .menu-list { left: auto; right: 0; }
/* Change room: the room's name in the top bar opens your other ensembles. */
.room-switch { position: relative; min-width: 0; }
.room-switch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; border-radius: var(--r); user-select: none; }
.room-switch summary::-webkit-details-marker { display: none; }
.room-switch summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex: none; }
.room-switch summary:hover, .room-switch[open] summary { background: var(--panel-2); }
.room-switch summary:hover .room-title, .room-switch[open] .room-title { color: var(--ivory); }
.room-switch .menu-list { min-width: 260px; max-height: 70vh; overflow: auto; }
.room-switch .menu-list button small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.room-switch .menu-list .menu-note { padding: .4rem .7rem; color: var(--muted); font-size: var(--fs-xs); }
.socials { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.social { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; }
.social:hover { color: var(--brass); border-color: var(--brass); }

/* While the script works out who you are, the panes are kept out of sight but keep their height,
   so the page does not jump when they appear. */
#lobby.boot .lobby-pane { visibility: hidden; min-height: 60vh; }
.desk { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 1.4rem; margin-top: .5rem; min-height: calc(100vh - 120px); }
.desk-left { border-right: 1px solid var(--line); padding-right: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.desk-left-head { display: flex; align-items: baseline; gap: .6rem; margin: .3rem 0 .2rem; }
.desk-left-head h2 { font-size: 1.15rem; margin: 0; }
.projects { display: flex; flex-direction: column; gap: .3rem; }
.proj { display: grid; grid-template-columns: 40px 1fr; column-gap: .7rem; row-gap: .1rem; padding: .6rem .7rem; border-radius: var(--r-m); border: 1px solid transparent; cursor: pointer; text-align: left; background: transparent; color: var(--ivory); font: inherit; transition: background 120ms, border-color 120ms; }
.proj:hover { background: var(--panel-2); }
.proj.on { background: var(--panel); border-color: rgba(178,74,22,.45); box-shadow: 0 1px 2px rgba(20,66,72,.05); }
.proj:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.proj .avatar { grid-row: 1 / span 4; }
.proj b { font-family: var(--display); font-weight: 500; font-size: var(--fs-l); line-height: 1.15; }
.proj small { color: var(--muted); font-size: var(--fs-xs); display: block; }
.proj .next { color: var(--brass); font-size: var(--fs-xs); }
.proj-links { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
/* The shortcuts show on the chosen project only, so the list stays quiet; a click on a project chooses it. */
.proj:not(.on):not(:focus-within) .proj-links { display: none; }
.proj-links a { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; }
.proj-links a:hover { color: var(--ivory); border-color: var(--brass); }
.desk-add { display: flex; gap: .4rem; margin-top: .3rem; }
.desk-add a { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; border: 1px dashed var(--line); border-radius: 999px; padding: .25rem .7rem; }
.desk-add a:hover { color: var(--brass); border-color: var(--brass); }
.desk-you { margin-top: auto; font-size: var(--fs-s); color: var(--muted); padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; }
.desk-you b { color: var(--ivory); font-weight: 500; }
.desk-you a { color: var(--brass); }
.desk-stage { min-width: 0; }
.next-card { position: relative; border-radius: 18px; padding: clamp(1.2rem, 3vw, 2.2rem); background: radial-gradient(120% 140% at 100% 0%, rgba(230,116,52,.22), transparent 50%), linear-gradient(135deg, #fffdf9, #f4f1e6 70%); border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(20,66,72,.4), 0 1px 0 rgba(255,255,255,.9) inset; overflow: hidden; }
.next-card .hello { font-family: var(--display); font-style: italic; color: var(--brass); font-size: 1.2rem; margin: 0 0 .3rem; font-variation-settings: "opsz" 72; }
.next-card h1 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 .6rem; max-width: 22ch; text-wrap: balance; font-variation-settings: "opsz" 144; padding-right: 9rem; }
.next-card .when { font-family: var(--display); font-size: 1.15rem; }
.next-card .when b { color: var(--brass); font-weight: 500; }
.next-card .meta { color: var(--muted); margin: .25rem 0 1rem; max-width: 60ch; }
.next-card .go { gap: .6rem; margin: 0; }
.next-card .count { position: absolute; right: clamp(1rem, 3vw, 2.2rem); top: clamp(1rem, 3vw, 2rem); text-align: right; font-family: var(--display); color: var(--brass); font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: .9; font-variation-settings: "opsz" 144; }
.next-card .count small { display: block; font-family: var(--ui); font-size: var(--fs-xs); color: var(--muted); margin-top: .35rem; letter-spacing: 0; }
.next-card.quiet h1 { padding-right: 0; }
/* Your latest takes on the desk: a row of small cards under the next event, each a way into the Studio on that take. */
.desk-takes { margin-top: 1.2rem; }
.desk-takes .row-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; }
.desk-takes .row-head h3 { margin: 0; }
.desk-takes .row-head a { font-size: var(--fs-xs); color: var(--brass); text-decoration: none; }
.desk-takes .row-head a:hover { text-decoration: underline; }
.takes-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.take-card { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .8rem .7rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); color: var(--ivory); text-decoration: none; min-width: 0; transition: border-color 150ms, box-shadow 150ms; }
.take-card:hover { border-color: var(--brass); box-shadow: 0 10px 24px -14px rgba(178,74,22,.35); }
.take-card b { font-family: var(--display); font-weight: 500; font-size: var(--fs-l); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-card span { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-card .inst { color: var(--ivory); font-size: var(--fs-s); }
.take-card .pic { color: var(--brass); }
/* Parts waiting to be recorded: above everything else on the desk, each card a button straight into the room. */
.desk-todo { margin-bottom: 1.2rem; }
.desk-todo .row-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; }
.desk-todo .row-head h3 { margin: 0; }
.todo-card { font: inherit; text-align: left; cursor: pointer; border-left: 3px solid var(--brass); }
.todo-card .todo-go { color: var(--brass); font-weight: 600; margin-top: .25rem; }
/* The Studio's recordings: one entry per piece, with the runs it was played together in nested under it. */
#runsList .item.nested { margin-left: 1.2rem; border-left: 2px solid var(--line); padding-left: .7rem; }
#runsList .runs-toggle { white-space: nowrap; }
#runsList .item.nested b { font-size: var(--fs-s); font-weight: 500; }
/* The Studio: the parts of the piece that nobody has recorded yet, under the picture. */
.st-missing { font-size: var(--fs-s); color: var(--muted); padding: .35rem .2rem 0; }
.st-missing b { color: var(--rosin); font-weight: 500; }
.st-missing span { color: var(--ivory); }
.desk-storage { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.desk-storage .bar { width: 5rem; margin: 0; }
.agenda { margin-top: 1rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; align-items: baseline; }
.agenda .day { grid-column: 1 / -1; font-family: var(--display); color: var(--brass); margin-top: .8rem; font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
.agenda time { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.agenda .ev b { font-weight: 500; }
.agenda .ev span { color: var(--muted); font-size: .85rem; }
.agenda .ev a { color: var(--brass); text-decoration: none; font-size: .85rem; margin-left: .4rem; }
.agenda .ev a:hover { text-decoration: underline; }
.proj-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.proj-head h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -0.015em; }
.proj-head .sub { color: var(--muted); margin-top: .2rem; }
.proj-head .avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.proj-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.proj-desc { color: var(--ivory); opacity: .85; max-width: 70ch; margin: .2rem 0 .4rem; }
.programme { counter-reset: p; display: flex; flex-direction: column; gap: .3rem; }
.programme .piece { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; column-gap: .7rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); align-items: baseline; }
.programme .piece::before { counter-increment: p; content: counter(p); font-family: var(--display); color: var(--brass); font-size: var(--fs-l); }
.programme .piece b { font-weight: 500; }
.programme .piece small { color: var(--muted); display: block; font-size: var(--fs-xs); }
.programme .piece .tag { font-size: var(--fs-xs); white-space: nowrap; }
.desk h3 { font-family: var(--display); font-weight: 500; font-size: 1.1rem; margin: 1.3rem 0 .5rem; }
.desk .empty-desk { color: var(--muted); max-width: 48ch; }
.desk .empty-desk a { color: var(--brass); }
/* The tracks of the piece under Playing: chips, ticked once recorded, lit when chosen; an add box; the collaborator door. */
/* The MIDI import and the guide takes on the piece form. */
.midi .tri label { font-size: .85rem; }
.midi .inline-num { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.midi .inline-num input { width: 3.6rem; }
#midiInfo { line-height: 1.45; margin: .3rem 0 .4rem; }
#midiInfo .muted { font-size: .8rem; }
.midi-text textarea { width: 100%; box-sizing: border-box; margin: .4rem 0 .3rem; }
.midi-text button { margin-top: .4rem; }
#pieceWords { margin-top: .4rem; }
.guide select { margin: .4rem 0; }
.guide-takes { margin-top: .3rem; }
.guide-takes .chip small { color: var(--muted); font-size: .7rem; }
.listen #takesPick { width: auto; padding: .2rem .3rem; font-size: .8rem; }
.track-list { margin: -.2rem 0 .6rem; }
.track-list .chips { gap: .3rem; }
.track-list .chip { font: inherit; font-size: .78rem; padding: .15rem .6rem; }
.track-list .chip small { font-size: .7rem; opacity: .8; }
.track-list .chip.done::before { content: "✓"; color: var(--moss); font-weight: 700; }
.track-list .chip.on.done::before { color: inherit; }
.track-list .chip.add { padding: 0 .2rem; border-style: dashed; }
.track-list .chip.add input { border: 0; background: none; color: var(--ivory); font-size: .78rem; width: 5.5rem; padding: .15rem .4rem; margin: 0; outline: none; }
.track-list .chip.add input::placeholder { color: var(--muted); }
.track-list .chip.add:focus-within { border-color: var(--brass); border-style: solid; }
.track-list .chips.mine { margin-bottom: .3rem; align-items: center; }
.track-list .chips.mine > small { color: var(--muted); font-size: .74rem; margin-right: .2rem; }
.track-list .track-foot { margin-top: .35rem; }
.track-list .track-foot a { color: var(--brass); }
/* Tracks as rows: the lit row is where Record goes; its takes are listed under it. */
.trk-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.trk-head b { font-family: var(--display); font-weight: 500; }
.trk-head small { font-size: .74rem; }
.trk { border: 1px solid var(--line); border-radius: 8px; margin-bottom: .3rem; background: var(--panel); }
.trk.on { border-color: var(--brass); }
.trk-name { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; cursor: pointer; border-radius: 8px; }
.trk-name:hover { background: var(--panel-2); }
.trk-name:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.trk-label { font-weight: 600; }
.trk-name small { margin-left: auto; color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.trk.done .trk-dot { border-color: var(--moss); background: var(--moss); }
.trk.on .trk-dot { border-color: var(--rosin); background: var(--rosin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosin) 30%, transparent); }
.trk-takes { padding: 0 .45rem .45rem; display: grid; gap: .15rem; }
.tk { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .15rem .35rem; border-radius: 6px; min-height: 1.9rem; }
.tk.using { background: var(--panel-2); }
.tk.new .tk-when { color: var(--brass); font-weight: 600; }
.tk.empty { font-size: .78rem; }
.tk-len { font-size: .74rem; white-space: nowrap; }
.tk-acts { margin-left: auto; display: flex; gap: .25rem; }
.tk-acts button { padding: .1rem .5rem; font-size: .75rem; min-width: 1.9rem; }
.tk-acts button.on { color: var(--brass); border-color: var(--brass); }
.trk.add { display: flex; gap: .3rem; padding: .25rem; border-style: dashed; }
.trk.add input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ivory); font-size: .85rem; padding: .25rem .4rem; margin: 0; outline: none; }
.trk.add:focus-within { border-color: var(--brass); border-style: solid; }
.trk.add button { padding: .15rem .6rem; font-size: .78rem; }
/* Play: the takes' pictures are the stage, not thumbnails in a corner; your own camera steps aside. */
/* Play: the stage becomes one grid of equal cells, the conducting picture in the first and every take's picture after it. */
/* The same grid stands still before Play (body.preview): the pictures at the first bar. The columns (--cols) are chosen for the count, by layoutStageGrid. */
body:is(.playback, .preview):not(.perform) .stage-body { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); /* one cell until layoutStageGrid counts more: two left the click alone in half the stage */ grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 8px; }
body:is(.playback, .preview):not(.perform) .stage-body > .pane[data-pane=conductor].on { position: relative; inset: auto; min-height: 0; background: #000; border-radius: 6px; overflow: hidden; }
/* The first cell is the conducting video, or for a click-track piece the click shown (labelled Click); none for a take on its own. */
body:is(.playback, .preview):not(.perform) .stage-body > .pane[data-pane=conductor].on:has(> #refVideo[hidden]):has(> #conductorCanvas[hidden]) { display: none; }
body:is(.playback, .preview):not(.perform) .take-tiles:not([hidden]) { display: contents; }
body:is(.playback, .preview):not(.perform) .take-tile { width: auto; max-width: none; min-width: 0; min-height: 0; aspect-ratio: auto; height: 100%; }
body:is(.playback, .preview):not(.perform) .take-tile video { object-fit: contain; }
body:is(.playback, .preview):not(.perform) .take-tile figcaption { font-size: .85rem; }
/* The conductor's cell is labelled like the takes' tiles; the label is only there in the grid. */
.pane-label { display: none; }
body:is(.playback, .preview):not(.perform) .stage-body > .pane[data-pane=conductor].on > .pane-label { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .4rem; font-size: .85rem; color: var(--ivory); background: linear-gradient(transparent, rgba(0,0,0,.7)); }
body:is(.playback, .preview):not(.perform) .self-view { display: none; }
.solo .punch label { font-size: .8rem; }
.solo .punch input { width: 4.2rem; }
#barBig.rec { color: var(--rosin); }

/* ---- chat drawer ---- */
#chatDrawer { position: fixed; top: 56px; right: 0; bottom: 0; width: 340px; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 1rem; z-index: 5; }
.log { flex: 1; overflow: auto; font-size: .9rem; }
.log div { padding: .2rem 0; }
.log .sig { color: var(--brass); }
.log .sys { color: var(--muted); font-size: var(--fs-s); }
.log .bar-tag { color: var(--brass); font-size: var(--fs-xs); margin-right: .35rem; }
.waiting { margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
.waiting p { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.listen-late { margin-top: .6rem; font-size: .85rem; }
.listen-late #listenLateInfo { display: block; margin-top: .15rem; }
.st-notes { margin-top: .6rem; }
.st-notes h3 { font-size: .95rem; margin: 0 0 .3rem; }
.st-notes h3 small { color: var(--muted); font-weight: 400; font-size: .76rem; margin-left: .4rem; }
.st-notes .note { cursor: pointer; padding: .2rem .5rem; border-left: 2px solid var(--brass); margin: .2rem 0; font-size: .85rem; }
.st-notes .note:hover { background: rgba(255,255,255,.04); }
.st-notes .note b { color: var(--brass); margin-right: .45rem; font-weight: 600; }
.st-notes .who { color: var(--muted); margin-right: .35rem; }
.st-notes .note.mine { border-left-color: var(--muted); border-left-style: dashed; } /* a note to oneself: no one else sees it */
.chat-in { display: flex; gap: .5rem; margin-top: .6rem; }

/* ---- small screens ---- */
@media (max-width: 900px) {
  /* On a phone the words sit under the map instead of over it, fading up from the bottom edge. */
  .find-hero { min-height: 0; height: auto; display: flex; flex-direction: column; }
  #findMap { position: static; transform: none; }
  .find-hero-text { position: relative; inset: auto; margin-top: -70px; padding: 2.6rem 1rem 1rem; background: linear-gradient(180deg, rgba(252,249,242,0) 0%, rgba(252,249,242,.92) 30%, #fcf9f2 100%); }
  .find-lede { display: none; }
  .find-hello { font-size: 1.1rem; }
  .find-stat { font-size: .92rem; }
  .find-hero-text h1 { font-size: 2.1rem; }
  .find-key { display: none; }
  .home-actions { grid-template-columns: 1fr 1fr; }
  .ask label { flex-direction: column; align-items: stretch; font-size: 1.05rem; white-space: normal; }
  .ask label.ask-text { min-width: 100%; }
  .ask .ask-play select, .ask .ask-play input { max-width: none; width: 100%; }
  .facets { grid-template-columns: 1fr; gap: .35rem; }
  .facets > .facet-l { margin-top: .4rem; }
  .lobby-top { padding-top: .8rem; }
  #lobby { overflow-x: hidden; }
  .lobby-nav { width: 100%; display: flex; flex-wrap: wrap; order: 3; }
  .desk { grid-template-columns: 1fr; min-height: 0; gap: 1rem; }
  .desk-stage { order: -1; }
  .desk-left { border-right: 0; border-top: 1px solid var(--line); padding: .8rem 0 0; }
  .desk-you { margin-top: .4rem; }
  .next-card h1 { padding-right: 0; }
  .next-card .count { position: static; text-align: left; margin-bottom: .4rem; font-size: 2rem; }
  .lobby-nav button { flex: 1 1 auto; padding: .45rem .5rem; font-size: .8rem; white-space: nowrap; min-width: 0; }
  .signin { margin-left: auto; }
  #app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr 52px; }
  .rail { grid-row: 3; flex-direction: row; padding: 0 .3rem; border-right: 0; border-top: 1px solid var(--line); gap: 0; }
  .rail button { flex: 1; text-align: center; padding: .6rem .2rem; font-size: var(--fs-xs); }
  .rail button[data-view=settings] { margin-top: 0; } /* set apart at the foot of the side rail; in line with the rest along the bottom */
  .rail button.on, .rail button[aria-current] { box-shadow: inset 0 3px 0 var(--brass); }
  .rail-foot { display: none; }
  .view.on { display: block; overflow: auto; }
  .stage { height: 60vh; border-right: 0; }
  .side { padding-bottom: 1.5rem; }
  .list-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .room-title, #nowPill, #refStatus, .code-hint { display: none; }
  .top { gap: .5rem; padding: 0 .7rem; }
  .top .me { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
  .stage-tabs { padding: .4rem .5rem; }
  .stage { height: 52vh; }
  .mic-strip { gap: .4rem; padding: .4rem .5rem; }
  .mic-strip select { max-width: 40vw; }
  .mic-strip input[type=number] { width: 4.5rem; }
  .side { padding: .8rem .9rem; }
  .rail button { font-size: var(--fs-xs); padding: .6rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .col { padding: .8rem .9rem; }
  table.compact { display: block; overflow-x: auto; }
  .two, .tri { grid-template-columns: 1fr; }
  #app, .view.on, .stage, .stage-body, .side, .mic-strip, .top { max-width: 100vw; box-sizing: border-box; }
  #main { overflow: hidden; }
  .view.on { width: 100vw; overflow-x: hidden; }
  .view.on > * { max-width: 100%; min-width: 0; overflow-x: hidden; }
  select, input, textarea { max-width: 100%; }
  .top { overflow: hidden; }
  canvas { max-width: 100%; }
  .listen, .signals, .go.main { flex-wrap: wrap; }
  #chatDrawer { width: 100%; bottom: 52px; }
  #barBig { font-size: 3.2rem; }
  /* A phone shows the conductor or the music, not both: the Screening room and Music stand tabs choose.
     On the music stand the conducting video, the camera and the takes give their margin to the part. */
  .stage-body:has(> .pane[data-pane=score].on) > .self-view,
  .stage-body:has(> .pane[data-pane=score].on) > .take-tiles,
  .stage-body > #refVideo.aside { display: none; }
  .stage-body:has(> #refVideo.aside:not([hidden])) > .pane[data-pane=score] { right: 0; }
  .stage:has(.pane[data-pane=score].on) { height: 64vh; }
  /* The tabs, slim, and on the Music stand the switch between the click / conductor and the score. */
  .stage-tabs { padding: .25rem .5rem; gap: .2rem; flex-wrap: wrap; }
  .stage-tabs button[data-pane] { padding: .3rem .7rem; font-size: var(--fs-xs); }
  body.stand-on .stand-switch { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .stand-switch button { border: 0; border-radius: 0; background: none; color: var(--muted); padding: .25rem .65rem; font-size: var(--fs-xs); white-space: nowrap; }
  .stand-switch button.on { background: var(--brass); color: var(--ink); font-weight: 600; }
  body.stand-on #performBtn { display: none; } /* the switch takes its place in the row */
  /* What you reach for while playing, always on screen: the bar and Play, Record, Stop in a bar
     pinned above the sections rail; the music and the rest scroll behind it. */
  body:not(.perform) .view[data-view=rehearse].on { padding-bottom: 68px; }
  body:not(.perform) .view[data-view=rehearse].on .bar-block,
  body:not(.perform) .view[data-view=rehearse].on .go.main { position: fixed; bottom: 52px; z-index: 6; height: 64px; margin: 0; background: var(--panel); border-top: 1px solid var(--line); box-sizing: border-box; }
  body:not(.perform) .view[data-view=rehearse].on .bar-block { left: 0; width: 4.6rem; flex-direction: column; justify-content: center; gap: .15rem; border-right: 1px solid var(--line); }
  body:not(.perform) .view[data-view=rehearse].on #barBig { font-size: 2rem; line-height: 1; }
  body:not(.perform) .view[data-view=rehearse].on .dots { margin: 0; gap: 4px; min-height: 8px; }
  body:not(.perform) .view[data-view=rehearse].on .dots i { width: 8px; height: 8px; border-width: 1.5px; }
  body:not(.perform) .view[data-view=rehearse].on #barSub { display: none; }
  body:not(.perform) .view[data-view=rehearse].on .go.main { left: 4.6rem; right: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; padding: .45rem .5rem; }
  body:not(.perform) .view[data-view=rehearse].on .go.main button { height: 100%; padding: 0 .5rem; font-size: .95rem; }
  body:not(.perform) .view[data-view=rehearse].on .go.main #recBtn { flex: 1.6; font-size: 1.05rem; border-width: 2px; }
  body.running:not(.perform) .view[data-view=rehearse].on .go.main #stopBtn { flex: 1.6; border-color: var(--ivory); }
  body:not(.perform) .view[data-view=rehearse].on .go.main #stopDiscardBtn { display: none; } /* stop and discard is on a larger screen */
  #chatDrawer { bottom: 116px; }
  body.perform .perform-cams { display: none; } /* full screen on a phone is the music and the buttons; the conductor is on the Screening room tab */
  /* The stand's tools: the part, the page turns, Download and Print; the page map is set on a larger screen. */
  .score-bar { gap: .4rem; padding: .4rem .5rem; }
  .score-bar label.inline, .score-bar label.file { display: none; }
  .score-bar #scorePart { max-width: 46vw; }
  .score-bar #pageLabel { flex-basis: 100%; order: 10; }
  .count-big { font-size: min(26vh, 9rem); }
  .count-big small { font-size: 1rem; }
  .bar-block { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .2rem 0; }
  #barSub { font-size: var(--fs-s); }
  button.big { font-size: .95rem; padding: .6rem .8rem; }
  .side { gap: .7rem; }
}

/* ---- plain pages: the privacy policy and its kin, on the lobby's paper ---- */
body.page { color-scheme: light; background: #fdfcf5; color: #144248; --ivory: #144248; --muted: #5c6f74; --brass: #b24a16; --line: #e2dfd3; --panel: #fff; }
.doc { max-width: 72ch; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.doc-brand img { height: 36px; width: auto; display: block; margin-bottom: 2rem; }
.doc h1 { font-size: var(--fs-2xl); font-weight: 500; margin-bottom: .3rem; }
.doc h2 { font-size: var(--fs-xl); margin: 2rem 0 .6rem; }
.doc p, .doc li { line-height: 1.6; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc table { margin: .6rem 0 1rem; font-size: var(--fs-s); }
.doc th, .doc td { padding: .5rem .6rem; vertical-align: top; }
.doc td:first-child { width: 42%; }

@media (max-width: 600px) { .home-actions { grid-template-columns: 1fr; } }