:root {
  --ink: #1b2430;
  --muted: #5b6775;
  --line: #d5dbe3;
  --paper: #e8e8e8;
  --card: #ffffff;
  --accent: #0d6e8a;
  --accent-ink: #ffffff;
  --danger: #9b2c2c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font: 16px/1.45 "Segoe UI", Calibri, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: #0d6e8a;
  color: #fff;
}

.topbar a { color: #fff; }
.brand { font-weight: 700; letter-spacing: 0.02em; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 0.9rem; flex: 1; align-items: center; }
.topbar nav button[data-open-support] {
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 0;
  font: inherit;
  font-weight: 400;
  box-shadow: none;
}
.who { display: flex; gap: 0.9rem; align-items: center; font-size: 0.9rem; }

.page { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
.page.wide { max-width: 1480px; }

.filters, fieldset {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 0 0 1rem;
}
fieldset { min-width: 0; }
legend {
  float: left;
  width: 100%;
  font-weight: 600;
  padding: 0;
  margin: 0 0 0.65rem;
}
legend + * { clear: both; }

.filters, .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem 1rem;
}
.phone-row { margin-bottom: 0.4rem; }
label { display: block; font-size: 0.92rem; }
label input, label select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
}
/* Safari draws a second box when a password input is display:block. */
label input[type="password"] {
  display: inline-block;
  vertical-align: top;
}
label input:disabled,
label input.is-locked,
label select:disabled,
label select.is-locked {
  background: #e8eaed;
  color: #8a9199;
  border-color: #d0d4d8;
  cursor: not-allowed;
}
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 0.4rem; }
.check input { width: auto; margin: 0; }
.grid > .check { margin-top: 1.4rem; }
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.85rem 0 0;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  margin: 0.5rem 0 1.25rem;
}
/* stack-phone sets display:block on tr; that would keep filtered rows visible. */
table.data tr[hidden] {
  display: none !important;
}
table.data th, table.data td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 0.45rem 0.4rem;
  vertical-align: top;
}
table.data th { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
table.data th[data-sortable] {
  cursor: pointer;
  user-select: none;
}
table.data th[data-sortable]:hover {
  color: var(--accent);
}
table.data th[aria-sort="ascending"]::after {
  content: " \25B2";
  font-size: 0.72em;
}
table.data th[aria-sort="descending"]::after {
  content: " \25BC";
  font-size: 0.72em;
}
h2 { font-size: 1.15rem; margin: 1.4rem 0 0.4rem; }
.hint { color: var(--muted); font-size: 0.92rem; }
.danger-form { margin: 0.4rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: flex-end; }
button.danger { background: var(--danger); }
.muted { color: var(--muted); }
.status-paid { color: #1b7a3d; font-weight: 600; }
.status-pay-now { color: #9a6b00; font-weight: 600; }
.status-past-due { color: #9b2c2c; font-weight: 600; }
.status-partial { color: #9a6b00; font-weight: 600; }
.status-unpaid { color: #9b2c2c; font-weight: 600; }
.status-recurring { color: #1d4e89; font-weight: 600; }
.status-no-dues { color: var(--muted); font-weight: 600; }
.compare-diff { background: #fff6d8; }
.compare-cell { white-space: pre-line; }
tr.is-selected { background: #eef7fa; }
.canvass-table tr.is-user-home td {
  background: #fef3c7;
}
.cal-payment, .cal-due { font-size: 0.78rem; margin-top: 0.25rem; line-height: 1.25; }
.cal-payment a, .cal-due a { color: inherit; }
.calendar-grid td { min-width: 7.5rem; height: 6rem; vertical-align: top; font-size: 0.85rem; }

@media print {
  body { background: #fff; }
  .no-print, .topbar, .banner, .idle-timer, .filters, .actions, .danger-form, .lede { display: none !important; }
  .page, .page.wide { max-width: none; margin: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  table.data th, table.data td { border-bottom: 1px solid #999; }
}

h1 { margin: 0 0 0.35rem; font-size: 1.7rem; }
.page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.35rem;
}
.page-title h1 { margin: 0; flex: 1 1 auto; }
.page-title .help-open { flex: 0 0 auto; margin-top: 0.15rem; }
.help-dialog { width: min(640px, 94vw); }
.help-body h3 {
  font-size: 1rem;
  margin: 1rem 0 0.35rem;
}
.help-body p,
.help-body li { font-size: 0.95rem; }
.help-body ul {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.2rem;
}
.lede { color: var(--muted); margin: 0 0 1.25rem; }

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.tile {
  display: block;
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  color: inherit;
}

.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile strong { display: block; margin-bottom: 0.25rem; }
.tile span { color: var(--muted); font-size: 0.92rem; }
.tile-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.tile-disabled:hover { border-color: var(--line); }

.donate-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.25rem 1.1rem;
  max-width: 28rem;
  text-align: center;
}
.donate-qr {
  display: inline-block;
  padding: 0.65rem;
  background: #fff;
  border: 1px solid var(--line);
}
.donate-qr img {
  display: block;
  width: min(280px, 70vw);
  height: auto;
}

.banner {
  background: #fff4e5;
  border: 1px solid #e6c48a;
  padding: 0.6rem 0.8rem;
}
.banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.topbar .idle-timer {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  white-space: nowrap;
}

.topbar .idle-timer time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fff;
}

.topbar .idle-timer.is-warn,
.topbar .idle-timer.is-warn time {
  color: #ffe08a;
}

.meta { display: grid; gap: 0.75rem; margin: 1rem 0; }
.meta dt { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; }
.meta dd { margin: 0.15rem 0 0; }

.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.login-body .login-card { margin: auto; }

.login-card {
  width: min(360px, 92vw);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem 1.25rem;
}
.login-card.wide { width: min(440px, 92vw); }
.mfa-secret {
  font: 1.15rem/1.5 Consolas, "Cascadia Mono", monospace;
  letter-spacing: 0.08em;
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  word-break: break-word;
}

.login-card h1 { margin-bottom: 1rem; }
.login-card .page-title { margin-bottom: 1rem; }
.login-card .page-title h1 { margin-bottom: 0; }
.login-card label { display: block; margin: 0.7rem 0 0.25rem; }
.login-card input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line);
  font: inherit;
}

.actions,
form.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.filters > .actions,
fieldset > .actions,
.grid + .actions {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
}

form > .actions,
.actions.toolbar,
form.actions.toolbar {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.filters > .actions,
fieldset > .actions,
.login-card .actions,
.login-card form.actions,
dialog.editor .actions {
  background: transparent;
  border: 0;
  padding: 0;
}
.login-card .actions,
.login-card form.actions {
  margin-top: 1.5rem;
}

.actions.toolbar { margin: 0 0 0.85rem; }
.list-filter {
  max-width: 22rem;
  margin: 0 0 0.35rem;
}
.list-filter input,
.list-filter select { margin-top: 0.25rem; }
.canvass-users-filters .hint {
  margin: 0;
  padding-bottom: 0.4rem;
}
.list-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin: 0 0 0.35rem;
}
.list-filter-row .list-filter {
  flex: 1 1 18rem;
  margin: 0;
}
.list-filter-row .check {
  padding-bottom: 0.4rem;
}
.precinct-populate-row {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
}
.precinct-populate-row label {
  flex: 1 1 14rem;
}
.precinct-populate-row [data-populate-precinct] {
  margin-bottom: 0.05rem;
}
@media (max-width: 640px) {
  .precinct-populate-row {
    grid-column: 1 / -1;
  }
}
[data-filter-count]:empty { display: none; }
[data-filter-count] { margin: 0 0 0.65rem; }
.row-actions,
table.data td.row-actions {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.row-actions > * {
  vertical-align: middle;
}
.row-actions > * + * {
  margin-left: 0.35rem;
}
.row-actions form { display: inline-block; margin: 0; }
.row-actions .button-link,
.row-actions button {
  min-height: 1.85rem;
  padding: 0 0.65rem;
  font-size: 0.82rem;
}

dialog.editor:not([open]) {
  display: none;
}
dialog.editor {
  width: min(560px, 94vw);
  border: 1px solid var(--line);
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--card);
  color: var(--ink);
}
dialog.editor.wide {
  width: min(720px, 94vw);
}
.user-import-results {
  max-height: 12rem;
  overflow: auto;
  margin: 0.5rem 0 1rem;
}
.zone-precincts {
  max-height: 16rem;
  overflow: auto;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
}
.zone-precincts legend {
  padding: 0 0.25rem;
}
.zone-precincts .check {
  margin: 0.35rem 0;
}
.zone-precincts .check[hidden],
.zone-precincts .check.is-filtered-out {
  display: none !important;
}
.zone-precinct-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.7rem;
  margin: 0.85rem 0 0;
}
.zone-precinct-search .list-filter {
  flex: 1 1 14rem;
  margin: 0;
}
dialog.editor::backdrop {
  background: rgba(27, 36, 48, 0.45);
}
dialog.editor h2 {
  margin: 0 0 0.85rem;
}
dialog.editor .actions { margin-top: 1rem; }

.support-dialog {
  width: min(28rem, calc(100vw - 2rem));
}

button, .button-link {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  min-height: 2.15rem;
  padding: 0 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.button-link { text-decoration: none; background: #6b7682; }
.button-link:hover { text-decoration: none; }
.error { color: var(--danger); margin: 0 0 0.5rem; }

.login-forgot {
  margin: 1rem 0 0;
  text-align: center;
}
.login-forgot a {
  color: #1f4e79;
  text-decoration: none;
}
.login-forgot a:hover { text-decoration: underline; }

html {
  -webkit-text-size-adjust: 100%;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  min-height: 2.4rem;
  padding: 0 0.95rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: auto;
  pointer-events: none;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.topbar > * {
  pointer-events: auto;
}
.page,
.page.wide {
  position: relative;
  z-index: 1;
}

#first-result,
tr[id^="member-"] {
  scroll-margin-top: calc(5.5rem + env(safe-area-inset-top));
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0 1.25rem;
}

.table-scroll table.data {
  margin: 0;
}

@media (min-width: 1025px) {
  .page.wide { max-width: 1480px; }
  .page.wide.search-page { max-width: 1480px; }
  .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 641px) and (max-width: 1280px) {
  table.data th,
  table.data td {
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
  }
  table.data th {
    font-size: 0.78rem;
  }
  .row-actions .button-link,
  .row-actions button {
    padding: 0 0.55rem;
    font-size: 0.78rem;
  }
}

@media (min-width: 641px) and (max-width: 1120px) {
  .row-actions,
  table.data td.row-actions {
    white-space: normal;
  }
  .row-actions > * {
    margin: 0.15rem 0;
  }
  .row-actions > * + * {
    margin-left: 0;
  }
  table.data td[data-label="Email"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.change-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.change-list li { margin: 0 0 0.4rem; }
.change-list li:last-child { margin-bottom: 0; }
.change-list strong {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

table.search-results {
  width: 100%;
}
table.search-results th,
table.search-results td {
  white-space: nowrap;
}
table.search-results td:nth-child(3),
table.search-results .cell-precinct {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
table.search-results .cell-precinct {
  min-width: 11rem;
}

.search-filters > input[type="hidden"],
.search-filters .more-filters-check,
.search-filters .more-filters-toggle {
  display: none;
}
.search-filters .filter-primary,
.search-filters .filter-more,
details.more-fields {
  display: contents;
}
details.more-fields > summary {
  display: none;
}

.result-cards,
.calendar-phone-day,
.add-slot,
.add-ext {
  display: none;
}

.precinct-filter input[type="search"] {
  display: block;
  width: 100%;
  margin: 0.25rem 0 0.4rem;
}

@media (max-width: 1024px) {
  .page, .page.wide {
    max-width: none;
    padding: 1.15rem 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .topbar {
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
  }
  .topbar nav { gap: 0.7rem 0.95rem; }
  .filters, .grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  table.search-results {
    min-width: 72rem;
  }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-grid td {
    min-width: 5.4rem;
    height: 5.4rem;
    font-size: 0.8rem;
  }
  .who { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  html, body { font-size: 16px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.05rem; }
  .page, .page.wide {
    padding: 0.95rem 0.8rem 1.25rem;
    padding-left: max(0.8rem, env(safe-area-inset-left));
    padding-right: max(0.8rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .nav-toggle { display: inline-flex; margin-left: 0; }
  .topbar .brand { order: 1; }
  .topbar .idle-timer {
    order: 2;
    margin-left: auto;
    font-size: 0.85rem;
  }
  .topbar .nav-toggle { order: 3; }
  .topbar nav { order: 4; }
  .topbar .who { order: 5; }
  .topbar nav,
  .topbar .who {
    display: none;
    width: 100%;
  }
  .topbar.is-open nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .topbar.is-open nav a,
  .topbar.is-open nav button[data-open-support] {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    justify-content: flex-start;
    width: 100%;
  }
  .topbar.is-open .who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0 0.15rem;
  }
  .menu { grid-template-columns: 1fr; }
  .tile { padding: 1.05rem 1rem; }
  .filters, .grid, .meta {
    grid-template-columns: 1fr;
  }
  .phone-row { margin-bottom: 0.85rem; }
  .actions,
  form.actions,
  .danger-form {
    justify-content: stretch;
  }
  .actions button,
  .actions .button-link,
  .danger-form button {
    flex: 1 1 calc(50% - 0.5rem);
    min-height: 2.75rem;
  }
  .login-body {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .login-card,
  .login-card.wide {
    width: min(100%, 24rem);
    padding: 1.2rem 1.05rem 1.15rem;
  }
  .login-card .actions button,
  .login-card .actions .button-link {
    flex: 1 1 100%;
  }
  .calendar-grid td {
    min-width: 4.1rem;
    height: auto;
    min-height: 4.4rem;
    font-size: 0.74rem;
    padding: 0.3rem 0.25rem;
  }
  .row-actions { justify-content: flex-start; }
  .list-filter { max-width: none; }
  dialog.editor {
    width: calc(100vw - 1rem);
    max-height: 92vh;
    overflow: auto;
    padding: 1rem;
  }
  label input,
  label select,
  textarea,
  .login-card input {
    min-height: 2.6rem;
    font-size: 16px;
  }

  .search-filters .more-filters-toggle {
    display: block;
    grid-column: 1 / -1;
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
    margin: 0.15rem 0;
  }
  .search-filters .filter-primary,
  .search-filters .more-filters-check:checked ~ .filter-more {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem 1rem;
    grid-column: 1 / -1;
  }
  .search-filters .filter-more {
    display: none;
  }
  details.more-fields {
    display: block;
    grid-column: 1 / -1;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
  }
  details.more-fields > summary {
    display: list-item;
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
    margin: 0.2rem 0 0.4rem;
  }
  details.more-fields[open] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem 1rem;
  }
  details.more-fields[open] > summary {
    margin-bottom: 0.15rem;
  }

  .search-table,
  .table-scroll:has(.calendar-grid),
  .calendar-grid,
  .phone-hide {
    display: none !important;
  }
  .result-cards {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1.25rem;
  }
  .result-card {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 0.85rem 0.95rem;
    margin: 0 0 0.65rem;
  }
  .result-card a {
    font-weight: 700;
    font-size: 1.05rem;
  }
  .result-precinct,
  .result-meta {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
  }

  .page:has(.form-sticky),
  .page.wide:has(.form-sticky) {
    padding-bottom: max(6.5rem, calc(5rem + env(safe-area-inset-bottom)));
  }
  .form-sticky {
    position: sticky;
    bottom: 0;
    z-index: 15;
    box-shadow: 0 -6px 16px rgba(27, 36, 48, 0.1);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .actions > button[type="submit"]:first-of-type,
  .form-sticky > button[name="action"][value="save"] {
    flex: 1 1 100%;
  }

  .email-row,
  .phone-entry {
    display: grid;
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
    gap: 0.55rem;
  }
  .extra-slot { display: none; }
  .extra-slot.is-shown { display: grid; }
  .phone-ext { display: none; grid-column: 1 / -1; }
  .phone-ext.is-shown { display: block; }
  .add-slot,
  .add-ext {
    display: inline-flex;
    margin: 0 0 0.85rem;
  }
  .add-ext {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--line);
  }

  .fold > legend,
  .fold > h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    cursor: pointer;
  }
  .fold > legend::after,
  .fold > h2::after {
    content: "Show";
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
  }
  .fold:not(.is-folded) > legend::after,
  .fold:not(.is-folded) > h2::after {
    content: "Hide";
  }
  .fold.is-folded > legend { margin-bottom: 0; }
  .fold.is-folded .fold-body { display: none; }

  .precinct-filter input[type="search"] {
    display: block;
    width: 100%;
    margin: 0.25rem 0 0.4rem;
  }

  table.data.stack-phone,
  table.data.stack-phone tbody,
  table.data.stack-phone tfoot {
    display: block;
    width: 100%;
  }
  table.data.stack-phone thead { display: none; }
  table.data.stack-phone tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    margin: 0 0 0.75rem;
    padding: 0.25rem 0;
  }
  table.data.stack-phone th,
  table.data.stack-phone td {
    display: flex;
    gap: 0.75rem;
    border-bottom: 0;
    padding: 0.35rem 0.75rem;
  }
  table.data.stack-phone td::before {
    content: attr(data-label);
    flex: 0 0 7.2rem;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.82rem;
  }
  table.data.stack-phone td:not([data-label])::before,
  table.data.stack-phone td[data-label=""]::before {
    content: none;
    flex: 0;
  }
  table.data.stack-phone .row-actions {
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
  table.data.stack-phone .row-actions > * + * {
    margin-left: 0;
  }

  .calendar-phone-day { display: block; }
  .calendar-phone-day section { margin-bottom: 1rem; }
}

@media print {
  .nav-toggle, .table-scroll { overflow: visible; }
  .result-cards,
  .calendar-phone-day,
  .add-slot,
  .add-ext,
  .form-sticky {
    display: none !important;
  }
  .search-table,
  .table-scroll:has(.calendar-grid) {
    display: block !important;
  }
  .calendar-grid { display: table !important; }
  .fold.is-folded .fold-body { display: block !important; }
  .fold-body.grid { display: grid !important; }
  .canvass-page .canvass-map-section {
    padding: 0;
    border: none;
    margin: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .canvass-page .canvass-map-header {
    margin: 0 0 0.1rem;
  }
  .canvass-page .canvass-map-header .hint {
    display: none !important;
  }
  .canvass-page .canvass-map-header h2 {
    font-size: 12pt;
    margin: 0;
  }
  .canvass-map-canvas,
  body.is-driving-print .canvass-map-canvas {
    width: 7.5in !important;
    max-width: 7.5in !important;
    height: 9in !important;
    max-height: 9in !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.is-driving-print-map .canvass-map-header,
  body.is-driving-print-map .driving-stops-heading,
  body.is-driving-print-map .driving-stops-wrap,
  body.is-driving-print-map .help-dialog {
    display: none !important;
  }
  body.is-driving-print-map .canvass-map-canvas {
    width: 7.5in !important;
    max-width: 7.5in !important;
    height: 9.4in !important;
    max-height: 9.4in !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  body.is-driving-print-map .page,
  body.is-driving-print-map .canvass-map-section {
    margin: 0 !important;
    padding: 0 !important;
  }
  .canvass-map-canvas .leaflet-control-layers,
  .canvass-map-canvas .leaflet-control-attribution,
  .canvass-map-canvas .leaflet-control-zoom,
  .canvass-map-canvas .driving-reorder-control {
    display: none !important;
  }
  .canvass-pin {
    min-width: 32px;
    width: auto;
    height: 32px;
    padding: 0 4px;
    font-size: 0.88rem;
    border: 2px solid #111;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.canvass-map-section {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 0 0 1.25rem;
}
.canvass-map-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.canvass-map-header h2 {
  margin: 0 0 0.25rem;
}
.canvass-map-header .hint {
  margin: 0;
}
.canvass-map-canvas {
  width: 100%;
  height: 70vh;
  min-height: 440px;
  border: 1px solid var(--line);
  margin: 0.5rem 0 1rem;
  background: #dfe7ec;
}
.canvass-map-canvas .zone-number-label {
  background: none;
  border: none;
  box-shadow: none;
  color: #111827;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 1px 1px 0 #fff;
}
.canvass-live-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) 1fr;
  gap: 0.85rem;
  align-items: stretch;
}
.canvass-live-list {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  max-height: 70vh;
  overflow: auto;
}
.canvass-live-list h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.canvass-live-list ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.canvass-live-list li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.canvass-live-list li span {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}
.zone-editor-layout {
  grid-template-columns: minmax(16rem, 1fr) 0.75rem var(--zone-map-width, 33.6rem);
  align-items: start;
}
.zone-editor-layout .canvass-map-canvas {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  justify-self: stretch;
}
.zone-map-resize {
  cursor: col-resize;
  touch-action: none;
  align-self: stretch;
  min-height: 0;
  border-radius: 0.35rem;
  background: var(--line);
}
.zone-map-resize:hover,
.zone-map-resize:focus,
.zone-map-resize.is-dragging {
  background: #1f4e79;
  outline: none;
}
.zone-editor-layout .canvass-live-list {
  max-height: none;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.zone-leader-picks {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.zone-leader-picks li {
  display: grid;
  gap: 0.15rem;
}
.zone-leader-picks button {
  justify-self: start;
  margin-top: 0.35rem;
}
@media (max-width: 800px) {
  .canvass-live-layout {
    grid-template-columns: 1fr;
  }
  .canvass-live-list { max-height: 14rem; }
  .zone-editor-layout .canvass-live-list {
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .zone-editor-layout {
    grid-template-columns: 1fr;
  }
  .zone-editor-layout .canvass-map-canvas {
    max-width: none;
    height: 70vh;
    min-height: 440px;
  }
  .zone-map-resize { display: none; }
}
.canvass-live-list li .button-link {
  margin-top: 0.2rem;
}
.zone-precinct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
.zone-precinct-row strong {
  flex: 1 1 auto;
  min-width: 0;
}
.zone-precinct-row .button-link {
  flex: 0 0 auto;
  margin-top: 0;
}
#zone-precinct-list + h2 {
  margin-top: 1.25rem;
}
.zone-leader-search,
.zone-leader-add {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.zone-leader-search label,
.zone-leader-add label {
  margin-top: 0.35rem;
}
.zone-leaders {
  margin: 0.35rem 0 0;
}
.zone-leaders ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.zone-leaders li {
  padding: 0.25rem 0;
  border-top: 1px solid var(--line);
}
body.is-driving-print .canvass-map-canvas {
  width: 7.5in;
  max-width: 7.5in;
  height: 9in;
  max-height: 9in;
  min-height: 0;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
body.is-driving-print-map .canvass-map-canvas {
  width: 7.5in;
  max-width: 7.5in;
  height: 9.4in;
  max-height: 9.4in;
  min-height: 0;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
body.is-driving-print-map .driving-stops-heading,
body.is-driving-print-map .driving-stops-wrap {
  display: none;
}
.canvass-directions-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.canvass-directions-cell .canvass-directions-btn {
  display: inline-flex;
  width: auto;
}
[data-save-route][hidden] { display: none !important; }
.canvass-directions-cell .canvass-osrm-btn {
  display: inline-flex;
  width: auto;
  background: #dc2626;
  color: #fff;
  border-color: #991b1b;
}
.canvass-pin-wrapper {
  background: transparent;
  border: none;
}
.canvass-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  width: auto;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  --pin: #0d6e8a;
  background: var(--pin);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  border: 3px solid #d1d5db;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  box-sizing: border-box;
}
.driving-reorder-control {
  border: none;
  background: transparent;
  box-shadow: none;
}
.driving-reorder-toggle {
  display: block;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-weight: 700;
  color: #0d6e8a;
  background: #fff;
  border: 2px solid #0d6e8a;
  border-radius: 0.45rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.driving-reorder-toggle[aria-pressed="true"] {
  color: #fff;
  background: #0d6e8a;
}
.driving-order-reset {
  display: block;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-weight: 700;
  color: #374151;
  background: #fff;
  border: 2px solid #6b7280;
  border-radius: 0.45rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
@keyframes canvass-reorder-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
}
.canvass-pin.canvass-pin-reorder {
  --pin: #7c3aed;
  background: #7c3aed;
  color: #fff;
  border-color: #ddd6fe;
  animation: canvass-reorder-pulse 1.15s ease-in-out infinite;
}
.driving-reorder-toggle.is-cancel {
  color: #fff;
  background: #7c3aed;
  border-color: #6d28d9;
  animation: canvass-reorder-pulse 1.15s ease-in-out infinite;
}
#osrm-stops-table tr.is-print-moving td {
  box-shadow: inset 0 0 0 2px #7c3aed;
}
body.is-map-reorder #osrm-stops-table tbody td:nth-child(3) {
  text-decoration: underline;
  text-underline-offset: 0.12rem;
  cursor: pointer;
}
.canvass-pin-order,
.canvass-pin-dot {
  color: color-mix(in srgb, var(--pin) 38%, white);
  font-weight: 500;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.canvass-pin-start {
  --pin: #9b2c2c;
  background: var(--pin);
}
.canvass-pin-home {
  --pin: #f59e0b;
  background: var(--pin);
  color: #1c1917;
  border-color: #b45309;
  box-shadow: 0 0 0 3px #fde68a;
}
tr.is-user-home td {
  background: #fef3c7;
}
.canvass-pin-completed {
  --pin: #374151;
  background: var(--pin);
  color: #f3f4f6;
  border-color: #d1d5db;
}
.canvass-pin-sign-good {
  background: #fca5a5;
  color: #7f1d1d;
  border-radius: 4px;
  border-color: #dc2626;
}
.canvass-pin-sign-bad {
  background: #7dd3fc;
  color: #0c4a6e;
  border-radius: 4px;
  border-color: #2563eb;
}
.canvass-pin-yard-sign {
  border-color: #dc2626;
}
.canvass-pin-yard-sign-bad {
  border-color: #2563eb;
}
.canvass-pin-yard-sign-danger {
  border-color: #eab308;
}
.canvass-pin-yard-sign-danger.canvass-pin-yard-sign {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-pin-yard-sign-danger.canvass-pin-yard-sign-bad {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-pin-sign-danger {
  background: #facc15;
  color: #000;
  border-color: #eab308;
  border-radius: 4px;
}
.canvass-pin-sign-danger.canvass-pin-sign-good {
  background: #facc15;
  color: #000;
  border-color: #dc2626;
}
.canvass-pin-sign-danger.canvass-pin-sign-bad {
  background: #facc15;
  color: #000;
  border-color: #2563eb;
}
.canvass-pin-completed.canvass-pin-yard-sign,
.canvass-pin-start.canvass-pin-yard-sign {
  border-color: #dc2626;
}
.canvass-pin-completed.canvass-pin-yard-sign-bad,
.canvass-pin-start.canvass-pin-yard-sign-bad {
  border-color: #2563eb;
}
.canvass-pin-completed.canvass-pin-yard-sign-danger,
.canvass-pin-start.canvass-pin-yard-sign-danger {
  border-color: #eab308;
}
.canvass-pin-completed.canvass-pin-yard-sign-danger.canvass-pin-yard-sign,
.canvass-pin-start.canvass-pin-yard-sign-danger.canvass-pin-yard-sign {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-pin-completed.canvass-pin-yard-sign-danger.canvass-pin-yard-sign-bad,
.canvass-pin-start.canvass-pin-yard-sign-danger.canvass-pin-yard-sign-bad {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-pin-completed.canvass-pin-sign-good {
  background: #374151;
  color: #f3f4f6;
  border-color: #dc2626;
  box-shadow: none;
}
.canvass-pin-completed.canvass-pin-sign-bad {
  background: #374151;
  color: #f3f4f6;
  border-color: #2563eb;
  box-shadow: none;
}
.canvass-pin-completed.canvass-pin-sign-danger {
  background: #374151;
  color: #f3f4f6;
  border-color: #eab308;
  box-shadow: none;
}
.canvass-pin-completed.canvass-pin-sign-danger.canvass-pin-sign-good {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-pin-completed.canvass-pin-sign-danger.canvass-pin-sign-bad {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #eab308;
}
.canvass-users-panel {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 0 0 1.25rem;
}
.canvass-legs-section {
  margin: 1rem 0 1.25rem;
}
.inline-form {
  display: inline-block;
  margin: 0;
}
tr.is-completed-leg td {
  background: rgba(39, 103, 73, 0.08);
}
tr.is-completed-stop td,
tr.is-selected.is-completed-stop td {
  background: #374151;
  color: #f3f4f6;
}
tr.is-completed-stop td a,
tr.is-completed-stop td .hint,
tr.is-completed-stop td strong,
tr.is-completed-stop td .button-link {
  color: #f3f4f6;
}
.driving-note-dialog {
  width: min(32rem, 96vw);
  max-height: 90vh;
  overflow: auto;
}
.driving-note-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.driving-note-head h2 {
  margin: 0;
  flex: 1 1 auto;
}
.driving-note-head .hint {
  margin: 0.15rem 0 0;
}
.driving-note-lit {
  width: 100%;
  background: #dc2626;
  color: #fff;
  border: 2px solid #991b1b;
  min-height: 2.6rem;
  font-weight: 700;
  border-radius: 0.5rem;
  margin: 0.35rem 0 0.55rem;
}
.driving-note-lit:disabled {
  opacity: 0.55;
}
.driving-note-voters {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.driving-note-voters label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}
.driving-note-voters label.is-checked {
  border-color: var(--accent);
  background: #eef7fa;
}
.driving-note-voters input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}
.driving-note-voters .name {
  flex: 1 1 auto;
  font-weight: 600;
}
.driving-note-voters .badge {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: #e5e9ee;
  color: var(--muted);
}
.driving-note-voters .badge.contact {
  background: #dcfce7;
  color: #166534;
}
.driving-new-person {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.6rem;
  margin: 0.15rem 0 0.65rem;
}
.driving-new-person[hidden] {
  display: none !important;
}
.driving-new-person .driving-new-phone {
  grid-column: 1 / -1;
}
.driving-new-person input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-family: inherit;
}
.driving-note-notes {
  margin: 0.2rem 0 0.6rem;
  padding: 0;
  list-style: none;
}
.driving-note-notes li {
  border-left: 3px solid var(--line);
  padding: 0.2rem 0.6rem;
  margin: 0.3rem 0;
  font-size: 0.9rem;
  white-space: pre-line;
}
.driving-note-notes li small {
  display: block;
  color: var(--muted);
}
.driving-note-form label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.driving-note-form input[type="text"],
.driving-note-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.5rem;
  font: inherit;
}
.driving-note-form textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.driving-note-quick {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.driving-note-quick button {
  background: #e5e9ee;
  color: var(--ink);
  min-height: 1.8rem;
  padding: 0 0.65rem;
  font-size: 0.8rem;
}
.driving-note-msg {
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
  min-height: 1.2rem;
}
.driving-note-msg.ok { color: #1b7a3d; }
.driving-note-msg.bad { color: var(--danger); }
.canvass-search-panel {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 0 0 1.25rem;
}
.canvass-search-panel > h2 {
  margin: 0 0 0.75rem;
}
.canvass-search-panel > .filters,
.canvass-search-panel .canvass-toolbar {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.canvass-search-panel > .filters {
  margin: 0 0 0.75rem;
}
.canvass-toolbar h2 {
  margin: 0 0 0.25rem;
}
.canvass-select-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.canvass-route-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.canvass-campaign-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.canvass-campaign-switch-form {
  margin: 0;
}
.canvass-campaign-switch select {
  min-width: min(22rem, 100%);
  max-width: 100%;
}
.canvass-leg-size-controls,
.canvass-leg-size-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.canvass-leg-size-controls input[type="number"],
.canvass-leg-size-inline input[type="number"] {
  width: 5.5rem;
}
.canvass-table input[type="checkbox"],
.canvass-table input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

@keyframes canvass-gen-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

button.canvass-generating,
.button-link.canvass-generating {
  animation: canvass-gen-pulse 1.1s ease-in-out infinite;
  pointer-events: none;
  cursor: wait;
}

.user-route-line { white-space: nowrap; }
.user-route-line + .user-route-line { margin-top: 0.2rem; }

/* Generate / Regenerate / Save legs buttons wait for a Campaign. */
button.needs-campaign,
.button-link.needs-campaign,
button.needs-campaign:hover,
.button-link.needs-campaign:hover {
  opacity: 0.55;
  cursor: not-allowed;
  animation: none;
}

.contact-photo {
  margin-top: 0.85rem;
  max-width: 16rem;
}
.contact-photo-preview,
.contact-photo-print {
  display: block;
  max-width: 12rem;
  max-height: 12rem;
  margin: 0 0 0.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}
.contact-photo-print { max-width: 8rem; max-height: 8rem; }
.contact-photo button { min-height: 2.4rem; font-weight: 700; }
.hint.bad { color: var(--danger); }