/* ──────────────────────────────────────────────────────────────────────────
   GET INFORMED — Public UI Styles
   Created: May 17, 2026 (Day 4)
   Merged Day 11 (May 18, 2026): added the .gi-* namespace for the new
   home, shell, ZIP bar, primary cards, strips, and stubs.
   Design pass (May 18, 2026): restructured the home into a magazine-style
   masthead + cards + (subtle) ZIP + hero featured + more-featured grid +
   saved + browse-footer layout. All .inf-* styles unchanged.

   Uses existing Acta CSS vars (--ac, --pu, --tx, --mu, --b1, --b2, etc.).
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   THREE-PATH HOME CARDS (rendered by index.html, styled here)
   ────────────────────────────────────────────────────────────────────────── */

.three-paths {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.path-card.informed {
  border-color: var(--b1);
}
.path-card.informed:hover {
  border-color: rgba(16, 185, 129, .35);
}
.path-card.informed .path-time {
  color: #10b981;
}
@media (max-width: 768px) {
  .three-paths { grid-template-columns: 1fr 1fr; gap: 14px; }
  .three-paths .path-card.informed { grid-column: 1 / span 2; }
}
@media (max-width: 480px) {
  .three-paths { grid-template-columns: 1fr; gap: 12px; }
  .three-paths .path-card.informed { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CURATED BRIEF DETAIL PAGE — .inf-* (Day 4, unchanged)
   ══════════════════════════════════════════════════════════════════════════ */

.inf-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 60px;
}
.inf-back {
  background: none;
  border: none;
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.inf-back:hover { color: var(--tx); }

.inf-list-header { margin-bottom: 22px; text-align: center; }
.inf-h1 {
  font-family: var(--ss);
  font-size: 28px;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.inf-lead {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}

.inf-topic-card {
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 11px;
  padding: 18px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.inf-topic-card:hover {
  border-color: var(--ac);
  transform: translateY(-1px);
}
.inf-topic-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 6px;
}
.inf-topic-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.35;
  margin-bottom: 6px;
}
.inf-topic-summary {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.5;
  margin-bottom: 10px;
}
.inf-topic-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac);
}

.inf-loading {
  text-align: center;
  padding: 32px 0;
  font-size: 14px;
  color: var(--mu);
}

.inf-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inf-tab {
  background: var(--s2);
  border: 1.5px solid var(--b1);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.inf-tab:hover {
  border-color: var(--b2);
  color: var(--tx);
}
.inf-tab-active {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
}
.inf-tab-active:hover { color: #fff; }
.inf-tab-count {
  background: rgba(255,255,255,.18);
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.inf-tab:not(.inf-tab-active) .inf-tab-count {
  background: var(--s3);
  color: var(--mu);
}

.inf-topic-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.inf-topic-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.inf-topic-badge-proposition {
  background: rgba(27,79,255,.1);
  color: var(--ac);
}
.inf-topic-badge-state_bill, .inf-topic-badge-federal_bill {
  background: rgba(155,109,247,.1);
  color: #6c47ff;
}
.inf-topic-badge-candidate {
  background: rgba(16,185,129,.1);
  color: #0a7c52;
}
.inf-topic-card .inf-topic-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 0;
}

.inf-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--s2);
  border-radius: 11px;
  border: 1px dashed var(--b1);
  color: var(--mu);
  font-size: 14px;
  line-height: 1.6;
}
.inf-cta-btn {
  margin-top: 14px;
  background: var(--civic);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.inf-cta-btn:hover { opacity: .92; }

.inf-detail-actions-top {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 8px;
}
.inf-detail-header { margin-bottom: 20px; }
.inf-detail-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 8px;
}
.inf-detail-title {
  font-family: var(--ss);
  font-size: 24px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.inf-detail-lead {
  font-size: 15px;
  color: var(--mu);
  line-height: 1.55;
  margin: 0;
}

.inf-section {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 11px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.inf-section.inf-case-for { border-left: 3px solid #10b981; }
.inf-section.inf-case-against { border-left: 3px solid #d63f3f; }
.inf-section.inf-questions {
  background: linear-gradient(135deg, rgba(27,79,255,.04), rgba(155,109,247,.04));
  border-color: rgba(27,79,255,.18);
}
.inf-h3 {
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ac);
  margin: 0 0 14px;
}
.inf-h3-for { color: #10b981; }
.inf-h3-against { color: #d63f3f; }

.inf-overview {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.65;
  margin: 0 0 14px;
}

.inf-yn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.inf-yn-card { border-radius: 9px; padding: 12px 14px; }
.inf-yn-card.yes {
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .22);
}
.inf-yn-card.no {
  background: rgba(214, 63, 63, .08);
  border: 1px solid rgba(214, 63, 63, .22);
}
.inf-yn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.inf-yn-card.yes .inf-yn-label { color: #10b981; }
.inf-yn-card.no  .inf-yn-label { color: #d63f3f; }
.inf-yn-body {
  font-size: 13px;
  color: var(--tx);
  line-height: 1.55;
}
@media (max-width: 480px) {
  .inf-yn { grid-template-columns: 1fr; }
}

.inf-bullets {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--tx);
  line-height: 1.7;
}
.inf-bullets li { margin-bottom: 8px; }

.inf-prose {
  font-size: 14px;
  color: var(--tx);
  line-height: 1.7;
}
.inf-para { margin: 0 0 12px; }
.inf-para:last-child { margin-bottom: 0; }

.inf-fiscal {
  font-size: 14px;
  color: var(--tx);
  line-height: 1.65;
  margin: 0 0 14px;
}
.inf-stakeholders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.inf-stake-col {
  background: var(--s2);
  border-radius: 8px;
  padding: 12px 14px;
}
.inf-stake-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.inf-stake-yes { color: #10b981; }
.inf-stake-no { color: #d63f3f; }
.inf-stake-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--tx);
  line-height: 1.6;
}
.inf-stake-list li { margin-bottom: 3px; }
@media (max-width: 480px) {
  .inf-stakeholders { grid-template-columns: 1fr; }
}

sup.inf-cite {
  background: rgba(27, 79, 255, .12);
  color: var(--ac);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  margin-left: 1px;
  white-space: nowrap;
}
.inf-legend {
  font-size: 11px;
  color: var(--mu);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--b1);
  line-height: 1.6;
}
.inf-legend strong { color: var(--tx); }

.inf-trust {
  margin-top: 18px;
  background: var(--s2);
  border-radius: 11px;
  padding: 18px 20px;
  border: 1px solid var(--b1);
}
.inf-trust-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 8px;
}
.inf-trust-body {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
  margin: 0 0 14px;
}
.inf-trust-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.inf-concern-btn, .inf-share-btn {
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--ss);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  cursor: pointer;
}
.inf-share-btn {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
}
.inf-concern-btn:hover { border-color: var(--mu); }
.inf-share-btn:hover { opacity: .92; }

.inf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 38, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.inf-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  position: relative;
}
.inf-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--mu);
  cursor: pointer;
  padding: 4px 8px;
}
.inf-modal-title {
  font-family: var(--ss);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 6px;
}
.inf-modal-lead {
  font-size: 13px;
  color: var(--mu);
  margin: 0 0 14px;
  line-height: 1.5;
}
.inf-modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.inf-modal-options label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--tx);
  cursor: pointer;
  padding: 6px 0;
  line-height: 1.4;
}
.inf-modal-options input[type="radio"] { margin-top: 3px; }
#inf-concern-details {
  width: 100%;
  border: 1.5px solid var(--b1);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--ss);
  font-size: 13px;
  color: var(--tx);
  resize: vertical;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.inf-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.inf-modal-cancel, .inf-modal-submit {
  border-radius: 8px;
  padding: 9px 16px;
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.inf-modal-cancel { background: var(--s2); color: var(--tx); }
.inf-modal-submit { background: var(--ac); color: #fff; }
.inf-modal-submit:disabled { opacity: .6; cursor: not-allowed; }
.inf-modal-msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.inf-modal-msg-ok {
  background: rgba(16,185,129,.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.3);
}
.inf-modal-msg-err {
  background: rgba(214,63,63,.1);
  color: #d63f3f;
  border: 1px solid rgba(214,63,63,.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   GET INFORMED SHELL — .gi-* (Day 11, design-pass revision)
   ══════════════════════════════════════════════════════════════════════════ */

#get-informed-root {
  font-family: var(--ss);
  color: var(--tx);
  background: var(--bg);
  min-height: 100vh;
}
.gi-app {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px 80px;
}
.gi-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.gi-back,
.gi-home-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r1);
  transition: var(--t1);
}
.gi-back:hover,
.gi-home-link:hover {
  color: var(--ac);
  background: var(--s2);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.gi-masthead {
  margin: 20px 0 36px;
  max-width: 720px;
}
.gi-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 10px;
}
.gi-home-title {
  font-family: var(--sf);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--civic);
  margin: 0 0 16px;
}
@media (max-width: 720px) {
  .gi-home-title { font-size: 36px; }
}
.gi-home-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tx);
  margin: 0;
  max-width: 620px;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .gi-home-desc { font-size: 15px; }
}

