/* ==========================================================================
   propertyexemption.com — HJR 1F voter-education microsite
   Token system: system-sans only, accent #3b82f6, dark surfaces.
   ========================================================================== */

:root {
  /* ---- Color tokens (locked) ---- */
  --color-primary:        #1e3a5f;
  --color-primary-light:  #2d5a87;
  --color-primary-dark:   #152c47;
  --color-accent:         #3b82f6;
  --color-accent-hover:   #2563eb;

  --color-bg:             #ffffff;
  --color-bg-alt:         #f8fafc;
  --color-bg-dark:        #0f172a;
  --color-bg-dark-lighter:#1e293b;
  --color-surface:        #ffffff;
  --color-border:         #e2e8f0;
  --color-border-light:   #f1f5f9;

  --color-text:           #1e293b;
  --color-text-secondary: #64748b;
  --color-text-tertiary:  #94a3b8;
  --color-text-inverse:   #ffffff;

  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;

  /* ---- Type ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:  0.75rem;  --text-sm:  0.875rem; --text-base:1rem;   --text-lg: 1.125rem;
  --text-xl:  1.25rem;  --text-2xl: 1.5rem;   --text-3xl:1.875rem;--text-4xl:2.25rem; --text-5xl: 3rem;

  --font-normal:400; --font-medium:500; --font-semibold:600; --font-bold:700; --font-extrabold:800;

  /* ---- Spacing ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px;
  --max-width:1200px; --max-width-narrow:800px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.10);
  --shadow-pop: 0 12px 36px rgba(15,23,42,0.18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { margin: 0; font-weight: var(--font-bold); line-height: 1.2; color: var(--color-primary); letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- layout ---- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.wrap--narrow { max-width: var(--max-width-narrow); }
.section { padding: var(--space-24) 0; }
.section--sm { padding: var(--space-16) 0; }
.section--alt { background: var(--color-bg-alt); }
.section--alt, .section { border-top: 1px solid var(--color-border-light); }

.kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.kicker::before { content:""; width: 18px; height: 2px; background: var(--color-accent); border-radius: 2px; }
.section-title { font-size: var(--text-4xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-4); }
.section-lede { font-size: var(--text-xl); color: var(--color-text-secondary); max-width: 60ch; line-height: 1.55; }

/* ---- buttons ---- */
.btn {
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold);
  line-height: 1; border: 1.5px solid transparent; border-radius: var(--radius-md);
  padding: 0 var(--space-6); min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-hover); color:#fff; }
