/* Flat, dense application layout. Channel routing is the primary work surface. */
:root {
  color-scheme: dark;
  --page: #111518;
  --header: #171c20;
  --panel: #1b2126;
  --control: #262e34;
  --edge: #344047;
  --text: #ecf0f1;
  --subtle: #a7b0b5;
  --muted: #84939b;
  --accent: #a9c9b9;
  --accent-text: #13231e;
  --danger: #f0adad;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(26px, 2.6vw, 33px); line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
h2 { font-size: 16px; line-height: 1.35; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
p { color: var(--subtle); }
small { font-size: 12px; }
input,select,textarea {
  min-height: 36px; width: 100%; border: 1px solid var(--edge); border-radius: 5px;
  background: #13191d; color: var(--text); padding: 7px 10px;
}
input[type="range"] { background: none; border: 0; padding: 0; min-height: 18px; accent-color: var(--accent); }
input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--accent); }
input[type="file"] { padding: 5px; }
textarea { min-height: 80px; resize: vertical; }
select { cursor: pointer; }
label { display: grid; gap: 6px; color: var(--subtle); font-size: 12px; font-weight: 550; }
label input, label select, label textarea { color: var(--text); font-size: 13px; font-weight: normal; }
.muted { color: var(--muted); font-size: 12px; }
.hint,.subnote { color: var(--muted); font-size: 12px; }
.eyebrow { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.empty-state { color: var(--muted); font-size: 12px; padding: 14px 0; }
.text-button { border: 0; background: none; color: var(--subtle); padding: 0; font-size: 12px; }
.text-button:hover { color: var(--text); text-decoration: underline; }

.btn {
  min-height: 35px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #435058; border-radius: 5px; background: var(--control); color: var(--text);
  padding: 7px 13px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.btn:hover:not(:disabled) { background: #333e44; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: #c0d8cc; }
.btn.small { min-height: 29px; padding: 4px 9px; }
.btn.full { width: 100%; }
.pill { color: var(--subtle); background: #293139; border: 1px solid var(--edge); padding: 3px 9px; font-size: 11px; border-radius: 4px; white-space: nowrap; }
.status { display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.status.is-live { color: var(--accent); }
.status.is-live:before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 7px; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { min-height: 62px; background: var(--header); border-bottom: 1px solid var(--edge);
  padding: 0 28px; display: flex; gap: 30px; align-items: center; position: sticky; top: 0; z-index: 5; }
.wordmark { border: 0; background: none; padding: 0; color: var(--text); font-size: 14px;
  font-weight: 750; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wordmark b { color: var(--accent); }
.logo { height: 20px; display: inline-flex; gap: 2px; align-items: center; }
.logo span { width: 3px; background: var(--accent); height: 11px; border-radius: 1px; }
.logo span:nth-child(2) { height: 19px; }.logo span:nth-child(3) { height: 15px; }.logo span:nth-child(4) { height: 8px; }
.topbar nav { align-self: stretch; display: flex; align-items: stretch; gap: 8px; }
.nav-link { background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent; padding: 0 12px; }
.nav-link.selected { color: var(--text); border-bottom-color: var(--accent); }
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
main { flex: 1; width: min(1540px,100%); margin: 0 auto; padding: 18px 24px; min-height: 0; }
footer { display: flex; gap: 20px; justify-content: space-between; padding: 14px 28px; border-top: 1px solid var(--edge); color: var(--muted); font-size: 11px; }

.landing { max-width: 1230px; margin: 0 auto; }
.landing-head { padding: 22px 0 28px; }
.landing-head h1 { margin: 10px 0 12px; }
.landing-head p { max-width: 720px; font-size: 15px; }
.entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.entry-panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 7px; padding: 23px;
  display: flex; flex-direction: column; align-items: start; gap: 13px; }
.entry-panel h2 { font-size: 18px; }.entry-panel p { max-width: 460px; font-size: 13px; }
.entry-panel label { align-self: stretch; }.entry-panel .btn { min-width: 140px; }
.entry-spacer { flex: 1; min-height: 18px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 14px; }
.section-header h2 { margin-bottom: 3px; }
.show-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 12px; }
.show-card { background: var(--panel); border: 1px solid var(--edge); padding: 17px; border-radius: 7px;
  display: flex; flex-direction: column; gap: 11px; min-height: 196px; }
.show-card h3 { font-size: 16px; }.show-card p { font-size: 12px; flex: 1; }
.card-meta,.card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-meta,.card-footer span { color: var(--muted); font-size: 11px; }

.room-header { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 19px; align-items: start; }
.room-header .eyebrow { margin: 12px 0 5px; }
.room-header h1 { margin: 0 0 6px; }
.room-header p { font-size: 13px; margin-bottom: 8px; }
.room-actions { display: flex; gap: 8px; padding-top: 26px; }
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 7px; padding: 18px 20px; margin-bottom: 13px; min-width: 0; }
.panel p { font-size: 12px; margin: 7px 0 15px; }
.panel-title { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 15px; }
.panel-title p { margin: 5px 0 0; }
.panel-title h2 { margin-top: 0; }
.transport-panel { padding: 20px 24px 18px; margin-bottom: 14px; }
.transport-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.transport-heading h2 { font-size: 21px; margin: 6px 0 0; }
.transport-heading p { margin: 4px 0 16px; }
.transport-panel input[type="range"] { display: block; }
.timeline { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; margin: 5px 0 12px; }
.transport-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.transport-actions .muted { margin-left: auto; }
.room-columns { display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 14px; align-items: start; }
.room-sidebar .panel { padding: 16px; }
.room-sidebar .panel-title { margin-bottom: 12px; }
.room-sidebar .field { margin: 12px 0; }
.room-sidebar .subnote { margin-bottom: 0; }
.button-pair { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* MIDI arrangements are intentionally information-dense. */
.channel-scroll { overflow-x: auto; }
.channel-head,.channel-row { display: grid; grid-template-columns: 77px minmax(200px,2fr) minmax(120px,1.2fr) 80px minmax(165px,1.5fr);
  gap: 15px; align-items: center; min-width: 800px; }
.channel-head { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: .06em;
  padding: 8px 10px; border-bottom: 1px solid var(--edge); }
.channel-row { border-bottom: 1px solid #30393f; padding: 12px 10px; min-height: 72px; }
.channel-row:last-child { border: 0; }.channel-row:hover { background: #212a30; }
.channel-index strong { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.channel-index span { color: var(--muted); font-size: 9px; letter-spacing: .08em; font-weight: 700; }
.channel-source { min-width: 0; }
.channel-source strong { display: block; font-size: 12px; font-weight: 620; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.channel-source small { display: block; margin-top: 4px; color: var(--muted); }
.channel-instrument { color: var(--subtle); font-size: 12px; overflow-wrap: anywhere; }
.channel-instrument > span { display: block; }
.channel-instrument .text-button { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--accent); }
.channel-activity { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; font: 11px Consolas,monospace; }
.activity-light { width: 7px; height: 7px; background: #465057; border-radius: 50%; }
.activity-light.active { background: var(--accent); box-shadow: 0 0 0 2px #2b3c37; }
.route-controls { display: flex; gap: 6px; align-items: center; }
.route-controls select { flex: 1; min-width: 0; font-size: 12px; height: 33px; }
.recipient-names { display: block; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.route-description { color: var(--subtle); font-size: 12px; overflow-wrap: anywhere; }
.track-table { width: 100%; }
.track-row { display: grid; grid-template-columns: 30px minmax(150px,2fr) minmax(100px,1fr) 90px; gap: 12px; align-items: center;
  padding: 9px 5px; border-top: 1px solid #30393f; font-size: 12px; }
.track-row:first-child { border: 0; }.track-row span { color: var(--muted); }
.track-row strong { min-width: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.options-panel { padding: 0; }.options-panel summary { padding: 15px 20px; cursor: pointer; font-size: 13px; font-weight: 650; }
.options-body { padding: 15px 20px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; border-top: 1px solid var(--edge); }
.options-body label { flex: 1; min-width: 160px; }.options-body .btn { margin-bottom: 1px; }

.list-row { padding: 10px 0; border-top: 1px solid #30393f; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.list-row:first-child { border-top: 0; }.list-copy { min-width: 0; }
.list-copy strong { display: block; font-size: 12px; font-weight: 570; overflow-wrap: anywhere; }
.list-copy small { display: block; color: var(--muted); margin-top: 3px; }
.row-buttons { display: flex; gap: 5px; }
.short-scroll { max-height: 220px; overflow-y: auto; }
.participant { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid #30393f; padding: 9px 0; }
.participant:first-child { border: 0; }.participant strong { display: block; font-size: 12px; font-weight: 600; }
.participant small { color: var(--muted); font-size: 11px; }.participant > span { color: var(--subtle); font: 11px Consolas,monospace; }

.modal-backdrop { position: fixed; inset: 0; background: #080c0dcb; z-index: 20; display: grid; place-items: center;
  overflow-y: auto; padding: 15px; }
.modal { background: var(--panel); border: 1px solid var(--edge); padding: 24px; border-radius: 8px;
  width: min(510px,100%); max-height: 90vh; overflow-y: auto; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.modal h2 { font-size: 21px; margin-bottom: 8px; }.modal h3 { font-size: 15px; margin: 20px 0 8px; }
.modal > p { font-size: 13px; margin: 0 0 16px; }.modal form { display: grid; gap: 14px; margin: 14px 0; }
.dialog-actions { display: flex; gap: 13px; justify-content: flex-end; align-items: center; margin-top: 13px; }
.assignment-list { border: 1px solid var(--edge); border-radius: 5px; max-height: 330px; overflow: auto; }
.assignment-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-bottom: 1px solid var(--edge);
  font-size: 13px; cursor: pointer; }.assignment-row:last-child { border-bottom: 0; }
.assignment-row:hover { background: #273038; }.assignment-row span { flex: 1; }
.code-block { background: #12181c; border: 1px solid var(--edge); padding: 10px; font: 11px Consolas,monospace; overflow-wrap: anywhere; margin: 12px 0; }
#toast { position: fixed; z-index: 30; right: 23px; bottom: 22px; max-width: 430px; background: #29343a;
  border: 1px solid var(--edge); color: var(--text); border-radius: 5px; padding: 13px 16px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .15s; }
#toast.visible { opacity: 1; }

@media (max-width: 1140px) {
  .room-columns { grid-template-columns: minmax(0,1fr) 285px; }
  .topbar { gap: 14px; padding: 0 18px; }
}
@media (max-width: 830px) {
  .room-columns { grid-template-columns: 1fr; }.room-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .room-sidebar .panel { margin-bottom: 0; }
  .entry-grid { grid-template-columns: 1fr; }
  main { padding: 22px 16px 50px; }
}
@media (max-width: 600px) {
  .topbar { gap: 9px; padding: 11px 12px; flex-wrap: wrap; }
  .topbar nav { order: 3; width: 100%; height: 31px; }.nav-link { flex: 1; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .top-actions .btn { padding: 4px 7px; min-height: 30px; font-size: 11px; }
  .room-header { flex-direction: column; }.room-actions { padding-top: 0; }
  .room-sidebar { grid-template-columns: 1fr; }.transport-panel { padding: 16px; }
  .transport-actions .muted { width: 100%; margin: 4px 0 0; }
  .track-row { grid-template-columns: 25px minmax(90px,1fr) 80px; }.track-row span:last-child { display: none; }
  footer { padding: 12px; }
}

/* Admin tables share the same flat controls and spacing as the conductor view. */
[hidden] { display: none !important; }
.admin-page { max-width: 1330px; margin: auto; }
.admin-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.admin-stat { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--edge); background: var(--panel); border-radius: 5px; }
.admin-stat strong { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-stat span, .admin-mail span { font-size: 12px; color: var(--subtle); }
.admin-mail { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.admin-table { display: grid; }
.admin-row { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--edge); min-height: 58px; padding: 9px 0; }
.admin-row:last-child { border: 0; }
.admin-row > div:first-child { min-width: 180px; flex: 1; overflow-wrap: anywhere; }
.admin-row small { display: block; color: var(--muted); }
.admin-row label { min-width: 105px; }
.admin-row .admin-plan { width: 116px; }
.admin-row .inline-label { min-width: auto; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.admin-search { display: flex; align-items: center; gap: 6px; }
.admin-search input { width: 215px; }
@media(max-width: 1060px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } .admin-row { flex-wrap: wrap; } }
@media(max-width: 620px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-search input { width: 130px; } .admin-row > div:first-child { flex-basis: 100%; } }

/* Conductor workflow: output readiness first, direct assignments second. */
.connection-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--edge); background: var(--panel);
  border-radius: 6px; margin-bottom: 12px; }
.connection-copy { display: grid; gap: 2px; flex: 1 1 220px; }
.connection-copy strong { font-size: 14px; }
.connection-copy span { color: var(--muted); font-size: 12px; }
.connection-pill { font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--danger); }
.connection-pill.ready { color: var(--accent); }
.connection-device { flex: 1 1 220px; max-width: 380px; gap: 3px; }
.connection-device span { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.connection-device select { width: 100%; }
.routing-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border-top: 1px solid var(--edge); padding: 13px 0; margin-top: 12px; }
.routing-toolbar > strong { font-size: 12px; margin-right: 5px; }
.routing-filter { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.routing-filter input { width: 170px; }
.channel-head,.channel-row { grid-template-columns: 76px minmax(155px,1.4fr) minmax(100px,.9fr) 65px minmax(250px,2.3fr); min-width: 780px; gap: 10px; }
.channel-row { min-height: 64px; }
.routing-targets { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.routing-targets button { min-height: 30px; border-radius: 4px; font-size: 11px; }
.routing-all,.routing-person { border: 1px solid #485158; background: #242a2f; color: #bac4ca;
  padding: 5px 9px; }
.routing-all { min-width: 42px; font-weight: 700; }
.routing-person { display: inline-flex; align-items: center; gap: 5px; }
.routing-all.on,.routing-person.on { background: #30463c; border-color: #749e87; color: #e3f3ea; }
.routing-targets button:hover:not(:disabled) { border-color: #b8d7c6; }
.routing-check { width: 12px; display: inline-block; text-align: center; font-weight: 800; }
.channel-row[hidden] { display: none; }
.participant small { max-width: 235px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(max-width: 800px) {
  .connection-strip { align-items: stretch; }
  .connection-strip > button { align-self: center; }
  .routing-filter { width: 100%; margin-left: 0; justify-content: space-between; }
  .routing-filter input { flex: 1; }
}


/* Session readiness and reusable lineups share the same compact workbench grid. */
.room-check { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 18px; margin: -2px 0 14px; padding: 11px 16px;
  border: 1px solid var(--edge); border-radius: 5px; background: var(--panel); }
.room-check > div:first-child { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.room-check strong, .lineup-bar strong { font-size: 12px; white-space: nowrap; }
.room-check span, .room-check-counts { color: var(--subtle); font-size: 12px; }
.lineup-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--edge); }
.lineup-bar select { flex: 1 1 180px; width: auto; max-width: 350px; min-width: 140px; }
.lineup-bar .text-button { padding: 6px 5px; }
@media(max-width: 600px) {
  .lineup-bar select { flex-basis: 100%; max-width: none; }
  .lineup-bar strong { flex-basis: 100%; }
}

/* Let the dense MIDI matrix scroll inside its panel on narrow screens. */
.workbench, .room-sidebar, .room-columns > *, .arrangement { min-width: 0; }
@media (max-width: 830px) {
  .room-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .transport-heading { flex-direction: column; gap: 7px; }
  .transport-heading h2 { font-size: 20px; }
  .transport-heading p { margin-bottom: 10px; }
}

/* The local player stays inside the viewport. Only the file shelf scrolls. */
.solo-workspace { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 12px; min-height: 0; height: calc(100dvh - 148px); }
.solo-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.solo-header p { margin-top: 8px; }
.solo-workspace .panel { margin: 0; }
.solo-device { display: flex; gap: 12px; align-items: center; }
.solo-device select { max-width: 320px; }
.solo-transport { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center; }
.solo-transport input, .solo-transport #solo-progress { grid-column: 1 / -1; }
.solo-transport h2 { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-controls { display: flex; align-items: center; gap: 8px; }
.solo-controls .inline-label { display: inline-flex; align-items: center; white-space: nowrap; }
.solo-library { display: flex; flex-direction: column; min-height: 0; }
.solo-picker { position: relative; overflow: hidden; cursor: pointer; }
.solo-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.solo-file-list { display: grid; align-content: start; gap: 5px; overflow-y: auto; min-height: 0; }
.solo-file { display: flex; text-align: left; align-items: center; justify-content: space-between; gap: 20px; background: var(--control); border: 1px solid var(--edge); color: var(--text); border-radius: 4px; padding: 7px 10px; }
.solo-file.selected { border-color: var(--accent); }
.solo-file small { color: var(--muted); }
.solo-empty { display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--edge); color: var(--muted); }
@media (max-width: 850px) {
 .solo-workspace { height: auto; min-height: calc(100dvh - 150px); grid-template-rows: auto auto auto minmax(200px,1fr); }
 .solo-device, .solo-header, .solo-controls { flex-wrap: wrap; }
 .solo-transport { display: block; }
 .solo-transport > * { margin-bottom: 12px; }
}

/* On desktop, keep the conductor controls stationary and scroll only the work surfaces. */
@media (min-width: 1100px) {
  .app:has(.room) { height: 100dvh; overflow: hidden; }
  .app:has(.room) .topbar { min-height: 52px; }
  .app:has(.room) footer { display: none; }
  .app:has(.room) main { padding: 10px 16px; overflow: hidden; }
  .app:has(.room) .room { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
  .app:has(.room) .room-header { margin-bottom: 8px; align-items: center; }
  .app:has(.room) .room-header .eyebrow { margin: 0 0 2px; font-size: 10px; }
  .app:has(.room) .room-header h1 { font-size: 22px; margin: 0 0 2px; }
  .app:has(.room) .room-header p { display: none; }
  .app:has(.room) .room-actions { padding-top: 0; }
  .app:has(.room) .connection-strip { padding: 8px 14px; margin-bottom: 8px; gap: 9px; }
  .app:has(.room) .connection-copy strong { font-size: 12px; }
  .app:has(.room) .transport-panel { padding: 10px 14px; margin-bottom: 8px; }
  .app:has(.room) .transport-heading { align-items: center; }
  .app:has(.room) .transport-heading h2 { font-size: 16px; margin: 0; }
  .app:has(.room) .transport-heading p { display: none; }
  .app:has(.room) .transport-panel .timeline { margin: 0 0 5px; }
  .app:has(.room) .transport-actions .muted { display: none; }
  .app:has(.room) .room-check { margin: 0 0 8px; padding: 6px 11px; }
  .app:has(.room) .room-columns { min-height: 0; flex: 1; overflow: hidden; gap: 10px; }
  .app:has(.room) .room-columns > * { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}


.channel-warning { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6ba81; }
.channel-chart-panel { overflow: hidden; }
.activity-plot { width: 100%; min-width: 0; }
.activity-plot svg { display: block; width: 100%; height: 150px; }
.activity-series:hover polyline { stroke-width: 3.5px; opacity: 1; }
.activity-legend { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 8px; }
.activity-legend-item { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.activity-legend-item i { width: 8px; height: 8px; display: inline-block; border-radius: 1px; }
.chart-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 8px; }

.auto-mode-label { display:inline-flex; flex-direction:row; gap:8px; align-items:center; }
.auto-mode-label select { width:auto; min-width:170px; }

@media (min-width: 831px) and (max-width: 1020px) { .entry-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Owner-only analytics use stored application records, not third-party scripts. */
.admin-activity-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--subtle); }
.admin-activity-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 1px; background: var(--accent); }
.admin-activity-legend .sessions::before { background: #91b6d3; }
.admin-activity-legend .uploads::before { background: #e0bf91; }
.admin-activity-chart { height: 170px; display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 5px; }
.admin-activity-day { display: flex; flex-direction: column; min-width: 0; align-items: center; }
.admin-activity-day small { font-size: 9px; color: var(--muted); white-space: nowrap; }
.admin-activity-bars { flex: 1; width: 100%; min-height: 0; display: flex; align-items: end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--edge); }
.admin-activity-bars span { flex: 1 1 0; max-width: 12px; background: var(--accent); min-height: 0; }
.admin-activity-bars .sessions { background: #91b6d3; }
.admin-activity-bars .uploads { background: #e0bf91; }
@media (max-width: 550px) { .admin-activity-day small { font-size: 8px; writing-mode: vertical-rl; margin-top: 3px; } }

/* v0.8 workspaces: the window itself never hides content. Each task owns its scroll area. */
.app:has(.room) { height: 100dvh; min-height: 0; overflow: hidden; }
.app:has(.room) footer { display: none; }
.app:has(.room) .topbar { position: static; min-height: 52px; padding: 0 16px; }
.app:has(.room) main { width: 100%; flex: 1; min-height: 0; overflow: hidden; padding: 8px 12px; display: flex; }
.app:has(.room) .room { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; overflow: hidden; gap: 8px; }
.app:has(.room) .room-header { flex: 0 0 auto; margin: 0; align-items: center; gap: 12px; }
.app:has(.room) .room-header .eyebrow { margin: 0; font-size: 10px; }
.app:has(.room) .room-header h1 { font-size: 18px; margin: 2px 0; letter-spacing: 0; }
.app:has(.room) .room-actions { padding: 0; flex-wrap: wrap; }
.app:has(.room) .connection-strip { flex: 0 0 auto; margin: 0; padding: 7px 10px; gap: 8px; }
.app:has(.room) .connection-copy { flex-basis: 280px; }
.app:has(.room) .connection-copy strong { font-size: 12px; }
.app:has(.room) .connection-copy span { max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app:has(.room) .connection-device { max-width: 310px; }
.app:has(.room) .transport-panel { flex: 0 0 auto; padding: 8px 12px; margin: 0; }
.app:has(.room) .transport-heading { align-items: center; }
.app:has(.room) .transport-heading h2 { font-size: 15px; margin: 0; }
.app:has(.room) .transport-heading .eyebrow { display: none; }
.app:has(.room) .transport-heading p { display: none; }
.app:has(.room) .timeline { margin: 1px 0 3px; }
.app:has(.room) .transport-actions { gap: 5px; }
.app:has(.room) .transport-actions .muted { display: none; }
.workspace-tabs { display: flex; flex: 0 0 auto; gap: 4px; border-bottom: 1px solid var(--edge); padding: 0 2px; }
.workspace-tab { background: transparent; color: var(--subtle); border: 0; border-bottom: 2px solid transparent; padding: 9px 16px; min-height: 40px; font-size: 13px; }
.workspace-tab.current { color: var(--text); border-color: var(--accent); background: var(--panel); }
.workspace-tab:hover:not(.current) { color: var(--text); background: var(--control); }
.workspace-pages { flex: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.workspace-page { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.workspace-page .panel { margin-bottom: 8px; padding: 12px 15px; }
.workspace-page .panel-title { margin-bottom: 9px; }
.workspace-page .room-check { margin: 0 0 8px; }
.workspace-page .channel-scroll { overflow: auto; max-height: min(100%, 62dvh); }
.workspace-page .channel-row { min-height: 50px; padding: 7px 8px; }
.workspace-page .channel-head { padding: 6px 8px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.workspace-page .routing-toolbar, .workspace-page .lineup-bar { padding: 7px 0; margin: 0; }
.workspace-page .work-details summary { padding: 4px; cursor: pointer; }
.workspace-page .work-details .track-table { padding-top: 12px; }
.workspace-page.library-workspace { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.library-toolbar { flex: 0 0 auto; display: flex; gap: 10px; align-items: end; flex-wrap: wrap; border: 1px solid var(--edge); border-bottom: 0; background: var(--panel); padding: 10px 12px; }
.library-toolbar > div:first-child { margin-right: auto; }
.library-toolbar h2 { font-size: 15px; }
.library-search { flex: 1 1 230px; max-width: 430px; }
.library-sort { flex: 0 1 160px; }
.library-results { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--edge); background: var(--panel); overflow: hidden; }
.library-table { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.library-row { display: grid; grid-template-columns: minmax(240px,3fr) 75px 85px 75px 70px 78px 145px;
  gap: 10px; align-items: center; min-width: 820px; padding: 5px 12px; border-bottom: 1px solid #30393f; font-size: 12px; min-height: 35px; }
.library-row:not(.library-head):hover { background: var(--control); }
.library-head { position: sticky; top: 0; z-index: 1; background: #242c32; color: var(--subtle); font-weight: 650; }
.library-filename { border: 0; background: none; color: var(--text); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0; font-size: 12px; }
.library-filename:hover { text-decoration: underline; }
.library-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-actions { display: flex; gap: 4px; }
.library-actions .btn { font-size: 11px; padding: 2px 7px; min-height: 27px; }
.library-pagination { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 39px; background: var(--panel); padding: 5px 12px; border-top: 1px solid var(--edge); color: var(--muted); font-size: 12px; }
.library-pagination > div { display: flex; gap: 5px; }
.library-inspector-tracks { overflow: auto; max-height: 240px; }
.members-workspace .participant { max-width: 900px; }
.session-workspace .panel { max-width: 1000px; }
.solo-file-list { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.solo-list-rows { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.solo-library .library-search { max-width: 100%; flex: 0 0 auto; margin-bottom: 7px; }
.solo-file { width: 100%; }
@media (max-width: 950px) {
  .app:has(.room) .topbar { flex-wrap: wrap; min-height: 48px; padding: 6px 12px; gap: 8px; }
  .app:has(.room) .room-header { flex-wrap: wrap; }
  .app:has(.room) .connection-device { flex: 1 1 170px; }
  .app:has(.room) .room-actions { margin-left: auto; }
  .workspace-tab { flex: 1; padding: 8px 3px; }
  .library-toolbar { align-items: center; }
}
@media (max-width: 600px) {
  .app:has(.room) .topbar .top-actions { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .app:has(.room) .connection-copy span { max-width: 240px; }
  .app:has(.room) .transport-actions { max-height: 75px; overflow-y: auto; }
  .library-search { max-width: 100%; }
  .library-sort { flex: 1 1 125px; }
  .room-actions .btn { min-height: 28px; }
}
/* Narrow screens have insufficient height for a desktop workbench; keep every control reachable. */
@media (max-width: 600px) {
  .app:has(.room) { height: auto; min-height: 100dvh; overflow: visible; }
  .app:has(.room) main, .app:has(.room) .room { height: auto; min-height: 0; overflow: visible; }
  .workspace-pages { min-height: 52dvh; max-height: 72dvh; }
  .workspace-page { min-height: 0; }
}
.library-context-menu { position: fixed; z-index: 40; min-width: 158px; padding: 4px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 5px;
  box-shadow: 0 6px 18px #0006; }
.library-context-menu button { display: block; width: 100%; border: 0; color: var(--text);
  background: none; font-size: 12px; text-align: left; padding: 8px 10px; border-radius: 3px; }
.library-context-menu button:hover, .library-context-menu button:focus-visible { background: var(--control); }