/* ==========================================================================
   LagoonFacts Vote Release v0.2A
   Neutral civic-information styling for /vote and homepage vote module.
   Palette: existing site tokens only (teals, muted grays, off-white, dark ink).
   No red/blue partisan coding. Status badges differentiated by color + pattern.
   ========================================================================== */

/* ---- Shared civic tokens (fallbacks if style.css vars are absent) ---- */
.v02a {
  --v02a-ink: var(--ink, #12222a);
  --v02a-ink-muted: var(--ink-muted, #47606a);
  --v02a-line: var(--line, #cec9bd);
  --v02a-surface: #fbf9f3;
  --v02a-surface-alt: #eef2ef;
  --v02a-teal: var(--water-teal, #155e6a);
  --v02a-teal-deep: var(--water-deep, #0a3d4a);
  --v02a-gray: #5b6a6e;
  --v02a-gray-surface: #eceeee;
}

/* ---- Last reviewed timestamp ---- */
.v02a-lastreviewed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--v02a-ink-muted);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--v02a-line);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.v02a-lastreviewed::before {
  content: "\1F550"; /* clock */
  font-size: 0.85em;
}
.hero .v02a-lastreviewed { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.9); }

/* ---- Status badges (v0.2A §6) ----
   Each badge: distinct background + distinct border-style/pattern + text label,
   so meaning is never color-only. */
.status-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px 3px 9px;
  border-radius: 5px;
  line-height: 1.6;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.status-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* VERIFIED — green, solid border */
.status-label--verified {
  background: #e4f3e6;
  color: #1e5c2c;
  border-style: solid;
  border-color: #2e7d3d;
}
.status-label--verified::before { background: #2e7d3d; }

/* MEASURED — dark green, double border (distinct from VERIFIED) */
.status-label--measured {
  background: #dcefe0;
  color: #16401f;
  border-style: double;
  border-width: 4px;
  border-color: #1c522a;
}
.status-label--measured::before { background: #1c522a; border-radius: 50%; }

/* ESTIMATE — amber, dashed border */
.status-label--estimate {
  background: #fdf1d9;
  color: #7a5300;
  border-style: dashed;
  border-color: #b9821c;
}
.status-label--estimate::before { background: #b9821c; transform: rotate(45deg); }

/* MODELED — blue, dotted border */
.status-label--modeled {
  background: #e1eef7;
  color: #1c4c73;
  border-style: dotted;
  border-width: 2px;
  border-color: #2f6ea8;
}
.status-label--modeled::before { background: #2f6ea8; border-radius: 0; }

/* HOLD — VERIFY — red-orange, diagonal-stripe pattern (color + pattern, not color alone) */
.status-label--hold {
  background-color: #fbe3d8;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(180, 74, 30, 0.22) 0px,
    rgba(180, 74, 30, 0.22) 4px,
    transparent 4px,
    transparent 9px
  );
  color: #7a2e0d;
  border-style: solid;
  border-width: 2px;
  border-color: #b4491e;
  font-weight: 800;
}
.status-label--hold::before {
  background: repeating-linear-gradient(45deg, #b4491e 0, #b4491e 2px, transparent 2px, transparent 4px);
  border-radius: 0;
}

/* ---- Hero (§5.1) ---- */
.v02a-hero {
  background: linear-gradient(160deg, var(--v02a-teal-deep) 0%, #0d4a58 60%, var(--v02a-teal) 130%);
  color: #fff;
  padding: 64px 0 56px;
}
.v02a-hero .eyebrow { color: var(--water-turquoise, #6cc7ce); }
.v02a-hero__title {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-2xl, clamp(2rem,3.5vw,3rem));
  line-height: 1.15;
  margin: 10px 0 20px;
  max-width: 22ch;
  color: #fff;
}
.v02a-hero__intro {
  font-size: var(--text-lg, 1.25rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-width: 68ch;
  margin-bottom: 28px;
}
.v02a-hero .btn--primary {
  background: var(--water-turquoise, #6cc7ce);
  color: var(--v02a-teal-deep);
}
.v02a-hero .btn--primary:hover { background: #fff; color: var(--v02a-teal-deep); }

/* ---- Section shell ---- */
.v02a-section { padding: 56px 0; }
.v02a-section--alt { background: var(--v02a-surface-alt); }
.v02a-section__heading {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-2xl, clamp(2rem,3.5vw,3rem));
  color: var(--v02a-teal-deep);
  margin: 6px 0 16px;
}
.v02a-section__intro {
  font-size: var(--text-lg, 1.15rem);
  line-height: 1.6;
  color: var(--v02a-ink);
  max-width: 72ch;
  margin-bottom: 28px;
}

/* ---- Ballot at a glance (§5.2) ---- */
.v02a-glance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.v02a-glance-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-left: 4px solid var(--v02a-teal);
  border-radius: 6px;
  padding: 14px 18px;
}
.v02a-glance-item p { margin: 0; color: var(--v02a-ink); line-height: 1.55; flex: 1 1 260px; }

/* ---- YES / NO comparison (§5.3) — neutral civic palette, equal weight ---- */
.v02a-yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .v02a-yesno { grid-template-columns: 1fr; }
}
.v02a-yesno__col {
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v02a-yesno__head {
  padding: 18px 22px;
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
}
.v02a-yesno__col--yes .v02a-yesno__head {
  background: var(--v02a-teal);
  color: #fff;
}
.v02a-yesno__col--no .v02a-yesno__head {
  background: var(--v02a-gray-surface);
  color: var(--v02a-ink);
}
.v02a-yesno__body {
  padding: 20px 22px 26px;
  line-height: 1.6;
  color: var(--v02a-ink);
  flex: 1;
}
.v02a-yesno__body strong { color: var(--v02a-teal-deep); }
.v02a-yesno__col--no .v02a-yesno__body strong { color: var(--v02a-ink); }

/* ---- Measurement ladder (§5.5) ---- */
.v02a-ladder {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-radius: 8px;
  overflow: hidden;
}
.v02a-ladder caption { text-align: left; padding: 0 0 12px; font-size: 0.9rem; color: var(--v02a-ink-muted); }
.v02a-ladder__intro {
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--v02a-ink-muted);
  max-width: 65ch;
}
.v02a-ladder th, .v02a-ladder td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v02a-line);
  vertical-align: top;
  font-size: 0.96rem;
  line-height: 1.5;
}
.v02a-ladder thead th {
  background: var(--v02a-teal-deep);
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.v02a-ladder tbody tr:nth-child(even) { background: var(--v02a-surface); }
.v02a-ladder tbody th { color: var(--v02a-teal-deep); font-weight: 700; white-space: nowrap; }
.v02a-ladder tbody tr:last-child td, .v02a-ladder tbody tr:last-child th { border-bottom: none; }

/* Mobile: convert ladder table to stacked cards to avoid horizontal scrolling */
@media (max-width: 640px) {
  .v02a-ladder thead { display: none; }
  .v02a-ladder, .v02a-ladder tbody, .v02a-ladder tr, .v02a-ladder td, .v02a-ladder th { display: block; width: 100%; box-sizing: border-box; }
  .v02a-ladder caption {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--v02a-ink-muted);
    caption-side: top;
  }
  .v02a-ladder tr { border-bottom: 2px solid var(--v02a-line); padding: 12px 0; }
  .v02a-ladder tbody th { padding: 14px 16px 4px; }
  .v02a-ladder td { border-bottom: none; padding: 6px 16px; }
  .v02a-ladder td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v02a-ink-muted);
    margin-bottom: 2px;
  }
}

/* ---- Accountability commitments (§5.6) ---- */
.v02a-commitments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.v02a-commitments li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-radius: 8px;
  padding: 14px 18px;
  line-height: 1.55;
  color: var(--v02a-ink);
}
.v02a-commitments li::before {
  content: "\2713";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--v02a-teal);
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---- Hard Questions accordion (§5.7) ---- */
.v02a-faq { display: grid; gap: 12px; }
.v02a-faq details {
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-radius: 8px;
  padding: 4px 0;
}
.v02a-faq summary {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--v02a-teal-deep);
  cursor: pointer;
  padding: 16px 20px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.v02a-faq summary::-webkit-details-marker { display: none; }
.v02a-faq summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--v02a-teal);
  flex-shrink: 0;
}
.v02a-faq details[open] summary::after { content: '\2212'; }
.v02a-faq .v02a-faq__answer {
  padding: 0 20px 18px;
  line-height: 1.6;
  color: var(--v02a-ink);
}

/* ---- Closing CTA (§5.8) ---- */
.v02a-closing {
  background: var(--v02a-teal-deep);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.v02a-closing h2 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-2xl, clamp(2rem,3.5vw,3rem));
  margin-bottom: 16px;
}
.v02a-closing p {
  max-width: 62ch;
  margin: 0 auto 26px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}