.btn-primary:active { background: var(--color-accent-hover); transform: translateY(1px); }
.btn-solid { background: var(--color-primary); color: #fff; }
.btn-solid:hover { background: var(--color-primary-light); color:#fff; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-bg-alt); }
.btn-on-dark { background: rgba(255,255,255,0.08); color:#fff; border-color: rgba(255,255,255,0.18); }
.btn-on-dark:hover { background: rgba(255,255,255,0.16); color:#fff; }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: var(--text-lg); padding: 0 var(--space-8); }

:focus-visible { outline: 3px solid rgba(59,130,246,0.5); outline-offset: 2px; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-weight: var(--font-extrabold); font-size: var(--text-lg);
  position: relative;
}
.brand__mark::after { content:""; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%; background: var(--color-accent); border:2px solid #fff; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-primary); letter-spacing: -0.01em; }
.brand__sub { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-accent); letter-spacing: 0.04em; }
.nav__links { display: flex; align-items: center; gap: var(--space-6); }
.nav__links a { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary); }
.nav__links a:hover { color: var(--color-primary); }
.nav .btn { min-height: 42px; font-size: var(--text-sm); padding: 0 var(--space-5); }
.nav__updated { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ==========================================================================
   HERO (dark surface)
   ========================================================================== */
.hero {
  background:
    radial-gradient(110% 80% at 80% -10%, rgba(59,130,246,0.18), rgba(59,130,246,0) 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(45,90,135,0.30), rgba(45,90,135,0) 50%),
    var(--color-bg-dark);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%);
  pointer-events: none;
}
.hero__inner { position: relative; padding: var(--space-20) 0 var(--space-24); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.04em;
  color: #bfdbfe; background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.32);
  border-radius: 100px; padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(59,130,246,0.25); animation: pe-ring-pulse 2.6s ease-in-out infinite; }
@keyframes pe-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(59,130,246,0.28); }
  50%      { box-shadow: 0 0 0 9px rgba(59,130,246,0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge .dot, .tl-node.is-final .tl-dot { animation: none !important; }
}
.hero h1 { color: #fff; font-size: var(--text-5xl); font-weight: var(--font-extrabold); line-height: 1.12; margin-bottom: var(--space-5); }
.hero h1 .hl { color: #7dabfb; }
.hero__sub { font-size: var(--text-xl); color: #cbd5e1; line-height: 1.55; max-width: 46ch; margin-bottom: var(--space-8); }

.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.hero__trust span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: #94a3b8; }
.hero__trust svg { color: var(--color-success); width: 16px; height: 16px; }

/* hero card (address entry / impact) */
.hero-card {
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.hero-card__head { padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.hero-card__eyebrow { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing:0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.hero-card__title { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-primary); }
.hero-card__body { padding: var(--space-6); }

/* address search */
.addr-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); display:block; }
.search { position: relative; }
.search__field { position: relative; }
.search__icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; }
.search input[type="text"] {
  width: 100%; height: 56px; font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0 var(--space-4) 0 var(--space-12);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.search input::placeholder { color: var(--color-text-tertiary); }
.search input:focus { outline: none; border-color: var(--color-accent); background:#fff; box-shadow: 0 0 0 4px rgba(59,130,246,0.14); }
.search .btn { margin-top: var(--space-3); }

.autocomplete {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow: hidden; z-index: 30; display: none; text-align: left;
}
.autocomplete.open { display: block; }
.ac-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--color-border-light); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.active { background: #eff6ff; }
.ac-item__pin { color: var(--color-accent); flex-shrink: 0; }
.ac-item__addr { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
.ac-item__meta { font-size: var(--text-xs); color: var(--color-text-secondary); }
.ac-foot { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-bg-alt); display:flex; align-items:center; gap: var(--space-2); }

/* mini impact (inside hero card, populated) */
.hero-card.is-populated .hero-card__title { font-size: var(--text-lg); }
.mini-impact { display: none; }
.hero-card.is-populated .mini-impact { display: block; }
.hero-card.is-populated .search-block { display: none; }
.mini-addr { display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.mini-addr strong { color: var(--color-text); font-weight: var(--font-semibold); }
.mini-addr .edit { margin-left: auto; color: var(--color-accent); font-weight: var(--font-semibold); cursor: pointer; font-size: var(--text-sm); background:none; border:0; }
.mini-rows { display: grid; gap: var(--space-2); }
.mini-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-alt); border: 1px solid var(--color-border-light); }
.mini-row.is-now { background: #fff; }
.mini-row__yr { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
.mini-row__yr small { display:block; font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--color-text-tertiary); }
.mini-row__amt { font-family: var(--font-mono); font-weight: var(--font-semibold); font-size: var(--text-lg); color: var(--color-text); }
.mini-row__save { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-success); min-width: 64px; text-align: right; }
.mini-row.is-now .mini-row__save { color: var(--color-text-tertiary); }
.mini-impact__cta { margin-top: var(--space-5); }
.mini-impact__note { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-3); line-height: 1.5; }

/* ==========================================================================
   CENTERED HERO (chosen direction)
   ========================================================================== */
.hero--center .hero__inner { text-align: center; }
.hero--center .center-col { max-width: 880px; margin: 0 auto; }
.hero--center .hero__sub { margin-left: auto; margin-right: auto; margin-bottom: 0; }
.hero--center .hero__trust { justify-content: center; margin-top: var(--space-6); }
.hero--center h1 { margin-left: auto; margin-right: auto; }

/* pill search bar */
.searchpill {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  background: #fff; border-radius: 100px;
  padding: 8px 8px 8px 22px; box-shadow: var(--shadow-pop);
  max-width: 560px; margin: var(--space-8) auto 0; text-align: left;
}
.searchpill .si { color: var(--color-text-tertiary); display: flex; flex-shrink: 0; }
.searchpill input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: var(--text-base); height: 48px; color: var(--color-text); }
.searchpill input::placeholder { color: var(--color-text-tertiary); }
.searchpill .btn { border-radius: 100px; min-height: 48px; flex-shrink: 0; }
.searchpill.is-error { box-shadow: 0 0 0 3px rgba(239,68,68,0.45), var(--shadow-pop); }
.searchpill .autocomplete { top: calc(100% + 10px); }

/* populated result panel (centered) */
#hero-card .mini-impact { display: none; }
#hero-card.is-populated .search-block { display: none; }
#hero-card.is-populated .mini-impact { display: block; }
.hero-result {
  background: #fff; color: var(--color-text);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  padding: var(--space-6); max-width: 560px; margin: var(--space-8) auto 0; text-align: left;
}

/* at-a-glance facts bar */
.facts { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.facts__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { padding: var(--space-6) var(--space-8); text-align: center; border-left: 1px solid var(--color-border-light); }
.fact:first-child { border-left: 0; }
.fact__val { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.1; }
.fact__val .fact__sep { color: var(--color-border); font-weight: var(--font-normal); margin: 0 2px; }
.fact__lbl { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); line-height: 1.4; }

/* ==========================================================================
   FULL IMPACT SECTION (mirrors hero populated, expanded)
   ========================================================================== */
#impact { display: none; }
#impact.revealed { display: block; }
.impact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-10); }
.icard {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-6) var(--space-8); display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.icard--now { background: var(--color-surface); }
.icard--y27 { background: var(--color-bg-alt); }
.icard--y28 { background: var(--color-primary); border-color: var(--color-primary);
  background-image: radial-gradient(120% 90% at 90% -10%, rgba(59,130,246,0.28), rgba(59,130,246,0) 55%), linear-gradient(var(--color-primary), var(--color-primary));
  box-shadow: var(--shadow-lg); }
.icard__tag { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); display:flex; align-items:center; gap: var(--space-2); }
.icard__tag .yr { color: var(--color-text-tertiary); }
.icard--y28 .icard__tag { color: #93c5fd; }
.icard--y28 .icard__tag .yr { color: #7dabfb; }
.icard__rule { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); min-height: 20px; }
.icard--y28 .icard__rule { color: #cbd5e1; }
.icard__amt { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-5xl); letter-spacing: -0.03em; color: var(--color-text); margin-top: var(--space-5); line-height: 1; }
.icard--y28 .icard__amt { color: #fff; }
.icard__amt-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); }
.icard--y28 .icard__amt-label { color: #94a3b8; }
.icard__save { margin-top: auto; padding-top: var(--space-5); }
.icard__save-inner { border-top: 1px dashed var(--color-border); padding-top: var(--space-4); display:flex; align-items: baseline; gap: var(--space-2); }
.icard--y28 .icard__save-inner { border-color: rgba(255,255,255,0.18); }
.icard__save .lbl { font-size: var(--text-sm); color: var(--color-text-secondary); }
.icard--y28 .icard__save .lbl { color: #94a3b8; }
.icard__save .val { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-2xl); color: var(--color-success); }
.icard--y28 .icard__save .val { color: #4ade80; }
.icard--now .icard__save-inner { border-color: transparent; }
.icard--now .baseline { font-size: var(--text-sm); color: var(--color-text-tertiary); }

.impact-breakdown {
  margin-top: var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); font-size: var(--text-sm); color: var(--color-text-secondary);
}
.impact-breakdown .seg { display: inline-flex; align-items: center; gap: var(--space-2); }
.impact-breakdown .seg b { color: var(--color-text); font-weight: var(--font-semibold); }
.impact-breakdown .num { font-family: var(--font-mono); color: var(--color-text); font-weight: var(--font-semibold); }
.impact-breakdown .chip-ok { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing:.04em; text-transform: uppercase; color: var(--color-success); background: rgba(34,197,94,0.12); border-radius: 5px; padding: 2px 8px; }
.impact-breakdown .vbar { width:1px; height: 22px; background: var(--color-border); }
.impact-disclaim { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-4); display:flex; gap: var(--space-2); align-items: flex-start; line-height: 1.5; }
.impact-disclaim svg { flex-shrink:0; margin-top:2px; color: var(--color-text-tertiary); width:15px; height:15px; }

/* ==========================================================================
   SECTION HEADER (editorial) + dark sections
   ========================================================================== */
.sec-head { max-width: 760px; }
.sec-head--split { max-width: none; display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; }
.sec-head__note { font-size: var(--text-sm); color: var(--color-text-tertiary); text-align: right; max-width: 26ch; line-height: 1.5; }

.section--dark { background: var(--color-bg-dark); color: #cbd5e1; border-top: 0;
  background-image: radial-gradient(90% 70% at 90% 0%, rgba(59,130,246,0.14), rgba(59,130,246,0) 55%), linear-gradient(var(--color-bg-dark), var(--color-bg-dark)); }
.section--dark .section-title { color: #fff; }
.section--dark .section-lede { color: #94a3b8; }
.section--dark .kicker { color: #7dabfb; }
.section--dark .kicker::before { background: #7dabfb; }

/* ==========================================================================
   EXEMPTION TIMELINE  (replaces ramp)
   ========================================================================== */
.timeline-wrap { margin-top: var(--space-12); }
.timeline-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.timeline-label b { color: var(--color-primary); font-weight: var(--font-bold); }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-8); }
.tl-node { display: grid; justify-items: center; text-align: center; }
.tl-val { font-family: var(--font-mono); font-weight: var(--font-extrabold); font-size: var(--text-5xl); letter-spacing: -0.04em; color: var(--color-text-tertiary); line-height: 1; }
.tl-node.is-future .tl-val { color: var(--color-primary); }
.tl-node.is-final .tl-val { color: var(--color-accent); }
.tl-mark { position: relative; width: 100%; height: 30px; display: grid; place-items: center; margin: var(--space-6) 0 var(--space-5); }
.tl-mark::before { content:""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--color-border); }
.tl-node:first-child .tl-mark::before { left: 50%; }
.tl-node:last-child .tl-mark::before { right: 50%; background: linear-gradient(90deg, var(--color-border), var(--color-accent)); }
.tl-node.is-future .tl-mark::before { background: linear-gradient(90deg, var(--color-border), var(--color-accent)); }
.tl-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--color-text-tertiary); }
.tl-node.is-future .tl-dot { border-color: var(--color-accent); }
.tl-node.is-final .tl-dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 5px rgba(59,130,246,0.18); animation: pe-ring-pulse-lg 2.6s ease-in-out infinite; }
@keyframes pe-ring-pulse-lg {
  0%, 100% { box-shadow: 0 0 0 5px rgba(59,130,246,0.22); }
  50%      { box-shadow: 0 0 0 12px rgba(59,130,246,0.06); }
}
.tl-year { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text); }
.tl-note { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }
.tl-node.is-final .tl-year { color: var(--color-accent); }
.timeline-foot { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-tertiary); display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.5; }
.timeline-foot svg { flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; color: var(--color-text-tertiary); }
.ballot-cite strong { color: var(--color-text); font-weight: var(--font-bold); }

