/* ============================================================
   DEMOS — /preview/ injectable stylesheet  ·  v2 (banded cards)
   Handoff: drop this into the Streamlit app via the runtime
   <style> injection. Depends on tokens.css (already shipped in
   the brand package) for --color-*, --space-*, --radius-*,
   --shadow-*, --ease-*, --dur-* custom properties.

   This file is intentionally written as BRAND-FAITHFUL VALUES on
   semantic component classes (.dp-*). The engineer maps these
   onto Streamlit's data-testid hooks — see the "Wiring" notes in
   the handoff doc. Every value here is a token or derived from
   one; nothing invents a parallel system.

   FONT: Plus Jakarta Sans is SELF-HOSTED (brand brief §8 / privacy).
   Do NOT add a fonts.googleapis.com link. Serve the variable font
   from your own static path and @font-face it: weights 400-800,
   font-display: swap, format woff2. (A concrete @font-face path is
   omitted here on purpose so the offline export doesn't mistake the
   example filename for a real asset — see brand brief §8.)

   ── v2 CHANGES (preview brief v2) ────────────────────────────
     §4   Colored header BAND per card — forest for bills, maple for
          petitions; white number + title; status chip frosted on the
          band (§10 retune). Body stays white with charcoal text.
     §4c  DEBATE SUMMARY block — a collapsed <details> mirroring the
          in-app for/against component; balanced, never good-vs-bad.
     §4d  Signature SPARKLINE on petition cards — calm sage line + a
          faint area fill; replaces the v1 "goal" progress bar.
     §5   Civic-action button → MAPLE (.dp-btn--action): Sign this
          petition / Email my MP. Forest stays for navigation/join.
     Everything else (hero, tabs, waitlist, landings, footer, 360px)
     is unchanged from v1.
   ============================================================ */

/* ---- 1. Global reset over Streamlit defaults --------------- */
/* Intent: set brand font, warm-white page, charcoal body text,
   tabular figures for civic numbers. Engineer applies the font +
   bg + color to Streamlit's root/app container; the rest cascades. */
.dp-scope {
  font-family: var(--font-sans);
  background: var(--color-base);
  color: var(--color-charcoal);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}
.dp-scope *,
.dp-scope *::before,
.dp-scope *::after { box-sizing: border-box; }
.dp-num { font-variant-numeric: tabular-nums; }

/* The redesign lives in a centered, readable column — not full-bleed.
   Streamlit's main block-container gets this max-width + padding. */
.dp-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ---- 2. Hero (RECOMMENDED: light, on warm-white) ----------- */
/* Rationale in the doc: the cards are the star, so the hero stays
   calm — lockup + tagline + subhead + one quiet stat row, closed
   by a hairline rule. Forest shows up as accents, not a heavy band. */
.dp-hero { padding: var(--space-3xl) 0 var(--space-2xl); }
.dp-hero__lockup { height: 40px; width: auto; display: block; }
.dp-hero__tagline {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-forest);
  margin: var(--space-lg) 0 0;
  line-height: 1.15;
  text-wrap: balance;
}
.dp-hero__subhead {
  font-size: var(--text-body-l);
  color: var(--color-warm-gray);
  max-width: 56ch;
  margin: var(--space-md) 0 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.dp-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.dp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--color-sage-pale);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--text-body-s);
  color: var(--color-forest);
}
.dp-stat strong {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.dp-hero__rule {
  border: none;
  border-top: 1px solid var(--color-forest-pale);
  margin: var(--space-2xl) 0 0;
}

/* ---- 2b. Hero (ALTERNATIVE: forest band, like the email) --- */
/* Shown for comparison in the doc; not the recommendation. */
.dp-hero--band {
  background: var(--color-forest);
  color: var(--color-base);
  padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-xl);
  margin-top: var(--space-lg);
}
.dp-hero--band .dp-hero__tagline { color: var(--color-base); margin-top: var(--space-base); }
.dp-hero--band .dp-hero__subhead { color: var(--color-sage-light); }
.dp-hero--band .dp-stat {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: var(--color-base);
}

