/* KJPTV — BEHIND THE SCENES (the Cut Room)
   A single-viewport editing suite sitting inside a desktop monitor: media bin
   left, program canvas centre, correction + mixer right, timeline underneath,
   macOS dock along the bottom of the screen. Linked by Behind the Scenes.html
   only. Everything is prefixed .cr-  (cut room). */

body.page-bts { overflow-x: hidden; }
.cr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }

.cr-main { height: 100vh; padding: calc(var(--nav-height) + 12px) 16px 0; display: flex; }

/* ---- The monitor: edges only, the bottom runs off the viewport ------------ */
/* On arrival the whole rig rises into the frame once. */
@keyframes cr-rise { from { transform: translateY(46px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cr-monitor {
  position: relative; flex: 1; min-height: 0; display: flex; padding: 12px 12px 0;
  border-radius: 20px 20px 4px 4px;
  background: linear-gradient(180deg, #2a2727 0%, #1a1818 40%, #0e0d0d 100%);
  box-shadow: var(--shadow-matte-lg), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.03);
  /* `backwards`, never `both`: a retained transform would make the monitor the
     containing block for the fixed tools drawer and full-screen overlay. */
  animation: cr-rise 720ms var(--ease-out) backwards;
}
@media (prefers-reduced-motion: reduce) { .cr-monitor { animation: none; } }
.cr-monitor::after { /* faint gold bevel catching light off the screen */
  content: ''; position: absolute; inset: 8px 8px 0; border-radius: 13px 13px 0 0;
  box-shadow: 0 0 0 1px var(--border-bevel-strong); pointer-events: none; z-index: 2;
}
.cr-screen {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 0; border-radius: 12px 12px 0 0; overflow: hidden;
  background: #050505 url('assets/desktop-x.png?v=22394adb') center / cover no-repeat;
}
.cr-screen::before { /* wallpaper held back so the app window stays the subject */
  content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(5,5,5,0.20) 0%, rgba(5,5,5,0.34) 60%, rgba(5,5,5,0.46) 100%);
  pointer-events: none;
}

/* ---- The editor window --------------------------------------------------- */
.cr-app {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: var(--color-surface-1);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--shadow-matte-lg);
}

/* Title bar */
.cr-bar { display: flex; align-items: center; gap: 14px; height: 46px; flex: 0 0 46px; padding: 0 12px 0 14px;
  background: linear-gradient(180deg, #1c1a1a 0%, #141313 100%); border-bottom: 1px solid var(--border-bevel); }
.cr-lights { display: flex; gap: 7px; }
.cr-lights span { width: 11px; height: 11px; border-radius: 50%; background: #2e2b2b; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.cr-bar-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cr-bar-id img { width: 20px; height: 20px; object-fit: contain; }
.cr-bar-kicker { font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-mustard); white-space: nowrap; }
.cr-file { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: calc(var(--size-meta) * 1.0455); font-weight: 600;
  color: var(--text-body); background: var(--color-well); border: 1px solid var(--border-bevel); box-shadow: var(--well-inset); white-space: nowrap; }
.cr-file b { color: var(--text-heading); font-weight: 700; }
.cr-file i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-honey); }
.cr-tabs { display: flex; gap: 3px; margin: 0 auto; padding: 3px; border-radius: 9px; background: var(--color-well); box-shadow: var(--well-inset); }
.cr-tab { padding: 6px 14px; border: 0; border-radius: 7px; background: none; font: 600 12px/1 'Inter', sans-serif; letter-spacing: 0.01em; color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.cr-tab:hover { color: var(--text-heading); }
.cr-tab.is-active { color: #2a1e08; background: var(--gold-metallic-135); box-shadow: var(--bevel-highlight); }
.cr-bar-acts { display: flex; align-items: center; gap: 8px; }
.cr-icobtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: calc(var(--radius-button) * 0.5); border: 1px solid var(--border-bevel);
  background: var(--color-surface-3); color: var(--text-body); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.cr-icobtn:hover { color: var(--gold-mustard); border-color: var(--border-gold); }
.cr-icobtn.is-on { color: var(--gold-mustard); border-color: var(--border-gold); background: rgba(214,157,56,0.10); }
.cr-icobtn svg { width: 15px; height: 15px; }

/* Work area: bin · canvas · panels, split by hairlines */
.cr-work { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr) 274px; gap: 1px; background: var(--border-bevel-strong); }
.cr-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--color-surface-1); }
/* The bin is the exception: its only overflowing child (.cr-list) scrolls on its
   own, and a pane clip here would cut off the title type-ahead's dropdown. */
