/*
  VoterDB stylesheet

  1. Settings: colors and sizes. Change these first; everything below uses them.
  2. Base: page, text, links
  3. Layout: top bar, cards, grids
  4. Forms and buttons
  5. Tables
  6. Badges, tags, counts, messages
  7. Search page
  8. Voter page
  9. Review queue
  10. Small screens and printing

  Readability rules: body text is 16px or larger, secondary text keeps at least 7:1 contrast on white,
  form labels are dark and semibold, and sizes use rem so browser zoom works.

  Brand: follows the Troy Democratic Committee Design Foundations style guide
  (TroyDems/Style_Guides/Troy_Style_Guide_Design_Foundations.md): the TDC palette only, Montserrat
  (ExtraBold standing in for Franklin Gothic in headings, as the guide allows), Troy Red for action and
  urgency only, Gold as a single highlight, and WCAG AA contrast on all text.
*/

/* 1. Settings ------------------------------------------------------------------------------------- */
:root {
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-size: 1rem;          /* 16px */
  --text-small: .9375rem;     /* 15px: the smallest text on the site */
  --line: 1.55;

  /* TDC palette */
  --tdc-blue: #1a3a6b;        /* Democratic Blue: primary */
  --tdc-navy: #0f2244;        /* Deep Navy: header */
  --tdc-blue-light: #2a5298;  /* Blue Light: hover, secondary */
  --tdc-red: #c8102e;         /* Troy Red: action and urgency only */
  --tdc-red-dark: #a00c24;    /* Troy Red Dark */
  --tdc-gold: #C8A400;        /* Gold: one highlight (frequent voters) */
  --tdc-near-black: #1f2937;  /* Near-Black: body text */
  --tdc-charcoal: #2D3748;    /* Charcoal: softer text */
  --tdc-slate: #6b7280;       /* Slate: secondary marks, dividers */
  --tdc-light-gray: #e5e7eb;  /* Light Gray: backgrounds only */
  --tdc-off-white: #f4f6f9;   /* Off-White: page background */
  --tdc-warm-white: #FAFAF7;  /* Warm White */

  --bg: var(--tdc-off-white);
  --surface: #ffffff;                   /* cards, tables, inputs */
  --surface-alt: var(--tdc-warm-white); /* striped table rows, table headers */
  --hover: var(--tdc-light-gray);       /* table row under the mouse */
  --text: var(--tdc-near-black);
  --heading: var(--tdc-blue);
  --muted: var(--tdc-charcoal);         /* secondary text: 12:1 on white */
  --faint: var(--tdc-slate);            /* de-emphasized marks, e.g. elections not voted in */
  --border: var(--tdc-light-gray);
  --input-border: var(--tdc-slate);
  --accent: var(--tdc-blue);            /* links, primary buttons */
  --accent-hover: var(--tdc-navy);
  --accent-text: #ffffff;
  --focus: var(--tdc-blue-light);
  --action: var(--tdc-red);             /* counts that need attention */
  --action-text: #ffffff;
  --header-bg: var(--tdc-navy);
  --header-text: #ffffff;
  --warn-bg: #ffffff;                   /* pending / open: white with a gold edge */
  --warn-border: var(--tdc-gold);
  --warn-text: var(--tdc-near-black);
  --highlight-bg: var(--tdc-gold);      /* frequent voters: near-black on gold, 7:1 */
  --highlight-text: var(--tdc-near-black);
  --error: var(--tdc-red-dark);
  --success: var(--tdc-blue);
  --yes: var(--tdc-blue);
  --role-bg: var(--tdc-blue-light);
  --role-text: #ffffff;
  --dem: var(--tdc-blue);
  --rep: var(--tdc-red);
  --badge-bg: var(--tdc-light-gray);

  --radius: 8px;
  --gap: 1rem;
  --pad: 1.25rem;
}

