/* Offers to combine, arranged so the question they ask can actually be answered: is this
   one broadcast that dropped out, or two? That is a question about one streamer, and it
   turns on how much time is unaccounted for, so the offers for a streamer are kept
   together and every gap is written down rather than left to be worked out by hand. */
/* The section's own heading, with the way to put the whole thing away. */
.suggest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.suggest-head h3{display:inline;margin:0;font-size:13px;font-weight:600;color:#dbe8d9}
.suggest-head span{margin-left:8px;font-size:11px;color:var(--muted)}
.suggest-fold{padding:5px 11px;font-size:11px;border-radius:6px;background:#1f2a20;border:1px solid #38472f;color:#c3d5c2}
.suggest-fold:hover{border-color:var(--green);color:var(--green)}
#suggestions:not(:empty){margin-bottom:22px}

.streamer-offers{margin-bottom:12px;background:#19211b;border:1px solid #34432e;
  border-left:3px solid var(--green);border-radius:9px;overflow:hidden}
.offers-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid #26302a;background:#1b241d}
.offers-head strong{font-size:13px;font-weight:600;color:#dbe8d9}
.offers-head span{color:var(--muted);font-size:11px;white-space:nowrap}

.offer{padding:12px 16px}
/* The button stays on the heading's line, at the size of the text beside it: full width,
   it was a third of the height of a run on a phone. */
.offer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:12px}
.offer-title{flex:1;min-width:0}
.offer-head strong{font-weight:550;color:#c4d2c5}
.offer-head small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.offer-head .secondary{flex:0 0 auto;white-space:nowrap;padding:6px 11px;font-size:11px}

/* The run at a glance: small pictures that play their part, beside one timeline for the
   whole run in which each part is as long as it really is. */
.offer-glance{display:flex;align-items:center;gap:12px;margin-top:10px}
.glance-pictures{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.offer-glance .video-icon{width:42px;height:24px;padding:0;margin:0;font-size:9px;border-radius:4px}
.offer-glance .video-icon.portrait{width:24px;height:42px}
.glance-more{padding:0 3px;font-size:10px;color:var(--muted)}
.run-line{flex:1;min-width:0;display:flex;align-items:center;gap:3px}
.run-seg{flex:1 1 0;min-width:4px}
.run-seg .row-timeline{display:block;width:100%;max-width:none;margin:0;height:6px;border-radius:3px}
.run-seg .row-timeline i{border-radius:3px}
.run-seg .row-mark{top:-3px;bottom:-3px}

/* Part by part, one press further. */
.run-details>summary{display:inline-block;margin-top:9px;padding:3px 0;font-size:11px;color:#9fc493;
  cursor:pointer;list-style:none}
.run-details>summary::-webkit-details-marker{display:none}
.run-details>summary::after{content:' ▾'}
.run-details[open]>summary::after{content:' ▴'}
.run-details>summary:hover{color:var(--green)}
.run-details .when-open,.run-details[open] .when-closed{display:none}
.run-details[open] .when-open{display:inline}

/* The parts themselves, in order, with the silence between them written in between. One
   width for every part in every run, the way every row in the library has one length of
   timeline, so how much of each has been watched can be compared at a glance. Sizing them
   by length made a short part's timeline a stub beside a long one's, and scaled each run
   to fill its card, so the same length was drawn a different size from run to run. A run
   with more parts than fit wraps onto another line rather than scrolling out of sight. */
.filmstrip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 12px;margin-top:14px;padding-bottom:4px}
.strip-part{margin:0;flex:0 0 240px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.filmstrip .video-icon{width:96px;height:54px;font-size:14px;margin:0}
.filmstrip .video-icon.portrait{width:54px;height:96px}

/* Each picture opens its own part. A button rather than a link, because it opens the
   player in place. The mark is a small badge in the corner rather than a wash over the
   whole frame: these frames are the evidence being weighed, and covering them to say they
   can be opened would defeat the strip. It lights up under the pointer, and is there from
   the start on a touch screen, which has no pointer to show anything to. */
.filmstrip button.video-icon{padding:0;position:relative;overflow:hidden}
.filmstrip button.video-icon::after{content:'▶';position:absolute;right:3px;bottom:3px;
  width:15px;height:15px;display:grid;place-items:center;border-radius:4px;
  font-size:8px;line-height:1;color:#eafce2;background:#000000b3;
  transition:background .12s ease,color .12s ease}
.filmstrip button.video-icon:hover::after,.filmstrip button.video-icon:focus-visible::after{
  background:var(--green);color:#1b2a16}

/* What has been watched of each part, and what was marked in it, drawn under its own
   picture in the same shape the library and the player use. It spans the item rather than
   the picture, because a portrait frame is narrower than the time written beneath it and
   a bar that stopped short of the caption would read as belonging to neither. */
.filmstrip .row-timeline{align-self:stretch;width:auto;max-width:none;margin:9px 0 0;height:6px;border-radius:3px}
.filmstrip .row-timeline i{border-radius:3px}
.filmstrip .row-mark{top:-3px;bottom:-3px}
/* Finished watching still earns the tick: the bar below says where, not whether. The
   library hangs it outside the picture, which the clipping here would cut in half. */
.filmstrip .seen.done{right:3px;top:3px;width:13px;height:13px;font-size:9px;line-height:13px;box-shadow:none}
.offer-seen{color:#c0d8bb;font-weight:600}

.strip-part figcaption{margin-top:7px;font-size:11px;font-weight:550;color:#d3dfd3;white-space:nowrap;
  text-align:left}
.strip-part figcaption small{display:block;color:var(--muted);font-size:10px;font-weight:400;
  font-variant-numeric:tabular-nums;margin-top:1px;overflow:hidden;text-overflow:ellipsis}

/* Level with the middle of the pictures, where the eye crosses from one part to the next. */
.filmstrip .strip-gap{align-self:flex-start;margin-top:38px}

/* What each part is tagged with, and what the join will carry, drawn as the library draws
   tags. An empty holder takes no room. */
.strip-tags .tag-chips{margin-top:6px;max-width:100%}
.offer-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.offer-tags:not(:empty){margin-top:7px}
.offer-tags .tag-chips{margin:0}
.offer-tags-label{font-size:10px;color:var(--muted)}

/* To this part's own row in the list, where it can be deleted, tagged or downloaded. */
.strip-locate{margin-top:6px;padding:3px 0;background:none;border:0;font-size:10px;color:#9fc493}
.strip-locate:hover{color:var(--green);text-decoration:underline}
/* The row that was jumped to, lit for a moment and then fading back. A transition rather
   than an animation, so it still shows for anyone who has turned animation off. */
.recordings-table td{transition:background-color .9s ease}
.recordings-table tr.located td{background-color:#2a4224;transition:none}
.recordings-table tr.located:focus{outline:none}

/* The gap between two parts. Dashed, because it is the part where nothing was recorded. */
.strip-gap{flex:0 0 auto;font-size:10px;color:#9fb0a2;white-space:nowrap;
  padding:3px 8px;border:1px dashed #3f4d42;border-radius:999px;background:#151d17}

/* Two offers for one streamer, and the distance between them: the number that decides
   whether they are really one broadcast, with the chance to take both if they are. */
.between{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;
  margin:0 16px;padding:7px 0;border-top:1px dashed #3f4d42;border-bottom:1px dashed #3f4d42;
  font-size:11px;color:#a9b8ab}
.between b{color:#e4efe2;font-weight:600;font-size:12px}
.between-take{padding:3px 0;background:none;border:0;font-size:11px;color:#9fc493;white-space:nowrap}
.between-take:hover{color:var(--green);text-decoration:underline}

/* A phone has no room for parts side by side, so they stack: the picture on the left,
   the time, length and timeline beside it at the full width that is left, and the gap as
   a line of its own between them. Scrolling sideways through a strip hid all but the
   first part or two. */
@media(max-width:760px){
  .filmstrip{flex-direction:column;align-items:stretch;gap:8px;overflow:visible}
  .strip-part{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;
    column-gap:12px;align-items:center;min-width:0}
  .strip-tags{grid-column:2;grid-row:3}
  .strip-locate{grid-column:2;grid-row:4;justify-self:start;margin-top:4px;padding:6px 0}
  .strip-part .video-icon{grid-row:1 / span 4}
  .strip-part figcaption{grid-column:2;grid-row:1;margin:0;align-self:end}
  .filmstrip .row-timeline{grid-column:2;grid-row:2;align-self:start;margin-top:7px}
  .filmstrip .video-icon.portrait{width:40px;height:72px}
  .filmstrip .video-icon{width:72px;height:40px}
  .filmstrip .strip-gap{align-self:flex-start;margin:0 0 0 2px}
  .offer{padding:11px 13px}
  .offers-head{padding:9px 13px}
  .between{margin-inline:13px}
  .offer-glance{gap:9px}
}
.offer-tag-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}