: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,a.btn{border:1px solid var(--line);border-radius:10px;background:#292924;color:var(--fg);
  padding:8px 11px;cursor:pointer}button:hover,select:hover,a.btn:hover{border-color:#66665d}a.btn{display:inline-block;text-decoration:none;white-space:nowrap}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:56px;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 - 56px);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}.queue-item.review-busy:disabled{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;container-type:inline-size}
.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:10px;flex-wrap:nowrap;align-items:center;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 .actions .group{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,#deleteTaskBtn:disabled{display:none}
.timeline-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}.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)}
/* A 2 h take lists 2,000 segments: rows off screen skip layout, or every edit laid them all out again. */
.segments{display:grid;gap:4px}.segments>.seg-row{content-visibility:auto;contain-intrinsic-size:auto 26px}.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,:root[data-theme="light"] a.btn{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:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#listFilters select,#listFilters input,#listFilters button{min-width:0}
#listFilters button.on{border-color:var(--accent);color:var(--accent)}
.review-next{width:100%;margin-bottom:6px}.list-pagination{display:flex;align-items:center;gap:6px}
#reviewListFilters{display:grid;grid-template-columns:minmax(0,1fr);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 button{padding:6px 8px;font-size:13px}.worker-rail #selectedTime{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.worker-rail button[data-key]::after{margin-left:5px;padding:0 4px}.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)}#zoomOut,#zoomIn,#zoomFit{padding:8px 9px;min-width:34px}.fault-tag b{font-weight:600}.fault-tag small{font-size:12px;font-weight:400;color:var(--muted)}.fault-tag:hover,.fault-tag.on{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:not(.hidden){display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;border-left:3px solid #f5c400}#reviewNotes .rn-note{color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}#reviewNotes .rn-count{padding-left:10px;border-left:1px solid var(--line);color:var(--muted)}.segment.commented{border-color:#c98f00;background:#3a321c}
.video-comment{position:absolute;top:8px;left:10px;z-index:2;max-width:min(60%,520px);padding:6px 10px;border-left:3px solid #f5c400;border-radius:6px;background:#000c;color:#f0c454;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}
.seg-comment{grid-column:1/-1;display:block;width:100%;text-align:left;background:none;border:0;border-radius:0;border-left:3px solid #c98f00;padding:2px 8px;color:#f0c454;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.seg-comment:hover,.seg-comment:focus-visible{border-color:#c98f00;background:color-mix(in srgb,#c98f00 14%,transparent)}
.video-message{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:3;max-width:min(86%,560px);padding:8px 14px;border-left:3px solid var(--bad);border-radius:8px;background:#000d;color:#fff;font-size:15px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}.video-message.show{opacity:1}
.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}
#helpDialog{width:min(900px,94vw)}.kbd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 20px;align-items:start;max-height:65vh;overflow:auto}
.kbd-grid h4{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kbd-grid kbd{flex:none;font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--panel2);white-space:nowrap}
.shortcut-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 6px;border-radius:6px;font-size:13px;cursor:pointer}.shortcut-row:hover{background:var(--panel2)}
.shortcut-row.capturing{outline:1px solid var(--accent)}
.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}.note-item .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.forum-pane [hidden]{display:none}.forum-pane label{display:inline-flex;gap:4px;align-items:center}.forum-compose textarea{display:block;width:100%;min-height:90px;margin:10px 0 6px;box-sizing:border-box}
dialog.leaderboard{width:min(900px,96vw)}#leaderboardWorkerDialog form{display:flex;flex-direction:column;max-height:calc(100dvh - 76px)}#leaderboardWorkerDialog form>*{flex-shrink:0}#leaderboardWorkerDialog .lb-body{flex-shrink:1;min-height:90px;max-height:none}.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,.lb-split .rgb{background:var(--blue)}.lb-split .l4,.lb-split .mocap{background:var(--accent)}.lb-levels .l3,.lb-legend .l3,.lb-levels .rgb,.lb-legend .rgb{color:var(--blue)}.lb-levels .l4,.lb-legend .l4,.lb-levels .mocap,.lb-legend .mocap{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,:root[data-theme="light"] .lb-levels .rgb,:root[data-theme="light"] .lb-legend .rgb{color:#2a62c4}:root[data-theme="light"] .lb-levels .l4,:root[data-theme="light"] .lb-legend .l4,:root[data-theme="light"] .lb-levels .mocap,:root[data-theme="light"] .lb-legend .mocap{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 th button.lb-sort{background:none;border:0;border-radius:3px;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}.lb-sort:hover,.lb-table th[aria-sort="descending"] .lb-sort{color:var(--fg)}.lb-table th[aria-sort="descending"] .lb-sort{font-weight:700}.lb-sort i{font-style:normal;margin-left:3px;opacity:.35}.lb-table th[aria-sort="descending"] .lb-sort i{opacity:1;color:var(--accent)}.lb-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.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}
.lb-worker{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.lb-worker:hover{color:var(--accent)}.lb-worker:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}.lb-stats>div{border:1px solid var(--line);border-radius:8px;padding:8px}.lb-stats b{display:block;margin-bottom:4px}.lb-stats span{display:block;color:var(--muted);font-size:12px;margin-top:2px}#leaderboardWorkerBody h4{margin:14px 0 6px}
.lb-table td.lb-review{white-space:normal;min-width:9em}.lb-review small{display:block;color:var(--muted)}.lb-review .accepted{color:#15803d}.lb-review .rejected{color:#c2410c}
@media(max-width:520px){.lb-stats{grid-template-columns:1fr}}
#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. */
.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)}