/* ballot comparison v2 — topic-aligned official→plain rows */
.bl-heads { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-10); margin-bottom: var(--space-3); }
.bl-heads__c { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); padding: 0 var(--space-8); }
.bl-heads__c svg { width: 15px; height: 15px; }
.bl-heads__c.is-mean { color: var(--color-accent); }
.bl-rows { display: grid; gap: var(--space-5); }
.bl-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.bl-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.bl-official { background: var(--color-bg-alt); padding: var(--space-8); }
.bl-mean { padding: var(--space-8); border-left: 1px solid var(--color-border); }
.bl-topic { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.bl-topic .bl-num { font-family: var(--font-mono); color: var(--color-accent); }
.bl-quote { display: block; font-family: var(--font-mono); font-size: 40px; line-height: .7; color: var(--color-accent); opacity: .3; font-weight: var(--font-extrabold); margin-bottom: var(--space-3); }
.bl-text { font-size: var(--text-base); line-height: 1.6; color: var(--color-text); }
.bl-official .bl-text { color: var(--color-text); }
.bl-meanlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.bl-meanlist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.bl-meanlist .m { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: rgba(59,130,246,0.10); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-bold); }
.bl-meanlist b { color: var(--color-text); font-weight: var(--font-semibold); }

/* FAQ accordion */
.faq-list { margin-top: var(--space-10); border-top: 1px solid var(--color-border); }
.faq { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-primary); transition: color .15s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq__pm { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--color-text-tertiary); border-bottom: 2px solid var(--color-text-tertiary); transform: rotate(45deg); transition: transform .25s ease, border-color .15s ease; margin-right: 6px; margin-top: -4px; }
.faq summary:hover .faq__pm { border-color: var(--color-accent); }
.faq[open] .faq__pm { transform: rotate(-135deg); margin-top: 4px; border-color: var(--color-accent); }
.faq__a { padding: 0 0 var(--space-6); }
.faq__a p { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.65; max-width: 68ch; }
.faq-note { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-tertiary); font-style: italic; }