/* Legacy class kept for backward compat — old code may still reference it */
.gi-home-lede { display: none; }

/* ── Primary cards ────────────────────────────────────────────────────── */

.gi-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .gi-cards { grid-template-columns: repeat(3, 1fr); }
}
.gi-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: var(--t2);
  min-height: 170px;
}
.gi-card:hover {
  border-color: var(--ac);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 32, 87, 0.06);
}
.gi-card-icon {
  font-size: 28px;
  line-height: 1;
}
.gi-card-title {
  font-family: var(--sf);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tx);
}
.gi-card-subtitle {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mu);
  flex: 1;
}
.gi-card-arrow {
  font-size: 18px;
  color: var(--ac);
  align-self: flex-end;
  margin-top: 4px;
}
.gi-card-ballot:hover { border-color: var(--ac); }
.gi-card-moving:hover { border-color: var(--pu); }
.gi-card-reps:hover   { border-color: var(--gr); }

/* ── ZIP — clearly visible card below the cards, quiet once entered ──── */

/* Pre-ZIP: a clean accent-bordered card that sits below the three primary
   cards. Visible without dominating. Solid (not dashed) border. The left
   stripe in accent color gives it a unmistakeable visual identity without
   competing with the methodology panel above. */
.gi-zipbar-empty {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-left: 3px solid var(--ac);
  border-radius: var(--r2);
  padding: 18px 22px;
  margin: 0 0 32px;
}
@media (max-width: 720px) {
  .gi-zipbar-empty { padding: 16px 18px; }
}
.gi-zipform-heading {
  font-family: var(--ss);
  font-size: 16px;
  font-weight: 600;
  color: var(--tx);
  margin: 0 0 4px;
  letter-spacing: -0.1px;
}
.gi-zipform-subtext {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 560px;
}
.gi-zipform {
  display: block;
}
.gi-zipform-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.gi-zipform-input {
  border: 1px solid var(--b2);
  border-radius: var(--r1);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--ss);
  width: 110px;
  background: var(--bg);
  color: var(--tx);
}
.gi-zipform-input:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(27, 79, 255, 0.14);
}
.gi-zipform-btn {
  background: var(--ac);
  color: #fff;
  border: 0;
  border-radius: var(--r1);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--ss);
}
.gi-zipform-btn:hover { background: var(--ac2); }

