/* SkyEdits, one dark theme for every page.
   Layout: a narrow menu on the left, the page on the right. The review page is a desk that fits the window:
   the monitor (preview, montage bar, transport) on top with the inspector of the current clip beside it; under
   them the clip rows and the music row on the whole width, on the video's time axis. */
@font-face { font-family: "Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* surfaces: graphite with a slight blue bias, darkest at the back */
  --bg: #0b0d10; --surface: #121519; --raised: #191d22; --hover: #20252c; --line: #232830; --line-2: #313842;
  --text: #e6e8eb; --muted: #8e96a1; --faint: #5f6772;
  /* the brand blue, pastel and not bright (user, 25/10): selection, handles, primary actions */
  --sky: #6a89c4; --sky-ink: #0a1120; --sky-soft: rgba(106, 137, 196, .16);
  --ok: #57c28b; --warn: #e8a33d; --err: #ef6a5c;
  /* analysis signals: where the camera is, speech, a face, acceleration, key moments */
  --s-ground: #a39364; --s-inside: #6d7d97; --s-freefall: #63c7ff; --s-canopy: #c08cf2; --s-sky: #39424f;
  --s-speech: #e9e4d4; --s-face: #ff8fa3; --s-g: #f0b450; --s-mk: #ffd34d; --vol: #7fdca8;
  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 6px; --r-lg: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.hidden, [hidden] { display: none !important; }
.spacer { flex: 1; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h3 { margin: 0; }
.sub { color: var(--muted); margin: 4px 0 0; }
.label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 10px; }
.ico { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---- buttons: one shape everywhere; primary for the one action of the page */
.btn { font: 500 13px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
       height: 32px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--raised);
       color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: #3d4551; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--sky); border-color: var(--sky); color: var(--sky-ink); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #7b97cd; border-color: #7b97cd; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--raised); color: var(--text); border-color: var(--line-2); }
.btn.danger { background: transparent; border-color: color-mix(in srgb, var(--err) 55%, transparent); color: var(--err); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 14%, transparent); border-color: var(--err); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.icon { width: 32px; padding: 0; }
.btn.wide { width: 100%; height: 38px; font-size: 14px; }
.btn.link { height: auto; padding: 2px 0; border: 0; background: none; color: var(--sky); }
.tag { font: 500 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 4px; background: var(--raised); color: var(--muted);
       border: 1px solid var(--line); white-space: nowrap; }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.tag.run { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 35%, transparent); background: var(--sky-soft); }
/* music and logo pickers: a button with what is chosen, a list that opens under it */
.dd { position: relative; }
.dd-btn { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 10px; max-width: 260px;
          border-radius: var(--r); border: 1px solid var(--line-2); background: var(--raised); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.dd-btn:hover { background: var(--hover); border-color: #3d4551; }
.dd-btn[aria-expanded="true"] { border-color: var(--sky); background: var(--hover); }
.dd-btn .ico { color: var(--sky); }
.dd-btn .dd-k { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.dd-btn .dd-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd-btn .dd-v.off { color: var(--muted); font-style: italic; }
.dd-btn .chev { color: var(--faint); width: 14px; height: 14px; transition: transform .12s; }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; min-width: 280px; max-width: 360px; max-height: 340px; overflow-y: auto;
           background: var(--raised); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.dd-menu h6 { margin: 4px 8px 4px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.dd-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
.dd-opt { font: inherit; font-size: 13px; width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left;
          padding: 7px 8px; border: 0; border-radius: 5px; background: none; color: var(--text); cursor: pointer; }
.dd-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt .ico { width: 14px; height: 14px; color: var(--sky); }
.dd-opt:hover, .dd-opt:focus-visible { background: var(--hover); outline: none; }
.dd-opt[aria-selected="true"] { background: var(--sky-soft); }
.dd-opt.act { color: var(--muted); }
.dd-opt.act .ico { color: var(--muted); }

/* ---- shell: the menu and the page */
.shell { display: grid; grid-template-columns: 196px minmax(0, 1fr); height: 100%; transition: grid-template-columns .15s; }
.nav { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 22px; }
.navtop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.navtoggle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid transparent; background: none;
             color: var(--faint); cursor: pointer; flex: none; padding: 0; }
.navtoggle:hover { background: var(--raised); color: var(--text); border-color: var(--line-2); }
.logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.logo b { font-weight: 600; color: var(--sky); }
.logo .mark { width: 18px; height: 18px; border-radius: 50% 50% 4px 4px; background: linear-gradient(180deg, var(--sky) 0 55%, transparent 55%);
              border: 1.5px solid var(--sky); flex: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--muted); text-decoration: none; font-size: 13.5px; }
.nav a:hover { background: var(--raised); color: var(--text); }
.nav a.on { background: var(--sky-soft); color: var(--text); }
.nav a.on .ico { color: var(--sky); }
.nav .dz { margin-top: auto; padding: 10px; border-top: 1px solid var(--line); display: grid; gap: 1px; }
.nav .dz small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.nav .dz b { font-weight: 500; font-size: 13px; }
main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: auto; padding: 18px clamp(16px, 2.4vw, 32px) 28px; }
.page { max-width: 1180px; width: 100%; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.top .sub { flex-basis: 100%; margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }

/* the steps of a new video */
.flow { display: flex; align-items: center; gap: 12px; margin: -6px 0 10px; flex: none; }
.flow .btn { height: 26px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; counter-reset: st; }
.steps li { counter-increment: st; font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.steps li::before { content: counter(st); width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2);
                    display: grid; place-items: center; font: 500 11px/1 var(--mono); }
.steps li:not(:last-child)::after { content: ""; width: 22px; height: 1px; background: var(--line-2); margin-left: 6px; }
.steps li.on { color: var(--text); }
.steps li.on::before { background: var(--sky); border-color: var(--sky); color: var(--sky-ink); }
.steps li.done { color: var(--muted); }
.steps li.done::before { border-color: var(--sky); color: var(--sky); }

/* ---- new video: the categories */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cat { font: inherit; color: var(--text); text-align: left; padding: 22px; border-radius: var(--r-lg); display: grid; gap: 8px;
       align-content: start; min-height: 190px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .12s, background .12s; }
.cat:hover:not(:disabled) { border-color: var(--sky); background: var(--raised); }
.cat:disabled { cursor: default; opacity: .55; }
.cat b { font-size: 17px; font-weight: 600; }
.cat small { color: var(--muted); font-size: 13.5px; }
.cat .ico-c { width: 40px; height: 40px; border-radius: 8px; background: var(--sky-soft); color: var(--sky); display: grid; place-items: center;
              font: 500 12px/1 var(--mono); margin-bottom: 8px; }
.cat .soon { justify-self: start; margin-top: 6px; }

/* ---- upload */
.media { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 880px) { .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.field small { color: var(--faint); }
.field input { font: inherit; font-size: 14px; height: 36px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); }
.field input:focus { border-color: var(--sky); outline: none; }
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); min-height: 210px; display: grid; place-items: center; text-align: center;
        padding: 24px; color: var(--muted); cursor: pointer; transition: .15s; background: var(--bg); }
.drop:hover { border-color: var(--faint); }
.drop.over { border-color: var(--sky); background: var(--sky-soft); color: var(--text); }
.drop b { display: block; color: var(--text); font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.files li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; background: var(--raised); border-radius: var(--r);
            padding: 8px 12px; font-size: 13px; }
.files li span { font-family: var(--mono); font-size: 12.5px; }
.files li small { color: var(--muted); font: 12px var(--mono); }
.prog { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--sky); width: 0; transition: width .2s; }
.files li.done .prog i { background: var(--ok); }
.files li.err { color: var(--err); }
.fmt { display: grid; gap: 8px; }
.fmt label { display: block; border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; cursor: pointer; background: var(--bg); transition: border-color .12s; }
.fmt label:hover { border-color: var(--faint); }
.fmt label:has(input:checked) { border-color: var(--sky); background: var(--sky-soft); }
.fmt input { margin: 0 8px 0 0; accent-color: var(--sky); }
.fmt b { font-weight: 500; }
.fmt ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
.fmt .desc { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.fmt small.tag { margin-left: 6px; padding: 3px 6px; font-size: 10.5px; }
.count { margin: 14px 0; font-size: 13px; color: var(--muted); }
.count.ok { color: var(--ok); }
.count.warn { color: var(--warn); }
/* the analysis starts by itself a few seconds after the last clip: the countdown, and the way to hold it */
.autostart { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0;
             font-size: 13px; color: var(--muted); }

/* ---- analysis: one bar for the whole job, one per step */
.work { max-width: 640px; }
.overall { margin: 26px 0 22px; display: grid; gap: 8px; }
.ov-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov-top b { font: 500 26px/1 var(--mono); }
.ov-top span { color: var(--muted); font-size: 13px; }
.bar { height: 4px; background: var(--raised); border-radius: 3px; overflow: hidden; position: relative; }
.bar.big { height: 8px; border-radius: 4px; border: 1px solid var(--line); }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sky); border-radius: inherit; transition: width .5s linear; }
.bar.done i { background: var(--ok); }
/* a step still waiting for its first figure: a light moving through the bar */
.bar.wait i { width: 30% !important; animation: wait 1.4s ease-in-out infinite; background: color-mix(in srgb, var(--sky) 60%, transparent); }
@keyframes wait { from { left: -30%; } to { left: 100%; } }
.work ol { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.work li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; color: var(--faint); }
.work li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); grid-row: 1; }
.work li .bar { grid-column: 2 / -1; }
.work li small { font: 12px var(--mono); color: var(--faint); }
.work li.on { color: var(--text); font-weight: 500; }
.work li.on::before { border-color: var(--sky); border-top-color: transparent; animation: spin 1s linear infinite; }
.work li.ok { color: var(--muted); }
.work li.ok::before { background: var(--ok); border-color: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .work li.on::before, .bar.wait i { animation: none; } .bar i { transition: none; } }
.logbox summary { cursor: pointer; color: var(--faint); font-size: 12.5px; margin-bottom: 8px; }
pre.log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font: 12px/1.55 var(--mono);
          max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 0; color: var(--muted); }
