/* ============================================================
   DEMOS — Authenticated app  ·  shared component system
   Extends tokens.css and reuses the v2 card language
   (demos-preview-v2.css, the .dp-* classes) and the share-page
   chrome vocabulary. This is the single stylesheet every app
   surface is assembled from — buttons, forms, the Likert scale,
   chips, the stepper, navigation, feedback, and the profile-
   editing controls. Class prefix: .da-  (demos app).

   Load order:  tokens.css → demos-preview-v2.css → demos-app.css
   Font: Plus Jakarta Sans + JetBrains Mono (self-hosted in prod).
   ============================================================ */

/* ---- 0 · Base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.da-app {
  margin: 0;
  background: var(--color-base);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.da-num { font-variant-numeric: tabular-nums; }
.da-mono { font-family: var(--font-mono); }
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure) { margin: 0; }
a { color: var(--color-forest); }
.da-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: none; }

/* shared content column */
.da-wrap { width: min(1080px, 100% - 48px); margin-inline: auto; }
.da-wrap--narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
.da-wrap--tight  { width: min(460px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) {
  .da-wrap, .da-wrap--narrow { width: calc(100% - 32px); }
  .da-wrap--tight { width: calc(100% - 32px); }
}

/* ============================================================
   1 · APP CHROME — header, nav, account menu, footer
   (built on the share-page sticky frosted bar)
   ============================================================ */
.da-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,250,0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--color-forest-pale);
}
.da-head__in {
  display: flex; align-items: center; gap: var(--space-lg);
  height: 64px; width: min(1080px, 100% - 48px); margin-inline: auto;
}
@media (max-width: 560px){ .da-head__in { width: calc(100% - 32px); height: 58px; } }
.da-head__brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.da-head__brand img { height: 26px; display: block; }

/* primary nav (Bills / Petitions / Your MP) */
.da-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-base); }
.da-nav__link {
  font-size: var(--text-body-s); font-weight: var(--weight-semibold);
  color: var(--color-warm-gray); text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-md); white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-nav__link:hover { color: var(--color-forest); background: var(--color-sage-pale); }
.da-nav__link[aria-current="page"] { color: var(--color-forest); background: var(--color-forest-pale); }
.da-nav__link:focus-visible { box-shadow: var(--focus-ring); }

.da-head__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-base); }

/* EN · FR toggle (verbatim share-page treatment) */
.da-lang { display: inline-flex; align-items: center; gap: 3px; }
.da-lang button {
  appearance: none; cursor: pointer; border: none; background: transparent;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  color: var(--color-sage); padding: 4px 5px; border-radius: 6px; letter-spacing: 0.02em;
  transition: color var(--dur-base) var(--ease-out);
}
.da-lang button.active { color: var(--color-forest); text-decoration: underline; text-underline-offset: 3px; }
.da-lang button:hover { color: var(--color-forest-light); }
.da-lang button:focus-visible { box-shadow: var(--focus-ring); }
.da-lang__sep { color: var(--color-sage-light); font-size: 12px; }

/* account menu */
.da-account { position: relative; }
.da-account__btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-white); border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-full); padding: 4px 6px 4px 4px;
  font-family: var(--font-sans); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.da-account__btn:hover { border-color: var(--color-sage-light); box-shadow: var(--shadow-xs); }
.da-account__btn:focus-visible { box-shadow: var(--focus-ring); }
.da-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--color-forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 0.02em;
}
.da-avatar--lg { width: 56px; height: 56px; flex-basis: 56px; font-size: var(--text-h4); }
.da-account__chev { width: 16px; height: 16px; color: var(--color-sage); }
@media (max-width: 700px){
  .da-nav { display: none; }   /* nav collapses into the mobile tab bar */
  .da-account__chev { display: none; }
}

/* dropdown panel (design the open state; wire toggling with HTMX/JS) */
.da-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 224px; background: var(--color-white);
  border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-sm);
}
.da-menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--color-forest-pale); margin-bottom: var(--space-sm); }
.da-menu__name { font-size: var(--text-body-s); font-weight: var(--weight-bold); color: var(--color-charcoal); }
.da-menu__mail { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 2px; }
.da-menu a, .da-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-sans); font-size: var(--text-body-s); font-weight: var(--weight-medium);
  color: var(--color-charcoal); text-decoration: none; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out);
}
.da-menu a:hover, .da-menu button:hover { background: var(--color-sage-pale); }
.da-menu a svg, .da-menu button svg { width: 17px; height: 17px; color: var(--color-sage); flex: 0 0 17px; }
.da-menu__sep { height: 1px; background: var(--color-forest-pale); margin: var(--space-sm) 0; }
.da-menu__danger { color: var(--color-maple-dark); }
.da-menu__danger svg { color: var(--color-maple); }

/* mobile bottom tab bar — mirrors the primary nav on phones */
.da-tabbar { display: none; }
@media (max-width: 700px){
  .da-tabbar {
    display: flex; position: sticky; bottom: 0; z-index: 50;
    background: rgba(250,250,250,0.92);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--color-forest-pale);
    padding: 6px max(env(safe-area-inset-left), 8px) calc(6px + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 8px);
  }
  .da-tabbar__link {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; padding: 7px 4px; border-radius: var(--radius-md);
    font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-warm-gray);
  }
  .da-tabbar__link svg { width: 22px; height: 22px; }
  .da-tabbar__link[aria-current="page"] { color: var(--color-forest); }
}

/* footer (shared chrome) */
.da-foot { margin-top: auto; border-top: 1px solid var(--color-forest-pale); }
.da-foot__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-base);
  flex-wrap: wrap; padding: var(--space-xl) 0 var(--space-2xl);
  width: min(1080px, 100% - 48px); margin-inline: auto;
}
@media (max-width: 560px){ .da-foot__in { width: calc(100% - 32px); } }
.da-foot__brand { display: flex; align-items: center; text-decoration: none; }
.da-foot__brand img { height: 22px; display: block; }
.da-foot__note { font-size: var(--text-body-s); color: var(--color-warm-gray); }
.da-foot__links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.da-foot__links a { font-size: var(--text-body-s); color: var(--color-warm-gray); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.da-foot__links a:hover { color: var(--color-forest); }

/* main region spacing */
.da-main { padding: var(--space-2xl) 0 var(--space-3xl); flex: 1 0 auto; }
@media (max-width: 560px){ .da-main { padding: var(--space-lg) 0 var(--space-2xl); } }

/* ============================================================
   2 · TYPE HELPERS + SECTION HEADS
   ============================================================ */
.da-eyebrow {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sage); margin: 0;
}
.da-h1 { font-size: var(--text-h2); font-weight: var(--weight-extra); letter-spacing: -0.02em; color: var(--color-forest); line-height: 1.1; text-wrap: balance; }
.da-h2 { font-size: var(--text-h3); font-weight: var(--weight-bold); letter-spacing: -0.015em; color: var(--color-forest); line-height: 1.15; }
.da-h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--color-charcoal); }
.da-lead { font-size: var(--text-body-l); color: var(--color-warm-gray); line-height: 1.55; text-wrap: pretty; }
.da-muted { color: var(--color-warm-gray); }
.da-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-base); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.da-sectionhead p { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 4px; }

/* breadcrumb / back link */
.da-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-body-s); font-weight: var(--weight-semibold);
  color: var(--color-forest); text-decoration: none; margin-bottom: var(--space-base);
}
.da-back svg { width: 16px; height: 16px; color: var(--color-sage); }
.da-back:hover { color: var(--color-forest-light); }
.da-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-s); color: var(--color-warm-gray); margin-bottom: var(--space-base); flex-wrap: wrap; }
.da-crumb a { color: var(--color-forest); text-decoration: none; font-weight: var(--weight-medium); }
.da-crumb a:hover { text-decoration: underline; }
.da-crumb svg { width: 14px; height: 14px; color: var(--color-sage-light); }

/* ============================================================
   3 · BUTTONS  (extends .dp-btn from the v2 sheet)
   primary=forest · action=maple (civic) · ghost · destructive · link
   ============================================================ */
.da-btn {
  appearance: none; font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-body-s); line-height: 1; border-radius: var(--radius-md);
  padding: 11px 18px; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.da-btn:focus-visible { box-shadow: var(--focus-ring); }
.da-btn:disabled, .da-btn[aria-disabled="true"] { background: var(--color-disabled-bg); color: var(--color-disabled-fg); border-color: transparent; cursor: not-allowed; box-shadow: none; }

.da-btn--primary { background: var(--color-forest); color: var(--color-base); }
.da-btn--primary:hover:not(:disabled) { background: var(--color-forest-light); }
.da-btn--primary:active:not(:disabled) { background: var(--forest-800); }

