/* ============================================================
   THE RENDERED CLUB — STUDIO (editing-suite UI + 3D scenes)
   ============================================================ */

/* ---------- 3D scene container ---------- */
.scene {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 30% 20%, rgba(245,166,35,0.12), transparent 55%),
    radial-gradient(120% 100% at 80% 90%, rgba(79,209,197,0.10), transparent 55%),
    linear-gradient(160deg, var(--navy-700), var(--black));
}
.scene::after { /* faint reticle grid behind canvas; covered once WebGL mounts */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(248,246,240,0.025) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(248,246,240,0.025) 13px 14px);
}
.scene canvas { position: relative; z-index: 1; width: 100% !important; height: 100% !important; display: block; }
.scene--tall { aspect-ratio: 4/5; }
.scene--sq { aspect-ratio: 1/1; }
.scene--wide { aspect-ratio: 16/10; }
.scene__cap { position: absolute; left: 0; bottom: 0; z-index: 2; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); padding: 0.6rem 0; }

/* ============================================================
   EDITING SUITE — overall panel
   ============================================================ */
.suite {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(18,36,56,0.4), rgba(6,10,17,0.5));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,0.8);
}
.suite__bar {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line-soft); background: rgba(6,10,17,0.5);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.suite__bar .dotrow { display: flex; gap: 6px; margin-right: 0.4rem; }
.suite__bar .dotrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.suite__bar .dotrow i:nth-child(1){ background:#E74C3C } .suite__bar .dotrow i:nth-child(2){ background:#F5A623 } .suite__bar .dotrow i:nth-child(3){ background:#2ECC71 }
.suite__bar .spacer { flex: 1; }
.suite__bar .live { color: var(--gold); display:flex; align-items:center; gap:0.4em; }
.suite__bar .live::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--alert); animation: blink 1.4s infinite; }

.suite__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; }
.suite__left { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.suite__right { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px){ .suite__grid { grid-template-columns: 1fr; } .suite__left { border-right: none; border-bottom: 1px solid var(--line-soft); } }

/* ---------- PROGRAM MONITOR ---------- */
.pm { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.pm__screen { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #060A11; border: 1px solid var(--line); cursor: ew-resize; }
.pm__canvas { width: 100%; height: 100%; display: block; }
.pm__tag { position: absolute; top: 10px; z-index: 4; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; padding: 4px 8px; border-radius: 20px; backdrop-filter: blur(4px); }
.pm__tag--l { left: 10px; background: rgba(13,27,42,0.7); color: var(--platinum); }
.pm__tag--r { right: 10px; background: rgba(245,166,35,0.92); color: var(--navy); }
.pm__guide { position: absolute; inset: 9%; border: 1px solid rgba(248,246,240,0.14); z-index: 3; pointer-events: none; }
.pm__guide::before { content:""; position:absolute; inset:-5% ; border: 1px dashed rgba(248,246,240,0.08); }
.pm__split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--off-white); z-index: 5; transform: translateX(-50%); }
.pm__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--off-white); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.4); cursor: ew-resize; }
.pm__burn { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 4; display: flex; justify-content: space-between; font-size: 11px; color: var(--off-white); text-shadow: 0 1px 3px #000; }
.pm__burn .pm__rec { color: var(--alert); }
.pm__transport { display: flex; align-items: center; gap: 0.5rem; }
.pm__btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-dim); transition: all .2s; }
.pm__btn:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.pm__play { color: var(--off-white); }
.pm__time { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.pm__time .pm__cur { color: var(--gold); }

/* ---------- TIMELINE ---------- */
.tlx { padding: 0.9rem; border-top: 1px solid var(--line-soft); }
.tlx__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 10px; letter-spacing: 0.14em; }
.tlx__title { color: var(--ink-faint); }
.tlx__tc { color: var(--gold); font-size: 12px; }
.tlx__ruler { position: relative; height: 18px; margin-left: 42px; border-bottom: 1px solid var(--line-soft); cursor: text; }
.tlx__ruler span { position: absolute; top: 2px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 8px; color: var(--ink-faint); }
.tlx__body { position: relative; margin-top: 4px; }
.tlx__track { display: grid; grid-template-columns: 38px 1fr; gap: 4px; align-items: stretch; margin-bottom: 4px; }
.tlx__th { font-family: var(--f-mono); font-size: 9px; color: var(--ink-faint); display: grid; place-items: center; background: rgba(255,255,255,0.02); border-radius: 4px; }
.tlx__lane { position: relative; height: 38px; background: rgba(255,255,255,0.02); border-radius: 4px; overflow: hidden; }
.tlx__clip { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--clr); border: 1px solid rgba(255,255,255,0.14); overflow: hidden; cursor: grab; display: flex; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); transition: filter .2s, box-shadow .2s; min-width: 8px; }
.tlx__clip.is-grab { cursor: grabbing; }
.tlx__clip.is-active { box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(245,166,35,0.4); }
.tlx__clip-lbl { position: relative; z-index: 2; font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em; color: rgba(255,255,255,0.92); padding: 0 6px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }
.tlx__thumb { position: absolute; inset: 0; z-index: 0; opacity: 0.5; background-size: cover; background-position: center; }
.tlx__thumb.has-img { opacity: 0.8; }
.tlx__clip.is-audio { background: linear-gradient(180deg, rgba(79,209,197,0.18), rgba(79,209,197,0.06)); }
.tlx__wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 1px; padding: 0 4px; z-index: 0; }
.tlx__wave i { flex: 1; background: var(--clr, var(--teal)); opacity: 0.5; min-height: 6%; border-radius: 1px; }
.tlx__playhead { position: absolute; top: -22px; bottom: 0; left: 42px; width: 1px; background: var(--gold); z-index: 6; pointer-events: none; box-shadow: 0 0 8px rgba(245,166,35,0.8); }
.tlx__playhead { left: 0; margin-left: 42px; } /* align with lanes */
.tlx__ph-grip { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 11px; height: 9px; background: var(--gold); border-radius: 2px; }

