/* Edit Suite (information-technology/edit-suite.php). The shared parts are in studio.css. On a laptop or desktop:
   the programme monitor and level meter, with the chosen clip and the checklist beside it, above the timeline;
   Export has the settings, the file size and the quality side by side; the challenges fill the stage. On smaller
   screens everything stacks. Theme tokens only; the monitor, the meter and the clips are dark, like an editor's, in both themes (the --screen-*
   and --neon-* tokens). The picture on the monitor is the footage itself, so edit-suite.js keeps its own colours. */

/* the clips' colours, one per source (edit-suite.js: VIDEO and AUDIO), deep enough for the white waveform, and the
   shading and highlights drawn on them */
:root{
  --es-title:color-mix(in srgb,var(--neon-purple) 62%,var(--screen-bg));--es-sunrise:color-mix(in srgb,var(--neon-amber) 62%,var(--screen-bg));
  --es-waves:color-mix(in srgb,var(--neon-blue) 62%,var(--screen-bg));--es-kayak:color-mix(in srgb,var(--neon-red) 62%,var(--screen-bg));
  --es-music:color-mix(in srgb,var(--neon-green) 62%,var(--screen-bg));--es-sea:color-mix(in srgb,var(--neon-cyan) 62%,var(--screen-bg));
  --es-shade:color-mix(in srgb,var(--screen-bg) 35%,transparent);--es-shade-strong:color-mix(in srgb,var(--screen-bg) 55%,transparent);
  --es-glint:color-mix(in srgb,var(--screen-ink) 75%,transparent);--es-glint-soft:color-mix(in srgb,var(--screen-ink) 18%,transparent);
}

.es-view{flex:1;min-height:0}
.es-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-rows:minmax(0,1fr) auto;gap:10px}
.es-viewer{padding:8px 10px 8px}
.es-tc{font:600 13px/1 var(--font-mono);color:var(--ink);padding:0 6px}
.es-monitor{flex:1;min-height:0;display:flex;gap:8px}
.es-screen-box{flex:1;min-width:0;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;background:var(--screen-bg);border-radius:6px}
.es-screen{display:block;width:min(100cqw,100cqh * 16 / 9);height:auto;aspect-ratio:16/9}
.es-meter{flex:none;width:44px;display:grid;grid-template-rows:auto 1fr;grid-template-columns:14px 1fr;gap:4px 4px;background:var(--screen-bg);border-radius:6px;padding:6px 5px}
.es-meter .es-cliplight{grid-row:1;grid-column:1 / -1;font:700 9px/1 var(--font-mono);text-align:center;padding:3px 0;border-radius:3px;background:color-mix(in srgb,var(--neon-red) 15%,var(--screen-bg));color:color-mix(in srgb,var(--neon-red) 42%,var(--screen-bg))}
.es-meter .es-cliplight.on{color:color-mix(in srgb,var(--neon-red) 50%,var(--screen-ink))}
.es-meter .es-cliplight.lit{background:var(--neon-red);color:var(--screen-bg)}
.es-meter-bar{grid-row:2;grid-column:1;position:relative;background:var(--screen-panel);border-radius:2px;overflow:hidden}
.es-meter-bar i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--neon-green) 0%,color-mix(in srgb,var(--neon-green) 50%,var(--neon-amber)) 60%,var(--neon-amber) 82%,var(--neon-red) 100%);background-size:100% 100%}
.es-meter-scale{grid-row:2;grid-column:2;display:flex;flex-direction:column;justify-content:space-between;font:600 8.5px/1 var(--font-mono);color:var(--screen-muted)}
.es-meter-scale b{font-weight:600}
.es-cap{flex:none;margin-top:6px;min-height:1.5em}
.es-inspector{padding:10px 12px}
.es-insp-in{display:flex;flex-direction:column;gap:10px}
.es-insp-in h2 .st-muted{text-transform:none;letter-spacing:0;font-weight:500}
#inspector{display:flex;flex-direction:column;gap:8px}
.es-tasks{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.es-bad{color:var(--bad)}

/* the timeline */
.es-timeline-panel{grid-column:1 / -1;padding:8px 10px 10px}
.es-timeline-panel .st-head .st-note{font-size:12.5px;color:var(--muted)}
.es-timeline{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px}
.es-labels{display:grid;grid-template-rows:20px 48px 48px 48px;gap:4px;font:700 11px/48px var(--font-mono);color:var(--muted);text-align:center}
.es-labels span:first-child{line-height:20px}
.es-lanes{position:relative;display:grid;grid-template-rows:20px 48px 48px 48px;gap:4px;overflow:hidden;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.es-ruler{position:relative;border-bottom:1px solid var(--line-strong)}
.es-ruler i{position:absolute;bottom:0;width:1px;height:5px;background:var(--line-strong)}
.es-ruler i.maj{height:9px;background:var(--ink-soft)}
.es-ruler b{position:absolute;bottom:9px;left:3px;font:600 10px/1 var(--font-mono);color:var(--muted)}
.es-track{position:relative;background:var(--panel-2);border-radius:4px}
.es-clip{position:absolute;top:2px;height:44px;border-radius:4px;overflow:hidden;background:var(--c);box-shadow:inset 0 0 0 1px var(--es-shade);cursor:grab}
.es-clip.a{cursor:move}
.es-clip canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.es-clip.a canvas{background:var(--c)}
.es-clip.on{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 1px var(--es-shade);z-index:2}
.es-clip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.es-clip-name{position:absolute;left:4px;top:3px;background:var(--es-shade-strong);padding:1px 4px;border-radius:3px;font:700 10.5px/1.2 var(--font-body);color:var(--screen-ink);text-shadow:0 1px 2px var(--screen-bg);white-space:nowrap;pointer-events:none}
.es-h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;background:transparent;z-index:3}
.es-h.l{left:0;border-left:3px solid var(--es-glint)}
.es-h.r{right:0;border-right:3px solid var(--es-glint)}
.es-clip.on .es-h{background:var(--es-glint-soft)}
.es-trans{position:absolute;top:12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--screen-ink);color:var(--screen-bg);font:700 12px/22px var(--font-mono);text-align:center;box-shadow:0 1px 4px var(--es-shade-strong);z-index:4;pointer-events:none}
.es-playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--viz-5);z-index:5;pointer-events:none}
.es-playhead::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--viz-5)}

