/*
 * Ohio Voter Lookup — Vote Rev Action Fund, in the Postcards for Friends (:8081) look:
 * white pages, 2px blue outlines, chartreuse pill buttons with an offset blue "pop"
 * shadow, Epilogue headings, Inter body. One light look on every page (no dark mode,
 * like :8081). Accessibility rules (contrast, focus, tap size, reduced motion) are
 * marked "a11y" — keep them when restyling (WCAG 2.1 AA review, 2026-10-01).
 *
 * Sections: tokens · base · header/footer · search page · results · record page ·
 * share · password page · focus · motion.
 */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light;

    /* Vote Rev brand */
    --blue: #1A049E;
    --ink: #0F0F0F;
    --silver-1: #E3E8F4;
    --silver-2: #C2CEEB;
    --chartreuse: #F1FF9E;
    --chartreuse-hover: #E6F870;

    /* Greys for text, darkened from the brand silvers to pass contrast (a11y) */
    --text-muted: #4A4F66;     /* 8.1:1 on white */
    --text-soft: #5C6BA3;      /* 5.1:1 — "No record", placeholders. Never the lighter #7182B7 (3.8:1) */
    --chevron: #98A3CD;        /* decorative only */
    --row-hover: #F7F9FD;

    --pop: 4px 4px 0 var(--blue);
    --pop-sm: 3px 3px 0 var(--blue);

    --warn-bg: #fff6e0;  --warn-ink: #7a5200;
    --err-bg: #fdecec;   --err-ink: #97231f;
    --ok-bg: #e9f6ec;    --ok-ink: #1d6b32;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
    color: var(--ink);
    font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.wrap { flex: 1 0 auto; width: 100%; max-width: 940px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

h1, h2 { font-family: "Epilogue", sans-serif; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; color: var(--blue); margin: 0 0 .35rem; }
h2 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin: 0 0 .75rem; }
.lede { color: var(--text-muted); margin: 0 0 1.25rem; }

.alert { padding: .7rem .9rem; margin: 0 0 1.25rem; border: 2px solid currentColor; border-radius: 12px; }
.alert.warn { background: var(--warn-bg); color: var(--warn-ink); }
.alert.error { background: var(--err-bg); color: var(--err-ink); }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink); }
code { background: rgba(0,0,0,.06); padding: .1em .35em; border-radius: 3px; font-size: .9em; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Chartreuse pill button, like the :8081 primary button: Share, Continue, error-page link. */
.share-button, .gate-form button, .button-link {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 48px; padding: .6rem 1.6rem;
    border: 2px solid var(--blue); border-radius: 999px;
    background: var(--chartreuse); color: var(--blue);
    font: 700 1rem "Inter", sans-serif; text-decoration: none;
    box-shadow: var(--pop-sm); cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}
.share-button:hover, .gate-form button:hover, .button-link:hover { background: var(--chartreuse-hover); }
.share-button:active, .gate-form button:active, .button-link:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--blue); }

/* ---------- Header and footer (same on every page) ---------- */
.site-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
    padding: 1rem 1.5rem;
    background: var(--blue); color: #fff;
}
/* The site name as a white title. */
.brand {
    color: #fff; text-decoration: none;
    font: 800 1.6rem/1.15 "Epilogue", sans-serif; letter-spacing: -.01em;
}

.site-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: 1.1rem 1.5rem 1.4rem;
    background: var(--blue); color: var(--silver-2);
}
.footer-logo { display: block; height: 1.9rem; width: auto; }   /* Vote Rev Action Fund lockup: only on blue */
.footer-text { margin: 0; font-size: .8rem; line-height: 1.4; }
.footer-paid {
    flex: 1 1 100%; margin: .15rem 0 0; padding: .4rem .7rem;
    border: 1.5px solid var(--silver-2); border-radius: 8px;
    font-size: .75rem; line-height: 1.4; color: #fff;
}

/* ---------- Search page ---------- */
.page-search .wrap { max-width: 600px; }
.search-title { font-size: clamp(1.75rem, 6.5vw, 2.4rem); line-height: 1.1; }
.page-search .lede { margin-bottom: 1.1rem; }

.search-form { margin: 0 0 .25rem; }
/* The boxes appear once "Who are you looking up?" is answered. Browsers without
   :has() simply show everything. */
.search-form:not(:has(.choice input:checked)) > :not(.choice) { display: none; }