.cr-bin { overflow: visible; }
.cr-pane-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px 8px; }
.cr-pane-head h2 { margin: 0; font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-heading); }
.cr-count { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; color: var(--gold-mustard); background: rgba(214,157,56,0.12); border: 1px solid var(--border-bevel-strong); }
.cr-hint { padding: 0 13px 9px; font-size: calc(var(--size-meta) * 1.0455); color: var(--text-muted); }
.cr-hint b { color: var(--text-body); font-weight: 600; }
.cr-hint-tap { display: none; }

/* ---- Media bin ----------------------------------------------------------- */
/* Lane height flexes with the viewport so the canvas keeps its share on short
   screens; everything above it is fixed furniture. */
.cr-app { --cr-lane: clamp(32px, 4.4vh, 46px); }
.cr-filters { display: grid; gap: 6px; padding: 0 13px 10px; }
.cr-filters .cr-select { width: 100%; padding: 8px 30px 8px 11px; }
.cr-filters .dir-ac { flex: none; max-width: none; }
.cr-filters .dir-ac-input { padding: 8px 0; }
.cr-empty { margin: 4px 3px; font-size: var(--size-small); color: var(--text-muted); }
.cr-list { flex: 1; min-height: 96px; overflow-y: auto; overflow-x: hidden; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cr-list::-webkit-scrollbar, .cr-side::-webkit-scrollbar { width: 9px; }
.cr-list::-webkit-scrollbar-thumb, .cr-side::-webkit-scrollbar-thumb { border-width: 2px; }
.cr-clip { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 6px; border-radius: 10px; text-align: left;
  background: var(--color-surface-2); border: 1px solid var(--border-bevel); cursor: grab; touch-action: pan-y;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.cr-clip:hover { border-color: var(--border-bevel-strong); background: var(--color-surface-3); transform: translateY(-1px); }
.cr-clip:active { cursor: grabbing; transform: translateY(0); }
.cr-clip.is-live { border-color: var(--border-gold); background: rgba(214,157,56,0.07); box-shadow: var(--gold-glow); }
.cr-clip.is-ghosted { opacity: 0.4; }
.cr-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--color-well); }
.cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-thumb-tc { position: absolute; right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px; font-size: calc(var(--size-meta) * 0.8182); font-weight: 700; color: var(--text-heading); background: rgba(0,0,0,0.72); }
.cr-clip.is-live .cr-thumb::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--gold-mustard); border-radius: 6px; }
.cr-clip-meta { min-width: 0; padding-right: 2px; }
.cr-clip-name { font-size: calc(var(--size-small) * 1.0417); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cr-clip-sub { margin-top: 3px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase; color: var(--text-muted); text-wrap: pretty; }
.cr-clip-kind { color: var(--gold-honey); }
.cr-lock { position: absolute; top: 8px; left: 8px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  color: var(--gold-mustard); background: rgba(6,6,6,0.78); border: 1px solid var(--border-bevel-strong); }
.cr-lock svg { width: 12px; height: 12px; }
body:not(.view-paid) .cr-clip.is-locked .cr-lock { display: flex; }
body:not(.view-paid) .cr-clip.is-locked .cr-thumb img { filter: grayscale(0.7) brightness(0.55); }

/* Drag ghost that follows the pointer out of the bin */
.cr-ghost { position: fixed; z-index: 90; width: 132px; pointer-events: none; border-radius: 8px; overflow: hidden; transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: var(--shadow-matte-lg), 0 0 0 1px var(--border-gold); opacity: 0.94; }
.cr-ghost img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.cr-ghost span { display: block; padding: 5px 7px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; color: #2a1e08; background: var(--gold-metallic-135); }

/* ---- Program canvas ------------------------------------------------------ */
.cr-stage { background: var(--color-surface-1); }
.cr-stage-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-bevel); }
.cr-stage-name { font-size: calc(var(--size-small) * 1.0833); font-weight: 800; letter-spacing: -0.01em; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tag { flex: none; padding: 3px 9px; border-radius: 999px; font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-mustard); background: rgba(214,157,56,0.12); border: 1px solid var(--border-bevel-strong); }
.cr-stage-head .text-link { margin-left: auto; font-size: var(--size-small); flex: none; }
.cr-view-wrap { flex: 1; min-height: 148px; display: flex; align-items: center; justify-content: center; padding: 14px; container-type: size;
  background: radial-gradient(90% 70% at 50% 40%, #0d0c0c 0%, #060606 100%); }
/* The frame keeps the clip's own aspect ratio whichever way the space runs out. */
.cr-view { position: relative; width: min(100cqw, calc(100cqh * var(--cr-ar, 1.7778))); max-width: 100%; max-height: 100%; aspect-ratio: var(--cr-ar, 1.7778); border-radius: 8px; overflow: hidden;
  background: #000; box-shadow: 0 24px 60px -22px rgba(0,0,0,0.9), 0 0 0 1px var(--border-bevel-strong); }
.cr-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.cr-wash { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) linear; }
.cr-guides { position: absolute; inset: 9%; border: 1px solid rgba(255,255,255,0.10); border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.cr-guides::before { content: ''; position: absolute; inset: -6% -6%; border: 1px dashed rgba(255,255,255,0.07); }
.cr-view.is-guides .cr-guides { opacity: 1; }
.cr-chip-res { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 6px; font-size: calc(var(--size-meta) * 0.9091); font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-body); background: rgba(6,6,6,0.66); border: 1px solid var(--border-bevel); backdrop-filter: blur(6px); }
.cr-drop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; pointer-events: none;
  background: rgba(6,6,6,0.62); backdrop-filter: blur(3px); transition: opacity var(--dur-fast) var(--ease-out); }
.cr-drop span { font-size: calc(var(--size-small) * 1.0833); font-weight: 800; letter-spacing: 0.02em; color: var(--text-heading); }
.cr-drop small { font-size: var(--size-meta); color: var(--text-body); }
.cr-drop-ring { position: absolute; inset: 12px; border: 2px dashed var(--border-gold); border-radius: 8px; }
body.cr-dragging .cr-drop { opacity: 1; }
body.cr-dragging .cr-view.is-target .cr-drop { background: rgba(214,157,56,0.10); }
body.cr-dragging .cr-view.is-target { box-shadow: 0 0 0 2px var(--gold-mustard), var(--gold-glow-strong); }
.cr-bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--gold-knob); color: #2a1e08; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(0,0,0,0.8), var(--bevel-highlight);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.cr-bigplay:hover { transform: translate(-50%, -50%) scale(1.05); }
.cr-bigplay svg { width: 24px; height: 24px; margin-left: 2px; }
.cr-view.is-playing .cr-bigplay { opacity: 0; pointer-events: none; }
/* Full screen: the real API when the browser allows it, a fixed overlay when a
   preview frame refuses. Either way the frame drops its ratio and fills. */