/* civic action — MAPLE. Reserved: Email your MP / Sign / rating / civic submit. */
.da-btn--action { background: var(--color-maple); color: #fff; }
.da-btn--action:hover:not(:disabled) { background: var(--color-maple-dark); }
.da-btn--action:active:not(:disabled) { background: var(--maple-700); }

.da-btn--ghost { background: var(--color-white); color: var(--color-forest); border-color: var(--color-forest-pale); }
.da-btn--ghost:hover:not(:disabled) { background: var(--color-sage-pale); border-color: var(--color-sage-light); }

.da-btn--secondary { background: var(--color-sage-pale); color: var(--color-forest); border-color: var(--color-forest-pale); }
.da-btn--secondary:hover:not(:disabled) { background: var(--color-forest-pale); }

/* destructive — maple outline, fills on hover; confirmation expected */
.da-btn--destructive { background: var(--color-white); color: var(--color-maple-dark); border-color: var(--maple-300); }
.da-btn--destructive:hover:not(:disabled) { background: var(--color-maple); color: #fff; border-color: var(--color-maple); }

.da-btn--link { background: none; border: none; padding: 4px 2px; color: var(--color-forest); }
.da-btn--link:hover { text-decoration: underline; }

.da-btn--block { width: 100%; }
.da-btn--lg { padding: 14px 24px; font-size: var(--text-body); }
.da-btn--sm { padding: 8px 13px; font-size: var(--text-caption); }
.da-btnrow { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* spinner inside a busy button / standalone */
.da-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent; animation: da-spin 0.7s linear infinite; display: inline-block; }
.da-btn--primary .da-spinner, .da-btn--action .da-spinner { border-color: rgba(255,255,255,0.55); border-top-color: transparent; }
@keyframes da-spin { to { transform: rotate(360deg); } }
.da-btn.is-busy { pointer-events: none; }

/* ============================================================
   4 · CARDS  (generic content card; bill/petition reuse .dp-card)
   ============================================================ */
.da-card {
  background: var(--color-white); border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.da-card--pad { padding: var(--space-xl); }
@media (max-width: 560px){ .da-card--pad { padding: var(--space-lg); } }
.da-card__title { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--color-forest); letter-spacing: -0.01em; }
.da-card + .da-card { margin-top: var(--space-base); }
.da-stack { display: flex; flex-direction: column; gap: var(--space-base); }
.da-stack--lg { gap: var(--space-lg); }
.da-divider { border: none; border-top: 1px solid var(--color-forest-pale); margin: var(--space-lg) 0; }

/* ============================================================
   5 · FORM CONTROLS
   ============================================================ */
.da-field { display: flex; flex-direction: column; }
.da-field + .da-field { margin-top: var(--space-lg); }
.da-label {
  font-size: var(--text-body-s); font-weight: var(--weight-semibold);
  color: var(--color-charcoal); margin-bottom: 7px; display: flex; align-items: center; gap: 8px;
}
.da-label .da-opt { font-weight: var(--weight-regular); color: var(--color-sage); font-size: var(--text-caption); }
.da-help { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 6px; line-height: 1.5; }

.da-input, .da-select, .da-textarea {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-body);
  color: var(--color-charcoal); background: var(--color-white);
  border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.da-input::placeholder, .da-textarea::placeholder { color: var(--color-sage); }
.da-input:hover, .da-select:hover, .da-textarea:hover { border-color: var(--color-sage-light); }
.da-input:focus, .da-select:focus, .da-textarea:focus { outline: none; border-color: var(--color-sage); box-shadow: var(--focus-ring); }
.da-input:disabled, .da-select:disabled, .da-textarea:disabled { background: var(--color-sage-pale); color: var(--color-sage); cursor: not-allowed; }
.da-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.da-input--mono { font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* select with chevron */
.da-selectwrap { position: relative; }
.da-selectwrap svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-sage); pointer-events: none; }
.da-select { appearance: none; padding-right: 40px; cursor: pointer; }

/* input with leading icon / trailing affordance */
.da-inputwrap { position: relative; display: flex; align-items: center; }
.da-inputwrap .da-input { padding-right: 44px; }
.da-input__toggle {
  position: absolute; right: 6px; appearance: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--color-sage);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.da-input__toggle:hover { color: var(--color-forest); background: var(--color-sage-pale); }
.da-input__toggle:focus-visible { box-shadow: var(--focus-ring); }
.da-input__toggle svg { width: 19px; height: 19px; }

/* validation states */
.da-field.is-invalid .da-input, .da-field.is-invalid .da-select, .da-field.is-invalid .da-textarea { border-color: var(--color-maple); }
.da-field.is-invalid .da-input:focus { box-shadow: 0 0 0 3px rgba(220,53,69,0.18); }
.da-field.is-valid .da-input { border-color: var(--color-success); }
.da-msg { display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-caption); margin-top: 7px; line-height: 1.45; }
.da-msg svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.da-msg--error { color: var(--color-maple-dark); }
.da-msg--ok { color: var(--color-success); }
.da-msg--hint { color: var(--color-warm-gray); }

/* checkbox + radio (native control, restyled box) */
.da-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.da-check input { position: absolute; opacity: 0; width: 22px; height: 22px; cursor: pointer; }
.da-check__box {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--color-sage); background: var(--color-white);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.da-check__box svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.da-check input:checked ~ .da-check__box { background: var(--color-forest); border-color: var(--color-forest); }
.da-check input:checked ~ .da-check__box svg { opacity: 1; }
.da-check input:focus-visible ~ .da-check__box { box-shadow: var(--focus-ring); }
.da-check:hover .da-check__box { border-color: var(--color-forest); }
.da-check--radio .da-check__box { border-radius: 50%; }
.da-check input[type="radio"]:checked ~ .da-check__box { background: var(--color-white); border-color: var(--color-forest); border-width: 6px; }
.da-check input[type="radio"]:checked ~ .da-check__box svg { display: none; }
.da-check__txt { font-size: var(--text-body); color: var(--color-charcoal); line-height: 1.4; }
.da-check__txt small { display: block; font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 2px; }

/* toggle switch (settings) */
.da-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.da-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.da-switch__track { width: 46px; height: 26px; border-radius: var(--radius-full); background: var(--color-sage-light); transition: background var(--dur-base) var(--ease-out); flex: 0 0 46px; }
.da-switch__thumb { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.da-switch input:checked ~ .da-switch__track { background: var(--color-forest); }
.da-switch input:checked ~ .da-switch__thumb { transform: translateX(20px); }
.da-switch input:focus-visible ~ .da-switch__track { box-shadow: var(--focus-ring); }

/* segmented control (digest cadence, EN/FR-in-settings, etc.) */
.da-seg { display: inline-flex; background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); padding: 4px; gap: 3px; flex-wrap: wrap; }
.da-seg label { position: relative; }
.da-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-seg__opt {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-warm-gray);
  padding: 8px 16px; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-seg label:hover .da-seg__opt { color: var(--color-forest); }
.da-seg input:checked ~ .da-seg__opt { background: var(--color-forest); color: #fff; box-shadow: var(--shadow-xs); }
.da-seg input:focus-visible ~ .da-seg__opt { box-shadow: var(--focus-ring); }

/* ============================================================
   6 · LIKERT 1–5  (the survey's heart — symmetric, unweighted)
   Neutral by design: no end is visually "right". Native radios.
   ============================================================ */
.da-likert { display: flex; gap: var(--space-sm); }
.da-likert__opt { flex: 1 1 0; position: relative; min-width: 0; }
.da-likert__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-likert__face {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  height: 100%; text-align: center; cursor: pointer;
  border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg);
  background: var(--color-white); padding: 16px 10px 14px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.da-likert__dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  border: 2px solid var(--color-sage-light); background: var(--color-white);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* graduated dot sizes give a symmetric scale shape without implying valence */
.da-likert__opt:nth-child(1) .da-likert__dot, .da-likert__opt:nth-child(5) .da-likert__dot { width: 26px; height: 26px; flex-basis: 26px; }
.da-likert__opt:nth-child(2) .da-likert__dot, .da-likert__opt:nth-child(4) .da-likert__dot { width: 21px; height: 21px; flex-basis: 21px; }
.da-likert__opt:nth-child(3) .da-likert__dot { width: 16px; height: 16px; flex-basis: 16px; }
.da-likert__lbl { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-warm-gray); line-height: 1.3; text-wrap: balance; }
.da-likert__opt:hover .da-likert__face { border-color: var(--color-sage); background: var(--color-sage-pale); }
.da-likert__opt:hover .da-likert__dot { border-color: var(--color-forest); }
.da-likert input:checked ~ .da-likert__face { border-color: var(--color-forest); background: var(--color-sage-pale); box-shadow: var(--shadow-xs); }
.da-likert input:checked ~ .da-likert__face .da-likert__dot { background: var(--color-forest); border-color: var(--color-forest); }
.da-likert input:checked ~ .da-likert__face .da-likert__lbl { color: var(--color-forest); }
.da-likert input:focus-visible ~ .da-likert__face { box-shadow: var(--focus-ring); }
/* compact horizontal scale-line for importance (labels under a row) */
@media (max-width: 560px){
  .da-likert { gap: 5px; }
  .da-likert__face { padding: 12px 4px 10px; gap: 7px; }
  .da-likert__lbl { font-size: 10.5px; }
}

