/*
 * UN|REDACTED Commerce — bonus picker styles  v1.0.5
 * ------------------------------------------------------------------
 * Civic register: clear hierarchy, no flourish. Vote-status badges use
 * subdued color (NAY = amber, NOT VOTING = muted gray) — not the loud
 * red you'd expect, because the campaign register treats non-voters as
 * "addressable" rather than "enemies." The single 120ms color transition
 * on row selection is the only animation in the file.
 *
 * Inherits typography and dark palette from the main plugin stylesheet
 * (unredacted-commerce.css). All variables that can be themed live there;
 * this file uses local fallbacks so it renders correctly even if the main
 * sheet hasn't loaded yet.
 * ------------------------------------------------------------------
 */

.unr-bonus-picker {
  --unr-bp-bg:           #0a0a0a;
  --unr-bp-fg:           #e0e0e0;
  --unr-bp-muted:        #999;
  --unr-bp-border:       #2a2a2a;
  --unr-bp-accent:       #CCFF00;       /* matches campaign electric lime (v1.0.5 brand) */
  --unr-bp-selected-bg:  #141414;
  --unr-bp-nay:          #f59e0b;       /* amber — addressable, not red */
  --unr-bp-nv:           #6b7280;       /* muted gray — non-voters */
  --unr-bp-r:            #b91c1c;
  --unr-bp-d:            #1d4ed8;
  --unr-bp-i:            #6b21a8;

  margin: 32px 0;
  padding: 24px;
  background: var(--unr-bp-bg);
  color: var(--unr-bp-fg);
  border: 1px solid var(--unr-bp-border);
  font-family: 'Courier Prime', 'Courier New', monospace;
}

.unr-bonus-picker__title {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--unr-bp-accent);
}

.unr-bonus-picker__intro {
  margin: 0 0 20px 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--unr-bp-muted);
}

.unr-bonus-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unr-bonus-picker__item {
  background: transparent;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.unr-bonus-picker__item.is-selected {
  background: var(--unr-bp-selected-bg);
  border-color: var(--unr-bp-border);
}

.unr-bonus-picker__item--missing {
  opacity: 0.5;
}

.unr-bonus-picker__label {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.4;
}

.unr-bonus-picker__item--missing .unr-bonus-picker__label {
  cursor: not-allowed;
}

.unr-bonus-picker__checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--unr-bp-accent);
  cursor: pointer;
}

.unr-bonus-picker__checkbox:disabled {
  cursor: not-allowed;
}

.unr-bonus-picker__name {
  font-weight: 600;
  color: var(--unr-bp-fg);
  letter-spacing: 0.5px;
}

.unr-bonus-picker__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--unr-bp-muted);
}

.unr-bonus-picker__district {
  color: var(--unr-bp-fg);
  font-weight: 500;
}

.unr-bonus-picker__party {
  padding: 2px 6px;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 600;
}

.unr-bonus-picker__party--r { color: var(--unr-bp-r); }
.unr-bonus-picker__party--d { color: var(--unr-bp-d); }
.unr-bonus-picker__party--i { color: var(--unr-bp-i); }

.unr-bonus-picker__vote {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  border: 1px solid currentColor;
}

.unr-bonus-picker__vote--nay         { color: var(--unr-bp-nay); }
.unr-bonus-picker__vote--not-voting  { color: var(--unr-bp-nv); }
.unr-bonus-picker__vote--unanimous-consent { color: var(--unr-bp-nv); }
.unr-bonus-picker__vote--not-in-dataset { color: var(--unr-bp-nv); }
/* Should never appear in the bonus list, but guard against dataset drift */
.unr-bonus-picker__vote--yea         { color: var(--unr-bp-accent); }

.unr-bonus-picker__qty {
  color: var(--unr-bp-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.unr-bonus-picker__footer {
  margin: 16px 0 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--unr-bp-border);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--unr-bp-muted);
}

.unr-bonus-picker__footer strong {
  color: var(--unr-bp-fg);
  letter-spacing: 0.5px;
}

.unr-bonus-picker__summary {
  display: block;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--unr-bp-selected-bg);
  border: 1px solid var(--unr-bp-border);
  font-size: 0.875rem;
  letter-spacing: 1px;
  color: var(--unr-bp-fg);
}

.unr-bonus-picker__summary[hidden] {
  display: none;
}

/* ===== Responsive: collapse to two rows on mobile ===== */
@media (max-width: 560px) {
  .unr-bonus-picker {
    padding: 18px 14px;
  }
  .unr-bonus-picker__label {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "check name"
      "check meta"
      "check qty";
    gap: 4px 12px;
  }
  .unr-bonus-picker__checkbox { grid-area: check; }
  .unr-bonus-picker__name     { grid-area: name; }
  .unr-bonus-picker__meta     { grid-area: meta; gap: 8px; flex-wrap: wrap; }
  .unr-bonus-picker__qty      { grid-area: qty; font-size: 0.7rem; }
}

/* ===== Accessibility: high-contrast focus state ===== */
.unr-bonus-picker__checkbox:focus-visible {
  outline: 2px solid var(--unr-bp-accent);
  outline-offset: 2px;
}

/* ===== Reduced motion: kill the row transition ===== */
@media (prefers-reduced-motion: reduce) {
  .unr-bonus-picker__item { transition: none; }
}

/* =====================================================================
   v1.0.6: Former Member / display-only state styling
   ===================================================================== */

/* The whole row is muted but readable — accountability is visible */
.unr-bonus-picker__item--former,
.unr-bonus-picker__item--display-only {
  opacity: 0.65;
}

.unr-bonus-picker__item--display-only .unr-bonus-picker__checkbox {
  cursor: not-allowed;
  /* Keep the visual placeholder so the row aligns, but make it inert */
  filter: grayscale(1);
}

/* FORMER badge — sits next to the vote-label badge in the meta row.
   Uses muted gray (same family as NOT VOTING) — this isn't a victory
   color, it's "person is no longer reachable at a Hill desk." */
.unr-bonus-picker__former-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--unr-bp-muted);
  color: var(--unr-bp-fg);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Former status note — appears below the row, indented to align with name */
.unr-bonus-picker__former-note {
  margin: 6px 0 0 32px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--unr-bp-muted);
  font-style: normal;
}

.unr-bonus-picker__former-note em {
  font-style: italic;
  color: var(--unr-bp-fg);
}

/* Hover state — the row still responds to hover even when disabled,
   to confirm the visual is intentional, not broken */
.unr-bonus-picker__item--display-only:hover {
  opacity: 0.75;
}