/* Library tags: a flat section inside the library sheet; buttons and fields come from the explorer vocabulary. */
.ex-paper-tags{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);color:var(--ink)}
.ex-paper-tags h3,.ex-paper-tags h4{margin:0 0 10px}
.ex-tag-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.ex-paper-tags button:disabled,.ex-tag-review button:disabled{opacity:.55;cursor:not-allowed}
.ex-paper-tags :is(button,a,summary):focus-visible,.ex-tag-review :is(button,a,summary):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ex-paper-tags input,.ex-paper-tags select{max-width:100%;font:inherit}
.ex-paper-tags label{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.ex-paper-tags .ex-tag-choice{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.ex-tag-columns{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:18px}
.ex-tag-catalog,.ex-tag-papers{display:grid;gap:8px}
.ex-tag-catalog article,.ex-tag-papers article{padding:12px;border-radius:var(--radius-card);background:var(--surface-2);overflow-wrap:anywhere}
/* Tag colours are the user's own categories. Each hue is the accent token turned to the category's angle (lightness and chroma follow the theme), then mixed into the current surface and ink in oklab, so the hue does not drift toward the ink's. */
.ex-tag-chip{--tag-hue:var(--muted);display:inline-block;margin:3px 5px 3px 0;padding:2px 8px;border-radius:var(--radius);font-size:12.5px;font-weight:600;line-height:1.5;background:color-mix(in oklab,var(--tag-hue) 16%,var(--surface));color:color-mix(in oklab,var(--tag-hue) 45%,var(--ink))}
.ex-tag-chip[data-color=green]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 150)}
.ex-tag-chip[data-color=blue]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 250)}
.ex-tag-chip[data-color=purple]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 305)}
.ex-tag-chip[data-color=amber]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 80)}
.ex-tag-chip[data-color=rose]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 10)}
.ex-tag-chip[data-color=pink]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 345)}
.ex-tag-chip[data-color=slate]{--tag-hue:var(--muted)}
.ex-tag-chip[data-color=red]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 28)}
.ex-tag-chip[data-color=orange]{--tag-hue:oklch(from var(--green) l calc(c * 1.5) 55)}
.ex-tag-chip[data-color=teal]{--tag-hue:var(--green)}
.ex-tag-form,.ex-tag-filter{padding:12px;border-radius:var(--radius-card);margin:12px 0;background:var(--surface-2)}
.ex-tag-status{min-height:1.5em;line-height:1.5}
.ex-tag-error{padding:10px 12px;background:var(--red-soft);color:var(--red);border:1px solid var(--red-line);border-radius:var(--radius-card)}
.ex-tag-review{width:550px;max-width:calc(100vw - 30px);max-height:calc(100dvh - 40px);overflow:auto;border:0;border-radius:var(--radius-frame);padding:22px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg)}
.ex-tag-review::backdrop{background:var(--scrim)}
.ex-tag-review[hidden],.ex-paper-tags[hidden]{display:none}
.ex-tag-review h3{margin-top:0;font-size:18px}
.ex-tag-review ul{max-height:240px;overflow:auto;padding-left:22px}
.ex-tag-review p{line-height:1.5}
@media(max-width:820px){.ex-tag-columns{grid-template-columns:1fr}}