/* ---------- RIGHT PANEL TABS ---------- */
.suite__tabs { display: flex; gap: 2px; padding: 0.6rem 0.9rem 0; }
.suite__tab { flex: 1; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.6rem; color: var(--ink-faint); border: 1px solid var(--line-soft); border-bottom: none; border-radius: 8px 8px 0 0; background: rgba(255,255,255,0.01); transition: all .2s; }
.suite__tab.is-on { color: var(--gold); background: rgba(245,166,35,0.08); border-color: var(--line); }
.suite__pane { display: none; padding: 0.9rem; flex: 1; }
.suite__pane.is-on { display: block; }

/* ---------- SCOPES ---------- */
.scopes__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; }
.scope { position: relative; }
.scope__lbl { position: absolute; top: 6px; left: 8px; z-index: 2; font-size: 8px; letter-spacing: 0.16em; color: var(--ink-faint); }
.scope canvas { width: 100%; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 8px; background: #060A11; display: block; }
.scope__vec + * , .scope__vec { }
.scope:nth-child(2) canvas { aspect-ratio: 1/1; }
.grade { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.gr { display: grid; grid-template-columns: 84px 1fr 42px; align-items: center; gap: 0.6rem; }
.gr__l { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.gr__v { font-size: 10px; color: var(--gold); text-align: right; }
.gr input[type=range] { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 3px; background: var(--line); outline: none; }
.gr input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; box-shadow: 0 0 8px rgba(245,166,35,0.6); }
.gr input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--gold); cursor: pointer; }
.grade__reset { margin-top: 0.9rem; width: 100%; font-size: 9px; letter-spacing: 0.16em; padding: 0.6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-dim); transition: all .2s; }
.grade__reset:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- RENDER QUEUE ---------- */
.rq__head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 0.8rem; }
.rq__go { font-size: 10px; letter-spacing: 0.12em; color: var(--navy); background: var(--gold); border-radius: 20px; padding: 0.5rem 0.9rem; transition: filter .2s; }
.rq__go:hover { filter: brightness(1.1); }
.rq__list { display: flex; flex-direction: column; gap: 0.5rem; }
.rq__job { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.6rem; border: 1px solid var(--line-soft); border-radius: 8px; transition: border-color .3s, background .3s; }
.rq__job.is-active { border-color: rgba(245,166,35,0.5); background: rgba(245,166,35,0.04); }
.rq__job.is-done { border-color: rgba(46,204,113,0.4); }
.rq__status { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.rq__job.is-active .rq__status { background: var(--gold); animation: blink 1s infinite; }
.rq__job.is-done .rq__status { background: var(--success); }
.rq__name { font-size: 0.82rem; color: var(--off-white); display: block; }
.rq__sub { font-size: 8px; letter-spacing: 0.1em; color: var(--ink-faint); }
.rq__sel { font-size: 9px; background: rgba(6,10,17,0.6); border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.4rem; color: var(--ink-dim); cursor: pointer; }
.rq__bar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; margin-top: 0.2rem; }
.rq__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 10px rgba(245,166,35,0.5); transition: width .1s linear; }
.rq__pct { position: absolute; right: 6px; top: -14px; font-size: 8px; color: var(--ink-faint); }
.rq__foot { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: 9px; letter-spacing: 0.1em; color: var(--ink-faint); }

/* ---------- editing-suite section framing ---------- */
.suite-cap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin-top: 1.2rem; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.suite-cap span { display: inline-flex; align-items: center; gap: 0.5em; }
.suite-cap span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ============================================================
   TIMELINE v2 — tools, trims, razor, snapping, grade keyframes
   ============================================================ */