/* export */
.es-export{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(0,1fr);gap:10px}
.es-export > .panel{padding:10px 12px}
.es-ex-in{display:flex;flex-direction:column;gap:9px}
.es-ex-set .st-seg button{padding:5px 8px;font-size:12px}
.es-sz{padding:8px 10px;margin-top:8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.es-sz h3{margin:0 0 4px;font:700 13px/1.2 var(--font-display);color:var(--ink)}
.es-sz .st-mono{margin:0;font-size:12px;line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere}
.es-big{margin:4px 0 0;font:700 20px/1.2 var(--font-mono);color:var(--accent-deep)}
.es-total{border-color:var(--accent);background:var(--accent-tint)}
.es-bars{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.es-bars div{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.es-bars i{display:block;height:12px;border-radius:3px;background:var(--accent);min-width:2px}
.es-bars i.a{background:var(--accent-b)}
.es-q-box{background:var(--screen-bg);border-radius:6px;padding:6px;display:flex;justify-content:center}
.es-q-box canvas{width:100%;max-width:480px;height:auto;aspect-ratio:16/9;display:block;image-rendering:pixelated}
.es-q-wave{width:100%;height:auto;aspect-ratio:600/110;background:var(--paper);border:1px solid var(--line);border-radius:6px}

.es-quiz{min-height:0}
.es-quiz .st-quiz,.es-quiz .cq{height:100%}

@media (min-width:901px) and (max-width:1250px){
  .es-export{grid-template-columns:minmax(260px,300px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .es-ex-set{grid-row:1 / span 2}
}
@media (min-width:901px) and (max-height:680px){
  .es-labels,.es-lanes{grid-template-rows:18px 38px 38px 38px}
  .es-labels{line-height:38px}
  .es-clip{height:34px}
  .es-cap{display:none}
}
@media (max-width:900px){
  .es-edit,.es-export{display:flex;flex-direction:column}
  .es-screen-box{container-type:normal;display:block}
  .es-screen{width:100%}
  .es-monitor{flex:none}
  .es-inspector .st-scroll,.es-export .st-scroll{overflow:visible;flex:none}
  .es-h{width:16px}
}