:root{color-scheme:dark;--bg:#11110f;--panel:#1b1b18;--panel2:#22221e;--line:#35352f;
  --fg:#f5f4ef;--muted:#aaa99f;--accent:#ff7b67;--good:#91d69b;--blue:#72a9ff;--bad:#ff9487}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.4 system-ui,-apple-system,sans-serif;overflow:hidden}button,input,select{font:inherit}
button,select{border:1px solid var(--line);border-radius:10px;background:#292924;color:var(--fg);
  padding:8px 11px;cursor:pointer}button:hover,select:hover{border-color:#66665d}button:disabled{opacity:.38;cursor:not-allowed}
button.primary{background:var(--fg);color:#111;border-color:var(--fg);font-weight:700}
button.active{border-color:var(--accent);color:var(--accent)}button.danger{color:var(--bad)}
a{color:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.spacer{flex:1}
header{height:60px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--line)}
header h1{font-size:18px;margin:0}.badge{display:inline-block;border:1px solid var(--line);
  border-radius:99px;padding:3px 8px;color:var(--muted)}
.layout{height:calc(100vh - 60px);display:flex;min-width:0}
aside{width:310px;min-width:230px;max-width:45vw;flex:none;resize:horizontal;border-right:1px solid var(--line);
  overflow:auto;padding:14px}.queue-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.queue-head b{flex:1}.queue{display:grid;gap:8px}.queue-item{text-align:left;width:100%;padding:11px}
.queue-item.on{border-color:var(--accent);background:#2b211e}.queue-item b{display:block;margin-bottom:4px}
.queue-item small{display:block;color:var(--muted);overflow-wrap:anywhere}
.queue-item.review-busy{opacity:.55;cursor:not-allowed}
main{min-width:0;flex:1;overflow:hidden;padding:14px 18px}.empty{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}
.workspace{height:100%;max-width:1600px;margin:auto;display:flex;flex-direction:column;min-height:0}
.editor-body{display:flex;flex-direction:column;flex:1;min-height:0}.cut-dock{flex:none;display:flex;flex-direction:column}
.title-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}.title-row h2{font-size:21px;margin:0 0 3px}
.title-row{flex-wrap:wrap}.title-row>div:first-child{min-width:0;flex:1 1 320px}
/* One line of compact actions; short on room, the whole line drops under the title. */
.title-row .actions{margin-left:auto;display:flex;gap:5px;flex-wrap:nowrap;align-items:center;justify-content:flex-end;max-width:100%;overflow-x:auto}
.title-row .actions button,.title-row .actions select{padding:5px 10px;font-size:13px;white-space:nowrap;flex:none}
.title-row .actions .level-pick,.title-row .actions .group,.title-row .actions .badge{flex:none;white-space:nowrap}
/* The stage: the video and, beside it, the task/segment lists in their own
   scroller — the lists never push the video or the controls down the page. */
.stage{display:flex;gap:12px;flex:1 1 auto;min-height:140px}
.video-wrap{position:relative;min-height:140px;min-width:0;flex:1;background:#000;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;display:grid;place-items:center}
/* Absolute inside the wrap: a percentage height would resolve against the
   video's own aspect ratio and overflow the box (the frame looked cropped);
   pinned to the box, `contain` letterboxes whatever the box's size is. */
video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.side-panel{width:300px;flex:none;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;overflow:auto;gap:6px}
.side-head{display:flex;align-items:baseline;gap:8px;font-size:12px;position:sticky;top:-8px;background:var(--bg);
  padding:4px 0;z-index:1}.side-head b{letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.task-list{display:grid;gap:5px}.task-row{border:1px solid var(--line);border-radius:9px;padding:6px 8px;cursor:pointer;
  display:grid;gap:4px}.task-row.on{border-color:var(--accent)}.task-row b{font-size:12px}
.task-row code{font-size:11.5px;color:var(--muted)}.task-acts{display:flex;gap:4px;flex-wrap:wrap}
.task-acts button{font-size:11px;padding:3px 7px;min-width:0}.task-acts button.danger{color:var(--bad)}
/* Playback controls ride on the video frame; editing stays in one row under it; history sits by Save/Submit. */
.player-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:18px 10px 8px;background:linear-gradient(transparent,#000c 45%);color:#fff}
.player-bar .group,.worker-rail .group,.title-row .history{display:flex;gap:5px;align-items:center}
#workspace .player-bar button,#workspace .player-bar select{background:#ffffff1f;border-color:#ffffff33;color:#fff;padding:5px 9px}#workspace .player-bar select{width:auto;max-width:150px}#workspace .player-bar #variantSelect{max-width:82px}
#workspace .player-bar button.active,#workspace .player-bar button[aria-pressed="true"]{background:#fff;color:#111}
#workspace .player-bar option{color:#111;background:#fff}.player-bar .time{color:#e8e8e2;min-width:0}.video-wrap>.buffer-chip{position:absolute;top:8px;right:10px;z-index:2;padding:3px 8px;border-radius:6px;background:#000a;color:#e8e8e2;pointer-events:none}
.title-row .history{margin-right:6px}
.time{font:12px ui-monospace,monospace;color:var(--muted);min-width:142px}
.selected-time{font:12px ui-monospace,monospace;color:var(--accent)}.selected-time:empty,#deleteBoundary:disabled{display:none}
.timeline-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}.worker-rail .lag-chip{font:11px ui-monospace,monospace;color:var(--muted)}.timeline-toolbar select{max-width:170px}
.worker-rail #prevCut,.worker-rail #nextCut{min-width:34px;font-size:16px}.timeline-toolbar .hint{margin-left:auto;
  font:11px ui-monospace,monospace;color:var(--muted)}
.timeline-wrap{height:120px;flex:none;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:11px;
  background:#171714;scrollbar-color:#555 #222;overscroll-behavior:contain}
.timeline-content{height:118px;min-width:100%;position:relative;touch-action:none;cursor:crosshair;
  background:repeating-linear-gradient(135deg,#1a1a17 0,#1a1a17 9px,#1d1d19 9px,#1d1d19 18px)}
.timeline-ruler{position:absolute;left:0;right:0;top:0;height:27px;border-bottom:1px solid var(--line);pointer-events:none}
.ruler-tick{position:absolute;top:0;height:8px;border-left:1px solid #6a6a62;color:#8e8e85;
  font:10px ui-monospace,monospace;padding:8px 0 0 4px;white-space:nowrap}
.range-lane{position:absolute;left:0;right:0;top:28px;height:31px}.task-band,.idle-band{position:absolute;top:3px;bottom:3px;border-radius:4px}
.task-band{background:#314b38;border:1px solid #4b7656}.idle-band{background:repeating-linear-gradient(135deg,#41413b 0,#41413b 5px,#292925 5px,#292925 10px);border:1px solid #5b5b53}
.lane-label{position:absolute;left:7px;top:4px;font:9px ui-monospace,monospace;color:#d2d2ca;pointer-events:none}
.segment-lane{position:absolute;left:0;right:0;top:61px;height:48px}.segment{position:absolute;top:3px;bottom:4px;
  border:1px solid #4c4c45;background:#292925}.segment:nth-child(even){background:#32322c}
.marker{position:absolute;top:25px;bottom:4px;width:9px;margin-left:-4px;cursor:ew-resize;z-index:5}
.marker:before{content:"";position:absolute;left:3px;top:0;bottom:0;width:3px;background:var(--accent)}
.marker.locked{cursor:not-allowed}.marker.locked:before{background:var(--blue)}.marker.selected:before{box-shadow:0 0 0 3px #fff8}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;z-index:6}
.playhead:before{content:"";position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #fff}
.notice{margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:var(--muted)}
/* The video's status lines: compact chips on one row, wrapping only when long. */
.notices{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.notices:not(:has(.notice:not(.hidden))){display:none}
.notices .notice{margin:0;padding:3px 9px;border-radius:7px;font-size:12.5px;line-height:1.4;max-width:100%}
.notice.bad{border-color:#713c36;color:var(--bad)}.status{min-height:21px;padding:5px 1px;color:var(--muted)}
.segments{display:grid;gap:4px}.seg-row{display:grid;grid-template-columns:130px 1fr;gap:9px;align-items:center;font-size:12px}
.seg-row code{color:var(--muted)}.seg-row input{width:100%;border:1px solid var(--line);border-radius:8px;
  background:#20201c;color:var(--fg);padding:7px 9px}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login form{width:min(390px,100%);
  border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:24px;display:grid;gap:12px}
.login h1{margin:0}.login input{border:1px solid var(--line);border-radius:10px;background:#111;color:var(--fg);padding:11px}
.error{color:var(--bad);min-height:20px}
@media(max-width:850px){body{overflow:auto}.layout{display:block;height:auto}aside{width:auto;max-width:none;resize:none;
  border-right:0;border-bottom:1px solid var(--line);max-height:30vh}main{overflow:visible}.workspace{height:auto}
  .stage{display:block}.video-wrap{height:38vh}.side-panel{width:auto;max-height:32vh;margin-top:10px}
  .title-row{display:block}.title-row .actions{margin-top:9px;justify-content:flex-start;flex-wrap:wrap}
  .timeline-toolbar .hint{display:none}.seg-row{grid-template-columns:100px 1fr}}
@media(max-height:760px) and (min-width:851px){.stage{min-height:110px}.video-wrap{min-height:110px}#hintBar{display:none}}

/* ---- light theme (data-theme on <html>) ---- */
:root[data-theme="light"]{color-scheme:light;--bg:#f6f5f0;--panel:#ffffff;--panel2:#f0efe9;--line:#d6d5cc;
  --fg:#1c1c19;--muted:#66665c;--accent:#d8452f;--good:#2d8a3e;--blue:#2f6fd6;--bad:#c23b2b}
:root[data-theme="light"] button,:root[data-theme="light"] select{background:#fff}
:root[data-theme="light"] button.primary{background:#1c1c19;color:#fff;border-color:#1c1c19}
:root[data-theme="light"] .queue-item.on{background:#fbe7e2}
:root[data-theme="light"] .timeline-wrap{background:#eeede6;scrollbar-color:#bbb #eee}
:root[data-theme="light"] .timeline-content{background:repeating-linear-gradient(135deg,#eeede6 0,#eeede6 9px,#e6e5dd 9px,#e6e5dd 18px)}
:root[data-theme="light"] .segment{border-color:#c9c8bf;background:#e2e1d8}:root[data-theme="light"] .segment:nth-child(even){background:#d8d7ce}
:root[data-theme="light"] .seg-row input,:root[data-theme="light"] .login input,:root[data-theme="light"] textarea,:root[data-theme="light"] input{background:#fff;color:var(--fg)}
:root[data-theme="light"] .playhead{background:#111}:root[data-theme="light"] .playhead:before{border-top-color:#111}
:root[data-theme="light"] .marker.selected:before{box-shadow:0 0 0 3px #1118}
:root[data-theme="light"] .task-band{background:#cfe7d4;border-color:#7fb58d}
:root[data-theme="light"] .lane-label{color:#2e3a31}
:root[data-theme="light"] .idle-band{background:repeating-linear-gradient(135deg,#d9d8cf 0,#d9d8cf 5px,#eeede6 5px,#eeede6 10px);border-color:#b5b4aa}
:root[data-theme="light"] .ruler-tick{color:#55554e;border-left-color:#9c9c93}
:root[data-theme="light"] .toast{background:#1c1c19;color:#fff}

/* ---- new chrome ---- */
input,textarea{font:inherit}textarea{border:1px solid var(--line);border-radius:10px;background:#20201c;color:var(--fg);padding:8px 10px;width:100%;min-height:90px;resize:vertical}
input[type="text"],input[type="search"],input[type="datetime-local"]{border:1px solid var(--line);border-radius:10px;background:#20201c;color:var(--fg);padding:8px 10px}
header .badge.amber{border-color:#8a6d1f;color:#f0c454}header .badge.green{border-color:#3d7a48;color:var(--good)}header .badge.red{border-color:#8a3a30;color:var(--bad)}
header .icon-btn{min-width:36px;padding:6px 9px}#progress{font:12px ui-monospace,monospace;color:var(--muted)}
aside{display:flex;flex-direction:column;gap:9px;resize:none}aside .queue{flex:none}
#videoSearch{width:100%}#listFilters{display:flex;gap:6px;flex-wrap:wrap}#listFilters select,#listFilters input{flex:1;min-width:90px}
#listFilters button.on{border-color:var(--accent);color:var(--accent)}
.review-next{width:100%;margin-bottom:6px}.list-filter-row,.list-pagination{display:flex;align-items:center;gap:6px}.list-filter-row select{min-width:0;flex:1;font-size:12px}
#reviewListFilters{display:grid;gap:8px}#advancedListFilters{border:1px solid var(--line);border-radius:10px;padding:8px}#advancedListFilters summary{cursor:pointer;color:var(--muted)}
.list-filter-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.list-filter-fields label{min-width:0;display:grid;gap:4px;font-size:11px;color:var(--muted)}.list-filter-fields .wide{grid-column:1/-1}
.list-filter-fields input,.list-filter-fields select{min-width:0;width:100%;font-size:12px}.list-filter-fields input{border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--fg);padding:7px 4px;color-scheme:dark}
:root[data-theme="light"] .list-filter-fields input{color-scheme:light}.list-pagination{font-size:11px;justify-content:space-between}.list-pagination button{padding:6px;font-size:11px}.list-pagination span{text-align:center}
.tag-bar{display:grid;flex:none;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:4px}
.queue-item{position:relative;padding-right:60px}.queue-item .pill{float:right;margin:-2px -51px 4px 8px;font:10px ui-monospace,monospace;border:1px solid var(--line);border-radius:99px;padding:2px 7px;color:var(--muted)}
.queue-item .pill.draft{border-color:#8a6d1f;color:#f0c454}.queue-item .pill.submitted{border-color:#3d5a8a;color:var(--blue)}.queue-item .pill.needs_revision{border-color:#8a3a30;color:var(--bad)}
.queue-item .pill.done{border-color:#3d7a48;color:var(--good)}.queue-item .pill.in_progress{border-color:var(--accent);color:var(--accent)}
.queue-item .flag-dot{position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-radius:99px;background:var(--bad)}
.queue-item .proxy-pill{position:absolute;right:22px;bottom:7px;font:9px ui-monospace,monospace;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 5px}
.queue-item.unplayable{opacity:.6}
.resize-handle{width:6px;flex:none;cursor:col-resize;background:transparent}.resize-handle:hover,.resize-handle.on{background:var(--line)}
.flag-banner{border:1px solid #8a6d1f;background:#2a2412;color:#f0c454;border-radius:10px;padding:8px 11px;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flag-banner.resolved{border-color:#3d7a48;background:#15261a;color:var(--good)}.flag-banner .spacer{flex:1}.flag-banner button{padding:4px 9px}
:root[data-theme="light"] .flag-banner{background:#fff6dc}:root[data-theme="light"] .flag-banner.resolved{background:#e4f5e7}
.notice.warn{border-color:#8a6d1f;color:#f0c454}
.media-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#000c;color:#fff;font-size:15px;z-index:3}
/* Switching videos: the old frame blurs out, a spinner fades in after a beat (fast switches never flash), the new frame sharpens in. */
.video-wrap video{transition:filter .45s ease}.video-wrap.loading video{filter:blur(10px) brightness(.55) saturate(.7);transition-delay:.12s}
.video-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;color:#f2f1ea;font:600 10.5px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;background:radial-gradient(ellipse at center,#0000 0,#0008 75%);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.video-wrap.loading .video-loading{opacity:1;visibility:visible;transition:opacity .3s ease .12s,visibility 0s linear .12s}
.video-loading i{width:36px;height:36px;border-radius:50%;background:conic-gradient(#fff0 25%,var(--accent));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2.5px));filter:drop-shadow(0 0 6px var(--accent));animation:videoSpin .9s linear infinite}
.video-loading span{opacity:.8;animation:videoPulse 1.8s ease-in-out infinite}@keyframes videoSpin{to{transform:rotate(1turn)}}@keyframes videoPulse{50%{opacity:.4}}
.worker-rail{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:9px 0 8px}.worker-rail .armed{font:11px ui-monospace,monospace;color:#f0c454}
.worker-rail button.armed{border-color:#f0c454;color:#f0c454}
.timeline-wrap{height:156px}.timeline-content{height:154px;overflow:hidden}
.accepted-lane{position:absolute;left:0;right:0;top:27px;height:5px}.accepted-band{position:absolute;top:0;bottom:0;background:#4b7656;opacity:.5}
.range-lane{top:33px;height:30px}.idle-lane{position:absolute;left:0;right:0;top:64px;height:24px}
.segment-lane{top:92px;height:58px}.marker{top:33px;bottom:auto;height:30px}
/* Clip row: one block per action segment, a sliver apart, edges draggable like the task band's. */
.segment{border-radius:6px;background-clip:padding-box;border-left-width:2px;border-right-width:2px}
.segment .edge{position:absolute;top:-1px;bottom:-1px;width:8px;cursor:ew-resize;z-index:4}.segment .edge.start{left:-4px}.segment .edge.end{right:-4px}
.segment .edge.selected{background:#fff8}
.clip-label{position:absolute;left:6px;top:3px;font-size:10.5px;opacity:.75;pointer-events:none;white-space:nowrap}
/* Fault / Flag act on the clip under the playhead; .on = that clip already has one */
.rail-sep{flex:0 0 1px;align-self:stretch;background:var(--line);margin:0 4px}
.clip-act.on{border-color:#8a3a30;color:var(--bad)}
.fault-tag{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin:4px 0 14px;padding:14px 16px;border-radius:10px;font-size:17px;font-weight:600;text-align:left;border:1px solid #8d5ab0;color:#b07fd0;background:color-mix(in srgb,#8d5ab0 14%,transparent)}.worker-rail #zoomOut,.worker-rail #zoomIn,.worker-rail #zoomFit{padding:5px 9px}.fault-tag b{font-weight:600}.fault-tag small{font-size:12px;font-weight:400;color:var(--muted)}.fault-tag:hover{background:color-mix(in srgb,#8d5ab0 26%,transparent)}
:root[data-theme="light"] .fault-tag{color:#6d3d90}.clip-act.fault.on{border-color:#8d5ab0;color:#b07fd0}
:root[data-theme="light"] .clip-act.fault.on{color:#6d3d90}
.segment.fault{border-color:#8d5ab0;background:#3a2748}:root[data-theme="light"] .segment.fault{background:#e7d8f2;border-color:#a77cc7}
.seg-row .seg-badge{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:1px 8px;background:transparent;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:left}
.seg-row .seg-fault{border-color:#8d5ab0;color:#b07fd0}.seg-row .seg-flag{border-color:#8a3a30;color:var(--bad)}
:root[data-theme="light"] .seg-row .seg-fault{color:#6d3d90}
.task-band.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.task-band .edge,.idle-band .edge{position:absolute;top:-1px;bottom:-1px;width:6px;cursor:ew-resize;z-index:4}
.task-band .edge.start,.idle-band .edge.start{left:-3px}.task-band .edge.end,.idle-band .edge.end{right:-3px}
.task-band .edge.selected,.idle-band .edge.selected{background:#fff8}
.armed-band{position:absolute;top:3px;bottom:3px;border:1px dashed #f0c454;border-right:0;background:#f0c45422;pointer-events:none}
.segment.flagged{border-color:#8a3a30;background:#3a1f1c}
.marker.just-added:before{animation:pop .35s ease-out}@keyframes pop{0%{transform:scaleX(3);background:#fff}100%{transform:none}}
button.magnet-off{opacity:.55}
.seg-row.readonly{grid-template-columns:130px auto 1fr}
/* The reviewer's comments on a worker's segments: amber, where the worker's own flags are red. */
#reviewNotes{white-space:pre-wrap}.segment.commented{border-color:#c98f00;background:#3a321c}
.seg-comment{grid-column:1/-1;border-left:3px solid #c98f00;padding:2px 8px;color:#f0c454;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50;max-width:min(560px,90vw);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);padding:18px 20px;width:min(520px,92vw)}
dialog::backdrop{background:#0009}dialog h3{margin:0 0 10px;font-size:16px}dialog form{display:grid;gap:10px}dialog .row{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
dialog .field{display:grid;gap:5px}dialog label{color:var(--muted);font-size:12px}
.kbd-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;max-height:60vh;overflow:auto}
.kbd-grid kbd{font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--panel2);white-space:nowrap}
.shortcut-list{display:grid;gap:4px;max-height:40vh;overflow:auto}.shortcut-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer}
.shortcut-row.capturing{border-color:var(--accent)}.shortcut-row kbd{font:12px ui-monospace,monospace}
.assign-list{display:grid;gap:4px;max-height:36vh;overflow:auto}.assign-row{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.assign-result{font:12px ui-monospace,monospace;color:var(--muted);white-space:pre-wrap}
.notes-btn{position:relative}.notes-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--fg,#111);color:var(--bg,#fff);font:600 10.5px/17px system-ui,sans-serif;text-align:center}
dialog.notes{width:min(560px,96vw)}.notes-body{max-height:60vh;overflow:auto;margin:10px 0}.note-item{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 8px;background:transparent;cursor:pointer}.note-item.new{border-color:currentColor;border-width:2px}.note-item b{display:block}.note-item small{display:block;color:var(--muted,#888);margin-top:3px}.note-item .rejected{color:#c2410c}.note-item .accepted{color:#15803d}
dialog.leaderboard{width:min(900px,96vw)}#leaderboardDialog form{display:flex;flex-direction:column;max-height:calc(100dvh - 76px)}#leaderboardDialog form>*{flex-shrink:0}#leaderboardDialog .lb-body{flex-shrink:1;min-height:90px}.lb-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lb-head .muted{font:12px ui-monospace,monospace}
.lb-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.lb-summary>div{border:1px solid var(--line);border-radius:8px;padding:8px}.lb-summary b,.lb-summary span{display:block}.lb-summary span{color:var(--muted);font-size:12px;margin-top:4px}.lb-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.lb-pages .muted{flex:1;text-align:center;font-size:12px}.lb-me span{display:block;margin-top:4px}#leaderboardMyPage{margin:8px 0}
@media(max-width:520px){.lb-summary{grid-template-columns:1fr}.lb-summary>div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.lb-summary span{margin:0}.lb-pages .muted{flex-basis:100%;order:1}}
.lb-body{max-height:52vh;overflow:auto}.lb-table{width:100%;border-collapse:collapse;font-size:13px}.lb-table th,.lb-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.lb-table th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.lb-table td.num,.lb-table th.num{text-align:right;font-family:ui-monospace,monospace}.lb-table td.name{white-space:normal;width:100%;min-width:10em}
.lb-legend{font-size:12px;color:var(--muted);margin:0 0 8px}.lb-table td.lb-levels{font:12px ui-monospace,monospace}.lb-split{display:flex;width:96px;height:6px;border-radius:3px;overflow:hidden;background:var(--line);margin-bottom:3px}.lb-split i{display:block}.lb-split .l3{background:var(--blue)}.lb-split .l4{background:var(--accent)}.lb-levels .l3,.lb-legend .l3{color:var(--blue)}.lb-levels .l4,.lb-legend .l4{color:var(--accent)}
/* Light theme: the level labels darken to keep 4.5:1 on white and on the highlighted own row; the bar keeps the theme colours. */
:root[data-theme="light"] .lb-levels .l3,:root[data-theme="light"] .lb-legend .l3{color:#2a62c4}:root[data-theme="light"] .lb-levels .l4,:root[data-theme="light"] .lb-legend .l4{color:#b8321e}
.lb-table tr.me td{background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:600}.lb-table th.grp{text-align:center;border-bottom:0}.lb-table td.key{font-weight:600}.lb-table tfoot td{border-top:2px solid var(--line);border-bottom:0;font-weight:600}.lb-me{font:12px ui-monospace,monospace;color:var(--muted);margin:8px 0}
#lastSaved{font:11px ui-monospace,monospace;color:var(--muted);margin-left:8px}

/* Shortcut reminder strip: the keys that matter while cutting, with their live bindings. */
.hint-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px;margin:0 0 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:12px;color:var(--muted)}
.hint-items{display:flex;gap:12px;flex-wrap:wrap;flex:1}.hint-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hint-item kbd{font:11px ui-monospace,monospace;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--panel);color:var(--fg)}
.hint-bar button.link{border:0;background:none;padding:2px 4px;color:var(--muted);text-decoration:underline;font-size:12px}.hint-bar button.link:hover{color:var(--fg)}
.lang-select{padding:6px 8px}
.seg-row.readonly{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:2px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}.seg-row.readonly .seg-comment{flex-basis:100%}.seg-row .seg-play b{color:var(--fg);font-weight:600;margin-right:4px}.seg-row.readonly code{font-size:11px}
.seg-row .seg-play{font:11px ui-monospace,monospace;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:6px;padding:2px 4px;cursor:pointer;text-align:left}.seg-row .seg-play:hover,.seg-row .seg-play:focus-visible{color:var(--fg);border-color:var(--line)}
:root[data-theme="light"] .hint-bar{background:#f4f3ec}:root[data-theme="light"] .hint-item kbd{background:#fff}

/* What the browser has fetched (or the whole file once buffered): thin bar under the ruler. */
.buffer-lane{position:absolute;left:0;right:0;top:24px;height:3px;pointer-events:none}.buffer-band{position:absolute;top:0;bottom:0;background:#6a8fbf;opacity:.55}
.buffer-chip{font:11px ui-monospace,monospace;color:var(--muted);white-space:nowrap}

.theme-toggle{font-size:16px;line-height:1;padding:6px 10px}
:root[data-theme="light"] .queue-item .pill.draft{color:#a3421f;border-color:#e0b8a9}:root[data-theme="light"] .queue-item .pill.done{color:#2f6b3a;border-color:#a8cfb1}
:root[data-theme="light"] .worker-rail .armed{color:#8a6100}:root[data-theme="light"] .worker-rail button.armed{border-color:#c98f00;color:#8a6100}
:root[data-theme="light"] .media-overlay{background:#f6f5f0e6;color:#1c1c19}:root[data-theme="light"] .accepted-band{background:#7fb58d}
:root[data-theme="light"] .buffer-band{background:#3b6fb5}
:root[data-theme="light"] .segment.flagged{border-color:#c98f00}:root[data-theme="light"] .notice.warn{background:#fff6dc}
:root[data-theme="light"] .queue-item .pill.submitted{color:#2b5aa0;border-color:#a9c2e8}:root[data-theme="light"] .queue-item .pill.needs_revision{color:#a3421f}
:root[data-theme="light"] .notice.warn{color:#8a6100;border-color:#e0c37a}:root[data-theme="light"] .segment.flagged{background:#f3d9d4}
:root[data-theme="light"] .segment.commented{background:#f6e7bf}:root[data-theme="light"] .seg-comment{color:#8a6100}
/* The review flash, as on the phone's sample cuts and /admin's Review cuts (the cut
   math is shared in cut_core.js): the frame lights as playback passes a cut. */
.cut-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 4px var(--accent);display:flex;justify-content:center;align-items:flex-start;padding-top:14px}
.cut-flash b{background:var(--accent);color:#fff;border-radius:12px;padding:8px 16px;font:700 18px ui-monospace,Menlo,monospace;letter-spacing:2px}
.cut-flash.show{animation:cutFlash 320ms ease-out forwards}
@keyframes cutFlash{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.cut-flash.show{animation:none;opacity:1}.video-loading i,.video-loading span{animation:none}.video-wrap video{transition:none}}

/* transport icons: SVG, so they sit centred in every font */
.icon-btn{display:inline-flex;align-items:center;justify-content:center}.icon-btn .icon{width:14px;height:14px;fill:currentColor}
#play .i-pause,#play.playing .i-play{display:none}#play.playing .i-pause{display:inline}

/* Worker cuts reviewed from /cut: the decision tones, the level marker, comments on clips. */
.notice.ok{border-color:#3d7a48;color:var(--good)}#readOnlyBar b{color:var(--fg);font-weight:600}#readOnlyBar button{padding:4px 10px;margin-top:4px}
#listFilters #reviewFilter{flex-basis:100%}.level-pick{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.level-pick select{padding:5px 7px}
.level-pill{display:inline-block;vertical-align:1px;margin-left:4px;font:10px ui-monospace,monospace;font-weight:400;border:1px solid #3d5a8a;color:var(--blue);border-radius:99px;padding:0 6px}
.queue-item small.wcut{margin-top:2px}.queue-item small.wcut.pending{color:#f0c454}.queue-item small.wcut.accepted{color:var(--good)}.queue-item small.wcut.rejected{color:var(--bad)}
.seg-row .seg-note{border-color:#8a6d1f;color:#f0c454}.clip-act.comment.on{border-color:#c98f00;color:#f0c454}
.route-pick{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0;display:grid;gap:8px}.route-pick legend{color:var(--muted);font-size:12px;padding:0 4px}
.route-pick label{display:flex;gap:9px;align-items:flex-start;color:var(--fg);font-size:13px;cursor:pointer}.route-pick input{margin-top:3px}.route-pick span{display:grid;gap:2px}.route-pick small{color:var(--muted);font-size:12px}
:root[data-theme="light"] .notice.ok{background:#e4f5e7;border-color:#a8cfb1;color:#2f6b3a}:root[data-theme="light"] #readOnlyBar.notice.bad,:root[data-theme="light"] #holdBar.notice.bad{background:#fbe9e6;border-color:#e0b8a9;color:#a3421f}
:root[data-theme="light"] .level-pill{border-color:#a9c2e8;color:#2b5aa0}:root[data-theme="light"] .seg-row .seg-note{border-color:#e0c37a;color:#8a6100}:root[data-theme="light"] .clip-act.comment.on{color:#8a6100}
:root[data-theme="light"] .queue-item small.wcut.pending{color:#8a6100}:root[data-theme="light"] .queue-item small.wcut.accepted{color:#2f6b3a}:root[data-theme="light"] .queue-item small.wcut.rejected{color:#a3421f}
/* Campaigns: the hold on a claimed video, and which campaign offers a video. */
#holdBar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}#holdBar button{padding:4px 10px;margin-left:auto}
.campaign-pill{display:inline-block;vertical-align:1px;margin-left:4px;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px ui-monospace,monospace;font-weight:400;border:1px solid #8a6d1f;color:#f0c454;border-radius:99px;padding:0 6px}
@media(max-width:600px){.campaign-table th:nth-child(3),.campaign-table td:nth-child(3){display:none}.campaign-table td.name{min-width:6em}}
#campaignHolding.bad{color:var(--bad)}#campaignBrief{margin:6px 0 8px}#campaignPick{max-width:100%}
:root[data-theme="light"] .campaign-pill{border-color:#e0c37a;color:#8a6100}

/* ---- One-bar timeline (2026-10-06): tasks (one colour each), idle, clips and unusable time share
   one row under the ruler and the loading line. ID selectors win over the older per-row rules. ---- */
.timeline-wrap{height:auto;padding-bottom:2px}.timeline-content,:root[data-theme="light"] .timeline-content{height:var(--tl-h,64px);background:none}
/* By default the bar is about as tall as its clip numbers (2026-10-08): more room for the video. */
#acceptedLane,#rangeLane,#idleLane,#segmentLane{top:31px;height:28px}
#timelineContent .marker{top:31px;height:28px}
/* Grip above the timeline: drag up for a taller timeline; the bar keeps its size (cut.js, --tl-h). */
.timeline-grip{flex:none;height:10px;cursor:row-resize;touch-action:none;position:relative}
.timeline-grip::after{content:"";position:absolute;left:50%;top:3px;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:var(--line)}
.timeline-grip:hover::after{background:var(--muted)}
/* No empty band under the timeline: the status line takes room only once it says something. */
main{padding-bottom:4px}.status:has(#statusText:empty):has(#lastSaved:empty){display:none}
/* Scrollbar always shown, so Fit no longer drops it and jumps the bar, and thick enough to grab.
   scrollbar-color:auto lets Chrome use the ::-webkit-scrollbar sizes below. */
.timeline-wrap,:root[data-theme="light"] .timeline-wrap{overflow-x:scroll;scrollbar-color:auto}
.timeline-wrap::-webkit-scrollbar{height:16px}
.timeline-wrap::-webkit-scrollbar-track{background:#222}
.timeline-wrap::-webkit-scrollbar-thumb{background:#666;border:3px solid #222;border-radius:8px;cursor:grab}
.timeline-wrap::-webkit-scrollbar-thumb:hover{background:#888}
:root[data-theme="light"] .timeline-wrap::-webkit-scrollbar-track{background:#e2e1d9}
:root[data-theme="light"] .timeline-wrap::-webkit-scrollbar-thumb{background:#aaa;border-color:#e2e1d9}
:root[data-theme="light"] .timeline-wrap::-webkit-scrollbar-thumb:hover{background:#888}
.stage{gap:0}.panel-edge{position:relative;flex:none;width:0;z-index:5}.side-edge{width:12px}
.edge-tab{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:18px;height:46px;padding:0;border-radius:9px;font-size:19px;line-height:1;color:var(--muted)}
.side-edge .edge-tab{left:50%}.edge-tab:hover{color:var(--fg)}
.edge-tab{opacity:0;transition:opacity .15s}.panel-edge::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:20px}.side-edge::before{left:-4px}
.panel-edge:hover .edge-tab,.edge-tab:focus-visible,#listPanel:hover+.list-edge .edge-tab,.stage:has(#sidePanel:hover) .edge-tab{opacity:1}@media(pointer:coarse){.edge-tab{opacity:1}}body.list-collapsed .list-edge .edge-tab{transform:translate(0,-50%);border-radius:0 9px 9px 0}body.side-collapsed .side-edge{width:0}body.side-collapsed .side-edge .edge-tab{left:0;transform:translate(-100%,-50%);border-radius:9px 0 0 9px}
@media(min-width:851px){body.list-collapsed #listPanel,body.side-collapsed #sidePanel{display:none}}@media(max-width:850px){.panel-edge{display:none}.side-panel{margin-top:10px}}
/* Plain track; only unusable time is striped, with a dashed edge, so it cannot pass for background. */
#acceptedLane .unusable-band{position:absolute;top:0;bottom:0;border-radius:5px;border:1px dashed var(--muted);box-sizing:border-box;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 55%,var(--bg)) 0 4px,color-mix(in srgb,var(--muted) 15%,var(--bg)) 4px 8px)}
#rangeLane .task-band{top:0;bottom:0;border-radius:5px;background:var(--task,#4f7cc4);border:1px solid color-mix(in srgb,var(--task,#4f7cc4) 70%,#000)}
#rangeLane .task-band.selected{box-shadow:0 0 0 2px var(--fg)}
#rangeLane .lane-label{color:#fff;font-weight:600;text-shadow:0 1px 2px #0008}
#idleLane .idle-band{top:0;bottom:0;border-radius:5px;border:1px solid color-mix(in srgb,var(--muted) 60%,transparent);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 35%,transparent) 0 5px,transparent 5px 10px),color-mix(in srgb,var(--panel2) 85%,transparent)}
#idleLane .lane-label{color:var(--muted);text-shadow:none}
/* Clips sit on top of their task: see-through, numbered at the bottom, tinted when flagged/commented/faulted. */
#segmentLane .segment{top:0;bottom:0;background:transparent;border:0;border-radius:5px}
#segmentLane .segment:nth-child(even){background:transparent}
#segmentLane .clip-label{top:auto;bottom:4px;color:#fff;opacity:.9;text-shadow:0 1px 2px #0008}
#segmentLane .segment.flagged{box-shadow:inset 0 0 0 3px #e5484d}
#segmentLane .segment.commented{box-shadow:inset 0 0 0 3px #f5c400}
#segmentLane .segment.fault{background:repeating-linear-gradient(135deg,#8d5ab099 0 6px,#8d5ab044 6px 12px);box-shadow:inset 0 0 0 2px #8d5ab0}
/* Cut lines read on any task colour. */
#timelineContent .marker:before{background:#fff;box-shadow:0 0 0 1px #0007}
#timelineContent .marker.selected:before{background:var(--accent);box-shadow:0 0 0 3px #fff8}
.task-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--task)}
/* Task / idle / clip edges: a visible grab bar on hover; drag it to move that start or end. */
#timelineContent .edge{cursor:ew-resize}
/* Edges are invisible hit areas centred on the boundary; each draws the same thin centred line, so the
   handles stacked on a shared boundary (task end, next start, both clips) read as one. */
#timelineContent .edge.selected,#timelineContent .edge:hover{background:none;box-shadow:none}
#timelineContent .edge::after{content:"";position:absolute;top:3px;bottom:3px;left:50%;width:3px;margin-left:-1.5px;border-radius:2px;
  background:#fff;box-shadow:0 0 0 1px #0008;opacity:0;transition:opacity .1s}
#timelineContent .edge:hover::after{opacity:.75}#timelineContent .edge.selected::after{opacity:1}
#rangeLane .task-band .edge,#idleLane .idle-band .edge{position:absolute;top:0;bottom:0;width:10px;z-index:4}
#rangeLane .task-band .edge.start,#idleLane .idle-band .edge.start{left:-5px}#rangeLane .task-band .edge.end,#idleLane .idle-band .edge.end{right:-5px}

/* ---- Review mode (2026-10-07): a worker's cut shown for review hides the editing controls ---- */
.review-only{display:none}body.reviewing .review-only{display:flex}body.reviewing .edit-only{display:none}
.review-actions{display:flex;gap:7px;flex-wrap:wrap}.review-actions:empty{display:none}.review-actions button{padding:7px 14px;font-weight:600}
.review-actions button[data-act="approve"]{background:#2f8a4e;border-color:#2f8a4e;color:#fff}
.review-actions button[data-act="reject"]{border-color:#c4473a;color:#e5685a}:root[data-theme="light"] .review-actions button[data-act="reject"]{color:#b03a2e}
.clip-pos{font:12px ui-monospace,monospace;color:var(--muted);min-width:56px;text-align:center}
.seg-row.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:6px}
body.reviewing .task-acts{display:none}aside{overflow-x:hidden}.queue{grid-template-columns:minmax(0,1fr)}
/* Split clips (2026-10-07): each clip is its own block in its task colour, a gap marks each split,
   the number sits big in the middle. The task band behind is only its label and draggable ends. */
#rangeLane .task-band,#rangeLane .task-band.selected{background:none;border:0;box-shadow:none}
#segmentLane .segment,#segmentLane .segment:nth-child(even){background:var(--task,#4f7cc4);background-clip:padding-box;border:0 solid transparent;border-width:0 0 0 1px;border-radius:3px}
#segmentLane .clip-label{left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%);text-align:center;font:700 17px/1 system-ui,sans-serif;opacity:1;overflow:hidden}
#rangeLane .lane-label{z-index:1}
#timelineContent .marker:not(.selected):not(.locked):before{background:transparent;box-shadow:none}
#timelineContent .marker:not(.selected):hover:before{background:#fff9}
/* Too narrow for its number (many short clips, zoomed out): show the bare block; zoom in to read it. */
#segmentLane .segment{container-type:inline-size}
@container (max-width:48px){#segmentLane .clip-label{display:none}}
/* Resizable tasks panel: drag its edge strip (cut.js); the list resizes by #colHandle. */
@media(min-width:851px){#sidePanel{width:var(--side-w,300px);min-width:200px;max-width:45vw}.side-edge::before,.side-edge,.list-edge::before{cursor:col-resize}}
/* List tabs (cut.js LIST_TABS): an even grid of label + count, all always shown; empty ones fade. A filter row with
   nothing visible takes no space. */
.tag-bar .tab{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;padding:5px 7px;border-radius:8px;background:transparent;color:var(--muted);font-size:12px}
.tag-bar .tab b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag-bar .tab span{font-variant-numeric:tabular-nums;font-weight:600}
.tag-bar .tab:hover{color:var(--fg)}.tag-bar .tab.empty{opacity:.5}.tag-bar .tab.on{opacity:1;color:var(--fg);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tab-empty{display:grid;gap:4px;padding:18px 12px;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}.tab-empty b{color:var(--fg);font-size:13px}
#listFilters:not(:has(>:not(.hidden))){display:none}
#confirmBody{white-space:pre-line}
/* Task / Idle / Action show their key, e.g. "Task T" (cut.js updateShortcutHints sets data-key). */
#taskToggle[data-key]::after,#idleToggle[data-key]::after,#atomicBtn[data-key]::after,#failedRetryBtn[data-key]::after{content:attr(data-key);margin-left:7px;padding:0 5px;font:11px ui-monospace,monospace;border:1px solid currentColor;border-radius:5px;opacity:.6;vertical-align:1px}
/* Worker-cut review header: who sent it beside the title, clip lengths as stat boxes. */
.title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.title-line h2{margin-bottom:3px}
.byline{display:inline-flex;align-items:baseline;gap:7px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-size:13px;color:var(--muted)}.byline b{color:var(--fg);font-weight:600}.byline:empty{display:none}
.clip-boxes{display:inline-flex;flex-wrap:wrap;margin-top:6px;border:1px solid var(--line);border-radius:7px;background:var(--panel);overflow:hidden}.clip-boxes:empty{display:none}
.clip-box{display:flex;align-items:baseline;gap:6px;padding:3px 10px;border-left:1px solid var(--line)}.clip-box:first-child{border-left:0}
.clip-box span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.clip-box b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.clip-box small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.clip-box.usual{background:var(--panel2)}
.key-hint{margin-left:6px;opacity:.75;white-space:nowrap}.key-hint kbd{padding:0 5px;border:1px solid currentColor;border-radius:4px;font:11px ui-monospace,monospace}

/* Upright time axis: the same editable track runs down a dock beside the video. */
@media(min-width:851px){
  body.timeline-vertical .editor-body{flex-direction:row;gap:12px}
  body.timeline-vertical .status{display:flex;min-height:28px;max-height:28px;overflow:auto;flex:none}
  body.timeline-vertical .status:has(#statusText:empty):has(#lastSaved:empty){display:flex}
  body.timeline-vertical .stage{min-width:0}
  body.timeline-vertical .cut-dock{width:320px;min-width:320px;display:grid;grid-template-columns:142px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0}
  body.timeline-vertical #workerRail{grid-column:1;grid-row:1;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:auto;padding:0 2px 0 0;min-height:0}
  body.timeline-vertical #workerRail .group{flex-wrap:wrap;justify-content:center}
  body.timeline-vertical #workerRail>.group.edit-only:first-child{flex-direction:column;align-items:stretch}
  body.timeline-vertical #workerRail button{font-size:12px;padding:7px 8px}
  body.timeline-vertical #workerRail .spacer{display:none}
  body.timeline-vertical #workerRail .rail-sep{width:100%;height:1px;margin:4px 0}
  body.timeline-vertical #armedChip,body.timeline-vertical #selectedTime{text-align:center;overflow-wrap:anywhere}
  body.timeline-vertical #hintBar{grid-column:1 / -1;grid-row:2;min-width:0;margin:0}
  body.timeline-vertical #timelineGrip{display:none}
  body.timeline-vertical #timelineWrap{grid-column:2;grid-row:1;min-height:0;height:100%;padding:0;overflow-x:hidden;overflow-y:scroll}
  body.timeline-vertical #timelineWrap::-webkit-scrollbar{width:14px}
  body.timeline-vertical #timelineContent{height:100%;width:100%;min-width:0;min-height:100%}
  body.timeline-vertical #timelineRuler{left:0;right:auto;top:0;width:76px;height:100%;border-bottom:0;border-right:1px solid var(--line)}
  body.timeline-vertical .ruler-tick{left:0;width:76px;height:0;border-left:0;border-top:1px solid #6a6a62;padding:3px 4px;text-align:right}
  body.timeline-vertical #bufferLane{left:78px;right:auto;top:0;width:3px;height:100%}
  body.timeline-vertical #acceptedLane,body.timeline-vertical #rangeLane,body.timeline-vertical #idleLane,body.timeline-vertical #segmentLane{left:85px;right:4px;top:0;height:100%}
  body.timeline-vertical .buffer-band{left:0;right:0;bottom:auto;width:100%}
  body.timeline-vertical #acceptedLane .unusable-band,body.timeline-vertical #rangeLane .task-band,body.timeline-vertical #idleLane .idle-band,body.timeline-vertical #segmentLane .segment,body.timeline-vertical .armed-band{left:0;right:0;bottom:auto;width:100%}
  body.timeline-vertical #segmentLane .segment{border-width:1px 0 0;container-type:size}
  body.timeline-vertical #segmentLane .clip-label{display:block;font-size:13px}
  body.timeline-vertical #rangeLane .lane-label,body.timeline-vertical #idleLane .lane-label{left:4px;top:4px;font-size:9px}
  body.timeline-vertical #timelineContent .marker{left:85px;width:calc(100% - 89px);height:10px;margin-left:0;margin-top:-5px;cursor:ns-resize}
  body.timeline-vertical #timelineContent .marker:before{left:0;right:0;top:4px;bottom:auto;width:auto;height:2px}
  body.timeline-vertical #timelineContent .edge{left:0;right:0;width:100%;height:10px;bottom:auto;cursor:ns-resize}
  body.timeline-vertical #timelineContent .edge.start{top:-5px}
  body.timeline-vertical #timelineContent .edge.end{top:auto;bottom:-5px}
  body.timeline-vertical #timelineContent .edge::after{left:3px;right:3px;top:50%;bottom:auto;width:auto;height:3px;margin-left:0;margin-top:-1.5px}
  body.timeline-vertical #playhead{left:0;right:0;bottom:auto;width:100%;height:2px}
  body.timeline-vertical #playhead::before{left:0;top:-4px;border:5px solid transparent;border-left:7px solid #fff}
  :root[data-theme="light"] body.timeline-vertical #playhead::before{border-top-color:transparent;border-left-color:#111}
  /* The rail as a 6-column grid: every block full width; nudges, zoom and magnet pair up in rows.
     Group display is set only where the group is visible (edit-only/review-only hide it otherwise). */
  body.timeline-vertical #workerRail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:6px}
  body.timeline-vertical #workerRail>*{grid-column:1 / -1;margin:0}
  body.timeline-vertical #workerRail .rail-sep{height:1px;margin:2px 0}
  body.timeline-vertical #workerRail>.review-only{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  body.timeline-vertical #clipPos{grid-column:1 / -1;order:-1;min-width:0}
  body.timeline-vertical:not(.reviewing) #workerRail>.group.edit-only:not(:first-child){display:grid;grid-template-columns:1fr 1fr;gap:6px}
  body.timeline-vertical #prevCut{order:1}body.timeline-vertical #nextCut{order:2}
  body.timeline-vertical #back{order:3}body.timeline-vertical #forward{order:4}
  body.timeline-vertical #reviewBtn{order:5;grid-column:1 / -1}
  body.timeline-vertical #magnetBtn{grid-column:span 4}
  body.timeline-vertical #lagChip{grid-column:span 2;align-self:center;text-align:center}
  body.timeline-vertical #zoomOut,body.timeline-vertical #zoomFit,body.timeline-vertical #zoomIn{grid-column:span 2;padding:7px 0}
  body.timeline-vertical #zoomLabel{justify-self:center}
}
@container(max-height:22px){body.timeline-vertical #segmentLane .clip-label{display:none}}