/* ---- 3. Tabs (Bills / Petitions) --------------------------- */
.dp-tabs {
  display: flex;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--color-forest-pale);
  margin: var(--space-2xl) 0 var(--space-lg);
}
.dp-tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-warm-gray);
  padding: 0 0 var(--space-md);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.dp-tab:hover { color: var(--color-forest); }
.dp-tab__count {
  font-variant-numeric: tabular-nums;
  color: var(--color-sage);
  font-weight: var(--weight-medium);
  margin-left: 4px;
}
.dp-tab[aria-selected="true"] {
  color: var(--color-forest);
  border-bottom-color: var(--color-forest);
}
.dp-tab[aria-selected="true"] .dp-tab__count { color: var(--color-forest-light); }

/* ---- 4. Item card (the core repeating unit) — v2 banded ----- */
.dp-list { display: flex; flex-direction: column; gap: var(--space-base); }
.dp-card {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;                 /* clip the colored band to the radius */
  container: dpcard / inline-size;  /* card-width queries (debate stacking) */
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* Hover: subtle lift only — fade/translate, no bounce (motion principles). */
.dp-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-sage-light);
  transform: translateY(-2px);
}

/* 4a. Colored header band — forest (bill) / maple (petition).
   A solid brand band, never a gradient; rounded top via card overflow.
   White number + title; status chip frosted on the band (see §10). */
.dp-card__band {
  background: var(--color-forest);                 /* bill default */
  padding: var(--space-base) var(--space-lg);
}
.dp-card--petition .dp-card__band { background: var(--color-maple); }
.dp-card__bandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.dp-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.82);                   /* white-ish on the band */
}
/* Scoped under .dp-card so the white title reliably beats host
   heading styles — Streamlit's own `h3` rule (and this doc's `.sec h3`)
   are more specific than a bare `.dp-card__title`, and would otherwise
   paint the title dark-on-dark on the colored band. */
.dp-card .dp-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-white);
  line-height: 1.25;
  margin: 6px 0 0;
  text-wrap: pretty;
}

/* 4b. White body below the band — the readable heart (kept from v1) */
.dp-card__main { padding: var(--space-lg); }
.dp-card__sponsor {
  font-size: var(--text-body-s);
  color: var(--color-warm-gray);
  margin: 0;
}
.dp-card__sponsor strong { color: var(--color-charcoal); font-weight: var(--weight-semibold); }

/* plain-language body — the readable heart */
.dp-card__body { margin-top: var(--space-base); display: flex; flex-direction: column; gap: var(--space-md); }
.dp-field__label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: 0 0 2px;
}
.dp-field__text {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-charcoal);
  margin: 0;
  text-wrap: pretty;
}

/* 4c. Debate summary (new in v2) ----------------------------
   Mirrors the in-app for/against debate component, adapted to the
   card width. A native <details> so it collapses in the dense list
   and matches the app's expander. BALANCED styling — a faint sage
   tint for "for", a cool neutral for "against"; labelled, never
   coloured good-vs-bad, no maple, no alarm. Omit the whole block
   when there is no summary (degrade gracefully). */
.dp-debate {
  margin-top: var(--space-base);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-md);
  background: var(--color-base);
  overflow: hidden;
}
.dp-debate__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 11px var(--space-base);
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--color-forest);
  -webkit-user-select: none; user-select: none;
}
.dp-debate__summary::-webkit-details-marker { display: none; }
.dp-debate__summary:hover { background: var(--color-sage-pale); }
.dp-debate__ico { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }
.dp-debate__count { color: var(--color-sage); font-weight: var(--weight-medium); }
.dp-debate__chev {
  width: 16px; height: 16px; margin-left: auto; color: var(--color-sage);
  transition: transform var(--dur-base) var(--ease-out);
}
.dp-debate[open] .dp-debate__chev { transform: rotate(180deg); }
.dp-debate__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding: 2px var(--space-base) var(--space-md);
}
/* quiet source link closing the block — the debate's equivalent of the
   card's LEGISinfo / ourcommons link. Points to the full Hansard record. */
