/* ============================================================================
   niswosakit · Woonsocket Votes, V2 additions
   Loaded ON TOP of styles.css (shared design system). V1 is frozen; this file
   only adds the new components: the mayoral race cards and the registration
   walkthrough + checklist. Same tokens, same stark-look/warm-words idiom.
   ============================================================================ */

@layer components {

  /* ---------------------------------------------------------- mayoral race -- */
  .race { display:grid; gap: var(--space-3); }
  .race-note { color: var(--muted); font-size: var(--step--1); max-width: var(--measure); }
  .race-note strong { color: var(--ink-soft); }

  .candidates { display:grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

  .candidate { background: var(--surface); border:1px solid var(--line);
    border-radius: var(--radius); padding: var(--space-4);
    display:flex; flex-direction:column; gap: var(--space-2); }
  .candidate .role { color: var(--accent); font-weight:600; font-size: var(--step--1);
    text-transform: uppercase; letter-spacing:0.04em; }
  .candidate h3 { font-size: var(--step-1); }
  .candidate .bio { color: var(--ink-soft); }
  .candidate .plabel { font-size: var(--step--1); text-transform: uppercase; letter-spacing:0.06em;
    color: var(--muted); margin-top: var(--space-1); }
  .candidate ul { list-style: none; padding:0; display:grid; gap:.4em; color: var(--ink-soft); }
  .candidate li { position:relative; padding-left: 1.1em; }
  .candidate li::before { content:""; position:absolute; left:0; top:.62em;
    width:.4em; height:.4em; border-radius:50%; background: var(--accent); }

  /* ------------------------------------------------------- register walk --- */
  .walk { border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    overflow:hidden; margin-top: var(--space-3); }
  .walk > summary {
    cursor:pointer; padding: var(--space-4); font-weight:700; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap: var(--space-3);
    font-size: var(--step-1);
  }
  .walk > summary::-webkit-details-marker { display:none; }
  .walk > summary .chev { color: var(--accent); font-weight:700; font-size:1.2em; line-height:1;
    transition: transform var(--dur) var(--ease); }
  .walk[open] > summary .chev { transform: rotate(45deg); }
  .walk-body { padding: 0 var(--space-4) var(--space-4); display:grid; gap: var(--space-4); }

  /* eligibility + what-you-need mini panels */
  .reg-grid { display:grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .reg-card { border:1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
    background: var(--bg); }
  .reg-card h4 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .reg-card ul { margin:0; padding-left: 1.15em; color: var(--ink-soft); display:grid; gap:.35em; }

  /* the three ways to register */
  .paths { display:grid; gap: var(--space-2); }
  .path { display:grid; gap:.2em; padding: var(--space-3); border:1px solid var(--line);
    border-radius: var(--radius); background: var(--bg); }
  .path .pnum { color: var(--accent); font-weight:700; font-size: var(--step--1);
    text-transform: uppercase; letter-spacing:0.06em; }
  .path h4 { font-size: var(--step-0); }
  .path p { color: var(--ink-soft); font-size: var(--step--1); }

  /* the interactive checklist */
  .checklist-h { font-size: var(--step-0); }
  .checklist { list-style:none; padding:0; display:grid; gap: var(--space-2); margin-top: var(--space-2); }
  .checklist li { }
  .checklist label { display:flex; align-items:flex-start; gap:.7em; cursor:pointer;
    padding: var(--space-2) var(--space-3); border:1px solid var(--line); border-radius: var(--radius);
    background: var(--bg); color: var(--ink); transition: background var(--dur) var(--ease); }
  .checklist label:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  .checklist input[type=checkbox] { margin-top:.18em; width:1.15em; height:1.15em; accent-color: var(--accent); flex:none; }
  .checklist input:checked + span { color: var(--muted); text-decoration: line-through; }

  /* save-to-phone actions */
  .walk-actions { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-1); }
  .walk-note { font-size: var(--step--1); color: var(--hint); max-width: var(--measure); }

  /* the "register" card in the How-to-vote grid gets a jump link that opens the walk */
  .card .jump { color: var(--accent); font-weight:600; font-size: var(--step--1);
    background:none; border:0; padding:0; cursor:pointer; text-align:left; text-decoration: underline;
    text-underline-offset:.18em; }

  /* primary hand-off CTA to the official portal */
  .reg-cta { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4); }
  .reg-cta .btn { font-size: var(--step-0); }
  .reg-cta-note { color: var(--hint); font-size: var(--step--1); flex:1 1 14rem; }
}

/* ============================================================================
   V2 BRAND SKIN, near-black + pink, the NISWOSAKIT type system.
   Deliberately UNLAYERED so it overrides styles.css's @layer rules regardless
   of specificity. Dark-first and forced (V1 index.html keeps the light look).
   ============================================================================ */
@font-face{ font-family:"Formula Condensed"; src:url("../fonts/formula-condensed-light.woff2")   format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("../fonts/formula-condensed-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("../fonts/formula-condensed-bold.woff2")    format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Formula Condensed"; src:url("../fonts/formula-condensed-black.woff2")   format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

/* brand faces (all modes) */
:root{
  --font-display:"Git Sans","Arial Black",system-ui,sans-serif;
  --font-cond:"Formula Condensed","Arial Narrow",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
/* palette: brand dark is the default (and explicit dark); light is opt-in via the toggle */
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  --bg:#0B0B0C; --surface:#151517; --ink:#EBEBEB; --ink-soft:#B9B7B0;
  --muted:#9A968C; --line:rgba(235,235,235,.14);
  --accent:#FDAEF1; --accent-ink:#0B0B0C; --focus:#FDAEF1;
  --hint:color-mix(in srgb,#EBEBEB 42%,transparent);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#EBEBEB; --surface:#FFFFFF; --ink:#0B0B0C; --ink-soft:#4A463F;
  --muted:#6E6B64; --line:rgba(11,11,12,.14);
  --accent:#FDAEF1; --accent-ink:#0B0B0C; --focus:#d21f7a;
  --hint:color-mix(in srgb,#0B0B0C 42%,transparent);
  color-scheme:light;
}

/* body + wordmark */
body{ font-family:var(--font-body); }
.wordmark.display{ font-family:var(--font-display); }

/* the monument: Formula Condensed on the hero + every section title */
.urgent h1, section > h2, .signup h2, .infooter__h{
  font-family:var(--font-cond); font-weight:700; letter-spacing:0; line-height:1.02;
}
.urgent h1{ font-size:clamp(2.9rem,1.5rem+5.6vw,5.75rem); letter-spacing:.004em; }
section > h2{ font-size:clamp(1.7rem,1.2rem+2vw,2.7rem); }

/* Geist Mono on labels, tags, amounts, fine print, sources */
.issue-tag, .card .when, .count span, .count b, .candidate .role, .path .pnum, .plabel,
.q .amount, .reg-cta-note, .walk-note, .consent, .q-note, .site-footer,
.co-eyebrow, .co-secure{
  font-family:var(--font-mono);
}
/* the countdown numeral: mono, light, the numerics-are-our-bread-and-butter rule */
.count b{ font-weight:400; letter-spacing:-.01em; }
/* the short label class: caps + tracked */
.card .when, .candidate .role, .path .pnum, .plabel{
  text-transform:uppercase; letter-spacing:.07em;
}

/* the primary register CTA pops pink; keep text readable near-black */
.reg-cta .btn{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }