/* ── Stage Badges — Institutional Glass ────────────────────────────────────
 *
 * One class per stage. Styling is resolved here, not in the database.
 * Dark mode is handled centrally via [data-theme="dark"] selectors so a
 * single <span class="stage-badge stage-proposed"> works in both themes.
 *
 * Two-tier hierarchy:
 *   In-progress (proposed, review, debate, executive) — TONAL
 *     Light fill, dark same-hue text, medium weight, hairline ring.
 *     Reads as: "still moving".
 *   Terminal (enacted, rejected) — SOLID
 *     Saturated fill, white text, semibold weight, leading dot via ::before.
 *     Reads as: "decided".
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Base ── */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;             /* ~gap-1.5 */
  border-radius: 9999px;
  padding: 0.125rem 0.75rem; /* ~py-0.5 px-3 */
  font-size: 0.75rem;        /* text-xs */
  font-weight: 500;
  line-height: 1.25rem;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  /* ring via box-shadow so it composes with terminal shadow */
  box-shadow: inset 0 0 0 1px var(--s-ring, transparent);
  white-space: nowrap;
}

/* ── In-progress: TONAL (light fill, dark text) — "still moving" ── */

/* Light mode */
.stage-proposed  { background: #EEF0F2; color: #3F4651; --s-ring: rgba(63,  70,  81,  .18); }
.stage-review    { background: #DCE7F7; color: #16407A; --s-ring: rgba(22,  64,  122, .20); }
.stage-debate    { background: #D7E3F2; color: #1B4D8F; --s-ring: rgba(27,  77,  143, .22); }
.stage-executive { background: #DCEAE6; color: #1C5F4A; --s-ring: rgba(28,  95,  74,  .20); }

/* Dark mode — in-progress */
[data-theme="dark"] .stage-proposed  { background: rgba(156, 163, 175, .16); color: #C7CDD6; --s-ring: rgba(199, 205, 214, .22); }
[data-theme="dark"] .stage-review    { background: rgba(120, 170, 235, .18); color: #A2C9FF; --s-ring: rgba(162, 201, 255, .25); }
[data-theme="dark"] .stage-debate    { background: rgba(49,  130, 206, .20); color: #7FB2EC; --s-ring: rgba(127, 178, 236, .28); }
[data-theme="dark"] .stage-executive { background: rgba(72,  187, 120, .16); color: #7FCBA0; --s-ring: rgba(127, 203, 160, .26); }

/* ── Terminal: SOLID (saturated fill, white text, semibold) — "decided" ──
 * Identical in both themes so "final" reads as stable / theme-independent.
 * The terminal fills are medium-saturation so they never out-shout the
 * terracotta action buttons. */

.stage-enacted,
[data-theme="dark"] .stage-enacted {
  font-weight: 600;
  background: #2E7D52;
  color: #FFFFFF;
  --s-ring: rgba(0, 0, 0, .10);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10), 0 1px 2px rgba(27, 77, 143, .10);
}

.stage-rejected,
[data-theme="dark"] .stage-rejected {
  font-weight: 600;
  background: #B5483F;
  color: #FFFFFF;
  --s-ring: rgba(0, 0, 0, .10);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10), 0 1px 2px rgba(27, 77, 143, .10);
}

/* Leading filled dot — terminal stages only.
 * Reinforces "settled" on four axes at once: solid fill + white text +
 * semibold + leading dot. Signal survives grayscale and small sizes. */
.stage-enacted::before,
.stage-rejected::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: .9;
  flex: none;
}

/* ── Stage edge strip colors (consumed by .bill-card::before) ──────────────
 * Using data-stage attribute selectors on the card element so these variables
 * never collide with .stage-* badge classes applied to <span> children.
 * The badge classes stay on .stage-badge spans only. */
[data-stage="proposed"]  { --stage-edge: #9DA5B0; }
[data-stage="review"]    { --stage-edge: #4A90D9; }
[data-stage="debate"]    { --stage-edge: #1B4D8F; }
[data-stage="executive"] { --stage-edge: #48BB78; }
[data-stage="enacted"]   { --stage-edge: #2E7D52; }
[data-stage="rejected"]  { --stage-edge: #B5483F; }

/* Dark mode strip */
[data-theme="dark"] [data-stage="proposed"]  { --stage-edge: #8A929E; }
[data-theme="dark"] [data-stage="review"]    { --stage-edge: #6BAED6; }
[data-theme="dark"] [data-stage="debate"]    { --stage-edge: #5B9BD5; }
[data-theme="dark"] [data-stage="executive"] { --stage-edge: #68B591; }
[data-theme="dark"] [data-stage="enacted"]   { --stage-edge: #4CAF7D; }
[data-theme="dark"] [data-stage="rejected"]  { --stage-edge: #D9534F; }


/* ── House origin chips ─────────────────────────────────────────────────────
 *
 * Houses use outlined, desaturated tints — never solid fills.
 * This keeps them subordinate to the filled stage badge, and prevents
 * green (Assembly) from being misread as "Enacted" and blue (Senate)
 * from competing with in-progress stage chips.
 *
 * Light-mode tokens:                                                         */
:root {
  --house-assembly-text: #3F7A52;
  --house-assembly-bg:   rgba(63, 122, 82, .08);
  --house-assembly-bd:   rgba(63, 122, 82, .35);

  --house-senate-text:   #4F5B8C;
  --house-senate-bg:     rgba(79, 91, 140, .08);
  --house-senate-bd:     rgba(79, 91, 140, .35);
}
[data-theme="dark"] {
  --house-assembly-text: #7FBF93;
  --house-assembly-bg:   rgba(127, 191, 147, .12);
  --house-assembly-bd:   rgba(127, 191, 147, .30);

  --house-senate-text:   #A3AEDC;
  --house-senate-bg:     rgba(163, 174, 220, .12);
  --house-senate-bd:     rgba(163, 174, 220, .30);
}

.house-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.25rem;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--house-bd);
}

.house-assembly {
  color:      var(--house-assembly-text);
  background: var(--house-assembly-bg);
  --house-bd: var(--house-assembly-bd);
}

.house-senate {
  color:      var(--house-senate-text);
  background: var(--house-senate-bg);
  --house-bd: var(--house-senate-bd);
}

/* ── Visibility Badges (Pill-shaped, neutral border, no background) ─── */
.visibility-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.6rem;
  font-size: 0.75rem; /* text-xs, matching stage badges */
  font-weight: 500;
  line-height: 1.25rem;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  white-space: nowrap;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .visibility-badge {
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.visibility-published {
  color: #2D6A4F;
}

.visibility-draft {
  color: #B57600;
}

.visibility-archived {
  color: #6C757D;
}

[data-theme="dark"] .visibility-published {
  color: #72C59B;
}

[data-theme="dark"] .visibility-draft {
  color: #ECC055;
}

[data-theme="dark"] .visibility-archived {
  color: #9CA3AF;
}