/* the ballot card is a self-contained component. Its tokens are scoped to
     .ballotwrap so they never override a host page's brand tokens (--ink/--paper). */
  .ballotwrap{
    --ink:#111;
    --line:#111;
    --bar:#e4e4e4;             /* light grey — contest/section header bars */
    --bar-soft:#bfbfbf;        /* medium grey — the instruction band */
    --rule:5px;                /* thick black section rule (separates sections) */
    --paper:#fff;
    --muted:#444;
    --oval-w:26px; --oval-h:15px;
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; color:var(--ink);
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; align-items:center;
  }
  .ballotwrap *, .ballotwrap *::before, .ballotwrap *::after{ box-sizing:border-box; }
  @font-face{ font-family:"Formula Condensed"; src:url("formula-condensed-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

  .pagelabel{
    width:100%; max-width:900px; margin:0 auto 14px;
    font-family:"Formula Condensed","Arial Narrow",sans-serif; font-weight:900;
    text-transform:uppercase; font-size:clamp(2rem,4vw,3.1rem); line-height:1;
    letter-spacing:.005em; color:#f4f4f6;
  }
  /* the paper: a FIXED real-ballot rectangle (648:1260 pts = 9" x 17.5"), so page 01 and
     page 02 are the exact same size, like the two sides of the one real sheet. The
     flowing content lives in .sheet, placed absolutely so it can never stretch the paper,
     and is scaled to fit inside it (page 1 is denser than the paper, page 2 is shorter). */
  .ballot{
    position:relative;
    background:var(--paper);
    width:100%; max-width:900px;
    aspect-ratio:648 / 1260;
    border:1px solid var(--line);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
  }
  .sheet{
    position:absolute; top:0; left:0; right:0;
    padding:clamp(12px,2.4vw,22px);
    transform-origin:top center;   /* a shrunk page stays centered in the paper */
  }
  #root{ width:100%; }             /* definite width so the absolute .sheet can't collapse the paper */
  .stage + .pagelabel{ margin-top:72px; }   /* space above page 2 (the card is nested in .stage) */

  /* ── masthead (page 1 only) ───────────────────────────────── */
  .mast{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; align-items:start; padding-bottom:14px; }
  .mast__title{ display:flex; gap:10px; align-items:flex-start; }
  .mast__title h1{ font-size:15px; line-height:1.25; margin:0; font-weight:700; }
  .mast__title .sub{ font-weight:400; }
  .mast__es h2{ font-size:15px; line-height:1.25; margin:0; font-weight:700; }
  .mast__es .sub{ font-weight:400; }
  /* block hugs the right content edge (aligns with the columns below), text left-aligned */
  .mast__meta{ display:flex; justify-content:flex-end; }
  .mast__meta-in{ text-align:left; font-size:12.5px; line-height:1.4; }
  .mast__meta b{ font-size:13.5px; }

  /* ── instruction band ─────────────────────────────────────── */
  /* left group (mark) a touch wider than 1/3, right group (write-in) the rest */
  .howto{ display:grid; grid-template-columns:1fr 1.75fr; gap:12px; background:var(--bar-soft); border:1px solid var(--line); padding:12px; margin-bottom:14px; }
  .howto__cell{ display:flex; gap:12px; align-items:stretch; }
  .howto__box{ flex:0 0 auto; align-self:center; background:#fff; padding:4px; display:flex; align-items:center; justify-content:center; }
  .howto__txt{ font-size:8px; line-height:1.3; }
  .howto__txt h3{ font-size:8px; margin:0 0 2px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
  .howto__txt p{ margin:0 0 5px; }
  .howto__txt .es{ color:var(--muted); }

  /* ── columns ──────────────────────────────────────────────── */
  .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
  .col{ display:flex; flex-direction:column; gap:0; }
  .col > *{ border-left:1.5px solid var(--line); border-right:1.5px solid var(--line); }
  .col > *:last-child{ border-bottom:1.5px solid var(--line); }
  .contest, .question, .qhead, .qcont{ border-top:var(--rule) solid var(--line); }   /* thick section rule */
  .preamble{ border-top:1.5px solid var(--line); }
  /* 'Voting continues on back' is its OWN detached box below a gap (like the real
     ballot): close the contest above it, then float the footer with its own full border */
  .contest:has(+ .continues){ border-bottom:1.5px solid var(--line); }
  .continues{ border:1.5px solid var(--line); margin-top:20px; }
  /* a "plain" column (page 2 center): no grey fill, no thick section strokes */
  .col--plain > *{ border-top-width:0; }
  /* but the column's FIRST box still needs a top border to close the box; keep it the
     regular (thin) weight, since the plain column carries no thick section rules */
  .col--plain > *:first-child{ border-top-width:1.5px; }
  .col--plain .qbar, .col--plain .qhead{ background:transparent; }

  /* contest box */
  .contest__head{ background:var(--bar); padding:7px 9px; border-bottom:1.5px solid var(--line); }
  .contest__group--es{ margin-top:0.9em; }   /* blank line between English and Spanish */
  .contest__office{ font-size:14px; font-weight:700; line-height:1.15; }
  .contest__term{ font-size:11.5px; font-weight:700; line-height:1.3; margin-top:3px; }
  .contest__vote{ font-size:11.5px; font-weight:400; margin-top:2px; }
  .contest__vote .es{ font-weight:400; color:var(--muted); }

  .opt{ display:flex; align-items:center; gap:9px; padding:8px 9px; width:100%; text-align:left;
        background:none; border:0; border-top:1px solid #cfcfcf; font:inherit; color:inherit; cursor:pointer; }
  .opt:first-of-type{ border-top:0; }
  .opt:hover{ background:#f4f4f4; }
  .opt__name{ display:block; font-size:13px; font-weight:700; line-height:1.15; }
  .opt__party{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:1px; }
  .opt__es{ display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }
  .opt--writein .opt__party{ text-transform:none; letter-spacing:0; }
  /* room to actually write the name below the "Write-in / Voto-por-escrito" line */
  .opt--writein{ align-items:flex-start; padding-bottom:2.4rem; }

  .oval{ flex:0 0 auto; width:var(--oval-w); height:var(--oval-h); }
  .oval ellipse{ fill:#fff; stroke:var(--ink); stroke-width:1.5; transition:fill .12s ease; }
  .opt.is-marked .oval ellipse{ fill:var(--ink); }

  /* ── page 2: state questions ──────────────────────────────── */
  /* grey centered bar — "State Questions" (standalone) and "Continued From..." (inline) */
  .qhead, .qbar{ background:var(--bar); text-align:center; padding:7px 9px; font-weight:700; font-size:13px; }
  .qhead .es, .qbar .es{ display:block; font-weight:400; }
  .preamble{ padding:9px; font-size:11px; line-height:1.35; }
  .preamble__h{ margin:0; font-size:12px; font-weight:700; }
  .preamble__h--es{ margin-top:9px; }
  .preamble .chap{ font-weight:400; display:block; }
  .preamble p{ margin:7px 0 0; }
  /* questions: NO grey box — bold title inline, then description + items; English then Spanish */
  .question__body{ padding:8px 9px; font-size:11px; line-height:1.35; }
  .question__body p{ margin:0 0 6px; }
  .q__title{ font-weight:700; font-size:12.5px; line-height:1.2; margin:0 0 6px; }
  .q__title--es{ margin-top:10px; }   /* blank line between English and Spanish */
  /* sub-allocations (a., b., c. …) read as an indented list with a hanging marker:
     the letter sits out to the left, wrapped lines align under the text */
  .q__items{ margin:0 0 6px; padding:0 0 0 .6em; list-style:none; }
  .q__items li{ padding:1px 0 1px 1.3em; text-indent:-1.3em; }

  /* footer bits */
  .continues{ text-align:center; padding:12px 10px; font-weight:700; font-size:12px; }
  .continues .es{ display:block; font-weight:400; color:var(--muted); margin-top:3px; }
  /* the city sits at the very bottom of the paper (like the real sheet), not floating at
     the end of the columns; it lives outside .sheet so the sheet scaling never moves it */
  .foot{ position:absolute; left:clamp(12px,2.4vw,22px); right:clamp(12px,2.4vw,22px); bottom:clamp(12px,2.4vw,22px);
         display:flex; justify-content:space-between; align-items:baseline; }
  .foot .city{ font-weight:700; font-size:14px; }
  .summary{ width:100%; max-width:900px; margin:16px auto 0; text-align:center; color:#edecf0;
            font-size:12px; letter-spacing:.06em; }

  /* the owner's line-art SVGs */
  .seal-img{ height:104px; width:auto; flex:0 0 auto; }
  .howto-ill{ height:72px; width:auto; display:block; }   /* size by height so both match */

  /* view toggle — only at the mobile breakpoint; desktop is always page view */
  .stage{ width:100%; max-width:900px; margin-inline:auto; }
  .viewbar{ display:none; }
  .viewtoggle{ display:inline-flex; background:#1c1c20; border-radius:999px; padding:4px; gap:2px; box-shadow:0 6px 20px rgba(0,0,0,.3); }
  .viewtoggle button{ font:inherit; font-size:12px; font-weight:700; letter-spacing:.02em; color:#cfcfd6; background:none; border:0; padding:8px 14px; border-radius:999px; cursor:pointer; }
  .viewtoggle button.on{ background:#f4f4f6; color:#111; }

  @media (max-width:760px){
    .viewbar{ display:flex; justify-content:center; width:100%; max-width:900px; position:sticky; top:8px; z-index:20; margin-bottom:14px; }
    /* MOBILE VIEW only: stack into one readable, tappable column */
    [data-view="mobile"] .mast{ grid-template-columns:1fr; gap:8px; }
    [data-view="mobile"] .mast__meta{ text-align:left; }
    [data-view="mobile"] .howto{ grid-template-columns:1fr; }
    [data-view="mobile"] .howto__cell + .howto__cell{ border-left:0; border-top:1px solid var(--line); }
    [data-view="mobile"] .cols{ grid-template-columns:1fr; }
    /* MOBILE VIEW is a natural stacked flow, NOT the fixed paper: let the card grow to
       its content and the sheet sit in normal flow (no real-ratio box, no scaling). */
    [data-view="mobile"] .ballot{ aspect-ratio:auto; }
    [data-view="mobile"] .sheet{ position:static; transform:none; }
    [data-view="mobile"] .foot{ position:static; padding-top:12px; }
    /* PAGE VIEW keeps all three columns; JS scales each page to fit the real paper. */
  }