/* ============================================================
   CONSOLE DESIGN SYSTEM
   Type values are spec §6, verbatim. Engraved legends are small
   and letterspaced on purpose — that is what the hardware does.
   Legibility is solved by contrast (--console-legend), not size.
   ============================================================ */
:root {
  /* type — spec §6 table */
  --c-btn-legend: 9px;    /* button legends, 700, 0.16em, uppercase */
  --c-legend:     10px;   /* .session-lbl engraved legends, 700, 0.14em */
  --c-take-dur:   13px;   /* take duration */
  --c-body:       14px;   /* body and notes */
  --c-take-num:   15px;   /* take number */
  --c-instrument: 22px;   /* instrument value */
  --c-counter:    44px;   /* transport counter */

  /* geometry */
  --c-r-hard: 3px;
  --c-r-soft: 8px;
  --c-r-pill: 999px;

  /* spacing — 4px base */
  --c-s1: 4px;  --c-s2: 8px;  --c-s3: 12px;
  --c-s4: 16px; --c-s5: 24px; --c-s6: 32px;

  /* material — neutral only. No coloured shadow anywhere. */
  --c-spec:    rgba(255,255,255,0.28);
  --c-sheen:   rgba(255,255,255,0.08);
  --c-edge-lo: rgba(0,0,0,0.55);
  --c-cast:    rgba(0,0,0,0.55);
}

/* ===========================================================
   WorldSong platform components.

   Additive only - styles.css and pages.css are untouched, so nothing here can
   affect the front page. Uses the existing tokens; no new colours are invented.
   =========================================================== */

/* --------------------------------------------------- header account state -- */

/* The home page loads styles.css + platform.css only (not pages.css), so the
   few header bits the signed-in state needs are defined here, scoped to the
   header. Values match pages.css exactly so the two never disagree. */

.site-header .avatar {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: calc(var(--size) * 0.4);
  color: var(--bg-deepest);
  background: linear-gradient(150deg, var(--teal-bright), var(--teal-deep));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-header .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.site-header .user-chip__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

/* 560px matches the same breakpoint in pages.css so the two never disagree. */
@media (max-width: 560px) {
  .site-header .user-chip__name { display: none; }
}

/* Home page header: no nav list, so push the account actions to the right. */
.site-header--minimal .nav-container > .nav-actions { margin-left: auto; }

/* Signed-in actions inside the mobile menu stack sensibly. */
.mobile-menu-actions .user-chip { flex: 1; }

/* ---------------------------------------------------------- auth pages ---- */

.auth-wrap {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 48px) var(--pad-x) 72px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.auth-card__eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-primary);
  margin: 0 0 10px;
}

.auth-card__title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.auth-card__sub {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 26px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 7px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field__hint {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.45;
}

.field__hint.is-bad { color: #ff8f8f; }
.field__hint.is-good { color: var(--teal-soft); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.btn-block {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--teal-primary);
  color: var(--text-on-teal);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.btn-block:hover:not(:disabled) { filter: brightness(1.08); }
.btn-block:active:not(:disabled) { transform: translateY(1px); }
.btn-block:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-block--google {
  background: #fff;
  color: #1f1f1f;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 15px;
}

.btn-block--google svg { width: 18px; height: 18px; }

.auth-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.auth-sep::before,
.auth-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.auth-alt {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin: 22px 0 0;
}

.auth-alt a { color: var(--teal-primary); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-note {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 18px 0 0;
  text-align: center;
}

.form-error {
  background: rgba(255, 90, 90, 0.1);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ffb4b4;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 20px;
}

.form-ok {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid var(--border-default);
  color: var(--teal-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 20px;
}

/* password strength meter */
.pw-meter { display: flex; gap: 5px; margin-top: 9px; }
.pw-meter span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}
.pw-meter.is-1 span:nth-child(1) { background: #ff7676; }
.pw-meter.is-2 span:nth-child(-n+2) { background: #ffb765; }
.pw-meter.is-3 span:nth-child(-n+3) { background: var(--teal-deep); }
.pw-meter.is-4 span { background: var(--teal-primary); }

/* ------------------------------------------------------------ empty state -- */

.empty {
  text-align: center;
  padding: 46px 26px;
}

.empty svg {
  width: 40px;
  height: 40px;
  color: var(--teal-primary);
  opacity: 0.75;
  margin-bottom: 16px;
}

.empty__title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.empty__sub {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto;
}

.empty__sub a { color: var(--teal-primary); text-decoration: none; font-weight: 600; }
.empty__sub a:hover { text-decoration: underline; }

.skeleton {
  height: 96px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--bg-card) 30%, var(--bg-card-elevated) 50%, var(--bg-card) 70%);
  background-size: 220% 100%;
  animation: ws-shimmer 1.3s ease-in-out infinite;
}

.skeleton + .skeleton { margin-top: 14px; }

@keyframes ws-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* --------------------------------------------------------- post composer -- */

.composer-box__field textarea {
  width: 100%;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  resize: vertical;
  min-height: 54px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.composer-box__field textarea:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.composer-box__field textarea::placeholder { color: var(--text-muted); }

.composer-link-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.composer-link-row input {
  flex: 1;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 10px 15px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text-primary);
}

.composer-link-row input:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.composer-link-row input::placeholder { color: var(--text-muted); }

.composer-attached { margin-top: 14px; display: grid; gap: 12px; }

.composer-count {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
}

.composer-count.is-over { color: #ff8f8f; }

/* -------------------------------------------------------------- comments -- */

.comments {
  border-top: 1px solid var(--border-subtle);
  margin-top: 14px;
  padding-top: 14px;
}

.comment {
  display: flex;
  gap: 11px;
  padding: 9px 0;
}

.comment__bubble {
  flex: 1;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
}

.comment__who {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.comment__when {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 7px;
}

.comment__body {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment__body a { color: var(--teal-primary); }

.comment-form {
  display: flex;
  gap: 9px;
  margin-top: 10px;
}

.comment-form input {
  flex: 1;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 10px 15px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text-primary);
}

.comment-form input:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.comment-form input::placeholder { color: var(--text-muted); }

/* --------------------------------------------------------- profile links -- */

.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.link-row + .link-row { border-top: 1px solid var(--border-subtle); }

.link-row__badge {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-subtle);
}

.link-row__badge span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}

.link-row__meta { flex: 1; min-width: 0; }

.link-row__platform {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.link-row__url {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row__url a { color: inherit; text-decoration: none; }
.link-row__url a:hover { color: var(--teal-primary); }

.icon-danger {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.icon-danger:hover { color: #ff9a9a; border-color: rgba(255, 90, 90, 0.4); }
.icon-danger svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ tab panels -- */

.tab-panel[hidden] { display: none; }

/* ----------------------------------------------------------------- toast -- */

.ws-toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: grid;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.ws-toast {
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  animation: ws-toast-in 0.22s ease-out;
}

.ws-toast.is-error { border-color: rgba(255, 90, 90, 0.45); color: #ffc0c0; }
.ws-toast.is-out { opacity: 0; transition: opacity 0.45s ease; }

@keyframes ws-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-toast { animation: none; }
}

/* --------------------------------------------------- misc / small tweaks -- */

.post__body a { color: var(--teal-primary); }

.post-links { display: grid; gap: 12px; margin: 14px 0 4px; }

/* "Open on <platform>" escape hatch on every playable card. */
.embed-card__out {
  display: block;
  padding: 9px 14px 12px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
  transition: color 0.18s ease;
}

.embed-card__out:hover { color: var(--teal-primary); }

.post-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* Post owner controls.
   These carried no icon sizing at first, so the SVG collapsed to 0x0 and left a
   12x8 button nobody could hit. Explicit box + icon size, and a 32px target that
   clears the 24px minimum for a tap. */
.post__owner-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.post__edit,
.post__delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  transition: color 0.18s ease, background 0.18s ease;
}

.post__edit svg,
.post__delete svg {
  width: 16px;
  height: 16px;
  display: block;
}

.post__edit:hover { color: var(--teal-primary); background: rgba(45, 212, 191, 0.1); }
.post__delete:hover { color: #ff9a9a; background: rgba(255, 90, 90, 0.1); }

.post__edit:focus-visible,
.post__delete:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

/* Inline post editing */
.post-edit textarea {
  width: 100%;
  background: var(--bg-deepest);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  resize: vertical;
  min-height: 78px;
}

.post-edit textarea:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}

.post-edit__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.post-edit__bar .spacer { flex: 1; }

.post__edited {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text-muted);
}

.handle-avail { display: inline-flex; align-items: center; gap: 6px; }

.page-band__stats .is-loading { opacity: 0.4; }

.rail a[aria-current="page"] { color: var(--text-primary); }

.feed-end {
  text-align: center;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 24px 0 8px;
}

/* --------------------------------------------- links to public profiles ---- */

.post__name-link {
  color: inherit;
  text-decoration: none;
}

.post__name-link:hover { color: var(--teal-primary); text-decoration: underline; }

.post__avatar-link { display: inline-flex; text-decoration: none; flex-shrink: 0; }
.post__avatar-link:hover { opacity: 0.88; }

/* ------------------------------------------------------------ auth dialog -- */

.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.ws-modal[hidden] { display: none; }

body.ws-modal-open { overflow: hidden; }

.ws-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 12, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ws-fade 0.18s ease-out;
}

.ws-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: auto;
  animation: ws-modal-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.ws-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.ws-modal__close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ws-modal__close svg { width: 16px; height: 16px; }

.ws-modal__close:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ws-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-modal__backdrop, .ws-modal__dialog { animation: none; }
}

/* ------------------------------------------------------- site-wide dock ---- */

.ws-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: rgba(10, 30, 30, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  animation: ws-dock-in 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.ws-dock[hidden] { display: none; }

@keyframes ws-dock-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) { .ws-dock { animation: none; } }

.ws-dock__progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
}

.ws-dock__progress:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

.ws-dock__played {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-primary));
  transition: width 0.15s linear;
}

.ws-dock__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px clamp(12px, 3vw, 28px);
  max-width: var(--container);
  margin: 0 auto;
}

.ws-dock__art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card-elevated);
}

.ws-dock__meta { min-width: 0; flex: 1; }

.ws-dock__title {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-dock__artist {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-dock__controls { display: flex; align-items: center; gap: 4px; }

.ws-dock__controls button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.ws-dock__controls button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.ws-dock__controls button svg { width: 17px; height: 17px; }

.ws-dock__play {
  background: var(--teal-primary) !important;
  color: var(--text-on-teal) !important;
  width: 42px !important;
  height: 42px !important;
}

.ws-dock__play:hover { filter: brightness(1.08); }
.ws-dock__play svg { width: 18px; height: 18px; }

/* Browser refused to resume without a tap: draw attention to the play button. */
.ws-dock.is-blocked .ws-dock__play {
  box-shadow: 0 0 0 4px var(--teal-glow);
  animation: ws-dock-pulse 1.6s ease-in-out infinite;
}

@keyframes ws-dock-pulse {
  50% { box-shadow: 0 0 0 9px rgba(45, 212, 191, 0.12); }
}

.ws-dock__time {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 82px;
  text-align: right;
}

.ws-dock__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
}

.ws-dock__close:hover { color: var(--text-primary); }
.ws-dock__close svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
  .ws-dock__artist, .ws-dock__time { display: none; }
  .ws-dock__inner { gap: 10px; padding: 8px 12px; }
}

/* Keep the dock from covering the last line of any page. */
body:has(.ws-dock:not([hidden])) { padding-bottom: 76px; }

/* ------------------------------------------------- minimised feed player --- */

/* Minimise control: lives in the card body row, next to the platform badge, so
   it is on solid background and never fights the platform's own controls. */
.embed-card__min {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 7px 13px;
  flex-shrink: 0;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-primary);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.embed-card__min:hover {
  background: var(--teal-primary);
  color: var(--text-on-teal);
  border-color: var(--teal-primary);
}

.embed-card__min svg { width: 14px; height: 14px; }
.embed-card__min:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }

@media (max-width: 480px) {
  .embed-card__min span { display: none; }
  .embed-card__min { padding: 7px 9px; }
}

/* The floated card itself. Position only - the iframe is never moved in the DOM,
   because reparenting an iframe reloads it and the video would start over. */
.embed-card.is-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 32px));
  z-index: 160;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: ws-float-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Sit above the audio bar when that is on screen too. */
body.ws-dock-visible .embed-card.is-floating { bottom: 92px; }

@keyframes ws-float-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .embed-card.is-floating { animation: none; } }

.embed-card.is-floating .embed-card__min { display: none; }

.embed-float__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  background: var(--bg-card-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.embed-float__title {
  flex: 1;
  min-width: 0;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-float__bar button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-secondary);
  cursor: pointer;
}

.embed-float__bar button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
.embed-float__bar button svg { width: 14px; height: 14px; }

/* Holds the space in the post so nothing jumps while the card is in the corner. */
.embed-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
  background: rgba(45, 212, 191, 0.04);
}

.embed-placeholder span {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .embed-card.is-floating { right: 12px; left: 12px; width: auto; bottom: 14px; }
  body.ws-dock-visible .embed-card.is-floating { bottom: 80px; }
}

/* -------------------------------------------- unplayable-link explainer ---- */

.link-notice:empty { display: none; }

.link-blocked {
  margin-top: 12px;
  padding: 16px 18px;
  background: rgba(255, 90, 90, 0.07);
  border: 1px solid rgba(255, 90, 90, 0.3);
  border-radius: var(--radius-sm);
  animation: ws-notice-in 0.2s ease-out;
}

@keyframes ws-notice-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .link-blocked { animation: none; } }

.link-blocked__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-family: var(--f-body);
  font-size: 14.5px;
  color: #ffc9c9;
}

.link-blocked__head svg { width: 18px; height: 18px; flex-shrink: 0; }

.link-blocked p {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 9px;
}

.link-blocked__fix {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
}

.link-blocked__fix b { color: var(--text-primary); }
.link-blocked__fix i { color: var(--text-primary); font-style: normal; font-weight: 600; }

.link-blocked__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ------------------------------------------------ dead-content fallback ---- */

.embed-card--gone {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
}

.embed-linkicon--gone { color: var(--text-muted); }

.embed-card--gone .embed-card__title { color: var(--text-secondary); }

.embed-card__owner-hint {
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--teal-primary);
}

/* ----------------------------------------------------------- brand loader -- */

/* A spinning gold record. The artwork is trimmed and padded to an exact square
   so the disc's centre is the image's centre - otherwise it wobbles as it turns. */

.ws-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
}

.ws-loader--inline {
  flex-direction: row;
  gap: 11px;
  padding: 18px 4px;
  justify-content: flex-start;
}

.ws-loader__disc {
  width: 64px;
  height: 64px;
  display: block;
  animation: ws-spin 1.6s linear infinite;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

.ws-loader--inline .ws-loader__disc { width: 34px; height: 34px; }
.ws-loader--sm .ws-loader__disc { width: 44px; height: 44px; }

@keyframes ws-spin { to { transform: rotate(360deg); } }

.ws-loader__label {
  font-family: var(--f-body);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Reduced motion: never spin. Keep a quiet pulse so it still reads as busy. */
@media (prefers-reduced-motion: reduce) {
  .ws-loader__disc {
    animation: ws-loader-pulse 1.8s ease-in-out infinite;
  }
  @keyframes ws-loader-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
}

/* ------------------------------------------------------------ emoji picker -- */

.emoji-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.emoji-btn--icon { padding: 0; width: 34px; height: 34px; justify-content: center; }

.emoji-btn:hover {
  color: var(--teal-primary);
  border-color: var(--border-default);
  background: rgba(45, 212, 191, 0.08);
}

.emoji-btn:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.emoji-btn svg { width: 17px; height: 17px; }

.emoji-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 170;
  width: min(330px, calc(100vw - 32px));
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: ws-emoji-in 0.16s ease-out;
}

.emoji-panel--right { left: auto; right: 0; }
.emoji-panel--up { top: auto; bottom: calc(100% + 8px); }

@keyframes ws-emoji-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .emoji-panel { animation: none; } }

.emoji-panel__search { padding: 10px 10px 6px; }

.emoji-panel__search input {
  width: 100%;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--text-primary);
}

.emoji-panel__search input:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

.emoji-panel__grid { max-height: 260px; overflow-y: auto; padding: 0 10px 10px; }

.emoji-panel__group {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.emoji-panel__row { display: flex; flex-wrap: wrap; gap: 2px; }

.emoji-panel__item {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.emoji-panel__item:hover { background: rgba(45, 212, 191, 0.14); transform: scale(1.15); }
.emoji-panel__item:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

.emoji-panel__none {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px 4px;
  text-align: center;
}

/* The composer's tool row holds the button; the panel anchors to it. */
.composer-box__tools, .comment-form, .post-edit__bar { position: relative; }

/* --------------------------------------------------------------- reactions -- */

.reaction-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.post__actions .reaction-bar { margin-left: auto; }

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  min-height: 28px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-body);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.reaction-chip:hover { background: rgba(45, 212, 191, 0.12); transform: translateY(-1px); }

.reaction-chip.is-mine {
  background: rgba(45, 212, 191, 0.16);
  border-color: var(--border-strong);
}

.reaction-chip:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.reaction-chip__emoji { font-size: 14px; line-height: 1; }

.reaction-chip__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.reaction-chip.is-mine .reaction-chip__count { color: var(--teal-primary); }

.reaction-add {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.reaction-add:hover { color: var(--teal-primary); border-color: var(--teal-primary); background: rgba(45, 212, 191, 0.08); }
.reaction-add:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.reaction-add svg { width: 15px; height: 15px; }

/* Comment footer: Like beside the reaction chips. */
.comment__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.comment-like:hover { color: var(--teal-primary); }
.comment-like svg { width: 15px; height: 15px; }
.comment-like:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------- composers page ---- */

.composer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
}

.composer-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.composer-card__head { display: flex; align-items: center; gap: 14px; }

.composer-card__photo {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-default);
}

.composer-card__name {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.composer-card__role {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.composer-card__tags {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--teal-primary);
  margin: 4px 0 0;
}

.composer-card__reel { margin-top: auto; }

/* Members who signed up as composers */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.member-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-elevated);
  transform: translateY(-2px);
}

.member-card__name {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.member-card__meta {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
}

.member-card__bio {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) { .member-card:hover { transform: none; } }

/* ------------------------------------------------------ listening in My Space -- */

.listen-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 0;
}

.listen-row + .listen-row { border-top: 1px solid var(--border-subtle); }

.listen-row__art {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-card-elevated);
}

.listen-row__art--blank {
  background-image: linear-gradient(150deg, rgba(45, 212, 191, 0.25), rgba(10, 30, 30, 0.9));
}

.listen-row__meta { flex: 1; min-width: 0; }

.listen-row__title {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listen-row__sub {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listen-row__when {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.reco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.reco-card__why {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-primary);
  margin: 0 0 8px;
}

.cat-group {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.cat-group:first-child { margin-top: 0; }

.cat-row { display: flex; flex-wrap: wrap; gap: 7px; }

.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.cat-chip:hover {
  color: var(--teal-primary);
  border-color: var(--border-default);
  background: rgba(45, 212, 191, 0.1);
}

.tag-banner {
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--text-secondary);
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  margin: 0 0 18px;
}

.tag-banner b { color: var(--text-primary); text-transform: capitalize; }
.tag-banner a { color: var(--teal-primary); text-decoration: none; font-weight: 600; }
.tag-banner a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- account menu -- */

.account-menu__btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.account-menu__btn span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-secondary);
  transition: background 0.16s ease;
}

.account-menu__btn:hover { border-color: var(--border-strong); background: rgba(45, 212, 191, 0.08); }
.account-menu__btn:hover span { background: var(--teal-primary); }
.account-menu__btn[aria-expanded="true"] { border-color: var(--teal-primary); }
.account-menu__btn[aria-expanded="true"] span { background: var(--teal-primary); }
.account-menu__btn:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }

.account-menu {
  /* Fixed to the viewport and mounted on <body> - see the note in ws-app.js
     about the header being a backdrop root. Top and left are set in script. */
  position: fixed;
  z-index: 180;
  width: 244px;

  /* Frosted glass, not plain transparency. The blur is the part that makes it
     work: it turns whatever is behind - a cover photograph, a video thumbnail -
     into texture instead of competing detail, so the labels stay readable over
     anything. Straight opacity would put us back where the profile name was.
     Saturation is lifted slightly because blurring washes colour out. */
  background: color-mix(in srgb, var(--bg-card-elevated) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--teal-primary) 16%, var(--border-default));
  border-radius: var(--radius);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: ws-menu-in 0.16s ease-out;
}

/* Anything without backdrop-filter gets the solid panel rather than unreadable
   text over a photograph. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .account-menu { background: var(--bg-card-elevated); }
}

@keyframes ws-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .account-menu { animation: none; } }

.account-menu__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border-subtle);
}

.account-menu__name {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.account-menu__handle {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--text-muted);
}

.account-menu__group {
  font-family: var(--f-body);
  font-size: var(--c-legend);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 12px 15px 5px;
}

.account-menu a[role="menuitem"],
.account-menu__foot button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 15px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.account-menu a[role="menuitem"]:hover,
.account-menu__foot button:hover {
  background: rgba(45, 212, 191, 0.1);
  color: var(--text-primary);
}

.account-menu a:focus-visible,
.account-menu button:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: -2px;
}

.account-menu__foot {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  padding: 4px 0;
}

.account-menu__foot button { color: #ffb4b4; }
.account-menu__foot button:hover { background: rgba(255, 90, 90, 0.12); color: #ffc9c9; }

/* Below 1100px the header actions are hidden, so the menu lives in the drawer. */
.mobile-menu-actions .account-menu__btn { display: none; }

/* Marks where a playing card sits, so the observer can tell when it has been
   scrolled past even while the card itself is floating. */
.embed-sentinel { height: 1px; margin: 0; padding: 0; }

/* ---- Settings: preference rows and the destructive panel -------------------
   A native checkbox rather than a custom switch. A styled toggle would need
   its own focus, disabled and indeterminate states to be as good as the one
   the browser already ships, and a half-built one is worse than none. */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.check-row input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--teal-primary);
  cursor: pointer;
}
.check-row label {
  display: block;
  font-weight: 500;
  cursor: pointer;
}
.check-row label .field__hint { margin-top: 4px; font-weight: 400; }

/* Deleting an account and exporting data are not ordinary settings, so they do
   not look like ordinary settings. The red edge is the warning, not a colour
   used decoratively elsewhere. */
.panel--danger { border-color: rgba(255, 90, 90, 0.35); }
.panel--danger .panel__title { color: #ffb4b4; }

.btn-block--danger {
  background: rgba(255, 90, 90, 0.12);
  border-color: rgba(255, 90, 90, 0.45);
  color: #ffc9c9;
}
.btn-block--danger:hover:not(:disabled) {
  background: rgba(255, 90, 90, 0.2);
  border-color: rgba(255, 90, 90, 0.7);
}
.btn-block--danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* A row of buttons that wraps instead of colliding. Three links in separate
   <p> tags stacked on top of each other on the 404 page - inline-block boxes
   with no gap overlap the moment their line-height is shorter than the pill. */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* Short pages (404, empty states) otherwise leave the footer floating in the
   middle of the viewport with a void beneath it. */
.page-wrap--fill { min-height: 46vh; }

/* The identity row is a link now, so it needs to behave like one - and it has to
   restate its layout, because the generic `.account-menu a` rule below sets
   display:block and would otherwise stack the avatar above the name. */
/* Out-specifies `.account-menu a[role="menuitem"]`, which sets display:block and
   would otherwise stack the avatar above the name. */
.account-menu a[role="menuitem"].account-menu__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 15px;
  text-decoration: none; color: inherit;
}
.account-menu a.account-menu__head:hover { background: rgba(255, 255, 255, 0.05); }
.account-menu a.account-menu__head:hover .account-menu__handle { color: var(--teal-primary); }
.account-menu a.account-menu__head:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

/* Menu icons. Sized to the cap height of the label beside them rather than to a
   round number, so the row reads as one object instead of a picture next to some
   words. Muted at rest and teal on hover, inherited through currentColor so the
   SVG needs no colour of its own. */
.account-menu a[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 11px;
}
.account-menu__icon {
  width: 18px; height: 18px; flex: none;
  color: var(--text-muted);
  transition: color .16s ease;
}
.account-menu a[role="menuitem"]:hover .account-menu__icon,
.account-menu a[role="menuitem"]:focus-visible .account-menu__icon {
  color: var(--teal-primary);
}

/* Chalk icons sit slightly larger than a hairline glyph would, because the
   turbulence filter eats a little off every edge and a small chalk mark just
   looks broken. Near-white rather than muted grey - chalk is bright, that is
   the whole character of it - and only warmed toward teal on hover. */
.account-menu__icon {
  width: 22px; height: 22px; flex: none;
  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
  transition: color .16s ease;
}
.account-menu a[role="menuitem"] { display: flex; align-items: center; gap: 12px; }
.account-menu a[role="menuitem"]:hover .account-menu__icon,
.account-menu a[role="menuitem"]:focus-visible .account-menu__icon {
  color: var(--teal-primary);
}

/* ===========================================================
   THE SESSION ROOM  (session.html only)

   Everything below is scoped to `.session-room` or `.session-page`, both of
   which exist on exactly one page. That matters more here than anywhere else in
   this file: platform.css IS loaded by index.html, so a bare `.take` or `.meter`
   - which is what the mock-up used - would have leaked straight onto the front
   page. Nothing here is a bare element or a generic class name.

   On density. A producer console is the one screen on WorldSong where packing
   information in is correct: meters, take lists, latency readouts and a
   transport are instruments, and spacing them out like a marketing page would
   make the tool worse, not calmer. The reference is a mixing desk. So this
   section runs tighter than the rest of the site - 10px tracked micro-labels,
   1px hairlines instead of gaps, tabular figures - while using the same tokens,
   the same two typefaces and the same teal as everything else. Density is a
   licence for information, not for a second design language.

   Two deliberate departures from the approved mock-up, both documented here so
   nobody "fixes" them back:

   1. The mock-up's record red was #F0553A, which is not a token and not the
      red this codebase already uses for danger. The repo's established danger
      family is the rgba(255, 90, 90, ...) literals in .form-error, .panel--danger
      and .link-blocked, so the record state uses that instead. One red on the
      site, not two.
   2. The mock-up gave every spare pixel to the waveform and left the take
      column trailing off into nothing at the bottom. Here the take column ends
      in a pinned footer (count, total time, the two export buttons) and the
      stage column is a three-row grid whose middle row is the transport and
      whose last row is the selected take's alignment figures - so the waveform
      gets the space it needs and stops there.
   =========================================================== */

/* The site has no skip link anywhere yet; REVIEW-2026-07 flags that as a gap.
   Adding one here is an improvement rather than a deviation, and this page in
   particular has a lot of chrome above the thing you came for. */
.session-page .session-skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 210;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-strong);
  color: var(--teal-primary);
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: top .16s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.session-page .session-skip:focus { top: 14px; }

.session-room {
  --session-rec: rgba(255, 90, 90, 0.92);
  --session-rec-soft: rgba(255, 90, 90, 0.35);
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 32px) 48px;
}

/* The micro-label. One class, used for every 10px tracked caption in the room -
   column heads, readout captions, meter labels - because a console with four
   slightly different small-caps styles reads as four different tools. */
.session-room .session-lbl {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--c-legend); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- the bar every view shares ---------- */

.session-room .session-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 2px 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}
.session-room .session-bar__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.session-room .session-bar__name {
  font-family: var(--f-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-room .session-bar__meta {
  font-family: var(--f-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.session-room .session-bar__spacer { flex: 1; }
.session-room .session-bar__people { display: flex; gap: 6px; }

.session-room .session-live {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--teal-primary);
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.session-room .session-live:hover { border-color: var(--border-strong); background: rgba(45, 212, 191, 0.08); }
.session-room .session-live:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.session-room .session-live__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--session-rec);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.035);
}
.session-room .session-live.is-live { border-color: var(--session-rec-soft); color: #ffc9c9; }

/* ---------- failures: the alert strip and the blocking panel ---------- */

/* An alert belongs to the view under it, so it takes that view's measure. Full
   console width above a 720px soundcheck read as two unrelated pages stacked. */
.session-room .session-alerts { display: flex; flex-direction: column; gap: 10px; }
.session-room[data-view="soundcheck"] .session-alerts,
.session-room[data-view="audience"] .session-alerts,
.session-room[data-view="loading"] .session-alerts { max-width: 860px; margin-left: auto; margin-right: auto; }
.session-room .session-alerts:not(:empty) { margin-bottom: 20px; }

.session-room .session-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 90, 90, 0.07);
  border: 1px solid rgba(255, 90, 90, 0.3);
}
.session-room .session-alert--warn { background: rgba(45, 212, 191, 0.06); border-color: var(--border-default); }
.session-room .session-alert--info { background: var(--bg-card); border-color: var(--border-subtle); }
.session-room .session-alert__icon { flex: none; width: 20px; height: 20px; color: #ffc9c9; }
.session-room .session-alert--warn .session-alert__icon,
.session-room .session-alert--info .session-alert__icon { color: var(--teal-primary); }
.session-room .session-alert__icon svg { width: 20px; height: 20px; display: block; }
.session-room .session-alert__text { flex: 1; min-width: 0; }
.session-room .session-alert__text b {
  display: block;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 700;
  color: #ffc9c9;
  margin-bottom: 4px;
}
.session-room .session-alert--warn .session-alert__text b,
.session-room .session-alert--info .session-alert__text b { color: var(--teal-soft); }
.session-room .session-alert__text p {
  margin: 0;
  font-family: var(--f-body); font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary);
  max-width: 74ch;
}
.session-room .session-alert__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.session-room .session-alert__close {
  flex: none;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--text-muted);
  font-size: 20px; line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.session-room .session-alert__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.session-room .session-alert__close:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

/* The fix list. Every blocking failure in this room ends in instructions,
   because "microphone blocked" without the three clicks that unblock it is a
   dead end dressed up as an error message. */
.session-room .session-fix {
  margin: 12px 0 0;
  padding-left: 18px;
  /* The global reset strips list markers site-wide. Here they earn their keep:
     these are numbered-feeling recovery steps and a bulletless list of them
     reads as one run-on paragraph. */
  list-style: disc;
  font-family: var(--f-body); font-size: 13.5px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 74ch;
}
.session-room .session-fix li { margin-bottom: 5px; }
.session-room .session-fix li::marker { color: var(--teal-primary); }

.session-room .session-block {
  max-width: 860px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: var(--radius);
  padding: 34px clamp(20px, 4vw, 40px);
}
.session-room .session-block__inner { max-width: 60ch; }
.session-room .session-block__icon { display: block; width: 30px; height: 30px; color: #ffc9c9; margin-bottom: 16px; }
.session-room .session-block__icon svg { width: 30px; height: 30px; display: block; }
.session-room .session-block__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 12px;
}
.session-room .session-block__body {
  margin: 0;
  font-family: var(--f-body); font-size: 16px; line-height: 1.65;
  color: var(--text-secondary);
}
.session-room .session-block .btn-sm { margin-top: 20px; }

/* ---------- shared: meter, readouts, transport ---------- */

/* A level meter is not a progress bar, so it is not styled like one: no rounded
   pill, no animation on the fill. It is scaled with transform rather than width
   because it repaints sixty times a second and a width change relayouts the row
   around it. The peak tick decays slowly - a bar with no peak hold tells a
   performer nothing about the clip they just missed. */
.session-room .session-meter {
  position: relative;
  flex: 1; min-width: 60px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.session-room .session-meter__fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-primary));
}
.session-room .session-meter__peak {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--teal-soft);
  transform: translateX(-1px);
}
.session-room .session-level { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.session-room .session-level--wide { margin: 22px 0; }
.session-room .session-level__db {
  min-width: 56px; text-align: right;
  font-family: var(--f-body); font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.session-room .session-readouts { display: flex; flex-direction: column; }
.session-room .session-readouts--row { flex-direction: row; flex-wrap: wrap; gap: 0 32px; margin: 18px 0 4px; }
.session-room .session-readout {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.session-room .session-readouts--row .session-readout { border-bottom: 0; padding: 0; }
.session-room .session-readout:last-child { border-bottom: 0; }
.session-room .session-readout b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 21px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}
.session-room .session-readout b u {
  text-decoration: none;
  font-size: 11px; font-weight: 400; color: var(--text-muted);
  margin-left: 2px;
}
.session-room .session-readout .session-lbl { margin-top: 4px; }

/* ---------- shared transport (artist + audience) ---------- */

.session-room .session-transport {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 0 4px;
}
.session-room .session-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-card-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.session-room .session-btn svg { width: 18px; height: 18px; display: block; }
.session-room .session-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); }
.session-room .session-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.session-room .session-btn:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.session-room .session-btn--lg { width: 56px; height: 56px; }
.session-room .session-btn--lg svg { width: 26px; height: 26px; }

.session-room .session-time {
  min-width: 104px;
  font-family: var(--f-display); font-weight: 600; font-size: 26px;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}
.session-room .session-time small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.session-room .session-time--muted { color: var(--text-muted); text-align: right; }


/* ---------- console transport (§9.3) ---------- */

/* Button groups: legend engraved above, square button below. */
.session-view--console .session-transport {
  align-items: flex-end;
  gap: 4px;
  padding: 4px 0 4px;
}

.session-view--console .session-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.session-view--console .session-btn-group--arm {
  margin: 0 8px; /* 16 px of extra space total */
}

/* Engraved legend above each button. */
.session-view--console .session-btn-legend {
  font-family: var(--f-display);
  font-size: var(--c-btn-legend);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--console-legend);
}

/* Square console transport buttons — 52×52, light caps, 4 px radius. */
.session-view--console .session-transport .session-btn {
  width: 52px; height: 52px;
  position: relative;
  border: none;
  border-radius: 14px;
  background: #22312F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 0 -6px 10px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 4px rgba(255,255,255,0.035),
    0 2px 2px rgba(0,0,0,0.85),
    0 6px 12px rgba(0,0,0,0.55),
    0 14px 28px rgba(0,0,0,0.35);
  transition: box-shadow .09s ease, transform .09s ease, background .12s ease;
}

.session-view--console .session-transport .session-btn:hover:not(:disabled) {
  background: #2A3B39;
}

.session-view--console .session-transport .session-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,0.85),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 4px rgba(255,255,255,0.02),
    0 1px 1px rgba(0,0,0,0.7);
}
.session-view--console .session-transport .session-btn svg {
  width: 22px; height: 22px;
}
.session-view--console .session-transport .session-btn:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.session-view--console .session-transport .session-btn:focus-visible {
  outline: 2px solid var(--teal-primary); outline-offset: 2px;
}

/* ARM — safe by default. Dark cap with a red rim: the control is present but
   the machine is not hot. */
.session-view--console .session-transport .session-btn--arm {
  width: 60px; height: 60px;
  border-radius: var(--c-r-pill);
  background: #2A1917;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,120,110,0.16),
    inset 0 -7px 12px rgba(0,0,0,0.5),
    inset 0 0 0 2px rgba(0,0,0,0.34),
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 4px rgba(255,255,255,0.035),
    0 2px 2px rgba(0,0,0,0.85),
    0 6px 12px rgba(0,0,0,0.55),
    0 14px 28px rgba(0,0,0,0.35);
}

/* Armed — hot. Lit cap, bright rim, glow bleeding onto the panel. */
.session-view--console #prArmBtn[data-state="armed"],
.session-view--console #prArmBtn[data-state="recording"] {
  background: var(--sig-red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(255,190,185,0.30),
    inset 0 -7px 12px rgba(0,0,0,0.34),
    inset 0 0 0 2px rgba(255,255,255,0.15),
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 4px rgba(255,255,255,0.035),
    0 2px 2px rgba(0,0,0,0.85),
    0 6px 12px rgba(0,0,0,0.55),
    0 14px 28px rgba(0,0,0,0.35);
}

.session-view--console .session-btn__lamp {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sig-unlit);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}

#prArmBtn[data-state="idle"] .session-btn__lamp {
  animation: none;
  background: var(--sig-unlit);
}

#prArmBtn[data-state="armed"] .session-btn__lamp {
  animation: session-lamp-blink 1s steps(2, start) infinite;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
}

#prArmBtn[data-state="recording"] .session-btn__lamp {
  animation: none;
  background: var(--sig-red);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
}

@keyframes session-lamp-blink {
  0%   { background: var(--sig-unlit); }
  50%  { background: var(--sig-red); }
  100% { background: var(--sig-unlit); }
}

/* Counter — Syne 44 px, tabular numerals. Pushes right with auto margin. */
.session-view--console .session-transport .session-time {
  min-width: auto;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 44px;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  margin-left: auto;
  padding-left: 20px;
}
.session-view--console .session-time__tenths {
  font-size: 24px;
  font-weight: 400;
  color: var(--console-legend);
}

/* Duration — a small legend beside the counter. */
.session-view--console .session-transport .session-time--muted {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--console-legend);
  margin-left: 10px;
  min-width: auto;
}

/* Count-in — two-segment control beside ARM, column over row. */
.session-view--console .session-count-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 70px;
  gap: 4px;
  margin: 0 4px;
}
.session-view--console .session-count-in__legend {
  width: 100%;
  text-align: center;
}
.session-view--console .session-count-in__seg {
  position: relative;
  flex: 1;
  font-family: var(--f-display);
  font-size: var(--c-btn-legend);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border: 1px solid var(--console-legend);
  border-radius: 3px;
  background: transparent;
  color: var(--console-legend);
  cursor: pointer;
  text-align: center;
  transition: background .12s ease, color .12s ease;
}

.session-view--console .session-count-in__seg::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 44px;
}
.session-view--console .session-count-in__seg.is-on {
  background: var(--console-legend);
  color: var(--bg-deepest);
}
.session-view--console .session-count-in__seg:hover:not(.is-on) {
  border-color: #BCC8C8;
  color: #BCC8C8;
}

/* Talkback & cue grid (§9.7) — 3×2, 64×64px square buttons, legends above. */
.session-view--console .console-well--talkgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  padding: 14px 16px;
  align-items: start;
}

.session-view--console .console-well--talkgrid .session-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Talkback buttons — 64×64, square, amber when lit. */
.session-view--console .session-btn--talkback {
  width: 64px; height: 64px;
  border-radius: 4px;
  border: none;
  background: var(--bg-card-elevated);
  color: var(--console-legend);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform 80ms ease-out;
}
.session-view--console .session-btn--talkback:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-card-elevated) 70%, var(--sig-amber) 30%);
}
.session-view--console .session-btn--talkback:active:not(:disabled) {
  transform: scale(0.97);
}
.session-view--console .session-btn--talkback:focus-visible {
  outline: 2px solid var(--teal-primary); outline-offset: 2px;
}

/* Lit — amber fill, dark legend. */
.session-view--console .session-btn--talkback[aria-pressed="true"] {
  background: var(--sig-amber);
  color: #061616;
}
.session-view--console .session-btn--talkback[aria-pressed="true"]:hover {
  background: #F5B952;
}

/* LATCHED legend — only visible when talkback is latched. */
.session-view--console .session-btn--talkback__latched {
  display: none;
  font-family: var(--f-display);
  font-size: var(--c-legend);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sig-amber);
}
.session-view--console .session-btn--talkback.is-latched + .session-btn--talkback__latched {
  display: block;
}