.dp-debate__foot {
  padding: 0 var(--space-base) 14px;
}
/* Stack for/against when the CARD is narrow — a CONTAINER query, not a
   viewport one, so the columns stack inside a phone-width card even on a
   wide page, and in production no matter how Streamlit sizes the column.
   At a phone width each column would be too cramped to read. */
@container dpcard (max-width: 440px) {
  .dp-debate__cols { grid-template-columns: 1fr; }
}
.dp-debate__side { border-radius: var(--radius-md); padding: 10px 12px; }
.dp-debate__side--for { background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); }
.dp-debate__side--against { background: #F3F4F6; border: 1px solid #E5E7EB; }
.dp-debate__label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}
.dp-debate__side--for .dp-debate__label { color: var(--color-success); }
.dp-debate__side--against .dp-debate__label { color: var(--color-warm-gray); }
.dp-debate__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dp-debate__list li {
  position: relative;
  font-size: var(--text-body-s);
  line-height: 1.45;
  color: var(--color-charcoal);
  padding-left: 14px;
}
.dp-debate__list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-sage);
}
.dp-debate__side--against .dp-debate__list li::before { background: var(--color-sage-light); }

/* petition full-text (reuses the debate collapsible) — verbatim wording */
.dp-debate__full {
  padding: 2px var(--space-base) var(--space-base);
  font-size: var(--text-body-s);
  line-height: 1.6;
  color: var(--color-charcoal);
}
.dp-debate__full p { margin: 0; text-wrap: pretty; }
.dp-debate__full p + p { margin-top: var(--space-sm); }

/* 4d. petition signature readout + sparkline (new in v2) -----
   Count + trend pill, then a calm sage line/area chart of signatures
   over time. Replaces v1's "goal" progress bar. Engineer renders the
   real series; this specifies the look. Degrade to just the count
   when there are too few data points. */
.dp-sig {
  margin-top: var(--space-base);
  padding-top: var(--space-base);
  border-top: 1px dashed var(--color-forest-pale);
}
.dp-sig__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm) var(--space-sm); }
.dp-sig__head .dp-sig__trend { margin-top: 2px; }  /* sits neatly when it wraps on narrow cards */
.dp-sig__count {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-forest);
}
.dp-sig__label { font-size: var(--text-body-s); color: var(--color-warm-gray); }
.dp-sig__trend {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--color-success);
  background: #E4F0E9; border: 1px solid #CFE4D7;
  border-radius: var(--radius-full); padding: 2px 9px 2px 7px;
  white-space: nowrap;
}
.dp-sig__trend svg { width: 12px; height: 12px; display: block; }
/* sign-by / closing date — calm and informational, a date not a countdown */
.dp-sig__deadline {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--space-sm);
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal);
}
.dp-sig__deadline svg { width: 14px; height: 14px; color: var(--color-sage); flex: 0 0 14px; }
.dp-sig__deadline--closed { color: var(--color-warm-gray); font-weight: var(--weight-regular); }
.dp-spark { margin-top: var(--space-md); display: block; }
.dp-spark svg { display: block; width: 100%; height: 40px; overflow: visible; }
.dp-spark__area { fill: var(--color-sage); opacity: 0.13; }
.dp-spark__line { fill: none; stroke: var(--color-sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-spark__dot { fill: var(--color-forest); }
.dp-spark__caption { font-size: var(--text-caption); color: var(--color-sage); margin-top: 5px; }

/* action row */
.dp-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-base);
  border-top: 1px solid var(--color-forest-pale);
}
.dp-card__actions .dp-ext { margin-left: auto; }

/* ---- 5. Buttons ------------------------------------------- */
.dp-btn {
  appearance: none;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-s);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.dp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dp-btn--primary { background: var(--color-forest); color: var(--color-base); }
