/* Tags. Six fixed colours rather than a free colour value: the page's
   Content-Security-Policy is style-src 'self', so a colour chosen at runtime could only
   reach the chip through a style attribute, which is exactly what that policy blocks.
   Every colour a tag can take therefore has to exist here already. */
.tag-chip{display:inline-flex;align-items:center;font-style:normal;font-size:10px;line-height:1;
  padding:4px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap;max-width:160px;
  overflow:hidden;text-overflow:ellipsis}
.tag-chip.is-green{background:#27381f;border-color:#415b34;color:#c6f2ae}
.tag-chip.is-blue{background:#1d2c38;border-color:#33506a;color:#a9d2f5}
.tag-chip.is-purple{background:#2c2338;border-color:#4a3a63;color:#d0b6f2}
.tag-chip.is-amber{background:#392f1c;border-color:#61502c;color:#f0d197}
.tag-chip.is-red{background:#3a2422;border-color:#63393a;color:#f5b0a8}
.tag-chip.is-grey{background:#272e29;border-color:#3d4740;color:#c0cbc2}
/* Chips sit under the streamer's name with the rest of the row's small print, and wrap
   rather than widening the row: the table already fights for width on a phone. */
.tag-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;max-width:300px}

/* The row's own tag button, beside the favourite star. */
.tagger{padding:2px 5px;background:none;border:0;line-height:1;font-size:13px;color:#5f6f63;
  border-radius:5px;transition:color .15s ease}
.tagger:hover{color:var(--green)}
@media(max-width:760px){.tagger{padding:6px;font-size:15px}}

/* Settings: the presets themselves. */
.tag-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.tag-preset{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#141b16;
  border:1px solid var(--line);border-radius:8px}
.tag-preset .small-button{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:6px;opacity:.75;color:var(--red)}
.tag-preset .small-button:hover,.tag-preset .small-button:focus-visible{opacity:1;color:var(--red)}
.tag-presets .muted{font-size:12px;color:var(--muted)}

/* The add row. The name takes the space that is left; the colour and the button do not
   stretch, because a full-width colour dropdown reads as the more important of the two. */
.tag-new{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.tag-new label{margin-bottom:0}
.tag-new label:first-child{flex:1 1 200px}
.settings-card .tag-new input{max-width:none;width:100%}
.tag-new .primary{padding-block:11px}
#tag-error:empty{display:none}
@media(max-width:760px){
  .tag-new{flex-direction:column;align-items:stretch}
  .tag-new .primary,.tag-new select{width:100%}
}

/* The picker. One row per tag, each big enough to hit with a thumb. */
.tag-dialog .tag-choices{display:flex;flex-direction:column;gap:6px;margin:18px 0 26px;
  max-height:50vh;overflow-y:auto}
.tag-choice{flex-direction:row;align-items:center;gap:11px;margin:0;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;background:#141b16;cursor:pointer}
.tag-choice:hover{border-color:#41513f}
.tag-choice input{width:auto;max-width:none;margin:0;accent-color:var(--green)}
.tag-dialog .muted{font-size:12px;color:var(--muted)}
.tag-dialog #tag-dialog-name{margin:10px 0 0;font-size:13px}

/* The library's tag filter sits beside the status filter and matches it. */
.library-tools #tag-filter{min-width:170px}
@media(max-width:760px){.library-tools #tag-filter{width:100%}}
/* Five controls in a row: on a tablet, or a phone on its side, they go onto a second line. */
.library-tools{flex-wrap:wrap}
.library-tools #streamer-filter{min-width:170px;max-width:260px;text-overflow:ellipsis}
@media(max-width:760px){.library-tools #streamer-filter{width:100%;max-width:none}}

/* A tag that only appears at a marked moment, rather than on the whole recording. The
   flag keeps the two from reading as the same claim about the video. */
.tag-chip.marked{background:none;border-style:dashed}
/* A tag over part of a recording: a heavier leading edge, so it does not read as a claim
   about the whole of it. */
.tag-chip.section{border-left-width:3px}

/* How many comments a recording has, beside the tag button. */
.comment-count{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;font-size:11px;line-height:1;
  color:#b8b08f;font-variant-numeric:tabular-nums;vertical-align:middle}