/* Dark mode: the palette's navy as the background, with lighter tints where text needs contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1830;
    --surface: var(--tdc-navy);
    --surface-alt: #132a52;
    --hover: var(--tdc-blue);
    --text: var(--tdc-off-white);
    --heading: #ffffff;
    --muted: var(--tdc-light-gray);
    --faint: #9aa3b2;
    --border: #23406e;
    --input-border: #7d8aa3;
    --accent: #9fbbea;
    --accent-hover: #c9d8f4;
    --accent-text: var(--tdc-navy);
    --focus: #9fbbea;
    --action: #e4304b;
    --header-bg: #08142a;
    --warn-bg: var(--tdc-navy);
    --warn-text: var(--tdc-off-white);
    --error: #ff8a99;
    --success: #9fbbea;
    --yes: #9fbbea;
    --role-bg: #9fbbea;
    --role-text: var(--tdc-navy);
    --dem: #9fbbea;
    --rep: #ff8a99;
    --badge-bg: #1d3560;
  }
}

/* 2. Base ----------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-size);
  line-height: var(--line);
}
h1, h2 { font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .85rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: var(--text-small); }
.error { color: var(--error); font-weight: 600; }

/* 3. Layout --------------------------------------------------------------------------------------- */
main { padding: 1.25rem; max-width: 1440px; margin: 0 auto; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; background: var(--header-bg); color: var(--header-text);
  border-bottom: 4px solid var(--tdc-red);
}
.topbar .brand { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 800; text-decoration: none; color: var(--header-text); }
.topbar .brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar nav a, .topbar button.link { color: var(--header-text); text-decoration: none; font-weight: 600; }
.topbar nav a:hover, .topbar button.link:hover { color: var(--header-text); text-decoration: underline; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--pad); margin-bottom: var(--gap);
}
.card.narrow { max-width: 400px; margin: 3rem auto; }
.row { display: flex; gap: .6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row input { flex: 1; }
.stack { display: grid; gap: .9rem; }
.inline { display: inline; margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

/* 4. Forms and buttons ---------------------------------------------------------------------------- */
label { display: grid; gap: .3rem; font-weight: 600; color: var(--text); }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--text); background: var(--surface);
  border: 1px solid var(--input-border); border-radius: 6px; padding: .55rem .7rem; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; padding: 0; margin: 0; accent-color: var(--accent); flex: none; }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; cursor: pointer; }

button, .button {
  font: inherit; font-weight: 600; border: 1px solid var(--input-border); border-radius: 6px;
  padding: .55rem 1rem; background: var(--surface); color: var(--text); cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.3;
}
button:hover, .button:hover { background: var(--surface-alt); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.link {
  background: none; border: 0; padding: 0; color: var(--accent); font-weight: 500;
  text-decoration: underline; text-underline-offset: .15em;
}

/* 5. Tables --------------------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.card .table-wrap { border: 0; border-radius: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-weight: 600; color: var(--text); background: var(--surface-alt);
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--surface-alt); }
table.voters tbody tr:hover { background: var(--hover); }
/* One line per voter: on narrow screens the table scrolls sideways inside .table-wrap instead. */
table.voters td, table.voters th { white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* 6. Badges, tags, counts, messages --------------------------------------------------------------- */
.badge, .party {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: var(--text-small);
  background: var(--badge-bg); color: var(--text); white-space: nowrap; line-height: 1.4;
}
.badge.warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 2px var(--warn-border); font-weight: 600; text-decoration: none; }
.party { font-weight: 700; }
.party-dem { color: var(--dem); }
.party-rep { color: var(--rep); }
.badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.tag {
  display: inline-block; padding: .1rem .6rem; border-radius: 4px; font-size: var(--text-small);
  border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; line-height: 1.4;
}
.count {
  display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px; text-align: center;
  background: var(--action); color: var(--action-text); font-size: .875rem; font-weight: 700; line-height: 1.5;
}
.messages { list-style: none; padding: 0; margin: 0 0 var(--gap); display: grid; gap: .5rem; }
.message {
  padding: .7rem 1rem; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); border-left-width: 5px; font-weight: 500;
}
.message.success { border-left-color: var(--success); }
.message.info { border-left-color: var(--accent); }
.message.error { border-left-color: var(--error); color: var(--error); }

