/* Phase 3 integration polish
   - Keeps legacy motions/docket styles compatible with design-system variables.
   - Adds status badge styles for implementation-docket statuses introduced in Phase 3C1.
*/

:root {
  --sp-s: var(--sp-xs);
  --sp-m: var(--sp-sm);
  --sp-l: var(--sp-md);
  --sp-2xl: var(--sp-xl);
}

/* Motions page is now the implementation docket. The original component used
   dark-surface fallback variables; these overrides align it with the editorial
   light/dark design tokens used elsewhere on the site. */
.page-motions .motions-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--rule);
}

.page-motions .motions-filters__group {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.page-motions .motions-filters__select {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
}

.page-motions .motions-filters__count {
  color: var(--ink-muted);
  opacity: 1;
}

.page-motions .motions-list {
  gap: var(--sp-sm);
}

.page-motions .motion-card {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--sp-md);
}

.page-motions .motion-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-motions .motion-card__authors,
.page-motions .motion-card__summary,
.page-motions .motion-card__date,
.page-motions .motion-card__cf,
.page-motions .motions-data-note {
  color: var(--ink-muted);
  opacity: 1;
}

.page-motions .motion-card__link {
  color: var(--ink-muted);
  text-decoration-color: var(--rule-heavy);
}

.page-motions .motion-card__link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* Status / category badge pills: Phase 3C1 implementation-docket statuses. */
.page-motions .motion-badge {
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 500;
}

.page-motions .motion-badge--category {
  background: var(--bg-alt);
  color: var(--ink-muted);
  opacity: 1;
}

.page-motions .motion-badge--status.motion-badge--effective {
  background: #e8f4e8;
  color: #2a5a2a;
  border-color: #c4dfc4;
}

.page-motions .motion-badge--status.motion-badge--final-ordinance-adoption,
.page-motions .motion-badge--status.motion-badge--adopted {
  background: #eef1f8;
  color: #2a4a7a;
  border-color: #cbd4e7;
}

.page-motions .motion-badge--status.motion-badge--city-attorney---dcp,
.page-motions .motion-badge--status.motion-badge--city-attorney-dcp,
.page-motions .motion-badge--status.motion-badge--cpc-transmittal {
  background: #f5eee6;
  color: #7a4a20;
  border-color: #e0c9b4;
}

.page-motions .motion-badge--status.motion-badge--plum-action,
.page-motions .motion-badge--status.motion-badge--cpc-action {
  background: #f2ecf4;
  color: #66406f;
  border-color: #dcc8e2;
}

.page-motions .motion-badge--status.motion-badge--administrative,
.page-motions .motion-badge--status.motion-badge--referred {
  background: var(--bg-alt);
  color: var(--ink-muted);
  border-color: var(--rule);
}

[data-theme="dark"] .page-motions .motion-card {
  background: transparent;
  border-color: var(--rule);
}

[data-theme="dark"] .page-motions .motions-filters__select {
  background: var(--bg-alt);
  border-color: var(--rule-heavy);
  color: var(--ink);
}

[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--effective {
  background: #1a3a1a;
  color: #88cc88;
  border-color: #2d5b2d;
}

[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--final-ordinance-adoption,
[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--adopted {
  background: #1a2740;
  color: #9eb8f0;
  border-color: #304264;
}

[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--city-attorney---dcp,
[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--city-attorney-dcp,
[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--cpc-transmittal {
  background: #3a2a18;
  color: #d8b178;
  border-color: #5a4428;
}

[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--plum-action,
[data-theme="dark"] .page-motions .motion-badge--status.motion-badge--cpc-action {
  background: #32203a;
  color: #d2a4e4;
  border-color: #51315c;
}