/* ============================================================================
   0BVIOUSLY.LOVE — feedback.css
   Scoped additions for the wired-up feedback + feature-voting UI.
   Reuses .feedback-panel / .btn / tokens from base.css + components.css;
   only adds what those don't already cover (two-up grid, <select> styling,
   feature list rows, vote buttons, status states).
   ============================================================================ */

/* Two-up layout: form beside the voting list on wide screens, stacked on mobile.
   max-width matches the original single-panel feel but a touch wider for two. */
.feedback-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
@media (min-width: 880px) {
  .feedback-grid {
    grid-template-columns: 1fr 1fr;
    max-width: var(--maxw);
    align-items: start;
  }
}
/* Each panel inside the grid should fill its column (override the centered,
   width-capped default from components.css). */
.feedback-grid .feedback-panel {
  max-width: none;
  margin-inline: 0;
  height: 100%;
}

/* Native <select> restyled to match the input/textarea look in components.css. */
.feedback-panel__field select {
  background: var(--c-night);
  border: 1px solid var(--c-slate);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  color: var(--c-bone);
  font: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.feedback-panel__field select:focus {
  outline: none;
  border-color: var(--c-amber);
  box-shadow: var(--glow-amber);
}

/* ---- Feature voting list -------------------------------------------------- */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.feature-list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-night);
  border: 1px solid var(--c-slate-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-base) var(--ease);
}
.feature-list__row:hover { border-color: rgba(232, 163, 61, 0.35); }
.feature-list__title {
  flex: 1;
  color: var(--c-bone);
  font-size: var(--fs-sm);
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Vote button: compact pill, amber count. Reuses .btn sizing loosely. */
.feature-vote {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-slate);
  background: transparent;
  color: var(--c-driftwood);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.feature-vote:hover:not([disabled]) {
  border-color: var(--c-amber);
  color: var(--c-amber-bright);
  background: rgba(232, 163, 61, 0.08);
}
.feature-vote:focus-visible {
  outline: none;
  border-color: var(--c-amber);
  box-shadow: var(--glow-amber);
}
.feature-vote[disabled] {
  cursor: default;
  opacity: 0.85;
  border-color: rgba(232, 163, 61, 0.4);
  color: var(--c-amber);
  background: rgba(232, 163, 61, 0.08);
}
.feature-vote__count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1; /* slashed zero per studio font policy */
}
.feature-vote__arrow { line-height: 1; }

/* Suggest-a-feature sub-form sits at the bottom of the voting panel. */
.feature-suggest {
  border-top: 1px solid var(--c-slate-soft);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---- Status + state messaging -------------------------------------------- */
.feedback-panel__note.is-error,
.feature-vote.is-error { color: var(--c-amber-bright); }
.feedback-panel__note.is-success { color: var(--c-amber); }

/* Warm thank-you / offline confirmation that replaces the form on success.
   No layout shift jank: it simply occupies the panel body in place. */
.feedback-thanks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
.feedback-thanks__icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-amber);
}
.feedback-thanks h4 { color: var(--c-bone); }
.feedback-thanks p { color: var(--c-driftwood); font-size: var(--fs-sm); }
.feedback-thanks .btn { align-self: flex-start; margin-top: var(--sp-2); }

.feature-list__empty { color: var(--c-muted); font-size: var(--fs-sm); }