@font-face {
font-family: "Noto Sans Devanagari";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/noto-sans-devanagari-subset.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0, U+0900-097F, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF;
}
:root {
color-scheme: light;
--color-primary: #115e59;
--color-primary-strong: #0e4f4b;
--color-on-primary: #ffffff;
--color-bg: #f6f5f1;
--color-surface: #ffffff;
--color-text: #1f2933;
--color-text-muted: #3b4650;
--color-border: #e1ddd3;
--color-focus: #f59e0b;
--color-primary-tint: #e7f3f1;
--color-success: #165c31;
--color-success-bg: #ecfdf3;
--color-danger: #9b1c13;
--color-danger-strong: #7a1a12;
--color-danger-bg: #fef3f2;
--color-on-danger: #ffffff;
--color-accent: #e7f3f1;
--color-on-accent: #1f2933;
--color-picture-plate: #ffffff;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1.25rem;
--radius-pill: 999px;
--font-family-base: "Noto Sans Devanagari", "Mangal", "Nirmala UI", system-ui, sans-serif;
--font-size-sm: 1rem;
--font-size-body: 1.0625rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--line-height-body: 1.7;
--line-height-heading: 1.45;
--tracking-digits: 0.06em;
--touch-target: 48px;
--content-max-width: 40rem;
--shadow-card: 0 1px 2px rgba(31, 41, 51, 0.08);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-primary: #2dd4bf;
--color-primary-strong: #5eead4;
--color-on-primary: #042f2e;
--color-bg: #11181c;
--color-surface: #1a2329;
--color-text: #e6ebee;
--color-text-muted: #b4c0c8;
--color-border: #34434d;
--color-focus: #fbbf24;
--color-primary-tint: #12302d;
--color-success: #6ee7a0;
--color-success-bg: #0f2a1c;
--color-danger: #fca5a5;
--color-danger-strong: #fb8c8c;
--color-danger-bg: #2e1414;
--color-on-danger: #2a0a0a;
--color-accent: #12302d;
--color-on-accent: #e6ebee;
--color-picture-plate: #ffffff;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-primary: #2dd4bf;
--color-primary-strong: #5eead4;
--color-on-primary: #042f2e;
--color-bg: #11181c;
--color-surface: #1a2329;
--color-text: #e6ebee;
--color-text-muted: #b4c0c8;
--color-border: #34434d;
--color-focus: #fbbf24;
--color-primary-tint: #12302d;
--color-success: #6ee7a0;
--color-success-bg: #0f2a1c;
--color-danger: #fca5a5;
--color-danger-strong: #fb8c8c;
--color-danger-bg: #2e1414;
--color-on-danger: #2a0a0a;
--color-accent: #12302d;
--color-on-accent: #e6ebee;
--color-picture-plate: #ffffff;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
}
}
:root[data-text-size="large"] {
--font-size-sm: 1.0625rem;
--font-size-body: 1.3125rem;
--font-size-lg: 1.375rem;
--font-size-xl: 1.75rem;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family-base);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
overflow-wrap: anywhere;
padding-bottom: calc(var(--touch-target) + var(--space-1) + env(safe-area-inset-bottom));
}
button,
input,
select,
textarea {
font: inherit;
}
header {
color: var(--color-text);
}
.seat-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--touch-target);
background: var(--color-surface);
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
padding: 0 var(--space-4);
}
.seat-header[hidden],
.sec-footer[hidden],
.nav-bar[hidden] {
display: none;
}
.seat-header[data-state="empty"] {
background: var(--color-primary-tint);
}
.seat-header-text {
flex: 1 1 auto;
min-width: 0;
padding: var(--space-2) 0;
}
.seat-header-title,
.seat-header-meta {
margin: 0;
line-height: var(--line-height-heading);
}
.seat-header-title {
color: var(--color-text);
font-size: var(--font-size-body);
}
.seat-header-meta {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.seat-header-link {
appearance: none;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: 0 var(--space-3);
border-radius: var(--radius-pill);
color: var(--color-primary-strong);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
text-decoration: none;
cursor: pointer;
}
.seat-header-link:hover {
background: var(--color-primary-tint);
}
.seat-header[data-state="empty"] .seat-header-link {
flex: 1 1 auto;
justify-content: flex-start;
width: 100%;
border-radius: 0;
border-left: 4px solid var(--color-primary);
color: var(--color-text);
text-decoration: underline;
}
.seat-header-link:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.sec-footer {
position: sticky;
bottom: calc(var(--touch-target) + 1px + env(safe-area-inset-bottom));
z-index: 9;
background: var(--color-surface);
color: var(--color-text);
border-top: 1px solid var(--color-border);
padding: 0 var(--space-4);
}
.sec-footer-text {
display: flex;
align-items: center;
max-width: var(--content-max-width);
min-height: var(--touch-target);
margin: 0 auto;
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
text-decoration: none;
}
.sec-footer-text:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(-1 * var(--focus-ring-width));
}
main {
width: 100%;
max-width: var(--content-max-width);
min-height: calc(100vh - 3 * var(--touch-target) - var(--space-6));
margin: 0 auto;
padding: var(--space-5) var(--space-4);
}
.screen {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.screen[hidden],
.screen-empty[hidden],
.poll-day-actions[hidden],
.screen-host:empty,
#voter-search:empty {
display: none;
}
.gate-screen {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.gate-screen[hidden],
:root[data-gate] .seat-header,
:root[data-gate] .nav-bar,
:root[data-gate] #app > :not(.gate-screen) {
display: none;
}
:root[data-gate] .sec-footer {
bottom: env(safe-area-inset-bottom);
}
:root[data-install] body {
padding-bottom: env(safe-area-inset-bottom);
}
:root[data-install] body > :not(#install-guide) {
display: none;
}
.install-guide {
display: flex;
flex-direction: column;
gap: var(--space-3);
box-sizing: border-box;
max-width: var(--content-max-width);
min-height: 100vh;
min-height: 100dvh;
margin: 0 auto;
padding: var(--space-4);
}
.install-guide[hidden],
.persist-notice[hidden],
.update-banner[hidden] {
display: none;
}
.install-card,
.persist-card,
.update-banner {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: var(--space-4);
}
.install-steps {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding-left: var(--space-5);
}
.install-step {
margin: 0;
line-height: var(--line-height-body);
}
.install-installed {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
}
.persist-help,
.install-card .notice,
.persist-card .notice,
.update-banner .notice {
margin: 0;
}
.install-footer {
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.install-footer-text {
display: flex;
align-items: center;
min-height: var(--touch-target);
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
text-decoration: none;
}
.install-footer-text:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(-1 * var(--focus-ring-width));
}
.persist-notice,
.update-banner {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--space-3) var(--space-4) 0;
}
.activation-form,
.branding-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.branding-team-code {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.activation-help {
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.field-input.activation-code {
border-width: 2px;
}
.field-input.activation-code[aria-invalid="true"] {
border-color: var(--color-danger);
}
.screen-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-xl);
font-weight: 400;
line-height: var(--line-height-heading);
}
.screen-lead {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
}
.screen-empty,
.poll-day-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.poll-day-actions {
margin-bottom: var(--space-4);
}
.card-title {
margin: 0 0 var(--space-4);
color: var(--color-text);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
}
.sec-about-text {
margin: 0 0 var(--space-2);
color: var(--color-text);
}
.screen .picker {
margin-top: 0;
}
.picker-back {
align-self: flex-start;
width: auto;
}
.picker-app-name {
margin: 0;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
color: var(--color-primary-strong);
font-size: var(--font-size-xl);
font-weight: 400;
line-height: var(--line-height-heading);
}
.picker-screen .screen-title {
font-size: var(--font-size-lg);
}
.picker-source {
margin-top: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
.picker-source .sec-about-text:last-child {
margin-bottom: 0;
}
#screen-voters .roll-search,
#screen-voters:not([data-searching]) .search-results,
#screen-voters:not([data-searching]) .search-count,
#screen-voters[data-searching] > #roll,
#screen-voters[data-searching] > .empty-state,
#screen-voters:not([data-searching]) .search-households {
display: none;
}
.empty-state {
background: var(--color-primary-tint);
color: var(--color-text);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: var(--space-4);
}
.empty-state h2 {
margin: 0 0 var(--space-2);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
color: var(--color-text);
}
.empty-state p {
margin: 0;
color: var(--color-text);
}
.empty-state .btn-primary {
margin-top: var(--space-5);
}
.btn-primary {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-3) var(--space-5);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
cursor: pointer;
}
.btn-primary:hover,
.btn-primary:active {
background: var(--color-primary-strong);
}
.btn-primary:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.status {
margin: var(--space-4) 0 0;
}
.btn-primary[hidden],
.btn-secondary[hidden],
.btn-quiet[hidden] {
display: none;
}
.picker:has(> .notice:only-child) {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.picker:has(> .progress + .notice:last-child) {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.picker {
margin-top: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-5);
}
.picker-field {
margin-bottom: var(--space-4);
}
.picker-label {
display: block;
margin-bottom: var(--space-1);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.picker-select {
appearance: none;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-body);
}
.field-input {
appearance: none;
display: block;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
}
.field-input::placeholder,
.picker-select::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.field-select {
appearance: none;
display: block;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
cursor: pointer;
}
select.picker-select,
.field-select {
padding-right: var(--space-6);
background-image:
linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
background-position:
right calc(var(--space-4) + var(--space-1)) center,
right var(--space-4) center;
background-size: var(--space-1) var(--space-1);
background-repeat: no-repeat;
}
.field-input:disabled,
.field-select:disabled {
color: var(--color-text-muted);
background-color: var(--color-bg);
border-style: dashed;
}
.field-input:focus,
.field-select:focus {
border-color: var(--color-primary);
}
.field-input:focus-visible,
.field-select:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.field-reveal {
display: flex;
align-items: center;
gap: var(--space-2);
}
.field-reveal > input {
flex: 1 1 auto;
min-width: 0;
}
.picker-select:disabled {
color: var(--color-text-muted);
background: var(--color-bg);
border-style: dashed;
}
.picker-select:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.picker-message {
margin: 0;
min-height: var(--space-5);
color: var(--color-text);
font-size: var(--font-size-sm);
}
.roll-section {
margin-top: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-4);
}
.roll-section[hidden],
.empty-state[hidden] {
display: none;
}
.roll-message {
margin: 0 0 var(--space-4);
color: var(--color-text);
font-size: var(--font-size-sm);
}
.roll-count {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.roll-viewport {
border-top: 1px solid var(--color-border);
}
.roll-spacer {
position: relative;
contain: strict;
width: 100%;
}
.roll-row {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
padding: var(--space-2) var(--space-1);
border-bottom: 1px solid var(--color-border);
line-height: var(--line-height-heading);
will-change: transform;
}
.roll-name,
.roll-relative,
.roll-meta {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.roll-name {
font-size: var(--font-size-lg);
color: var(--color-text);
}
.roll-relative,
.roll-meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.mark-line {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
min-height: calc(var(--font-size-sm) * var(--line-height-heading));
overflow: hidden;
white-space: nowrap;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text);
}
.mark-line[data-state="loading"]::before {
content: "";
width: 30%;
height: var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-border);
}
.mark-failed {
color: var(--color-danger);
overflow: hidden;
text-overflow: ellipsis;
}
.mark-dot {
flex: none;
width: var(--space-3);
height: var(--space-3);
border: 2px solid transparent;
border-radius: var(--radius-pill);
}
.mark-dot[data-tag="supporter"] {
background: var(--color-success);
border-color: var(--color-success);
}
.mark-dot[data-tag="leaning"] {
border-color: var(--color-success);
}
.mark-dot[data-tag="undecided"] {
background: var(--color-primary);
border-color: var(--color-primary);
}
.mark-dot[data-tag="opposed"] {
background: var(--color-danger);
border-color: var(--color-danger);
}
.mark-dot[data-tag="away"] {
background: var(--color-text-muted);
border-color: var(--color-text-muted);
}
.mark-dot[data-tag="not_found"] {
border-color: var(--color-text-muted);
}
.mark-dot[data-tag="none"] {
border-color: var(--color-text-muted);
border-style: dashed;
}
.mark-tag {
flex: none;
}
.mark-tag[data-tag="none"],
.mark-visit {
color: var(--color-text-muted);
}
.mark-visit {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mark-visit::before {
content: "";
display: inline-block;
width: var(--space-1);
height: var(--space-1);
margin-inline-end: var(--space-2);
border-radius: var(--radius-pill);
background: currentColor;
vertical-align: middle;
}
.roll-struck {
color: var(--color-text-muted);
text-decoration: line-through;
text-decoration-color: var(--color-danger);
text-decoration-thickness: 2px;
}
.list-row.roll-row {
min-width: 0;
padding: var(--space-2) var(--space-4);
cursor: default;
}
.roll-contact {
margin: var(--space-3) 0 0;
color: var(--color-text);
font-size: var(--font-size-sm);
}
.roll-supplement {
margin: 0 0 var(--space-4);
}
.roll-deletions-toggle {
margin-bottom: 0;
}
.roll-supplement .roll-contact {
margin-bottom: var(--space-3);
}
.roll-wards-progress {
margin: 0 0 var(--space-4);
}
.roll-wards-progress .progress {
margin-bottom: var(--space-2);
}
.roll-wards-progress .progress[hidden] {
display: none;
}
.roll-ward {
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.roll-ward + .roll-ward {
margin-top: var(--space-5);
}
.roll-ward-title {
margin: 0 0 var(--space-3);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
color: var(--color-text);
}
.progress {
position: relative;
height: var(--space-1);
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--color-border);
}
.progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
border-radius: var(--radius-pill);
background: var(--color-primary);
animation: progress-slide 1.2s ease-in-out infinite;
}
@keyframes progress-slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(250%);
}
}
@media (prefers-reduced-motion: reduce) {
.progress-bar {
width: 100%;
animation: none;
}
}
.nav-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 var(--space-1) env(safe-area-inset-bottom);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
}
.nav-bar-items {
display: flex;
gap: var(--space-1);
max-width: var(--content-max-width);
margin: 0 auto;
}
.nav-item {
appearance: none;
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-1);
border: 0;
border-top: 3px solid transparent;
background: var(--color-surface);
color: var(--color-text-muted);
font: inherit;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
text-align: center;
cursor: pointer;
}
.nav-item:hover,
.nav-item:active {
background: var(--color-primary-tint);
color: var(--color-text);
}
.nav-item[aria-current="page"] {
border-top-color: var(--color-primary);
color: var(--color-primary-strong);
}
.nav-item:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(-1 * var(--focus-ring-width));
}
.roll-row[tabindex],
.pwc-search__row[tabindex] {
cursor: pointer;
}
.list-row.roll-row[tabindex] {
cursor: pointer;
}
.roll-row[tabindex]:focus-visible,
.pwc-search__row[tabindex]:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(-1 * var(--focus-ring-width));
}
.list-row {
appearance: none;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
margin: 0;
padding: var(--space-3) var(--space-4);
border: 0;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
text-align: start;
cursor: pointer;
}
.list-row:hover,
.list-row:active {
background: var(--color-primary-tint);
}
.list-row:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(-1 * var(--focus-ring-width));
}
.panel {
margin: 0 0 var(--space-4);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.card {
appearance: none;
display: block;
min-width: var(--touch-target);
min-height: var(--touch-target);
margin: 0 0 var(--space-4);
padding: var(--space-5);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.card[hidden] {
display: none;
}
.panel [hidden] {
display: none;
}
.panel[aria-busy="true"] button {
opacity: 0.6;
pointer-events: none;
}
.panel-header {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin: calc(-1 * var(--space-2)) 0 var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.panel-heading {
flex: 1 1 auto;
min-width: 0;
padding-top: var(--space-2);
}
.panel-title {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
color: var(--color-text);
}
.panel-subtitle {
margin: var(--space-1) 0 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.panel-subtitle:empty {
display: none;
}
.seen-voting {
padding: var(--space-4) var(--space-5);
}
.seen-voting-badge {
margin: 0;
}
.seen-voting-count {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin: var(--space-4) 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.seen-voting-count-value {
flex: none;
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
color: var(--color-primary-strong);
}
.seen-voting-count-pending {
flex: 0 1 auto;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: right;
}
.contact-body {
margin: 0 0 var(--space-4);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-primary-tint);
color: var(--color-primary-strong);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
.badge[data-tone="success"] {
background: var(--color-success-bg);
color: var(--color-success);
}
.badge[data-tone="success"]::before {
content: "";
flex: none;
width: var(--space-2);
height: var(--space-3);
margin: 0 var(--space-1) var(--space-1);
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.badge[data-tone="error"] {
background: var(--color-danger-bg);
color: var(--color-danger);
}
.voter-roll-card .badge {
margin: var(--space-2) 0 0;
}
.voter-roll-fields {
display: grid;
gap: var(--space-2);
margin: 0;
}
.voter-roll-field {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--space-3);
align-items: baseline;
}
.voter-roll-label {
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.voter-roll-value {
margin: 0;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
color: var(--color-text);
overflow-wrap: anywhere;
}
.voter-roll-field[data-field="epic"] .voter-roll-value {
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-digits);
}
.voter-share {
min-height: var(--touch-target);
margin-top: var(--space-4);
}
.voter-share-message {
margin-top: var(--space-3);
}
.voter-card-controls:empty {
display: none;
}
.voter-card-controls {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.voter-marks {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
color: var(--color-text);
}
.voter-marks-title,
.voter-history-title {
margin: 0;
font-size: var(--font-size-body);
font-weight: 400;
line-height: var(--line-height-heading);
}
.voter-marks-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.voter-marks-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.voter-marks-current {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
}
.voter-marks-group {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.voter-marks-group > .voter-marks-label,
.voter-marks-group > .voter-visit-help {
grid-column: 1 / -1;
}
.voter-tag,
.voter-visit {
min-height: var(--touch-target);
margin-top: 0;
}
.voter-tag[aria-pressed="true"],
.voter-visit[aria-pressed="true"] {
background: var(--color-primary-tint);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.voter-visit-help {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.voter-note {
min-height: calc(var(--touch-target) * 2);
resize: vertical;
}
.voter-note-save {
min-height: var(--touch-target);
}
.voter-history {
margin: 0;
padding: 0;
list-style: none;
}
.voter-history-row {
cursor: default;
}
.voter-history-change {
overflow-wrap: anywhere;
}
.voter-history-meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.voter-phone {
color: var(--color-text);
}
.voter-phone-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.voter-phone-form[hidden],
.voter-phone-confirm[hidden],
.voter-phone-replace[hidden],
.voter-phone-contact[hidden],
.voter-phone-retry[hidden],
.voter-phone-badge[hidden],
.voter-phone-consent[hidden],
.voter-phone-revoke[hidden],
.voter-phone-empty[hidden],
.voter-phone-saved-by[hidden] {
display: none;
}
.voter-phone-empty {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
.voter-phone-saved-by {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
}
.voter-phone-consent {
margin-bottom: 0;
}
.voter-phone-revoke {
align-self: stretch;
}
.voter-phone-confirm,
.voter-phone-replace,
.voter-phone-message {
margin-top: var(--space-3);
}
.voter-phone-help {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
}
.voter-phone-badge {
align-self: flex-start;
margin: 0;
}
.voter-phone-contact {
margin: var(--space-3) 0 0;
color: var(--color-text);
font-size: var(--font-size-sm);
}
.voter-phone-retry {
margin-top: var(--space-3);
}
.voter-card-controls .seen-voting {
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
}
.notice {
appearance: none;
display: flex;
align-items: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
margin: var(--space-3) 0 0;
padding: var(--space-2) var(--space-3);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-sm);
background: var(--color-primary-tint);
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
.notice:empty,
.notice[hidden] {
display: none;
}
.notice[data-tone="info"] {
border-left-color: var(--color-primary);
background: var(--color-primary-tint);
color: var(--color-text);
}
.notice[data-tone="success"] {
border-left-color: var(--color-success);
background: var(--color-success-bg);
color: var(--color-success);
}
.notice[data-tone="error"] {
border-left-color: var(--color-danger);
background: var(--color-danger-bg);
color: var(--color-danger);
}
.restored-context {
margin: var(--space-3) 0 0;
padding: var(--space-2) var(--space-3);
border-left: 4px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
}
.restored-context[hidden],
.restored-context:empty {
display: none;
}
.alert {
margin-top: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
}
.alert[data-tone="error"] {
border-color: var(--color-danger);
background: var(--color-danger-bg);
}
.alert p {
margin: 0 0 var(--space-3);
color: var(--color-text);
font-size: var(--font-size-body);
}
.field-phone {
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-digits);
}
.picker-select:focus {
border-color: var(--color-primary);
}
.btn-secondary {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-5);
border: 1px solid var(--color-primary);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary-strong);
font: inherit;
font-size: var(--font-size-body);
cursor: pointer;
}
.btn-secondary:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.btn-secondary:hover,
.btn-secondary:active {
border-color: var(--color-primary-strong);
background: var(--color-primary-tint);
}
.status-retry {
margin-top: var(--space-3);
}
.btn-primary:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
}
.btn-danger {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-3) var(--space-5);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-danger);
color: var(--color-on-danger);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
cursor: pointer;
}
.btn-danger:hover,
.btn-danger:active {
background: var(--color-danger-strong);
}
.btn-quiet,
.btn-quiet-danger {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-primary-strong);
font: inherit;
font-size: var(--font-size-sm);
cursor: pointer;
}
.btn-quiet:hover,
.btn-quiet:active {
background: var(--color-primary-tint);
}
.btn-quiet-danger {
width: 100%;
margin-top: var(--space-4);
border-top: 1px solid var(--color-border);
border-radius: 0;
color: var(--color-danger);
}
.btn-quiet-danger:hover,
.btn-quiet-danger:active {
background: var(--color-danger-bg);
}
.btn-danger:focus-visible,
.btn-quiet:focus-visible,
.btn-quiet-danger:focus-visible,
.card:focus-visible,
.notice:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.call-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.call-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.call-name {
color: var(--color-text);
font-size: var(--font-size-body);
}
.call-meta,
.call-assignee {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--touch-target);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
text-decoration: none;
}
.call-btn:hover,
.call-btn:active {
background: var(--color-primary-strong);
}
.call-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.call-btn-disabled {
background: var(--color-border);
color: var(--color-text-muted);
}
.call-assign {
width: 100%;
min-height: var(--touch-target);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-body);
}
.call-assign:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.call-worker-form {
margin-bottom: var(--space-3);
}
.call-list-host {
margin: var(--space-3) 0;
}
.choice {
appearance: none;
display: flex;
align-items: center;
gap: var(--space-3);
min-width: var(--touch-target);
min-height: var(--touch-target);
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
cursor: pointer;
}
.choice:has(.choice-input:checked) {
border-color: var(--color-success);
background: var(--color-success-bg);
}
.choice-input {
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--touch-target);
height: var(--touch-target);
min-width: var(--touch-target);
min-height: var(--touch-target);
margin: calc(-1 * var(--space-3)) 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
padding: 0;
border: 0;
background: transparent;
color: var(--color-surface);
cursor: pointer;
}
.choice-input::before {
content: "";
width: var(--space-5);
height: var(--space-5);
border: 2px solid var(--color-text-muted);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.choice-input:checked::before {
border-color: var(--color-success);
background: var(--color-success);
}
.choice-input:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--space-2);
height: var(--space-3);
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(45deg);
}
.choice-input[type="radio"]::before {
border-radius: 50%;
}
.choice-input[type="radio"]:checked::before {
border-color: var(--color-success);
background: var(--color-surface);
}
.choice-input[type="radio"]:checked::after {
width: var(--space-3);
height: var(--space-3);
border: 0;
border-radius: 50%;
background: var(--color-success);
transform: translate(-50%, -50%);
}
.choice-input:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: calc(var(--focus-ring-offset) - var(--space-3));
}
.choice:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
}
.choice:has(.choice-input:focus-visible) {
border-color: var(--color-focus);
}
.turnout-screen {
margin-top: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-5);
}
.turnout-title {
margin: 0 0 var(--space-4);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
color: var(--color-text);
}
.turnout-figures {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.turnout-figure {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-4) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
text-align: center;
}
.turnout-value {
margin: 0;
font-size: calc(var(--font-size-xl) * 1.75);
font-weight: 400;
font-variant-numeric: tabular-nums;
line-height: var(--line-height-heading);
color: var(--color-primary-strong);
overflow-wrap: anywhere;
}
.turnout-caption {
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.turnout-save {
margin-bottom: var(--space-3);
}
.turnout-value-empty {
font-size: var(--font-size-lg);
font-weight: 400;
color: var(--color-text-muted);
}
.sms-entry-title {
margin-bottom: var(--space-4);
}
.sms-entry-input {
min-height: calc(var(--touch-target) * 2);
resize: vertical;
line-height: var(--line-height-body);
overflow-wrap: anywhere;
}
.sms-entry-help {
margin: var(--space-1) 0 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
color: var(--color-text-muted);
}
.sms-entry-add {
margin-bottom: var(--space-3);
}
.sms-entry-result {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.sms-entry-figure {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-1);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
text-align: center;
}
.sms-entry-value {
margin: 0;
font-size: var(--font-size-xl);
font-variant-numeric: tabular-nums;
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.sms-entry-figure-new .sms-entry-value {
color: var(--color-primary-strong);
}
.sms-entry-caption {
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-muted);
}
.sms-tally {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.sms-tally-title {
margin-bottom: var(--space-2);
}
.sms-tally-help {
margin: 0 0 var(--space-3);
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
color: var(--color-text-muted);
}
.sms-tally-retry {
margin-top: var(--space-3);
}
.search-screen {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.search-field {
margin-bottom: 0;
}
.search-filter-toggle {
align-self: flex-start;
width: auto;
gap: var(--space-2);
margin-top: 0;
}
.search-filter-count {
justify-content: center;
min-width: var(--space-5);
margin: 0;
padding: 0 var(--space-2);
background: var(--color-primary);
color: var(--color-on-primary);
}
.search-filter-count[hidden] {
display: none;
}
.search-controls {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.search-filters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: var(--space-3);
margin: var(--space-3) 0;
}
.search-choice {
margin-bottom: var(--space-2);
}
.search-contact,
.search-count {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
}
.search-results {
list-style: none;
margin: 0;
padding: 0;
}
.search-row-link {
gap: var(--space-1);
text-decoration: none;
}
.search-row-link[aria-current="true"] {
border-left: var(--space-1) solid var(--color-primary);
background: var(--color-primary-tint);
}
.search-row-head,
.search-row-meta {
display: block;
overflow-wrap: anywhere;
}
.household-member-fields {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
margin-top: var(--space-1);
}
.search-serial,
.household-member-serial {
color: var(--color-primary-strong);
font-variant-numeric: tabular-nums;
}
.search-row-meta {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.search-epic {
font-variant-numeric: tabular-nums;
}
.roll-struck .search-serial {
color: inherit;
}
.search-row mark {
background: var(--color-success-bg);
color: var(--color-text);
text-decoration: underline;
}
.search-households,
.search-household {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.search-households[hidden],
.search-households:empty {
display: none;
}
.search-household-ward {
margin: 0;
font-size: var(--font-size-sm);
}
#app[data-route="voter"] > :not(#voter-route) {
display: none;
}
.voter-route {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.voter-route-back {
align-self: flex-start;
}
.voter-route-seat {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.voter-route-seat:empty {
display: none;
}
.voter-route-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-sm);
}
.voter-route-message {
margin: 0;
}
.voter-route-body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
#app[data-route="call-lists"] > :not(#call-lists-route),
#app[data-route="assign"] > :not(#assign-route) {
display: none;
}
.call-builder-screen,
.call-builder-body,
.assign-screen {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.call-builder-back,
.call-builder-open-voters,
.assign-back {
align-self: flex-start;
}
.call-builder-seat,
.call-builder-contact,
.call-builder-saved-name,
.call-builder-saved-none,
.assign-seat {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.call-builder-seat:empty,
.assign-seat:empty {
display: none;
}
.call-builder-filters,
.call-builder-assign,
.call-builder-saved,
.call-builder-saved-list,
.assign-body,
.assign-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.assign-reshare {
align-self: stretch;
min-height: var(--touch-target);
}
.call-builder-workers,
.assign-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.assign-row {
margin-bottom: 0;
}
.call-builder-saved-text,
.assign-row-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.assign-row-name {
color: var(--color-text);
font-size: var(--font-size-body);
}
.call-builder-saved-meta,
.assign-assignee {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.assign-shared {
border-left: var(--space-1) solid var(--color-border);
padding-left: var(--space-2);
}
.call-builder-field,
.assign-field {
margin-bottom: 0;
}
.assign-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.call-builder-message,
.call-builder-filter-message,
.call-builder-roster-empty,
.assign-message {
margin: 0;
}
.call-builder-confirm[hidden],
.call-builder-open-voters[hidden],
.call-builder-reshare[hidden],
.assign-confirm[hidden],
.assign-contact[hidden] {
display: none;
}
.assign-legacy-worker + .assign-legacy-worker {
margin-top: var(--space-4);
}
#app[data-route="counting"] > :not(#counting-route) {
display: none;
}
.counting-screen {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.counting-back,
.counting-open {
align-self: flex-start;
}
.counting-body,
.counting-actions,
.counting-tally,
.counting-add,
.counting-add-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.counting-message,
.counting-entry-error,
.counting-margin {
margin: 0;
}
.counting-entry-error:empty,
.counting-message:empty,
.counting-confirm[hidden] {
display: none;
}
.counting-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.counting-call {
min-height: var(--touch-target);
letter-spacing: var(--tracking-digits);
font-variant-numeric: tabular-nums;
}
.counting-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
}
.counting-label {
color: var(--color-text);
font-size: var(--font-size-sm);
}
.counting-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.counting-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: var(--touch-target);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.counting-row-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
}
.counting-name {
min-width: 0;
color: var(--color-text);
font-size: var(--font-size-body);
overflow-wrap: anywhere;
}
.counting-total,
.counting-grand-total {
color: var(--color-text);
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
}
.counting-grand-total {
margin: 0;
}
.counting-votes {
min-height: var(--touch-target);
font-size: var(--font-size-lg);
letter-spacing: var(--tracking-digits);
font-variant-numeric: tabular-nums;
}
.counting-table,
.counting-add-candidate,
.counting-add-table,
.counting-remove-candidate,
.counting-remove-table,
.counting-clear,
.counting-retry,
.counting-reset,
.counting-confirm-yes,
.counting-confirm-no {
min-height: var(--touch-target);
}
.counting-remove-candidate {
align-self: flex-start;
}
.counting-confirm-text {
margin: 0;
}
.counting-confirm-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.counting-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
#app[data-route="booth-board"] > :not(#booth-board-route) {
display: none;
}
#app[data-route="fetch-list"] > :not(#fetch-list-route) {
display: none;
}
.fetch-list-screen,
.fetch-list-body,
.fetch-list-card,
.fetch-list-open-card,
.booth-board-ingest,
.booth-board-send {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.booth-board-ingest[hidden],
.booth-board-ingest-panel[hidden] {
display: none;
}
.booth-board-ingest-open {
align-self: flex-start;
}
.fetch-list-screen {
gap: var(--space-4);
}
.fetch-list-back,
.fetch-list-open,
.booth-board-send-open {
align-self: flex-start;
}
.fetch-list-message:empty,
.booth-board-send-error:empty {
display: none;
}
.fetch-list-message,
.fetch-list-notice,
.fetch-list-count,
.booth-board-send-title,
.booth-board-send-error {
margin: 0;
}
.fetch-list-voters,
.booth-board-send-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.fetch-list-voter,
.booth-board-send-label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
width: 100%;
min-height: var(--touch-target);
padding: var(--space-2) 0;
border: 0;
border-bottom: 1px solid var(--color-border);
background: none;
color: var(--color-text);
font: inherit;
text-align: start;
overflow-wrap: anywhere;
}
.booth-board-send-label {
flex-direction: row;
align-items: center;
gap: var(--space-2);
}
.booth-board-send-name .voter-row-name,
.booth-board-send-name .voter-row-meta {
display: block;
}
.booth-board-send-meta {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.booth-board-send-check {
margin: 0;
}
.fetch-list-name {
font-size: var(--font-size-lg);
}
.fetch-list-meta {
font-size: var(--font-size-body);
}
.booth-board-screen,
.booth-board-body,
.booth-board-card,
.booth-board-open-card,
.booth-board-entry {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.booth-board-screen {
gap: var(--space-4);
}
.booth-board-back,
.booth-board-open,
.booth-board-enter {
align-self: flex-start;
}
.booth-board-seat,
.booth-board-address,
.booth-board-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.booth-board-seat[hidden],
.booth-board-message:empty,
.booth-board-entry-error:empty,
.booth-board-confirm[hidden] {
display: none;
}
.booth-board-message,
.booth-board-notice,
.booth-board-entry-error {
margin: 0;
}
.booth-board-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.booth-board-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: var(--touch-target);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.booth-board-name {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
overflow-wrap: anywhere;
}
.booth-board-figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--space-2);
margin: 0;
}
.booth-board-figure {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.booth-board-figure-label {
color: var(--color-text);
font-size: var(--font-size-sm);
}
.booth-board-figure-value {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
}
.booth-board-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
}
.booth-board-label {
color: var(--color-text);
font-size: var(--font-size-sm);
}
.booth-board-turnout-input {
min-height: var(--touch-target);
font-size: var(--font-size-lg);
letter-spacing: var(--tracking-digits);
font-variant-numeric: tabular-nums;
}
.booth-board-entry-actions,
.booth-board-confirm-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.booth-board-confirm-actions {
margin-top: var(--space-3);
}
.booth-board-confirm-text {
margin: 0;
}
.booth-board-pick,
.booth-board-enter,
.booth-board-save,
.booth-board-cancel,
.booth-board-retry,
.booth-board-confirm-yes,
.booth-board-confirm-no,
.booth-board-call,
.my-calls-phone {
min-height: var(--touch-target);
}
.booth-board-call {
letter-spacing: var(--tracking-digits);
font-variant-numeric: tabular-nums;
}
.booth-board-source {
margin-top: var(--space-2);
}
.my-households-screen,
.my-households-body,
.my-households-list,
.my-calls-screen,
.my-calls-body,
.my-calls-row,
.my-calls-sheet {
display: flex;
flex-direction: column;
}
.my-households-screen,
.my-households-body {
gap: var(--space-4);
}
.my-calls-screen,
.my-calls-body,
.my-calls-row,
.my-calls-sheet {
gap: var(--space-3);
}
.my-calls-row {
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.my-calls-voter {
padding: 0;
border: 0;
}
.my-calls-actions,
.my-calls-outcomes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.my-households-seat {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.my-households-seat:empty,
.my-households-summary[hidden] {
display: none;
}
.my-households-summary,
.my-households-page,
.my-calls-summary {
margin: 0;
}
.call-builder-count,
.my-households-progress,
.my-calls-progress {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-xl);
line-height: var(--line-height-heading);
}
.my-households-row {
gap: var(--space-1);
}
.my-households-row-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.my-households-house {
color: var(--color-text);
font-size: var(--font-size-body);
}
.my-households-visited,
.my-households-mark {
margin: 0;
}
.my-households-visit {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.my-households-visit-last {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
.my-households-visit-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.my-calls-actions .btn-secondary,
.my-calls-outcome,
.my-households-visit-choice {
min-height: var(--touch-target);
margin-top: 0;
}
.my-households-visit-choice[aria-pressed="true"],
.my-calls-outcome[aria-pressed="true"] {
background: var(--color-primary-tint);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.my-households-visit-message {
margin: 0;
}
.my-households-count {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.my-households-contact,
.my-calls-contact,
.my-calls-recorded,
.my-calls-no-phone {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.my-households-message,
.my-calls-message,
.my-calls-row-message,
.my-calls-follow-up,
.my-calls-sheet-title {
margin: 0;
}
.my-households-back,
.my-households-retry,
.my-calls-back,
.my-calls-retry,
.my-calls-follow-up {
align-self: flex-start;
}
.my-households-ward {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.my-households-ward-title,
.my-calls-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
line-height: var(--line-height-heading);
}
.my-households-ward-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
}
.my-households-ward-meta {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-body);
}
.my-households-assignees,
.my-calls-lists,
.my-calls-rows {
list-style: none;
margin: 0;
padding: 0;
}
.my-households-assignee {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-3);
padding: var(--space-2) 0;
border-top: 1px solid var(--color-border);
}
.my-households-assignee-name {
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
.my-households-assignee[data-unassigned] .my-households-assignee-name {
color: var(--color-text-muted);
}
.my-households-assignee-count {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.my-households-assign-open {
min-height: var(--touch-target);
margin-top: var(--space-3);
}
.my-households-pick {
align-self: flex-start;
min-height: var(--touch-target);
}
.my-households-sync {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.my-households-sync-now {
min-height: var(--touch-target);
margin-top: 0;
}
.my-households-sync-message {
margin: var(--space-2) 0 0;
}
.household-card {
color: var(--color-text);
}
.household-members {
list-style: none;
margin: 0;
padding: 0;
}
.household-card .badge {
margin: 0;
}
.team-invite {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.team-invite[hidden],
.invite-sheet [hidden],
.join-card [hidden],
.join-screen .screen-lead[hidden] {
display: none;
}
.invite-open {
align-self: flex-start;
}
.invite-sheet {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: 0;
}
.invite-title {
margin: 0;
}
.invite-lead,
.invite-contact,
.invite-link-label {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.invite-roles {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.invite-role {
margin-bottom: 0;
}
.invite-role-text {
min-width: 0;
}
.invite-name,
.join-name {
margin: 0;
}
.invite-name-help,
.join-name-help {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.invite-message,
.invite-copy-message {
margin: 0;
}
.invite-result {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.invite-link {
margin: 0;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-body);
overflow-wrap: anywhere;
user-select: all;
}
.invite-qr {
display: block;
align-self: center;
width: 100%;
max-width: 16rem;
height: auto;
aspect-ratio: 1;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
image-rendering: pixelated;
}
.invite-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.invite-whatsapp {
text-decoration: none;
}
.invite-close {
align-self: flex-end;
}
.join-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: 0;
}
.join-message {
margin: 0;
}
.join-confirm {
margin-top: 0;
}
.join-paste,
.join-password {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.join-paste .picker-field,
.join-password .picker-field {
margin-bottom: 0;
}
.join-team-code {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
.join-team-code-value {
letter-spacing: var(--tracking-digits);
}
.join-later {
align-self: center;
}
.team-members {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.team-members[hidden],
.team-sheet [hidden],
.removed-screen [hidden] {
display: none;
}
.team-open {
align-self: flex-start;
}
.team-sheet {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: 0;
}
.team-title {
margin: 0;
}
.team-lead,
.team-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.team-message {
margin: 0;
}
.team-member-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--color-border);
}
.call-builder-saved-row,
.team-member {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: var(--touch-target);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
}
.team-member-text {
min-width: 0;
}
.team-member-name {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
overflow-wrap: anywhere;
}
.team-member-code,
.team-member-meta {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-member-code {
letter-spacing: var(--tracking-digits);
}
.team-member-actions {
display: flex;
flex: none;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
}
.team-rename-open {
flex: none;
width: auto;
margin-top: 0;
}
.team-rename {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.team-rename .picker-field {
margin: 0;
}
.team-rename-help {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-rename-error {
margin: var(--space-2) 0 0;
}
.team-poll-date {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.team-poll-title {
margin: 0;
font-size: var(--font-size-body);
}
.team-poll-value {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.team-poll-source,
.team-poll-help {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-poll-form .picker-field {
margin: 0;
}
.poll-date-missing {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.poll-date-missing-host[hidden],
.voter-appeal:empty,
.poll-date-missing[hidden],
.poll-date-missing-open[hidden],
.poll-day-date:empty {
display: none;
}
.poll-date-missing-notice,
.poll-date-missing-open {
margin: 0;
}
.poll-day-date .poll-date-missing {
margin-bottom: var(--space-4);
}
.team-remove {
flex: none;
width: auto;
margin-top: 0;
border-top: 0;
border-radius: var(--radius-pill);
}
.team-sheet[aria-busy="true"] button {
opacity: 0.6;
pointer-events: none;
}
.team-confirm {
margin-top: 0;
}
.team-confirm-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-close {
align-self: flex-end;
}
.removed-body {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.removed-wipe-failed {
margin: 0;
}
.seat-header[data-branded="true"] {
flex-wrap: wrap;
row-gap: 0;
}
.brand-mark {
display: flex;
flex: 1 0 100%;
align-items: center;
gap: var(--space-2);
min-height: var(--touch-target);
margin: 0 calc(-1 * var(--space-4));
padding: var(--space-1) var(--space-4);
background: var(--color-primary);
color: var(--color-on-primary);
}
.picker-screen > .brand-mark {
margin: 0;
border-radius: var(--radius-lg);
}
.brand-mark-symbol,
.brand-mark-photo {
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-sm);
background: var(--color-picture-plate);
object-fit: contain;
}
.brand-mark-photo {
border-radius: var(--radius-pill);
object-fit: cover;
}
.brand-mark-name {
margin: 0;
min-width: 0;
color: var(--color-on-primary);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
}
.brand-splash {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6) var(--space-4);
background: var(--color-accent);
color: var(--color-on-accent);
text-align: center;
}
.brand-splash[hidden] {
display: none;
}
.brand-splash-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
max-width: var(--content-max-width);
}
.brand-splash-photo {
width: 12rem;
height: 12rem;
border-radius: var(--radius-pill);
background: var(--color-picture-plate);
object-fit: cover;
}
.brand-splash-name {
margin: 0;
color: var(--color-on-accent);
font-size: var(--font-size-xl);
font-weight: 400;
line-height: var(--line-height-heading);
}
.brand-splash-slogan {
margin: 0;
color: var(--color-on-accent);
font-size: var(--font-size-lg);
line-height: var(--line-height-heading);
}
.brand-settings {
display: flex;
flex-direction: column;
margin-bottom: var(--space-4);
}
.brand-settings[hidden],
.branding-fields[hidden],
.branding-preview[hidden],
.branding-none[hidden],
.branding-replace[hidden],
.branding-leave[hidden],
.branding-continue[hidden] {
display: none;
}
.branding-continue {
margin: var(--space-3) 0 var(--space-4);
}
.branding-picture {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-1);
}
.branding-preview {
display: block;
width: 6rem;
height: 6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-picture-plate);
object-fit: contain;
}
.branding-replace .branding-preview {
margin: 0 0 var(--space-3);
}
.branding-help {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.branding-notice {
scroll-margin-top: calc(var(--touch-target) + var(--space-4));
}
.branding-field-error {
margin: var(--space-3) 0 var(--space-2);
}
.field-color {
padding: var(--space-1);
cursor: pointer;
}
.field-color::-webkit-color-swatch-wrapper {
padding: 0;
}
.field-color::-webkit-color-swatch {
border: 0;
border-radius: var(--radius-sm);
}
.field-color::-moz-color-swatch {
border: 0;
border-radius: var(--radius-sm);
}
.practice-banner {
max-width: var(--content-max-width);
min-height: var(--touch-target);
box-sizing: border-box;
display: flex;
align-items: center;
margin: var(--space-3) auto 0;
padding: var(--space-2) var(--space-4);
border-left: var(--space-1) solid var(--color-primary);
background: var(--color-primary-tint);
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
}
.practice-banner[data-tone="error"] {
border-left-color: var(--color-danger);
background: var(--color-danger-bg);
}
.practice-banner[hidden],
.practice-card [hidden] {
display: none;
}
.team-seat-notice {
max-width: var(--content-max-width);
min-height: var(--touch-target);
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-3) auto 0;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
border-left: var(--space-1) solid var(--color-primary);
background: var(--color-primary-tint);
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
}
.team-seat-notice-text {
flex: 1;
margin: 0;
}
.team-seat-notice-close {
flex: none;
}
.team-seat-status {
margin: 0;
}
.team-seat-notice[hidden],
.team-seat-status[hidden] {
display: none;
}
.practice-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.practice-title {
margin: 0;
}
.practice-lead,
.practice-message {
margin: 0;
}
.practice-lead {
color: var(--color-text);
font-size: var(--font-size-body);
}
.practice-card[aria-busy="true"] button {
opacity: 0.6;
pointer-events: none;
}
.practice-confirm {
margin-top: 0;
}
.text-size-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.text-size-card .card-title,
.text-size-lead,
.text-size-message,
.text-size-choice {
margin: 0;
}
.text-size-lead {
color: var(--color-text);
font-size: var(--font-size-body);
}
.practice-confirm-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-code-block {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-code-label {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-code {
margin: 0;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
color: var(--color-primary-strong);
font-size: var(--font-size-lg);
font-weight: 400;
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-digits);
line-height: var(--line-height-heading);
overflow-wrap: anywhere;
user-select: all;
}
.team-code-copy {
align-self: flex-start;
}
.team-code-message {
margin: 0;
}
.passphrase-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.passphrase-help {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-card-host {
margin-bottom: var(--space-4);
}
.team-card-host[hidden],
.team-card [hidden] {
display: none;
}
.team-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.team-card-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
}
.team-facts {
margin: 0;
border-top: 1px solid var(--color-border);
}
.team-fact {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: var(--touch-target);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
}
.team-fact-label {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.team-fact-value {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
text-align: end;
overflow-wrap: anywhere;
}
.team-card-joined,
.team-card-message {
margin: 0;
}
.team-card-retry {
align-self: flex-start;
}
.team-leave {
margin-top: 0;
}
.team-leave-confirm {
margin-top: 0;
}
.team-card[aria-busy="true"] button {
opacity: 0.6;
pointer-events: none;
}
.team-delete-all {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.team-delete-all-title {
margin: 0;
font-size: var(--font-size-body);
}
.team-delete-all-lead,
.team-delete-all-call,
.team-delete-all-message,
.team-delete-all-question {
margin: 0;
}
.team-delete-all-open {
align-self: flex-start;
}
.team-delete-all-confirm {
margin-top: 0;
}
.team-delete-all[aria-busy="true"] button,
.team-delete-all button[disabled] {
opacity: 0.6;
pointer-events: none;
}
.retention-banner-host,
.retention-prompt-host {
display: contents;
}
.retention-banner,
.retention-prompt {
max-width: var(--content-max-width);
box-sizing: border-box;
margin: var(--space-3) auto 0;
}
.retention-banner[hidden],
.retention-prompt[hidden],
.retention-prompt [hidden],
.retention-banner [hidden] {
display: none;
}
.retention-banner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
padding: 0 var(--space-4);
}
.retention-banner-text,
.retention-banner-cached {
margin: 0;
}
.retention-banner-cached,
.retention-prompt-cached {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.retention-banner-dismiss {
align-self: flex-end;
}
.retention-prompt {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.retention-prompt-title {
margin: 0;
font-size: var(--font-size-lg);
}
.retention-prompt-lead,
.retention-prompt-keep-info,
.retention-prompt-delete-info,
.retention-prompt-cached,
.retention-prompt-message,
.retention-prompt-call {
margin: 0;
}
.retention-prompt-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.retention-prompt-confirm {
border-top: 0;
padding-top: 0;
}
.retention-prompt-close {
align-self: flex-end;
}
.retention-prompt[aria-busy="true"] button,
.retention-prompt button[disabled] {
opacity: 0.6;
pointer-events: none;
}
.polling-day-screen {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.polling-day-banner {
margin: 0;
}
.polling-day-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
}
.polling-day-seat,
.polling-day-contact {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
}
.polling-day-seat[hidden] {
display: none;
}
.polling-day-message {
margin: 0;
}
.polling-day-body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.polling-day-notice {
margin: 0;
}
.polling-day-booth {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.polling-day-booth-title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-heading);
}
.polling-day-booth-meta {
margin: var(--space-1) 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
.polling-day-list,
.polling-day-undo-list {
margin: 0;
padding: 0;
list-style: none;
}
.polling-day-undo-list {
margin-bottom: var(--space-3);
}
.polling-day-row,
.polling-day-undo {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--touch-target);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
}
.polling-day-undo {
padding: var(--space-2) var(--space-3);
border: 0;
border-left: var(--space-1) solid var(--color-success);
border-radius: var(--radius-sm);
background: var(--color-success-bg);
}
.polling-day-voter {
flex: 1;
min-width: 0;
}
.polling-day-name,
.polling-day-undo-text {
flex: 1;
margin: 0;
color: var(--color-text);
font-size: var(--font-size-body);
line-height: var(--line-height-heading);
overflow-wrap: anywhere;
}
.polling-day-meta {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
.polling-day-mark,
.polling-day-undo-button {
flex: none;
width: auto;
margin-top: 0;
}
.polling-day-retry {
align-self: flex-start;
}
.polling-day-sms {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.polling-day-sms-button,
.polling-day-sms-next {
align-self: flex-start;
}
.polling-day-sms-parts {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.polling-day-source {
border-top: 1px solid var(--color-border);
}
.operator-page {
box-sizing: border-box;
width: 100%;
max-width: var(--content-max-width);
margin: var(--space-6) auto 0;
padding: 0 var(--space-4);
}
.operator-result {
overflow-x: auto;
}
.operator-table {
border-collapse: collapse;
min-width: 100%;
}
.operator-table th,
.operator-table td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
text-align: start;
white-space: nowrap;
}
.operator-table tbody th {
font-weight: 600;
}
.operator-row {
display: table-row;
}