/* Joins reported at the top of the page. A join copies every source into one file without
   re-encoding, which on a mechanical disk is minutes of work with nothing else to show
   for it, so it is worth seeing from whichever tab you are on rather than only from the
   row it belongs to. Sticky, because the library scrolls and the progress should not
   scroll away with it. */
.combining-banner{position:sticky;top:var(--top-bar,0px);z-index:6;margin-top:16px;
  display:flex;flex-direction:column;gap:10px}
.joining{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:9px;
  background:#1c2a1b;border:1px solid #3e5834;box-shadow:0 8px 24px #0006}
.joining-icon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:8px;background:#26361f}
.joining-body{flex:1;min-width:0}
.joining-body strong{display:block;font-size:13px;font-weight:550;color:#dcecd6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.joining-body small{display:block;margin:3px 0 8px;font-size:11px;color:#9fb3a2}
.joining-body .combine-track{height:5px;border-radius:3px;background:#24321f;overflow:hidden}
.joining-body .combine-track i{display:block;height:100%;border-radius:3px;background:var(--green)}
.joining-percent{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--green);
  font-variant-numeric:tabular-nums;min-width:46px;text-align:right}

@media(max-width:760px){
  /* Below the menu bar rather than under it, with a little air so the two do not read as
     one block. The fallback is roughly the bar's height, for the moment before it has
     been measured. */
  .combining-banner{top:calc(var(--top-bar,56px) + 6px)}
  .joining{gap:11px;padding:11px 13px}
  .joining-icon{width:26px;height:26px}
  .joining-body strong{font-size:12px}
  .joining-percent{font-size:13px;min-width:40px}
}