/* ==========================================================================
   VotingSite · category reviews and the feedback board.

   Loaded after style.css and reusing its tokens (--bg, --bg-elev, --panel,
   --panel-2, --border, --text, --muted, --accent, --gold, --danger, --r,
   --gap). Light theme under html[data-theme="light"] at the bottom.

   Mobile-first: a review is written on a phone right after somebody logged off
   a server, so every star is a real tap target before it is anything else.
   No JavaScript is involved anywhere in here · the stars are radio inputs and
   the fills are sibling selectors.
   ========================================================================== */

/* ====================================================== 1. review form === */

.rv-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--gap);
  margin: 0 0 var(--gap);
}

.rv-form-head { margin-bottom: var(--gap); }

.rv-form-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.rv-form-note,
.rv-form-cta {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
  max-width: 62ch;
}

.rv-form-error {
  margin: 0 0 var(--gap);
  padding: 8px 10px;
  border-radius: var(--r-sm, 5px);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--text);
  font-size: .85rem;
}

/* ------------------------------------------------------- category groups */

.rv-cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.rv-cat {
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  background: var(--panel-2);
  margin: 0;
  padding: 10px 12px;
}

.rv-cat-legend {
  display: block;
  padding: 0;
  width: 100%;
}

.rv-cat-icon { margin-right: 6px; }

.rv-cat-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}

.rv-cat-help {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  color: var(--muted);
  max-width: 52ch;
}

/* Stars are rendered 5 → 1 in the DOM and flipped back here, which is what lets
   `input:checked ~ label` colour every star below the chosen one without a line
   of script. The native radios stay in the document for keyboard and no-JS. */
.rv-star-input {
  position: relative;   /* anchors the visually-hidden radios */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 8px;
}

.rv-star-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rv-star {
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: var(--r-sm, 5px);
  user-select: none;
}

.rv-star-radio:checked ~ .rv-star { color: var(--gold); }

/* Pointer preview wins over the stored value while the cursor is inside. */
@media (hover: hover) {
  .rv-star-input:hover .rv-star-radio:checked ~ .rv-star {
    color: color-mix(in srgb, var(--gold) 35%, transparent);
  }
  .rv-star:hover,
  .rv-star:hover ~ .rv-star { color: var(--gold); }
}

.rv-star-radio:focus-visible + .rv-star {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rv-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
}
.rv-skip input { accent-color: var(--muted); }

/* ------------------------------------------------------------ body + send */

.rv-body-row { margin-top: var(--gap); }

.rv-body-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.rv-body {
  width: 100%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px;
  font: inherit;
  resize: vertical;
}
.rv-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rv-body-help {
  margin: 6px 0 0;
  font-size: .75rem;
  color: var(--muted);
}

.rv-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--gap);
}

.rv-cancel,
.rv-delete {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.rv-delete:hover { color: var(--danger); }
.rv-delete-form { margin: -6px 0 var(--gap); }

/* ====================================================== 2. review list === */

/* NOTE: reviewList()/reviewItem() in src/views/reviews.js are exported but not
   currently called · the server page renders its own inline `.review` rows. The
   rules in this section are kept complete and correct so the component is ready
   when it is wired up; only ratingBreakdown() below is on screen today. */
.rv-list { margin-top: var(--gap); }

.rv-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.rv-list-count {
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--muted);
}

.rv-sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rv-sort {
  font-size: .76rem;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}
.rv-sort:hover { color: var(--text); border-color: var(--border); }
.rv-sort.is-active {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border);
}

.rv-empty {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  max-width: 60ch;
}

.rv-item {
  border-top: 1px solid var(--border-soft, var(--border));
  padding: var(--gap) 0;
}
.rv-item:first-of-type { border-top: 0; }

.rv-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Groups the author and timestamp against the score on the right of
   .rv-item-head. Baseline-aligned so the small timestamp sits on the author's
   baseline rather than centring against it. */
