/* ---------- Wanted list (#/wanted, renderWantedList in js/submissions-corrections.js). Prefix wt-. ----------
   The request form beside the list uses the form kit (css/form-kit.css). The side card shows from 840px of page width
   (container query on .wt-page); below that the "Request a market or store" button opens #/wanted/new. */

.wt-page { container-type: inline-size; container-name: wt; display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.wt-head { display: flex; flex-direction: column; gap: 6px; }
.wt-h1 { margin: 0; }
.wt-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.wt-lead strong { color: var(--text); }
.wt-grid { display: block; }
.wt-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wt-aside { display: none; }
.wt-request { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.wt-sort { display: flex; gap: 8px; }
.wt-sort .chip { min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; background: var(--surface); }
.wt-sort .chip.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.wt-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.wt-row { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.wt-row:last-child { border-bottom: 0; }
.wt-row-top { display: flex; gap: 12px; align-items: flex-start; }
.wt-badge { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.wt-badge-market { background: var(--cat-food-tint); color: var(--cat-food-fg); }
.wt-badge-store { background: var(--cat-electronics-tint); color: var(--cat-electronics-fg); }
.wt-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wt-row-text strong { font-size: 16px; overflow-wrap: anywhere; }
.wt-row-text span { font-size: 14px; color: var(--text-muted); }
.wt-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-metoo {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.wt-metoo.wt-on { background: var(--brand-tint); border-color: var(--brand-text); color: var(--brand-text); }
.wt-metoo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wt-count { flex: 1; min-width: 100px; font-size: 14px; color: var(--text-muted); }
.wt-count strong { color: var(--text); }
.wt-add { min-height: 44px; border-radius: 999px; font-size: 14px; }
.wt-empty { padding: 24px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.wt-empty p { margin: 0; font-size: 15px; line-height: 1.45; }

@media (max-width: 859px) {
  .wt-list { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
}

@container wt (min-width: 840px) {
  .wt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .wt-aside { display: block; position: sticky; top: calc(var(--topbar-h, 96px) + 12px); }
  .wt-request { display: none; }
}

/* Name and buttons on one line only when the list itself has room (the side card takes 344px of the page). */
@container wt (min-width: 1040px) {
  .wt-row { flex-direction: row; align-items: center; gap: 14px; }
  .wt-row-top { flex: 1; min-width: 0; align-items: center; }
  .wt-row-actions { flex: none; flex-wrap: nowrap; }
  .wt-count { flex: none; min-width: 0; }
}