/* ==========================================================================
   SCHOOLS-PROTECTED FEATURE BAND
   ========================================================================== */
.schools-feature {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: 300px 1fr; gap: var(--space-12); align-items: center;
  background:
    radial-gradient(75% 120% at 0% 0%, rgba(34,197,94,0.26), rgba(34,197,94,0) 58%),
    radial-gradient(70% 110% at 100% 120%, rgba(59,130,246,0.16), rgba(59,130,246,0) 60%),
    var(--color-primary);
  border: 0; border-radius: var(--radius-2xl); padding: var(--space-12);
  color: #cbd5e1; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.schools-feature__aside { display: grid; gap: var(--space-4); }
.schools-feature__shield { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--color-success); color: #06281a; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(34,197,94,0.45); animation: pe-shield-glow 3.4s ease-in-out infinite; }
@keyframes pe-shield-glow {
  0%, 100% { box-shadow: 0 10px 30px rgba(34,197,94,0.45), 0 0 0 0 rgba(34,197,94,0.30); }
  50%      { box-shadow: 0 12px 36px rgba(34,197,94,0.55), 0 0 0 14px rgba(34,197,94,0.00); }
}
@media (prefers-reduced-motion: reduce) { .schools-feature__shield { animation: none !important; } }
.schools-feature__shield svg { width: 34px; height: 34px; }
.schools-feature__flag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-extrabold); letter-spacing: .08em; text-transform: uppercase; color: #4ade80; }
.schools-feature__aside .num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-bold); color: #fff; line-height: 1.1; }
.schools-feature__aside .num small { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium); color: #94a3b8; letter-spacing: 0; text-transform: none; margin-top: var(--space-1); }
.schools-feature__body h3 { font-size: var(--text-3xl); font-weight: var(--font-extrabold); color: #fff; margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.schools-feature__body p { font-size: var(--text-lg); color: #cbd5e1; line-height: 1.6; max-width: 56ch; }
.schools-feature__body .emph { color: #4ade80; font-weight: var(--font-bold); }

/* secondary provisions — understated, divided */
.prov-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--space-10); border-top: 1px solid var(--color-border); }
.prov-item { padding: var(--space-8) var(--space-8) var(--space-2) 0; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); align-items: start; }
.prov-pair .prov-item + .prov-item { padding-left: var(--space-10); border-left: 1px solid var(--color-border); }
.prov-item__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-bg-alt); border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--color-primary-light); }
.prov-item h4 { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-2); }
.prov-item p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55; }
.prov-item .delta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-xl); color: var(--color-primary); margin: var(--space-1) 0 var(--space-3); }
.prov-item .delta .from { color: var(--color-text-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.prov-item .delta svg { color: var(--color-accent); width: 20px; height: 20px; }

/* ==========================================================================
   WHERE THE MONEY COMES FROM (on dark)
   ========================================================================== */
.money-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; margin-top: var(--space-12); align-items: stretch; }
.money-col { padding: var(--space-2) 0; }
.money-col--bars { padding-right: var(--space-12); }
.money-col--list { padding-left: var(--space-12); border-left: 1px solid var(--color-bg-dark-lighter); }
.money-col__title { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .07em; text-transform: uppercase; color: #64748b; margin-bottom: var(--space-8); }

/* fiscal-impact stat callout (on dark) */
.money-stat {
  margin-top: var(--space-10);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl); padding: var(--space-8) var(--space-10);
}
.money-stat__figure { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.money-stat__num { font-size: var(--text-4xl); font-weight: var(--font-extrabold); letter-spacing: -0.03em; color: #cbd5e1; line-height: 1; }
.money-stat__num.is-final { color: var(--color-warning); }
.money-stat__num small { font-size: var(--text-lg); font-weight: var(--font-bold); color: #94a3b8; margin-left: 2px; }
.money-stat__arrow { color: #475569; display: flex; }
.money-stat__arrow svg { width: 26px; height: 26px; }
.money-stat__cap { font-size: var(--text-sm); color: #94a3b8; line-height: 1.55; }
.money-stat__cap strong { color: #e2e8f0; font-weight: var(--font-bold); }
.money-stat__src { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: #64748b; }

.bars { display: flex; flex-direction: column; gap: var(--space-6); }
.bar-row__top { display:flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.bar-row__name { font-size: var(--text-base); font-weight: var(--font-medium); color: #e2e8f0; }
.bar-row__name .lead { color: var(--color-success); font-weight: var(--font-bold); }
.bar-row__pct { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--font-semibold); color: #94a3b8; }
.bar-track { height: 12px; background: rgba(255,255,255,0.07); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; background: var(--color-accent); width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
.bar-fill.is-schools { background: var(--color-success); box-shadow: 0 0 18px rgba(34,197,94,0.4); }
.bar-note { font-size: var(--text-xs); color: #64748b; margin-top: var(--space-8); line-height: 1.5; }

.protected-list { list-style:none; margin:0; padding:0; display:grid; gap: var(--space-4); }
.protected-list li { display:flex; align-items:center; gap: var(--space-3); font-size: var(--text-base); color: #e2e8f0; font-weight: var(--font-medium); }
.protected-list .check { width: 26px; height: 26px; flex-shrink:0; border-radius: 50%; background: rgba(34,197,94,0.18); display:grid; place-items:center; color: var(--color-success); }

.debate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-10); }
.quote {
  background: var(--color-bg-dark-lighter); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl);
  padding: var(--space-8); position: relative;
}
.quote__label { display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing:.05em; text-transform: uppercase; color: #94a3b8; margin-bottom: var(--space-4); }
.quote__label .dot { width:8px; height:8px; border-radius:50%; box-shadow: 0 0 0 4px rgba(255,255,255,0); }
.quote--support .quote__label .dot { background: var(--color-accent); animation: pe-pulse-accent 2.6s ease-in-out infinite; }
.quote--concern .quote__label .dot { background: var(--color-warning); animation: pe-pulse-warning 2.6s ease-in-out infinite; }
@keyframes pe-pulse-accent {
  0%, 100% { box-shadow: 0 0 0 4px rgba(59,130,246,0.30); }
  50%      { box-shadow: 0 0 0 9px rgba(59,130,246,0.06); }
}
@keyframes pe-pulse-warning {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,0.30); }
  50%      { box-shadow: 0 0 0 9px rgba(245,158,11,0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .quote--support .quote__label .dot, .quote--concern .quote__label .dot { animation: none !important; }
}
.quote blockquote { margin:0; font-size: var(--text-xl); line-height: 1.5; color: #f1f5f9; font-weight: var(--font-medium); letter-spacing: -0.01em; }
.quote cite { display:block; margin-top: var(--space-5); font-style: normal; font-size: var(--text-xs); color: #64748b; }
.balance-note { margin-top: var(--space-6); text-align:center; font-size: var(--text-sm); color: #94a3b8; display:flex; align-items:center; justify-content:center; gap: var(--space-2); }
.balance-note svg { width:16px; height:16px; color: #64748b; }

/* ==========================================================================
   BALLOT LANGUAGE
   ========================================================================== */
.ballot-cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-10); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.ballot-col { padding: var(--space-8); }
.ballot-col + .ballot-col { border-left: 1px solid var(--color-border); }
.ballot-col--official { background: var(--color-bg-alt); }
.ballot-col__head { display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing:.05em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.ballot-block + .ballot-block { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border-light); }
.ballot-block__label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-accent); margin-bottom: var(--space-2); letter-spacing:.02em; }
.ballot-official-text { font-size: var(--text-base); line-height: 1.6; color: var(--color-text); font-feature-settings: "ss01"; }
.ballot-official-text.is-quote { padding-left: var(--space-4); border-left: 2px solid var(--color-border); color: var(--color-text); }
.ballot-plain-text { font-size: var(--text-base); line-height: 1.6; color: var(--color-text); }
.tag-ph { display:inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--color-text-secondary); background: var(--color-border-light); border-radius: 4px; padding: 2px 6px; margin-left: var(--space-2); vertical-align: middle; letter-spacing: 0; text-transform: none; }
.ballot-cite { margin-top: var(--space-6); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.ballot-cite strong { color: var(--color-text); font-weight: var(--font-bold); }

/* ==========================================================================
   SOURCES
   ========================================================================== */
.refs-list { list-style:none; margin: var(--space-8) 0 0; padding:0; display:grid; gap: var(--space-3); }
.refs-list li { display:flex; gap: var(--space-4); align-items: baseline; font-size: var(--text-sm); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.refs-list .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); flex-shrink:0; }
.refs-list a { font-weight: var(--font-semibold); }
.refs-list .desc { color: var(--color-text-secondary); }
.refs-updated { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ==========================================================================
   SAVE / SHARE
   ========================================================================== */
.share-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-6); margin-top: var(--space-10); align-items: stretch; }
.share-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-8); }
.share-card h3 { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-primary); margin-bottom: var(--space-2); }
.share-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.share-input-row { display:flex; gap: var(--space-3); }
.share-input-row input { flex:1; height: 52px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-base); background: var(--color-bg-alt); }
.share-input-row input:focus { outline:none; border-color: var(--color-accent); background:#fff; box-shadow: 0 0 0 4px rgba(59,130,246,0.14); }
.neighbor-cards { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.share-previews { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-10); max-width: 760px; }
.btn.is-copied { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.ncard { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background:#fff; transition: box-shadow .15s ease, transform .15s ease; }
.ncard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ncard__prev { aspect-ratio: 1.9/1; background: var(--color-bg-dark); color:#fff; padding: var(--space-4); display:flex; flex-direction: column; justify-content: space-between; }
.ncard__prev .t { font-size: 10px; color: #93c5fd; letter-spacing:.03em; }
.ncard__prev .h { font-size: var(--text-sm); font-weight: var(--font-bold); line-height: 1.25; }
.ncard__prev .h .c { color: var(--color-accent); }
.ncard__foot { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-accent); display:flex; align-items:center; gap: var(--space-2); }

/* ==========================================================================
   FOOTER (dark)
   ========================================================================== */
.footer { background: var(--color-bg-dark); color: #94a3b8; padding: var(--space-16) 0 var(--space-10); }
.footer a { color: #cbd5e1; }
.footer a:hover { color: #fff; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10); }
.footer .brand__name { color: #fff; }
.footer .brand__mark { background:#fff; color: var(--color-primary); }
.footer__about { font-size: var(--text-sm); line-height: 1.6; margin-top: var(--space-4); max-width: 34ch; color: #64748b; }
.footer__col h4 { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: var(--space-4); }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap: var(--space-3); }
.footer__col li { font-size: var(--text-sm); }
.footer__disclaimer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-bg-dark-lighter); font-size: var(--text-xs); line-height: 1.6; color: #64748b; max-width: 90ch; }
.footer__legal { margin-top: var(--space-5); display:flex; gap: var(--space-6); flex-wrap: wrap; font-size: var(--text-xs); color: #475569; align-items:center; }

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.sticky-cta { position: fixed; left:0; right:0; bottom:0; z-index: 60; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 18px rgba(15,23,42,0.10); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); transform: translateY(120%); transition: transform .28s cubic-bezier(.22,.61,.36,1); display:none; }
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero-card { max-width: 520px; }
  .money-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .share-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 820px) {
  .impact-grid { grid-template-columns: 1fr; }
  .schools-feature { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8); }
  .schools-feature__aside { grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--space-5); }
  .prov-pair { grid-template-columns: 1fr; }
  .prov-pair .prov-item + .prov-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-8); }
  .money-grid { grid-template-columns: 1fr; }
  .money-col--bars { padding-right: 0; padding-bottom: var(--space-10); }
  .money-col--list { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-bg-dark-lighter); padding-top: var(--space-10); }
  .facts__inner { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3), .fact:nth-child(4) { border-top: 1px solid var(--color-border-light); }
  .fact:nth-child(odd) { border-left: 0; }
  .money-stat { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
  .money-stat__figure { justify-content: center; }
}
@media (max-width: 680px) {
  body { font-size: var(--text-base); }
  .nav__links { display: none; }
  .nav__updated { display: none; }
  .section { padding: var(--space-16) 0; }
  .section--sm { padding: var(--space-12) 0; }
  .wrap { padding: 0 var(--space-4); }
  .hero__inner { padding: var(--space-12) 0 var(--space-16); }
  .hero h1 { font-size: var(--text-4xl); }
  .hero__sub { font-size: var(--text-lg); }
  .section-title { font-size: var(--text-3xl); }
  .section-lede { font-size: var(--text-lg); }
  .facts__inner { grid-template-columns: 1fr 1fr; }
  .fact { padding: var(--space-5) var(--space-4); }
  .timeline { grid-template-columns: 1fr; gap: var(--space-8); }
  .tl-mark { display: none; }
  .tl-node { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
  .tl-node:last-child { border-bottom: 0; }
  .debate { grid-template-columns: 1fr; }
  .bl-heads { display: none; }
  .bl-grid { grid-template-columns: 1fr; }
  .bl-mean { border-left: 0; border-top: 1px solid var(--color-border); }
  .ballot-cols { grid-template-columns: 1fr; }
  .ballot-col + .ballot-col { border-left: 0; border-top: 1px solid var(--color-border); }
  .impact-breakdown { flex-direction: column; align-items: flex-start; }
  .impact-breakdown .vbar { display:none; }
  .sticky-cta { display: block; }
  .neighbor-cards { grid-template-columns: 1fr 1fr; }
  .share-previews { grid-template-columns: 1fr; }
  .share-actions .btn { width: 100%; }
}

/* ==========================================================================
   BILL READER — Read-the-bill CTA + Floating FAB + Drawer
   ========================================================================== */

/* Inline CTA (inside ballot section) */
.read-bill-cta { margin-top: var(--space-6); }
.read-bill-btn {
  display: inline-flex; align-items: center; gap: var(--space-4);
  width: 100%; max-width: 560px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.read-bill-btn:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px rgba(59,130,246,0.10); }
.read-bill-btn:active { transform: translateY(1px); }
.rb-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(59,130,246,0.10); color: var(--color-accent); flex-shrink: 0; }
.rb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rb-text__line1 { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text); }
.rb-text__line2 { font-size: var(--text-xs); color: var(--color-text-secondary); }
.rb-arrow { color: var(--color-text-tertiary); display: inline-flex; align-items: center; transition: transform .2s ease, color .2s ease; }
.read-bill-btn:hover .rb-arrow { color: var(--color-accent); transform: translateX(3px); }

/* Floating launcher pill */
.reader-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 12px 18px;
  background: var(--color-bg-dark); color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-full);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,23,42,0.20);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.reader-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,23,42,0.28); background: var(--color-bg-dark-lighter); }
.reader-fab svg { color: var(--color-accent); }
body.reader-open .reader-fab { display: none; }
@media (max-width: 680px) {
  .reader-fab { display: none; }
}

/* Backdrop */
.reader-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
body.reader-open .reader-backdrop { opacity: 1; pointer-events: auto; }

/* Drawer */
.reader {
  position: fixed; left: 50%; bottom: 0; z-index: 1101;
  width: min(1180px, calc(100vw - 32px));
  height: calc(100vh - 40px); max-height: 920px;
  transform: translate(-50%, 100%);
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -24px 64px rgba(15,23,42,0.30), 0 -2px 8px rgba(15,23,42,0.10);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  visibility: hidden;
}
body.reader-open .reader { transform: translate(-50%, 0); visibility: visible; }
@media (max-width: 720px) {
  .reader { width: 100vw; height: calc(100vh - 12px); max-height: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* Top bar */
.reader__bar {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 480px) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.reader__title { font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--color-primary); letter-spacing: -0.01em; line-height: 1.1; }
.reader__title-sub { font-weight: var(--font-medium); color: var(--color-text-secondary); }
.reader__meta { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 3px; }

.reader__search-wrap { position: relative; display: flex; align-items: center; }
.reader__search-icon { position: absolute; left: 12px; color: var(--color-text-tertiary); display: inline-flex; pointer-events: none; }
.reader__search { width: 100%; height: 38px; padding: 0 80px 0 36px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--color-text); outline: none; transition: border-color .2s ease, background .2s ease; }
.reader__search:focus { border-color: var(--color-accent); background: var(--color-surface); }
.reader__search-kbd { position: absolute; right: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 6px; pointer-events: none; }
.reader__search-count { position: absolute; right: 48px; font-size: 11px; color: var(--color-text-secondary); font-family: var(--font-mono); }
.reader__search:focus ~ .reader__search-kbd { opacity: 0; }

.reader__bar-right { display: flex; align-items: center; gap: var(--space-3); }
.reader__pager { display: flex; align-items: center; gap: var(--space-2); padding: 4px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.reader__pager-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 5px; color: var(--color-text-secondary); cursor: pointer; transition: background .15s ease, color .15s ease; }
.reader__pager-btn:hover { background: var(--color-surface); color: var(--color-text); }
.reader__pager-btn:disabled { color: var(--color-text-tertiary); cursor: default; opacity: 0.5; }
.reader__pager-btn:disabled:hover { background: none; }
.reader__pager-text { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); padding: 0 var(--space-2); }
.reader__pager-text strong { color: var(--color-text); font-weight: var(--font-bold); }

.reader__action, .reader__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; text-decoration: none; }
.reader__action:hover, .reader__close:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }
.reader__close { color: var(--color-text); }

/* Body */
.reader__body { display: grid; grid-template-columns: 260px 1fr; flex: 1; min-height: 0; }
.reader__toc { background: var(--color-bg-alt); border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-4); overflow-y: auto; }
.reader__toc-title { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); padding: 0 var(--space-2); }
.reader__toc-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 12px;
  border-radius: var(--radius-md); cursor: pointer; font-family: inherit;
  transition: background .15s ease;
  margin-bottom: 2px;
}
.reader__toc-item:hover { background: var(--color-surface); }
.reader__toc-item.is-active { background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-accent), 0 1px 3px rgba(59,130,246,0.10); }
.reader__toc-num { display: block; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-accent); letter-spacing: 0.02em; line-height: 1.2; }
.reader__toc-item.is-active .reader__toc-num { color: var(--color-accent); }
.reader__toc-label { display: block; font-size: var(--text-sm); color: var(--color-text); font-weight: var(--font-medium); margin-top: 2px; }