/* Post-ZIP: small confirmation strip. Quiet because the work is done. */
.gi-zipbar-known {
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: var(--r1);
  padding: 10px 16px;
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--mu);
}
.gi-zipbar-text strong {
  color: var(--tx);
  font-weight: 600;
}
.gi-zipbar-change {
  color: var(--ac);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
}
.gi-zipbar-change:hover { text-decoration: underline; }

/* ── Methodology panel ────────────────────────────────────────────────── */
/* The page's identity statement. Always rendered. Same editorial treatment
   as .gi-hero so that when a real featured brief appears below, methodology
   and hero stack as a coherent editorial section. */

.gi-method {
  background: linear-gradient(135deg, rgba(27,79,255,.045), rgba(155,109,247,.045));
  border: 1px solid rgba(27,79,255,.18);
  border-top: 3px solid var(--ac);
  border-radius: var(--r2);
  padding: 26px 30px 24px;
  margin: 0 0 36px;
}
@media (max-width: 720px) {
  .gi-method { padding: 22px 22px 20px; }
}
.gi-method-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 12px;
}
.gi-method-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tx);
  margin: 0 0 14px;
  max-width: 700px;
}
.gi-method-ctas {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.gi-method-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ac);
  text-decoration: none;
}
.gi-method-cta:hover { text-decoration: underline; }
.gi-method-cta-secondary {
  color: var(--mu);
}
.gi-method-cta-secondary:hover {
  color: var(--ac);
}