/* TALKBACK IS NOT RECORDED — permanent legend below the grid (§11). */
.session-view--console .session-talkback__notice {
  margin: 0;
  padding: 6px 16px 8px;
  font-family: var(--f-display);
  font-size: var(--c-legend);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--console-legend);
  text-align: center;
}

/* ---------- takes (shared by the console and the artist's own list) ---------- */

.session-room .session-colhead {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.session-room .session-takes { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.session-room .session-takes__empty { padding: 26px 12px; }
.session-room .session-takes__empty svg { width: 30px; height: 30px; }

.session-room .session-take {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.session-room .session-take:hover { background: var(--bg-card); }
.session-room .session-take:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }
.session-room .session-take__n {
  font-family: var(--f-display); font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.session-room .session-take__dur {
  font-family: var(--f-body); font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.session-room .session-take__thumb { display: flex; align-items: center; gap: 1px; height: 18px; }
.session-room .session-take__thumb i { display: block; width: 2px; border-radius: 1px; background: var(--text-muted); }
.session-room .session-take__flag {
  grid-column: 2 / -1;
  font-family: var(--f-body); font-size: var(--c-legend); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffb4b4;
}
.session-room .session-take.is-on {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: inset 2px 0 0 var(--teal-primary);
}
.session-room .session-take.is-on .session-take__n,
.session-room .session-take.is-on .session-take__dur { color: var(--teal-soft); }
.session-room .session-take.is-on .session-take__thumb i { background: var(--teal-primary); }
.session-room .session-take.is-partial { box-shadow: inset 2px 0 0 rgba(255, 90, 90, 0.7); }

/* The artist's own list carries a download per take. Sibling rather than child
   of the row, because a button inside a button is invalid markup and screen
   readers do the wrong thing with it. */
.session-room .session-take-row { display: flex; align-items: center; gap: 2px; }
.session-room .session-take-row .session-take { flex: 1; min-width: 0; }
.session-room .session-take-dl {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 0; background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.session-room .session-take-dl svg { width: 16px; height: 16px; display: block; }
.session-room .session-take-dl:hover { color: var(--teal-primary); background: var(--bg-card-elevated); }
.session-room .session-take-dl:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

/* ---------- the producer console ---------- */

/* The producer console's own colours.
 *
 * Scoped to the console so the client's locked palette is untouched. Two rules
 * govern them: --console-legend replaces --text-muted here because the global
 * token measures 4.43:1 on this background and small text needs 4.5:1; and the
 * four --sig-* colours mean audio signal and nothing else, so no interface
 * state may ever borrow them. */
.session-view--console {
  --console-legend: #829A9A;  /* engraved legends */
  --console-cap:    #A8B8B8;  /* transport button caps */
  --sig-green:      #3FCF5C;  /* signal healthy */
  --sig-amber:      #F2A63B;  /* signal hot, or a path is open */
  --sig-red:        #FF3B30;  /* record, clip, on air */
  --sig-unlit:      #173A38;  /* an unlit segment or lamp */
}

/* The console's legends use the scoped legend colour rather than the global
   muted token, which measures 4.13:1 on this background. Same specificity as
   the room rule, so it must come after it to win. */
.session-view--console .session-lbl { color: var(--console-legend); }

/* ---------- five-region grid (§7) ---------- */

/* A region is a position on the panel, not a card. */
.session-view--console .console-region {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 24px;
  min-height: 0;
  overflow: hidden;
}

/* A recessed housing for meters, knobs, and talkback buttons — the only
   elements permitted a fill of their own (§7). */
.session-view--console .console-well {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-height: 80px;
}

/* The grid: 240px reel · fluid centre (min 640px) · 320px right column,
   matching the spec diagram exactly. */
.session-view--console .console-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 240px minmax(640px, 1fr) 320px;
  grid-template-rows: 18fr 9fr 11fr 44px;
  grid-template-areas:
    "reel   window    talkback"
    "reel   stage     controls"
    "reel   transport instrument"
    "note   note      note";
  background: var(--bg-deepest);
}

/* Height is capped rather than left to the content. */
@media (min-width: 880px) {
  .session-view--console .console-grid {
    height: clamp(480px, calc(100vh - 260px), 720px);
  }
}

/* Attach each region to its grid area. */
.session-view--console .console-region--reel      { grid-area: reel; }
.session-view--console .console-region--window    { grid-area: window; }
.session-view--console .console-region--stage     { grid-area: stage; }
.session-view--console .console-region--transport { grid-area: transport; }
.session-view--console .console-region--talkback  { grid-area: talkback; }
.session-view--console .console-region--controls  { grid-area: controls; }
.session-view--console .console-region--instrument{ grid-area: instrument; }
.session-view--console .console-region--note      { grid-area: note; }

/* Hairline dividers between regions. Every internal edge has exactly one
   1px rule in var(--border-subtle). */

/* Reel → centre column */
.session-view--console .console-region--reel {
  border-right: 1px solid var(--border-subtle);
}

/* Centre column → right column (C1/C2/C3 → D1/D2/D3) */
.session-view--console .console-region--window,
.session-view--console .console-region--stage,
.session-view--console .console-region--transport {
  border-right: 1px solid var(--border-subtle);
}

/* Horizontal rules centre column (C1→C2, C2→C3) */
.session-view--console .console-region--window,
.session-view--console .console-region--stage {
  border-bottom: 1px solid var(--border-subtle);
}

/* Horizontal rules right column (D1→D2, D2→D3) */
.session-view--console .console-region--talkback,
.session-view--console .console-region--controls {
  border-bottom: 1px solid var(--border-subtle);
}

/* Rule above the note line */
.session-view--console .console-region--note {
  border-top: 1px solid var(--border-subtle);
}

/* ---------- regions: internal layout ---------- */

/* B: Take Reel — the only scrolling region on the screen. */
.session-view--console .console-region--reel {
  display: flex;
  flex-direction: column;
}
.session-view--console .console-region--reel .session-takes {
  flex: 1;
  min-height: 0;
}

/* C1: The Window — meter housing at top, strips below. */
.session-view--console .console-region--window {
  display: flex;
  flex-direction: column;
}
.session-view--console .console-region--window .console-well {
  flex-shrink: 0;
  margin-bottom: 14px;
}

/* ---------- ladder meter (§9.1) ---------- */

/* The meter well — a recessed housing for the ladder, clip lamp and scale. */
.session-view--console .console-well--meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
}

/* The ladder itself: a horizontal row of 48 flat segments with 1px gaps.
   aria-hidden so screen readers skip it in favour of the status announcer. */
.session-view--console .console-meter__ladder {
  position: relative;
  display: flex;
  gap: 1px;
  height: 18px;
}

/* One segment. Flex:1 so all 48 share the width equally. Square corners, flat.
   Unlit colour is --sig-unlit; the lit colour comes from the zone class
   toggled by JS. Transition for the smooth fall; killed under reduced motion. */
.session-view--console .console-meter__seg {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 0;
  background: var(--sig-unlit);
  transition: background-color 0.08s ease;
}
.session-view--console .console-meter__seg--green.is-lit { background: var(--sig-green); }
.session-view--console .console-meter__seg--amber.is-lit { background: var(--sig-amber); }
.session-view--console .console-meter__seg--red.is-lit   { background: var(--sig-red); }

/* Peak-hold marker: one segment in --text-primary with a 1px --bg-deepest gap
   on each side. The gaps are not decoration: white over green is 2.04:1 and
   invisible; dark gaps separate the marker from whatever colour it lands on. */
.session-view--console .console-meter__seg.is-peak {
  background: var(--text-primary);
  box-shadow: 1px 0 0 var(--bg-deepest), -1px 0 0 var(--bg-deepest);
}

/* The −18 dBFS = 0 VU target notch. A 2px vertical cut in --bg-deepest drawn
   through the ladder at the −18 position, full segment height. The panel colour
   over --sig-green is 9.07:1, readable at a glance in any lighting. */
.session-view--console .console-meter__notch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bg-deepest);
  pointer-events: none;
  z-index: 1;
}

/* Clip lamp: a square at the right end, outside the ladder. */
.session-view--console .console-meter__clip {
  position: absolute;
  right: -28px;
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--sig-unlit);
  cursor: pointer;
  transition: background-color 0.08s ease;
}

.session-view--console .console-meter__clip::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.session-view--console .console-meter__clip.is-clipped {
  background: var(--sig-red);
}
.session-view--console .console-meter__clip:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

/* Screen-reader announcer: visually hidden beside the ladder. Throttled to
   at most one announcement every 2 seconds (§9.1). */
.session-view--console .console-meter__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Printed scale beneath the ladder. Each tick is a label positioned by its
   dB value via meterPos, so tick spacing and segment positions agree exactly. */
.session-view--console .console-meter__scale {
  position: relative;
  height: 20px;
  margin-top: 0;
  /* The ladder's right padding leaves room for the clip lamp, so the scale
     runs the same width as the ladder itself. */
}
.session-view--console .console-meter__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--f-body);
  font-size: var(--c-legend);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--console-legend);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The −18 · 0VU label sits under the notch. */
.session-view--console .console-meter__tick.is-target {
  color: var(--text-primary);
  font-weight: 600;
}

/* The meter row (ladder + clip) needs relative positioning for the
   absolute-positioned clip lamp. */
.session-view--console .console-meter__row {
  position: relative;
  padding-right: 30px;
}

/* ---------- ask buttons (§9.2 point 5) ---------- */

.session-view--console .console-ask {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.session-view--console .console-ask__btn {
  flex: 1;
  padding: 14px 0;
  font-family: var(--f-body);
  font-size: var(--c-legend);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--console-legend);
  background: transparent;
  border: 1px solid var(--console-legend);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.session-view--console .console-ask__btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.session-view--console .console-ask__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.session-view--console .console-ask__btn:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

/* Reduced motion: segments step instead of gliding (§9.1). */
@media (prefers-reduced-motion: reduce) {
  .session-view--console .console-meter__seg {
    transition: none;
  }
  .session-view--console .console-meter__clip {
    transition: none;
  }
}

/* C2: The Stage — waveform fills the space. */
.session-view--console .console-region--stage {
  display: flex;
  flex-direction: column;
}

/* Two-lane layout: upper 60%, bracket, lower 40% (§9.5). */
.session-view--console .session-stage__lanes {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-view--console .session-stage__upper {
  flex: 6;
  min-height: 0;
  position: relative;
}

.session-view--console .session-stage__lower {
  flex: 4;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The upper lane's wave fills its container. */
.session-view--console .session-stage__upper .session-wave {
  height: 100%;
  min-height: 0;
}

/* The lower lane's wave fills the space below the ref header. */
.session-view--console .session-stage__lower .session-wave {
  height: 100%;
  min-height: 0;
}

/* Alignment bracket between the two lanes (§9.5). */
.session-view--console .session-stage__bracket {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  position: relative;
}

.session-view--console .session-stage__bracket::before,
.session-view--console .session-stage__bracket::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 8px;
  background: var(--console-legend);
}

.session-view--console .session-stage__bracket::before {
  left: 50%;
  transform: translateX(-50%);
}

.session-view--console .session-stage__bracket::after {
  right: 50%;
  transform: translateX(50%);
}

.session-view--console .session-stage__bracket-label {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--console-legend);
  background: var(--bg-base);
  border: 1px solid var(--console-legend);
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

/* Reference lane header (§9.5). */
.session-view--console .session-stage__ref-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  min-height: 22px;
}

.session-view--console .session-stage__ref-name {
  flex: 1;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--console-legend);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-view--console .session-stage__ref-load {
  position: relative;
  flex: none;
  padding: 2px 10px;
  font-family: var(--f-body);
  font-size: var(--c-legend);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--console-legend);
  background: transparent;
  border: 1px solid var(--console-legend);
  border-radius: 3px;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}

.session-view--console .session-stage__ref-load::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

.session-view--console .session-stage__ref-load:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* Reference waveform at 45% opacity (§9.5). */
.session-view--console .session-wave--ref {
  flex: 1;
  min-height: 36px;
  opacity: 0.45;
}

/* Reference empty state. */
.session-view--console .session-wave--ref .session-wave__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--console-legend);
}

.session-view--console .session-wave--ref .session-wave__empty svg {
  width: 20px;
  height: 20px;
  opacity: 0.4;
}

.session-view--console .session-wave--ref .session-wave__empty p {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--c-legend);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Markers (§9.5): 1px vertical rules in --console-legend, labels at foot. */
.session-view--console .session-stage__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--console-legend);
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}

.session-view--console .session-stage__marker-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: var(--c-legend);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--console-legend);
  background: var(--bg-base);
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.2;
  pointer-events: none;
}

/* C3: Transport — row of five square buttons (§9.3).  Layout defined above
   under .session-view--console .session-transport. */

/* D3: The Instrument — readout rows stacked. */
.session-view--console .console-region--instrument {
  display: flex;
  flex-direction: column;
}

/* #prTimingNote reuses .session-foot-line, whose shared rule sets
   flex-basis: 100% for the take reel's wrapping footer. Inside this column
   container flex-basis governs height, so that single line would claim the
   whole region and squash the table scroll to 0px. Scope it back to its
   natural size here; the base rule stays correct for the take reel. */
.session-view--console .console-region--instrument .session-foot-line {
  flex: none;
  flex-basis: auto;
}

/* ---------- instrument table (§9.6) ---------- */

/* Tables don't reliably take flex sizing with border-collapse, so the scroll
   lives on the wrapper div and the table itself just fills it. */
.session-view--console .console-table-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.session-view--console .console-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.session-view--console .console-table tr {
  border-bottom: 1px solid var(--border-subtle);
}

.session-view--console .console-table tr:last-child {
  border-bottom: 0;
}

.session-view--console .console-table__label {
  text-align: left;
  padding: 2px 0;
  vertical-align: baseline;
  font-weight: 500;
}

.session-view--console .console-table__value {
  text-align: right;
  padding: 1px 12px 1px 32px;
  vertical-align: baseline;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
}

.session-view--console .console-table__value.is-warn {
  color: var(--sig-amber);
}

.session-view--console .console-table__value.is-bad {
  color: var(--sig-red);
}

.session-view--console .console-table__unit {
  text-align: left;
  padding: 2px 0;
  vertical-align: baseline;
  font-size: 11px;
  color: var(--console-legend);
  white-space: nowrap;
}

/* E: Note Line — a single status row at the foot. */
.session-view--console .console-region--note {
  display: flex;
  align-items: center;
  padding: 12px 24px;
}

/* ---------- console take reel (§9.4) ---------- */

/* Visually-hidden label — generic, reuses the same clip-path pattern as
   .session-heading--sr so screen readers can announce the status glyph text
   that sighted users get from the coloured square. */
.session-view--console .console-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Each take row: 56px, number/thumbnail/duration/glyph in a flex row,
   star right-aligned. Overrides the shared grid layout. */
.session-view--console .session-take.session-take--console {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px;
  border-radius: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background .14s ease;
}

.session-view--console .session-take--console:hover {
  background: var(--bg-card);
}

/* Number: Syne 15px tabular, right-aligned for neat column. */
.session-view--console .session-take--console .session-take__n {
  flex: none;
  min-width: 28px;
  text-align: right;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--console-legend);
  font-variant-numeric: tabular-nums;
}

/* Thumbnail: 200-point peak array drawn as 1px bars. Each bar gets an equal
   share of the available width so the waveform fills the column naturally —
   with 200 bars across ~100 px they blend into a waveform silhouette, which
   is the expected reading for a reel this narrow. */
.session-view--console .session-take--console .session-take__thumb {
  flex: 1;
  display: flex;
  align-items: center;
  height: 24px;
  overflow: hidden;
  gap: 0;
}
.session-view--console .session-take--console .session-take__thumb i {
  display: block;
  flex: 1;
  min-width: 0;
  width: 0;
  height: 100%;
  background: var(--console-legend);
  border-radius: 0;
}

/* Duration: DM Sans 13px tabular. */
.session-view--console .session-take--console .session-take__dur {
  flex: none;
  min-width: 36px;
  text-align: right;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--console-legend);
  font-variant-numeric: tabular-nums;
}

/* Status glyph: a 6px square. The inline background colour from JS
   carries the signal meaning; CSS only sets the fixed size and shape. */
.session-view--console .session-take--console .session-take__glyph {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 0;
}

/* Keeper star: right edge of the row, --text-primary when starred.
   The JS swaps the SVG between filled and hollow shapes. */
.session-view--console .session-take--console .session-take__star {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  color: var(--console-legend);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color .16s ease, background .16s ease;
}
.session-view--console .session-take--console .session-take__star:hover {
  color: var(--text-primary);
  background: var(--bg-card-elevated);
}
.session-view--console .session-take--console .session-take__star svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Selection state — 2px teal bar on the left edge + --bg-card-elevated fill.
   The JS toggles .is-on on the row via selectTake(). */
.session-view--console .session-take--console.is-on {
  background: var(--bg-card-elevated);
  border: 0;
  box-shadow: inset 2px 0 0 var(--teal-primary);
}
.session-view--console .session-take--console.is-on .session-take__n,
.session-view--console .session-take--console.is-on .session-take__dur {
  color: var(--text-primary);
}
.session-view--console .session-take--console.is-on .session-take__thumb i {
  background: var(--text-primary);
}
.session-view--console .session-take--console.is-on .session-take__star {
  color: var(--text-primary);
}

/* ---------- <880px: console withdrawn ---------- */

.session-view--console .console-too-narrow {
  display: none;
  padding: 32px 20px;
  text-align: center;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 60px auto 0;
}

/* ---------- take-list footer (shared) ---------- */

.session-room .session-col__foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.session-room .session-col__foot .btn-sm { flex: 1 1 auto; }
/* The export buttons are the take list's primary action in the console view,
   so they earn a taller hit area than the site-wide .btn-sm padding (7px)
   gives. Scoped to the console - .btn-sm on every other page stays as-is. */
.session-view--console .btn-sm { padding: 11px 16px; }
.session-room .session-foot-line {
  flex-basis: 100%;
  margin: 0 0 4px;
  font-family: var(--f-body); font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted);
}

.session-room .session-stage {
  position: relative;
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  overflow: hidden;
}
.session-room .session-ruler { display: flex; justify-content: space-between; margin-bottom: 12px; }
.session-room .session-wave {
  position: relative;
  flex: 1; min-height: 90px;
  display: flex; align-items: center; gap: 2px;
}
.session-room .session-wave__bar {
  display: block; flex: 1;
  align-self: center;
  border-radius: 1px;
  background: var(--teal-deep);
  opacity: 0.85;
}
.session-room .session-wave__bar.is-played { background: var(--teal-primary); }
.session-room .session-wave__grid {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.session-room .session-wave__grid s { width: 1px; background: var(--border-subtle); }
.session-room .session-wave__play {
  position: absolute; top: -6px; bottom: -6px; left: 0;
  width: 1px; background: var(--text-primary);
}
.session-room .session-wave__play::before {
  content: ""; position: absolute; top: -4px; left: -3px;
  width: 7px; height: 7px; background: var(--text-primary);
  transform: rotate(45deg);
}
.session-room .session-wave__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  color: var(--text-muted);
}
.session-room .session-wave__empty svg { width: 28px; height: 28px; color: var(--teal-primary); opacity: 0.5; }
.session-room .session-wave__empty p {
  margin: 0; max-width: 34ch;
  font-family: var(--f-body); font-size: 13.5px; line-height: 1.55;
}

/* The selected take's working, shown rather than hidden behind a click. Every
   support conversation about a late take starts with these figures, so they sit
   on the same screen as the take. */