.v02a-closing .btn--primary {
  background: var(--water-turquoise, #6cc7ce);
  color: var(--v02a-teal-deep);
}
.v02a-closing .btn--primary:hover { background: #fff; }

/* ---- Evidence-card shell (v0.2B fills in data) ---- */
.v02a-evidence-card {
  background: #fff;
  border: 1px solid var(--v02a-line);
  border-radius: 10px;
  padding: 22px 24px;
  display: grid;
  gap: 10px;
}
.v02a-evidence-card__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--v02a-line);
  font-size: 0.95rem;
  line-height: 1.5;
}
.v02a-evidence-card__row:last-child { border-bottom: none; }
.v02a-evidence-card__row dt {
  font-weight: 700;
  color: var(--v02a-teal-deep);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.v02a-evidence-card__row dd { margin: 0; color: var(--v02a-ink); }
@media (max-width: 640px) {
  .v02a-evidence-card__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Homepage vote module (§4) ---- */
.v02a-homemodule {
  background: var(--v02a-surface-alt);
  border-top: 1px solid var(--v02a-line);
  border-bottom: 1px solid var(--v02a-line);
  padding: 56px 0;
}
.v02a-homemodule__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v02a-teal-deep);
  margin-bottom: 10px;
}
.v02a-homemodule h2 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--text-2xl, clamp(2rem,3.5vw,3rem));
  color: var(--v02a-teal-deep);
  margin: 0 0 16px;
  max-width: 26ch;
}
.v02a-homemodule p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--v02a-ink);
  max-width: 70ch;
  margin: 0 0 24px;
}
.v02a-homemodule__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.v02a-homemodule .btn--primary { background: var(--v02a-teal); color: #fff; }
.v02a-homemodule .btn--primary:hover { background: var(--v02a-teal-deep); }
.v02a-homemodule .btn--secondary {
  border: 1.5px solid var(--v02a-teal-deep);
  color: var(--v02a-teal-deep);
  background: transparent;
}
.v02a-homemodule .btn--secondary:hover { background: var(--v02a-teal-deep); color: #fff; }

/* Ensure focus states remain visible on all new interactive elements */
.v02a-faq summary:focus-visible,
.v02a a:focus-visible,
.v02a button:focus-visible {
  outline: 3px solid var(--v02a-teal-deep);
  outline-offset: 2px;
}