/* 7. Search page ---------------------------------------------------------------------------------- */
.search-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.search-layout > * { min-width: 0; }
.filters { display: grid; gap: .9rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.filters h2 { margin-bottom: .25rem; }
.filters .helptext { display: none; }
.summary { margin: 0 0 .85rem; font-size: 1.05rem; }

/* Sortable column headings: click to sort, click again to reverse. */
thead th a.sort { color: inherit; font-weight: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
thead th a.sort:hover { color: var(--accent); text-decoration: underline; }
.sort-arrow { font-size: .8em; color: var(--faint); }
thead th[aria-sort] .sort-arrow { color: var(--accent); }
thead th[aria-sort] { color: var(--accent); }
.summary strong { font-size: 1.2rem; }

fieldset.checklist { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-width: 0; }
fieldset.checklist legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.checklist-box {
  max-height: 15rem; overflow-y: auto; border: 1px solid var(--input-border); border-radius: 6px;
  padding: .35rem .6rem; background: var(--surface); display: grid; gap: .1rem;
}
.checklist-box label.check { padding: .25rem 0; }

.pager { display: flex; gap: 1.25rem; align-items: center; justify-content: center; margin: 1.25rem 0; }
.pager a { font-weight: 600; }

/* 8. Voter page ----------------------------------------------------------------------------------- */
.voter-head h1 { font-size: 2rem; }
.address { margin: 0; color: var(--muted); font-size: 1.1rem; }
.committee-grid, .detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); margin-bottom: var(--gap);
}
.committee-grid .card, .detail-grid .card { margin-bottom: 0; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }

.tag-list { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.tag-list li { display: flex; align-items: center; gap: .4rem; }
td .tag { margin: 0 .25rem .25rem 0; }
.note-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; max-height: 24rem; overflow-y: auto; }
.note-list li { border-top: 1px solid var(--border); padding-top: .65rem; }
.note-list p { margin: 0 0 .25rem; }

table.history td { white-space: nowrap; }
.vote { display: inline-block; margin-right: .75rem; font-variant-numeric: tabular-nums; }
.vote.yes { color: var(--yes); font-weight: 700; }
.vote.no { color: var(--faint); }