/* 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{grid-column:1/-1}.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}
.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"] .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}
/* /cut/example: the examples list and the read-only cutter, without the queue's filters or any editing control. */
body.example-page :is(#videoSearch,#listFilters,#reviewListFilters,#tagBar,#listPagination,#campaignsBtn,#refresh,#workModeControl,#notesBtn,#undoBtn,#redoBtn,#dirty,#levelPick,#startBtn,#cutAsWorker,#claim,#release,#save,#submit,#discardDraft,#assignBtn,#withdrawBtn){display:none}
.example-hint{margin:0 0 2px;padding:2px 0 8px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px}
/* The picker's note above the video: a highlighted box with a "Note" tag, not the read-only warning. */
body.example-page #readOnlyBar{flex:1 1 100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--accent);border-left-width:5px;
  border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--fg);font-size:15px;font-weight:500;line-height:1.45}
body.example-page #readOnlyBar .pick-label{flex:none;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--bg);font-size:12px;font-weight:700;white-space:nowrap}
/* /cut/forum: Questions as the whole page, without the cutter's list, timeline, video navigation or bell. One centred
   column like a forum: a feed of question cards; a question's own view puts the post (the clip over its timeline inside
   it) on the left and the replies, with the reply box under them, on the right, each scrolling on its own. */