.session-room .session-detail {
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
}
.session-room .session-detail__empty {
  margin: 0;
  font-family: var(--f-body); font-size: 12.5px; color: var(--text-muted);
}
.session-room .session-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 4px 18px;
  margin: 0;
}
.session-room .session-detail__grid dt { margin-bottom: 3px; }
.session-room .session-detail__grid dd {
  margin: 0;
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- participant strips ---------- */

.session-room .session-strips {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.session-room .session-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
}
.session-room .session-strip:first-child { border-top: 0; }
.session-room .session-strip--empty { display: block; padding: 0; border-top: 0; }
.session-room .session-strip__id { min-width: 104px; display: flex; flex-direction: column; gap: 2px; }
.session-room .session-strip__id b { font-family: var(--f-body); font-size: 13px; font-weight: 500; }

.session-room .session-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--f-body); font-size: var(--c-legend); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.session-room .session-badge:hover { border-color: var(--border-strong); color: var(--teal-primary); }
.session-room .session-badge:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.session-room .session-badge--arm { color: #ffb4b4; border-color: var(--session-rec-soft); }

/* The status line. Four short truths about the session, always visible, because
   every one of them is something a producer would otherwise have to ask about. */
.session-room .session-note {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 12px 4px 0;
  font-family: var(--f-body); font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted);
}
.session-room .session-note em { font-style: normal; color: var(--teal-soft); }

/* ---------- soundcheck and the other narrow views ---------- */

.session-room .session-view--narrow { max-width: 720px; margin: 0 auto; }
.session-room .session-intro { margin-bottom: 26px; }
.session-room .session-heading {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.08;
  margin: 10px 0 0;
  text-wrap: balance;
}
.session-room .session-heading--sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.session-room .session-lede {
  margin: 14px 0 0;
  font-family: var(--f-body); font-size: 16px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch; text-wrap: pretty;
}

/* Numbered steps rather than four stacked panels. A soundcheck is a sequence
   with a gate at each stage, and a list that is visibly ordered is the cheapest
   way to say "three more and you are in" to someone who is already nervous. */
.session-room .session-steps { list-style: none; margin: 0; padding: 0; }
.session-room .session-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.session-room .session-step[data-state="done"] { border-color: var(--border-default); }
.session-room .session-step__num {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
  color: var(--text-muted);
}
.session-room .session-step[data-state="done"] .session-step__num {
  border-color: var(--border-strong);
  color: var(--teal-primary);
}
.session-room .session-step__title {
  margin: 0 0 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em;
}
.session-room .session-step__sub {
  margin: 0 0 16px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}
.session-room .session-step__mark { color: var(--teal-primary); }
.session-room .session-step__mark svg { width: 20px; height: 20px; display: block; }
.session-room .session-step .field { margin-bottom: 14px; }
.session-room .session-step .check-row { margin-bottom: 12px; }
.session-room .session-enter-hint { text-align: center; margin-top: 12px; }

/* ---------- artist view ---------- */

.session-room .session-view--artist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.session-room .session-perform {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 26px clamp(20px, 3vw, 34px) 30px;
}

/* The countdown is the biggest thing on the artist's screen on purpose. They
   are looking at it from a metre away with headphones on, and a number they
   have to lean in for is a number they will miss. */
.session-room .session-cue {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.session-room .session-cue__count {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(64px, 12vw, 116px); line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}
.session-room .session-cue[data-state="idle"] .session-cue__count { display: none; }
.session-room .session-cue:not([data-state="idle"]) .session-cue__beats { display: none; }
/* Four unlit beats while nothing is happening. At 116px an em dash renders as a
   grey slab that looks like a broken element; four pips say what is about to
   happen instead, in the room's own language, and the slot keeps its height so
   the layout does not jump when the count starts. */
.session-room .session-cue__beats { display: flex; gap: 16px; padding: 30px 0; }
.session-room .session-cue__beats i {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--border-default);
}
.session-room .session-cue[data-state="counting"] .session-cue__count { color: var(--teal-primary); }
.session-room .session-cue[data-state="recording"] .session-cue__count { color: var(--session-rec); }
.session-room .session-cue__sub {
  margin: 0; max-width: 46ch;
  font-family: var(--f-body); font-size: 14px; line-height: 1.55;
  color: var(--text-secondary);
}

.session-room .session-talkback {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-card-elevated);
  color: var(--text-secondary);
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.session-room .session-talkback svg { width: 17px; height: 17px; }
.session-room .session-talkback:hover { border-color: var(--border-strong); color: var(--text-primary); }
.session-room .session-talkback:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.session-room .session-talkback.is-on {
  border-color: var(--teal-primary);
  background: rgba(45, 212, 191, 0.12);
  color: var(--teal-soft);
}
.session-room .session-talkback__hint { margin-top: 8px; }

.session-room .session-side {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.session-room .session-side__foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.session-room .session-side__foot .btn-sm { width: 100%; margin-bottom: 8px; }

/* ---------- audience view ---------- */

.session-room .session-audience { display: flex; align-items: center; gap: 20px; }
.session-room .session-audience__state { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.session-room .session-audience__state b {
  font-family: var(--f-display); font-weight: 600; font-size: 17px;
}
.session-room .session-audience__count { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.session-room .session-audience__count b {
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- responsive ----------

   Breakpoints from spec §7:
     ≥1440px     Reel 260px, right column 340px.
     1120–1439px As drawn, compressed.
     880–1119px  Right column drops below the stage as a full-width row.
     ≤879px      Console withdrawn; recording is desktop-only. */

/* ≥1440px: wider reel and right column. */
@media (min-width: 1440px) {
  .session-view--console .console-grid {
    grid-template-columns: 260px minmax(640px, 1fr) 340px;
  }
}

/* 880–1119px: right column drops below centre as a full-width strip.
   Reel narrows to 200px. Talkback stays leftmost within the strip. */
@media (max-width: 1119px) {
  .session-view--console .console-grid {
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 1.5fr 3fr 1fr 1fr 44px;
    grid-template-areas:
      "reel   window    window"
      "reel   stage     stage"
      "reel   transport transport"
      "d1     d2        d3"
      "note   note      note";
  }

  /* Centre column no longer borders the (now-absent) right column. */
  .session-view--console .console-region--window,
  .session-view--console .console-region--stage,
  .session-view--console .console-region--transport {
    border-right: 0;
  }

  /* Right-column regions reassigned to the new full-width row. */
  .session-view--console .console-region--talkback   { grid-area: d1; }
  .session-view--console .console-region--controls   { grid-area: d2; }
  .session-view--console .console-region--instrument { grid-area: d3; }

  /* Replace horizontal rules with vertical ones between the three. */
  .session-view--console .console-region--talkback,
  .session-view--console .console-region--controls {
    border-bottom: 0;
    border-right: 1px solid var(--border-subtle);
  }
}

/* ≤879px: console withdrawn. Recording is desktop-only by prior decision. */
@media (max-width: 879px) {
  .session-view--console .console-grid {
    display: none;
  }
  .session-view--console .console-too-narrow {
    display: block;
  }
}

/* Artist view: side column falls below at narrower widths. */
@media (max-width: 820px) {
  .session-room .session-view--artist { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .session-room .session-bar { flex-wrap: wrap; gap: 12px; }
  .session-room .session-time { min-width: 74px; font-size: 20px; }
  .session-room .session-transport { gap: 10px; }
  .session-room .session-step { grid-template-columns: 28px minmax(0, 1fr); }
  .session-room .session-step__mark { grid-column: 2; }
}

/* Every animation in this file has an off-switch, and so does this one. The
   lamp blink is a state signal; under reduced motion it is steady at 60 %
   opacity and the state word carries the meaning (§9.3). Level meters keep
   running — a meter that has stopped moving is indistinguishable from a
   microphone that has stopped working. */
@media (prefers-reduced-motion: reduce) {
  #prArmBtn[data-state="armed"] .session-btn__lamp {
    animation: none;
    background: var(--sig-red);
    opacity: 0.6;
  }
  .session-page .session-skip,
  .session-room .session-take,
  .session-room .session-btn,
  .session-room .session-badge,
  .session-room .session-talkback,
  .session-room .session-live { transition: none; }
}

/* Knob component (§9.8) — 48px circle, indicator line, ticks, legend above, value beneath. */
.session-view--console #prKnobs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 8px;
  align-items: flex-start;
}

.session-view--console .pr-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 46px;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.session-view--console .pr-knob:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.session-view--console .pr-knob__face {
  display: block;
  width: 48px;
  height: 48px;
}

.session-view--console .pr-knob__circle {
  fill: var(--bg-card-elevated);
  stroke: var(--border-default);
  stroke-width: 2;
}

.session-view--console .pr-knob__tick {
  stroke: var(--console-legend);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.session-view--console .pr-knob__indicator {
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.session-view--console .pr-knob__value {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}

/* Monitor source selector (§9.8) — three segments, same visual pattern as count-in. */
.session-view--console .pr-source-sel {
  display: flex;
  width: 100%;
  margin-top: 4px;
}

.session-view--console .pr-source-sel__seg {
  position: relative;
  flex: 1;
  font-family: var(--f-display);
  font-size: var(--c-btn-legend);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border: 1px solid var(--console-legend);
  border-radius: 3px;
  background: transparent;
  color: var(--console-legend);
  cursor: pointer;
  text-align: center;
  transition: background .12s ease, color .12s ease;
}

.session-view--console .pr-source-sel__seg::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 44px;
}

.session-view--console .pr-source-sel__seg.is-on {
  background: var(--console-legend);
  color: var(--bg-deepest);
}

.session-view--console .pr-source-sel__seg:hover:not(.is-on) {
  border-color: #BCC8C8;
  color: #BCC8C8;
}

/* ---- keymap overlay (§10.1) ---- */

.session-keymap {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 14, 14, 0.72);
  animation: ws-keymap-in 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes ws-keymap-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.session-keymap__panel {
  position: relative;
  max-width: 480px; width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.session-keymap__title {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.session-keymap__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
}

.session-keymap__table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.session-keymap__key {
  width: 120px;
  white-space: nowrap;
  padding-right: 16px;
  color: var(--text-primary);
}

.session-keymap__key kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  line-height: 1.5;
}

.session-keymap__note {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.session-keymap__close {
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  font-size: 1.25rem; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}

.session-keymap__close:hover { color: var(--text-primary); background: var(--bg-surface); }

/* motion: keymap overlay fades instantly under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .session-keymap { animation: none; }
}

/* ------------------------------------------------------- role chooser -- */

.session-role__card {
  max-width: 520px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.session-role__title { margin: 0 0 6px; font-size: 1.35rem; }

.session-role__sub {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.session-role__options { display: grid; gap: 12px; }

.session-role__btn {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.session-role__btn:hover { border-color: var(--border-strong); }

.session-role__btn:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

.session-role__btn-name { font-weight: 700; letter-spacing: 0.01em; }

.session-role__btn-note {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (min-width: 620px) {
  .session-role__options { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   CONSOLE SHELL
   A console is not a page. When the console view is on screen the
   site chrome is removed and the console owns the viewport.
   ============================================================ */
body:has(.session-view--console:not([hidden])) .site-header,
body:has(.session-view--console:not([hidden])) .site-footer {
  display: none;
}

body:has(.session-view--console:not([hidden])) {
  overflow: hidden;
  height: 100vh;
}

body:has(.session-view--console:not([hidden])) .session-room {
  padding-top: 0;
  margin-top: 0;
}

/* The notice is a status line on the panel, not a card floating above it.
   Spec §7: regions are positions, separated by hairlines. */
.session-view--console ~ .session-alerts .session-alert,
body:has(.session-view--console:not([hidden])) .session-alerts .session-alert {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 24px;
  gap: 10px;
  align-items: center;
}

body:has(.session-view--console:not([hidden])) .session-alerts .session-alert__text {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

body:has(.session-view--console:not([hidden])) .session-alerts .session-alert__text b {
  font-size: var(--c-legend);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--console-legend);
  white-space: nowrap;
}

/* The explanatory paragraph is not needed on a console. The legend says it. */
body:has(.session-view--console:not([hidden])) .session-alerts .session-alert__text p {
  font-size: var(--c-take-dur);
  color: var(--console-legend);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The console now owns the viewport, so it is sized from it directly.
   76px is the session bar; 30px is the notice line. */
@media (min-width: 880px) {
  body:has(.session-view--console:not([hidden])) .console-grid {
    height: calc(100vh - 106px);
    max-height: none;
  }
}

/* Row rebalance. STAGE holds a waveform over a reference and was starved at
   9fr; TRANSPORT is buttons and a counter and needs less than it had. */
.session-view--console .console-grid {
  grid-template-rows: 15fr 13fr 10fr 40px;
}

/* ASK is a secondary request, not the subject of the region. */
.session-view--console .session-ask {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-s2);
  margin-top: var(--c-s2);
}

.session-view--console #prAskMore,
.session-view--console #prAskLess {
  flex: 0 0 auto;
  width: auto;
  min-width: 104px;
  padding: 6px 14px;
  font-size: var(--c-btn-legend);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.session-view--console .session-talkback,
.session-view--console .session-talkback__grid {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.session-view--console .console-region--reel {
  display: flex;
  flex-direction: column;
}

.session-view--console .session-reel__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--c-s2);
}

/* The duplicate footer line the reel prints under the list. */
.session-view--console .session-reel__count,
.session-view--console .session-foot-line {
  display: none;
}

/* ---- STAGE: the well fills the region; lanes get honest height ---- */
.session-view--console .console-region--stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-view--console #prStage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.session-view--console .session-stage__lanes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--c-s2);
  min-height: 0;
  padding-block: var(--c-s2);
}

/* The take lane is the subject: it gets the larger share. */
.session-view--console .session-stage__upper {
  flex: 3 1 0;
  min-height: 56px;
  display: flex;
  align-items: stretch;
}

/* The reference lane sits under it, smaller but never collapsed. This is the
   container that was 8.8px holding 33px. */
.session-view--console .session-stage__lower {
  flex: 2 1 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.session-view--console .session-stage__ref-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--c-s2);
}

.session-view--console #prWave,
.session-view--console #prRefWave {
  flex: 1 1 auto;
  min-height: 20px;
}

.session-view--console #prDetail {
  flex: 0 0 auto;
}

/* ---- WINDOW: the meter is what the producer watches ---- */
.session-view--console .console-region--window {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-view--console #prBigMeter {
  flex: 0 0 auto;
  padding-block: var(--c-s3);
}

/* A meter a producer can read across the room, not an 18px strip. */
.session-view--console .console-meter__row {
  height: 46px;
}

.session-view--console .console-meter__ladder {
  height: 46px;
}

.session-view--console .console-meter__clip {
  height: 46px;
  width: 18px;
}

/* ASK is a secondary request. Right-aligned, out of the meter's way. */
.session-view--console #prAskRow {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--c-s2);
}

/* Participant strips take the remaining space and never overflow. */
.session-view--console #prStrips {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.session-view--console .session-strip--empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- REEL: one empty state, optically centred in the column ---- */
.session-view--console #prTakes {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-view--console .session-takes__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--c-s2);
}

/* ---- TALKBACK: a well is sunk into the panel, never a card on top of it ---- */
.session-view--console .console-well--talkgrid {
  background: var(--bg-base);
  border: 0;
  border-radius: var(--c-r-hard);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* ============================================================
   CLIENT CONSOLE DESIGN LANGUAGE
   Extracted from the approved design. One light source, top-left.
   Panel is brushed; regions are modules bolted to it; wells are
   sunk into the modules; caps are turned and seated.
   ============================================================ */

/* The panel — the console's field. Brushed grain at a 4px period. */
.session-view--console .console-grid {
  background-color: #081C1C;
  background-image:
    radial-gradient(150% 130% at 50% -12%, rgba(46,96,94,0.4), rgba(0,0,0,0) 52%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px,
      rgba(0,0,0,0.03) 1px, rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    linear-gradient(#102A2A, #061414);
  box-shadow: inset 0 0 130px rgba(0,0,0,0.6);
}

/* A region is a module bolted onto the panel. */
.session-view--console .console-region {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0) 20%,
                    rgba(0,0,0,0.06) 72%, rgba(0,0,0,0.14)),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.016) 0px, rgba(255,255,255,0.016) 1px,
      rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0) 2px, rgba(0,0,0,0) 3px),
    linear-gradient(150deg, #13302F, #0A1E1E);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -3px 6px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 5px 12px rgba(0,0,0,0.5);
  border-radius: 12px;
  border: 0;
}

/* Wells are sunk into a module: stage, meter housing, glass. */
.session-view--console .console-well,
.session-view--console #prStage,
.session-view--console #prBigMeter {
  background-color: transparent;
  background-image: linear-gradient(#03100F, #061716);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(0,0,0,0.6);
  border-radius: 6px;
  border: 0;
}

/* Region legends are screen-printed onto the module. */
.session-view--console .console-region > .session-lbl,
.session-view--console .console-region > .session-colhead > .session-lbl {
  font-family: Syne, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #8FB0AE;
}

/* Caps — transport, talkback, mark. Turned, seated, matte. */
.session-view--console .session-transport .session-btn,
.session-view--console .session-btn--talkback {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 40% 30%, #2A4544, #132727 62%, #0A1717);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset 0 -4px 8px rgba(0,0,0,0.5);
  border-radius: 9px;
  border: 0;
}

.session-view--console .session-transport .session-btn:active:not(:disabled),
.session-view--console .session-btn--talkback:active:not(:disabled) {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    inset 0 3px 7px rgba(0,0,0,0.75);
  transform: translateY(1px);
}

/* A lit talkback cap. Amber means routed — signal colour, not decoration. */
.session-view--console .session-btn--talkback[aria-pressed="true"] {
  background-image:
    radial-gradient(circle at 40% 30%, #FFD070, #E9A415 58%, #B0740A);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 -4px 8px rgba(0,0,0,0.28);
}

/* ARM — the same cap, safe by default. Red only when it is hot. */
.session-view--console .session-transport .session-btn--arm {
  background-image:
    radial-gradient(circle at 40% 30%, #46292A, #2A1718 62%, #170D0D);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -4px 8px rgba(0,0,0,0.5),
    inset 0 0 0 2px rgba(255,59,48,0.35);
  border-radius: 50%;
}

.session-view--console #prArmBtn[data-state="armed"],
.session-view--console #prArmBtn[data-state="recording"] {
  background-image:
    radial-gradient(circle at 40% 30%, #FF6257, #E02A20 58%, #9E1710);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    inset 0 0 0 2px rgba(255,150,140,0.75);
}

/* Knobs — turned metal, lit from top-left. */
.session-view--console .pr-knob__face {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 38% 30%, #3A4D4C, #243635 40%, #0E1C1C);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.28),
    inset 0 -7px 13px rgba(0,0,0,0.55),
    0 4px 9px rgba(0,0,0,0.6);
  border-radius: 50%;
  border: 0;
}

/* Selector switches sit in a sunk track. */
.session-view--console .pr-source-sel,
.session-view--console .session-count-in {
  background-image: linear-gradient(#03100F, #061716);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
  border-radius: 6px;
}

.session-view--console .pr-source-sel__seg[aria-checked="true"],
.session-view--console .session-count-in__seg[aria-checked="true"] {
  background-image: linear-gradient(#A8B8B8, #7C9090);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 3px rgba(0,0,0,0.5);
  color: #06201F;
}

/* ---- Module fixings. Four countersunk screws per region, as on the
        approved design. Decorative only, never interactive. ---- */
.session-view--console .console-region {
  position: relative;
}

.session-view--console .console-region::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 3px at 11px 11px,
      rgba(0,0,0,0.6) 0 2px, rgba(255,255,255,0.10) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 11px) 11px,
      rgba(0,0,0,0.6) 0 2px, rgba(255,255,255,0.10) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at 11px calc(100% - 11px),
      rgba(0,0,0,0.6) 0 2px, rgba(255,255,255,0.10) 2px 3px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 11px) calc(100% - 11px),
      rgba(0,0,0,0.6) 0 2px, rgba(255,255,255,0.10) 2px 3px, transparent 3px);
}

/* Count-in labels must not wrap. */
.session-view--console .session-count-in__seg {
  min-width: 0;
  white-space: nowrap;
  padding-inline: 10px;
}

/* ---- Count-in: size to content, never shrink. The previous pass set
        min-width: 0, which let the labels collapse and clip. ---- */
.session-view--console .session-count-in {
  flex: 0 0 auto;
  width: auto;
}

.session-view--console .session-count-in__seg {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  padding-inline: 10px;
}

/* ============================================================================
   THE CONTROL ROOM — material skin
   ----------------------------------------------------------------------------
   Ported from the client's approved Claude Design build by complete enumeration
   of its rendered DOM and computed styles (270 elements, every distinct
   gradient / shadow / radius / type value), not by sampling or description.

   Scoped `.session-room .session-view--console` — one class deeper than the
   earlier retrofit rules above, so this wins by specificity instead of order.
   Nothing here touches styles.css, pages.css or index.html.
   ========================================================================== */

.session-room .session-view--console {
  /* chassis */
  --k-panel-a: #13302F;  --k-panel-b: #0A1E1E;
  --k-well-a:  #03100F;  --k-well-b:  #061615;
  /* text ramp — 8 steps, exactly as measured */
  --k-t1: #A0B5B5;  --k-t2: #8FB0AE;  --k-t3: #7A9695;  --k-t4: #86A0A0;   /* raised from the design's #86A0A0: 3.75:1, below the 4.5 floor */
  --k-t5: #5F7A79;  --k-t6: #5A7574;  --k-t7: #4F6A69;  --k-t8: #3F5A59;
  /* signal */
  --k-teal-a: #38E6D0; --k-teal-b: #1FBFA8;

  /* the three material recipes, defined once */
  --k-grain: repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 3px);
  --k-panel-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -3px 6px rgba(0,0,0,.45),
      inset 0 0 0 1px rgba(0,0,0,.5),
      0 5px 12px rgba(0,0,0,.5);
  --k-well-shadow:
      inset 0 2px 6px rgba(0,0,0,.75),
      inset 0 0 0 1px rgba(0,0,0,.6);
}

/* ---- the room itself: a lit chassis, not a page ------------------------- */
.session-room:has(.session-view--console:not([hidden])) {
  background:
    radial-gradient(150% 130% at 50% -12%, rgba(46,96,94,.4), transparent 52%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.03) 1px 2px, transparent 2px 4px),
    linear-gradient(#102A2A, #061414);
  box-shadow: inset 0 0 130px rgba(0,0,0,.6);
  color: var(--k-t1);
  font-family: var(--f-body, "DM Sans"), system-ui, sans-serif;
}

/* ---- geography: fixed, proportional, never scrolls ---------------------- */
.session-room .session-view--console .console-grid {
  display: grid;
  grid-template-columns: 250px minmax(560px, 1fr) 330px;
  /* nine tracks so the centre and right columns can keep their own rhythm
     while sharing one grid — boundaries taken from the target's boxes */
  grid-template-rows: 230fr 10fr 85fr 10fr 200fr 10fr 37fr 10fr 148fr;
  column-gap: 10px;
  row-gap: 0;
  height: calc(100dvh - 74px - 44px - 58px);
  min-height: 640px;
  padding: 0 19px;
  align-items: stretch;
}
.session-room .session-view--console .console-region--reel       { grid-column: 1; grid-row: 1 / 10; }
.session-room .session-view--console .console-region--window     { grid-column: 2; grid-row: 1 / 4; }
.session-room .session-view--console .console-region--stage      { grid-column: 2; grid-row: 5 / 8; }
.session-room .session-view--console .console-region--transport  { grid-column: 2; grid-row: 9; }
.session-room .session-view--console .console-region--talkback   { grid-column: 3; grid-row: 1; }
.session-room .session-view--console .console-region--controls   { grid-column: 3; grid-row: 3 / 6; }
.session-room .session-view--console .console-region--instrument { grid-column: 3; grid-row: 7 / 10; }
.session-room .session-view--console .console-region--note       { display: none; }

/* ---- the panel: brushed, bevelled, screwed down ------------------------- */
.session-room .session-view--console .console-region {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,0) 18%,
                    rgba(0,0,0,.06) 72%, rgba(0,0,0,.14)),
    var(--k-grain),
    linear-gradient(150deg, var(--k-panel-a), var(--k-panel-b));
  border: 0;
  border-radius: 12px;
  box-shadow: var(--k-panel-shadow);
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}
/* two screws per panel, exactly as the target has them */
.session-room .session-view--console .console-region::before,
.session-room .session-view--console .console-region::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4A6362, #0A1717 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35),
              inset 0 -1px 1px rgba(0,0,0,.7);
  pointer-events: none;
  z-index: 2;
}
.session-room .session-view--console .console-region::before { left: 8px; }
.session-room .session-view--console .console-region::after  { right: 8px; }