/* ── Hero featured ────────────────────────────────────────────────────── */

.gi-hero {
  background: linear-gradient(135deg, rgba(27,79,255,.045), rgba(155,109,247,.045));
  border: 1px solid rgba(27,79,255,.18);
  border-top: 3px solid var(--ac);
  border-radius: var(--r2);
  padding: 28px 32px 30px;
  margin: 0 0 36px;
}
@media (max-width: 720px) {
  .gi-hero { padding: 22px 22px 24px; }
}
.gi-hero-why {
  max-width: 660px;
}
.gi-hero-why-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 8px;
}
.gi-hero-why-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tx);
  font-style: italic;
  margin: 0;
}
.gi-hero-divider {
  border-top: 1px dashed rgba(27,79,255,.22);
  margin: 22px 0;
}
.gi-hero-content { max-width: 700px; }
.gi-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gi-hero-meta-sep { color: var(--b2); }
.gi-hero-date {
  font-size: 13px;
  color: var(--mu);
}
.gi-hero-title {
  font-family: var(--sf);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--tx);
  margin: 0 0 12px;
}
@media (max-width: 720px) {
  .gi-hero-title { font-size: 24px; }
}
.gi-hero-summary {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx);
  margin: 0 0 22px;
}
.gi-hero-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.gi-hero-cta-primary {
  display: inline-block;
  background: var(--ac);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: var(--r1);
  transition: var(--t1);
}
.gi-hero-cta-primary:hover {
  background: var(--ac2);
}

/* ── Strips (more-featured / saved) ───────────────────────────────────── */

.gi-strip { margin: 32px 0; }
.gi-strip-title {
  font-family: var(--sf);
  font-size: 22px;
  font-weight: 400;
  color: var(--tx);
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}
.gi-strip-count {
  font-size: 14px;
  color: var(--mu);
  font-family: var(--ss);
  font-weight: 400;
}
.gi-strip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .gi-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
.gi-feat-card {
  display: block;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: var(--t1);
}
.gi-feat-card:hover {
  border-color: var(--ac);
  background: var(--bg);
}
.gi-feat-badge {
  position: absolute;
  top: 12px;
  right: 14px;
}
.gi-feat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.35;
  margin-bottom: 6px;
  padding-right: 88px;
}
.gi-feat-date {
  font-size: 12px;
  color: var(--di);
  margin-bottom: 6px;
}
.gi-feat-summary {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.55;
}