.dp-btn--primary:hover { background: var(--color-forest-light); }
.dp-btn--ghost { background: transparent; color: var(--color-forest); border-color: var(--color-forest-pale); }
.dp-btn--ghost:hover { background: var(--color-sage-pale); border-color: var(--color-sage-light); }
/* civic-action primary — MAPLE (Refined Maple Policy): Sign this
   petition / Email my MP. Forest --primary stays for join/navigation. */
.dp-btn--action { background: var(--color-maple); color: #fff; }
.dp-btn--action:hover { background: var(--color-maple-dark); }
.dp-btn--action .dp-beta-dot { width: 14px; height: 14px; display: block; opacity: 0.9; }

/* beta affordance: a calm leaf hint, not a paywall slap */
.dp-beta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-sage);
  background: var(--color-sage-pale);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-full);
  padding: 3px 9px 3px 7px;
  letter-spacing: 0.01em;
}
.dp-beta svg { width: 12px; height: 12px; display: block; }
/* on a beta-gated primary button, the leaf sits inside, lighter */
.dp-btn--primary .dp-beta-dot {
  width: 14px; height: 14px; display: block; opacity: 0.85;
}

/* quiet external link */
.dp-ext {
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--color-sage);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.dp-ext:hover { color: var(--color-forest); text-decoration: underline; }

/* ---- 6. Beta-gate dialog (Streamlit modal) ----------------- */
.dp-dialog {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
  max-width: 460px;
  width: 100%;
}
.dp-dialog__leaf {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-base);
}
.dp-dialog__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-forest);
  margin: 0;
  line-height: 1.15;
}
.dp-dialog__pitch {
  font-size: var(--text-body);
  color: var(--color-warm-gray);
  line-height: 1.55;
  margin: var(--space-md) 0 var(--space-lg);
  text-wrap: pretty;
}
.dp-field-group { display: flex; flex-direction: column; gap: var(--space-base); }
.dp-label {
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--color-charcoal);
  margin-bottom: 6px;
  display: block;
}
.dp-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  background: var(--color-base);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.dp-input::placeholder { color: var(--color-sage); }
.dp-input:focus { outline: none; border-color: var(--color-sage); box-shadow: var(--focus-ring); }
.dp-input--area { resize: vertical; min-height: 76px; line-height: 1.5; }
.dp-dialog__submit { margin-top: var(--space-lg); width: 100%; justify-content: center; padding: 13px 18px; font-size: var(--text-body); }
.dp-dialog__fine {
  font-size: var(--text-caption);
  color: var(--color-sage);
  text-align: center;
  margin: var(--space-md) 0 0;
  line-height: 1.5;
}

/* ---- 7. Inline waitlist section ---------------------------- */
.dp-waitlist {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl);
  margin: var(--space-2xl) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.dp-waitlist__eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: 0 0 var(--space-sm);
}
.dp-waitlist__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-forest);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}
.dp-valueprops { list-style: none; margin: var(--space-base) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.dp-valueprops li {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  line-height: 1.45;
}
.dp-valueprops .dp-check {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  color: var(--color-sage);
}

/* ---- 8. Confirm / leave landing states --------------------- */
.dp-landing {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
  text-align: center;
  max-width: 520px;
  margin: var(--space-2xl) auto;
}
.dp-landing__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-base);
}
.dp-landing__icon svg { width: 28px; height: 28px; }
.dp-landing__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-forest);
  margin: 0 0 var(--space-sm);
}
.dp-landing__msg { font-size: var(--text-body); color: var(--color-warm-gray); margin: 0 auto var(--space-lg); max-width: 42ch; line-height: 1.55; }
.dp-landing__back {
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--color-forest);
  text-decoration: none;
}
.dp-landing__back:hover { text-decoration: underline; }
/* state accents — calm; maple appears only as a single dot, never a fill */
.dp-landing--ok    .dp-landing__icon { background: #E4F0E9; color: var(--color-success); }
.dp-landing--info  .dp-landing__icon { background: var(--color-sage-pale); color: var(--color-forest-light); }
.dp-landing--warn  .dp-landing__icon { background: var(--color-forest-pale); color: var(--color-warm-gray); }
.dp-landing--gone  .dp-landing__icon { background: var(--color-sage-pale); color: var(--color-sage); }

/* ---- 9. Empty state ---------------------------------------- */
.dp-empty {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}
.dp-empty__art { width: 200px; max-width: 60%; height: auto; display: block; margin: 0 auto var(--space-lg); }
.dp-empty__title { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--color-forest); margin: 0 0 var(--space-sm); }
.dp-empty__msg { font-size: var(--text-body); color: var(--color-warm-gray); margin: 0 auto; max-width: 38ch; line-height: 1.55; }