/* ============================================================
   7 · MULTI-SELECT CHIPS  (special issues + topic editing)
   ============================================================ */
.da-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.da-chip-opt { position: relative; }
.da-chip-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-chip-opt__face {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  font-size: var(--text-body-s); font-weight: var(--weight-medium); color: var(--color-charcoal);
  background: var(--color-white); border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-full); padding: 9px 16px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-chip-opt__face .da-chip-opt__ic { width: 15px; height: 15px; color: var(--color-sage); transition: color var(--dur-base) var(--ease-out); }
.da-chip-opt__face svg { width: 15px; height: 15px; flex: 0 0 15px; }
.da-chip-opt:hover .da-chip-opt__face { border-color: var(--color-sage-light); background: var(--color-sage-pale); }
.da-chip-opt input:checked ~ .da-chip-opt__face { background: var(--color-forest); border-color: var(--color-forest); color: #fff; }
.da-chip-opt input:checked ~ .da-chip-opt__face .da-chip-opt__ic { color: rgba(255,255,255,0.9); }
.da-chip-opt input:focus-visible ~ .da-chip-opt__face { box-shadow: var(--focus-ring); }
/* grouped checklist for the issues stage */
.da-chipgroup { margin-top: var(--space-lg); }
.da-chipgroup__lbl { font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--space-md); }

/* "matches your priorities" badge */
.da-match {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--color-forest); background: var(--color-sage-pale);
  border: 1px solid var(--color-forest-pale); border-radius: var(--radius-full);
  padding: 4px 11px 4px 9px;
}
.da-match svg { width: 13px; height: 13px; color: var(--color-sage); }
.da-match--strong { background: #E4F0E9; border-color: #CFE4D7; color: var(--color-success); }
.da-match--strong svg { color: var(--color-success); }

/* "why you're seeing this" explainer */
.da-why {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--text-caption); color: var(--color-warm-gray); line-height: 1.5;
  background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-md); padding: 9px 12px; margin-top: var(--space-base);
}
.da-why svg { width: 15px; height: 15px; color: var(--color-sage); flex: 0 0 15px; margin-top: 1px; }
.da-why b { color: var(--color-forest); font-weight: var(--weight-semibold); }

/* ============================================================
   8 · FEEDBACK — toast, inline confirm, error block, skeleton
   ============================================================ */
.da-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--color-charcoal); color: #fff; font-size: var(--text-body-s); font-weight: var(--weight-semibold);
  padding: 13px 22px; border-radius: var(--radius-full); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  display: flex; align-items: center; gap: 10px; white-space: nowrap; box-shadow: var(--shadow-lg);
}
.da-toast svg { width: 17px; height: 17px; color: var(--color-sage-light); }
.da-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.da-inlineconfirm {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-body-s); font-weight: var(--weight-medium); color: var(--color-success);
  background: #E4F0E9; border: 1px solid #CFE4D7; border-radius: var(--radius-md); padding: 11px 14px;
}
.da-inlineconfirm svg { width: 17px; height: 17px; flex: 0 0 17px; }

.da-alert {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: var(--radius-md); padding: 14px 16px; font-size: var(--text-body-s); line-height: 1.5;
}
.da-alert svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; }
.da-alert b { font-weight: var(--weight-bold); }
.da-alert--error { background: var(--maple-100); border: 1px solid var(--maple-300); color: var(--color-maple-dark); }
.da-alert--info { background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); color: var(--color-forest-light); }
.da-alert--ok { background: #E4F0E9; border: 1px solid #CFE4D7; color: var(--color-success); }

/* skeleton loaders */
.da-skel { background: linear-gradient(100deg, var(--color-sage-pale) 30%, var(--color-forest-pale) 50%, var(--color-sage-pale) 70%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: da-shimmer 1.3s linear infinite; }
@keyframes da-shimmer { to { background-position: -200% 0; } }
.da-skel--line { height: 12px; margin: 8px 0; }
.da-skel--title { height: 22px; width: 60%; }
.da-skel--chip { height: 26px; width: 92px; border-radius: var(--radius-full); display: inline-block; }
.da-skel--card { height: 220px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .da-skel { animation: none; } }

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

/* ============================================================
   9 · ONBOARDING PROGRESS / STEPPER
   ============================================================ */
.da-progress { display: flex; align-items: center; gap: var(--space-md); }
.da-progress__track { flex: 1 1 auto; height: 8px; border-radius: var(--radius-full); background: var(--color-forest-pale); overflow: hidden; }
.da-progress__fill { height: 100%; background: var(--color-forest); border-radius: var(--radius-full); transition: width var(--dur-medium) var(--ease-out); }
.da-progress__label { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* step dots row (stage markers across onboarding) */
.da-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.da-steps__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-forest-pale); }
.da-steps__dot.is-done { background: var(--color-sage); }
.da-steps__dot.is-current { background: var(--color-forest); box-shadow: 0 0 0 4px var(--color-sage-pale); }

/* parliamentary "path through Parliament" stepper (app-sized) */
.da-stepper { display: flex; flex-direction: column; }
.da-stepper__step { display: flex; align-items: flex-start; gap: var(--space-lg); }
.da-stepper__rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.da-stepper__node {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--color-sage-light); background: var(--color-white); color: var(--color-sage); z-index: 1;
}
.da-stepper__node svg { width: 18px; height: 18px; }
.da-stepper__line { width: 3px; flex: 1 1 auto; background: var(--color-forest-pale); margin: 3px 0; min-height: 20px; }
.da-stepper__body { padding-bottom: var(--space-lg); }
.da-stepper__label { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-warm-gray); line-height: 1.2; }
.da-stepper__date { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); margin-top: 4px; }
.da-stepper__step.is-done .da-stepper__node { background: var(--color-forest); border-color: var(--color-forest); color: #fff; }
.da-stepper__step.is-done .da-stepper__line { background: var(--color-forest); }
.da-stepper__step.is-done .da-stepper__label { color: var(--color-forest); }
.da-stepper__step.is-current .da-stepper__node { background: var(--color-forest); border-color: var(--color-forest); color: #fff; box-shadow: 0 0 0 5px var(--color-sage-pale); }
.da-stepper__step.is-current .da-stepper__label { color: var(--color-forest); font-weight: var(--weight-bold); }
.da-stepper__step:last-child .da-stepper__line { display: none; }
.da-stepper__note { display: inline-block; margin-top: 9px; 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: 4px 12px; }

/* ============================================================
   10 · VALUE SPECTRA — the profile editing controls
   Two-pole slider · importance dial · spectrum result meter
   ============================================================ */
/* read-only result meter (results / profile summary): a marker on a
   two-pole track, calm sage gradient, neutral — no pole is "good". */
.da-spectrum { padding: var(--space-base) 0; }
.da-spectrum__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.da-spectrum__emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.da-spectrum__name { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-charcoal); }
.da-spectrum__imp { margin-left: auto; }
.da-spectrum__poles { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-warm-gray); margin-bottom: 7px; }
.da-spectrum__poles span { max-width: 46%; }
.da-spectrum__poles span:last-child { text-align: right; }
.da-spectrum__track {
  position: relative; height: 10px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--sage-200), var(--color-forest-pale) 50%, var(--sage-200));
  border: 1px solid var(--color-forest-pale);
}
.da-spectrum__marker {
  position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-forest); border: 3px solid var(--color-white);
  box-shadow: var(--shadow-sm); transform: translate(-50%, -50%);
}
.da-spectrum__desc { font-size: var(--text-body-s); color: var(--color-warm-gray); line-height: 1.5; margin-top: 10px; text-wrap: pretty; }

/* EDITABLE two-pole slider — native range, restyled. Drag the marker. */
.da-slider { padding: 2px 0; }
.da-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin: 8px 0;
  border-radius: var(--radius-full); cursor: pointer;
  background: linear-gradient(90deg, var(--sage-200), var(--color-forest-pale) 50%, var(--sage-200));
  border: 1px solid var(--color-forest-pale);
}
.da-slider input[type="range"]:focus-visible { box-shadow: var(--focus-ring); }
.da-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-forest); border: 3px solid var(--color-white); box-shadow: var(--shadow-md); cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out);
}
.da-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.da-slider input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-forest);
  border: 3px solid var(--color-white); box-shadow: var(--shadow-md); cursor: grab;
}
.da-slider__poles { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-warm-gray); }
.da-slider__poles span:last-child { text-align: right; }
.da-slider__poles .is-near { color: var(--color-forest); }