.gi-saved-strip {
  background: var(--s2);
  border-radius: var(--r2);
  padding: 18px 20px 16px;
  margin: 28px 0;
}
.gi-saved-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.gi-saved-pill {
  font-size: 12px;
  color: var(--mu);
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 12px;
  padding: 4px 10px;
}
.gi-strip-more {
  font-size: 13px;
  font-weight: 500;
  color: var(--ac);
  text-decoration: none;
}
.gi-strip-more:hover { text-decoration: underline; }

/* ── Browse + methodology footer ──────────────────────────────────────── */

.gi-footer {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gi-browse {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 720px) {
  .gi-browse { flex-direction: row; gap: 28px; flex-wrap: wrap; }
}
.gi-browse-link {
  font-size: 13px;
  color: var(--mu);
  text-decoration: none;
  font-weight: 500;
  transition: var(--t1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gi-browse-link:hover { color: var(--ac); }
.gi-browse-soon {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--di);
  border: 1px solid var(--b1);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  background: var(--s2);
}
.gi-methodology {
  font-size: 12px;
  color: var(--mu);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}
.gi-methodology:hover {
  color: var(--ac);
  text-decoration: underline;
}

/* ── Stubs ────────────────────────────────────────────────────────────── */

.gi-stub {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  padding: 28px 28px 24px;
  margin: 8px 0 40px;
}
.gi-stub-title {
  font-family: var(--sf);
  font-size: 28px;
  font-weight: 400;
  color: var(--tx);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.gi-stub-meta {
  font-size: 12px;
  color: var(--di);
  margin: 0 0 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.gi-stub-text {
  font-size: 15px;
  color: var(--mu);
  line-height: 1.7;
  margin: 0 0 20px;
  max-width: 620px;
}
.gi-stub-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ac);
  text-decoration: none;
  padding: 6px 0;
}
.gi-stub-back:hover { text-decoration: underline; }

/* ── Loading ──────────────────────────────────────────────────────────── */

.gi-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--mu);
}
.gi-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--b1);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: gi-spin 0.9s linear infinite;
  margin-bottom: 16px;
}
.gi-loading-text {
  font-size: 14px;
  color: var(--mu);
}
@keyframes gi-spin {
  to { transform: rotate(360deg); }
}

/* ── Save toggle (star) ───────────────────────────────────────────────── */

.gi-save-btn {
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: var(--r1);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--mu);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--t1);
  font-family: var(--ss);
  font-weight: 500;
}
.gi-save-btn:hover {
  border-color: var(--ac);
  color: var(--ac);
}
.gi-save-btn.is-saved {
  background: rgba(27, 79, 255, 0.06);
  border-color: var(--ac);
  color: var(--ac);
}
.gi-save-btn:disabled {
  opacity: .6;
  cursor: wait;
}
.gi-save-btn .gi-save-icon {
  font-size: 16px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH SECTION  (May 20 2026 — search-first home redesign)

   The search-first home replaces the prior 3-card primary navigation with
   a search input as the primary action and demotes the cards to a secondary
   "Or browse by location" section.

   Architectural intent: Acta's product personality is "type what you mean,
   AI handles it" (Take Action, Speak Up). Get Informed now matches that
   verb on its home — type any bill, measure, candidate, topic, or state,
   and Acta returns either the brief or an honest empty-state with email
   capture.

   Class namespace: .gi-search-*
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section container (home) ─────────────────────────────────────────── */

.gi-search-section {
  margin: 0 0 28px;
}
.gi-search-form {
  display: block;
}
.gi-search-label {
  /* Visually hidden but present for screen readers. The input's placeholder
     is the visible affordance. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gi-search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* ── The input itself — large, generous, Acta-personality ─────────────── */

.gi-search-input {
  flex: 1;
  min-width: 0;
  font-family: var(--ss);
  font-size: 18px;
  font-weight: 400;
  color: var(--tx);
  background: #fff;
  border: 2px solid var(--civic);
  border-radius: var(--r2);
  padding: 19px 20px;
  box-shadow: 0 2px 10px rgba(15,32,87,.06);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
  /* iOS Safari sometimes auto-rounds inputs; this keeps our shape. */
}
.gi-search-input:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 4px rgba(27,79,255,.12), 0 2px 10px rgba(15,32,87,.08);
}
.gi-search-input::placeholder { color: var(--mu); opacity: 1; }
.gi-search-input::placeholder {
  color: var(--mu);
  opacity: .85;
}
.gi-search-input:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 4px rgba(27, 79, 255, .12);
}
@media (max-width: 540px) {
  .gi-search-input { font-size: 16px; padding: 14px 14px; }
}