.cr-view:fullscreen, .cr-view.is-full { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.cr-view.is-full { position: fixed; inset: 0; z-index: 400; cursor: zoom-out; }
.cr-view:fullscreen video, .cr-view.is-full video { object-fit: contain; }
body.cr-full .cr-panels-tab, body.cr-full .view-as { display: none !important; }

.cr-stage-foot { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border-bevel); font-size: var(--size-meta); color: var(--text-muted); }
.cr-stage-foot .cr-dot { width: 4px; height: 4px; border-radius: 50%; background: #302d2d; }
.cr-stage-foot b { color: var(--text-body); font-weight: 600; }
.cr-gate { margin-left: auto; display: none; align-items: center; gap: 10px; }
.cr-gate span { font-size: calc(var(--size-meta) * 1.0455); color: var(--text-body); }
body:not(.view-paid) .cr-gate { display: flex; }

/* ---- Right rail: correction · mixer · effects ---------------------------- */
.cr-side { overflow-y: auto; overflow-x: hidden; padding: 11px 11px 14px; }
.cr-card { border-radius: calc(var(--radius-card) * 0.6875); background: var(--color-surface-2); border: 1px solid var(--border-bevel); padding: 11px 12px 13px; transition: border-color var(--dur-base) var(--ease-out); }
.cr-card + .cr-card { margin-top: 9px; }
.cr-card.is-focus { border-color: var(--border-gold); box-shadow: var(--gold-glow); }
.cr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.cr-card-head h3 { margin: 0; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-heading); }
.cr-reset { margin-left: auto; padding: 0; border: 0; background: none; font: 700 10.5px/1 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.cr-reset:hover { color: var(--gold-mustard); }

/* Colour wheel */
.cr-wheel { position: relative; width: 100%; max-width: 146px; aspect-ratio: 1; margin: 0 auto 10px; border-radius: 50%; touch-action: none; cursor: crosshair;
  background: conic-gradient(from 90deg, #e46c6c, #e0a75c, #ffd26b, #b9d072, #6fc79b, #63b7c7, #6f8fd0, #9a76cb, #cc6fae, #e46c6c);
  filter: saturate(0.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 8px 22px -12px rgba(0,0,0,0.9); }
.cr-wheel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #191717 0 26%, rgba(25,23,23,0.55) 40%, rgba(25,23,23,0) 62%); }
.cr-wheel-hub { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--color-surface-3); box-shadow: var(--well-inset); z-index: 2; }
.cr-knob { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; z-index: 3;
  background: var(--gold-knob); box-shadow: 0 3px 8px rgba(0,0,0,0.7), var(--bevel-highlight); }
.cr-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 11px; }
.cr-readout { padding: 6px 8px; border-radius: 7px; background: var(--color-well); box-shadow: var(--well-inset); }
.cr-readout dt { font-size: calc(var(--size-meta) * 0.8636); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cr-readout dd { margin: 2px 0 0; font-size: calc(var(--size-small) * 1.0833); font-weight: 800; color: var(--gold-mustard); font-variant-numeric: tabular-nums; }

/* Horizontal sliders (temperature, tint) */
.cr-row { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 9px; margin-top: 9px; }
.cr-row-label { font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cr-slider { position: relative; height: 20px; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.cr-slider-track { position: relative; flex: 1; height: 5px; border-radius: 999px; background: var(--color-well); box-shadow: var(--well-inset); }
.cr-slider-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--gold-bar); }
.cr-slider-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; transform: translateY(-50%);
  background: var(--gold-knob); box-shadow: 0 2px 6px rgba(0,0,0,0.7), var(--bevel-highlight); }
.cr-val { font-size: var(--size-meta); font-weight: 700; color: var(--text-body); text-align: right; font-variant-numeric: tabular-nums; }

/* Mixer */
.cr-mixer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cr-ch { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cr-ch-stack { display: flex; align-items: flex-end; gap: 6px; height: 112px; }
.cr-fader { position: relative; width: 26px; height: 112px; border-radius: 999px; background: var(--color-well); box-shadow: var(--well-inset); touch-action: none; cursor: ns-resize; }
.cr-fader-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--gold-bar); opacity: 0.9; }
.cr-fader-knob { position: absolute; left: 50%; width: 22px; height: 13px; margin-left: -11px; border-radius: 4px; transform: translateY(50%);
  background: var(--gold-knob); box-shadow: 0 3px 7px rgba(0,0,0,0.75), var(--bevel-highlight); }