/* importance dial — 5 graduated bars (segmented, native radios) */
.da-dial { display: inline-flex; align-items: flex-end; gap: 4px; }
.da-dial label { position: relative; cursor: pointer; }
.da-dial input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-dial__bar { display: block; width: 9px; border-radius: 3px; background: var(--color-forest-pale); transition: background var(--dur-base) var(--ease-out); }
.da-dial label:nth-child(1) .da-dial__bar { height: 11px; }
.da-dial label:nth-child(2) .da-dial__bar { height: 15px; }
.da-dial label:nth-child(3) .da-dial__bar { height: 19px; }
.da-dial label:nth-child(4) .da-dial__bar { height: 23px; }
.da-dial label:nth-child(5) .da-dial__bar { height: 27px; }
/* fill up to and including the checked bar via :has() */
.da-dial:hover label .da-dial__bar { background: var(--sage-300); }
.da-dial label:has(input:checked) ~ label .da-dial__bar { background: var(--color-forest-pale); }
.da-dial label:has(input:checked) .da-dial__bar,
.da-dial label:has(~ label input:checked) .da-dial__bar { background: var(--color-forest); }
.da-dial label:has(input:focus-visible) .da-dial__bar { box-shadow: var(--focus-ring); }
.da-dial__val { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-forest); margin-left: 8px; align-self: center; white-space: nowrap; }

/* small importance pill (read-only, in summaries) */
.da-imp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-forest); }
.da-imp__bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.da-imp__bars i { width: 4px; border-radius: 1px; background: var(--color-forest-pale); display: block; }
.da-imp__bars i:nth-child(1){ height: 6px; } .da-imp__bars i:nth-child(2){ height: 9px; }
.da-imp__bars i:nth-child(3){ height: 12px; } .da-imp__bars i:nth-child(4){ height: 15px; } .da-imp__bars i:nth-child(5){ height: 18px; }
.da-imp__bars i.on { background: var(--color-sage); }

/* ============================================================
   11 · DASHBOARD-SPECIFIC
   ============================================================ */
.da-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.da-greet__hi { font-size: var(--text-h2); font-weight: var(--weight-extra); letter-spacing: -0.02em; color: var(--color-forest); line-height: 1.1; }
.da-greet__sub { font-size: var(--text-body); color: var(--color-warm-gray); margin-top: 6px; }

/* layout: feed + sidebar on desktop, stacked on mobile */
.da-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-xl); align-items: start; }
.da-layout > * { min-width: 0; }
@media (max-width: 900px){ .da-layout { grid-template-columns: minmax(0,1fr); } }
.da-side { display: flex; flex-direction: column; gap: var(--space-base); position: sticky; top: 84px; }
@media (max-width: 900px){ .da-side { position: static; } }

/* MP summary card */
.da-mp { background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.da-mp__band { background: var(--color-forest); padding: var(--space-base) var(--space-lg); display: flex; align-items: center; gap: 12px; }
.da-mp__avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--color-forest-light); border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--weight-bold); overflow: hidden; }
.da-mp__avatar img { width: 100%; height: 100%; object-fit: cover; }
.da-mp__band > div { min-width: 0; flex: 1 1 auto; }
.da-mp__role { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-sage-light); }
.da-mp__name { font-size: var(--text-h5); font-weight: var(--weight-bold); color: #fff; margin-top: 1px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-mp__main { padding: var(--space-base) var(--space-lg) var(--space-lg); }
.da-mp__row { display: flex; align-items: center; gap: 9px; font-size: var(--text-body-s); color: var(--color-charcoal); padding: 6px 0; }
.da-mp__row svg { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }
.da-mp__row strong { font-weight: var(--weight-semibold); }
.da-party { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); padding: 3px 10px 3px 8px; border-radius: var(--radius-full); border: 1px solid var(--color-forest-pale); background: var(--color-sage-pale); color: var(--color-forest); }
.da-party__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--color-sage); }

/* alignment readout (you vs MP) */
.da-align { display: flex; align-items: center; gap: var(--space-base); }
.da-align__ring { flex: 0 0 auto; }
.da-align__txt b { display: block; font-size: var(--text-h4); font-weight: var(--weight-extra); color: var(--color-forest); font-variant-numeric: tabular-nums; }
.da-align__txt span { font-size: var(--text-caption); color: var(--color-warm-gray); }

/* compact value summary (sidebar / dashboard profile panel) */
.da-valsum { display: flex; flex-direction: column; gap: 12px; }
.da-valsum__row { }
.da-valsum__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.da-valsum__name { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); display: flex; align-items: center; gap: 7px; }
.da-valsum__pole { font-size: var(--text-caption); color: var(--color-warm-gray); }
.da-valsum__track { position: relative; height: 7px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--sage-200), var(--color-forest-pale) 50%, var(--sage-200)); border: 1px solid var(--color-forest-pale); }
.da-valsum__marker { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--color-forest); border: 2.5px solid var(--color-white); box-shadow: var(--shadow-xs); transform: translate(-50%,-50%); }

/* ============================================================
   12 · MISC — pill tabs, tag, scrolltabs for dashboard
   ============================================================ */
.da-tabs { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--color-forest-pale); margin: 0 0 var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.da-tabs::-webkit-scrollbar { display: none; }
.da-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; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.da-tab:hover { color: var(--color-forest); }
.da-tab__count { font-variant-numeric: tabular-nums; color: var(--color-sage); font-weight: var(--weight-medium); font-size: var(--text-body-s); }
.da-tab[aria-selected="true"], .da-tab[aria-current="page"] { color: var(--color-forest); border-bottom-color: var(--color-forest); }
.da-tab svg { width: 17px; height: 17px; }

.da-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-forest); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-full); padding: 4px 11px; }