.rv-who {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.rv-author {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.rv-author:hover { text-decoration: underline; }

.rv-when,
.rv-item-cat-max { color: var(--muted); font-size: .75rem; }
.rv-when { margin-left: 8px; }

.rv-overall { display: inline-flex; align-items: center; gap: 6px; }
.rv-overall-num { font-weight: 700; font-size: .85rem; }

.rv-stars-static { color: var(--gold); letter-spacing: 1px; }
.rv-stars-static.is-lg { font-size: 1.25rem; }
.rv-off { color: color-mix(in srgb, var(--muted) 40%, transparent); }

/* Per-review category scores: small, factual, not a second bar chart. */
.rv-item-cats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
}

.rv-item-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.rv-item-cat-score { color: var(--text); font-weight: 700; }
.rv-item-cat[data-score="5"],
.rv-item-cat[data-score="4"] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rv-item-cat[data-score="1"],
.rv-item-cat[data-score="2"] { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.rv-text { margin-top: 10px; }
.rv-text p { margin: 0 0 8px; overflow-wrap: anywhere; }
.rv-text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- helpful buttons */

.rv-item-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.rv-helpful {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rv-helpful-q { font-size: .76rem; color: var(--muted); }

.rv-vote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 10px;
  font: inherit;
  font-size: .78rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.rv-vote:hover { color: var(--text); border-color: var(--muted); }
.rv-vote.is-on {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.rv-vote-n { font-weight: 700; color: var(--text); }

.rv-edit { font-size: .76rem; color: var(--muted); }

/* ---------------------------------------------------------- owner reply */

.rv-reply {
  margin: 12px 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}

.rv-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.rv-reply-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm, 5px);
  background: var(--accent);
  color: var(--accent-ink, #06170a);
}

.rv-reply-who { font-weight: 700; font-size: .85rem; }

.rv-reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0 12px;
}
.rv-reply-form textarea {
  width: 100%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 10px;
  font: inherit;
  font-size: .85rem;
  resize: vertical;
}
.rv-reply-form button { align-self: flex-start; }

/* ======================================================= 3. breakdown === */

.rv-breakdown {
  display: grid;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.rv-summary {
  display: grid;
  gap: var(--gap);
  align-items: center;
}

.rv-summary-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rv-big {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
}

.rv-summary-count { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------- histogram -- */

.rv-histogram { display: grid; gap: 4px; }

.rv-hist-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.5rem;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--muted);
}

.rv-hist-track,
.rv-cat-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.rv-hist-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.rv-hist-n { text-align: right; font-variant-numeric: tabular-nums; }

/* Shipped with no rule: the "5★" row labels ran the digit and the star together
   with no gap, sat left-ragged against the 2.4rem grid column, and the star was
   muted grey while every other star on the page is gold. */
.rv-hist-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.rv-hist-label > span { color: var(--gold); }

/* ------------------------------------------------------- category bars -- */

.rv-cat-bars { display: grid; gap: 8px; }

.rv-cat-bar {
  display: grid;
  grid-template-columns: 1fr 2.2rem;
  align-items: center;
  gap: 4px 8px;
  font-size: .8rem;
}

.rv-cat-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

/* Never had a rule. The category emoji inherited the surrounding font-size and
   baseline, so icons sat at inconsistent heights next to their labels in both
   the category bars and the per-review pills. Fixed box, centred, no shrink. */
.rv-item-cat-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  font-size: 1em;
  line-height: 1;
  font-style: normal;
}

/* Pill label · keep it on one line so the score never wraps away from its
   category name inside the rounded pill. */
.rv-item-cat-label { white-space: nowrap; }

.rv-cat-track { grid-column: 1 / -1; height: 10px; }

.rv-cat-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
}
.rv-cat-bar[data-tone="good"] .rv-cat-fill { background: var(--accent); }
.rv-cat-bar[data-tone="mid"] .rv-cat-fill { background: var(--gold); }
.rv-cat-bar[data-tone="bad"] .rv-cat-fill { background: var(--danger); }

.rv-cat-num {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rv-cat-n,
.rv-cat-thin {
  grid-column: 1 / -1;
  font-size: .72rem;
  color: var(--muted);
}
.rv-cat-n::after { content: " ratings"; }
.rv-cat-bar.is-thin { opacity: .65; }

@media (prefers-reduced-motion: no-preference) {
  .rv-hist-fill,
  .rv-cat-fill { transition: width .35s ease; }
}

/* ============================================================ 4. chip === */

.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .76rem;
}

.rv-chip-score { display: inline-flex; align-items: center; gap: 4px; }

.rv-chip-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.rv-chip-cat[data-tone="good"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.rv-chip-cat[data-tone="bad"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* =================================================== 5. feedback board == */

.fb-page,
.fb-admin { display: grid; gap: var(--gap); }

.fb-head h1 {
  font-family: var(--font-display);
  margin: 0 0 6px;
}

.fb-lede {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
  font-size: .9rem;
}

.fb-counts {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ the form -- */

.fb-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--gap);
  display: grid;
  gap: 12px;
}

.fb-form-title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0;
}

.fb-form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.fb-optional { font-weight: 400; color: var(--muted); font-size: .74rem; }

.fb-form input[type="text"],
.fb-form input[type="email"],
.fb-form input:not([type]),
.fb-form textarea,
.fb-admin-form input,
.fb-admin-form select {
  width: 100%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 9px 10px;
  font: inherit;
  font-size: .88rem;
}
.fb-form textarea { resize: vertical; }