.reader__toc-legend { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-2); padding-right: var(--space-2); }
.reader__toc-legend > div { display: flex; align-items: center; gap: var(--space-2); }
.legend-add { display: inline-block; width: 24px; height: 2px; background: var(--color-text); border-radius: 1px; box-shadow: 0 2px 0 var(--color-text); }
.legend-del { display: inline-block; width: 24px; height: 2px; background: var(--color-text-tertiary); position: relative; }
.legend-del::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 1px; background: var(--color-text-tertiary); }

/* Viewport */
.reader__viewport { position: relative; overflow: auto; background: var(--color-bg-alt); display: flex; align-items: flex-start; justify-content: center; padding: var(--space-6); scroll-behavior: smooth; }
.reader__canvas-wrap { position: relative; max-width: 100%; box-shadow: 0 4px 24px rgba(15,23,42,0.10); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.reader__canvas { display: block; max-width: 100%; height: auto; }
.reader__textlayer { position: absolute; inset: 0; opacity: 0.2; line-height: 1; color: transparent; }
.reader__textlayer > span { position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.reader__textlayer .highlight { background: rgba(245, 158, 11, 0.45); border-radius: 2px; }
.reader__textlayer .highlight.selected { background: rgba(245, 158, 11, 0.75); }

.reader__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); background: var(--color-bg-alt); z-index: 2; transition: opacity .2s ease; }
.reader__loading.hidden { opacity: 0; pointer-events: none; }
.reader__spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.reader__loading-text { font-size: var(--text-sm); color: var(--color-text-secondary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer */
.reader__foot { flex-shrink: 0; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.reader__progress { height: 2px; background: var(--color-border-light); }
.reader__progress-fill { height: 100%; background: var(--color-accent); transition: width .25s ease; }
.reader__foot-text { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.reader__foot-text a { color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: rgba(0,0,0,0.15); text-underline-offset: 2px; }
.reader__foot-text a:hover { color: var(--color-accent); }

/* Mobile collapses TOC into a top horizontal scroll */
@media (max-width: 880px) {
  .reader__bar { grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .reader__search-wrap { grid-column: 1 / -1; order: 3; }
  .reader__pager { display: none; }
  .reader__action { display: none; }
  .reader__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .reader__toc { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-3); border-right: none; border-bottom: 1px solid var(--color-border); }
  .reader__toc-title { display: none; }
  .reader__toc-legend { display: none; }
  .reader__toc-item { flex: 0 0 auto; margin: 0; padding: 8px 12px; white-space: nowrap; }
  .reader__viewport { padding: var(--space-4); }
}

/* ==========================================================================
   FINE PRINT — editorial ledger with statutory citations
   ========================================================================== */
.ledger {
  list-style: none;
  padding: 0;
  margin: var(--space-12) 0 var(--space-10);
  max-width: 880px;
  counter-reset: ledger;
  border-top: 1px solid var(--color-border);
}
.ledger li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.ledger__cite {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  padding-top: 5px;
  white-space: nowrap;
}
.ledger__body h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.ledger__body p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 720px) {
  .ledger li { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) 0; }
  .ledger__cite { padding-top: 0; font-size: 11px; }
  .ledger__body h3 { font-size: var(--text-base); }
}

/* CTA — substantial, owns its space */
.ledger-cta {
  margin-top: var(--space-2);
}
.ledger-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 560px;
  padding: var(--space-5) var(--space-5);
  background: var(--color-bg-dark);
  color: #fff;
  border: 1px solid var(--color-bg-dark-lighter);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,0.10);
}
.ledger-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.20);
  border-color: var(--color-accent);
}
.ledger-cta__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(59,130,246,0.18);
  color: var(--color-accent);
}
.ledger-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ledger-cta__line1 { font-size: var(--text-base); font-weight: var(--font-bold); color: #fff; letter-spacing: -0.01em; }
.ledger-cta__line2 { font-size: var(--text-xs); color: rgba(255,255,255,0.55); line-height: 1.45; }
.ledger-cta__arrow { color: rgba(255,255,255,0.5); display: inline-flex; transition: transform .15s ease, color .15s ease; }
.ledger-cta__btn:hover .ledger-cta__arrow { color: var(--color-accent); transform: translateX(3px); }

/* ==========================================================================
   SCROLL-IN ANIMATIONS (matches mosaichoa.com pattern)
   ========================================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}