/* danger zone (account settings) */
.da-danger { border: 1px solid var(--maple-300); border-radius: var(--radius-lg); background: #FFF8F8; padding: var(--space-lg); }
.da-danger__title { font-size: var(--text-h5); font-weight: var(--weight-bold); color: var(--color-maple-dark); margin-bottom: 6px; }
.da-danger__msg { font-size: var(--text-body-s); color: var(--color-warm-gray); line-height: 1.55; margin-bottom: var(--space-base); max-width: 60ch; }

/* settings row */
.da-setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-base) 0; }
.da-setrow + .da-setrow { border-top: 1px solid var(--color-forest-pale); }
.da-setrow__main { min-width: 0; }
.da-setrow__name { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.da-setrow__desc { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 3px; line-height: 1.5; }
.da-setrow__control { flex: 0 0 auto; }
@media (max-width: 560px){
  /* Stack label-above / control-below so the cadence pill (and any wide
     controls) get the full row width instead of being squeezed into a column. */
  .da-setrow { flex-direction: column; align-items: stretch; gap: var(--space-base); }
  .da-setrow__control { width: 100%; }
  .da-setrow__control .da-seg { display: flex; width: 100%; }
  .da-setrow__control .da-seg > label { flex: 1 1 0; }
}

/* rating thumbs (👍/👎 civic sentiment) — maple is the active civic mark */
.da-rate { display: inline-flex; gap: var(--space-sm); }
.da-rate__btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  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 18px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-rate__btn svg { width: 16px; height: 16px; }
.da-rate__btn:hover { background: var(--color-sage-pale); border-color: var(--color-sage-light); }
.da-rate__btn:focus-visible { box-shadow: var(--focus-ring); }
.da-rate__btn[aria-pressed="true"].da-rate__btn--up { background: #E4F0E9; border-color: #CFE4D7; color: var(--color-success); }
.da-rate__btn[aria-pressed="true"].da-rate__btn--down { background: var(--maple-100); border-color: var(--maple-300); color: var(--color-maple-dark); }

/* ============================================================
   13 · VALUE-SPECTRUM COLOR TAGS  (palette 1 — muted/earthy)
   Color-codes the six spectra on each card. Harmonized with
   forest+sage; Reconciliation kept a neutral clay (not orange).
   Each tag: pale tint bg, darkened-hue text (AA), soft border.
   ============================================================ */
:root {
  --spec-economic:       #B98A33;
  --spec-social:         #8A6F9E;
  --spec-governance:     #43688A;
  --spec-environmental:  #4F8A5B;
  --spec-identity:       #BB6B41;
  --spec-reconciliation: #95586A;
}
.da-spectags { display: flex; flex-wrap: wrap; gap: 6px; }
.da-spec {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  padding: 3px 10px 3px 8px; border-radius: var(--radius-full); border: 1px solid transparent;
}
.da-spec__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.da-spec--economic       { color: color-mix(in srgb, var(--spec-economic) 72%, #1A1A2E); background: color-mix(in srgb, var(--spec-economic) 13%, #fff); border-color: color-mix(in srgb, var(--spec-economic) 30%, #fff); }
.da-spec--economic       .da-spec__dot { background: var(--spec-economic); }
.da-spec--social         { color: color-mix(in srgb, var(--spec-social) 70%, #1A1A2E); background: color-mix(in srgb, var(--spec-social) 13%, #fff); border-color: color-mix(in srgb, var(--spec-social) 30%, #fff); }
.da-spec--social         .da-spec__dot { background: var(--spec-social); }
.da-spec--governance     { color: color-mix(in srgb, var(--spec-governance) 74%, #1A1A2E); background: color-mix(in srgb, var(--spec-governance) 13%, #fff); border-color: color-mix(in srgb, var(--spec-governance) 30%, #fff); }
.da-spec--governance     .da-spec__dot { background: var(--spec-governance); }
.da-spec--environmental  { color: color-mix(in srgb, var(--spec-environmental) 72%, #1A1A2E); background: color-mix(in srgb, var(--spec-environmental) 13%, #fff); border-color: color-mix(in srgb, var(--spec-environmental) 30%, #fff); }
.da-spec--environmental  .da-spec__dot { background: var(--spec-environmental); }
.da-spec--identity       { color: color-mix(in srgb, var(--spec-identity) 70%, #1A1A2E); background: color-mix(in srgb, var(--spec-identity) 13%, #fff); border-color: color-mix(in srgb, var(--spec-identity) 30%, #fff); }
.da-spec--identity       .da-spec__dot { background: var(--spec-identity); }
.da-spec--reconciliation { color: color-mix(in srgb, var(--spec-reconciliation) 72%, #1A1A2E); background: color-mix(in srgb, var(--spec-reconciliation) 13%, #fff); border-color: color-mix(in srgb, var(--spec-reconciliation) 30%, #fff); }
.da-spec--reconciliation .da-spec__dot { background: var(--spec-reconciliation); }
/* interest/topic tag — bookmarked, quiet sage */
.da-topic { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-forest-light); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-full); padding: 3px 11px; }
.da-topic svg { width: 12px; height: 12px; color: var(--color-sage); flex: 0 0 12px; }

/* ============================================================
   14 · FEED ITEM CARD  (.da-itemcard)
   Evolves the v2 banded card per client feedback: a COMPACT
   colored band carries only number + status chip; the TITLE and
   "what it does" sit together on white right beneath it (current-
   app readability). Forest band = bill · maple band = petition.
   ============================================================ */
.da-itemcard {
  background: var(--color-white); border: 1px solid var(--color-forest-pale);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  container: itemcard / inline-size;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.da-itemcard:hover { box-shadow: var(--shadow-md); border-color: var(--color-sage-light); transform: translateY(-2px); }
.da-itemlist { display: flex; flex-direction: column; gap: var(--space-base); }

/* HEADER BAND carries number + status + TITLE + what-it-does (white,
   easy to scan); the white body then leads with "what it means for you". */
.da-itemcard__band { background: var(--color-forest); padding: var(--space-base) var(--space-lg) var(--space-md); }
.da-itemcard--petition .da-itemcard__band { background: var(--color-maple); }
.da-itemcard__bandrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.da-itemcard__num { font-family: var(--font-mono); font-size: var(--text-body-s); font-weight: var(--weight-medium); letter-spacing: 0.03em; color: rgba(255,255,255,0.86); font-variant-numeric: tabular-nums; }
/* status chip frosted on the band (same treatment as v2) */
.da-itemcard__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); }
.da-itemcard__title { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--color-white); line-height: 1.25; text-wrap: pretty; margin-top: 9px; }
.da-itemcard__title a { color: inherit; text-decoration: none; }
.da-itemcard__title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.da-itemcard__does { font-size: var(--text-body-s); line-height: 1.55; color: rgba(255,255,255,0.9); margin-top: 8px; text-wrap: pretty; }

/* white body */
.da-itemcard__main { padding: var(--space-lg); }
/* value-spectrum tags — a quick colour-coded reference at the top of the body */
.da-itemcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-base); }
.da-itemcard__sponsor { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: var(--space-base); }
.da-itemcard__sponsor strong { color: var(--color-charcoal); font-weight: var(--weight-semibold); }
.da-itemcard__means { margin-top: 0; }
.da-itemcard__means .da-field__label, .da-fieldlabel { font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sage); margin: 0 0 3px; display: block; }
.da-itemcard__means p { font-size: var(--text-body); line-height: 1.6; color: var(--color-charcoal); margin: 0; text-wrap: pretty; }

/* actions row */
.da-itemcard__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-base); border-top: 1px solid var(--color-forest-pale); }
.da-itemcard__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); }
.da-itemcard__ext:hover { color: var(--color-forest); text-decoration: underline; }
.da-itemcard__tools { margin-left: auto; display: inline-flex; gap: 4px; }

/* follow / mute — quiet icon-label toggles (the digest's "following") */
.da-tool {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--color-warm-gray); background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-full); padding: 6px 12px 6px 10px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.da-tool svg { width: 15px; height: 15px; }
.da-tool:hover { background: var(--color-sage-pale); color: var(--color-forest); }
.da-tool:focus-visible { box-shadow: var(--focus-ring); }
.da-tool--follow[aria-pressed="true"] { background: var(--color-forest-pale); color: var(--color-forest); border-color: var(--color-forest-pale); }
.da-tool--mute[aria-pressed="true"] { background: #F3F4F6; color: var(--color-warm-gray); }

/* muted card state — collapsed + dimmed, shown in the Muted view */
.da-itemcard.is-muted { box-shadow: none; background: var(--color-sage-pale); }
.da-itemcard.is-muted:hover { transform: none; box-shadow: var(--shadow-xs); }
.da-muted-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-base) var(--space-lg); }
.da-muted-row__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); flex: 0 0 auto; }
.da-muted-row__title { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-warm-gray); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   15 · COLORED DEBATE  (for/against) + NO-DEBATE state
   Client prefers colour to distinguish sides. Supporters = green,
   Critics = ochre/amber (NEVER maple). Balanced, not good-vs-bad.
   ============================================================ */
.da-debate { margin-top: var(--space-base); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); background: var(--color-base); overflow: hidden; }
.da-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;
}
.da-debate__summary::-webkit-details-marker { display: none; }
.da-debate__summary:hover { background: var(--color-sage-pale); }
.da-debate__ico { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }
.da-debate__count { color: var(--color-sage); font-weight: var(--weight-medium); }
.da-debate__chev { width: 16px; height: 16px; margin-left: auto; color: var(--color-sage); transition: transform var(--dur-base) var(--ease-out); }
.da-debate[open] .da-debate__chev { transform: rotate(180deg); }
.da-debate__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); padding: 2px var(--space-base) var(--space-md); }
@container itemcard (max-width: 460px) { .da-debate__cols { grid-template-columns: 1fr; } }
.da-debate__side { border-radius: var(--radius-md); padding: 11px 13px; }
.da-debate__side--for { background: #E9F2EC; border: 1px solid #CFE4D7; }
.da-debate__side--against { background: #FBF3E2; border: 1px solid #EFE0BD; }
.da-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); display: flex; align-items: center; gap: 6px; }
.da-debate__label svg { width: 14px; height: 14px; }
.da-debate__side--for .da-debate__label { color: var(--color-success); }
.da-debate__side--against .da-debate__label { color: #9A6B12; }
.da-debate__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.da-debate__list li { position: relative; font-size: var(--text-body-s); line-height: 1.45; color: var(--color-charcoal); padding-left: 15px; }
.da-debate__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; }
.da-debate__side--for .da-debate__list li::before { background: var(--color-success); }
.da-debate__side--against .da-debate__list li::before { background: #C99A2E; }
.da-debate__foot { padding: 0 var(--space-base) 13px; }
/* no debate yet — a calm, explicit note (not an empty collapsible) */
.da-nodebate { display: flex; align-items: center; gap: 9px; margin-top: var(--space-base); font-size: var(--text-body-s); color: var(--color-warm-gray); background: var(--color-base); border: 1px dashed var(--color-forest-pale); border-radius: var(--radius-md); padding: 11px var(--space-base); line-height: 1.45; }
.da-nodebate svg { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }

/* petition full text (the "Read the petition text" expander) */
.da-pettext { margin-top: var(--space-base); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); background: var(--color-base); overflow: hidden; }
.da-pettext > 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); }
.da-pettext > summary::-webkit-details-marker { display: none; }
.da-pettext > summary:hover { background: var(--color-sage-pale); }
.da-pettext__chev { width: 16px; height: 16px; margin-left: auto; color: var(--color-sage); transition: transform var(--dur-base) var(--ease-out); }
.da-pettext[open] .da-pettext__chev { transform: rotate(180deg); }
.da-pettext__body { padding: 2px var(--space-base) var(--space-base); font-size: var(--text-body-s); line-height: 1.6; color: var(--color-charcoal); }
.da-pettext__body p { margin: 0 0 var(--space-sm); text-wrap: pretty; }
.da-pettext__body .da-pettext__prayer { font-weight: var(--weight-semibold); color: var(--color-charcoal); border-left: 3px solid var(--color-sage); padding-left: 12px; }