.choice { margin: 0 0 1rem; padding: 0; border: 0; }
.choice legend { padding: 0; margin-bottom: .45rem; font-weight: 700; font-size: .95rem; color: var(--blue); }
.choice-pills { display: flex; gap: .6rem; }
.pill-option { display: block; flex: 1 1 0; position: relative; cursor: pointer; }
.pill-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-option span {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border: 2px solid var(--blue); border-radius: 999px;
    background: #fff; color: var(--blue); font-weight: 700; font-size: 1rem;
    transition: transform .08s ease, box-shadow .08s ease;
}
.pill-option input:checked + span { background: var(--chartreuse); box-shadow: var(--pop-sm); }

.search-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.search-fields input {
    width: 100%; min-height: 48px; padding: .55rem .85rem;
    border: 2px solid var(--blue); border-radius: 12px;
    font: 1rem "Inter", sans-serif;   /* 16px keeps iOS from zooming on focus */
    color: var(--ink); background: #fff;
}
.search-fields input::placeholder { color: var(--text-soft); }   /* a11y contrast */

.human-check { margin: .6rem 0 0; }   /* Cloudflare's check, when it needs a tap */

.search-bar { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; margin: .6rem 0 .5rem; font-size: .9rem; color: var(--text-muted); }
.clear-filters {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .35rem; margin-right: -.35rem;   /* a11y: 44px tap target */
    border: 0; background: none; cursor: pointer;
    color: var(--blue); font: 700 .9rem "Inter", sans-serif;
    text-decoration: underline; text-underline-offset: 2px;
}
.search-submit {   /* only shown when JavaScript is off */
    min-height: 48px; padding: .6rem 1.6rem; border: 2px solid var(--blue); border-radius: 999px;
    background: var(--chartreuse); color: var(--blue); font: 700 1rem "Inter", sans-serif;
    box-shadow: var(--pop-sm); cursor: pointer;
}

/* ---------- Results ---------- */
#live-results { transition: opacity .15s; }
#live-results.is-loading { opacity: .55; }

.matches {
    list-style: none; margin: 0; padding: 0;
    border: 2px solid var(--blue); border-radius: 20px; box-shadow: var(--pop);
    overflow: hidden; background: #fff;
}
.matches li + li { border-top: 1px solid var(--silver-1); }
.match { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; color: var(--ink); text-decoration: none; }
.match:hover { background: var(--row-hover); }
.match-initials {
    flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--chartreuse); color: var(--blue); font-weight: 700; font-size: .8rem;
}
.match-who { flex: 1; min-width: 0; }
.match-name { display: block; font-weight: 700; }
.match-addr { display: block; color: var(--text-muted); font-size: .86rem; }   /* wraps, never truncated (a11y) */
.match-meta {
    flex: 0 0 auto; padding: .1rem .55rem; border-radius: 999px;
    background: var(--silver-1); color: var(--blue); font-size: .75rem; font-weight: 600;
}
.match-meta:empty { display: none; }
.match-chev { color: var(--chevron); font-weight: 700; }

.search-empty { padding: 1.4rem 1rem; border: 2px dashed var(--silver-2); border-radius: 20px; text-align: center; color: var(--text-muted); }
.search-note { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 12px; background: var(--silver-1); color: var(--blue); font-size: .88rem; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; }
.pager-btn {
    min-height: 42px; padding: 0 1.1rem; border: 2px solid var(--blue); border-radius: 999px;
    background: #fff; color: var(--blue); font: 700 .9rem "Inter", sans-serif; cursor: pointer;
}
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-count { font-size: .88rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Record page (the scorecard) ----------
   One hierarchy, matched by the shared image in share-record.js: a small name line,
   then ONE card with the message and the record, then Share, then fine print. Sized so
   Share is on screen without scrolling on an iPhone SE. Change both together. */
.record-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .7rem; }
.nav-pill {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem;
    border: 2px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue);
    font-weight: 700; font-size: .9rem; text-decoration: none;
}
.nav-pill:hover { background: var(--chartreuse); }

.voter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 1rem; }
.voter-name { margin: 0; font: 700 1.05rem/1.55 "Inter", sans-serif; color: var(--ink); }
.voter-sub { margin: 0; color: var(--text-muted); font-size: .9rem; }