/* ---- engraved region legends: centred, set into the metal --------------- */
.session-room .session-view--console .console-region > .session-lbl,
.session-room .session-view--console .console-region > .session-colhead > .session-lbl:first-child,
.session-room .session-view--console .console-comp > .session-lbl {
  display: block;
  text-align: center;
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--k-t2);
  text-shadow: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.09);
  padding: 4px 0 2px;
  flex: none;
}
.session-room .session-view--console .console-comp > .session-lbl { letter-spacing: 2.2px; font-size: 11px; }
.session-room .session-view--console .console-region > .session-colhead {
  display: block;
  border: 0;
  padding: 0;
}
.session-room .session-view--console .console-region > .session-colhead > .session-lbl:last-child { display: none; }

/* ---- wells: everything content sits in is recessed ---------------------- */
.session-room .session-view--console .console-well,
.session-room .session-view--console #prTakes,
.session-room .session-view--console .console-comp__grid {
  background: linear-gradient(var(--k-well-a), var(--k-well-b));
  border: 0;
  border-radius: 8px;
  box-shadow: var(--k-well-shadow);
  min-height: 0;
}
.session-room .session-view--console #prTakes {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
}

/* ---- take reel foot ----------------------------------------------------- */
.session-room .session-view--console .session-col__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  border: 0;
  padding: 0;
}
.session-room .session-view--console .session-col__foot .btn-sm {
  flex: 0 0 auto;
  background: linear-gradient(#173534, #0E2322);
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
  color: var(--k-t7);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .51px;
  text-transform: uppercase;
  padding: 3px 8px;
  min-height: 0;
}
.session-room .session-view--console .session-col__foot .btn-sm:disabled { opacity: .55; }
.session-room .session-view--console #prTakeSummary {
  flex: 1 0 100%;
  text-align: center;
  font-size: 11px;
  color: var(--k-t7);
  margin: 0;
}

/* ---- comp plan ---------------------------------------------------------- */
.session-room .session-view--console .console-comp { flex: none; }
.session-room .session-view--console .console-comp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
}
.session-room .session-view--console .console-comp__bar {
  height: 13px;
  background: linear-gradient(#0F2726, #0A1C1C);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

/* ---- THE LOOKING GLASS -------------------------------------------------- */
.session-room .session-view--console .console-region--window { padding-bottom: 8px; }
.session-room .session-view--console #prGlass {
  position: relative;
  flex: 1 1 auto;
  background: radial-gradient(120% 90% at 50% 35%, #0F2A29, #030D0D);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 3px #050F0F,
    inset 0 0 0 4px rgba(255,255,255,.06),
    inset 0 3px 20px rgba(0,0,0,.6),
    inset 0 -30px 60px rgba(0,0,0,.55);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* the sheen on the pane */
.session-room .session-view--console #prGlass::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.05), transparent 22%);
  pointer-events: none;
}
.session-room .session-view--console .console-glass__badge {
  position: absolute;
  top: 11px; left: 12px;
  background: rgba(4,14,14,.5);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--k-t6);
  padding: 4px 8px;
  z-index: 2;
}
.session-room .session-view--console .console-glass__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 420px;
  padding: 0 16px;
}
.session-room .session-view--console .console-glass__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 2px solid #24504E;
  border-radius: 50%;
  color: #3F6A68;
  font-size: 22px;
  margin-bottom: 22px;
}
.session-room .session-view--console .console-glass__head {
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--k-t3);
  margin-bottom: 15px;
}
.session-room .session-view--console .console-glass__body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-t5);
  margin: 0 0 15px;
}
.session-room .session-view--console .console-glass__invite {
  background: linear-gradient(var(--k-teal-a), var(--k-teal-b));
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4);
  color: #052020;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .72px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
}
.session-room .session-view--console .console-glass__invite:hover { filter: brightness(1.06); }
.session-room .session-view--console .console-glass__invite:active { transform: translateY(1px); }
.session-room .session-view--console .console-glass__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* not in the approved design */
.session-room .session-view--console #prAskRow,
.session-room .session-view--console .console-ask { display: none; }
.session-room .session-view--console #prStrips {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
}

/* ---- THE STAGE ---------------------------------------------------------- */
.session-room .session-view--console #prStage {
  flex: 1 1 auto;
  background: linear-gradient(#03100F, #061716);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.6);
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
.session-room .session-view--console .session-ruler,
.session-room .session-view--console #prRuler {
  font-size: 8.5px;
  letter-spacing: .68px;
  color: var(--k-t8);
  border: 0;
}
.session-room .session-view--console .session-wave__empty p,
.session-room .session-view--console #prWaveEmpty p {
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--k-t7);
}
.session-room .session-view--console .session-wave__empty svg { display: none; }
.session-room .session-view--console #prDetail {
  flex: none;
  font-size: 11px;
  color: var(--k-t7);
  border: 0;
  background: none;
  padding: 0;
}

/* ---- TRANSPORT: machined caps ------------------------------------------- */
.session-room .session-view--console .session-transport {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  background: none;
  min-height: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.session-room .session-view--console .session-btn-group {
  display: flex;
  flex-direction: column-reverse;   /* legend under the cap, as on real gear */
  align-items: center;
  gap: 4px;
  flex: none;
}
.session-room .session-view--console .session-btn-legend {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--k-t4);
  order: 2;
}
.session-room .session-view--console .session-transport .session-btn {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 9px;
  background: radial-gradient(circle at 40% 30%, #2A4544, #132727 62%, #0A1717);
  box-shadow:
    0 4px 8px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 -4px 8px rgba(0,0,0,.5);
  color: var(--k-t3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.session-room .session-view--console .session-transport .session-btn svg { width: 17px; height: 17px; }
.session-room .session-view--console .session-transport .session-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 3px rgba(0,0,0,.55),
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 -1px 1px rgba(255,255,255,.08);
}
/* ARM: bigger, darker, and unmistakably not the others */
.session-room .session-view--console .session-transport .session-btn--arm {
  width: 50px; height: 50px;
  border-radius: 10px;
  background: radial-gradient(circle at 40% 30%, #3A1615, #280D0C 62%, #180605);
  box-shadow:
    0 4px 9px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.1),
    inset 0 -4px 8px rgba(0,0,0,.55);
}
.session-room .session-view--console .session-btn__lamp {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #6A2B27, #4A1A17 60%, #320F0D);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15);
  opacity: .5;
}
/* armed blinks, rolling is steady — the tape-machine convention */
.session-room .session-view--console #prArmBtn[data-state="armed"] .session-btn__lamp {
  opacity: 1;
  background: radial-gradient(circle at 40% 32%, #FF6A5E, #E0342A 60%, #9C1D16);
  animation: k-arm-blink 1s steps(1, end) infinite;
}
.session-room .session-view--console #prArmBtn[data-state="recording"] .session-btn__lamp {
  opacity: 1;
  background: radial-gradient(circle at 40% 32%, #FF6A5E, #E0342A 60%, #9C1D16);
  animation: none;
}
@keyframes k-arm-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: .28 } }
@media (prefers-reduced-motion: reduce) {
  .session-room .session-view--console #prArmBtn[data-state="armed"] .session-btn__lamp { animation: none; }
}

/* count-in, tempo, click */
.session-room .session-view--console .session-count-in {
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none;
}
.session-room .session-view--console .session-count-in__seg {
  background: linear-gradient(#0E2322, #0A1A19);
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  color: var(--k-t5);
  font-size: 8.5px;
  letter-spacing: .51px;
  padding: 4px 7px;
  cursor: pointer;
}
.session-room .session-view--console .session-count-in__seg[aria-checked="true"] {
  color: var(--k-t1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(56,230,208,.25);
}
.session-room .session-view--console .session-tempo {
  display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none;
}
.session-room .session-view--console .session-tempo .session-lbl {
  font-size: 9px; letter-spacing: .9px; text-transform: uppercase; color: var(--k-t4);
}
.session-room .session-view--console .session-tempo__value {
  width: 56px; height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(#03100F, #0A1E1D);
  border-radius: 5px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}
.session-room .session-view--console .session-tempo__value b {
  font-size: 13px; font-weight: 700; color: var(--k-t3);
  font-variant-numeric: tabular-nums lining-nums;
}
.session-room .session-view--console .session-tempo__value u {
  text-decoration: none; font-size: 9px; letter-spacing: .5px; color: var(--k-t7);
}
.session-room .session-view--console .session-click {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none;
}
.session-room .session-view--console .session-btn--click {
  width: 36px; height: 36px;
  border: 2px solid #274746;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--k-t5);
  font-size: 15px;
  display: grid; place-items: center;
  cursor: pointer;
}
.session-room .session-view--console .session-btn--click[aria-pressed="true"] {
  border-color: rgba(56,230,208,.5);
  color: var(--k-teal-a);
}

/* the counter — the one piece of real display type */
.session-room .session-view--console #prElapsed {
  margin-left: auto;
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--k-t5);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  flex: none;
}
.session-room .session-view--console #prElapsed .session-time__tenths { font-size: .62em; }
.session-room .session-view--console #prDuration {
  font-size: 11px; color: var(--k-t8); flex: none;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- TALKBACK & CUE: lit lenses ---------------------------------------- */
.session-room .session-view--console .console-well--talkgrid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 10px;
  place-items: center;
  background: none;
  box-shadow: none;
}
.session-room .session-view--console .console-well--talkgrid .session-btn-group {
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.session-room .session-view--console .console-well--talkgrid .session-btn-legend {
  order: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .54px;
  color: var(--k-t2);
}
.session-room .session-view--console .session-btn--talkback {
  position: relative;
  width: 100%;
  max-width: 58px;
  height: 46px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(#0E2322, #071616);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* the lens */
.session-room .session-view--console .session-btn--talkback::before {
  content: "";
  width: 38px; height: 28px;
  border-radius: 5px;
  background: radial-gradient(circle at 42% 30%, #1C3A39, #0A1C1C);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.05);
  transition: background .12s ease, box-shadow .12s ease;
}
/* the indicator LED under it */
.session-room .session-view--console .session-btn--talkback::after {
  content: "";
  position: absolute;
  bottom: -11px; left: 50%; translate: -50% 0;
  width: 14px; height: 5px;
  border-radius: 2px;
  background: #122726;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::before,
.session-room .session-view--console .session-btn--talkback.is-on::before,
.session-room .session-view--console .session-btn--talkback.is-lit::before {
  background: radial-gradient(circle at 42% 30%, #4FE9D3, #16988A);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 10px rgba(56,230,208,.35);
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::after,
.session-room .session-view--console .session-btn--talkback.is-on::after,
.session-room .session-view--console .session-btn--talkback.is-lit::after {
  background: var(--k-teal-a);
  box-shadow: 0 0 6px rgba(56,230,208,.6);
}
.session-room .session-view--console .session-btn--talkback.is-latched::after {
  background: #F2A63B;
  box-shadow: 0 0 6px rgba(242,166,59,.6);
}
.session-room .session-view--console .session-talkback__notice {
  flex: none;
  text-align: center;
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--k-t6);
  margin: 0;
  padding-top: 6px;
}

/* ---- CONTROLS: turned aluminium ---------------------------------------- */
.session-room .session-view--console #prKnobs {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 10px 8px;
  padding: 8px 10px 0;
  place-items: center;
  align-content: start;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.session-room .session-view--console .pr-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: ns-resize;
}
.session-room .session-view--console .pr-knob .session-btn-legend {
  order: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .54px;
  color: var(--k-t2);
}
/* the cap: one radial gradient doing all the metal */
.session-room .session-view--console .pr-knob__face {
  width: 52px; height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 27%,
      #EEF6F4 0%, #A6C0BE 15%, #5A7574 36%, #2A3D3D 62%, #16292A 84%, #0C1C1C 100%);
  box-shadow:
    0 4px 8px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -3px 6px rgba(0,0,0,.5),
    /* the seating ring the cap sits in */
    0 0 0 2px #08191A,
    0 0 0 6px #0A1A1A;
  overflow: visible;
}
.session-room .session-view--console .pr-knob__circle { fill: none; stroke: none; }
.session-room .session-view--console .pr-knob__tick { stroke: rgba(0,0,0,.35); stroke-width: 2; }
.session-room .session-view--console .pr-knob__indicator {
  stroke: #0A1A1A;
  stroke-width: 5;
  stroke-linecap: round;
}
.session-room .session-view--console .pr-knob__value {
  font-size: 11px;
  color: var(--k-t5);
  font-variant-numeric: tabular-nums lining-nums;
}
.session-room .session-view--console .pr-knob:focus-visible .pr-knob__face {
  outline: 2px solid var(--k-teal-a);
  outline-offset: 6px;
}
/* monitor source: one recessed strip, three segments */
.session-room .session-view--console .pr-source-sel {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  overflow: hidden;
  margin-top: 2px;
}
.session-room .session-view--console .pr-source-sel__seg {
  background: linear-gradient(#0E2322, #0A1A19);
  border: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  color: var(--k-t3);
  font-size: 11px;
  letter-spacing: .5px;
  padding: 6px 0;
  cursor: pointer;
}
.session-room .session-view--console .pr-source-sel__seg[aria-checked="true"] {
  background: linear-gradient(#1B4340, #123230);
  color: #CFEFE9;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(56,230,208,.22);
}
.session-room .session-view--console .session-controls__note {
  flex: none;
  text-align: center;
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--k-t6);
  margin: 0;
  padding-top: 4px;
}

/* ---- THE INSTRUMENT: the timing certificate ---------------------------- */
.session-room .session-view--console .console-region--instrument {
  display: grid;
  grid-template-columns: 1fr 96px;
  grid-template-rows: auto 1fr;
  gap: 0 10px;
  align-content: start;
}
.session-room .session-view--console .console-region--instrument > .session-lbl {
  grid-column: 1 / -1;
  letter-spacing: 2.2px;
}
.session-room .session-view--console .console-table-scroll {
  grid-column: 1;
  overflow: hidden;
  min-height: 0;
}
.session-room .session-view--console .console-table { width: 100%; border-collapse: collapse; }
.session-room .session-view--console .console-table tr { border-bottom: 1px solid rgba(0,0,0,.35); }
.session-room .session-view--console .console-table__label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--k-t2);
  padding: 4px 0;
}
.session-room .session-view--console .console-table__value {
  text-align: right;
  font-size: 13px;
  color: var(--k-t1);
  font-variant-numeric: tabular-nums lining-nums;
  padding: 4px 4px 4px 0;
}
.session-room .session-view--console .console-table__unit {
  font-size: 9px;
  color: var(--k-t7);
  text-align: left;
  width: 34px;
  padding: 4px 0;
}
.session-room .session-view--console #prTimingNote { display: none; }
/* the lamp that says the take is provable */
.session-room .session-view--console .console-cert {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 8px;
}
.session-room .session-view--console .console-cert__lamp {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #2A4D34, #1C3524 40%, #0D1C12);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.18),
    inset 0 -8px 15px rgba(0,0,0,.5),
    0 4px 9px rgba(0,0,0,.55);
  flex: none;
}
.session-room .session-view--console .console-cert.is-certified .console-cert__lamp {
  background: radial-gradient(circle at 38% 30%, #7DF29A, #3FCF5C 40%, #1B7A32);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.35),
    inset 0 -8px 15px rgba(0,0,0,.35),
    0 4px 9px rgba(0,0,0,.55),
    0 0 22px rgba(63,207,92,.4);
}
.session-room .session-view--console .console-cert__head,
.session-room .session-view--console .console-cert__sub {
  font-size: 9px;
  letter-spacing: .72px;
  text-transform: uppercase;
  color: var(--k-t6);
  font-weight: 400;
  line-height: 1.35;
}
.session-room .session-view--console .console-cert__head { color: var(--k-t2); }

/* ---- the session bar becomes the console's top plate ------------------- */
.session-room:has(.session-view--console:not([hidden])) .session-bar {
  margin: 19px 19px 10px;
  padding: 0 16px;
  height: 74px;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,0) 22%,
                    rgba(0,0,0,.06) 72%, rgba(0,0,0,.14)),
    var(--k-grain, repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 3px)),
    linear-gradient(150deg, #13302F, #0A1E1E);
  border: 0;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 5px 12px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.session-room:has(.session-view--console:not([hidden])) .session-bar::before,
.session-room:has(.session-view--console:not([hidden])) .session-bar::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4A6362, #0A1717 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.7);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar::before { top: 8px; }
.session-room:has(.session-view--console:not([hidden])) .session-bar::after  { bottom: 8px; }
.session-room:has(.session-view--console:not([hidden])) .session-bar__meta,
.session-room:has(.session-view--console:not([hidden])) .session-bar__counter .session-lbl {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--k-t4);
  text-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__time,
.session-room:has(.session-view--console:not([hidden])) .session-bar__name {
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--k-t5);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__name { font-size: 15px; }
.session-room:has(.session-view--console:not([hidden])) .session-bar__standby {
  margin-left: auto;
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.32px;
  color: var(--k-t5);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__lamp {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #3A4D4C, #243635 40%, #0E1C1C);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.28),
    inset 0 -7px 13px rgba(0,0,0,.55),
    0 4px 9px rgba(0,0,0,.6);
  flex: none;
}
.session-room:has(.session-view--console:not([hidden])) .session-bar.is-live .session-bar__lamp {
  background: radial-gradient(circle at 38% 30%, #FF8E84, #FF3B30 40%, #8E1710);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.4),
    inset 0 -7px 13px rgba(0,0,0,.35),
    0 4px 9px rgba(0,0,0,.6),
    0 0 26px rgba(255,59,48,.45);
}

/* ---- the note line: the running truth, along the bottom edge ----------- */
.session-room:has(.session-view--console:not([hidden])) .session-note,
.session-room .session-view--console .session-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 19px 19px;
  height: 44px;
  padding: 0 18px;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.014) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 3px),
    linear-gradient(150deg, #11302F, #0A1C1C);
  border: 0;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.45);
  font-size: 11px;
  color: var(--k-t3);
}
.session-room .session-view--console .session-note::after {
  content: "WORLDSONG · CONTROL ROOM";
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 1.26px;
  color: var(--k-t6);
}

/* ---- 1280×800 still holds ---------------------------------------------- */
@media (max-width: 1360px) {
  .session-room .session-view--console .console-grid {
    grid-template-columns: 220px minmax(480px, 1fr) 300px;
    padding: 0 14px;
  }
  .session-room .session-view--console #prElapsed { font-size: 30px; }
  .session-room .session-view--console .session-transport { gap: 9px; padding: 0 10px; }
}

/* ---- pass 2: make it hold the viewport without scrolling ---------------- */
/* The console is an instrument face: it fills the screen exactly once and the
   only thing that scrolls is the take reel. Everything below fixes the
   overflow that pass 1 left. */
.session-room:has(.session-view--console:not([hidden])) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  max-width: none;
}
/* the alert stack is a web-page idiom; the note line carries this now */
.session-room:has(.session-view--console:not([hidden])) .session-alerts { display: none; }
.session-room:has(.session-view--console:not([hidden])) .session-bar { flex: none; }

.session-room .session-view--console {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
.session-room .session-view--console .console-grid {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  grid-template-rows: 230fr 10fr 85fr 10fr 200fr 10fr 37fr 10fr 148fr auto;
}
/* the note line belongs to the bottom edge, full width */
.session-room .session-view--console .console-region--note {
  display: block;
  grid-column: 1 / -1;
  grid-row: 10;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0 0;
  overflow: visible;
}
.session-room .session-view--console .console-region--note::before,
.session-room .session-view--console .console-region--note::after { display: none; }
.session-room .session-view--console .session-note {
  margin: 0 0 19px;
}

/* every region must contain its own content, never push the grid */
.session-room .session-view--console .console-region > * { min-height: 0; }

/* take reel: the one thing that scrolls */
.session-room .session-view--console .console-region--reel { overflow: hidden; }
.session-room .session-view--console #prTakes { flex: 1 1 auto; overflow-y: auto; }
.session-room .session-view--console .session-takes__empty,
.session-room .session-view--console .session-reel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  text-align: center;
  padding: 12px;
}
.session-room .session-view--console .session-takes__empty b,
.session-room .session-view--console .session-reel__empty b {
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--k-t3);
  letter-spacing: normal;
  text-transform: none;
}
.session-room .session-view--console .session-takes__empty p,
.session-room .session-view--console .session-reel__empty p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--k-t7);
  margin: 0;
}