/* ============================================================
   16 · MP VOTE RECORD  (past bills) + SUPPORT/OPPOSE
   ============================================================ */
.da-vote { margin-top: var(--space-base); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); background: var(--color-base); padding: var(--space-base) var(--space-base) var(--space-md); }
.da-vote__head { display: flex; align-items: center; gap: 9px; font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.da-vote__head svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-sage); }
.da-votechip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-bold); padding: 3px 11px 3px 9px; border-radius: var(--radius-full); }
.da-votechip svg { width: 13px; height: 13px; }
.da-votechip--yes { background: #E4F0E9; color: var(--color-success); border: 1px solid #CFE4D7; }
.da-votechip--no { background: #FBE9EB; color: var(--color-data-negative); border: 1px solid #F2C9CE; }
.da-votechip--abstain { background: #F3F4F6; color: var(--color-warm-gray); border: 1px solid #E5E7EB; }
.da-vote__meta { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 8px; line-height: 1.5; }
.da-vote__meta strong { color: var(--color-charcoal); font-weight: var(--weight-semibold); }
.da-vote__result { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.da-vote__parties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.da-partyvote { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-charcoal); background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-full); padding: 3px 10px 3px 8px; }
.da-partyvote i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.da-partyvote i.yes { background: var(--color-success); } .da-partyvote i.no { background: var(--color-data-negative); }

/* do you support? — neutral pills + the anonymity micro-note */
.da-support { margin-top: var(--space-base); }
.da-support__q { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin: 0; }
.da-support__note { font-size: var(--text-caption); color: var(--color-warm-gray); margin: 4px 0 0; line-height: 1.45; display: flex; align-items: flex-start; gap: 6px; }
.da-support__note svg { width: 13px; height: 13px; color: var(--color-sage); flex: 0 0 13px; margin-top: 1px; }
.da-support__btns { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.da-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: 8px 26px; display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.da-support__btn svg { width: 15px; height: 15px; }
.da-support__btn:hover { background: var(--color-sage-pale); border-color: var(--color-sage-light); }
.da-support__btn:focus-visible { box-shadow: var(--focus-ring); }
.da-support__btn[aria-pressed="true"].is-yes { background: #E4F0E9; border-color: #CFE4D7; color: var(--color-success); }
.da-support__btn[aria-pressed="true"].is-no { background: #FBE9EB; border-color: #F2C9CE; color: var(--color-data-negative); }

/* ============================================================
   17 · PETITION SIGNATURE READOUT — bar sparkline + deadline
   ============================================================ */
.da-sig { margin-top: var(--space-base); padding-top: var(--space-base); border-top: 1px dashed var(--color-forest-pale); }
.da-sig__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); }
.da-sig__count { font-size: var(--text-h3); font-weight: var(--weight-extra); font-variant-numeric: tabular-nums; color: var(--color-forest); letter-spacing: -0.01em; }
.da-sig__label { font-size: var(--text-body-s); color: var(--color-warm-gray); }
.da-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; }
.da-sig__trend svg { width: 12px; height: 12px; }
/* bar sparkline — calm sage bars, last bar forest (digest style) */
.da-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: var(--space-md); }
.da-bars__bar { flex: 1 1 0; min-width: 0; background: var(--sage-300); border-radius: 2px 2px 0 0; transition: background var(--dur-base) var(--ease-out); }
.da-bars__bar:last-child { background: var(--color-forest); }
.da-bars__cap { font-size: var(--text-caption); color: var(--color-sage); margin-top: 6px; }
/* prominent closing date — a clear, calm marker (not a countdown) */
.da-deadline { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-md); font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-forest); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); padding: 8px 14px; }
.da-deadline svg { width: 16px; height: 16px; color: var(--color-sage); flex: 0 0 16px; }
.da-deadline strong { font-weight: var(--weight-bold); }
.da-deadline--soon { background: #FBF3E2; border-color: #EFE0BD; color: #9A6B12; }
.da-deadline--soon svg { color: #C99A2E; }
.da-deadline--closed { background: #F3F4F6; border-color: #E5E7EB; color: var(--color-warm-gray); }
.da-deadline--closed svg { color: var(--color-warm-gray); }

/* ============================================================
   18 · "WHY YOU'RE SEEING THIS" — explainer w/ spectrum + topics
   ============================================================ */
.da-why2 { margin-top: var(--space-base); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); padding: var(--space-md) var(--space-base); }
.da-why2__head { display: flex; align-items: center; gap: 7px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-forest); }
.da-why2__head svg { width: 14px; height: 14px; color: var(--color-sage); flex: 0 0 14px; }
.da-why2__reasons { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.da-why2__reasons li { font-size: var(--text-caption); color: var(--color-warm-gray); line-height: 1.45; }
.da-why2__reasons b { color: var(--color-charcoal); font-weight: var(--weight-semibold); }
.da-why2__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ============================================================
   19 · FEED CONTROL BAR — sub-toggle (Live/Past · Open/Closed),
   sort, count, "New to this?", Muted view
   ============================================================ */
.da-feedbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-base); }
.da-feedbar__spacer { flex: 1 1 auto; }
.da-feedbar__sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-s); color: var(--color-warm-gray); }
.da-feedbar__count { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); }
.da-learn { display: flex; align-items: center; gap: 9px; font-size: var(--text-body-s); color: var(--color-warm-gray); margin-bottom: var(--space-base); }
.da-learn svg { width: 17px; height: 17px; color: var(--color-sage); flex: 0 0 17px; }
.da-learn a { color: var(--color-forest); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
.da-learn a:hover { color: var(--color-forest-light); }
.da-feednote { font-size: var(--text-body-s); font-style: italic; color: var(--color-charcoal); margin-bottom: var(--space-base); line-height: 1.5; text-wrap: pretty; }

/* start-a-petition prompt (kept from the live app) */
.da-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); }
.da-startcta__head { display: flex; align-items: center; gap: var(--space-md); }
.da-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); }
.da-startcta__icon svg { width: 22px; height: 22px; }
.da-startcta__title { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--color-forest); line-height: 1.2; margin: 0; }
.da-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; }
.da-startcta__msg strong { color: var(--color-charcoal); font-weight: var(--weight-semibold); }

/* ============================================================
   20 · MP ALIGNMENT — headline score + vote comparison list
   ============================================================ */
