/*
 * feedback.css — Community Feedback board (Feedback-board rework, 2026-06-14).
 * Built from the existing OSR system: Stone Wall .panel surfaces, 1px Mortar
 * borders, single accent (var(--color-accent)), border-radius:0. No new colors —
 * all tokens reference base.css. Reuses .module-view__title/__tagline, .panel,
 * .field / .field__input, .btn family, .sd-dtable / .sd-dtable__wrap (lore.css),
 * .feedback-kind chip (bug.css), .action-modal family (components.css).
 *
 * The ranked list is a .sd-dtable on desktop; at <=700px it REFLOWS to a
 * card-stack (each row a bordered card with data-label captions) so the vote
 * controls stay large + reachable on a phone (a votable ranked list reads better
 * as cards than as a horizontally-scrolled table — KDL 2026-06-27, 2026-06-14).
 */

/* ---- board head + submit buttons ---------------------------------------- */

.feedback-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.feedback-board__head-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

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

.feedback-board__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.feedback-board__filter {
  margin: 0;
  min-width: 12rem;
}

/* ---- list panel + empty state ------------------------------------------- */

.feedback-board__list-panel {
  padding: var(--space-md);
}

.feedback-board__empty {
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-md);
}

/* ---- ranked table (desktop) --------------------------------------------- */

.feedback-table__wrap {
  /* .sd-dtable__wrap supplies the border + last-resort horizontal scroll. */
  margin: 0;
}

.feedback-table {
  /* inherits .sd-dtable (width:100%, collapse, body font + uppercase thead). */
}

.feedback-table th,
.feedback-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.feedback-table tbody tr:last-child td {
  border-bottom: 0;
}

.feedback-table__rank-h {
  width: 4rem;
}

.feedback-table__votes-h {
  width: 9rem;
}

.feedback-row__rank {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Your-own items get a quiet accent rail so they're findable without shouting. */
.feedback-row--mine {
  box-shadow: inset 3px 0 0 0 var(--color-accent);
}

.feedback-row__title-text {
  font-weight: 600;
  color: var(--color-text);
}

.feedback-row__mine {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 0.05rem 0.4rem;
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  white-space: nowrap;
}

.feedback-row__type-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Status badge — first-party label, word always present (KDL 2026-06-27 §7.1). */
.feedback-status {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.feedback-status--muted {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- vote controls ------------------------------------------------------ */

.feedback-vote {
  display: flex;
  gap: var(--space-xs);
  align-items: stretch;
}

.feedback-vote__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* 44px touch target (AC-34) — applies on desktop too; the global mobile rule
     also enforces min-height:44px on .btn, but these aren't .btn so we set it. */
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 var(--space-sm);
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.feedback-vote__btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.feedback-vote__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.feedback-vote__btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Active (the viewer's current vote): up = accent, down = danger. The glyph fill
   AND the border carry it, so it never relies on color alone — the pressed glyph
   is visibly different from the outline-only resting state. */
.feedback-vote__btn--up.is-active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.feedback-vote__btn--down.is-active {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.feedback-vote__glyph {
  line-height: 1;
}

.feedback-vote__count {
  font-variant-numeric: tabular-nums;
}

/* ---- submit modal (shared chrome, .action-modal family) ----------------- */

.feedback-modal__body {
  /* Form fields stack; .action-modal__card already caps height + scrolls. */
  gap: var(--space-md);
  text-align: left;
}

.feedback-modal__form .field {
  margin-bottom: 0;
}

.feedback-modal__form .field + .field {
  margin-top: var(--space-md);
}

.feedback-modal__form .feedback-modal__form .bug-form__error,
.feedback-modal__form .bug-form__error {
  margin: var(--space-sm) 0 0;
}

.feedback-modal__card {
  /* Submit forms are taller than a confirm dialog — give them a touch more room
     than the 520px confirm card, still capped to the viewport by the base rule. */
  max-width: 560px;
}

/* ---- mobile: card-stack reflow (<=700px) -------------------------------- */

@media (max-width: 700px) {
  .feedback-board__head {
    flex-direction: column;
  }

  .feedback-board__head-actions {
    width: 100%;
  }

  .feedback-board__head-actions .btn {
    flex: 1 1 auto;
  }

  .feedback-board__filter {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* Drop the horizontal scroller; the table becomes a stack of cards. */
  .feedback-table__wrap {
    overflow-x: visible;
    border: 0;
  }

  .feedback-table,
  .feedback-table thead,
  .feedback-table tbody,
  .feedback-table tr,
  .feedback-table td {
    display: block;
    width: 100%;
  }

  /* Hide the table header row (the per-cell data-label captions replace it). */
  .feedback-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .feedback-row {
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
  }

  .feedback-row--mine {
    box-shadow: inset 3px 0 0 0 var(--color-accent);
  }

  .feedback-table td {
    border-bottom: 0;
    padding: var(--space-xs) 0;
    display: flex;
    gap: var(--space-md);
    align-items: baseline;
    justify-content: space-between;
  }

  /* data-label caption on the left of each cell (the column name). */
  .feedback-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--font-heading-ui);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* The title cell reads as the card heading: caption above, full-width title. */
  .feedback-row__title {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .feedback-row__type {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-sm);
  }

  .feedback-row__type-sub {
    margin-top: 0;
  }

  /* Votes row: caption left, the two big buttons right. */
  .feedback-row__votes {
    align-items: center;
  }

  .feedback-vote {
    flex: 0 0 auto;
  }
}