/* Thread prefixes, tags and solved answers (murof/tags.py, solved.py) */

/* Owner-made prefix colours: --px set inline. Beats the old .px-* classes. */
.prefix[style] { background: color-mix(in oklab, var(--px) 16%, transparent); color: color-mix(in oklab, var(--px) 78%, var(--text)); }
a.prefix { text-decoration: none; transition: filter .18s ease, transform .18s ease; }
a.prefix:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Tags */
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; margin-left: 6px; vertical-align: middle; }
.thead .tags { display: flex; margin: 8px 0 0; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font: 600 11px/1 var(--font-ui);
  background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); text-decoration: none;
  transition: color .18s ease, box-shadow .18s ease, transform .18s ease; }
a.tag:hover { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); transform: translateY(-1px); }
.tag.more { background: transparent; box-shadow: none; }

/* Forum filter chips */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.fchip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font: 650 12px/1 var(--font-ui);
  background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); text-decoration: none;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.fchip:hover { color: var(--text); transform: translateY(-1px); }
.fchip.px[style] { color: color-mix(in oklab, var(--px) 78%, var(--text)); }
.fchip.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
.fchip.px.on[style] { background: color-mix(in oklab, var(--px) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--px) 45%, transparent); }
@media (max-width: 640px) { .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; } .fchip { flex: none; } }

/* Admin > Prefixes & tags */
.px-list { display: grid; }
.px-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--border); }
.px-row:first-child { border-top: 0; }
.px-row .px-prev { min-width: 96px; align-self: center; }
.px-row .grow { flex: 1 1 220px; }
.px-row select[multiple] { min-width: 240px; }
.px-forums { align-self: center; }
.px-forums > summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.px-forums[open] > summary { margin-bottom: 6px; }
.px-btns { display: flex; gap: 6px; margin-left: auto; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); }

@media (prefers-reduced-motion: reduce) { a.prefix, .tag, .fchip { transition: none; } a.prefix:hover, a.tag:hover, .fchip:hover { transform: none; } }