/* ── Submit button — accent-colored, prominent ────────────────────────── */

.gi-search-button {
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: var(--r2);
  padding: 0 28px;
  font-family: var(--ss);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(27,79,255,.18);
}
.gi-search-button:hover { background: var(--ac2, #1947d4); }
.gi-search-button:focus { outline: 3px solid rgba(27, 79, 255, .35); outline-offset: 2px; }
@media (max-width: 540px) {
  .gi-search-button { padding: 0 16px; font-size: 14px; }
}

/* ── Help text below the input ────────────────────────────────────────── */

.gi-search-helptext {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mu);
}

/* ── Example chips — clickable hints ──────────────────────────────────── */

.gi-search-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.gi-search-hint-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mu);
  margin-right: 2px;
}
.gi-search-chip {
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--ss);
  font-size: 12.5px;
  color: var(--tx);
  cursor: pointer;
  transition: all .15s;
  -webkit-appearance: none;
  appearance: none;
}
.gi-search-chip:hover {
  border-color: var(--ac);
  color: var(--ac);
  background: rgba(27, 79, 255, .04);
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.gi-search-header {
  margin: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gi-search-form-inline {
  margin: 0;
}
.gi-search-input-inline {
  /* Slightly smaller than home, since the user is in a search context. */
  font-size: 16px;
  padding: 12px 16px;
}
.gi-search-back {
  align-self: flex-start;
  font-family: var(--ss);
  font-size: 13px;
  color: var(--mu);
  text-decoration: none;
  padding: 6px 0;
}
.gi-search-back:hover { color: var(--ac); }

.gi-search-results {
  margin-top: 4px;
}
.gi-search-result-count {
  font-family: var(--ss);
  font-size: 13px;
  color: var(--mu);
  margin: 0 0 18px;
}

/* ── Result groups (Topics / Measures / Bills / Candidates) ──────────── */

.gi-search-group {
  margin-bottom: 32px;
}
.gi-search-group-title {
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ac);
  margin: 0 0 12px;
}
.gi-search-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Individual result card ──────────────────────────────────────────── */

.gi-search-card {
  display: block;
  padding: 16px 18px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  text-decoration: none;
  color: inherit;
  transition: all .15s;
}
.gi-search-card:hover {
  border-color: var(--ac);
  background: rgba(27, 79, 255, .02);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 32, 87, .05);
}
.gi-search-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 6px;
}
.gi-search-card-title {
  font-family: var(--sf);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tx);
  margin: 0 0 6px;
}
.gi-search-card-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tx);
  margin-bottom: 6px;
}
.gi-search-card-meta {
  font-size: 12px;
  color: var(--mu);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE — the most important screen in the product right now.

   When search returns zero matches (which is most searches today given the
   sparse database), this carries the product story: "we're building toward
   universal coverage; tell us your email and we'll notify you when this
   brief is published". The empty state IS the lead-capture machine that
   drives editorial prioritization for what to publish next.
   ══════════════════════════════════════════════════════════════════════════ */

.gi-search-empty {
  background: linear-gradient(135deg, rgba(27,79,255,.045), rgba(155,109,247,.045));
  border: 1px solid rgba(27,79,255,.18);
  border-top: 3px solid var(--ac);
  border-radius: var(--r2);
  padding: 32px 32px 28px;
  margin: 4px 0 32px;
}
@media (max-width: 540px) {
  .gi-search-empty { padding: 24px 22px 22px; }
}
.gi-search-empty-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 12px;
}
.gi-search-empty-title {
  font-family: var(--sf);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--civic);
  margin: 0 0 14px;
}
@media (max-width: 540px) {
  .gi-search-empty-title { font-size: 22px; }
}
.gi-search-empty-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--tx);
  margin: 0 0 14px;
  max-width: 620px;
}