.error { color: var(--err); margin-top: 12px; }

/* ---- history */
.hist { display: grid; gap: 6px; }
.hist .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 16px; }
.hist .item:hover { border-color: var(--line-2); }
.hist .item h4 { margin: 0; font-size: 14.5px; font-weight: 500; word-break: break-word; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hist .item .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hist .item .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.empty { color: var(--muted); }

/* ---- review: the desk fills the window, nothing scrolls on a laptop screen */
main:has(#editor:not(.hidden)) { overflow: hidden; padding-bottom: 14px; }
#editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.edhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.edhead .ttl { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: 8px; }
.edhead h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* top: the preview with its bar and controls, the panel of the clip beside it; below, the clips and the music on
   the whole width (the rows get lower when the window is short) */
.desk { --screen-h: clamp(150px, 27vh, 440px); flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr); gap: 8px 14px; }
.clips { grid-column: 1 / -1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; color: var(--muted); flex: none; padding: 0 2px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .lg-t { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.legend .sep { width: 1px; height: 12px; background: var(--line-2); }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw.ground { background: var(--s-ground); } .sw.inside { background: var(--s-inside); } .sw.freefall { background: var(--s-freefall); }
.sw.canopy { background: var(--s-canopy); } .sw.sky { background: var(--s-sky); }
.ln { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ln.speech { background: var(--s-speech); } .ln.face { background: var(--s-face); } .ln.g { background: var(--s-g); }
.ln.mk { width: 2px; height: 11px; background: var(--s-mk); }
.ln.vol { background: var(--vol); }

/* one row per clip: label, then the strip (thumbnails, cut window, moments, white bar) over the signal lanes */
.timeline { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-right: 2px; }
/* rows never lower than 60 px (a little less than with 5 clips on a laptop, 27/10); more clips scroll, the preview
   stays on top. The height is set by the page (--row-h, editor.js sizeRows): Safari 17 lays out a grid that
   stretches between min- and max-height at its max-height, so the content spilled out of the row. */
.row { flex: none; height: var(--row-h, 60px); display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: 100%; gap: 10px;
       overflow: hidden; padding: 0 6px 0 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); position: relative; }
.row:hover { border-color: var(--line-2); }
.row.cur { border-color: var(--sky); background: #15191f; }
.row .lab { min-width: 0; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 0; cursor: pointer; line-height: 1.3; }
.row .lab h4 { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .lab h4 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .lab .meta { font: 11px/1.35 var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .lab .meta b { color: var(--muted); font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.dot.hi { background: var(--ok); } .dot.mid { background: var(--warn); } .dot.lo { background: var(--err); }
.row .parts-n { font: 500 10px/1 var(--mono); color: var(--sky); border: 1px solid color-mix(in srgb, var(--sky) 40%, transparent); border-radius: 3px; padding: 2px 4px; flex: none; }
/* the track is the video's time axis: the clip box sits where its kept part plays and is cut off at the edges */
.track { min-width: 0; position: relative; overflow: hidden; }
/* the clip sits inside its row with a margin above and below, centred like the label */
.clipbox { position: absolute; top: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 3px; }
.strip { position: relative; flex: 1; min-height: 16px; border-radius: 4px; overflow: hidden; background: #000; user-select: none; touch-action: none; cursor: col-resize; }
.strip .imgs { position: absolute; inset: 0; display: flex; }
.strip .imgs { overflow: hidden; }
.strip .imgs img { height: 100%; flex: none; object-fit: cover; border-right: 1px solid rgba(0, 0, 0, .5); }
.strip .gl { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; width: 100%; pointer-events: none; }
/* what is cut away: visible but darkened (thumbnails, lanes and moments) */
.clipbox .dim { position: absolute; top: 0; bottom: 0; background: rgba(5, 7, 10, .72); pointer-events: none; z-index: 1; }
.strip .keep { position: absolute; top: 0; bottom: 0; border-top: 1px solid var(--sky); border-bottom: 1px solid var(--sky); cursor: col-resize; }
/* the handles sit inside the kept window, as tall as the strip */
.strip .hd { position: absolute; top: 0; bottom: 0; width: 4px; background: var(--sky); cursor: ew-resize; z-index: 2; }
.strip .hd::before { content: ""; position: absolute; inset: 0 -4px; }  /* a wider grip than it looks */
.strip .hd.in { left: 0; border-radius: 2px 0 0 2px; }
.strip .hd.out { right: 0; border-radius: 0 2px 2px 0; }
.strip .mk { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--s-mk); pointer-events: none; z-index: 0;  /* under what is cut away */ }
.strip .mk.r span { left: auto; right: 3px; }
.strip .mk span { position: absolute; top: 2px; left: 3px; font: 500 9.5px/1 var(--sans); color: #111; background: var(--s-mk); padding: 2px 3px; border-radius: 2px; white-space: nowrap; }
.strip .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, .8); z-index: 3; display: none; }
.strip .ph i { position: absolute; top: 0; left: -4px; width: 10px; height: 7px; background: #fff; border-radius: 0 0 3px 3px; }
.row.cur .strip .ph { display: block; }
.lanes { height: 12px; flex: none; display: block; width: 100%; border-radius: 2px; }

/* the music row: the songs on the video's time axis, the volume line over them */
.row.music { flex: none; height: 62px; min-height: 62px; position: sticky; bottom: 0; z-index: 4; background: var(--surface);
             box-shadow: 0 -6px 12px var(--bg); }
.row.music .lab { cursor: default; }
.row.music h4 .mtoggle { height: 22px; padding: 0 7px; font-size: 11.5px; margin-left: auto; }
/* closed: one low line with the songs; a press on it opens the row */
.row.music.collapsed { height: 32px; min-height: 32px; }
.row.music.collapsed .mtrack { inset: 3px 0; }
.row.music.collapsed .meta, .row.music.collapsed .vr, .row.music.collapsed .vol, .row.music.collapsed .vpt,
.row.music.collapsed .mblk .x, .row.music.collapsed .mblk .hd { display: none; }
.row.music.collapsed .mtrack { cursor: pointer; }
.row.music.collapsed .mblk { top: 3px; bottom: 3px; cursor: pointer; }
.row.music.collapsed .mblk .nm { bottom: 50%; transform: translateY(50%); }
.row.music h4 .ico { width: 14px; height: 14px; color: var(--vol); flex: none; }
.row.music .vr { font-size: 11.5px; justify-content: flex-start; }
.mtrack { position: absolute; inset: 5px 0; border-radius: 4px; background: var(--raised); user-select: none; touch-action: none; cursor: default; overflow: hidden; }
.mtrack .blocks { position: absolute; inset: 0; }
.mblk { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; cursor: grab; overflow: visible;
        background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sky) 26%, transparent) 0 2px, color-mix(in srgb, var(--sky) 16%, transparent) 2px 5px);
        border: 1.5px solid var(--sky); }
.mblk.drag { cursor: grabbing; }
.mblk .nm { position: absolute; left: 10px; right: 28px; bottom: 3px; font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mblk .x { position: absolute; top: 2px; right: 8px; width: 16px; height: 16px; border-radius: 3px; border: 0; padding: 0; font: 13px/16px var(--sans);
           background: rgba(5, 7, 10, .55); color: var(--muted); cursor: pointer; z-index: 3; }
.mblk .x:hover { color: var(--text); background: var(--err); }
.mblk .hd { position: absolute; top: -1.5px; bottom: -1.5px; width: 7px; background: var(--sky); cursor: ew-resize; z-index: 2; }
.mblk .hd.in { left: -1.5px; border-radius: 3px 0 0 3px; }
.mblk .hd.out { right: -1.5px; border-radius: 0 3px 3px 0; }
.mtrack .vol { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.mtrack .vol.off { opacity: .35; }
.vpt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--vol); border: 2px solid var(--bg);
       cursor: ns-resize; z-index: 4; box-shadow: 0 0 0 1px var(--vol); }
.vpt:hover { transform: scale(1.25); }
.vtip { position: absolute; transform: translate(-50%, -150%); background: var(--text); color: var(--bg); font: 500 11px/1 var(--mono); padding: 3px 5px;
        border-radius: 3px; pointer-events: none; z-index: 6; white-space: nowrap; }
.mempty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 12px; color: var(--faint); pointer-events: none; }
.drophint { position: absolute; top: 2px; bottom: 2px; border: 1.5px dashed var(--vol); border-radius: 4px; background: color-mix(in srgb, var(--vol) 14%, transparent);
            display: grid; place-items: center; font-size: 11.5px; font-weight: 500; color: var(--text); pointer-events: none; z-index: 5; white-space: nowrap; overflow: hidden; }
.drophint.replace { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.drophint.full { border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
body.dragsong .mtrack { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vol) 60%, transparent); }
.mtrack .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, .8); z-index: 3; }
.mtrack .ph i { position: absolute; top: 0; left: -4px; width: 10px; height: 7px; background: #fff; border-radius: 0 0 3px 3px; }
.dd-hint { margin: 0 8px 6px; font-size: 11.5px; color: var(--muted); max-width: 260px; }
.dd-opt[draggable="true"] { cursor: grab; }

/* the monitor: preview, montage bar, transport, inspector */
.monitor { min-height: 0; width: calc(var(--screen-h) * 16 / 9); display: flex; flex-direction: column; gap: 6px; }
.screen { position: relative; width: 100%; height: var(--screen-h); background: #000; border-radius: var(--r-lg); overflow: hidden;
          border: 1px solid var(--line); flex: none; }
/* Grip above both preview videos (they raise z-index during dissolves); larger hit target for smooth drag. */
.screen .grip { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; display: grid; place-items: end;
                padding: 0 3px 3px 0; box-sizing: border-box; cursor: nwse-resize; z-index: 20;
                color: rgba(255, 255, 255, .7); touch-action: none; border-bottom-right-radius: var(--r-lg);
                background: linear-gradient(135deg, transparent 42%, rgba(0, 0, 0, .45) 43%);
                user-select: none; -webkit-user-select: none; }
.screen .grip:hover, .screen .grip.dragging { color: #fff; background: linear-gradient(135deg, transparent 42%, rgba(0, 0, 0, .65) 43%); }
.screen .grip .ico { width: 14px; height: 14px; pointer-events: none; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; opacity: 0; object-fit: contain; }
.mbar { position: relative; height: 22px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
        cursor: pointer; user-select: none; touch-action: none; flex: none; }
.mbar .seg { position: absolute; top: 0; height: 100%; box-shadow: inset -1px 0 0 var(--bg); display: flex; align-items: center; padding: 0 4px;
             font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; }
.mbar .seg.cur { background: var(--sky-soft); color: var(--text); }
.mbar .seg.logo { font-style: italic; }
.mbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(106, 137, 196, .1); pointer-events: none; }
.mbar .head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ctrl { display: flex; align-items: center; gap: 6px; flex: none; }
.ctrl .play { width: 40px; background: var(--text); border-color: var(--text); color: var(--bg); }
.ctrl .play:hover:not(:disabled) { background: #fff; border-color: #fff; }
.tc { font: 12px var(--mono); color: var(--muted); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dur { display: grid; text-align: right; line-height: 1.15; margin-left: 8px; }
.dur small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.dur b { font: 500 15px var(--mono); }

/* the panel of the clip: small beside the preview, opened by hand ("Dettagli") to the rest of the width */
.inspector { position: relative; justify-self: start; align-self: start; width: min(380px, 100%); max-height: 100%; min-height: 0; overflow-y: auto;
             background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
             padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.inspector.open { justify-self: stretch; align-self: stretch; width: auto; contain: size; gap: 14px; padding: 14px 16px; }
.inspector:not(.open) > section, .inspector:not(.open) > details { display: none; }
.inspector .itoggle { position: absolute; top: 9px; right: 9px; height: 26px; padding: 0 8px; gap: 4px; z-index: 1; }
.inspector .itoggle .chev { width: 13px; height: 13px; transform: rotate(-90deg); }
.inspector.open .itoggle .chev { transform: rotate(90deg); }
.inspector .ihead { padding-right: 84px; }
.inspector.open .checks { margin-right: 84px; }
.chk-n { order: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--warn); cursor: pointer;
         background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
         border-radius: 4px; padding: 3px 8px; }
.chk-n .ico { width: 13px; height: 13px; }
.inspector.open .chk-n { display: none; }
.inspector h2 { margin: 0; font-size: 15px; font-weight: 600; }
.inspector .file { font: 11.5px var(--mono); color: var(--faint); margin-top: 2px; }
.inspector section { display: grid; gap: 6px; }
.inspector h5 { margin: 0; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.inspector ul { margin: 0; padding-left: 16px; color: var(--muted); }
.inspector li { margin: 2px 0; }
.inspector .hd2 { display: flex; align-items: flex-start; gap: 10px; }
.inspector .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fact { background: var(--raised); border-radius: var(--r); padding: 7px 9px; display: grid; gap: 1px; }
.fact small { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.fact b { font: 500 13px var(--mono); white-space: nowrap; }
.fact b.hi { color: var(--ok); } .fact b.mid { color: var(--warn); } .fact b.lo { color: var(--err); }
.mix { display: grid; grid-template-columns: 62px minmax(0, 1fr) 38px 58px; gap: 2px 8px; align-items: center; }
.mix .mn { color: var(--text); font-size: 12.5px; }
.mix b { font: 500 13px var(--mono); text-align: right; }
.mix small { font: 11px var(--mono); color: var(--faint); }
.mix em { grid-column: 2 / -1; font-style: normal; font-size: 11.5px; color: var(--faint); margin-top: -2px; }
.mix .bar { height: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; color: var(--text); font-size: 12px; }
.inspector .pairn, .inspector .muted { margin: 0; color: var(--muted); }
.inspector details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; display: flex; align-items: center; gap: 6px; }
.inspector details summary::-webkit-details-marker { display: none; }
.inspector details summary::before { content: "›"; display: inline-block; transition: transform .12s; color: var(--faint); }
.inspector details[open] summary::before { transform: rotate(90deg); }
.inspector details ul { margin-top: 6px; }
.checks { border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent);
          border-radius: var(--r); padding: 9px 12px; }
.inspector .checks summary { color: var(--warn); font-weight: 500; }
.checks ul { color: #e9c58a; }

/* the menu reduced to its icons (the button at its top; reduced by default on the review page) */
@media (min-width: 761px) {
  .shell.navmin { grid-template-columns: 56px minmax(0, 1fr); }
  .shell.navmin .nav { padding: 12px 8px; align-items: center; }
  .shell.navmin .logo { padding: 2px 0; }
  .shell.navmin .logo > span:not(.mark), .shell.navmin .nav a span, .shell.navmin .nav .dz { display: none; }
  .shell.navmin .nav a { padding: 9px; justify-content: center; }
  .shell.navmin .navtop { flex-direction: column; gap: 14px; }
}
@media (max-width: 1380px) and (min-width: 761px) {
  .legend .lg-t { display: none; }
  .dd-btn { max-width: 200px; }
}

/* narrow or short windows: the desk stacks and the page scrolls */
@media (max-width: 1100px), (max-height: 620px) {
  main:has(#editor:not(.hidden)) { overflow: auto; }
  #editor { flex: none; }
  .desk { grid-template-columns: 1fr; grid-template-rows: none; }
  .monitor { width: 100%; }
  .screen { height: auto; aspect-ratio: 16 / 9; }
  .screen .grip { display: none; }
  .inspector, .inspector.open { contain: none; width: auto; justify-self: stretch; }
  .row { flex: none; height: 64px; }
  .row.music { height: 68px; }
  .timeline { overflow: visible; }
  .inspector { flex: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; height: auto; }
  .nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; gap: 12px; }
  .nav ul { display: flex; }
  .nav .dz { margin: 0 0 0 auto; border: 0; padding: 0; }
  main { height: auto; }
  .row { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; max-height: none; }
  .row .strip { height: 44px; flex: none; }
  .row .track { height: 64px; }
  .steps li:not(:last-child)::after { width: 10px; }
}

/* ---- dialogs and messages */
.modal { position: fixed; inset: 0; background: rgba(3, 4, 6, .66); display: grid; place-items: center; padding: 20px; z-index: 20; }
.modal .box { background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px; padding: 22px; max-width: 480px; width: 100%;
              box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.modal h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.modal p { margin: 0 0 10px; color: var(--muted); }
.modal ul { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.modal .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--text); color: var(--bg); font-weight: 500;
         padding: 9px 16px; border-radius: var(--r); font-size: 13px; z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* ---- login (platform) */
.auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); z-index: 50; overflow: auto; }
.authbox { width: min(380px, 100%); display: grid; gap: 18px; }
.authbox .logo { font-size: 18px; }
.authbox form { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.authbox h1 { margin-bottom: 10px; }
.authbox .sub { margin: -6px 0 12px; }
.authbox .btn.link { justify-self: center; margin-top: 10px; }
.autherr { color: var(--err); min-height: 1.5em; margin: 0; text-align: center; }
.autherr.ok { color: var(--ok); }
.nav .me { display: flex; align-items: center; gap: 6px; padding: 0 0 0 10px; font-size: 12.5px; color: var(--muted); }
.nav .me span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell.navmin .nav .me span { display: none; }

/* ---- accounts (admins) */
.invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 170px auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.invite .field { margin: 0; }
.field select { font: inherit; font-size: 14px; height: 36px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); }
@media (max-width: 880px) { .invite { grid-template-columns: 1fr; } }

/* ---- quick preview (after the analysis): the start and end of every clip, in order; then "Crea video" or the review */
#quick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.qdesk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.qmonitor { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: calc((100vh - 230px) * 16 / 9); }
.qscreen { height: auto; aspect-ratio: 16 / 9; }
.qlabel { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px;
          border-radius: var(--r); background: rgba(8, 10, 13, .72); backdrop-filter: blur(4px); pointer-events: none; }
.qlabel b { font-size: 14px; font-weight: 600; }
.qlabel span { font: 500 12px var(--mono); color: #c9d2de; }
.qlabel:empty, .qlabel.off { display: none; }
.qstart { position: absolute; inset: 0; margin: auto; z-index: 6; width: max-content; height: 44px; padding: 0 18px; border-radius: 22px;
          display: inline-flex; align-items: center; gap: 9px; font: 600 14px var(--sans); cursor: pointer;
          background: var(--text); color: var(--bg); border: 0; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.qstart:hover { background: #fff; }
.qstrip { display: flex; gap: 3px; height: 34px; }
.qstrip .qc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.qstrip .qc .nm { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.qstrip .qc.cur .nm { color: var(--text); }
.qstrip .pcs { flex: 1; display: flex; gap: 2px; }
.qstrip .pc { flex: 1; border-radius: 2px; background: var(--raised); position: relative; overflow: hidden; }
.qstrip .pc i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sky); }
.qstrip .pc.done i { width: 100%; background: color-mix(in srgb, var(--sky) 45%, var(--raised)); }
.qstrip .qc.hi .pc { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ok) 70%, transparent); }
.qstrip .qc.mid .pc { box-shadow: inset 0 -2px 0 var(--warn); }
.qstrip .qc.lo .pc { box-shadow: inset 0 -2px 0 var(--err); }
#qaudio[aria-pressed="true"] { color: var(--sky); border-color: var(--sky); }
.qhint { margin: 0; font-size: 12.5px; color: var(--faint); }
.qside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qside .label { margin: 4px 0 -4px; }
.qfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qside .checks summary { color: var(--warn); font-weight: 500; cursor: pointer; }
.qside .checks ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.qclips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: q; }
.qclips li { counter-increment: q; display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) auto; gap: 10px; align-items: center;
             padding: 6px 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.qclips li:hover { border-color: var(--line-2); background: var(--raised); }
.qclips li.cur { border-color: var(--sky); background: var(--sky-soft); }
.qclips li::before { content: counter(q); font: 500 11px var(--mono); color: var(--faint); text-align: right; }
.qclips img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #000; display: block; }
.qclips .tx { min-width: 0; display: grid; }
.qclips .tx b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qclips .tx small { font: 400 11.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qclips .tag { padding: 4px 6px; font-size: 10.5px; }
.tag.lo { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 10%, transparent); }
@media (max-width: 1100px) {
  .qdesk { grid-template-columns: 1fr; }
  .qmonitor { max-width: none; }
}

/* the customer: name and email at the upload, the sending from the quick preview */
.cust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
@media (max-width: 880px) { .cust { grid-template-columns: 1fr; } }
.qsend { padding: 12px 14px; display: grid; gap: 6px; }
.qsend-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qsend .label { margin: 0; }
.qcust { margin: 0; font-size: 13.5px; color: var(--muted); }
.qcust b { color: var(--text); font-weight: 500; }
.qcust .bad { color: var(--warn); }
.qcust .okc { color: var(--ok); }
.sendf .field { margin-bottom: 10px; }
.sendf .chk { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text); margin: 4px 0 6px; cursor: pointer; }
.sendf .chk input { margin-top: 3px; accent-color: var(--sky); }
.sendf .note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.linkbox { display: flex; gap: 6px; margin-top: 8px; }
.linkbox input { flex: 1; min-width: 0; font: 12.5px var(--mono); height: 32px; padding: 0 8px; border-radius: var(--r);
                 border: 1px solid var(--line-2); background: var(--bg); color: var(--text); }
#quick .edhead .dd-btn { max-width: 230px; }
/* review header with a video (Crea video, Apri il video, Invia al cliente): on one line down to ~1440 px, the two
   ghost buttons keep only their icon (the title says what they do) */
#editor .edhead .dd-btn { max-width: 230px; }
@media (max-width: 1700px) { #toquick .lbl, #reset .lbl { display: none; } }
/* with a video, "Crea video e invia" and "Invia al cliente" both show: "Apri il video" keeps only its icon too */
@media (max-width: 1500px) { #openvideo .lbl { display: none; } #editor .edhead .dd-btn { max-width: 190px; } }
.qsend #qopenvideo { justify-self: start; margin-top: 2px; }