/* VIDEO TRIM page (Oct 17 2026) — every rule under .trm / .trm- ; colours only through tokens.css variables, so both themes work.
   It stands on the studio's own pieces (.card, .btn, .tip) and only adds layout. The review screen is two columns (the player and
   its strip on the left, the checks, beats and script on the right); under 900 px they stack, and under 640 px every button is a
   full thumb wide. Nothing scrolls the page sideways: long names wrap, the script scrolls inside its own box. */
.trm { min-width: 0; max-width: 1280px; }
.trm-head h2 { margin: 0 0 4px; font-size: 20px; }
.trm-quiet { color: var(--text-muted); font-size: 13px; }
.trm-card { padding: 16px 18px; min-width: 0; }
.trm-card + .trm-card, #trm-main:not(:empty), #trm-list:not(:empty), #trm-new:not(:empty) { margin-top: 14px; }
.trm-card h3 { margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.trm-card h4, .trm-sec > h4, .trm-sec > summary { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.trm-sec { margin-top: 14px; }
.trm-sec:first-child { margin-top: 0; }
.trm-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.trm-link:focus-visible, .trm-drop:focus-visible, .trm-mark:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; border-radius: 4px; }
.trm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.trm-label { font-weight: 600; font-size: 13px; }
.trm-input { flex: 1 1 260px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font: inherit; }
textarea.trm-input { width: 100%; resize: vertical; }
.trm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; }
.trm-pill.on { border-color: var(--brand-cyan); background: var(--info-soft); }
.trm-pill input { margin: 0; }
.trm-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.trm-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: -2px 0 10px 4px; font-size: 13px; }
.trm-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.trm-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-top: 12px; }
.trm-tab { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.trm-tab.on { color: var(--text); border-bottom-color: var(--brand-cyan); font-weight: 600; }
.trm-door { padding: 12px 0 2px; }
.trm-bds { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); padding: 4px 8px; }
.trm-bd { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 13px; min-width: 0; }
.trm-bd.off { opacity: .55; cursor: default; }
.trm-bd-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.trm-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--border);
  border-radius: var(--radius-card); background: var(--surface-subtle); cursor: pointer; text-align: center; }
.trm-drop.on { border-color: var(--brand-cyan); background: var(--info-soft); }
.trm-drop b { font-size: 16px; }
.trm-files { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.trm-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px auto; gap: 8px; align-items: center; padding: 4px 0; }
.trm-files li > span:first-child { overflow-wrap: anywhere; }
.trm-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.trm-acts .btn { text-decoration: none; }
.trm-err { min-height: 18px; font-size: 13px; line-height: 1.45; color: var(--danger); }
.trm-list { list-style: none; margin: 0; padding: 0; }
.trm-list li { padding: 6px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; border-top: 1px solid var(--border); }
.trm-list li:first-child { border-top: 0; }
.trm-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-subtle); border: 1px solid var(--border); }
.trm-badge.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.trm-badge.warn { background: var(--warn-soft); border-color: transparent; }
.trm-badge.bad { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.trm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.trm-ad { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); min-width: 0; }
.trm-ad.st-needs_review { border-color: var(--brand-cyan); }
.trm-ad.st-failed { border-color: var(--danger); }
.trm-ad-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.trm-ad-name { overflow-wrap: anywhere; min-width: 0; }
.trm-ad-words { font-size: 13px; color: var(--text-muted); }
.trm-ad-facts, .trm-ad-bits { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.trm-bar { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--surface-subtle); overflow: hidden; }
.trm-bar.small { height: 4px; margin: 0; }
.trm-bar span { display: block; height: 100%; background: var(--brand-cyan); border-radius: 999px; transition: width .4s ease; }
.trm-say { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.trm-review { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.trm-review > .trm-card { margin-top: 0; }
.trm-left { position: sticky; top: 8px; }
.trm-video { display: block; width: 100%; max-height: 62vh; background: #000; border-radius: var(--radius-small); }
.trm-strip { position: relative; height: 26px; margin: 8px 0 4px; border-radius: var(--radius-small); background: var(--surface-subtle); border: 1px solid var(--border); }
.trm-mark { position: absolute; top: 0; padding: 0; border: 0; cursor: pointer; transform: translateX(-50%); }
.trm-mark.join { width: 9px; height: 100%; background: linear-gradient(var(--text-muted), var(--text-muted)) center / 2px 100% no-repeat; }
.trm-mark.join.on, .trm-mark.join:hover { background-size: 3px 100%; background-image: linear-gradient(var(--brand-cyan), var(--brand-cyan)); }
.trm-mark.dot { top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.trm-mark.dot.done { background: var(--text-muted); }
.trm-nudge { margin-top: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); font-size: 13px; }
.trm-nudge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.trm-nudge-row > span:first-child { min-width: 170px; }
.trm-checks, .trm-warns, .trm-stages { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.trm-checks li { padding: 2px 0; }
.trm-checks li.ok .trm-tick { color: var(--success); font-weight: 700; }
.trm-checks li.bad .trm-tick { color: var(--danger); font-weight: 700; }
.trm-warns li { padding: 5px 9px; margin-bottom: 4px; border-left: 3px solid var(--warn); border-radius: var(--radius-small); background: var(--warn-soft); }
.trm-warns li.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.trm-cands { display: flex; flex-direction: column; gap: 10px; }
.trm-cand { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.trm-cand img { width: 100%; border-radius: var(--radius-small); border: 2px solid var(--danger); background: #000; }
.trm-cand.done img { border-color: var(--border); }
.trm-cand p { margin: 2px 0; }
.trm-meant { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; cursor: pointer; }
.trm-beats { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.45; }
.trm-beats li { padding: 6px 0; border-top: 1px solid var(--border); }
.trm-beats li:first-child { border-top: 0; }
.trm-beats li.gone .trm-beat-text { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.trm-beat-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trm-beat-top .btn { margin-left: auto; }
.trm-beat-text { margin: 4px 0 2px; }
.trm-beats p { margin: 2px 0; }
.trm-script { max-height: 46vh; overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); font-size: 14px; line-height: 1.55; }
.trm-script p { margin: 0 0 6px; }
.trm-time { border: 0; background: none; padding: 0 4px 0 0; font: inherit; font-variant-numeric: tabular-nums; color: var(--accent-text); cursor: pointer; }
.trm-good { color: var(--success); font-size: 13px; }
.trm-bad { color: var(--danger); font-size: 13px; }
.trm-approve { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.trm-why { margin-bottom: 8px; padding: 9px 12px; border-left: 3px solid var(--warn); border-radius: var(--radius-small); background: var(--warn-soft); font-size: 13px; line-height: 1.45; }
.trm-why ul { margin: 4px 0 0; padding-left: 18px; }
.trm-again .btn { margin-top: 6px; }
.trm-stages li { padding: 3px 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .trm-review { grid-template-columns: minmax(0, 1fr); }
  .trm-left { position: static; }
}
@media (max-width: 640px) {
  .trm-acts .btn, .trm-approve .btn { width: 100%; white-space: normal; }
  .trm-cand { grid-template-columns: minmax(0, 1fr); }
  .trm-files li { grid-template-columns: minmax(0, 1fr) auto; }
  .trm-nudge-row > span:first-child { min-width: 0; flex-basis: 100%; }
}