:root{font-family:Inter,"Segoe UI",sans-serif;color:#202d38;background:#f4f5f2;font-synthesis:none;--accent:#166753;--line:#dce1dc}*{box-sizing:border-box}body{margin:0}header{height:72px;background:#182c33;color:#fff;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:19px;font-weight:650;display:flex;align-items:center;gap:12px}.brand-icon{background:#c3e6a2;color:#182c33;display:grid;place-items:center;width:33px;height:33px;border-radius:8px}.local{font-size:10px;letter-spacing:1.5px;border:1px solid #52666b;padding:5px 7px;border-radius:4px}#saved{font-size:12px;color:#d2e4d4}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:28px 32px 24px;gap:20px}h1{font-size:28px;font-weight:600;letter-spacing:-.8px;margin:0 0 6px}p{line-height:1.55;margin:8px 0}h2{font-size:16px;margin:0}button,summary{cursor:pointer}button,input{font:inherit}button{border:1px solid #cbd4cd;background:white;color:#263c37;border-radius:6px;padding:8px 11px;font-weight:600;font-size:13px}button:hover{background:#eaf0e5}button:disabled{opacity:.45;cursor:default}button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #d59625;outline-offset:3px}details{position:relative}summary{border:1px solid var(--line);padding:10px 16px;border-radius:6px;background:white;font-size:14px}.file-tools{position:absolute;right:0;top:48px;width:340px;background:white;box-shadow:0 12px 40px #182c3326;z-index:5;padding:20px;border:1px solid var(--line);border-radius:8px}.file-tools label{display:block;margin-bottom:18px;font-size:13px}.file-tools input{display:block;width:100%;margin-top:7px;font-size:12px}main{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(340px,1.3fr) minmax(270px,.8fr);margin:0 32px 32px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white;min-height:600px}.viewer{padding:20px;background:#edf0eb}.video-shell{aspect-ratio:16/9;background:#182c33;border-radius:6px;overflow:hidden}video{width:100%;height:100%;display:block}.playline{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:14px}output,.range,.times{font-family:Consolas,monospace;font-variant-numeric:tabular-nums}.muted{font-size:12px;color:#64716c}.hint{border-top:1px solid #ccd5cd;margin-top:30px;padding-top:20px;font-size:14px;color:#54615a}.hint strong{color:#263c37}kbd{display:inline-block;background:white;border:1px solid #ccd5cd;border-bottom-width:2px;padding:1px 5px;border-radius:4px;font-size:11px;margin:3px 0}.transcript-panel{position:relative;border-left:1px solid var(--line);border-right:1px solid var(--line);min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line)}.follow{font-size:11px;color:#5c6e65;display:flex;align-items:center;gap:4px}#transcript{padding:6px 24px 24px;max-height:65vh;min-height:380px;overflow:auto;scroll-behavior:smooth}.segment{padding:20px 0;border-bottom:1px solid #edf0ea}.segment-meta{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:11px;color:#7b867f;user-select:none}.segment-meta button{font-size:10px;padding:3px 5px}.segment-text{font-size:19px;line-height:1.85;word-break:break-word;margin:0}.unit{cursor:pointer;border-radius:3px}.unit:hover{background:#eef2e9}.unit.current{background:#d8edc8;color:#174d36}.unit.chosen{box-shadow:inset 0 -3px #e4b456}.unit.draft{background:#fae9b5}::selection{background:#f1d27c;color:#20362c}.selections-panel{min-width:0}#count{background:#eef2e8;border-radius:12px;padding:2px 7px;font-size:12px;margin-left:5px}#selections{padding:8px 16px;max-height:70vh;overflow:auto}.empty{padding:40px 10px;color:#64716c;text-align:center;font-size:14px}.empty strong{display:block;color:#314a3e;margin-bottom:8px}.selection{padding:15px 0;border-bottom:1px solid var(--line)}.selection-play{display:block;text-align:left;background:transparent;border:0;padding:0;width:100%;font-weight:400}.selection-play:hover{background:transparent}.selection-label{font-size:18px;color:#165c45;font-weight:700}.selection-play p{font-size:13px;color:#43534a;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.times{font-size:11px;color:#506157;line-height:1.8}.selection-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.selection-actions button{font-size:11px;padding:5px 7px}.aside-note{padding:10px 20px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#0e503f}#composer{background:#fff9e9;border-top:2px solid #e4b456;padding:0 20px 18px;position:sticky;bottom:0}#composer .section-heading{padding:12px 0;border:0}#preview{font-size:13px;max-height:80px;overflow:auto}.range{font-size:12px;margin:12px 0}.assign{display:flex;gap:10px;align-items:end}.assign label{font-size:11px}.assign input{display:block;width:85px;border:1px solid #bdc7bd;border-radius:5px;padding:8px;margin-top:4px;text-transform:uppercase}#message{background:#fff0dc;border:1px solid #e6ba7d;border-radius:6px;margin:0 32px 16px;padding:12px 16px;font-size:13px}[hidden]{display:none!important}@media(min-width:1700px){main{max-width:1680px;margin-inline:auto}}@media(max-width:1100px){main{grid-template-columns:minmax(260px,.9fr) minmax(340px,1.2fr)}.selections-panel{grid-column:1/-1;border-top:1px solid var(--line)}#selections{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-height:none}.empty{grid-column:1/-1}.transcript-panel{border-right:0}}@media(max-width:680px){header{padding:0 16px;height:62px}.brand{font-size:16px}.local{display:none}#saved{font-size:10px}.toolbar{padding:20px 16px;align-items:start}h1{font-size:23px}.toolbar p{font-size:12px}summary{padding:8px;white-space:nowrap}.file-tools{width:290px}main{display:block;margin:0 12px 20px}.viewer{padding:14px}.hint{display:none}.transcript-panel{border-left:0;border-top:1px solid var(--line)}#transcript{max-height:48vh;min-height:200px;padding:0 18px 20px}.segment-text{font-size:18px}.section-heading{padding:15px}#selections{display:block}.assign{flex-wrap:wrap}#message{margin:0 12px 12px}}

#load-state{margin:20px 32px;padding:28px;background:white;border:1px solid var(--line);border-radius:8px;color:#54615a}.recovery{display:flex;gap:10px;margin:0 32px 16px}.recovery:has(button:not([hidden])){padding-top:4px}#saved{max-width:240px;text-align:right}.toolbar>#finish{flex-shrink:0} @media(max-width:680px){.toolbar{flex-wrap:wrap}#load-state{margin:16px}.recovery{margin:0 16px 12px}}

/* Phase 7.6: fluid video column, independently scrolling text and selections. */
main{max-width:none;grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr);grid-template-rows:minmax(360px,3fr) minmax(220px,2fr);height:max(780px,calc(100dvh - 240px));margin:0 24px 24px}
.viewer{grid-column:1;grid-row:1 / 3;min-width:0;overflow:auto}
video{object-fit:contain}
.transcript-panel,.selections-panel{grid-column:2;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:0}
.transcript-panel{grid-row:1}.selections-panel{grid-row:2;border-top:1px solid var(--line)}
.section-heading{flex-shrink:0;flex-wrap:wrap}
#transcript,#selections{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
#selections{display:block}#composer{position:static;flex-shrink:0;max-height:65%;overflow:auto}
.time-navigation{display:flex;align-items:center;gap:6px;font:18px Consolas,monospace;font-variant-numeric:tabular-nums}
#position,#time-input{font:inherit}#time-input{width:10ch;min-width:0;padding:8px;border:1px solid #64716c;border-radius:6px}
#time-error{font-size:13px;color:#9b351c}.playline{flex-wrap:wrap}.viewer p{overflow-wrap:anywhere}.assign{flex-wrap:wrap}
@media(max-width:1000px){main{display:block;height:auto;min-height:0;margin:0 12px 20px}.viewer{overflow:visible}.transcript-panel,.selections-panel{border-left:0;border-top:1px solid var(--line)}#transcript{flex:auto;height:50vh;min-height:220px}#selections{flex:auto;max-height:60vh}#composer{max-height:none}.hint{display:none}}

/* 7.6.1: equal outer columns keep time aligned with the video centre. */
.playline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
.playline>#play{justify-self:start}.time-navigation{justify-self:center}
.playback-speed{justify-self:end;display:flex;align-items:center;gap:8px;font-size:12px;color:#43534a}
.playback-speed select{font:inherit;font-size:14px;padding:8px;border:1px solid #cbd4cd;border-radius:6px;background:white;color:#263c37;cursor:pointer}
.playback-speed select:focus-visible{outline:3px solid #d59625;outline-offset:3px}
@media(max-width:600px){.playline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.time-navigation{grid-column:1 / -1;grid-row:1}.playline>#play{grid-column:1;grid-row:2}.playback-speed{grid-column:2;grid-row:2}}

/* Compact review workspace: transcript spans the right column. */
header{height:56px;flex-shrink:0}.toolbar{padding:12px 24px;min-height:62px;gap:12px;flex-shrink:0}h1{font-size:22px;margin:0;overflow-wrap:anywhere}.toolbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main{height:auto;min-height:0;grid-template-rows:auto minmax(100px,1fr);margin:0 16px 16px}
.viewer{grid-column:1;grid-row:1;padding:14px;overflow:visible}
.transcript-panel{grid-column:2;grid-row:1 / 3}.selections-panel{grid-column:1;grid-row:2;border-left:0;border-right:1px solid var(--line)}
.segment-text{font-size:13.3px;line-height:1.7}.segment{padding:12px 0}.segment-meta{margin-bottom:6px}.section-heading{padding:12px 16px}
#transcript{padding:0 16px 16px;scroll-behavior:auto}#selections{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px}.empty{padding:12px;grid-column:1 / -1}.aside-note{display:none}
#composer{max-height:60%;padding:0 16px 12px}#composer .muted{display:none}#preview{max-height:55px}.range{margin:6px 0}.playline{margin-top:10px}
@media(min-width:1001px){body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}main{flex:1;grid-template-rows:minmax(0,auto) minmax(100px,1fr)}.viewer{min-height:0;display:flex;flex-direction:column}.video-shell{min-height:0;flex:1}.playline{flex-shrink:0}#message{margin:0 16px 8px;flex-shrink:0}}
@media(max-width:1000px){main{display:flex;flex-direction:column}.viewer{order:0}.selections-panel{order:1;border-right:0;max-height:35vh}.transcript-panel{order:2}#transcript{height:65vh;min-height:200px}#composer:not([hidden]){position:fixed;bottom:0;left:12px;right:12px;max-height:50dvh;z-index:10;box-shadow:0 -4px 24px #182c3330}.toolbar{padding:12px 16px;flex-wrap:wrap}.toolbar-actions{flex-shrink:1}.segment-text{font-size:13.3px}}

.manual-range{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:11px;flex-shrink:0}.manual-range button{font-size:11px;padding:5px 7px}#manual-error{color:#9b351c;width:100%}#manual-error:empty{display:none}.time-navigation{gap:5px;font-size:16px}#mark-in,#mark-out{font-size:12px;padding:8px}.playback-speed{gap:4px}@media(min-width:1001px) and (max-width:1250px){.playline{grid-template-columns:1fr 1fr}.time-navigation{grid-column:1/-1;grid-row:1}.playback-speed{grid-column:2;grid-row:2}}

/* Frame controls and smaller video column free space for selections. */
main{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr)}
.playline{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}.transport{grid-column:2;grid-row:1;display:flex;gap:10px;align-items:center;justify-self:center}.playback-speed{grid-column:1;grid-row:1;justify-self:start}.time-navigation{grid-column:3;grid-row:1;justify-self:end;gap:2px;font-size:13px;white-space:nowrap}#position{padding:6px 3px}#time-input{width:9ch;padding:6px 2px}#play{font-size:20px;padding:5px 12px}.point-control{display:flex;flex-direction:column;align-items:center;gap:3px}.frame-steps{display:flex;gap:3px}.frame-steps button{font-size:9px;padding:1px 3px;min-width:20px;line-height:14px}#mark-in,#mark-out{min-width:43px;padding:7px 8px}.playback-speed{font-size:0}.playback-speed select{font-size:12px;padding:6px}#selection-total{font-weight:400;font-size:13px;color:#506157}
@media(max-width:700px){.playline{grid-template-columns:1fr auto 1fr}.transport{grid-column:2;grid-row:1}.time-navigation{grid-column:1/-1;grid-row:2;justify-self:end}.playback-speed{grid-column:1;grid-row:1}.time-navigation{font-size:14px}}

@media(min-width:1001px){main{grid-template-rows:minmax(0,auto) minmax(180px,1fr)}}

/* 7.6.5: reduce video height by about 30%, leaving the remainder to selections. */
@media(min-width:1001px){.video-shell{max-height:max(100px,calc(70dvh - 325px))}}
@media(max-width:1000px){.video-shell{width:70%;margin-inline:auto}.selections-panel{max-height:50vh}}