/* ---- 10. Status chips -------------------------------------- */
/* Calm pill system. A small dot carries the state color so the
   label stays readable. MAPLE IS NOT A STATUS COLOR. */
.dp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.dp-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
/* Royal Assent — passed into law (success / forest-green) */
.dp-chip--assent   { background: #E4F0E9; color: var(--color-success); border-color: #CFE4D7; }
.dp-chip--assent   .dp-chip__dot { background: var(--color-success); }
/* Open for signature — live petition (positive / sage-green) */
.dp-chip--open     { background: var(--color-sage-pale); color: var(--color-forest-light); border-color: var(--color-forest-pale); }
.dp-chip--open     .dp-chip__dot { background: var(--color-sage); }
/* In committee / At readings — in progress (neutral forest tint) */
.dp-chip--progress { background: var(--forest-50); color: var(--color-forest-light); border-color: var(--color-forest-pale); }
.dp-chip--progress .dp-chip__dot { background: var(--color-sage-light); }
/* Closed / Defeated / Withdrawn — inactive (muted warm-gray) */
.dp-chip--closed   { background: #F3F4F6; color: var(--color-warm-gray); border-color: #E5E7EB; }
.dp-chip--closed   .dp-chip__dot { background: var(--color-warm-gray); }

/* v2 — chip ON the colored header band. The v1 fills were tuned for a
   white ground; on forest/maple they'd muddy. Re-seat every chip on a
   frosted near-white pill (light on the colored ground) and let the
   per-status TEXT + DOT carry the meaning — legible because the pill is
   light, and identical on both the forest and maple bands. */
.dp-card__band .dp-chip {
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

/* ---- 11. Footer -------------------------------------------- */
.dp-footer {
  border-top: 1px solid var(--color-forest-pale);
  margin-top: var(--space-3xl);
  padding: var(--space-2xl) 0 var(--space-3xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
}
.dp-footer__brand { display: flex; align-items: center; gap: var(--space-md); }
.dp-footer__wm { height: 22px; width: auto; display: block; }
.dp-footer__tag { font-size: var(--text-body-s); color: var(--color-warm-gray); }
.dp-footer__links { display: flex; gap: var(--space-lg); }
.dp-footer__links a {
  font-size: var(--text-body-s);
  color: var(--color-warm-gray);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.dp-footer__links a:hover { color: var(--color-forest); }
.dp-footer__legal { width: 100%; font-size: var(--text-caption); color: var(--color-sage); margin-top: var(--space-sm); }

/* ---- 12b. List intro ("New to this?" + MP nudge) ---------- */
.dp-listintro { margin-bottom: var(--space-lg); }
.dp-listintro__learn {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--text-body-s); color: var(--color-warm-gray); margin: 0;
}
.dp-listintro__learn svg { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }
.dp-listintro__learn a { color: var(--color-forest); font-weight: var(--weight-semibold); text-decoration: underline; }
.dp-listintro__learn a:hover { color: var(--color-forest-light); }
.dp-listintro__note {
  font-size: var(--text-body-s); font-style: italic; color: var(--color-charcoal);
  margin: var(--space-sm) 0 0; line-height: 1.5; text-wrap: pretty;
}

/* ---- 12c. "Do you support this bill?" sentiment control ---- */
.dp-support { margin-top: var(--space-lg); }
.dp-support__q { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin: 0; }
.dp-support__sub { font-size: var(--text-caption); font-style: italic; color: var(--color-warm-gray); margin: 4px 0 0; line-height: 1.45; text-wrap: pretty; }
.dp-support__btns { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.dp-support__btn {
  appearance: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-body-s); font-weight: var(--weight-semibold);
  color: var(--color-forest); background: var(--color-white);
  border: 1px solid var(--color-forest-pale); border-radius: var(--radius-full);
  padding: 9px 30px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.dp-support__btn:hover { background: var(--color-sage-pale); border-color: var(--color-sage-light); }
.dp-support__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- 13. "Start a petition" prompt (above the petition list) ---- */
.dp-startcta {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-base);
}
.dp-startcta__head { display: flex; align-items: center; gap: var(--space-md); }
.dp-startcta__icon {
  flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-sage-pale);
  border: 1px solid var(--color-forest-pale);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-forest);
}
.dp-startcta__icon svg { width: 22px; height: 22px; }
/* scoped so it beats host h3 styles, like .dp-card__title */
.dp-startcta .dp-startcta__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-forest);
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}
.dp-startcta__msg {
  font-size: var(--text-body-s);
  color: var(--color-warm-gray);
  line-height: 1.55;
  margin: var(--space-md) 0 var(--space-base);
  text-wrap: pretty;
}
.dp-startcta__msg strong { color: var(--color-charcoal); font-weight: var(--weight-semibold); }