.tlx__head { gap: 0.8rem; }
.tlx__tools { display: inline-flex; align-items: center; gap: 3px; }
.tlx__tool {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border: 1px solid var(--line-soft); border-radius: 5px;
  background: rgba(248,246,240,0.03); color: var(--ink-faint);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.tlx__tool:hover { color: var(--ink); border-color: var(--line); }
.tlx__tool.is-on { color: var(--gold); border-color: rgba(245,166,35,0.45); background: rgba(245,166,35,0.08); }
.tlx__tool.is-rec { color: var(--alert); border-color: rgba(231,76,60,0.55); background: rgba(231,76,60,0.10); animation: blink 1.4s infinite; }
.tlx__tooldiv { width: 1px; height: 14px; background: var(--line-soft); margin: 0 3px; }
.tlx__hint { flex: 1; text-align: right; font-size: 8px; letter-spacing: 0.16em; color: var(--ink-faint); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* trim handles — visible on hover / while trimming */
.tlx__hl, .tlx__hr {
  position: absolute; top: 0; bottom: 0; width: 8px; z-index: 3;
  cursor: ew-resize; opacity: 0; transition: opacity .18s;
}
.tlx__hl { left: 0; border-left: 2px solid var(--gold); }
.tlx__hr { right: 0; border-right: 2px solid var(--gold); }
.tlx__hl::after, .tlx__hr::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 10px;
  transform: translateY(-50%); background: var(--gold); border-radius: 2px;
}
.tlx__hl::after { left: 1px; } .tlx__hr::after { right: 1px; }
.tlx__clip:hover .tlx__hl, .tlx__clip:hover .tlx__hr,
.tlx__clip.is-trim .tlx__hl, .tlx__clip.is-trim .tlx__hr { opacity: 0.9; }

/* selection + razor feedback */
.tlx__clip.is-sel { outline: 1.5px solid var(--gold); outline-offset: 1px; }
.tlx__clip.is-cutflash { animation: cutflash 0.42s ease; }
@keyframes cutflash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.tlx.is-razor .tlx__lane, .tlx.is-razor .tlx__clip { cursor: crosshair; }

/* snap + cut guide lines */
.tlx__snapline, .tlx__cutline {
  position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none;
  opacity: 0; transition: opacity .12s; z-index: 6;
}
.tlx__snapline { background: var(--gold); box-shadow: 0 0 8px rgba(245,166,35,0.8); }
.tlx__cutline { background: rgba(248,246,240,0.85); box-shadow: 0 0 6px rgba(248,246,240,0.5); }
.tlx__snapline.is-on, .tlx__cutline.is-on { opacity: 1; }

/* grade keyframe lane */
.tlx__kflane { display: flex; align-items: stretch; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.tlx__kflane .tlx__th { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-faint); }
.tlx__kflane .tlx__th svg { color: var(--gold); }
.tlx__kfstrip { position: relative; flex: 1; height: 20px; background: rgba(248,246,240,0.02); border-radius: 3px; cursor: pointer; }
.tlx.is-rec .tlx__kfstrip { background: rgba(231,76,60,0.06); box-shadow: inset 0 0 0 1px rgba(231,76,60,0.25); }
.tlx__kf {
  position: absolute; top: 50%; width: 9px; height: 9px; z-index: 4;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold); border: 1px solid #0D1B2A;
  box-shadow: 0 0 8px rgba(245,166,35,0.6);
  cursor: grab;
}
.tlx__kf:hover { background: var(--gold-soft); }
.tlx__kf.is-grab { cursor: grabbing; box-shadow: 0 0 14px rgba(245,166,35,0.9); }

/* grade panel foot: reset + keyframed badge */
.grade__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.grade__foot .grade__reset { flex: 1; }
.grade__kf { font-size: 9px; letter-spacing: 0.14em; color: var(--gold); white-space: nowrap; }

/* the prism's RGB beams feed the scopes — driven by --scopeglow (JS) */
.scope canvas {
  transition: box-shadow 0.25s ease;
  box-shadow: 0 0 calc(var(--scopeglow, 0) * 26px) rgba(245,166,35, calc(var(--scopeglow, 0) * 0.35));
}
.pm__screen { box-shadow: 0 0 calc(var(--scopeglow, 0) * 34px) rgba(245,166,35, calc(var(--scopeglow, 0) * 0.18)); transition: box-shadow 0.25s ease; }

/* render queue mini preview */
.rq__foot { display: flex; align-items: center; gap: 0.8rem; }
.rq__prev { flex: 0 0 auto; width: 72px; height: 40px; border-radius: 4px; border: 1px solid var(--line-soft); }
.rq__foot .rq__eta { flex: 1; }

/* keyboard chips in the suite captions */
.suite-cap .kbd {
  display: inline-block; padding: 0 5px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; font-weight: 500;
  color: var(--ink-dim); background: rgba(248,246,240,0.04); line-height: 1.5;
}

/* v2 coordinate fixes: guides carry the 42px lane offset in their calc() */
.tlx__playhead { left: 0; margin-left: 0; }
.tlx__kflane .tlx__th { flex: 0 0 38px; width: 38px; margin-right: 4px; }