.cr-vu { position: relative; width: 6px; height: 112px; border-radius: 999px; background: var(--color-well); box-shadow: var(--well-inset); overflow: hidden; }
.cr-vu span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--gold-bar); }
.cr-ch-name { font-size: calc(var(--size-meta) * 0.8636); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cr-ch-db { font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; color: var(--text-body); font-variant-numeric: tabular-nums; }
.cr-ch.is-muted .cr-fader-fill, .cr-ch.is-muted .cr-vu span { opacity: 0.22; }
.cr-master { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-bevel); }
.cr-master .cr-ch-name { margin-right: auto; }

/* Effects (look only) */
.cr-fx { display: flex; flex-direction: column; gap: 2px; }
.cr-fx-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border: 0; background: none; cursor: pointer; text-align: left; }
.cr-fx-row + .cr-fx-row { border-top: 1px solid var(--border-bevel); }
.cr-fx-name { flex: 1; font-size: var(--size-small); font-weight: 600; color: var(--text-body); }
.cr-fx-row.is-on .cr-fx-name { color: var(--text-heading); }
.cr-fx-val { font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-sw { position: relative; width: 32px; height: 17px; flex: none; border-radius: 999px; background: var(--color-well); box-shadow: var(--well-inset); }
.cr-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #3a3737; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.cr-fx-row.is-on .cr-sw::after { transform: translateX(15px); background: var(--gold-knob); }

/* ---- Timeline ------------------------------------------------------------ */
.cr-time { flex: 0 0 auto; border-top: 1px solid var(--border-bevel-strong); background: var(--color-surface-2); }
.cr-trans { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--border-bevel); }
.cr-trans-group { display: flex; align-items: center; gap: 6px; }
.cr-play { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--gold-knob); color: #2a1e08; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.8), var(--bevel-highlight); transition: transform var(--dur-fast) var(--ease-out); }
.cr-play:hover { transform: translateY(-1px); }
.cr-play svg { width: 16px; height: 16px; }
.cr-tc { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px; border-radius: 7px; background: var(--color-well); box-shadow: var(--well-inset); }
.cr-tc b { font-size: var(--size-body); font-weight: 800; letter-spacing: 0.02em; color: var(--gold-mustard); font-variant-numeric: tabular-nums; }
.cr-tc small { font-size: var(--size-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-trans-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cr-static { padding: 4px 9px; border-radius: 6px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--color-surface-3); border: 1px solid var(--border-bevel); }

.cr-lanes { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); }
.cr-heads { border-right: 1px solid var(--border-bevel-strong); }
.cr-head-row { display: flex; align-items: center; gap: 6px; height: var(--cr-lane); padding: 0 9px; border-bottom: 1px solid var(--border-bevel); }
.cr-head-row:first-child { height: 22px; }
.cr-head-name { font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.08em; color: var(--text-heading); }
.cr-head-row svg { width: 12px; height: 12px; color: var(--text-muted); }
.cr-tracks { position: relative; min-width: 0; cursor: pointer; }
.cr-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--border-bevel); background: var(--color-surface-1); }
.cr-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-bevel-strong); }
.cr-tick.is-major { background: rgba(255,255,255,0.12); }
.cr-tick span { position: absolute; left: 5px; top: 4px; font-size: calc(var(--size-meta) * 0.8182); font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); white-space: nowrap; }
.cr-lane { position: relative; height: var(--cr-lane); padding: 5px 0; border-bottom: 1px solid var(--border-bevel); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 42px), var(--color-surface-1); }
.cr-strip { position: absolute; inset: 5px 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-gold);
  background-image: var(--cr-frames); background-size: auto 100%; background-repeat: repeat-x; background-position: left center; }
