/* Playback speed control in the player dialog.

   The browser's built-in control panel offers up to 2x; the HTMLMediaElement itself
   accepts up to 16x, so the faster steps are offered here. */

/* Wrapping matters: the note below carries flex-basis:100%, so without it the note
   becomes a third item on the same row and pushes the selector sideways the moment a
   speed above 4x is chosen. */
.player-speed{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0 auto 0 0;font-size:12px;color:var(--muted)}
.player-speed>span{white-space:nowrap}
/* Buttons rather than a menu: choosing a speed is one press, and the current speed is
   readable without opening anything. */
.speed-choices{display:flex;gap:6px;flex-wrap:wrap}
.speed-choices button{min-width:42px;min-height:34px;padding:7px 9px;font-size:12px;background:#222c24;border:1px solid #33402f;border-radius:6px;color:#bccfbe;font-variant-numeric:tabular-nums}
.speed-choices button:hover{border-color:#47603f;color:var(--green)}
.speed-choices button.on{background:var(--green);border-color:var(--green);color:#1d2a18;font-weight:600}
/* Beside the buttons, so turning the sound off is not a surprise. It had a line of its own
   underneath, which left an empty band across the player at every speed that keeps sound. */
.player-speed{flex-wrap:nowrap}
.player-speed small{flex:0 1 auto;margin:0 0 0 4px;font-size:11px;color:#8f9f92;white-space:nowrap}
/* The note holds its line whether or not it applies. Removing it outright made the
   dialog shorter, and a dialog centred in the viewport re-centres when its height
   changes: pressing 16x lifted the speed buttons nine pixels and pressing 1x dropped
   them back. A thumb already on its way to a button could then land beside it, and
   the press did nothing at all. */
.player-speed small{visibility:hidden}
.player-speed small.on{visibility:visible}

@media(max-width:760px){
  /* The label and the note share the first line, the buttons take the whole second one. */
  .player-dialog .dialog-actions{flex-wrap:wrap;gap:10px}
  .player-speed{margin-right:0;width:100%;flex-wrap:wrap;row-gap:6px}
  .player-speed>span{flex:1}
  .player-speed small{order:1;margin:0}
  .speed-choices{order:2;flex-basis:100%;flex-wrap:nowrap}
  .speed-choices button{flex:1;min-width:0}
  .player-dialog .dialog-actions .secondary{width:100%;text-align:center}
}

/* ---- Watched region under the timeline --------------------------------------------- */

/* The browser's scrubber cannot be marked up: its controls are in a shadow root the page
   cannot reach. This strip sits directly under it, at the same width, so the filled part
   lines up with the part of the timeline above it that has been watched. */
.player-seen{margin-top:8px}
.player-seen-track{position:relative;height:5px;border-radius:3px;background:#28342b;overflow:visible}
/* One block per stretch actually played, positioned along the track, so a minute that
   was skipped stays visibly empty instead of being filled in. */
.player-seen-fill{position:absolute;inset:0}
.player-seen-fill i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--green);min-width:2px}
/* Where you are now, which can be behind the furthest point reached. */
.player-seen-track b{position:absolute;top:-3px;width:2px;height:11px;border-radius:1px;background:#edf2ed;transform:translateX(-1px)}
.player-seen small{display:block;margin-top:6px;font-size:10px;color:#8b9a8e}
@media(prefers-reduced-motion:reduce){.player-seen-track i{transition:none}}

/* StreamWatch's own playback controls. They exist because the browser's live in a shadow
   root the page cannot reach: the watched stretches have to be painted into the timeline
   itself rather than on a second bar underneath it, and a capture still being written
   needs a length the browser does not have. Turning them off in settings hands playback
   back to the browser, picture-in-picture and casting included. */

/* Fullscreen is asked of this box rather than of the dialog, which Chrome refuses
   outright, and taking it whole keeps the controls with the picture. */
.player-stage{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
/* Focused on opening so the keyboard reaches the player; a ring round the whole picture
   says nothing a person needs to know. */
.player-stage:focus{outline:none}

.player-controls{flex:0 0 auto;margin-top:6px}

/* The timeline has a row to itself. Sharing one with the play button, two clocks and
   three more buttons left it sixty-six pixels wide on a phone, which is not something
   anyone can aim at. Tall enough to see, with a hit area well past that: the padding is
   transparent and the track is drawn by the inner rule. */
.player-bar .player-seen-track,.player-controls>.player-seen-track{height:auto;background:none;border-radius:0}
.player-controls>.player-seen-track{position:relative;display:block;width:100%;padding-block:14px;
  cursor:pointer;touch-action:none}
.player-controls>.player-seen-track::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:12px;transform:translateY(-50%);border-radius:6px;background:#28342b}
.player-controls>.player-seen-track[aria-disabled="true"]{cursor:default}
.player-seen-fill{position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);
  border-radius:3px;overflow:hidden}
.player-seen-fill i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--green);min-width:3px}
/* How far through, where there is nothing watched to show: a capture still being written. */
.player-seen-track u{position:absolute;left:0;top:50%;height:6px;width:0;transform:translateY(-50%);
  border-radius:3px;background:var(--green);opacity:.55}
/* A knob rather than a bar: it reads as the thing to grab, and it stays visible over a
   mark tick, which the old two-pixel bar could be lost behind. */
.player-controls>.player-seen-track b{position:absolute;top:50%;z-index:1;width:16px;height:16px;
  transform:translate(-8px,-50%);border-radius:50%;background:#f4f8f2;
  box-shadow:0 0 0 3px #0f140fb3,0 1px 5px #000a;transition:transform .12s ease}
.player-controls>.player-seen-track:hover b{transform:translate(-8px,-50%) scale(1.15)}
.player-controls>.player-seen-track[aria-disabled="true"] b{width:4px;height:18px;border-radius:2px;
  transform:translate(-2px,-50%)}

/* The time under the pointer, and the name of a mark if one is there. */
.player-hover{position:absolute;bottom:calc(100% - 6px);z-index:3;transform:translateX(-50%);
  padding:3px 8px;border-radius:6px;background:#0c110de6;border:1px solid #3c4b38;color:#eef5ec;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}

/* Where you are, and how much of the recording is behind you, straight under the line
   both of them describe. */
.player-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:-4px}
.player-controls .player-meta small{display:block;margin:0;min-width:0;font-size:11px;color:#9aab9d;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Going back, playing and going forward in the middle, where a thumb or an eye expects
   them; sound and marking on the left, speed and fullscreen on the right. */
.player-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:4px}
.player-side{display:flex;align-items:center;gap:4px;min-width:0}
.player-side.end{justify-content:flex-end}
.player-transport{display:flex;align-items:center;gap:12px}
.player-key{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:none;border:0;color:#e4efe0;font-size:15px;line-height:1;transition:background .15s ease,transform .1s ease}
.player-key:hover{background:#ffffff1a;color:#fff}
.player-key:active{transform:scale(.94)}
.player-key:disabled{opacity:.3;cursor:default;background:none}
.player-transport .player-key svg{width:24px;height:24px}
.player-main{width:50px;height:50px;background:var(--green);color:#15210f}
.player-main:hover{background:#cbffb5;color:#15210f}
.player-key.off{color:#e9a28f}
.player-key svg{display:block}
.player-clock{flex:0 0 auto;font-size:12px;color:#c6d4c7;font-variant-numeric:tabular-nums;white-space:nowrap}
.player-clock i{font-style:normal;color:#5f6f63;margin:0 2px}

/* Sound. The slider takes itself away on any player that refuses to set volume, which is
   every iPhone: there the hardware buttons are the volume control and a slider that moves
   without doing anything is worse than none. */
/* Sound opens a panel of its own rather than sitting on the row. Six controls on a
   390px row leave no space for a slider, and one narrow enough to fit is one nobody can
   drag; in a panel it is full size on every screen. */
.player-sound{position:relative;flex:0 0 auto;display:flex}
.sound-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:2;
  display:flex;align-items:center;gap:10px;padding:10px 12px;width:max-content;
  background:#141a15f2;border:1px solid #3c4b38;border-radius:11px;box-shadow:0 10px 30px #000a}
.sound-mute{padding:7px 11px;font-size:11px;border-radius:7px;background:#233022;
  border:1px solid #3a4b35;color:#d5e8cf;white-space:nowrap}
.sound-mute:hover{border-color:var(--green);color:var(--green)}
.sound-mute.on{background:var(--green);border-color:var(--green);color:#1d2a18;font-weight:600}
.player-volume{-webkit-appearance:none;appearance:none;width:132px;height:24px;padding:0;margin:0;
  background:none;border:0;cursor:pointer}
.player-volume::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#2d3b2f}
.player-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  margin-top:-6px;border-radius:50%;background:var(--green);border:0}
.player-volume::-moz-range-track{height:6px;border-radius:3px;background:#2d3b2f}
.player-volume::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--green);border:0}
.player-controls small{display:block;margin-top:6px;font-size:10px;color:#8b9a8e}


/* Fullscreen: the picture takes the room, the controls sit over the bottom of it. */
.player-stage:fullscreen{display:flex;flex-direction:column;background:#000}
/* The dialog keeps the picture to 58vh so the controls below it stay on screen; in
   fullscreen there is nothing below it to make room for, and that cap has to go or two
   fifths of the screen stay black. */
.player-stage:fullscreen video{flex:1;min-height:0;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;border-radius:0;object-fit:contain;background:#000}
.player-stage:fullscreen .player-controls{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:10px 20px 18px;background:linear-gradient(transparent,#000000d9 38%)}
.player-stage:fullscreen .player-controls small{color:#b6c6b9}

@media(max-width:760px){
  .player-bar{gap:4px}
  .player-side{gap:2px}
  .player-transport{gap:6px}
  .player-key{width:44px;height:44px;font-size:14px}
  .player-main{width:52px;height:52px}
  .player-controls>.player-seen-track{padding-block:16px}
}

/* A speed control for fullscreen, where the row of buttons below the video is off screen.
   One button and a short list: what it covers while open is a corner, not the picture. */
.rate-holder{position:relative;flex:0 0 auto;display:flex}
.player-rate{width:auto;min-width:40px;padding:0 9px;border-radius:19px;font-size:12px;
  font-variant-numeric:tabular-nums;background:#ffffff14}
.rate-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px;width:max-content;
  background:#141a15f2;border:1px solid #3c4b38;border-radius:11px;box-shadow:0 10px 30px #000a}
.rate-menu button{min-width:46px;padding:8px 6px;font-size:12px;border-radius:7px;
  background:#233022;border:1px solid #3a4b35;color:#d5e8cf;font-variant-numeric:tabular-nums}
.rate-menu button:hover{border-color:var(--green);color:var(--green)}
.rate-menu button.on{background:var(--green);border-color:var(--green);color:#1d2a18;font-weight:600}
.rate-menu small{grid-column:1/-1;margin:2px 0 0;font-size:10px;color:#8b9a8e;text-align:center}

/* Out of the way while the video plays, back the moment anything is touched. Paused
   playback keeps them, which is what every built-in control bar does too. */
.player-stage:fullscreen .player-controls{transition:opacity .22s ease}
.player-stage:fullscreen.idle .player-controls{opacity:0;pointer-events:none}
.player-stage:fullscreen.idle{cursor:none}
/* Over a picture rather than a panel, so the controls carry their own contrast. */
.player-stage:fullscreen .player-key{color:#fff;filter:drop-shadow(0 1px 2px #000c)}
.player-stage:fullscreen .player-main{color:#15210f;filter:none}
.player-stage:fullscreen .player-clock{color:#e8efe6;text-shadow:0 1px 3px #000c}
.player-stage:fullscreen .player-controls>.player-seen-track::before{background:#ffffff29}
.player-stage:fullscreen .player-seen-track u{opacity:.8}

@media(max-width:760px){
  .player-bar{gap:6px}
  .player-stage:fullscreen .player-clock{font-size:11px}
}

/* What the browser already holds, behind what has been watched. Playback comes in bounded
   windows, so this is the difference between "it has stopped" and "it is filling up just
   ahead of you". */
/* Twice the height of the watched band and light enough to read round it, because on a
   recording already watched all through the green covers the middle of the whole track,
   and three pixels above and below it are the only place left to see loading. At 10px
   and 15 per cent white it vanished there, and in fullscreen it was the very colour of
   the track underneath. */
.player-buffered{position:absolute;left:0;right:0;top:50%;height:12px;transform:translateY(-50%);
  border-radius:5px;overflow:hidden}
.player-buffered i{position:absolute;top:0;bottom:0;border-radius:6px;background:#ffffff5e}
.player-stage:fullscreen .player-buffered i{background:#ffffff85}
/* Loaded around an earlier jump rather than where the playhead is: there, but not what plays next. */
.player-buffered i.away{background:#ffffff24}
.player-stage:fullscreen .player-buffered i.away{background:#ffffff38}

/* Waiting for video, over the picture: the question "is it loading?" answered where you
   are looking, whatever the timeline shows. */
.player-loading{position:absolute;left:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;border:4px solid #ffffff38;border-top-color:var(--green);
  animation:player-spin .8s linear infinite;pointer-events:none;filter:drop-shadow(0 1px 4px #000b)}
@keyframes player-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.player-loading{animation-duration:2.4s}}

/* Square, as a close button should be. .small-button gave it 3px of padding and whatever
   width the glyph happened to need. */
.player-close{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;padding:0;
  border-radius:9px;background:#1f2a20;border:1px solid #38472f;color:#c3d5c2;font-size:17px;
  line-height:1}
.player-close:hover{border-color:var(--green);color:var(--green)}
@media(max-width:760px){.player-close{width:40px;height:40px;font-size:18px}}

.player-mark{font-size:15px}
.mark-holder{position:relative;flex:0 0 auto;display:flex}
.mark-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:2;display:flex;
  flex-direction:column;gap:5px;padding:10px;width:max-content;max-width:64vw;
  max-height:46vh;overflow-y:auto;background:#141a15f2;border:1px solid #3c4b38;
  border-radius:11px;box-shadow:0 10px 30px #000a}
.mark-menu small{color:#8b9a8e;font-size:10px;margin-bottom:2px}
.mark-menu button{display:flex;padding:7px 9px;border-radius:7px;background:#233022;
  border:1px solid #3a4b35;text-align:left}
.mark-menu button:hover{border-color:var(--green)}

/* What has been marked, under the controls: the list is how a moment is jumped to. */
.mark-list{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;margin-top:10px;max-height:118px;overflow-y:auto}
.mark-row{display:flex;align-items:center;gap:8px}
.mark-jump{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-radius:8px;background:#141b16;border:1px solid var(--line);text-align:left}
.mark-jump:hover{border-color:#41513f}
.mark-jump b{font-size:11px;font-weight:600;color:#dbe8d9;font-variant-numeric:tabular-nums}
.mark-jump span{flex:1;min-width:0;font-size:11px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mark-drop{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:none;
  color:#8a9a8c;font-size:13px}
.mark-drop:hover{color:var(--red)}


/* Tagged sections along the top edge of the timeline, in their tag's colour: the stretch
   of a joined video that a tag on one of its parts was about. Above the bar rather than
   on it, so neither what was watched nor what is loading is covered. */
.player-spans{position:absolute;left:0;right:0;top:calc(50% - 12px);height:4px;pointer-events:none}
.span-band{position:absolute;top:0;bottom:0;min-width:3px;border-radius:2px;opacity:.9}
.span-band.is-green{background:#b5f99a}.span-band.is-blue{background:#8fc4f0}
.span-band.is-purple{background:#c2a4ee}.span-band.is-amber{background:#eec27f}
.span-band.is-red{background:#f19b90}.span-band.is-grey{background:#c0cbc2}
/* Overlapping sections stack upwards, a row each, with a dark gap so two of one colour
   still read as two. */
.span-band[data-row]:not([data-row="0"]){box-shadow:0 1px 0 #0f140f}
.span-band[data-row="1"]{transform:translateY(-5px)}
.span-band[data-row="2"]{transform:translateY(-10px)}
.span-band[data-row="3"]{transform:translateY(-15px)}
/* The timeline makes room for the rows, so the top one stays clear of the picture. */
.player-controls>.player-seen-track[data-stack="1"]{margin-block:5px}
.player-controls>.player-seen-track[data-stack="2"]{margin-block:10px}
.player-controls>.player-seen-track[data-stack="3"]{margin-block:15px}

/* What the whole recording is tagged, under its title, with the way to change it. */
.player-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.player-tag-edit{padding:4px 9px;font-size:10px;line-height:1;border-radius:999px;background:none;
  border:1px dashed #4a5b45;color:#b9cbb9;white-space:nowrap}
.player-tag-edit:hover{border-color:var(--green);color:var(--green)}

/* Something the player did on its own, such as stepping over a damaged moment: said
   quietly under the picture, and gone again after a few seconds. */
.player-note{flex:0 0 auto;margin:8px 0 0;font-size:11px;color:#e3c77e}

/* Sideways swipes on the picture move through the recording, so the browser must not take
   them for itself; up and down are left to it. */
.player-stage video{touch-action:pan-y;-webkit-user-drag:none}
/* A mouse drag across the picture also selected the page around it, and the next drag that
   started on that selection was taken by the browser as dragging it away: it cancelled the
   swipe, so every second drag did nothing. */
.player-stage{-webkit-user-select:none;user-select:none}
/* Where a swipe across the picture will land: how far, and at what time. */
.player-seek-tip{position:absolute;left:50%;z-index:3;transform:translate(-50%,-50%);display:grid;
  justify-items:center;gap:2px;padding:10px 16px;border-radius:12px;background:#0c110dd9;
  border:1px solid #3c4b38;pointer-events:none;font-variant-numeric:tabular-nums}
.player-seek-tip b{font-size:22px;font-weight:650;color:#f1f7ef}
.player-seek-tip small{font-size:11px;color:#b9cbb9}

/* The elapsed time is also the way to type one. It looks like the time it is, with a
   dotted line under it to say it can be pressed. */
.player-goto{padding:2px 1px;background:none;border:0;border-bottom:1px dotted #6f8272;border-radius:0;
  color:inherit;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.player-goto:hover{color:var(--green);border-bottom-color:var(--green)}
.player-goto-input{width:8.5em;padding:3px 6px;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;
  background:#0f1510;border:1px solid var(--green);border-radius:5px;color:var(--text)}
@media(max-width:760px){.player-goto-input{font-size:16px;width:7.5em}}
/* The row keeps the box's height whether or not it is open, so opening it does not push
   the picture up. On a phone the box needs 16px text, or the browser zooms in on it. */
.player-meta{min-height:26px;align-items:center}
.player-goto-input{height:26px;padding:0 6px}

/* Where a page cannot set the volume (iPhones and iPads), the panel says what does. */
.sound-note{max-width:150px;font-size:11px;line-height:1.35;color:#b9cbb9}

/* The one thing to do about a note, such as starting from the beginning after a resume. */
.player-note-action{margin-left:6px;padding:2px 9px;font-size:11px;border-radius:999px;background:none;
  border:1px solid #6b6340;color:#f0d197;white-space:nowrap}
.player-note-action:hover{border-color:#f0d197}

/* To the next part not watched yet, beside how much has been. A button that reads like
   the line it sits on, with the arrow to say it goes somewhere. On a phone it takes a line
   of its own under the time, so neither is squeezed. */
.player-meta{flex-wrap:wrap}
.player-controls .player-meta small{margin-left:auto}
.player-unwatched{flex:0 0 auto;margin-left:10px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;
  border-radius:999px;background:#233022;border:1px solid #3a4b35;color:var(--green)}
.player-unwatched:hover{border-color:var(--green)}
.player-stage:fullscreen .player-unwatched{background:#0c110dcc}
@media(max-width:760px){
  .player-controls .player-meta small{flex:1 1 auto;text-align:right}
  .player-unwatched{margin:4px 0 0 auto}
  .player-meta:has(.player-unwatched:not([hidden])){row-gap:2px}
  .player-unwatched:not([hidden]){order:3}
}

/* Marking a moment or a section: the choice at the top of the menu. */
.mark-kind{display:flex;gap:4px;margin-bottom:4px;padding:3px;border-radius:8px;background:#0f1510}
.mark-kind button{flex:1;padding:5px 10px;font-size:11px;border-radius:6px;background:none;border:0;color:#b9cbb9}
.mark-kind button.on{background:#2c3a2a;color:var(--green);font-weight:600}
/* A section being tagged: what it is, where it started, and how to end or drop it. On the
   timeline it grows from its start to wherever the video is, striped while still open. */
.player-section{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;padding:6px 10px;
  border-radius:8px;background:#1d2a1d;border:1px dashed #4d6a43;font-size:11px;color:#d3dfd3}
.player-section span{flex:1 1 auto;display:flex;align-items:center;gap:6px}
.section-end{padding:4px 12px;font-size:11px;font-weight:600;border-radius:999px;background:var(--green);border:0;color:#15210f}
.section-cancel{padding:4px 8px;font-size:11px;background:none;border:0;color:#b9cbb9}
.section-cancel:hover{color:var(--text)}
.span-band.growing{opacity:.95;background-image:repeating-linear-gradient(135deg,#0006 0 3px,transparent 3px 7px)}
/* Parts marked to be cut out: struck through on the line itself, red, the open one striped. */
.player-cuts{position:absolute;left:0;right:0;top:50%;height:9px;transform:translateY(-50%);pointer-events:none}
.cut-band{position:absolute;top:0;bottom:0;min-width:3px;border-radius:2px;background:#ff786fcc;
  background-image:repeating-linear-gradient(135deg,#0000004d 0 3px,transparent 3px 6px);box-shadow:0 0 0 1px #0f140f99}
.cut-band.growing{background-color:#ff786f99}
.tag-chip.cut-chip{background:#3b2725;color:#ffb3aa;border-color:#6b3a35}
/* The cut editor, under the controls while cutting. Yellow is what is marked (the frames
   and handles on the timeline, the chosen part in the list), red is what is taken out. */
.cut-panel{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px 12px;border-radius:10px;
  background:#1b1d17;border:1px solid #514a2e;font-size:12px;color:#d3dfd3}
.cut-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cut-title{font-size:12px;color:#f2d38f;font-weight:600}
.cut-mode{display:inline-flex;padding:3px;border-radius:9px;background:#121812;border:1px solid var(--line)}
.cut-mode button{padding:5px 11px;border-radius:7px;background:none;color:#aebdae;font-size:12px}
.cut-mode button:hover{color:var(--text)}
.cut-mode button[aria-checked="true"]{background:#2c3a2a;color:var(--green);font-weight:600}
.cut-mode button[data-cut-mode="remove"][aria-checked="true"]{background:#3b2725;color:#ffb3aa}
.cut-quit{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:8px;
  background:none;color:#a9b8aa;font-size:18px;line-height:1}
.cut-quit:hover{color:var(--text);background:#ffffff0f}
.cut-explain{margin:-2px 0 0;font-size:11px;color:#aebdae}
/* Removing: the numbers that name the parts go red, like what they stand for. */
.cut-panel.removing .cut-pick{background:#3b2725;border-color:#6b3a35;color:#ffb3aa}
.cut-panel.removing .cut-part.active .cut-pick{background:#ff8a80;border-color:#ff8a80;color:#2a1210}
.cut-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:118px;overflow-y:auto}
.cut-part{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:9px;border:1px solid transparent}
.cut-part.active{border-color:#f2d38f55;background:#f2d38f0d}
.cut-pick{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;
  background:#2b2a1e;border:1px solid #5f5532;color:#f2d38f;font-size:11px;font-weight:600}
.cut-part.active .cut-pick{background:#f2d38f;color:#1d1a10;border-color:#f2d38f}
.cut-edge{display:inline-flex;align-items:center;border:1px solid #3a483e;border-radius:7px;background:#121812}
.cut-edge:focus-within{border-color:#f2d38f}
.cut-panel .cut-time{width:74px;padding:5px 2px 5px 8px;border:0;border-radius:7px 0 0 7px;background:none;
  font-size:12px;font-variant-numeric:tabular-nums}
.cut-panel .cut-time:focus-visible{outline:none}
.cut-here{display:grid;place-items:center;width:28px;height:28px;padding:0;border-left:1px solid #3a483e;
  border-radius:0 7px 7px 0;background:none;color:#f2d38f}
.cut-here:hover{background:#f2d38f1a}
.cut-here svg{width:16px;height:16px}
.cut-dash{color:#7d8b80;font-style:normal}
.cut-part small{margin-left:auto;padding-left:4px;color:var(--muted);font-variant-numeric:tabular-nums}
.cut-part .mark-drop{width:28px;height:28px}
.cut-empty{padding:6px 4px;color:var(--muted)}
.cut-tools{display:flex;flex-wrap:wrap;gap:6px}
.cut-tools button{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  background:#233022;border:1px solid #3a4b35;font-size:11px;color:#d3dfd3}
.cut-tools button:hover:not(:disabled){border-color:var(--green)}
.cut-tools button[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.cut-tools svg{width:13px;height:13px}
.cut-tools button:disabled{opacity:.45;cursor:default}
.cut-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cut-result{flex:1 1 220px;margin:0;font-size:12px;color:#c9d6c9}
.cut-result b{color:var(--text);font-variant-numeric:tabular-nums}
.cut-gone{color:#ffb3aa}
.cut-warn{color:#f2d38f;font-weight:600}
.cut-foot .section-cancel{margin-left:auto}
#cut-save{padding:7px 16px;font-size:12px}
#cut-save:disabled{opacity:.4;cursor:default}
/* On the timeline: a frame round each marked part, and a handle at each end of it. */
.cut-frame{position:absolute;top:-4px;bottom:-4px;border:1.5px solid #f2d38f66;border-radius:4px;background:none!important;box-shadow:none}
.cut-frame.active{border-color:#f2d38f}
.cut-handles{position:absolute;left:0;right:0;top:50%;height:0;z-index:2;pointer-events:none}
.cut-grip{position:absolute;top:0;width:12px;height:26px;border-radius:5px 0 0 5px;background:#c9ad6c;
  transform:translate(-100%,-50%);pointer-events:auto;cursor:ew-resize;touch-action:none;box-shadow:0 0 0 1.5px #0f140f}
.cut-grip.end{border-radius:0 5px 5px 0;transform:translate(0,-50%)}
.cut-grip.active{background:#f2d38f}
.cut-grip::after{content:"";position:absolute;left:50%;top:7px;bottom:7px;width:2px;margin-left:-1px;border-radius:1px;background:#0f140f88}
/* A larger target than the handle itself, for a finger. */
.cut-grip::before{content:"";position:absolute;inset:-10px -8px}
.mark-holder .player-mark.cutting{color:#f2d38f}
/* The cut dialog: what the new video keeps, and what it would lose. */
.cut-num{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:4px;border-radius:50%;
  background:#2b2a1e;color:#f2d38f;font-size:10px;font-style:normal;font-weight:600}
.cut-tags{margin:0 0 14px!important;padding:9px 11px;border-radius:8px;background:#2e2717;border:1px solid #6b5a2e;
  color:#f2d38f;font-size:12px;line-height:1.5}
.cut-tags b{color:#ffe2a6}
@media(max-width:480px){
  .cut-panel{padding:9px}
  .cut-part{gap:4px}
  .cut-panel .cut-time{width:62px;padding-left:6px}
  .cut-part small{display:none}
  .cut-mode button{padding:5px 8px}
}
.mark-menu .mark-group{margin-top:6px}
.mark-menu .mark-cut{color:#ffcdc6}
/* Just the timeline in fullscreen leaves no room for the row of marked cuts; they stay
   marked, and the row comes back with the rest of the controls. */
.player-stage:fullscreen.compact .player-cut{display:none}
.cut-dialog{width:min(460px,calc(100vw - 24px));max-width:none}
.cut-dialog h2{font-size:17px}
.cut-summary{margin:8px 0 12px!important;font-size:13px;color:var(--text)}
.cut-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto}
.cut-list li{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 11px;border-radius:8px;background:#141b16;border:1px solid var(--line);font-size:12px}
.cut-list li span{flex:1;min-width:0;overflow-wrap:anywhere}
.cut-list small{color:var(--muted);margin-left:4px}
.cut-note{margin:0 0 14px!important;font-size:11px;line-height:1.5}
.cut-keep{border:0;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.cut-keep legend{font-size:11px;color:var(--muted);margin-bottom:6px;padding:0}
.cut-keep label{flex-direction:row;align-items:flex-start;gap:10px;margin:0;padding:9px 11px;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.cut-keep label:has(input:checked){border-color:#4d6a43;background:#1d2a1d}
.cut-keep input{margin:2px 0 0;accent-color:var(--green)}
.cut-keep span{display:flex;flex-direction:column;gap:2px;font-size:12px}
.cut-dialog .dialog-actions{flex-wrap:wrap}

/* ---- Less on screen at once ---------------------------------------------------------- */

/* One speed control, the bar's 1x button. The row of buttons is for the browser's own
   controls, which have nothing of the kind; beside the bar it only said the same twice. */
.player-dialog.custom-controls .dialog-actions{display:none}

/* The title, then the date and the recording's tags sharing one line under it. */
.player-head>div{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.player-head>div>h2{flex-basis:100%}
.player-head>div>p{margin:0}
.player-head .player-tags{margin-top:0}

/* Sections fold into one row: how many, and whose. Opened, the list is under it. */
.player-sections{flex:0 0 auto;margin-top:8px;padding-top:4px;border-top:1px solid var(--line)}
.player-sections-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px}
.player-sections-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 8px 8px 0;background:none;
  border:0;color:#c6d4c7;font-size:12px;font-weight:600}
.player-sections-toggle:hover{color:var(--text)}
.player-sections-toggle b{min-width:22px;padding:1px 7px;border-radius:999px;background:#233022;color:var(--green);
  font-size:11px;text-align:center;font-variant-numeric:tabular-nums}
.player-sections-toggle svg{color:#8b9a8e;transition:transform .15s ease}
.player-sections.open .player-sections-toggle svg{transform:rotate(180deg)}
.player-sections .mark-list{margin-top:4px}

/* A phone held upright in fullscreen has a third button on the right (speed, just the
   timeline, leave fullscreen), and three of them beside the centred transport ran into
   it. There the three groups share the width instead, a little smaller, edge to edge. */
@media(max-width:480px){
  .player-stage:fullscreen .player-controls{padding-left:10px;padding-right:10px}
  .player-stage:fullscreen .player-bar{grid-template-columns:auto auto auto;justify-content:space-between;gap:2px}
  .player-stage:fullscreen .player-side{gap:0}
  .player-stage:fullscreen .player-transport{gap:4px}
  .player-stage:fullscreen .player-key{width:38px;height:38px}
  .player-stage:fullscreen .player-main{width:48px;height:48px}
}
/* A phone on its side: too wide for the phone layout, far too short for the floating
   box, whose controls then ran off the bottom of the screen. The whole screen, as on a
   phone held upright, with the title on one line and the picture taking what is left. */
@media(orientation:landscape) and (max-height:520px){
  .player-dialog{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0;
    padding:6px max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left))}
  .player-head{margin-bottom:4px}
  .player-head>div{display:flex;align-items:baseline;gap:10px;min-width:0}
  .player-head h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player-head p{white-space:nowrap}
  .player-dialog video{min-height:60px;border-radius:6px}
  .player-close{padding:2px 8px}
  .player-controls>.player-seen-track{padding-block:10px}
  .player-key{width:38px;height:38px}
  .player-main{width:44px;height:44px}
  .player-bar{margin-top:0}
  .player-section{margin-top:3px;padding:3px 10px}
  .mark-menu{max-height:64vh}
}
/* Two buttons each side of the transport, on the narrowest phones too. */
@media(max-width:400px){
  .player-key{width:42px;height:42px}
  .player-main{width:50px;height:50px}
  .player-transport{gap:4px}
}

/* The last picture, held over the video while the next source loads (holdPicture). */
.player-hold{position:absolute;z-index:1;pointer-events:none;border-radius:8px;background:#000}
.player-stage:fullscreen .player-hold{border-radius:0}
/* The keyframe where a drag has got to, over the video until it has loaded there
   (keysFollow). Laid out and decoding all the time, only not seen. Until keysShow puts it
   over the picture it fills the stage: left to its own height, a portrait recording made
   it some 1700px tall and gave the dialog a scrollbar onto nothing. */
.player-dialog video.player-keys{position:absolute;z-index:1;flex:none;left:0;top:0;width:100%;height:100%;
  min-height:0;max-height:none;opacity:0;pointer-events:none}
.player-dialog video.player-keys.shown{opacity:1}
.player-stage:fullscreen video.player-keys{border-radius:0}
/* Zoomed into the picture (see zoom in app.js): one finger moves round it rather than the
   page, and the button saying how far it is zoomed takes it back to the whole picture.
   Where the browser cannot show part of a video in its own box, the video is scaled up
   inside the stage, under the controls. */
.player-stage.zoomed video{touch-action:none;cursor:grab}
.player-stage.zoomed video:active{cursor:grabbing}
.player-stage.zoomed.scaled{overflow:hidden}
.player-stage.zoomed.scaled .player-controls{position:relative;z-index:2}
.player-zoom{position:absolute;z-index:3;transform:translateX(-100%);padding:5px 10px;border:0;
  border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font:600 12px/1.2 inherit;cursor:pointer;
  white-space:pre}
.player-zoom[hidden]{display:none}

/* Where a swipe will land, kept small and near the top of the picture: a box in the middle
   hid the very thing the swipe was looking for. */
.player-seek-tip{display:flex;align-items:baseline;gap:8px;transform:translateX(-50%);padding:5px 12px;
  border-radius:999px;background:#000000a6;border:0;box-shadow:0 1px 6px #0006}
.player-seek-tip b{font-size:15px;font-weight:650}
.player-seek-tip small{font-size:11px;color:#c9d6c8}

/* ---- Fullscreen: all the controls, or just the timeline ------------------------------ */

/* The switch is only in fullscreen; inline the controls sit under the picture anyway. */
.player-compact{display:none}
.player-stage:fullscreen .player-compact{display:grid}
/* Just the timeline: one thin line along the bottom with the time beside it, and the
   switch back and the fullscreen button at its end. The rows it comes from are opened up
   (display:contents) so their few pieces that stay sit in that one line. */
.player-stage:fullscreen.compact .player-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;column-gap:10px;padding:0 14px 6px;background:linear-gradient(transparent,#0000008c 70%)}
.player-stage:fullscreen.compact .player-meta,.player-stage:fullscreen.compact .player-bar,
.player-stage:fullscreen.compact .player-side.end{display:contents}
.player-stage:fullscreen.compact .player-meta>small,.player-stage:fullscreen.compact .player-unwatched,
.player-stage:fullscreen.compact .player-side:not(.end),.player-stage:fullscreen.compact .player-transport,
.player-stage:fullscreen.compact .rate-holder{display:none}
.player-stage:fullscreen.compact .player-section{grid-column:1/-1;grid-row:1}
.player-stage:fullscreen.compact .player-clock{font-size:11px;color:#dfe8dd}
.player-stage:fullscreen.compact .player-key{width:32px;height:32px}
.player-stage:fullscreen.compact .player-key svg{width:18px;height:18px}
/* A thin line, still easy to hit: the track is drawn small, its hit area is not. */
.player-stage:fullscreen.compact .player-controls>.player-seen-track{padding-block:10px}
.player-stage:fullscreen.compact .player-controls>.player-seen-track::before{height:4px;border-radius:2px}
.player-stage:fullscreen.compact .player-seen-fill,.player-stage:fullscreen.compact .player-seen-track u{height:4px;border-radius:2px}
.player-stage:fullscreen.compact .player-buffered{height:4px;border-radius:2px}
.player-stage:fullscreen.compact .player-spans{top:calc(50% - 6px);height:2px}
.player-stage:fullscreen.compact .span-band[data-row="1"]{transform:translateY(-3px)}
.player-stage:fullscreen.compact .span-band[data-row="2"]{transform:translateY(-6px)}
.player-stage:fullscreen.compact .span-band[data-row="3"]{transform:translateY(-9px)}
.player-stage:fullscreen.compact .player-controls>.player-seen-track[data-stack="1"]{margin-block:3px}
.player-stage:fullscreen.compact .player-controls>.player-seen-track[data-stack="2"]{margin-block:6px}
.player-stage:fullscreen.compact .player-controls>.player-seen-track[data-stack="3"]{margin-block:9px}
.player-stage:fullscreen.compact .player-controls>.player-seen-track b{width:10px;height:10px;
  transform:translate(-5px,-50%);box-shadow:0 0 0 2px #0f140fb3}
.player-stage:fullscreen.compact .player-controls>.player-seen-track:hover b,
.player-stage:fullscreen.compact .player-controls>.player-seen-track:active b{transform:translate(-5px,-50%) scale(1.5)}
/* While the video plays the line and the time stay; only the two buttons go. */
.player-stage:fullscreen.compact.idle .player-controls{opacity:1;pointer-events:auto}
.player-stage:fullscreen.compact.idle .player-key{opacity:0;pointer-events:none}
.player-stage:fullscreen.compact .player-key{transition:opacity .22s ease}
@media(max-width:760px){
  .player-stage:fullscreen.compact .player-controls{padding:0 10px 4px;column-gap:6px}
  .player-stage:fullscreen.compact .player-key{width:38px;height:38px}
}
.player-stage:fullscreen.compact .player-clock i{color:#9fb0a2}

/* ---- Comments ------------------------------------------------------------------------ */

/* Along the bottom edge of the timeline, as the tagged sections run along its top: a pin
   for a moment, a thin line for a stretch, in one warm white that no tag colour uses. */
.player-comment-marks{position:absolute;left:0;right:0;top:calc(50% + 8px);height:4px;pointer-events:none}
.comment-band{position:absolute;top:0;bottom:0;min-width:3px;border-radius:2px;background:#f1e9cf;opacity:.85}
.comment-pin{position:absolute;top:-2px;width:3px;height:8px;border-radius:2px;background:#f1e9cf;
  transform:translateX(-1.5px);box-shadow:0 0 0 1px #0f140f99}
.player-stage:fullscreen.compact .player-comment-marks{top:calc(50% + 4px);height:2px}
/* Overlapping stretches stack downwards, as the sections above stack up. */
.comment-band[data-row="1"]{transform:translateY(5px)}
.comment-band[data-row="2"]{transform:translateY(10px)}
.comment-band[data-row="3"]{transform:translateY(15px)}
.player-stage:fullscreen.compact .comment-pin{top:-1px;height:5px}
.player-stage:fullscreen.compact .comment-band[data-row="1"]{transform:translateY(3px)}
.player-stage:fullscreen.compact .comment-band[data-row="2"]{transform:translateY(6px)}
.player-stage:fullscreen.compact .comment-band[data-row="3"]{transform:translateY(9px)}

/* Writing one: under the timeline like a section being tagged, and the same shape. */
.player-comment{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:8px 10px;border-radius:8px;
  background:#22251c;border:1px dashed #6a6446;font-size:11px;color:#e3dfcf}
.player-comment[hidden]{display:none}
.comment-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.comment-where span{flex:1 1 auto}
.comment-until{padding:4px 10px;font-size:11px;border-radius:999px;background:none;border:1px solid #6a6446;color:#f1e9cf}
.comment-until:hover{border-color:#f1e9cf}
.player-comment textarea{width:100%;max-width:none;min-height:44px;max-height:30vh;margin:0;padding:7px 9px;resize:vertical;
  font:inherit;font-size:13px;line-height:1.4;color:var(--text);background:#141810;border:1px solid #4a4836;border-radius:7px}
.player-comment textarea:focus{outline:none;border-color:#f1e9cf}
.comment-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.comment-actions small{margin-right:auto;color:#8b9a8e;font-size:10px}
.player-stage:fullscreen.compact .player-comment{grid-column:1/-1;grid-row:1}
@media(max-width:760px){.comment-actions small{display:none}}

/* The list: when, then what was written, whole and wrapped rather than cut off. */
.player-comments .player-sections-head .player-tag-edit{border-color:#6a6446;color:#e3dfcf}
.player-comments .player-sections-head .player-tag-edit:hover{border-color:#f1e9cf;color:#f1e9cf}
.player-comments .player-sections-toggle b{background:#2d2c21;color:#f1e9cf}
.comment-list{max-height:180px}
.comment-row{align-items:flex-start}
.mark-jump.comment-text{align-items:flex-start}
.mark-jump.comment-text b{flex:0 0 auto;min-width:56px;padding-top:1px;color:#f1e9cf}
.mark-jump.comment-text p{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.45;color:#dbe3d9;
  white-space:pre-wrap;overflow-wrap:anywhere}
.comment-row .mark-drop{display:grid;place-items:center}

/* On a phone, folded, the sections and the comments share one row rather than taking one
   each from the picture; one opened takes the full width. Its "+ Comment" button goes with
   the list, as the mark menu writes one too. */
.player-panels{flex:0 0 auto;display:flex;flex-direction:column}
@media(max-width:760px),(orientation:landscape) and (max-height:520px){
  .player-panels{flex-flow:row wrap;column-gap:18px}
  .player-panels:has(>:not([hidden])){margin-top:8px;border-top:1px solid var(--line)}
  .player-panels>.player-sections{margin-top:0;padding-top:0;border-top:0}
  .player-panels>.player-sections.open{flex-basis:100%}
  .player-panels>:not([hidden])+.open,.player-panels>.open+:not([hidden]){border-top:1px solid var(--line)}
  .player-comments:not(.open) [data-comment-whole]{display:none}
  .comment-list{max-height:132px}
}
@media(orientation:landscape) and (max-height:520px){
  .player-panels .player-sections-head{min-height:30px}
  .player-panels .player-sections-toggle{padding-block:4px}
  .player-panels .mark-list{max-height:76px}
}