/* ── Email capture form inside empty state ───────────────────────────── */

.gi-search-empty-form {
  margin: 20px 0 8px;
}
.gi-search-empty-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 480px;
}
/* May 23, 2026 — mobile-tester fix: on very narrow phones the input padding +
   button could push a few px past the card's right edge. Border-box sizing
   stops the overflow; wrapping the row keeps both controls fully on-screen. */
.gi-search-empty-input,
.gi-search-empty-button { box-sizing: border-box; }
@media (max-width: 420px) {
  .gi-search-empty-row { flex-wrap: wrap; }
  .gi-search-empty-input { flex: 1 1 100%; }
  .gi-search-empty-button { flex: 1 1 100%; padding: 11px 18px; }
}
.gi-search-empty-input {
  flex: 1;
  min-width: 0;
  font-family: var(--ss);
  font-size: 15px;
  color: var(--tx);
  background: #fff;
  border: 1.5px solid var(--b2);
  border-radius: var(--r1);
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
}
.gi-search-empty-input::placeholder { color: var(--mu); }
.gi-search-empty-input:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(27, 79, 255, .12);
}
.gi-search-empty-button {
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: var(--r1);
  padding: 0 18px;
  font-family: var(--ss);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.gi-search-empty-button:hover { background: var(--ac2, #1947d4); }
.gi-search-empty-button:disabled { opacity: .6; cursor: wait; }
.gi-search-empty-privacy {
  font-size: 12px;
  color: var(--mu);
  margin: 10px 0 0;
  line-height: 1.5;
}
.gi-search-empty-privacy a {
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Divider + alt suggestion ────────────────────────────────────────── */

.gi-search-empty-divider {
  height: 1px;
  background: rgba(27, 79, 255, .14);
  margin: 22px 0 16px;
}
.gi-search-empty-alt {
  font-size: 13px;
  color: var(--mu);
  margin: 0;
  line-height: 1.55;
}
/* Sourcing-integrity line: a quiet, confident standards statement set off from
   the rest. Reframes an empty result as evidence of standards, not thinness. */
.gi-search-empty-standard {
  font-size: 12.5px;
  color: var(--mu);
  line-height: 1.55;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--b1);
  font-style: italic;
}

/* ── Success state (replaces form after email submit) ────────────────── */

.gi-search-empty-success {
  /* Sits inside the empty-state container, so we don't repeat the background
     gradient — just inherit padding and let the success message be honest. */
}
.gi-search-empty-success .gi-search-empty-title {
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   "OR BROWSE BY LOCATION" — demoted secondary navigation

   The 3 cards (ballot, moving, reps) are still functional and useful, but
   they're now a secondary path under the search input. Headlined honestly:
   they're all ZIP-driven, so "browse by location" names what they actually do.
   ══════════════════════════════════════════════════════════════════════════ */

.gi-browse-by-location {
  margin: 28px 0 32px;
}
.gi-section-heading {
  margin-bottom: 14px;
}
.gi-section-title {
  font-family: var(--ss);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin: 0 0 6px;
}
.gi-section-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mu);
  margin: 0;
}
.gi-section-changezip {
  color: var(--ac);
  text-decoration: none;
  font-weight: 500;
}
.gi-section-changezip:hover { text-decoration: underline; }

/* Within the "browse by location" section, slightly tighten the card
   visual so the search input feels primary. The cards still work and look
   the same — just less prominent visual weight via container spacing. */
.gi-browse-by-location .gi-cards {
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ERROR STATE on results page
   ══════════════════════════════════════════════════════════════════════════ */

.gi-search-error {
  padding: 28px 0;
  text-align: center;
}
.gi-search-error .inf-h1 {
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Get Informed — bill page, structured brief, and Take Action footer
   Added May 22 2026. These classes were referenced by the renderer but had no
   styles, which is why the bill page read as flat and the Take Action footer
   rendered as a run-on of plain links. Uses the existing design tokens.
   ════════════════════════════════════════════════════════════════════════════ */

/* Eyebrow above the bill/measure title (jurisdiction · bill number) */
.gi-measure-eyebrow {
  font-family: var(--ss);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 8px;
}

/* Status / meta bullet list (status, last action, sponsor, cosponsors) */
.gi-rep-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.gi-rep-meta-list li {
  font-size: 14px;
  color: var(--tx);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.gi-rep-meta-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ac);
}

/* Structured brief: key-provisions list */
.gi-brief-provisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.gi-brief-provisions li {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}
.gi-brief-provisions li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ac);
}
.gi-brief-attribution { margin: 2px 0 18px; }
.gi-brief-cta .inf-overview { color: var(--mu); }
.gi-generating { color: var(--mu); font-style: italic; }

/* Attribution + source links */
.gi-attribution {
  font-size: 12px;
  color: var(--mu);
  margin: 8px 0 0;
}
.gi-source-link { font-size: 14px; margin: 6px 0 0; }
.gi-source-link a,
.gi-attribution a { color: var(--ac); text-decoration: none; }
.gi-source-link a:hover,
.gi-attribution a:hover { text-decoration: underline; }

/* Sources & attribution block at the foot of a brief */
.gi-sources {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--b1);
}
.gi-sources-title {
  font-family: var(--ss);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mu);
  margin: 0 0 10px;
}
.gi-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.gi-sources-list li { font-size: 13px; color: var(--mu); line-height: 1.5; }
.gi-sources-list a { color: var(--ac); text-decoration: none; }
.gi-sources-list a:hover { text-decoration: underline; }