.da-score { display: flex; align-items: center; gap: var(--space-lg); }
.da-score__num { font-size: 2.75rem; font-weight: var(--weight-extra); letter-spacing: -0.03em; color: var(--color-forest); font-variant-numeric: tabular-nums; line-height: 1; }
.da-score__main { min-width: 0; }
.da-score__lbl { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.da-score__sub { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 3px; line-height: 1.45; }
/* comparison list — your position vs their vote, per bill */
.da-compare { display: flex; flex-direction: column; }
.da-comparerow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-forest-pale); }
.da-comparerow:first-child { border-top: none; }
.da-comparerow__bill { min-width: 0; display: block; text-decoration: none; color: inherit; }
a.da-comparerow__bill:hover .da-comparerow__title { color: var(--color-forest); text-decoration: underline; }
a.da-comparerow__bill:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; border-radius: 4px; }
.da-comparerow__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); }
.da-comparerow__title { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); line-height: 1.3; text-wrap: pretty; }
.da-vs { display: inline-flex; align-items: center; gap: 7px; }
.da-vs__chip { font-size: var(--text-caption); font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.da-vs__chip--yes { background: #E4F0E9; color: var(--color-success); border: 1px solid #CFE4D7; }
.da-vs__chip--no { background: #FBE9EB; color: var(--color-data-negative); border: 1px solid #F2C9CE; }
.da-vs__chip--none { background: #F3F4F6; color: var(--color-warm-gray); border: 1px solid #E5E7EB; }
.da-agree { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.da-agree svg { width: 15px; height: 15px; }
.da-agree--match { background: #E4F0E9; color: var(--color-success); }
.da-agree--differ { background: #FBF3E2; color: #9A6B12; }
.da-comparerow__col { font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-sage); }
@container (max-width: 520px) { .da-comparerow { grid-template-columns: 1fr auto; } .da-comparerow .da-vs { grid-column: 1 / -1; justify-content: flex-start; } }

/* ============================================================
   21 · MOBILE PROFILE BAR  (collapses the sidebar on phones)
   ============================================================ */
.da-profilebar { display: none; }
@media (max-width: 900px){
  .da-profilebar {
    display: flex; align-items: center; gap: var(--space-md); width: 100%;
    background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: var(--space-md) var(--space-base); margin-bottom: var(--space-base);
    cursor: pointer; text-align: left; font-family: var(--font-sans);
  }
  .da-profilebar__avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--color-forest); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-body-s); }
  .da-profilebar__main { flex: 1 1 auto; min-width: 0; }
  .da-profilebar__name { font-size: var(--text-body-s); font-weight: var(--weight-bold); color: var(--color-charcoal); }
  .da-profilebar__sub { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .da-profilebar__chev { width: 18px; height: 18px; color: var(--color-sage); flex: 0 0 18px; }
  /* hide the desktop sidebar on phones; the bar + dedicated pages cover it */
  .da-side { display: none; }
}

/* ============================================================
   23 · MP PROFILE PAGE — hero, quick stats, sponsored items
   ============================================================ */
.da-mphero { background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.da-mphero__band { background: var(--color-forest); padding: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); }
.da-mphero__avatar { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; background: var(--color-forest-light); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-h3); font-weight: var(--weight-bold); overflow: hidden; }
.da-mphero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.da-mphero__id { min-width: 0; }
.da-mphero__role { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-sage-light); }
.da-mphero__name { font-size: var(--text-h2); font-weight: var(--weight-extra); letter-spacing: -0.02em; color: #fff; line-height: 1.1; margin-top: 3px; }
.da-mphero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.da-mphero__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-body-s); color: var(--color-sage-light); }
.da-mphero__meta svg { width: 15px; height: 15px; flex: 0 0 15px; }
.da-mphero__meta .da-chipfrost { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; border-radius: var(--radius-full); padding: 3px 11px 3px 9px; font-weight: var(--weight-semibold); font-size: var(--text-caption); }
.da-mphero__meta .da-chipfrost i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-light, #B5C9BB); display: inline-block; margin-right: 2px; }
.da-mphero__body { padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.da-mpstats { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.da-mpstat__n { font-size: var(--text-h4); font-weight: var(--weight-extra); color: var(--color-forest); font-variant-numeric: tabular-nums; line-height: 1; }
.da-mpstat__l { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 4px; }
.da-mphero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-left: auto; }
@media (max-width: 560px){
  .da-mphero__band { padding: var(--space-lg); }
  .da-mphero__avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: var(--text-h4); }
  .da-mphero__name { font-size: var(--text-h3); }
  .da-mphero__actions { margin-left: 0; width: 100%; }
  .da-mphero__actions .da-btn { flex: 1 1 auto; }
}

/* sponsored bill/petition — compact list row with riding approval */
.da-spitem { display: flex; align-items: flex-start; gap: var(--space-lg); padding: var(--space-base) 0; border-top: 1px solid var(--color-forest-pale); }
.da-spitem:first-child { border-top: none; padding-top: 0; }
.da-spitem__main { min-width: 0; flex: 1 1 auto; }
.da-spitem__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.da-spitem__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); }
.da-spitem__title { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-forest); line-height: 1.3; margin-top: 4px; text-wrap: pretty; }
.da-spitem__title a { color: inherit; text-decoration: none; }
.da-spitem__title a:hover { text-decoration: underline; }
.da-spitem__does { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 5px; line-height: 1.5; text-wrap: pretty; }
.da-spitem__right { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.da-approve { display: inline-flex; align-items: center; gap: 7px; }
.da-approve__bar { width: 64px; height: 7px; border-radius: var(--radius-full); background: var(--color-forest-pale); overflow: hidden; }
.da-approve__fill { height: 100%; background: var(--color-sage); border-radius: var(--radius-full); }
.da-approve__n { font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-forest); font-variant-numeric: tabular-nums; }
.da-approve__l { font-size: var(--text-caption); color: var(--color-warm-gray); }
@media (max-width: 560px){
  .da-spitem { flex-direction: column; gap: var(--space-sm); }
  .da-spitem__right { text-align: left; align-items: flex-start; flex-direction: row; gap: var(--space-md); }
}

/* ============================================================
   22 · RESPONSIVE TRIMS
   ============================================================ */
@media (max-width: 560px){
  .da-greet__hi { font-size: var(--text-h3); }
  .da-h1 { font-size: var(--text-h3); }
  .da-card--pad { padding: var(--space-base); }
  .da-itemcard__main { padding: var(--space-base); }
  .da-itemcard__band { padding: 8px var(--space-base); }
  .da-debate__cols { grid-template-columns: 1fr; }
  .da-startcta { padding: var(--space-lg); }
  .da-itemcard__tools { margin-left: 0; flex-basis: 100%; }
  .da-score__num { font-size: 2.25rem; }
}

/* ============================================================
   24 · CIVIC-ACTION COMPOSERS (Brief #2)
   Shared chrome + parts for Email-Your-MP and Create-a-Petition.
   Maple Policy: forward/primary CTAs are maple; Back/secondary forest.
   ============================================================ */
/* composer top bar — context + progress + exit controls */
.da-cmp-top { position: sticky; top: 0; z-index: 40; background: rgba(250,250,250,0.9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--color-forest-pale); }
.da-cmp-top__in { width: min(760px, 100% - 40px); margin-inline: auto; display: flex; align-items: center; gap: var(--space-base); min-height: 60px; padding: 10px 0; flex-wrap: wrap; }
.da-cmp-top__brand { display: flex; align-items: center; flex: 0 0 auto; }
.da-cmp-top__brand img { height: 22px; display: block; }
.da-cmp-top__exit { margin-left: auto; display: inline-flex; gap: var(--space-sm); flex: 0 0 auto; }
.da-cmp-prog { width: min(760px, 100% - 40px); margin: 0 auto; padding-bottom: 12px; }
.da-cmp-steps { display: flex; gap: 6px; }
.da-cmp-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.da-cmp-step__bar { height: 5px; border-radius: var(--radius-full); background: var(--color-forest-pale); }
.da-cmp-step.is-done .da-cmp-step__bar { background: var(--color-sage); }
.da-cmp-step.is-current .da-cmp-step__bar { background: var(--color-forest); }
.da-cmp-step__lbl { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-sage); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-cmp-step.is-current .da-cmp-step__lbl { color: var(--color-forest); }
@media (max-width: 600px){ .da-cmp-step__lbl { display: none; } .da-cmp-step.is-current .da-cmp-step__lbl { display: block; flex-basis: 100%; } }
.da-cmp-wrap { width: min(760px, 100% - 40px); margin-inline: auto; padding: 32px 0 80px; }
.da-cmp-ctx { display: flex; align-items: flex-start; gap: var(--space-md); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); padding: var(--space-base) var(--space-lg); margin-bottom: var(--space-xl); }
.da-cmp-ctx__ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-forest-pale); display: flex; align-items: center; justify-content: center; color: var(--color-forest); }
.da-cmp-ctx__ic svg { width: 20px; height: 20px; }
.da-cmp-ctx__eyebrow { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-sage); }
.da-cmp-ctx__title { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-forest); margin-top: 2px; line-height: 1.25; }
.da-cmp-ctx__sub { font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 4px; line-height: 1.5; }
.da-cmp-h { font-size: var(--text-h3); font-weight: var(--weight-extra); letter-spacing: -0.02em; color: var(--color-forest); line-height: 1.1; text-wrap: balance; }
.da-cmp-lead { font-size: var(--text-body); color: var(--color-warm-gray); margin-top: 8px; line-height: 1.55; text-wrap: pretty; }
.da-cmp-nav { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; }
.da-cmp-nav__spacer { flex: 1 1 auto; }
@media (max-width: 560px){
  .da-cmp-nav__spacer { display: none; flex-basis: 100%; }
  .da-cmp-nav .da-btn { flex: 1 1 auto; justify-content: center; }
}

/* trust-boundary banner — Demos prepares, citizen acts */
.da-trust { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-body-s); line-height: 1.5; color: var(--color-forest-light); background: var(--color-sage-pale); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); padding: 12px var(--space-base); }
.da-trust svg { width: 17px; height: 17px; color: var(--color-sage); flex: 0 0 17px; margin-top: 1px; }
.da-trust b { color: var(--color-forest); font-weight: var(--weight-bold); }

/* approach options (Email step 1) — big selectable cards */
.da-approach { display: flex; flex-direction: column; gap: var(--space-md); }
.da-approach__opt { position: relative; }
.da-approach__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-approach__face { display: flex; align-items: flex-start; gap: var(--space-base); cursor: pointer; background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); padding: var(--space-lg); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.da-approach__ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-sage-pale); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.da-approach__txt { min-width: 0; }
.da-approach__name { display: block; font-size: var(--text-body-l); font-weight: var(--weight-bold); color: var(--color-forest); }
.da-approach__desc { display: block; font-size: var(--text-body-s); color: var(--color-warm-gray); margin-top: 3px; line-height: 1.5; text-wrap: pretty; }
.da-approach__check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-sage-light); margin-left: auto; align-self: center; display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.da-approach__check svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.da-approach__opt:hover .da-approach__face { border-color: var(--color-sage-light); background: var(--color-sage-pale); }
.da-approach__opt input:checked ~ .da-approach__face { border-color: var(--color-forest); background: var(--color-sage-pale); box-shadow: var(--shadow-xs); }
.da-approach__opt input:checked ~ .da-approach__face .da-approach__check { background: var(--color-forest); border-color: var(--color-forest); }
.da-approach__opt input:checked ~ .da-approach__face .da-approach__check svg { opacity: 1; }
.da-approach__opt input:focus-visible ~ .da-approach__face { box-shadow: var(--focus-ring); }