.cr-strip::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(6,6,6,0.10) 0%, rgba(6,6,6,0.55) 100%),
  repeating-linear-gradient(90deg, transparent 0 57px, rgba(0,0,0,0.55) 57px 58px); }
.cr-strip-label { position: absolute; left: 7px; top: 5px; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-heading); text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.cr-strip-fx { padding: 1px 5px; border-radius: 3px; color: #2a1e08; background: var(--gold-metallic-135); letter-spacing: 0.08em; }
.cr-wave { position: absolute; inset: 5px 0; border-radius: 4px; overflow: hidden; display: flex; align-items: center; gap: 1.5px; padding: 0 3px;
  background: linear-gradient(180deg, #1b1918 0%, #100f0f 100%); border: 1px solid rgba(214,157,56,0.22); }
.cr-wave i { flex: 1 1 auto; min-width: 1px; border-radius: 1px; background: var(--gold-honey); opacity: 0.5; }
.cr-wave i.is-hot { opacity: 0.82; background: var(--gold-mustard); }
.cr-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gold-mustard); z-index: 4; pointer-events: none; box-shadow: 0 0 8px rgba(255,210,107,0.5); }
.cr-playhead::before { content: ''; position: absolute; top: 0; left: -5px; width: 11px; height: 11px; border-radius: 2px 2px 3px 3px; background: var(--gold-metallic-135); box-shadow: var(--bevel-highlight); }

/* ---- macOS dock --------------------------------------------------------- */
.cr-dock { flex: 0 0 auto; display: flex; justify-content: center; padding: 8px 0 10px; }
.cr-dock-tray { display: flex; align-items: flex-end; gap: 9px; padding: 8px 11px; border-radius: 17px;
  background: rgba(28,26,26,0.62); border: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.10); }