.fb-kinds { border: 0; margin: 0; padding: 0; }

.fb-kind-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.fb-kind-opt { position: relative; display: block; cursor: pointer; }
.fb-kind-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.fb-kind-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: .82rem;
}
.fb-kind-opt input:checked + .fb-kind-body {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}
.fb-kind-opt input:focus-visible + .fb-kind-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-kind-icon { font-size: 1.1rem; }

.fb-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fb-form-note { font-size: .74rem; color: var(--muted); }

.fb-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm, 5px);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  font-size: .85rem;
}

/* --------------------------------------------------------------- filters */

.fb-filters { display: grid; gap: 6px; }

.fb-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fb-filter-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  min-width: 3.5rem;
}

.fb-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
}
.fb-tab:hover { color: var(--text); border-color: var(--muted); }
.fb-tab.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.fb-tab-n { font-weight: 700; color: var(--text); }

/* --------------------------------------------------------- status pills */

.fb-pill {
  display: inline-flex;
  align-items: center;
  /* Sits inside an <h2>, which the site-wide h1-h4 rule puts in the pixel
     display font. That font's glyphs run tall against a normal line-height,
     which is fine at heading size but poked out of this pill's 3px vertical
     padding at .7rem · "OPEN" rendering a hair outside its own rounded box.
     A status badge is UI chrome, not a heading, so it opts back into the
     regular font instead of matching its ancestor. */
  font-family: var(--font);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
}
.fb-pill[data-tone="accent"] {
  color: var(--cyan, var(--accent));
  border-color: color-mix(in srgb, var(--cyan, var(--accent)) 50%, transparent);
  background: color-mix(in srgb, var(--cyan, var(--accent)) 14%, transparent);
}
.fb-pill[data-tone="good"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.fb-pill[data-tone="muted"] { opacity: .8; text-decoration: line-through; }

/* ------------------------------------------------------------ the list -- */

.fb-section { display: grid; gap: 8px; }

.fb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: .95rem;
}

.fb-section-blurb {
  font-family: var(--font);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
}

.fb-list,
.fb-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.fb-item,
.fb-admin-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}
.fb-admin-item { grid-template-columns: 1fr; }

.fb-vote-form { margin: 0; }