/* ── Take Action footer ───────────────────────────────────────────────────── */
.gi-action-footer {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--b1);
  display: grid;
  gap: 12px;
}
.gi-action-footer-title {
  font-family: var(--ss);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 2px;
  letter-spacing: -.01em;
}
.gi-action-primary,
.gi-action-secondary {
  display: block;
  text-decoration: none;
  border-radius: 11px;
  padding: 15px 18px;
  transition: transform .08s ease, box-shadow .15s ease;
}
.gi-action-primary { background: var(--civic); border: 1px solid var(--civic); }
.gi-action-primary .gi-action-line1 { color: #fff; }
.gi-action-primary .gi-action-line2 { color: rgba(255,255,255,.72); }
.gi-action-secondary { background: var(--s1); border: 1px solid var(--b1); }
.gi-action-secondary .gi-action-line1 { color: var(--tx); }
.gi-action-secondary .gi-action-line2 { color: var(--mu); }
.gi-action-primary:hover,
.gi-action-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 32, 87, .10);
}
.gi-action-line1 {
  display: block;
  font-family: var(--ss);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.gi-action-line2 {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
  margin-top: 3px;
}
.gi-action-tertiary {
  justify-self: start;
  background: none;
  border: none;
  color: var(--ac);
  font-family: var(--ss);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 2px;
  cursor: pointer;
}
.gi-action-tertiary:hover { text-decoration: underline; }
.gi-action-footer-simple { gap: 10px; }

/* Subtle non-blocking "narrow your search" hint on busy result pages */
.gi-search-refine { margin-top: 2px; }