/* ---- 14. "My MP" tab — beta-gate panel --------------------- */
.dp-mpgate {
  background: var(--color-white);
  border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
  text-align: center;
}
.dp-mpgate__icon {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-forest); margin-bottom: var(--space-base);
}
.dp-mpgate__icon svg { width: 28px; height: 28px; }
/* scoped so it beats host h3 styles, like .dp-card__title */
.dp-mpgate .dp-mpgate__title {
  font-size: var(--text-h3); font-weight: var(--weight-bold);
  letter-spacing: -0.015em; color: var(--color-forest);
  margin: 0 0 var(--space-sm); line-height: 1.15;
}
.dp-mpgate__msg {
  font-size: var(--text-body); color: var(--color-warm-gray);
  line-height: 1.55; margin: 0 auto var(--space-lg); max-width: 46ch;
  text-wrap: pretty;
}
.dp-mpgate__msg em { color: var(--color-charcoal); font-style: normal; font-weight: var(--weight-semibold); }
.dp-mpgate__list {
  list-style: none; margin: 0 auto; padding: 0;
  display: inline-flex; flex-direction: column; gap: var(--space-sm);
  text-align: left; max-width: 42ch;
}
.dp-mpgate__list li {
  display: flex; gap: var(--space-md); align-items: flex-start;
  font-size: var(--text-body-s); color: var(--color-charcoal); line-height: 1.45;
}
.dp-mpgate__check { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--color-sage); }

/* ---- 15. Responsive (holds at 360px) ----------------------- */
@media (max-width: 640px) {
  .dp-container { padding: 0 var(--space-base); }
  .dp-hero { padding: var(--space-2xl) 0 var(--space-xl); }
  .dp-hero__tagline { font-size: var(--text-h4); }
  .dp-hero__subhead { font-size: var(--text-body); }
  .dp-waitlist { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-lg); }
  .dp-card__band { padding: var(--space-md) var(--space-base); }
  .dp-card__main { padding: var(--space-base); }
  .dp-debate__cols { grid-template-columns: 1fr; }   /* for/against stack */
  .dp-startcta { padding: var(--space-lg); }
  .dp-mpgate { padding: var(--space-lg); }
  .dp-card__actions .dp-ext { margin-left: 0; flex-basis: 100%; }
  .dp-btn { flex: 1 1 auto; justify-content: center; }
  .dp-tabs { gap: var(--space-base); }
}