/* the glass is the ground of its region, not a strip in it */
.session-room .session-view--console .console-region--window {
  display: flex;
  flex-direction: column;
}
.session-room .session-view--console #prGlass { flex: 1 1 auto; min-height: 0; }
/* nobody has joined → the glass says so. A second empty state is noise. */
.session-room .session-view--console .session-strip--empty,
.session-room .session-view--console #prStrips:empty { display: none; }
.session-room .session-view--console #prStrips:not(:empty) { padding-top: 6px; }

/* stage: lanes must fit the well */
.session-room .session-view--console #prStage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.session-room .session-view--console .session-stage__lanes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.session-room .session-view--console .session-stage__upper { flex: 1 1 auto; min-height: 0; }
.session-room .session-view--console .session-stage__lower { flex: none; }
.session-room .session-view--console .session-stage__ref-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 8.5px; letter-spacing: .68px; color: var(--k-t8);
}
.session-room .session-view--console .session-stage__ref-load {
  margin-left: auto;
  background: linear-gradient(#173534, #0E2322);
  border: 0; border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
  color: var(--k-t7); font-size: 8.5px; letter-spacing: .51px;
  padding: 3px 8px; cursor: pointer;
}
.session-room .session-view--console #prRefWave { flex: none; height: 34px; }
.session-room .session-view--console #prDetail { padding-top: 2px; }

/* transport must never clip a control */
.session-room .session-view--console .console-region--transport { overflow: visible; }
.session-room .session-view--console .session-transport { overflow: visible; }

/* the instrument table has to show all eight rows */
.session-room .session-view--console .console-table__label,
.session-room .session-view--console .console-table__value,
.session-room .session-view--console .console-table__unit { padding-block: 2px; }
.session-room .session-view--console .console-table__label { font-size: 10.5px; }
.session-room .session-view--console .console-table__value { font-size: 12px; }
.session-room .session-view--console .console-cert__lamp { width: 60px; height: 60px; }

/* knobs: the sixth one must not wrap its legend */
.session-room .session-view--console .pr-knob .session-btn-legend { white-space: nowrap; }
.session-room .session-view--console #prKnobs { gap: 6px 6px; padding: 6px 8px 0; }
.session-room .session-view--console .pr-knob__face { width: 46px; height: 46px; }

/* talkback lens sized to its cap */
.session-room .session-view--console .session-btn--talkback { height: 42px; }
.session-room .session-view--console .session-btn--talkback::before { width: 34px; height: 24px; }
.session-room .session-view--console .console-well--talkgrid { gap: 12px 8px; padding: 8px 10px 12px; }

/* ---- pass 3: measured corrections -------------------------------------- */
/* Every value below comes from probing the live DOM, not from guessing:
   the reel's empty state uses .empty__title/.empty__sub, and the instrument
   table needed 200px of rows in a 146px slot. */

/* take reel empty state */
.session-room .session-view--console #prTakes .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  text-align: center;
  padding: 12px;
}
.session-room .session-view--console #prTakes .empty svg {
  width: 26px; height: 26px;
  color: #2F4F4E;
  flex: none;
}
.session-room .session-view--console #prTakes .empty__title {
  font-family: var(--f-display, "Syne"), sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--k-t3);
}
.session-room .session-view--console #prTakes .empty__sub {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--k-t7);
  margin: 0;
  max-width: 180px;
}

/* the instrument: eight rows have to fit, so the rows get tighter — not the
   readouts smaller than legible. 8 × 16px = 128px into a 146px slot. */
.session-room .session-view--console .console-table-scroll { overflow: hidden; }
.session-room .session-view--console .console-table tr { border-bottom: 1px solid rgba(0,0,0,.3); }
.session-room .session-view--console .console-table__label,
.session-room .session-view--console .console-table__value,
.session-room .session-view--console .console-table__unit {
  padding-block: 0;
  line-height: 1.55;
}
.session-room .session-view--console .console-table__label { font-size: 10px; }
.session-room .session-view--console .console-table__value { font-size: 11.5px; }
.session-room .session-view--console .console-table__unit  { font-size: 8.5px; width: 30px; }
.session-room .session-view--console .console-cert { gap: 6px; padding-top: 4px; }
.session-room .session-view--console .console-cert__lamp { width: 54px; height: 54px; }
.session-room .session-view--console .console-cert__head,
.session-room .session-view--console .console-cert__sub { font-size: 8.5px; letter-spacing: .6px; }

/* count-in reads as one switch, not a stack */
.session-room .session-view--console .session-count-in {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  gap: 3px 4px;
  align-items: center;
  justify-items: center;
}
.session-room .session-view--console .session-count-in__legend {
  grid-column: 1 / -1;
  order: 0;
  font-size: 8px;
  letter-spacing: .8px;
  color: var(--k-t4);
}

/* the talkback LEDs sit proud of their caps — give the notice room to clear */
.session-room .session-view--console .console-well--talkgrid {
  gap: 18px 8px;
  padding: 8px 10px 16px;
}
.session-room .session-view--console .session-talkback__notice { padding-top: 2px; }

/* the region legend the client's design uses */
/* the reel legend now reads "Take Reel" in the markup itself — no CSS trick */

/* ---- pass 4: the last two, both measured ------------------------------- */
/* Instrument rows measured at 24.5px each — 8 rows = 196px in a 146px slot.
   The cells were 15.5px; the extra came from the row box, so the row is
   pinned directly. 8 × 17px = 136px, which fits with room to spare. */
.session-room .session-view--console .console-table { table-layout: fixed; }
.session-room .session-view--console .console-table tr { height: 17px; }
.session-room .session-view--console .console-table th,
.session-room .session-view--console .console-table td {
  height: 17px;
  padding: 0;
  line-height: 16px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-room .session-view--console .console-table__value { padding-right: 4px; }

/* The talkback LEDs sit below their caps, so the cap needs to reserve that
   space in the grid — otherwise the last row's LED lands on the notice.
   Measured overlap was 17px. */
.session-room .session-view--console .console-well--talkgrid {
  gap: 8px;
  padding: 8px 10px;
  align-content: start;
  grid-auto-rows: auto;
}
.session-room .session-view--console .session-btn--talkback {
  height: 38px;
  margin-bottom: 12px;
}
.session-room .session-view--console .session-btn--talkback::after { bottom: -9px; }
.session-room .session-view--console .console-well--talkgrid .session-btn-group { gap: 4px; }
.session-room .session-view--console .session-talkback__notice { padding-top: 0; }

/* ---- pass 5: the two root causes --------------------------------------- */
/* 1. The instrument's <th> also carries .session-lbl, which sets
      display:inline-block. That takes it out of table layout and inflated
      every row to 24.5px against a 17px cell. Put it back in the table. */
.session-room .session-view--console .console-table th.console-table__label {
  display: table-cell;
}
/* 2. The talkback grid was overflowing its own box, so the bottom row's LED
      landed on the notice. Size the rows explicitly and let them breathe. */
.session-room .session-view--console .console-well--talkgrid {
  grid-template-rows: repeat(2, 1fr);
  align-content: stretch;
  gap: 6px 8px;
  padding: 6px 10px;
}
.session-room .session-view--console .console-well--talkgrid .session-btn-group {
  justify-content: flex-start;
  height: 100%;
}
.session-room .session-view--console .console-well--talkgrid .session-btn-legend { font-size: 11px; }
.session-room .session-view--console .session-btn--talkback {
  height: 36px;
  margin-bottom: 13px;
}

/* ---- the 1280×800 tier -------------------------------------------------- */
/* The brief says the console must hold at 1280×800. At that height the three
   right-hand panels lose ~90px between them, and at pass 5 the talkback and
   controls footnotes were overlapping their own wells. Nothing here changes
   the design language — the same parts, machined smaller. */
.session-room .session-view--console .console-well--talkgrid,
.session-room .session-view--console #prKnobs { min-height: 0; overflow: hidden; }

@media (max-height: 880px) {
  .session-room .session-view--console .console-region { padding: 6px 8px 8px; gap: 4px; }
  .session-room .session-view--console .console-region > .session-lbl,
  .session-room .session-view--console .console-region > .session-colhead > .session-lbl:first-child {
    font-size: 11px; letter-spacing: 2px; padding: 2px 0 0;
  }

  /* talkback */
  .session-room .session-view--console .console-well--talkgrid { gap: 4px 8px; padding: 4px 8px; }
  .session-room .session-view--console .console-well--talkgrid .session-btn-legend { font-size: 10px; }
  .session-room .session-view--console .session-btn--talkback { height: 30px; margin-bottom: 10px; }
  .session-room .session-view--console .session-btn--talkback::before { width: 30px; height: 20px; }
  .session-room .session-view--console .session-btn--talkback::after { bottom: -8px; width: 12px; }
  .session-room .session-view--console .session-talkback__notice { font-size: 9px; letter-spacing: .6px; }

  /* controls */
  .session-room .session-view--console #prKnobs { gap: 3px 6px; padding: 4px 8px 0; }
  .session-room .session-view--console .pr-knob { gap: 3px; }
  .session-room .session-view--console .pr-knob__face { width: 40px; height: 40px; }
  .session-room .session-view--console .pr-knob .session-btn-legend { font-size: 10px; }
  .session-room .session-view--console .pr-knob__value { font-size: 10px; }
  .session-room .session-view--console .pr-source-sel__seg { font-size: 10px; padding: 4px 0; }
  .session-room .session-view--console .session-controls__note { font-size: 9px; letter-spacing: .6px; }

  /* instrument */
  .session-room .session-view--console .console-table tr,
  .session-room .session-view--console .console-table th,
  .session-room .session-view--console .console-table td { height: 15px; line-height: 14px; }
  .session-room .session-view--console .console-table__label { font-size: 9.5px; }
  .session-room .session-view--console .console-table__value { font-size: 11px; }
  .session-room .session-view--console .console-cert__lamp { width: 44px; height: 44px; }
  .session-room .session-view--console .console-cert__head,
  .session-room .session-view--console .console-cert__sub { font-size: 8px; }

  /* glass + transport */
  .session-room .session-view--console .console-glass__icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 14px; }
  .session-room .session-view--console .console-glass__head { font-size: 19px; margin-bottom: 10px; }
  .session-room .session-view--console .console-glass__body { font-size: 11px; margin-bottom: 12px; }
  .session-room .session-view--console .console-glass__invite { padding: 10px 18px; }
  .session-room .session-view--console .session-transport .session-btn { width: 40px; height: 40px; }
  .session-room .session-view--console .session-transport .session-btn--arm { width: 44px; height: 44px; }
  .session-room .session-view--console #prElapsed { font-size: 30px; }

  /* stage: the reference header must not sit on the empty state */
  .session-room .session-view--console #prRefWave { height: 26px; }
  .session-room .session-view--console #prDetail { font-size: 10px; }
}

/* ============================================================================
   MATERIAL LIFT — toward the client's reference render
   ----------------------------------------------------------------------------
   The exported HTML was a dark build of the same design; the reference render
   ("worldsong refrence data for claude design") shows the intended material:
   brushed steel with HORIZONTAL grain, noticeably lighter, with brighter
   chrome on every control.

   The whole text ramp is lifted with the panel so nothing loses contrast.
   Every pairing below was computed against #1E403E, not eyeballed:
     #9DB8B6 5.36:1 · #B4CCCA 6.69:1 · #CFE4E2 8.53:1   (floor is 4.5:1)
   ========================================================================== */
.session-room .session-view--console {
  --k-panel-a: #1E403E;
  --k-panel-b: #143230;
  /* lifted ramp — panel-borne text starts at --k-t6 and never goes darker */
  --k-t1: #CFE4E2;
  --k-t2: #B4CCCA;
  --k-t3: #B4CCCA;
  --k-t4: #9DB8B6;
  --k-t5: #9DB8B6;
  --k-t6: #9DB8B6;
  --k-t7: #7F9C9A;   /* only ever on a near-black well */
  --k-t8: #6E8B8A;   /* bar ruler, inside the stage well */

  /* brushed steel: the grain runs horizontally, the way a panel is linished */
  --k-grain: repeating-linear-gradient(0deg,
      rgba(255,255,255,.035) 0 1px,
      rgba(0,0,0,.045) 1px 2px,
      rgba(255,255,255,0) 2px 4px);
}

/* the panel itself: stronger top bevel, deeper seat, visible brushing */
.session-room .session-view--console .console-region,
.session-room:has(.session-view--console:not([hidden])) .session-bar {
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,0) 16%,
                    rgba(0,0,0,.10) 70%, rgba(0,0,0,.24)),
    var(--k-grain),
    linear-gradient(150deg, #24504D, #12302E);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 7px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.55);
}

/* the room behind it lifts a little too, or the panels float in a void */
.session-room:has(.session-view--console:not([hidden])) {
  background:
    radial-gradient(150% 130% at 50% -12%, rgba(70,132,128,.38), transparent 54%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.03) 1px 2px, transparent 2px 4px),
    linear-gradient(#173B3A, #0A1E1E);
}

/* engraved legends read brighter on brighter metal */
.session-room .session-view--console .console-region > .session-lbl,
.session-room .session-view--console .console-region > .session-colhead > .session-lbl:first-child,
.session-room .session-view--console .console-comp > .session-lbl {
  color: var(--k-t2);
  text-shadow: 0 -1px 0 rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.14);
}