.score-panel {
    margin-bottom: 1rem; padding: 1rem .85rem .7rem;
    border: 2px solid var(--blue); border-radius: 20px; box-shadow: var(--pop); background: #fff;
}
.score-message { padding: 0 .4rem .85rem; margin-bottom: .6rem; border-bottom: 1px solid var(--silver-1); }
.score-headline { margin: 0 0 .3rem; font: 800 1.6rem/1.15 "Epilogue", sans-serif; color: var(--blue); }
.score-line { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.score-panel h2 { margin: 0 .35rem .25rem; font-size: .72rem; color: var(--text-muted); }

.score-rows { list-style: none; margin: 0; padding: 0; }
.score-row {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 2.5rem; padding: 0 .4rem; border-top: 1px solid var(--silver-1);
}
.score-row:first-child { border-top: 0; }
.score-year { font: 700 1.05rem/1.55 "Epilogue", sans-serif; color: var(--ink); }
.score-result { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; }
.score-row.is-voted .score-result { font-weight: 700; color: var(--blue); }
.marker { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--blue); }
/* "No record": quiet grey, so it reads as a fact, not a failure (a11y contrast). */
.score-row.is-blank .score-result { color: var(--text-soft); font-weight: 400; }
/* The upcoming election: an opportunity, not a result. */
.score-row.is-upcoming { margin-top: .35rem; border: 2px solid var(--blue); border-radius: 8px; background: var(--chartreuse); }
.score-row.is-upcoming .score-year,
.score-row.is-upcoming .score-result { color: var(--blue); font-weight: 700; }
.checkbox { display: inline-block; width: 1rem; height: 1rem; border: 2.5px solid var(--blue); border-radius: 3px; }

.score-fineprint p { margin: 0 0 .35rem; font-size: .85rem; line-height: 1.4; color: var(--text-muted); }
.score-fineprint .score-note { margin-top: .6rem; font-size: .78rem; }

/* ---------- Share ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.scorecard .share { margin: 1.25rem 0 1.1rem; }
.scorecard .share-button { padding: .75rem 1.4rem; }
.share-button::before {   /* share icon */
    content: "";
    width: 1rem; height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.share-status { font-size: .88rem; color: var(--text-muted); }

/* ---------- Password and access-code pages ---------- */
.gate { max-width: 26rem; margin: 4rem auto 0; text-align: center; }
.gate h1 { margin-bottom: 1.25rem; font-size: clamp(1.6rem, 6vw, 2.1rem); }
.gate-form {
    display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem;
    border: 2px solid var(--blue); border-radius: 20px; box-shadow: var(--pop); background: #fff;
}
/* Volunteer agreement: same card as the password page, with a white "I disagree" pill. */
.agree-dialog h1 { margin: 0 0 .25rem; font-size: clamp(1.6rem, 6vw, 2.1rem); }
.agree-text { margin: 0 0 .5rem; text-align: left; line-height: 1.5; }
.gate-form button.button-secondary { background: #fff; }
.gate-form button.button-secondary:hover { background: var(--row-hover); }
.gate-form input {
    min-height: 48px; padding: .7rem .8rem;
    border: 2px solid var(--blue); border-radius: 12px;
    font-size: 1rem; text-align: center; letter-spacing: .05em;
    background: #fff; color: var(--ink);
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
    .site-header { padding: .7rem 1rem; gap: .15rem .75rem; }
    .brand { font-size: 1.35rem; }
    .wrap { padding: .75rem 1rem 2.5rem; }
    .page-search .wrap { padding-top: 1.1rem; }

    /* Keep Share on screen without scrolling (iPhone SE, 375×667). */
    .record-nav { margin-bottom: .55rem; }
    .nav-pill { min-height: 36px; }
    .voter-head { margin-bottom: .75rem; }
    .score-panel { padding: .85rem .75rem .6rem; }
    .score-message { padding-bottom: .7rem; margin-bottom: .45rem; }
    .score-headline { font-size: 1.45rem; }
    .score-row { min-height: 2.25rem; }
    .scorecard .share { margin-top: .8rem; }
    .scorecard .share-button { width: 100%; min-height: 46px; padding: .8rem 1rem; font-size: 1.05rem; }
}

/* ---------- Keyboard focus (a11y) ----------
   One clear style everywhere: a solid 3px blue outline (13.5:1 on white). */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.search-fields input:focus, .gate-form input:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.pill-option input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.match:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; background: var(--row-hover); }
.share-button:focus-visible, .gate-form button:focus-visible, .button-link:focus-visible,
.nav-pill:focus-visible, .pager-btn:focus-visible, .clear-filters:focus-visible { outline-offset: 3px; }
.site-header a:focus-visible, .site-footer a:focus-visible { outline-color: var(--chartreuse); }   /* visible on the blue band */

/* ---------- Reduced motion (a11y) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .share-button:active, .gate-form button:active, .button-link:active { transform: none; }
}