.cr-dock-app { position: relative; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #262323 0%, #171515 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 3px 8px -4px rgba(0,0,0,0.8); }
.cr-dock-app img { width: 20px; height: 20px; object-fit: contain; }
.cr-dock-app svg { width: 16px; height: 16px; color: #5f5b5b; }
.cr-dock-app.is-gold { background: var(--gold-metallic-135); }
.cr-dock-app.is-gold svg { color: #2a1e08; }
.cr-dock-app.is-open::after { content: ''; position: absolute; bottom: -6px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(255,255,255,0.45); }
.cr-dock-sep { width: 1px; height: 30px; background: rgba(255,255,255,0.10); margin: 0 2px; }

/* Touch: dragging a card is the list scrolling, so a tap loads the clip. The
   width rule and the device-preview class cover simulated phones too, where the
   pointer still reports as fine. */
@media (hover: none), (pointer: coarse) {
  .cr-hint-drag { display: none; }
  .cr-hint-tap { display: inline; }
  .cr-clip { cursor: pointer; touch-action: manipulation; }
}
body.is-device-preview .cr-clip { cursor: pointer; }

/* Narrow screens: the right rail slides in as a drawer off a caret tab. */
.cr-panels-tab { position: fixed; z-index: 61; right: 0; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 7px;
  width: 33px; padding: 13px 0 14px; border: 1px solid var(--border-bevel-strong); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--glass-sheen), var(--color-surface-2); color: var(--gold-mustard); cursor: pointer; box-shadow: var(--shadow-matte);
  transition: right 260ms var(--ease-out); }
.cr-panels-tab svg { width: 15px; height: 15px; transition: transform 240ms var(--ease-out); }
.cr-panels-word { writing-mode: vertical-rl; text-orientation: mixed; font-size: calc(var(--size-meta) * 0.8636); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); }
body.cr-panels-open .cr-panels-tab { right: min(320px, 88vw); }
body.cr-panels-open .cr-panels-tab svg { transform: rotate(180deg); }

/* ---- Narrow: the suite unstacks into a scrolling column ------------------ */
/* Short windows: keep the suite usable and let the page scroll instead of
   crushing the canvas. The 100vh fit holds at normal desktop heights. */
@media (min-width: 981px) and (max-height: 740px) {
  .cr-main { height: auto; }
  .cr-monitor { min-height: 640px; }
}
/* Between 761 and 980px the pill keeps its usual top-right spot, so the monitor
   starts below it and the app's own actions stay clear. */
@media (min-width: 761px) and (max-width: 980px) {
  body.page-bts .cr-main { padding-top: calc(var(--nav-height) + 60px); }
}
@media (max-width: 1180px) {
  .cr-work { grid-template-columns: 218px minmax(0, 1fr) 244px; }
  .cr-tabs { display: none; }
}
@media (max-width: 980px) {
  body.page-bts { overflow-x: hidden; }
  /* No monitor at this size: the suite is the page, edge to edge. */
  .cr-main { height: auto; padding: calc(var(--nav-height) + 14px) 12px 26px; }
  .cr-monitor { padding: 0; border-radius: 14px; background: none; box-shadow: none; }
  .cr-monitor::after { display: none; }
  .cr-screen { padding: 0; border-radius: 14px; background: none; }
  .cr-screen::before { display: none; }
  .cr-app { border-radius: 14px; }
  .cr-clip { cursor: pointer; }
  .cr-work { display: flex; flex-direction: column; gap: 1px; }
  /* Stacked, the pane has no flex height for cqh to read, so the frame simply
     fills the pane width. */
  .cr-view-wrap { container-type: normal; min-height: 0; }
  .cr-view { width: 100%; max-height: none; }
  .cr-stage { order: -1; }
  .cr-view-wrap { padding: 10px; }
  .cr-list { max-height: 300px; }
  /* Starts below the dev VIEW AS pill (z-index 320), which would otherwise sit
     on the first card's Reset button. */
  .cr-side { position: fixed; z-index: 60; top: calc(var(--nav-height) + 60px); right: 0; bottom: 0; width: min(320px, 88vw); padding: 14px 14px 26px;
    border-left: 1px solid var(--border-bevel-strong); box-shadow: -20px 0 46px -22px rgba(0,0,0,0.92);
    transform: translateX(101%); transition: transform 260ms var(--ease-out); }
  .cr-side.is-open { transform: translateX(0); }
  .cr-panels-tab { display: flex; }
  .cr-mixer { grid-template-columns: repeat(3, 1fr); }
  .cr-dock { display: none; }
  .cr-tabs { display: flex; }
}
@media (max-width: 760px) {
  /* The pill is hidden at this width, so the drawer reclaims the space. */
  .cr-side { top: calc(var(--nav-height) + 10px); bottom: 72px; }
  .cr-main { padding-top: calc(var(--nav-height) + 10px); }
  .cr-bar { height: 42px; flex-basis: 42px; gap: 9px; padding: 0 9px 0 11px; }
  .cr-bar-kicker, .cr-file, .cr-tabs { display: none; }
  .cr-heads { display: none; }
  .cr-lanes { grid-template-columns: minmax(0, 1fr); }
  .cr-trans { flex-wrap: wrap; }
  .cr-trans-right { width: 100%; margin-left: 0; justify-content: flex-end; }
  .cr-wheel { max-width: 128px; }
}

/* ---- Condensed footer, same as Member Profile and the watch pages -------- */
body.page-bts .footer-top, body.page-bts .footer-news { display: none !important; }
body.page-bts .footer { position: relative; z-index: 3; padding-top: 34px; }
/* The dev VIEW AS pill would sit on top of the app's own title-bar actions, so
   on the full suite it moves to the free corner beside the dock. Stacked, that
   corner belongs to the media bin, so it stays where every other page has it. */
@media (min-width: 981px) {
  body.page-bts .view-as { top: auto; bottom: 16px; right: auto; left: 16px; }
}