/* screws catch more light on a lighter panel */
.session-room .session-view--console .console-region::before,
.session-room .session-view--console .console-region::after,
.session-room:has(.session-view--console:not([hidden])) .session-bar::before,
.session-room:has(.session-view--console:not([hidden])) .session-bar::after {
  background: radial-gradient(circle at 38% 32%, #8FA9A7, #16302F 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.75);
}

/* ---- chrome: knobs, caps and lenses all come up a stop ------------------ */
.session-room .session-view--console .pr-knob__face {
  background:
    radial-gradient(circle at 37% 27%,
      #FFFFFF 0%, #D3E2E0 12%, #93AFAD 34%, #4E6B6A 60%, #29403F 84%, #16292A 100%);
  box-shadow:
    0 5px 10px rgba(0,0,0,.6),
    inset 0 1px 2px rgba(255,255,255,.85),
    inset 0 -4px 8px rgba(0,0,0,.5),
    /* knurled seating ring */
    0 0 0 2px #16302F,
    0 0 0 4px #2E5654,
    0 0 0 6px #14302E;
}
.session-room .session-view--console .pr-knob__indicator { stroke: #14302E; stroke-width: 5.5; }

.session-room .session-view--console .session-transport .session-btn {
  background: radial-gradient(circle at 40% 28%, #567E7C, #24403F 62%, #142827);
  box-shadow:
    0 5px 10px rgba(0,0,0,.55),
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -4px 8px rgba(0,0,0,.5);
  color: #E4F2F0;
}
.session-room .session-view--console .session-transport .session-btn--arm {
  background: radial-gradient(circle at 40% 28%, #6E2723, #3D1512 62%, #200907);
}

.session-room .session-view--console .session-btn--talkback {
  background: linear-gradient(#204644, #12302E);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.session-room .session-view--console .session-btn--talkback::before {
  background: radial-gradient(circle at 42% 30%, #3E6664, #16302F);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.12);
}

.session-room .session-view--console .pr-source-sel__seg {
  background: linear-gradient(#204644, #163634);
  color: var(--k-t2);
}
.session-room .session-view--console .session-count-in__seg {
  background: linear-gradient(#204644, #163634);
  color: var(--k-t3);
}
.session-room .session-view--console .session-col__foot .btn-sm,
.session-room .session-view--console .session-stage__ref-load {
  background: linear-gradient(#2B5557, #1A3C3A);
  color: var(--k-t2);
}
.session-room .session-view--console .console-comp__bar {
  background: linear-gradient(#1B403E, #12302E);
}

/* ---- lit-lamp caps, read from the reference at native resolution -------- */
/* The single biggest read error in my port: I made the unlit lenses dark, so
   the console looked dead. In the reference they are pale grey translucent
   caps with a specular sheen — an unlit lamp, not an empty hole — and each
   carries a small red LED beneath it. That is why it reads as a powered
   instrument even with nothing engaged. */
.session-room .session-view--console .session-btn--talkback {
  background: linear-gradient(#16332F, #0C1F1D);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.06);
}
.session-room .session-view--console .session-btn--talkback::before {
  background:
    linear-gradient(#D8DEDC 0%, #AEB8B6 42%, #7E8A88 62%, #99A4A2 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.55);
  transition: background .12s ease, box-shadow .12s ease;
}
/* the LED under each cap: red, and always present */
.session-room .session-view--console .session-btn--talkback::after {
  background: linear-gradient(#8E1F18, #5A120D);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
/* engaged: the cap itself lights */
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::before,
.session-room .session-view--console .session-btn--talkback.is-on::before,
.session-room .session-view--console .session-btn--talkback.is-lit::before {
  background: linear-gradient(#8FFFF0 0%, #35E7D2 45%, #12BCA8 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.85),
    inset 0 -2px 5px rgba(0,0,0,.2),
    0 0 14px rgba(56,230,208,.65);
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::after,
.session-room .session-view--console .session-btn--talkback.is-on::after,
.session-room .session-view--console .session-btn--talkback.is-lit::after {
  background: linear-gradient(#FF6A5E, #E0342A);
  box-shadow: 0 0 7px rgba(224,52,42,.85);
}
/* AUTOMUTE is a safety state, so it lights red rather than teal */
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]::before {
  background: linear-gradient(#FF9A90 0%, #FF4438 45%, #C21D12 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.75),
    inset 0 -2px 5px rgba(0,0,0,.25),
    0 0 14px rgba(255,68,56,.6);
}

/* transport caps get the same pale-metal treatment as the reference */
.session-room .session-view--console .session-transport .session-btn {
  background: linear-gradient(#6F7D7B 0%, #4A5755 42%, #33403E 62%, #46534F 100%);
}

/* ARM must stay red — the pale-metal cap rule above is for the grey caps only.
   Order matters here: this has to come after it. */
.session-room .session-view--console .session-transport .session-btn--arm {
  background: radial-gradient(circle at 40% 28%, #7A2B26, #431714 62%, #230A08);
  box-shadow:
    0 5px 10px rgba(0,0,0,.6),
    inset 0 1px 2px rgba(255,255,255,.22),
    inset 0 -4px 8px rgba(0,0,0,.55);
}
.session-room .session-view--console .session-btn--click { background: none; }


/* ============================================================================
   ANISOTROPIC GRAIN + SHARP SPECULAR
   ----------------------------------------------------------------------------
   Two findings drove this pass:

   1. `feTurbulence` baseFrequency takes TWO values (x y). Splitting them —
      0.92 on x, 0.015 on y — produces real directional brushing. The
      repeating-linear-gradient I had reads as stripes, not linished metal.

   2. Convincing metal needs a NARROW near-white specular band inside a soft
      ambient gradient. Every gradient here was soft, which is why it read as
      tinted plastic.

   The noise is baked into a cached background-image data-URI rather than a
   live `filter:` — a live SVG filter re-runs its whole graph on any change to
   the element or its children, which on a full-screen console that repaints a
   meter and a counter would be paid continuously.
   ========================================================================== */
.session-room .session-view--console {
  --k-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.92%200.015%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E");
  --k-grain-fine: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.4%200.03%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.42%27%2F%3E%3C%2Fsvg%3E");
}

.session-room .session-view--console .console-region,
.session-room:has(.session-view--console:not([hidden])) .session-bar {
  background:
    /* sharp specular: a narrow bright band, not a soft wash */
    linear-gradient(100deg,
      transparent 38%, rgba(255,255,255,.14) 47%,
      rgba(255,255,255,.16) 49%, transparent 58%),
    linear-gradient(rgba(255,255,255,.11), rgba(255,255,255,0) 14%,
                    rgba(0,0,0,.10) 68%, rgba(0,0,0,.26)),
    var(--k-grain),
    linear-gradient(150deg, #24504D, #12302E);
  background-blend-mode: normal, normal, overlay, normal;
}

/* knobs: conic knurling on the rim, sharp specular arc on the cap */
.session-room .session-view--console .pr-knob__face {
  background:
    /* the machined cap */
    radial-gradient(circle at 37% 27%,
      #FFFFFF 0%, #E4EFED 8%, #A9C2C0 30%, #5C7A78 58%, #2B4342 82%, #16292A 100%),
    /* knurled rim, 72 wedges */
    conic-gradient(from 0deg,
      #B9C6C4 0deg 2.5deg, #6E8583 2.5deg 5deg);
  background-blend-mode: normal, normal;
  position: relative;
}
.session-room .session-view--console .pr-knob__face::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.75) 43%,
    rgba(255,255,255,.85) 46%, transparent 54%);
  pointer-events: none;
}

/* transport caps: same narrow band, angled with the single top-left light */
.session-room .session-view--console .session-transport .session-btn {
  background:
    linear-gradient(112deg,
      transparent 30%, rgba(255,255,255,.55) 40%,
      rgba(255,255,255,.62) 43%, transparent 52%),
    var(--k-grain-fine),
    linear-gradient(#7A8886 0%, #4E5B59 44%, #35423F 64%, #48554F 100%);
  background-blend-mode: normal, overlay, normal;
}
.session-room .session-view--console .session-transport .session-btn--arm {
  background:
    linear-gradient(112deg,
      transparent 30%, rgba(255,255,255,.30) 40%,
      rgba(255,255,255,.34) 43%, transparent 52%),
    radial-gradient(circle at 40% 28%, #7A2B26, #431714 62%, #230A08);
  background-blend-mode: normal, normal;
}

/* lit lenses get a stacked bloom rather than one soft shadow */
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::before,
.session-room .session-view--console .session-btn--talkback.is-on::before,
.session-room .session-view--console .session-btn--talkback.is-lit::before {
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    0 0 3px 1px rgba(120,255,238,.95),
    0 0 10px 3px rgba(56,230,208,.55),
    0 0 22px 8px rgba(56,230,208,.28);
}
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]::before {
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.8),
    0 0 3px 1px rgba(255,150,140,.95),
    0 0 10px 3px rgba(255,68,56,.55),
    0 0 22px 8px rgba(255,68,56,.28);
}

/* The knob specular was written as .pr-knob__face::after — but that element is
   an <svg>, and pseudo-elements do not render on SVG. It was silently doing
   nothing. Same highlight, moved into the background stack where it works. */
.session-room .session-view--console .pr-knob__face::after { content: none; }
.session-room .session-view--console .pr-knob__face {
  background:
    linear-gradient(115deg,
      transparent 33%, rgba(255,255,255,.55) 42%,
      rgba(255,255,255,.62) 45%, transparent 53%),
    radial-gradient(circle at 37% 27%,
      #FFFFFF 0%, #E4EFED 8%, #A9C2C0 30%, #5C7A78 58%, #2B4342 82%, #16292A 100%),
    conic-gradient(from 0deg, #B9C6C4 0deg 2.5deg, #6E8583 2.5deg 5deg);
  background-blend-mode: screen, normal, normal;
}
/* the transport specular was blowing the caps out — narrower and dimmer */
.session-room .session-view--console .session-transport .session-btn {
  background:
    linear-gradient(112deg,
      transparent 33%, rgba(255,255,255,.30) 41%,
      rgba(255,255,255,.36) 44%, transparent 51%),
    var(--k-grain-fine),
    linear-gradient(#6E7C7A 0%, #47544F 44%, #303D3B 64%, #414E4A 100%);
  background-blend-mode: normal, overlay, normal;
}

/* ARM, last word. Twice now a later generic transport-cap rule has overridden
   the record button back to grey. It lives at the end of the file so nothing
   below can take it again. */
.session-room .session-view--console .session-transport .session-btn--arm {
  background:
    linear-gradient(112deg,
      transparent 33%, rgba(255,255,255,.26) 41%,
      rgba(255,255,255,.30) 44%, transparent 51%),
    radial-gradient(circle at 40% 28%, #7A2B26, #431714 62%, #230A08);
  background-blend-mode: normal, normal;
}

/* ============================================================
   SINGLE LIGHT SOURCE — viewport-anchored, upper-left
   One lamp. Every element gets a different slice of one
   continuous fixed gradient via background-attachment: fixed.
   Per-element specular bands replaced, local highlights kept
   for small round parts at consistent upper-left geometry.
   ============================================================ */

.session-room .session-view--console {
  --k-light: radial-gradient(120vw 90vh at 18% -12%,
               rgba(255,255,255,.22) 0%,
               rgba(255,255,255,.10) 28%,
               rgba(255,255,255,.02) 55%,
               rgba(0,0,0,.10) 85%,
               rgba(0,0,0,.20) 100%);
}

/* Panel regions and session bar — specular band replaced with fixed light */
.session-room .session-view--console .console-region,
.session-room:has(.session-view--console:not([hidden])) .session-bar {
  background:
    var(--k-light),
    linear-gradient(rgba(255,255,255,.11), rgba(255,255,255,0) 14%,
                    rgba(0,0,0,.10) 68%, rgba(0,0,0,.26)),
    var(--k-grain),
    linear-gradient(150deg, #24504D, #12302E);
  background-attachment: fixed, local, local, local;
  background-blend-mode: normal, normal, overlay, normal;
}

/* Transport caps — specular band replaced with fixed light */
.session-room .session-view--console .session-transport .session-btn {
  background:
    var(--k-light),
    var(--k-grain-fine),
    linear-gradient(#6E7C7A 0%, #47544F 44%, #303D3B 64%, #414E4A 100%);
  background-attachment: fixed, local, local;
  background-blend-mode: normal, overlay, normal;
}

/* ARM — specular band removed, stays red. Must come after the generic cap rule. */
.session-room .session-view--console .session-transport .session-btn--arm {
  background:
    var(--k-light),
    radial-gradient(circle at 40% 28%, #7A2B26, #431714 62%, #230A08);
  background-attachment: fixed, local;
  background-blend-mode: normal, normal;
}

/* Knob faces — specular band replaced, local radial highlight kept */
.session-room .session-view--console .pr-knob__face {
  background:
    var(--k-light),
    radial-gradient(circle at 37% 27%,
      #FFFFFF 0%, #E4EFED 8%, #A9C2C0 30%, #5C7A78 58%, #2B4342 82%, #16292A 100%),
    conic-gradient(from 0deg, #B9C6C4 0deg 2.5deg, #6E8583 2.5deg 5deg);
  background-attachment: fixed, local, local;
  background-blend-mode: normal, normal, normal;
}

/* Small round parts — consistent upper-left highlight geometry */
.session-room .session-view--console .console-cert__lamp {
  background: radial-gradient(circle at 37% 27%, #2A4D34, #1C3524 40%, #0D1C12);
}
.session-room .session-view--console .console-cert.is-certified .console-cert__lamp {
  background: radial-gradient(circle at 37% 27%, #7DF29A, #3FCF5C 40%, #1B7A32);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__lamp {
  background: radial-gradient(circle at 37% 27%, #3A4D4C, #243635 40%, #0E1C1C);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar.is-live .session-bar__lamp {
  background: radial-gradient(circle at 37% 27%, #FF8E84, #FF3B30 40%, #8E1710);
}
.session-room .session-view--console .session-btn--talkback::before {
  background: radial-gradient(circle at 37% 27%, #3E6664, #16302F);
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]::before,
.session-room .session-view--console .session-btn--talkback.is-on::before,
.session-room .session-view--console .session-btn--talkback.is-lit::before {
  background: radial-gradient(circle at 37% 27%, #4FE9D3, #16988A);
}

/* ---- transport: grouping and overflow ---------------------------------- */
/* Measured: content ran 49px past the panel's right edge, gaps were near
   uniform (12/12/20/24/16/12/12/12/22) so nothing read as a group, and MARK
   sat after CLICK instead of with the transport caps.

   Real gear clusters: [transport caps] · [session settings] · [counter].
   MARK is a transport action, so it moves back with the caps — done with
   flex `order` rather than touching the markup and its JS bindings. */
.session-room .session-view--console .session-transport {
  gap: 10px;
  padding: 0 14px;
}
/* cluster 1 — the caps, in source order: RETURN PLAY STOP ARM, then MARK */
.session-room .session-view--console .session-count-in,
.session-room .session-view--console .session-tempo,
.session-room .session-view--console .session-click { order: 1; }
.session-room .session-view--console #prElapsed,
.session-room .session-view--console #prDuration { order: 2; }

/* cluster separation — a real gap, not a slightly bigger one */
.session-room .session-view--console .session-count-in { margin-left: 26px; }
.session-room .session-view--console #prElapsed { margin-left: auto; }

/* ARM gets breathing room on both sides: it is the one that bites */
.session-room .session-view--console .session-btn-group--arm {
  margin-inline: 6px;
}
/* the counter was 209px wide and part of the overflow */
.session-room .session-view--console #prElapsed { font-size: 32px; }
/* the duration readout duplicates the counter and was the part hanging off
   the edge — it belongs under the counter, not beside it */
.session-room .session-view--console #prDuration {
  align-self: flex-end;
  margin-left: 8px;
  padding-bottom: 6px;
}
/* last 3px of overflow: the duration readout beside a 32px counter. It is the
   same information one line down, so it gets secondary size. */
.session-room .session-view--console #prElapsed { font-size: 30px; }
.session-room .session-view--console #prDuration { font-size: 10px; margin-left: 6px; }
.session-room .session-view--console .session-count-in { margin-left: 18px; }

/* ============================================================================
   BAKED ASSETS — Blender, one light rig, upper-left key
   ----------------------------------------------------------------------------
   Rendered offline in Blender (area-light key/fill/rim, gradient world so the
   metal has something to reflect) and composited here. This is the game-artist
   move: bake the optics once, sample cheaply at runtime, instead of asking
   gradients to invent specular behaviour.

   The knob asset was REJECTED and is not referenced: a flat-top cylinder under
   a top-down orthographic camera samples a single reflection direction across
   the whole cap, so knurl cannot show at all. The CSS knob is better.

   Contact shadows are baked into the assets, so the CSS box-shadows that
   previously faked them are removed here to avoid doubling.
   ========================================================================== */

/* ---- talkback: bezel + lens, off and lit ------------------------------- */
.session-room .session-view--console .session-btn--talkback {
  background: url("images/console/lens-off.png") center / 100% 100% no-repeat;
  box-shadow: none;
  border-radius: 0;
}
.session-room .session-view--console .session-btn--talkback::before { content: none; }
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"],
.session-room .session-view--console .session-btn--talkback.is-on,
.session-room .session-view--console .session-btn--talkback.is-lit {
  background-image: url("images/console/lens-on.png");
}
/* AUTOMUTE is a safety state — it lights red, so the cyan lamp is hue-rotated
   rather than rendering a sixth asset for one button. */
.session-room .session-view--console #prTbAutomute[aria-pressed="true"] {
  background-image: url("images/console/lens-on.png");
  filter: hue-rotate(-169deg) saturate(1.3);   /* cyan 172deg -> red 3deg */
}
/* the LED under the cap stays CSS — it is 14x5px and state-driven */
.session-room .session-view--console .session-btn--talkback::after { bottom: -9px; }

/* ---- transport caps ----------------------------------------------------- */
.session-room .session-view--console .session-transport .session-btn {
  background: url("images/console/cap-grey.png") center / 100% 100% no-repeat;
  box-shadow: none;
  border-radius: 0;
}
.session-room .session-view--console .session-transport .session-btn--arm {
  background: url("images/console/cap-red.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
/* the bake is matte; a narrow CSS specular puts the metal back on top of it,
   angled to the same upper-left key the assets were lit with */
.session-room .session-view--console .session-transport .session-btn::before {
  content: "";
  position: absolute;
  inset: 12% 12% 40%;
  border-radius: 40% 40% 60% 60% / 60% 60% 40% 40%;
  background: linear-gradient(150deg,
    rgba(255,255,255,.34), rgba(255,255,255,.06) 60%, transparent);
  pointer-events: none;
}
.session-room .session-view--console .session-transport .session-btn {
  position: relative;
}
.session-room .session-view--console .session-transport .session-btn > svg,
.session-room .session-view--console .session-btn__lamp { position: relative; z-index: 1; }
.session-room .session-view--console .session-transport .session-btn:active {
  transform: translateY(1px);
  filter: brightness(.9);
}

/* ---- hover states, after the asset swap -------------------------------- */
/* The pre-existing hover rules set `background:` to a flat colour. That
   shorthand wipes background-image, so hovering erased the baked lens and cap
   assets and showed a flat block. These keep the image and light it instead. */
.session-room .session-view--console .session-btn--talkback:hover:not(:disabled) {
  background-image: url("images/console/lens-off.png");
  background-color: transparent;
  filter: brightness(1.14);
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]:hover,
.session-room .session-view--console .session-btn--talkback.is-on:hover,
.session-room .session-view--console .session-btn--talkback.is-lit:hover {
  background-image: url("images/console/lens-on.png");
  background-color: transparent;
  filter: brightness(1.12);
}
/* AUTOMUTE already carries a hue-rotate; hover must extend it, not replace it */
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]:hover {
  background-image: url("images/console/lens-on.png");
  background-color: transparent;
  filter: hue-rotate(-169deg) saturate(1.3) brightness(1.12);
}
.session-room .session-view--console .session-transport .session-btn:hover:not(:disabled) {
  background-image: url("images/console/cap-grey.png");
  background-color: transparent;
  filter: brightness(1.12);
}
.session-room .session-view--console .session-transport .session-btn--arm:hover:not(:disabled) {
  background-image: url("images/console/cap-red.png");
  background-color: transparent;
  filter: brightness(1.15);
}
/* the press should read as the cap sinking, not as a colour change */
.session-room .session-view--console .session-btn--talkback:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
  filter: brightness(.92);
}

/* ---- the knob: generated, not modelled --------------------------------- */
/* The Blender knob was rejected (a top-down orthographic camera on a flat cap
   samples one reflection direction, so knurl cannot appear). This one was
   generated by the image model in a single call — a diffusion model has
   photographic priors for machined aluminium, which is exactly the thing
   hand-written gradients cannot invent.
   The SVG keeps its indicator line on top; the asset is deliberately
   rotationally symmetrical so it never fights the indicator. */
.session-room .session-view--console .pr-knob__face {
  background: url("images/console/knob-gen.png") center / 100% 100% no-repeat;
  box-shadow: 0 3px 7px rgba(0,0,0,.5);
  border-radius: 50%;
}
.session-room .session-view--console .pr-knob__indicator {
  stroke: #1B2E2D;
  stroke-width: 5;
  stroke-linecap: round;
}
.session-room .session-view--console .pr-knob__tick { stroke: rgba(0,0,0,.28); }

/* ---- asset background sizing, incl. hover ------------------------------ */
/* The pre-existing :hover rules use the `background:` shorthand, which resets
   background-size to auto and position to 0% 0%. My hover rules only set
   background-image, so size/position still came from the old rule and the lens
   rendered clipped in the corner. Declared explicitly everywhere. */
.session-room .session-view--console .session-btn--talkback,
.session-room .session-view--console .session-btn--talkback:hover,
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"],
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]:hover,
.session-room .session-view--console .session-transport .session-btn,
.session-room .session-view--console .session-transport .session-btn:hover {
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* AUTOMUTE gets a real red lens instead of a hue-rotate. Rotating the hue of a
   multi-hue image gave salmon, not red — the bezel rotated with the lamp. */
.session-room .session-view--console #prTbAutomute[aria-pressed="true"],
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]:hover {
  background-image: url("images/console/lens-red.png");
  filter: none;
}
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]:hover {
  filter: brightness(1.12);
}

/* ---- 1. GO LIVE actually lights the lamp -------------------------------- */
/* ws-session-ui.js:476 toggles `is-live` on the BUTTON, not on the bar, so the
   earlier `.session-bar.is-live` rule never matched. :has() reaches it. */
.session-room:has(.session-view--console:not([hidden])) .session-bar:has(.session-live.is-live) .session-bar__lamp {
  background: radial-gradient(circle at 38% 30%, #FF8E84, #FF3B30 42%, #8E1710);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.45),
    inset 0 -7px 13px rgba(0,0,0,.35),
    0 4px 9px rgba(0,0,0,.6),
    0 0 30px rgba(255,59,48,.55);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar:has(.session-live.is-live) .session-bar__standby {
  color: #FF6A5E;
  text-shadow: 0 0 14px rgba(255,59,48,.5);
}

/* ---- 2. the transport gives 38px back to the glass --------------------- */
/* Row track maths, so only the transport shrinks and every other region keeps
   its exact height: window 325->363, transport 148->110, and stage, talkback,
   controls and instrument all unchanged. */
.session-room .session-view--console .console-grid {
  grid-template-rows: 230fr 10fr 123fr 10fr 162fr 10fr 75fr 10fr 110fr auto;
}
.session-room .session-view--console .console-region--transport { padding: 4px 8px 6px; }
.session-room .session-view--console .console-region--transport > .session-lbl { padding: 0 0 2px; }
.session-room .session-view--console .session-transport .session-btn { width: 40px; height: 40px; }
.session-room .session-view--console .session-transport .session-btn--arm { width: 44px; height: 44px; }
.session-room .session-view--console .session-transport .session-btn svg { width: 15px; height: 15px; }
.session-room .session-view--console .session-btn__lamp { width: 16px; height: 16px; }
.session-room .session-view--console #prElapsed { font-size: 27px; }
.session-room .session-view--console .session-btn--click { width: 30px; height: 30px; font-size: 13px; }
.session-room .session-view--console .session-tempo__value { height: 22px; }

/* ---- 3. the same caps on BOTH sides of the glass ----------------------- */
/* The booth, the soundcheck and the audience were still running the old CSS
   buttons. One window, drawn twice — the hardware has to match. */
.session-room .session-view:not(.session-view--console) .session-btn {
  background: url("images/console/cap-grey.png") center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: #E4F2F0;
  position: relative;
}
.session-room .session-view:not(.session-view--console) .session-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
.session-room .session-view:not(.session-view--console) .session-btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.9);
}
.session-room .session-view:not(.session-view--console) .session-btn:disabled { opacity: .45; }
/* the artist's record/arm button is the red one — it is the red light */
.session-room .session-view:not(.session-view--console) .session-btn--arm,
.session-room .session-view:not(.session-view--console) .session-btn--rec {
  background-image: url("images/console/cap-red.png") !important;
}
/* hold-to-talk is a lamp, not a cap */
.session-room .session-view:not(.session-view--console) .session-talkback {
  background: url("images/console/lens-off.png") center / 100% 100% no-repeat;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: #CFE4E2;
}
.session-room .session-view:not(.session-view--console) .session-talkback[aria-pressed="true"] {
  background-image: url("images/console/lens-on.png");
}

/* ---- talkback: real lamp assets ---------------------------------------- */
/* Generated as a matched PAIR in one image so the bezel, screws and key light
   are identical between the unlit and lit states — the only difference is the
   lamp. Square, because the asset is square and stretching a bezel to 58x36
   visibly distorts the screws. */
.session-room .session-view--console .session-btn--talkback,
.session-room .session-view--console .session-btn--talkback:hover {
  background-image: url("images/console/tb-off.png") !important;
  width: 44px;
  height: 44px;
  max-width: none;
  margin-bottom: 11px;
}
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"],
.session-room .session-view--console .session-btn--talkback[aria-pressed="true"]:hover,
.session-room .session-view--console .session-btn--talkback.is-on,
.session-room .session-view--console .session-btn--talkback.is-lit {
  background-image: url("images/console/tb-on.png") !important;
}
/* AUTOMUTE is the one safety state that reads red. The bezel is neutral
   gunmetal, so rotating the lit lamp's hue shifts the lamp and leaves the
   metal alone. */
.session-room .session-view--console #prTbAutomute[aria-pressed="true"],
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]:hover {
  background-image: url("images/console/tb-on.png") !important;
  filter: hue-rotate(-158deg) saturate(1.45);
}
.session-room .session-view--console #prTbAutomute[aria-pressed="true"]:hover {
  filter: hue-rotate(-158deg) saturate(1.45) brightness(1.1);
}
/* the booth's hold-to-talk uses the same lamp */
.session-room .session-view:not(.session-view--console) .session-talkback {
  background-image: url("images/console/tb-off.png");
}
.session-room .session-view:not(.session-view--console) .session-talkback[aria-pressed="true"] {
  background-image: url("images/console/tb-on.png");
}

/* ---- transport caps: real machined hardware ---------------------------- */
/* Generated as a matched pair in one frame — same collar, same bevel, same
   key light — so the record button is unmistakably the same object in red.
   Faces are deliberately blank; the app draws its own SVG icons on top. */
.session-room .session-view--console .session-transport .session-btn,
.session-room .session-view--console .session-transport .session-btn:hover,
.session-room .session-view:not(.session-view--console) .session-btn {
  background-image: url("images/console/tcap-grey.png") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
.session-room .session-view--console .session-transport .session-btn--arm,
.session-room .session-view--console .session-transport .session-btn--arm:hover,
.session-room .session-view:not(.session-view--console) .session-btn--arm,
.session-room .session-view:not(.session-view--console) .session-btn--rec {
  background-image: url("images/console/tcap-red.png") !important;
}
/* the baked cap carries its own specular — the CSS one now doubles it */
.session-room .session-view--console .session-transport .session-btn::before { content: none; }
/* icons sit on the cap face, not the collar, so they inset slightly */
.session-room .session-view--console .session-transport .session-btn svg {
  width: 14px; height: 14px;
  transform: translateY(-2px);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.session-room .session-view--console .session-btn__lamp { transform: translateY(-2px); }
.session-room .session-view--console .session-transport .session-btn:active { filter: brightness(.88); }

/* ---- caps v2 + ARM becomes a flip switch ------------------------------- */
/* The first caps were shot at a 3/4 angle, so the asset was not square and
   `background-size: 100% 100%` squashed it into the 40px box — a foreshortened
   face with a heavy collar reads as a tilted lozenge, not a button. Reshot
   perfectly head-on, square, thin bevel, blank face. */
.session-room .session-view--console .session-transport .session-btn svg {
  width: 17px; height: 17px;
  transform: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}

/* ARM is a two-position action — armed or not — so it is a toggle, not a
   momentary cap. A bat-handle switch says that at a glance and cannot be
   half-pressed by accident. The lamp above it is part of the asset. */
.session-room .session-view--console .session-transport .session-btn--arm,
.session-room .session-view--console .session-transport .session-btn--arm:hover {
  background-image: url("images/console/arm-off.png") !important;
  width: 44px; height: 50px;
  border-radius: 0;
  box-shadow: none;
}
.session-room .session-view--console .session-transport .session-btn--arm[data-state="armed"],
.session-room .session-view--console .session-transport .session-btn--arm[data-state="recording"],
.session-room .session-view--console .session-transport .session-btn--arm[data-state="armed"]:hover,
.session-room .session-view--console .session-transport .session-btn--arm[data-state="recording"]:hover {
  background-image: url("images/console/arm-on.png") !important;
}
/* the switch carries its own indicator, so the CSS lamp goes */
.session-room .session-view--console .session-transport .session-btn--arm .session-btn__lamp {
  display: none;
}
/* armed blinks, rolling is steady — kept, now on the whole switch */
.session-room .session-view--console .session-transport .session-btn--arm[data-state="armed"] {
  animation: k-arm-blink 1s steps(1, end) infinite;
}
.session-room .session-view--console .session-transport .session-btn--arm[data-state="recording"] {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .session-room .session-view--console .session-transport .session-btn--arm[data-state="armed"] { animation: none; }
}
/* a switch flips, it does not sink */
.session-room .session-view--console .session-transport .session-btn--arm:active {
  transform: none;
  filter: brightness(1.1);
}

/* ---- transport caps with engraved legends ------------------------------ */
/* The symbols are now machined into the cap face rather than an SVG floating
   on top of it — that is what makes it read as hardware. The SVGs stay in the
   markup for accessibility and are hidden visually; every aria-label and JS
   binding is untouched. */
.session-room .session-view--console #prReturnBtn { background-image: url("images/console/tr-return.png") !important; }
.session-room .session-view--console #prPlayBtn   { background-image: url("images/console/tr-play.png")   !important; }
.session-room .session-view--console #prStopBtn   { background-image: url("images/console/tr-stop.png")   !important; }
.session-room .session-view--console #prMarkBtn   { background-image: url("images/console/tr-mark.png")   !important; }
.session-room .session-view--console #prReturnBtn svg,
.session-room .session-view--console #prPlayBtn svg,
.session-room .session-view--console #prStopBtn svg,
.session-room .session-view--console #prMarkBtn svg { display: none; }
/* a disabled transport control should look inert, not just faded */
.session-room .session-view--console .session-transport .session-btn:disabled {
  filter: saturate(.35) brightness(.72);
  opacity: 1;
}

/* ---- alerts: visible again, as a console strip -------------------------- */
/* I had hidden .session-alerts because the approved design has no banner. That
   was wrong: ARM refuses to arm without a reference and explains why through
   this element, so hiding it turned a guarded control into a dead one. It
   comes back, sized as a thin strip that does not disturb the geography. */
.session-room:has(.session-view--console:not([hidden])) .session-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 19px 8px;
  flex: none;
}
.session-room:has(.session-view--console:not([hidden])) .session-alerts:empty { display: none; }
.session-room:has(.session-view--console:not([hidden])) .session-alert {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  background: linear-gradient(#2A1614, #1B0E0D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.45);
  border: 0;
}
.session-room:has(.session-view--console:not([hidden])) .session-alert__text b { font-size: 12px; }
.session-room:has(.session-view--console:not([hidden])) .session-alert__text p { font-size: 11.5px; margin: 2px 0 0; }

/* ---- the note line answers the control you just pressed ---------------- */
/* Refusals and not-yet-built notices belong here, not in a popup over the
   panel. A console tells you on its status strip; it does not throw a dialog. */
.session-room .session-view--console .session-note[data-say] { gap: 0; }
.session-room .session-view--console .session-note[data-say]::after { content: none; }
.session-room .session-view--console .session-note__say {
  font-size: 12.5px;
  letter-spacing: .2px;
  color: var(--k-t1);
}
.session-room .session-view--console .session-note__say em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 11.5px;
  margin-right: 6px;
}
/* refused — the control could have worked, something is missing */
.session-room .session-view--console .session-note[data-say="refused"] {
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.12)),
    linear-gradient(150deg, #3A1A18, #1E0D0C);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,59,48,.3), 0 3px 8px rgba(0,0,0,.45);
}
.session-room .session-view--console .session-note[data-say="refused"] .session-note__say em { color: #FF8E84; }
/* pending — not built yet, and not the producer's fault */
.session-room .session-view--console .session-note[data-say="pending"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(56,230,208,.28), 0 3px 8px rgba(0,0,0,.45);
}
.session-room .session-view--console .session-note[data-say="pending"] .session-note__say em { color: var(--k-teal-a); }

/* ---- the door out ------------------------------------------------------- */
/* The console removes the site header, so without this the only way back is
   the browser's back button. Engraved legend style, far left of the bar,
   where a door would be — deliberately quiet so it never competes with the
   transport, but always present. */
.session-room:has(.session-view--console:not([hidden])) .session-bar__exit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-right: 4px;
  padding: 7px 11px 7px 8px;
  border-radius: 6px;
  background: linear-gradient(#204644, #14322F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.4);
  color: var(--k-t2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__exit svg {
  width: 13px; height: 13px;
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__exit:hover {
  color: var(--k-t1);
  filter: brightness(1.15);
}
.session-room:has(.session-view--console:not([hidden])) .session-bar__exit:focus-visible {
  outline: 2px solid var(--k-teal-a);
  outline-offset: 2px;
}
/* on the artist and audience side the site header is still present, so the
   door would be a duplicate */
.session-room:not(:has(.session-view--console:not([hidden]))) .session-bar__exit { display: none; }

/* ============================================================================
   AUDIT FIXES — 2026-08-06
   Every number here came from probes against composited pixels on the live
   page, not from CSS variables. See REVIEW-2026-08.md.
   ========================================================================== */

/* --- 1. the narrow-width withdrawal never fired ------------------------- */
/* My own rule `.session-room .session-view--console .console-grid` (0-3-0)
   outranked the media query's (0-2-0), so below 880px the console rendered
   squeezed and clipped ON TOP of the "too narrow" notice instead of being
   replaced by it. Same specificity, inside the query, so it wins again. */
@media (max-width: 879px) {
  .session-room .session-view--console .console-grid { display: none !important; }
  .session-room .session-view--console .console-too-narrow { display: block; }
  .session-room:has(.session-view--console:not([hidden])) { height: auto; overflow: auto; }
  .session-room:has(.session-view--console:not([hidden])) .session-bar { display: none; }
}

/* --- 2. 880-1034px clipped the whole right-hand column ------------------ */
/* The grid's own minimum (220 + 480 + 300 + gaps + padding ~= 1034px) exceeded
   the viewport, so TALKBACK/CONTROLS/INSTRUMENT were cut off with no
   scrollbar. Columns shrink to fit the stated 880px floor. */
@media (max-width: 1100px) {
  .session-room .session-view--console .console-grid {
    grid-template-columns: 176px minmax(300px, 1fr) 232px;
    column-gap: 7px;
    padding: 0 8px;
  }
  .session-room .session-view--console .console-region { padding: 5px 6px 6px; }
  .session-room .session-view--console #prElapsed { font-size: 22px; }
  .session-room .session-view--console .session-transport { gap: 6px; padding: 0 6px; }
  .session-room .session-view--console .session-transport .session-btn { width: 34px; height: 34px; }
  .session-room .session-view--console .session-transport .session-btn--arm { width: 36px; height: 42px; }
  .session-room .session-view--console .pr-knob__face { width: 34px; height: 34px; }
  .session-room .session-view--console .session-btn--talkback { width: 36px; height: 36px; margin-bottom: 9px; }
  .session-room .session-view--console .console-cert__lamp { width: 38px; height: 38px; }
}

/* --- 3. panel headers failed contrast on the real background ------------ */
/* I computed against a flat #1E403E. The composited pixel at the top of each
   panel — gradient + bevel highlight + the room's radial light — is far
   lighter: measured rgb(78,116,114) on TAKE REEL, where #B4CCCA is 2.91:1.
   #F2F8F7 measures 4.81:1 against that worst case and 7.10:1 on the darkest
   panel. The bevel highlight also comes down a stop. */
.session-room .session-view--console .console-region > .session-lbl,
.session-room .session-view--console .console-region > .session-colhead > .session-lbl:first-child,
.session-room .session-view--console .console-comp > .session-lbl {
  color: #F2F8F7;
  text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.10);
}
.session-room .session-view--console .console-region,
.session-room:has(.session-view--console:not([hidden])) .session-bar {
  background:
    linear-gradient(100deg,
      transparent 38%, rgba(255,255,255,.10) 47%,
      rgba(255,255,255,.12) 49%, transparent 58%),
    linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,0) 14%,
                    rgba(0,0,0,.12) 68%, rgba(0,0,0,.28)),
    var(--k-grain),
    linear-gradient(150deg, #1E4644, #102C2A);
}

/* --- 4. three controls were under the 24x24 absolute floor -------------- */
/* count-in 40x21, LOAD 40x19, export buttons 85x19. */
.session-room .session-view--console .session-count-in__seg,
.session-room .session-view--console .session-stage__ref-load,
.session-room .session-view--console .session-col__foot .btn-sm {
  min-height: 26px;
  min-width: 26px;
  padding-block: 5px;
}

/* --- 5. five controls had no focus ring -------------------------------- */
/* They are background-image buttons now, so a default ring can vanish against
   the baked asset. Explicit, offset, and doubled with a dark halo so it reads
   on both pale metal and near-black wells. */
.session-room .session-view--console .session-col__foot .btn-sm:focus-visible,
.session-room .session-view--console .session-count-in__seg:focus-visible,
.session-room .session-view--console .pr-source-sel__seg:focus-visible,
.session-room .session-view--console .session-stage__ref-load:focus-visible,
.session-room .session-view--console .console-glass__invite:focus-visible,
.session-room .session-view--console .session-btn--talkback:focus-visible,
.session-room .session-view--console .session-transport .session-btn:focus-visible {
  outline: 2px solid var(--k-teal-a);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.55);
}

/* --- the ruler colour never reached the ruler -------------------------- */
/* `#prRuler { color: var(--k-t8) }` was beaten for its child spans by the more
   specific `.session-view--console .session-lbl { color: var(--console-legend) }`.
   Direct declarations beat inheritance. */
.session-room .session-view--console #prRuler .session-lbl,
.session-room .session-view--console #prRuler span { color: #8FA9A7; }

/* --- 6. physical text size on a high-DPI panel -------------------------- */
/* Every engraved legend measured under the 2.4mm floor: 8px = 1.25mm on a
   163 DPI screen. Enlarging each one would break the layouts they sit in —
   the instrument table fits eight rows in 146px only because the rows are
   17px tall.
   The actual problem is that a console designed for 1440x900 occupies barely
   a third of a 3840px panel. Scaling the whole instrument up fixes the
   physical size of every legend at once and changes no proportion. Height is
   divided by the same factor so the no-scroll guarantee survives. */
@media (min-width: 2000px) {
  .session-room:has(.session-view--console:not([hidden])) {
    zoom: 1.55;
    height: calc(100dvh / 1.55);
  }
}
@media (min-width: 2800px) {
  .session-room:has(.session-view--console:not([hidden])) {
    zoom: 2;
    height: calc(100dvh / 2);
  }
}
/* the very smallest legends come up a step regardless, so they are readable
   even on a laptop where no scaling applies */
.session-room .session-view--console .session-btn-legend { font-size: 9.5px; }
.session-room .session-view--console .console-table__unit { font-size: 10px; }
.session-room .session-view--console .session-col__foot .btn-sm,
.session-room .session-view--console .session-count-in__seg,
.session-room .session-view--console .session-stage__ref-load { font-size: 10px; }
.session-room .session-view--console .session-bar__exit { font-size: 10px; }
.session-room .session-view--console .console-table__label { font-size: 10.5px; }