/* Thread prefixes, polls and tags. */

/* ---------- Prefix label styles (presets offered in Admin → Thread prefixes) ---------- */
.label--prefix-red { background: color-mix(in srgb, #dc2626 14%, transparent); border-color: color-mix(in srgb, #dc2626 30%, transparent); color: color-mix(in srgb, #dc2626 80%, var(--foreground)); }
.label--prefix-orange { background: color-mix(in srgb, #ea580c 14%, transparent); border-color: color-mix(in srgb, #ea580c 30%, transparent); color: color-mix(in srgb, #ea580c 80%, var(--foreground)); }
.label--prefix-yellow { background: color-mix(in srgb, #ca8a04 14%, transparent); border-color: color-mix(in srgb, #ca8a04 30%, transparent); color: color-mix(in srgb, #ca8a04 80%, var(--foreground)); }
.label--prefix-green { background: color-mix(in srgb, #16a34a 14%, transparent); border-color: color-mix(in srgb, #16a34a 30%, transparent); color: color-mix(in srgb, #16a34a 80%, var(--foreground)); }
.label--prefix-teal { background: color-mix(in srgb, #0d9488 14%, transparent); border-color: color-mix(in srgb, #0d9488 30%, transparent); color: color-mix(in srgb, #0d9488 80%, var(--foreground)); }
.label--prefix-blue { background: color-mix(in srgb, #2563eb 14%, transparent); border-color: color-mix(in srgb, #2563eb 30%, transparent); color: color-mix(in srgb, #2563eb 80%, var(--foreground)); }
.label--prefix-purple { background: color-mix(in srgb, #9333ea 14%, transparent); border-color: color-mix(in srgb, #9333ea 30%, transparent); color: color-mix(in srgb, #9333ea 80%, var(--foreground)); }
.label--prefix-gray { background: color-mix(in srgb, #71717a 14%, transparent); border-color: color-mix(in srgb, #71717a 30%, transparent); color: color-mix(in srgb, #71717a 80%, var(--foreground)); }
.label--prefix-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.prefix-presets { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }

/* ---------- Forum prefix filter ---------- */
.prefix-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prefix-filter .dropdown-menu { left: 0; right: auto; max-height: 360px; overflow-y: auto; }
.prefix-filter .dropdown-menu a.is-active { background: var(--surface-alt); font-weight: 600; }
.prefix-filter-clear { color: var(--text-muted); }
/* While filtering, the foundation pagers (which drop ?prefix_id) give way to .prefix-pager. */
.p-body:has(.prefix-filter.is-filtered) .list-controls > nav[aria-label="Pagination"] { display: none; }

/* ---------- Tags ---------- */
.thread-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -4px 0 12px; }
.thread-tags-label { font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.thread-tags-edit { color: var(--text-muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.tag-list--small { margin-top: 4px; font-size: 0.85em; }
.tag {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.85em; line-height: 1.6;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  color: var(--text);
}
a.tag:hover { text-decoration: none; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.tag-edit-form { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tag-edit-row { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; align-items: start; }
.tag-edit-row > label { font-weight: 600; padding-top: 7px; }
.tag-locked { margin-bottom: 6px; }
.tag-field { position: relative; }
.tag-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 70; margin: 2px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg);
  max-height: 260px; overflow-y: auto;
}
.tag-suggest button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 12px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tag-suggest button:hover, .tag-suggest button.is-active { background: var(--surface-alt); }
.tag-suggest .count { color: var(--text-muted); font-size: 0.85em; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 0; padding: 0; align-items: baseline; }
.tag-cloud-item--1 { font-size: 0.85em; }
.tag-cloud-item--2 { font-size: 1em; }
.tag-cloud-item--3 { font-size: 1.2em; }
.tag-cloud-item--4 { font-size: 1.45em; font-weight: 600; }
.tag-cloud-item--5 { font-size: 1.75em; font-weight: 700; }

/* ---------- Poll creation ---------- */
.poll-create { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.poll-create > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; }
.poll-create[open] > summary { border-bottom: 1px solid var(--border); }
.poll-create-body { padding: 12px; }
.poll-create .form-label { font-weight: 600; margin-bottom: 4px; }
.poll-responses { margin: 0 0 8px; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.poll-response-row { display: flex; gap: 6px; align-items: center; }
.poll-response-row .input { flex: 1; }
.poll-inline { align-items: center; flex-wrap: wrap; }
.poll-inline input[type="radio"], .poll-inline input[type="checkbox"] { margin-top: 0; }
.input--tiny { width: 76px; padding: 3px 6px; }

/* ---------- Poll display ---------- */
.poll .block-header { justify-content: flex-start; }
.poll-question { font-size: 1.05em; }
.poll-choices { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.poll-choices--static li { padding: 3px 0; }
.poll-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.poll-result-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.poll-result.is-voted .poll-result-label > span:first-child { font-weight: 600; }
.poll-result-count { color: var(--text-muted); font-size: 0.88em; white-space: nowrap; }
.poll-bar { height: 10px; border-radius: 5px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.poll-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 5px 0 0 5px; min-width: 0; }
.poll-result.is-voted .poll-bar > span { background: var(--accent); }
.poll-mine { color: var(--success); font-weight: 700; }
.poll-voters { margin-top: 4px; font-size: 0.88em; }
.poll-voters > summary { cursor: pointer; color: var(--text-muted); }
.poll-voters-list { padding: 4px 0 0 14px; }
.poll-peek, .poll-change { margin-top: 12px; }
.poll-peek > summary, .poll-change > summary { cursor: pointer; color: var(--link); margin-bottom: 10px; }
.poll-footer { justify-content: flex-start; gap: 16px; color: var(--text-muted); font-size: 0.88em; }

@media (max-width: 650px) {
  .tag-edit-row { grid-template-columns: 1fr; }
  .tag-edit-row > label { padding-top: 0; }
}