body.forum-page :is(.layout,#queueBtn,.video-nav,#modeChip,#stateChip,#workModeControl,#notesBtn,#forumLink){display:none}
.forum-main{height:calc(100dvh - 56px);overflow:auto;padding:16px}.forum-main[hidden]{display:none}
.forum-main>*{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.forum-main h2{margin:0;font-size:18px}.forum-list-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.forum-list{display:flex;flex-direction:column;gap:10px}
/* The feed: a header card, Open/Resolved/All as tabs, the pinned guides, the questions; the top cutters beside it. */
.forum-feed{display:flex;flex-direction:column;gap:12px;min-width:0}#forumGuides:empty{display:none}
.forum-hero{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel) 70%)}
.forum-hero>div{flex:1;min-width:220px}.forum-main .forum-hero h2{font-size:24px}.forum-hero p{margin:4px 0 0}
.forum-tabs{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--panel)}.forum-pane .forum-tabs label{display:block;cursor:pointer}
.forum-tabs input{position:absolute;opacity:0;pointer-events:none}.forum-tabs span{display:block;padding:4px 14px;border-radius:99px;font-weight:600;color:var(--muted)}
.forum-tabs input:checked+span{background:var(--fg);color:var(--bg)}.forum-tabs input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.forum-guide{border-left:3px solid #f0c454;background:color-mix(in srgb,#f0c454 7%,var(--panel))}.forum-guide .forum-avatar{background:none;border:0;font-size:16px}
.forum-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.forum-thumb.guide::before{content:"📘"}
.forum-board{display:flex;flex-direction:column;gap:14px;padding:16px}.forum-board-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.forum-board h3{margin:0;font-size:15px;font-weight:700}
.forum-board-head select{padding:4px 8px;border-radius:8px;font-size:12px}
.forum-board{--gold:#c9a227;--silver:#9ba5af;--bronze:#b07548}
.forum-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;padding-top:4px;border-bottom:1px solid var(--line)}
.forum-step{grid-row:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}.forum-step.p1{grid-column:2}.forum-step.p2{grid-column:1}.forum-step.p3{grid-column:3}
.forum-step b{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;font-size:12px;font-weight:600;line-height:1.3}.forum-step small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.forum-step .forum-avatar{width:44px;height:44px;margin-bottom:6px;font-size:16px;border:2px solid var(--medal)}.forum-step.p1 .forum-avatar{width:56px;height:56px;font-size:20px}
.forum-step.p1{--medal:var(--gold)}.forum-step.p2{--medal:var(--silver)}.forum-step.p3{--medal:var(--bronze)}
.forum-step.me .forum-avatar{outline:2px solid var(--accent);outline-offset:2px}
.forum-block{width:100%;margin-top:8px;display:grid;place-items:center;border-radius:6px 6px 0 0;background:var(--medal);color:#fff;font-size:20px;font-weight:700}
.p1 .forum-block{height:56px}.p2 .forum-block{height:40px}.p3 .forum-block{height:28px}
.forum-board-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.forum-board-list:empty{display:none}
.forum-board-list li{display:grid;grid-template-columns:18px 28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
.forum-board-list .rank{text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.forum-board-list .forum-avatar{width:28px;height:28px}
.forum-board-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}.forum-board-list small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.forum-board-list li:hover{background:var(--panel2)}.forum-board-list li.me{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.forum-board-me{padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
#forumBoardMore{align-self:center;padding:4px 8px;border:0;background:none;color:var(--fg);font-size:13px;font-weight:600}#forumBoardMore::after{content:" →"}#forumBoardMore:hover{text-decoration:underline}
@media (min-width:1100px){.forum-main>#forumListView:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;max-width:1120px}
  .forum-side{position:sticky;top:0}}
.forum-card{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.forum-title-input{display:block;width:100%;margin:10px 0 0;padding:8px 10px;font-size:15px;font-weight:600}
.forum-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}.forum-head .forum-by{margin-right:auto}
.forum-by{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.forum-by small{color:var(--muted)}.forum-by button{margin-left:auto;padding:1px 8px;font-size:11px}
.forum-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:11px;font-weight:700}
.forum-pill{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:99px;font-size:11px;font-weight:600;color:var(--muted)}
.forum-pill.open{color:var(--blue);border-color:currentColor}.forum-pill.resolved{color:var(--good);border-color:currentColor}
.forum-title{display:block;margin:0;font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}h1.forum-title{margin:6px 0 0;font-size:22px}
#forumThread .forum-desc{margin-top:8px}.forum-desc{margin:0;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.forum-about{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-weight:600}
.forum-flair{margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}
/* A feed card: who and when across the top, then the text and the still of the clip on the right. */
.forum-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;width:100%;text-align:left;font:inherit;color:var(--fg);cursor:pointer}
.forum-item:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--line))}.forum-item.pinned{border-left:3px solid #f0c454}
.forum-item .forum-head{grid-column:1/-1}.forum-item-text{display:flex;flex-direction:column;gap:6px;min-width:0}.forum-item-text:last-child{grid-column:1/-1}
.forum-item .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.forum-item .forum-desc{-webkit-line-clamp:3;font-size:14px;color:var(--muted)}
.forum-last{padding:6px 10px;border-left:2px solid var(--line);font-size:13px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.forum-last em{font-style:normal;font-weight:600;color:var(--fg)}
.forum-foot{font-size:12px;font-weight:600;color:var(--muted)}
.forum-thumb{position:relative;flex:none;align-self:center;width:168px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--panel2);display:grid;place-items:center}
.forum-thumb::before{content:"▶";font-size:22px;opacity:.5}.forum-item.resolved .forum-thumb{opacity:.6}
.forum-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.forum-thumb i{position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:4px;background:#000b;color:#fff;font:600 10px ui-monospace,monospace;font-style:normal}
/* The post: the clip and its timeline sit in it, the actions close it. */
.forum-back{align-self:flex-start}.forum-post-card{display:flex;flex-direction:column;gap:10px}#forumClipBox:empty{display:none}
#forumClipBox{display:flex;flex-direction:column;gap:6px}
.forum-player{position:relative;background:#000;border-radius:10px;overflow:hidden}
.forum-clip{position:static;display:block;width:100%;height:auto;max-height:50vh;background:#000}
/* The asked part's own timeline: the ruler, task names, the clips in task colours (hatched gaps are idle), the playhead. */
.forum-timeline{position:relative;height:76px;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden;cursor:pointer;touch-action:none;user-select:none}
.forum-ruler{position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1px solid var(--line)}
.forum-ruler span{position:absolute;top:0;height:20px;padding:3px 4px;border-left:1px solid #6a6a62;font:10px ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.forum-tasks{position:absolute;left:0;right:0;top:22px;height:14px}.forum-tasks span{position:absolute;padding-left:4px;font:600 9px ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.forum-bar{position:absolute;left:0;right:0;top:37px;bottom:6px;background:repeating-linear-gradient(135deg,var(--panel2) 0 5px,transparent 5px 10px)}
.forum-seg{position:absolute;top:0;bottom:0;display:grid;place-items:center;overflow:hidden;background:var(--task);border-left:1px solid var(--panel);border-radius:3px;container-type:inline-size}
.forum-seg span{font:700 15px/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 2px #0008}.forum-seg.on{box-shadow:inset 0 0 0 2px #fff}
@container (max-width:26px){.forum-seg span{display:none}}
.forum-playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fg);pointer-events:none;z-index:2}
.forum-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px solid var(--line)}.forum-actions:not(:has(a,button:not([hidden]))){display:none}.forum-count{font-size:13px;font-weight:600;color:var(--muted)}
/* Replies, oldest first, on a thread line under the post. */
.forum-talk{display:flex;flex-direction:column;gap:8px}.forum-talk .forum-count{margin:0}#forumReplyForm textarea{min-height:70px}
.forum-replies{display:flex;flex-direction:column}.forum-reply{padding:10px 0}.forum-reply+.forum-reply{border-top:1px solid var(--line)}.forum-reply.staff .forum-avatar{border-color:var(--blue);color:var(--blue)}
.forum-reply p{margin:6px 0 0 32px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
/* ▲/▼ to the question before or after: a column at the right edge, or a row at the end when stacked. */
.forum-nav{display:flex;justify-content:center;gap:10px}.forum-nav button{width:44px;height:44px;padding:0;border-radius:50%;font-size:15px}
@media (min-width:1000px){
  .forum-nav{flex-direction:column}
  .forum-main>#forumThreadView:not([hidden]){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr) auto;grid-template-rows:auto minmax(0,1fr);max-width:1500px;height:100%}
  .forum-back{grid-column:1/-1;justify-self:start}.forum-post-card{overflow:auto}.forum-post-card>*{flex:none}.forum-talk{min-height:0}.forum-talk .forum-replies{flex:1;min-height:0;overflow:auto}}
@media (max-width:600px){.forum-main{padding:12px}.forum-thumb{width:96px}.forum-item{gap:8px 10px}.forum-reply p{margin-left:0}}
/* The rail's Ask: drag on the timeline to mark the part; boundaries and pins stay out of the way meanwhile. */
body.ask-pick #timelineContent{cursor:crosshair}body.ask-pick #timelineContent :is(.marker,.edge,.comment-pin){pointer-events:none}
/* Above the clip blocks (same row, later in the DOM), under the playhead. */
.ask-band{top:0;bottom:0;z-index:5;border:2px solid #f0c454;border-radius:4px;background:#f0c45470;box-shadow:0 0 0 1px #000a}.clip-act.active{border-color:#f0c454;color:#f0c454}
#askDialog::backdrop{background:none}@media(min-width:851px){#askDialog{width:min(380px,96vw);margin:72px 16px auto auto}}
.example-pill{display:inline-block;vertical-align:1px;margin-left:4px;font:10px ui-monospace,monospace;font-weight:400;border:1px solid var(--accent);color:var(--accent);border-radius:99px;padding:0 6px}

/* ---- 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.auto{opacity:.6}
#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}
/* Reviewer point comments (cut.js renderCommentPins): a pin head over the ruler, a line through the bar; only the head takes clicks. */
#timelineContent .comment-pin{position:absolute;top:12px;height:47px;width:0;z-index:7;pointer-events:none}
#timelineContent .comment-pin::before{content:"";position:absolute;left:-6px;top:0;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#f5c400;box-shadow:0 0 0 1px #0009;pointer-events:auto;cursor:pointer}
#timelineContent .comment-pin::after{content:"";position:absolute;left:-1px;top:12px;bottom:0;width:2px;background:#f5c400;box-shadow:0 0 0 1px #0006}
.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}
/* A button with a key shows it, e.g. "Task start T" (cut.js setKeyChip sets data-key). */
button[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}
/* A rail too narrow for every chip drops them (the keys stay in the tooltips) so it keeps to one line. */
@container (max-width:1060px){body:not(.timeline-vertical) .worker-rail button[data-key]::after{display:none}}
/* Vietnamese labels run longer, so their chips drop sooner and a narrow rail tightens its buttons; a rail still too narrow scrolls sideways rather than wrap. */
@container (max-width:1300px){html[lang="vi"] body:not(.timeline-vertical) .worker-rail button[data-key]::after{display:none}}
@container (max-width:1100px){body:not(.timeline-vertical) .worker-rail button{padding:6px 6px}}
body:not(.timeline-vertical) .worker-rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
body:not(.timeline-vertical) .worker-rail>:not(#selectedTime){flex:none}
/* 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)}

/* 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;white-space:normal}
  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 #timelineContent .comment-pin{left:60px;right:4px;width:auto;height:0}
  body.timeline-vertical #timelineContent .comment-pin::before{left:0;top:-6px;transform:rotate(-135deg)}
  body.timeline-vertical #timelineContent .comment-pin::after{left:12px;right:0;top:-1px;bottom:auto;width:auto;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; the nudges 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}
}
@container(max-height:22px){body.timeline-vertical #segmentLane .clip-label{display:none}}
/* Header: brand, place in the list, then workspace and tools; settings, theme, language and sign out sit in the ⋯ menu.
   One row that never wraps: every control is 34px tall and the tools stay quiet until hovered. Narrow screens drop
   labels first (the controls keep them as tooltips), then the chip, then the brand. */
.cut-head{background:var(--panel);gap:10px;padding:0 16px;white-space:nowrap}.cut-head>:not(.spacer){flex:none}
.cut-head h1{font-size:17px;letter-spacing:-.01em}.cut-head h1 span{color:var(--accent)}
.cut-head .badge{font-size:12px;line-height:18px;padding:2px 9px}
.cut-head button,.cut-head select,.cut-head a.btn,.cut-head summary{height:34px;padding:0 11px;border-radius:9px}
.cut-head button,.cut-head a.btn,.cut-head summary{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--fg)}
:root[data-theme="light"] .cut-head button,:root[data-theme="light"] .cut-head a.btn{background:transparent}
.cut-head button:hover:not(:disabled),.cut-head a.btn:hover,.cut-head summary:hover,.head-menu[open] summary{background:var(--panel2);border-color:var(--line)}
.head-group{display:flex;gap:4px;align-items:center;flex:none}
.video-nav{display:inline-flex;align-items:center;height:34px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cut-head .video-nav button{height:32px;min-width:30px;padding:0 8px;border:0;border-radius:0;font-size:16px}
#progress{padding:0 4px}#progress:empty{padding:0}
#workModeControl{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}#workModeControl select{color:var(--fg);font-size:14px}
.head-menu{position:relative}.head-menu summary{list-style:none;cursor:pointer;padding:0 8px}.head-menu summary::-webkit-details-marker{display:none}
.head-menu .menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:200px;display:grid;gap:2px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0005}
.cut-head .menu button,.cut-head .menu a.btn{width:100%;justify-content:flex-start}
.menu-row{display:flex;gap:6px;padding:6px 0;margin:2px 0;border-block:1px solid var(--line)}.menu-row select{flex:1}
.cut-head .menu .theme-toggle{width:auto;flex:none;justify-content:center;border-color:var(--line)}
@media(max-width:1500px){#workModeControl>span{display:none}}
@media(max-width:1280px){#modeChip,#shortcutsBtn span{display:none}}
@media(max-width:1100px){#leaderboardBtn span{display:none}}
@media(max-width:960px){.cut-head h1{display:none}}
/* Reviewer header: the path line and the clip stats share a row; the review state sits in the byline. */
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.meta-row .clip-boxes{margin-top:0}
.byline-state{padding-left:7px;border-left:1px solid var(--line);color:#f0c454}:root[data-theme="light"] .byline-state{color:#8a6100}
/* Notes (#guideDialog): one tall sheet, a tab for the cutting guide (cut_guide.<lang>.html) and one for the leaderboard. */
dialog.guide-dialog{width:min(1180px,96vw);height:calc(100dvh - 40px);max-height:none;padding:0;overflow:hidden}
dialog.guide-dialog[open]{display:flex;flex-direction:column}
.guide-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}.guide-head form{margin:0}
.guide-tabs,.guide-lang{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
#guideDialog .guide-tabs button,#guideDialog .guide-lang button{border:0;background:transparent;color:var(--muted);padding:6px 13px;border-radius:9px}
#guideDialog .guide-tabs button[aria-selected="true"],#guideDialog .guide-lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.guide,.board-pane{flex:1;min-height:0;overflow:auto}.guide[hidden],.board-pane[hidden]{display:none}
.board-pane{display:flex;flex-direction:column;padding:14px 20px}.board-pane>*{flex-shrink:0}.board-pane .lb-body{flex-shrink:1;max-height:none;min-height:90px}
.guide{padding:24px 32px 60px;font-size:15px;line-height:1.6}.guide>*{max-width:860px;margin-left:auto;margin-right:auto}
.guide h1{font-size:28px;line-height:1.25;margin:0 auto 6px}.guide .lead{font-size:17px;color:var(--muted);margin-top:0}
.guide h2{font-size:21px;margin:44px auto 10px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:8px}.guide h3{font-size:16px;margin:26px auto 6px;scroll-margin-top:8px}
.guide h2 .num{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;vertical-align:2px}
.guide ul,.guide ol{padding-left:22px}.guide li{margin:4px 0}.guide a{color:var(--blue)}
.guide kbd{display:inline-block;min-width:1.6em;font:12px/1.5 ui-monospace,monospace;text-align:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;background:var(--panel2);color:var(--fg);white-space:nowrap}
.guide .btn-name{font-weight:600;white-space:nowrap;padding:1px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);font-size:13px}
.guide figure{margin:16px auto 22px}.guide figure img,.guide figure video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
/* The player's global video rule (absolute, full height) must not reach the guide's demos. */
.guide figure video{position:static;background:#000}
.guide figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.guide .toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:0;list-style:none}
.guide .toc a{display:block;height:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--fg);text-decoration:none}.guide .toc a:hover{border-color:var(--accent)}.guide .toc small{display:block;color:var(--muted)}
.guide .box{padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;background:var(--panel2);margin:14px auto}.guide .box>:first-child{margin-top:0}.guide .box>:last-child{margin-bottom:0}
.guide .box.tip{border-left-color:var(--good)}.guide .box.warn{border-left-color:#f0b429}.guide .box.start{border-left-color:var(--accent)}
.guide .box b.label{display:block;margin-bottom:4px}
.guide .steps{counter-reset:step;list-style:none;padding:0}.guide .steps>li{counter-increment:step;position:relative;padding-left:42px;margin:12px 0}
.guide .steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);font-weight:700;font-size:13px}
.guide table{width:100%;border-collapse:collapse;font-size:14px;margin:12px auto}.guide th,.guide td{text-align:left;vertical-align:top;padding:7px 10px;border-bottom:1px solid var(--line)}.guide th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.guide td:first-child{white-space:nowrap}.guide .wrap-table{overflow-x:auto}
.guide dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}.guide dt{font-weight:600}.guide dd{margin:0}
.guide .legend{counter-reset:pin;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}.guide .legend li{counter-increment:pin;position:relative;padding-left:34px}
.guide .legend li::before{content:counter(pin);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e8442e;color:#fff;font-weight:700;font-size:12px}.guide .legend li::before{position:absolute;left:0;top:1px}
/* The worked example: a hand-drawn timeline, task bands with cut ticks, idle hatched. */
@media(max-width:700px){.guide{padding:16px 16px 40px}.guide dl{grid-template-columns:1fr}.guide dd{margin-bottom:8px}}

/* ---- Phones (2026-10-20, docs/mobile-review-plan.md; /caption shares this, caption.css adds its bar).
   The header wraps; once a video is open the list is a drawer (Queue); the video and its timeline stay
   pinned at the top while the rest scrolls; the clip controls and the decision sit in bars at the bottom.
   Touch screens get finger-sized bars, 16px fields (iOS zooms into smaller ones) and no key chips. ---- */
#queueBtn,.list-scrim{display:none}
@media(pointer:coarse){
  button[data-key]::after{display:none}#shortcutsBtn{display:none}
  /* !important: many fields set a class or id font size. */
  input,select,textarea{font-size:16px!important}
}
@media(max-width:850px){
  header,.cut-head{height:auto;min-height:52px;flex-wrap:wrap;row-gap:6px;padding:6px 10px;white-space:normal}
  .cut-head .head-menu{margin-left:auto}#timelineLayoutBtn{display:none}
  #queueBtn{display:inline-flex}body:has(#workspace.hidden) #queueBtn,body:has(#workspace) #empty{display:none}
  /* !important: cut.js writes the desktop list width inline. */
  aside{max-height:none;width:auto!important}
  body:has(#workspace:not(.hidden)) #listPanel{position:fixed;top:0;bottom:0;left:0;z-index:80;width:min(88vw,380px)!important;
    border-right:1px solid var(--line);background:var(--bg);padding-bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translateX(-102%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
  body.list-open:has(#workspace:not(.hidden)) #listPanel{transform:none;visibility:visible;transition:transform .2s}
  body.list-open:has(#workspace:not(.hidden)) .list-scrim{display:block;position:fixed;inset:0;z-index:79;background:#0009}
  main{padding:10px 12px calc(128px + env(safe-area-inset-bottom))}
  .editor-body,.stage{display:contents}
  .workspace{--pv-h:34vh}
  .video-wrap{order:-2;position:sticky;top:0;z-index:20;flex:none;height:var(--pv-h);min-height:0;margin:0 -12px;border-width:0 0 1px;border-radius:0}
  .cut-dock{order:-1;position:sticky;top:var(--pv-h);z-index:19;margin:0 -12px 10px;padding:6px 12px;background:var(--bg);container-type:normal}
  #timelineGrip{display:none}
  .side-panel{order:1;max-height:none;overflow:visible;margin-top:10px}.side-head{position:static}
  .status{order:2}
  /* Bottom: the clip controls in the last row, the decision above them (it grows upward when it wraps). */
  #workerRail{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line)}
  #workerRail button{min-height:44px}#workerRail .review-only{flex:1}#workerRail .review-only button{flex:1}
  #reviewActions{position:fixed;left:0;right:0;bottom:calc(61px + env(safe-area-inset-bottom));z-index:30;padding:8px 10px 0;
    background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap;white-space:normal}
  #reviewActions:empty{display:none}
  #reviewActions button{flex:1 1 auto;min-height:44px;font-size:15px;white-space:normal}
  #workspace .player-bar{flex-wrap:nowrap;padding:14px 8px 6px}
  #workspace .player-bar button{min-width:40px;min-height:40px}
  .player-bar .time{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #workspace .player-bar select{padding:0 4px}
}
/* A phone keeps play, the time, speed and quality on the frame; clip by clip (bottom bar) replaces frame steps. */
@media(max-width:480px){#prevFrame,#nextFrame{display:none}#workspace .player-bar{gap:4px}#workspace .player-bar button{padding:5px 7px;white-space:nowrap}}
@media(max-width:600px){
  dialog,#helpDialog,dialog.notes,dialog.leaderboard,#sendBackDialog{width:100%;max-width:100%;margin:auto 0 0;max-height:92dvh;
    overflow:auto;border-radius:16px 16px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  dialog.guide-dialog{width:100%;max-width:100%;height:100dvh;margin:0;border-radius:0}
  dialog .row button{flex:1;min-height:44px}
}