/* 9. Review queue --------------------------------------------------------------------------------- */
.tabs { display: flex; gap: .25rem; margin: .5rem 0 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs a {
  padding: .55rem 1rem; text-decoration: none; color: var(--muted); font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.kind-link {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .5rem .65rem; border-radius: 6px; text-decoration: none; color: var(--text);
}
.kind-link:hover { background: var(--hover); color: var(--text); }
.kind-link.current { background: var(--badge-bg); font-weight: 700; }

/* 10. Small screens and printing ------------------------------------------------------------------ */
@media (max-width: 800px) {
  main { padding: 1rem 16px; }
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-height: none; overflow: visible; }
  .voter-head h1 { font-size: 1.6rem; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .filters, .pager, .messages, form, button { display: none !important; }
  .search-layout { display: block; }
  .card, .table-wrap { border: 0; padding: 0; }
  a { color: #000; text-decoration: none; }
  tbody tr:nth-child(even) { background: #f2f2f2; }
}

/* One-click actions in the review queue, and the kept record in a duplicate pair. */
.action-cell { white-space: nowrap; }
button.small-button { padding: .35rem .8rem; }
.card.keeper { border: 2px solid var(--success); }
.banner {
  padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: var(--gap);
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--border); border-left: 5px solid var(--warn-border);
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
}
.banner a { color: inherit; font-weight: 700; }

/* --- Two-step login, imports --- */
.card.narrow.wide { max-width: 560px; }
ol.steps { padding-left: 1.4rem; display: grid; gap: 1.1rem; margin: 1rem 0 0; }
.qr { margin: .75rem 0; width: 220px; max-width: 100%; background: #fff; padding: .5rem; border-radius: var(--radius); border: 1px solid var(--border); }
.qr svg { display: block; width: 100%; height: auto; }
code.secret { display: inline-block; font-size: 1rem; letter-spacing: .05em; padding: .15rem .4rem; background: var(--badge-bg); border-radius: 4px; word-break: break-all; }
.backup-codes { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.backup-codes code { display: block; font-size: 1.15rem; letter-spacing: .08em; padding: .45rem .6rem; background: var(--badge-bg); border-radius: 6px; text-align: center; }
a.primary-link { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
a.primary-link:hover { background: var(--accent-hover); color: var(--accent-text); }
.upload-form input[type="file"] { padding: .45rem; }
@media print { .backup-codes code { border: 1px solid #000; } }

/* --- Likely-voter score and roles --- */
.role {
  display: inline-block; padding: .1rem .6rem; border-radius: 4px; font-size: var(--text-small);
  background: var(--role-bg); color: var(--role-text); white-space: nowrap; line-height: 1.4; margin: 0 .25rem .25rem 0;
}
.star { display: inline-block; background: var(--highlight-bg); color: var(--highlight-text); border-radius: 4px; padding: 0 .25rem; font-size: .85em; line-height: 1.4; }
.score-badge { text-decoration: none; font-weight: 600; }
.score-badge.frequent { background: var(--highlight-bg); color: var(--highlight-text); }
.score-list { list-style: none; padding: 0; margin: .5rem 0; columns: 2 18rem; column-gap: 2rem; }
.score-list li { padding: .15rem 0; break-inside: avoid; }
.score-list li.yes { color: var(--yes); font-weight: 600; }
.score-list li.no { color: var(--faint); }
.roles-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.roles-table input[type="date"] { min-width: 10rem; }
.roles-table td { vertical-align: middle; }
strong.yes { color: var(--yes); }
.sr-label { font-weight: 400; color: var(--muted); font-size: var(--text-small); }
.lede { font-size: 1.05rem; max-width: 60rem; }
.settings-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.settings-form legend { font-weight: 700; padding: 0 .4rem; }
.settings-form input[type="number"] { max-width: 8rem; }
/* On narrow screens each role becomes a small stacked card, so the Add/Save buttons stay in view. */
@media (max-width: 900px) {
  .roles-table thead { display: none; }
  .roles-table, .roles-table tbody, .roles-table tr, .roles-table th, .roles-table td { display: block; width: 100%; }
  .roles-table tr { border-bottom: 1px solid var(--border); padding: .6rem 0; }
  .roles-table th[scope="row"], .roles-table td { border: 0; padding: .25rem .2rem; }
  .roles-table th[scope="row"] { white-space: normal; }
  .roles-table input[type="date"], .roles-table input[type="text"] { width: 100%; }
}

/* --- Reports --- */
.report-filters .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.report-totals dl { gap: .3rem 1rem; }
.report-totals dd { text-align: right; font-variant-numeric: tabular-nums; }
@media print {
  .report-filters, .print-only-hide, .print-note { display: none !important; }
  .report-totals { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .report-totals .card { border: 1px solid #999; padding: .4rem; }
  table.voters td, table.voters th { padding: .2rem .35rem; font-size: 9.5pt; }
}
.role.past { background: var(--badge-bg); color: var(--muted); border: 1px solid var(--border); }
.roles-table tr.role-continued th, .roles-table tr.role-continued td { border-top: 0; }
.roles-table tr.role-past input[type="text"] { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Sign-in screens (password and two-step): the TDC seal above the form, on phones and desktops --- */
.auth-brand { text-align: center; margin-bottom: 1.25rem; }
.auth-brand img { width: 140px; height: 140px; display: block; margin: 0 auto .75rem; }
.auth-brand .org { font-weight: 800; color: var(--heading); font-size: 1.05rem; line-height: 1.3; margin: 0; }
.auth-brand .app { color: var(--muted); margin: .15rem 0 0; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.card.auth { max-width: 420px; margin: 2.5rem auto; padding: 2rem 1.75rem; border-top: 6px solid var(--tdc-blue); }
.card.auth h1 { text-align: center; font-size: 1.4rem; }
.card.auth button.primary { width: 100%; padding: .75rem 1rem; font-size: 1.05rem; }
@media (max-width: 480px) {
  .card.auth { margin: 1rem auto; padding: 1.5rem 1.1rem; }
  .auth-brand img { width: 112px; height: 112px; }
}
.card.auth.wide { max-width: 560px; }
.card.auth.wide h1 { text-align: center; }

/* Collapsible cards (roles on the voter page): the heading is the button. */
details.collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before { content: "▸"; color: var(--accent); font-size: 1.1rem; transition: transform .15s; }
details.collapsible[open] > summary::before { transform: rotate(90deg); }
details.collapsible > summary h2 { margin: 0; }
details.collapsible[open] > summary { margin-bottom: .85rem; }
.login-badge { background: var(--tdc-navy); color: #fff; }
.login-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.banner.reset-link { margin-top: .9rem; align-items: flex-end; }
.banner.reset-link > div { flex: 1; min-width: 14rem; }
.banner.reset-link p { margin: .2rem 0 .5rem; }
.banner.reset-link input { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* --- Canvassing (Phase 3) --- */
.canvass-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.canvass-grid h3 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 .6rem; }
.canvass-grid h3 + p, .canvass-grid ul + h3 { margin-top: 1.1rem; }
.contact-form .two-up > label { flex: 1; min-width: 10rem; }
.support-fields { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; margin: 0; display: grid; gap: .6rem; }
.support-fields legend { font-weight: 700; padding: 0 .3rem; }
.support-fields.dimmed { opacity: .5; }
.support { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: var(--text-small); font-weight: 700; white-space: nowrap; }
.support.tiny { font-size: .8rem; padding: 0 .45rem; margin: .15rem .25rem 0 0; }
.support-1 { background: var(--tdc-blue); color: #fff; }          /* Strong yes */
.support-2 { background: var(--tdc-blue-light); color: #fff; }    /* Lean yes */
.support-3 { background: var(--tdc-light-gray); color: var(--tdc-near-black); } /* Undecided */
.support-4 { background: #fbe4e7; color: var(--tdc-red-dark); }  /* Lean no */
.support-5 { background: var(--tdc-red-dark); color: #fff; }      /* Strong no */
.support-list li, .contact-list li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.contact-list { max-height: 22rem; overflow-y: auto; }
.sign-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.sign-list form { margin-top: .35rem; }
details.add-sign { margin-top: .75rem; }
details.add-sign summary { cursor: pointer; font-weight: 700; color: var(--accent); }
details.add-sign form { margin-top: .75rem; }
@media (max-width: 800px) { .canvass-grid { grid-template-columns: minmax(0, 1fr); } }
.count-plain { color: var(--faint); font-weight: 500; }
tr.sub-row td { padding-top: .25rem; padding-bottom: .25rem; border-bottom-style: dashed; }

/* --- Map and turfs ------------------------------------------------------------------------------ */
.map-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.map-side h2 { margin-top: 1.25rem; }
.map { height: calc(100vh - 13rem); min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); z-index: 0; }
.map.short { height: 420px; margin-top: .9rem; }
.map-legend { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--text-small); }
.dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
ul.map-popup { margin: .35rem 0 0; padding-left: 1.1rem; }
.summary-actions { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin-left: .75rem; vertical-align: middle; }
a.button.small-button { padding: .3rem .75rem; font-size: var(--text-small); }
.check-row { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.meter { height: .7rem; background: var(--surface-alt); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.meter span { display: block; height: 100%; background: var(--success); }
.progress-line { font-size: 1.1rem; margin-bottom: .4rem; }
tr.street-row th { background: var(--badge-bg); font-weight: 700; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map { height: 70vh; } }
@media print {
  .topbar, .no-print, .messages { display: none !important; }
  .walk-list { border: 0; padding: 0; }
  table.voters td, table.voters th { padding: .25rem .4rem; }
}
dl.signup-record { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.leaflet-container path.turf-shape { cursor: move; }
.leaflet-marker-icon.shape-handle { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #1a3a6b; border: 2px solid #1a3a6b; font-size: 15px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: grab; }
.leaflet-marker-icon.shape-handle-size { cursor: nwse-resize; }

/* --- About section (voter page) --------------------------------------------------------------- */
.about { margin: 1.25rem 0; }
.about .section-heading { margin-bottom: .2rem; }
.about-grid { margin-top: .75rem; }
.about-grid h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.about-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: grid; gap: .2rem; }
.about-list li.row { display: flex; justify-content: space-between; }
.about-list .small-form { margin-top: .2rem; gap: .9rem; }
.add-form { margin-top: .75rem; }
.add-form summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.add-form[open] summary { margin-bottom: .6rem; }
.about-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; margin: 0; display: grid; gap: .6rem; }
.about-fieldset legend { font-weight: 700; padding: 0 .3rem; }
.check-columns { columns: 2 12rem; column-gap: 1.25rem; }
.check-columns label.check { padding: .2rem 0; break-inside: avoid; }
input.short-input { max-width: 11rem; }
.preferred-name { font-weight: 600; color: var(--muted); }
.about-grid .two-up > label { flex: 1; min-width: 10rem; }