.fb-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 46px;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.fb-vote:hover { color: var(--text); border-color: var(--accent); }
.fb-vote.is-on {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.fb-vote-arrow { font-size: .8rem; line-height: 1; }
.fb-vote-n { font-weight: 700; font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* The admin list's vote count is `.fb-votes-n` · one letter off from the public
   list's `.fb-vote-n` above, so it never picked up any of its styling and the
   vote count was the one piece of data on an admin row with no emphasis at all.
   Same job, so give it the same weight; it sits in a .74rem meta row, hence the
   smaller size. */
.fb-votes-n { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.fb-item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.fb-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: .74rem;
  color: var(--muted);
}

.fb-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.fb-page-link,
.fb-mail {
  color: var(--muted);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.fb-item-text {
  margin: 8px 0 0;
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.fb-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
}
.fb-note p { margin: 2px 0 0; font-size: .82rem; }

.fb-note-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

.fb-empty {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  max-width: 60ch;
}

/* ------------------------------------------------------------ the queue */

.fb-admin-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.fb-admin-form button { justify-self: start; }

/* ==================================================== 6. light theme === */

html[data-theme="light"] .rv-cat,
html[data-theme="light"] .rv-item-cat,
html[data-theme="light"] .rv-chip-cat,
html[data-theme="light"] .rv-vote,
html[data-theme="light"] .fb-tab,
html[data-theme="light"] .fb-pill,
html[data-theme="light"] .fb-kind,
html[data-theme="light"] .fb-kind-body,
html[data-theme="light"] .fb-vote { background: var(--bg-elev); }

html[data-theme="light"] .rv-star { color: color-mix(in srgb, var(--muted) 35%, transparent); }
html[data-theme="light"] .rv-hist-track,
html[data-theme="light"] .rv-cat-track { background: color-mix(in srgb, var(--border) 90%, transparent); }
html[data-theme="light"] .rv-reply,
html[data-theme="light"] .fb-note { background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); }
html[data-theme="light"] .fb-kind-opt input:checked + .fb-kind-body,
html[data-theme="light"] .fb-tab.is-active,
html[data-theme="light"] .rv-vote.is-on,
html[data-theme="light"] .fb-vote.is-on { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); }

/* ==================================================== 7. wider screens == */

@media (min-width: 640px) {
  .rv-cats { grid-template-columns: repeat(2, 1fr); }
  .rv-cat-bar { grid-template-columns: minmax(9rem, 14rem) 1fr 2.2rem 4.5rem; }
  .rv-cat-track { grid-column: auto; }
  .rv-cat-n { grid-column: auto; text-align: right; }
  .rv-cat-bar.is-thin .rv-cat-thin { grid-column: 2 / -1; text-align: left; }
  .fb-admin-form { grid-template-columns: 10rem 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  .rv-cats { grid-template-columns: repeat(3, 1fr); }
  .rv-summary { grid-template-columns: minmax(9rem, auto) 1fr; }
  .rv-summary-score { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 420px) {
  .rv-star { min-width: 36px; font-size: 1.35rem; }
  .rv-hist-row { grid-template-columns: 2rem 1fr 2rem; }
  .fb-filter-label { min-width: 100%; }
}

/* ==========================================================================
   Feedback status pill: the missing tone  (visual pass, round 3)
   --------------------------------------------------------------------------
   FEEDBACK_STATUSES.open is `tone: 'neutral'` (src/services/feedback.js), but
   only "accent", "good" and "muted" ever had a rule · so "OPEN" fell through to
   the bare .fb-pill base and rendered as an uncoloured bordered box next to its
   blurb, which is what read as unfinished. Same colour formula as the other
   three tones, keyed to --muted so it stays deliberate rather than absent.
   ========================================================================== */
.fb-pill[data-tone="neutral"] {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

/* ==========================================================================
   Player requests board (/requests)
   --------------------------------------------------------------------------
   Added with src/views/requests.js. It reuses the feedback board's primitives
   (.fb-form, .fb-vote, .fb-pill, .fb-tab, .rv-captcha) deliberately · the two
   boards are the same kind of object and should not look like two products.
   Only what is genuinely new to this board is defined here, appended as one
   block so a concurrent edit elsewhere in this file cannot collide with it.
   ========================================================================== */

.pr-page { max-width: 940px; }

/* Honeypot: present in the DOM, never on the screen, never in the tab order. */
.pr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pr-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }

.pr-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}

.pr-count {
  flex: 0 0 62px;
  text-align: center;
  align-self: flex-start;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  line-height: 1.2;
}
.pr-count strong { display: block; font-size: 1.15rem; }
.pr-count span { font-size: .72rem; color: var(--muted); }

.pr-item-body { min-width: 0; flex: 1; }
.pr-item-title { margin: 0 0 6px; font-size: 1rem; }
.pr-item-title a { color: var(--text); text-decoration: none; }
.pr-item-title a:hover { text-decoration: underline; }
.pr-item-text { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }

.pr-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: .82rem;
  color: var(--muted);
}
.pr-game { color: var(--text); }
.pr-chip {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .75rem;
}

.pr-by { color: var(--text); }
.pr-by-anon { color: var(--muted); }
.pr-unverified {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 0 5px;
  cursor: help;
}

/* ------------------------------------------------------------ one thread */
.pr-thread-title { margin: 8px 0; font-size: 1.4rem; }
.pr-thread-body { color: var(--text); line-height: 1.6; white-space: normal; }
.pr-thread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.pr-report { color: var(--muted); font-size: .82rem; }
.pr-report:hover { color: var(--danger); }

.pr-answers-title { margin: 28px 0 10px; font-family: var(--font-display); font-size: 1.1rem; }
.pr-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pr-answer {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}
/* An owner's own suggestion is visually a different object from a player's
   recommendation. Colour alone would not do it · the text tag next to the
   server name is what actually carries the distinction. */
.pr-answer.is-owner { border-left: 3px solid var(--gold); }
.pr-answer.is-removed { opacity: .5; }

.pr-answer-body { min-width: 0; flex: 1; }
.pr-answer-server { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-server-name { font-weight: 600; color: var(--text); text-decoration: none; }
.pr-server-name:hover { text-decoration: underline; }

.pr-owner-tag,
.pr-player-tag {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: help;
}
.pr-owner-tag { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border: 1px solid var(--gold); }
.pr-player-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid var(--accent-dim); }

.pr-server-facts { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
.pr-answer-text { margin: 10px 0 8px; line-height: 1.55; }

.pr-quote {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-style: italic;
}

.pr-demand { margin-top: 32px; }
.pr-demand-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pr-demand-list li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 560px) {
  .pr-item, .pr-answer { flex-direction: column; }
  .pr-count { flex: none; align-self: flex-start; min-width: 62px; }
}

html[data-theme="light"] .pr-item,
html[data-theme="light"] .pr-answer { box-shadow: var(--shadow-sm); }

/* ==========================================================================
   The requests board as a browsing mode.

   The board carries the same List · Swipe · Trending · Ask switch the listing
   pages do, so it reads as a fourth way to find a server rather than a page
   somebody linked to once.
   ========================================================================== */
.pr-modes {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}