/* selectable debate points (Email step 2) */
.da-points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }
@media (max-width: 600px){ .da-points { grid-template-columns: 1fr; } }
.da-points__col { border-radius: var(--radius-md); padding: var(--space-base); }
.da-points__col--for { background: #E9F2EC; border: 1px solid #CFE4D7; }
.da-points__col--against { background: #FBF3E2; border: 1px solid #EFE0BD; }
.da-points__lbl { font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--space-md); display: flex; align-items: center; gap: 6px; }
.da-points__col--for .da-points__lbl { color: var(--color-success); }
.da-points__col--against .da-points__lbl { color: #9A6B12; }
.da-points__lbl svg { width: 14px; height: 14px; }
.da-point { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 9px 0; }
.da-point + .da-point { border-top: 1px solid rgba(0,0,0,0.06); }
.da-point input { position: absolute; opacity: 0; width: 20px; height: 20px; cursor: pointer; }
.da-point__box { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 5px; border: 2px solid var(--color-sage); background: var(--color-white); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.da-point__box svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.da-point input:checked ~ .da-point__box { background: var(--color-forest); border-color: var(--color-forest); }
.da-point input:checked ~ .da-point__box svg { opacity: 1; }
.da-point input:focus-visible ~ .da-point__box { box-shadow: var(--focus-ring); }
.da-point__txt { font-size: var(--text-body-s); color: var(--color-charcoal); line-height: 1.45; }

/* email review block (Email step 3 / Petition step 4) */
.da-email { border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.da-email__row { display: flex; align-items: flex-start; gap: var(--space-md); padding: 12px var(--space-base); border-bottom: 1px solid var(--color-forest-pale); }
.da-email__key { flex: 0 0 64px; font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-sage); padding-top: 1px; }
.da-email__val { min-width: 0; font-size: var(--text-body-s); color: var(--color-charcoal); }
.da-email__val strong { font-weight: var(--weight-semibold); }
.da-email__body { padding: var(--space-base); }
.da-email__body .da-textarea { border: none; padding: 0; min-height: 260px; font-size: var(--text-body); line-height: 1.6; resize: vertical; }
.da-email__body .da-textarea:focus { box-shadow: none; }
.da-mailwarn { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-caption); color: #9A6B12; background: #FBF3E2; border: 1px solid #EFE0BD; border-radius: var(--radius-sm); padding: 8px 11px; margin-top: 8px; line-height: 1.45; }
.da-mailwarn svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

/* rule-check checklist (Petition step 2) — the signature element */
.da-rule { border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); background: var(--color-white); overflow: hidden; }
.da-rule__head { display: flex; align-items: center; gap: var(--space-base); padding: var(--space-base) var(--space-lg); background: var(--color-sage-pale); border-bottom: 1px solid var(--color-forest-pale); }
.da-rule__score { flex: 0 0 auto; position: relative; width: 56px; height: 56px; }
.da-rule__score b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-body); font-weight: var(--weight-extra); color: var(--color-forest); font-variant-numeric: tabular-nums; }
.da-rule__headmain { min-width: 0; }
.da-rule__title { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-forest); }
.da-rule__sub { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 2px; line-height: 1.45; }
.da-rule__topfix { display: flex; align-items: flex-start; gap: 9px; padding: 11px var(--space-lg); background: #FBF3E2; border-bottom: 1px solid #EFE0BD; font-size: var(--text-body-s); color: #9A6B12; line-height: 1.45; }
.da-rule__topfix svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.da-rule__topfix b { color: #7A5310; font-weight: var(--weight-bold); }
.da-rule__list { list-style: none; margin: 0; padding: var(--space-sm) 0; }
.da-rule__item { display: flex; align-items: flex-start; gap: 11px; padding: 9px var(--space-lg); }
.da-rule__ic { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.da-rule__ic svg { width: 12px; height: 12px; }
.da-rule__ic--pass { background: #E4F0E9; color: var(--color-success); }
.da-rule__ic--warn { background: #FBF3E2; color: #C99A2E; }
.da-rule__ic--fail { background: var(--maple-100); color: var(--color-maple-dark); }
.da-rule__main { min-width: 0; }
.da-rule__crit { font-size: var(--text-body-s); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.da-rule__reason { font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 2px; line-height: 1.45; }

/* MP ranked cards (Petition step 3) */
.da-mprank { display: flex; flex-direction: column; gap: var(--space-md); }
.da-mprank__opt { position: relative; }
.da-mprank__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.da-mprank__face { display: flex; align-items: flex-start; gap: var(--space-base); cursor: pointer; background: var(--color-white); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-lg); padding: var(--space-base) var(--space-lg); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.da-mprank__rank { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-sage); padding-top: 4px; }
.da-mprank__avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--color-forest); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-body-s); }
.da-mprank__main { min-width: 0; flex: 1 1 auto; }
.da-mprank__name { display: block; font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-forest); }
.da-mprank__meta { display: block; font-size: var(--text-caption); color: var(--color-warm-gray); margin-top: 2px; }
.da-mprank__why { font-size: var(--text-caption); color: var(--color-charcoal); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.da-mprank__fit { flex: 0 0 auto; text-align: right; }
.da-mprank__fitn { font-size: var(--text-h5); font-weight: var(--weight-extra); color: var(--color-forest); font-variant-numeric: tabular-nums; line-height: 1; }
.da-mprank__fitl { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-sage); margin-top: 3px; }
.da-mprank__check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-sage-light); display: flex; align-items: center; justify-content: center; color: #fff; align-self: center; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.da-mprank__check svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.da-mprank__opt:hover .da-mprank__face { border-color: var(--color-sage-light); box-shadow: var(--shadow-xs); }
.da-mprank__opt input:checked ~ .da-mprank__face { border-color: var(--color-forest); box-shadow: var(--shadow-sm); }
.da-mprank__opt input:checked ~ .da-mprank__face .da-mprank__check { background: var(--color-forest); border-color: var(--color-forest); }
.da-mprank__opt input:checked ~ .da-mprank__face .da-mprank__check svg { opacity: 1; }
.da-mprank__opt input:focus-visible ~ .da-mprank__face { box-shadow: var(--focus-ring); }

/* attestation (Petition step 5) */
.da-attest { border: 1px solid var(--maple-300); border-radius: var(--radius-lg); background: #FFFBFB; padding: var(--space-lg) var(--space-xl); }
.da-attest__seal { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-maple-dark); margin-bottom: var(--space-base); }
.da-attest__seal svg { width: 16px; height: 16px; }
.da-attest__text { font-size: var(--text-body-s); color: var(--color-charcoal); line-height: 1.6; }
.da-attest__text ol { margin: var(--space-md) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.da-attest__check { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--space-lg); padding-top: var(--space-base); border-top: 1px solid var(--maple-300); cursor: pointer; }
.da-attest__version { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-sage); margin-top: var(--space-md); }

/* handoff completion (Petition step 6) */
.da-handoff { text-align: center; }
.da-handoff__seal { width: 76px; height: 76px; border-radius: 50%; background: #E4F0E9; border: 1px solid #CFE4D7; display: flex; align-items: center; justify-content: center; color: var(--color-success); margin: 0 auto var(--space-lg); }
.da-handoff__seal svg { width: 38px; height: 38px; }
.da-handoff__steps { text-align: left; counter-reset: ho; display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.da-handoff__step { display: flex; gap: var(--space-base); }
.da-handoff__step::before { counter-increment: ho; content: counter(ho); flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-forest); color: #fff; font-size: var(--text-body-s); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; }
.da-handoff__stext { font-size: var(--text-body-s); color: var(--color-charcoal); line-height: 1.5; padding-top: 3px; }
.da-handoff__draft { text-align: left; background: var(--color-base); border: 1px solid var(--color-forest-pale); border-radius: var(--radius-md); padding: var(--space-base); margin-top: var(--space-base); font-size: var(--text-body-s); line-height: 1.6; max-height: 220px; overflow: auto; }
.da-handoff__draft p { margin: 0 0 var(--space-sm); }
.da-handoff__draft .prayer { font-weight: var(--weight-semibold); border-left: 3px solid var(--color-sage); padding-left: 12px; }

/* save/resume confirm chips */
.da-saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-success); }
.da-saved svg { width: 14px; height: 14px; }