/* «the cut» on /editing (SPEC §10.3; site/js/cut.js, markup site/tools/pages/editing.mjs cutPiece): a monitor, the line and the
   timecode under it, a ruler, one track of clips, the controls. The pictures are dither canvases; everything around them is the
   site's paper language: hairlines, mono labels, square chips, the accent for the one thing that is active. No shadows: a lifted
   clip stands over a lattice of ink cells, the place it will take is a lattice of accent cells.
   Without scripts (and before cut.js has run) the markup is the line as text in the monitor's frame and a still row of the words. */
.cut{--clip-h:84px;--name-h:18px;min-width:0}
.cut-view{min-width:0}

/* ---- the monitor */
.cut-mon{position:relative;aspect-ratio:16/9;max-height:max(260px,calc(100svh - var(--header) - 372px));width:100%;min-width:0;background:var(--paper);border:1px solid var(--ink);overflow:hidden}
.cut-line{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:0 6%;text-align:center;font:700 clamp(30px,5.6vw,84px)/.92 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.cut-cv{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.cut.js .cut-line{display:none}
.cut.js .cut-mon{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the Play chip of every picture on the site, bottom left, while the monitor is paused */
.cut-mark{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;color:var(--paper);background:var(--ink);pointer-events:none;transition:opacity .2s,background .2s}
.cut-mon:hover .cut-mark{background:var(--accent)}
.cut[data-state="playing"] .cut-mark{opacity:0}
.cut-ico{display:inline-block;box-sizing:border-box;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.is-pause .cut-ico{width:8px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}

/* ---- under the monitor: the line as it stands now (the word on the monitor in the accent), the timecode */
.cut-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:14px;min-width:0}
.cut-seq{margin:0;font:700 clamp(21px,2.5vw,34px)/1.05 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase;min-width:0}
.cut-seq span{transition:color .12s}
.cut-seq .on{color:var(--accent)}
.cut-meta{margin:0 0 0 auto;display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;justify-content:flex-end;font-size:12.5px;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cut-tc .of{color:var(--mid)}
.cut-lock{color:var(--accent)}
.cut-lock::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--accent);vertical-align:1px}

/* ---- the timeline: the ruler (the playhead's slider, its flag row above the ticks), the track, the playhead over both */
.cut-tl{position:relative;margin-top:22px;-webkit-user-select:none;user-select:none}
.cut-ruler{position:relative;display:flex;align-items:flex-end;height:44px;overflow:hidden;color:var(--mid);font-size:10px;letter-spacing:.04em;cursor:ew-resize;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.cut-ruler i{position:relative;flex:1 1 0;min-width:0;height:6px;margin-bottom:5px;border-left:1px solid var(--line)}
.cut-ruler i.maj{height:18px;border-left-color:var(--mid)}
.cut-ruler i span{position:absolute;left:5px;top:-1px;line-height:1;white-space:nowrap;font-style:normal}
.cut-ruler i.bare span{display:none}
.cut-ruler:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cut-track{position:relative;height:var(--clip-h);touch-action:pan-y}
.cut-row{list-style:none;margin:0;padding:0}
.cut.js .cut-row{position:absolute;inset:0;touch-action:pan-y}
.cut.js .cut-clip{position:absolute;left:0;top:0;height:100%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cut-clip>button{all:unset;box-sizing:border-box;position:absolute;inset:0 1px;display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--paper);overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.cut-clip>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.cut-clip>button:hover{border-color:var(--accent)}}   /* the accent name bar stays the mark of the clip that plays */
.cut-clip:focus-within{z-index:1}
.cut-name{flex:none;display:flex;justify-content:space-between;align-items:center;gap:6px;height:var(--name-h);padding:0 6px;color:var(--paper);background:var(--ink);font-size:10px;letter-spacing:.04em;line-height:1;font-variant-numeric:tabular-nums;transition:background .12s}
.cut-name i{font-style:normal}
.cut-name b{font-weight:400;opacity:.62}
.cut-clip.on .cut-name{background:var(--accent)}
.cut-clip.on .cut-name b{opacity:.85}
.cut-clip canvas{flex:1 1 0;min-height:0;width:100%;display:block;image-rendering:pixelated}
.cut-clip canvas,.cut-name{pointer-events:none}   /* the button itself is what a finger lands on: a touch is captured by its target */
/* in hand: the clip rises over a lattice of ink cells and follows the pointer; let go, it glides to its place */
.cut.js .cut-clip::before{content:'';position:absolute;inset:7px -5px -7px 8px;background:conic-gradient(at 2px 2px,transparent 75%,var(--ink) 0) 0 0/4px 4px;opacity:0;transition:opacity .15s;pointer-events:none}
.cut.js .cut-clip.lift{z-index:3;transition:none}
.cut.js .cut-clip.lift::before{opacity:1}
.cut-clip.lift>button{transform:translate3d(0,-7px,0);cursor:grabbing;border-color:var(--accent)}
.cut-clip.lift .cut-name{background:var(--accent)}
.cut.js .cut-clip.settle{z-index:2;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.cut.dragging,.cut.dragging .cut-clip>button{cursor:grabbing}
/* the place the clip in hand will take */
.cut-slot{position:absolute;left:0;top:0;height:100%;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .15s}
.cut-slot::before{content:'';position:absolute;inset:0 1px;border:1px solid var(--accent);background:conic-gradient(at 3px 3px,transparent 75%,var(--accent) 0) 0 0/6px 6px}
.cut.dragging .cut-slot{opacity:1}
.cut-slot.now,.cut.sizing .cut-clip,.cut.sizing .cut-slot{transition:none!important}
/* the playhead: an accent line over the ruler's ticks and the track, its timecode as a flag on top (it flips at the right edge) */
.cut-head{position:absolute;left:0;top:0;bottom:0;width:0;z-index:4;pointer-events:none;will-change:transform}
.cut-head::before{content:'';position:absolute;top:20px;bottom:0;left:-1px;width:2px;background:var(--accent)}
.cut-head span{position:absolute;top:0;left:-1px;padding:4px 6px;font-size:10px;letter-spacing:.04em;line-height:1.2;white-space:nowrap;color:var(--paper);background:var(--accent);font-variant-numeric:tabular-nums}
.cut-head.flip span{left:auto;right:-1px}
.cut.dragging .cut-head span{opacity:0}

/* ---- the controls, an editing program's transport: Play / Pause (the ink chip of every Play on the site) and Stop, then Shuffle
   and Reset as hairline chips, the hint on the right. The page's one accent button stays «Discuss a project». */
.cut-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-top:16px}
.cut-btn{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 18px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s,border-color .2s}
.cut-btn.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.cut-btn:hover{color:var(--accent);border-color:var(--accent)}
.cut-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cut-btn.go{min-width:108px;color:var(--paper);background:var(--ink);border-color:var(--ink)}
.cut-btn.go:hover{color:var(--paper);background:var(--accent);border-color:var(--accent)}
.cut-btn.mix{margin-left:14px}
.cut-sq{display:inline-block;width:9px;height:9px;background:currentColor}
.cut-btn:disabled{color:var(--mid);border-color:var(--line);cursor:default}
.cut-hint{margin:0 0 0 auto;color:var(--mid);line-height:1.5}
.cut-hint .h-touch{display:none}
@media (hover:none){.cut-hint .h-mouse{display:none}.cut-hint .h-touch{display:inline}}
.cut-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- without scripts, and until cut.js has run: a still row of the words, each as wide as its shot is long (12 + 6 × letters) */
.cut:not(.js) .cut-row{display:flex;height:var(--clip-h);margin-top:22px}
.cut:not(.js) .cut-clip{flex:24 1 0;min-width:0;display:grid;place-items:center;margin:0 1px;border:1px solid var(--ink);border-top-width:var(--name-h);font:700 clamp(15px,2.4vw,30px)/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase;overflow:hidden}
.cut:not(.js) .cut-clip[data-len="3"]{flex-grow:30}
.cut:not(.js) .cut-clip[data-len="4"]{flex-grow:36}
.cut:not(.js) .cut-clip[data-len="5"]{flex-grow:42}
.cut:not(.js) .cut-clip[data-len="6"]{flex-grow:48}
.cut:not(.js) .cut-clip[data-len="7"]{flex-grow:54}
.cut:not(.js) .cut-clip[data-len="8"]{flex-grow:60}

/* where scripts will run, the still markup already keeps the room of the bar, the ruler and the controls, so nothing below the
   piece moves when cut.js takes over */
@media (scripting:enabled){
  .cut:not(.js) .cut-view{padding-bottom:calc(14px + 1.05 * clamp(21px,2.5vw,34px))}
  .cut:not(.js) .cut-row{margin-top:66px;margin-bottom:56px}
}
/* ---- phones: one column; the five clips across the width (the shortest is 54 px at 390), every target at least 44 px */
@media (max-width:720px){
  .cut{--clip-h:64px;--name-h:16px}
  .cut-bar{margin-top:12px}
  .cut-meta{font-size:11.5px}
  .cut-tc .of{display:none}
  .cut-tl{margin-top:14px}
  .cut-name{padding:0 4px;font-size:9.5px}
  .cut-name b{display:none}
  .cut-ruler i span{font-size:9.5px;left:3px}
  .cut-btn{min-height:44px;min-width:44px;padding:0 14px;justify-content:center}
  .cut-btn.go{min-width:100px}
  .cut-btn.stop{padding:0}
  .cut-btn.stop span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cut-btn.mix{margin-left:8px}
  .cut-hint{flex:1 1 100%;margin:2px 0 0}
}
@media (max-width:720px) and (scripting:enabled){
  .cut:not(.js) .cut-view{padding-bottom:34px}
  .cut:not(.js) .cut-row{margin-top:58px;margin-bottom:81px}
}
@media (prefers-reduced-motion:reduce){
  .cut.js .cut-clip,.cut.js .cut-clip.settle,.cut-clip>button,.cut-slot,.cut-seq span,.cut-name,.cut-mark,.cut-btn,.cut-clip::before{transition:none}
}