/* Public poll pages (/p/<token>). Quiet, single column, phone-first. Colors and
   font come from the customer's theme via applyTheme (js/common.js). */
@layer base {

body.poll-page { background: var(--pp-surface); }
.poll-main { max-width: 32rem; margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) var(--pp-gutter) 3rem; }

.poll-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; font-weight: 700; font-size: 1.125rem; }
.poll-brand img { width: 2rem; height: 2rem; object-fit: contain; }

.poll-form, .poll-thanks, .poll-message {
  background: var(--pp-bg); border-radius: calc(var(--pp-radius) * 2); padding: 1.5rem 1.25rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}
.poll-status { color: var(--pp-muted); }
.poll-title { margin: 0 0 0.75rem; font-size: 1.5rem; line-height: 1.25; }
.poll-intro { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; }
.poll-intro p { margin: 0 0 0.75rem; }
.poll-intro p:last-child { margin-bottom: 0; }

.poll-question { border: 0; margin: 0; padding: 0; }
.poll-question legend { font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; padding: 0; }
.poll-choices { display: flex; flex-direction: column; gap: 0.625rem; }
.poll-choice {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  padding: 0.875rem 1rem; border: 1px solid var(--pp-neutral); border-radius: var(--pp-radius); font-size: 1.0625rem;
}
.poll-choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pp-primary); }
.poll-choice:has(input:checked) { border-color: var(--pp-primary); box-shadow: inset 0 0 0 1px var(--pp-primary); }
.poll-choice:has(input:focus-visible) { outline: 3px solid var(--pp-primary); outline-offset: 2px; }

.poll-field { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1.25rem; font-weight: 600; }
.poll-field input { font: inherit; font-weight: 400; font-size: 1rem; padding: 0.625rem; border: 1px solid var(--pp-neutral); border-radius: var(--pp-radius); background: var(--pp-bg); }
.poll-field input[type="number"] { max-width: 8rem; }
.poll-help { font-weight: 400; color: var(--pp-muted); font-size: 0.875rem; margin-top: -0.125rem; }
.poll-optional { font-weight: 400; color: var(--pp-muted); }

.poll-error { color: var(--pp-error); margin: 1rem 0 0; font-weight: 600; }
.poll-send { width: 100%; margin-top: 1.25rem; padding: 0.875rem; font-size: 1.0625rem; }
.poll-closes { margin: 0.875rem 0 0; color: var(--pp-muted); font-size: 0.875rem; text-align: center; }

.poll-thanks h1, .poll-message h1 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.poll-thanks p, .poll-message p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5; }


/* ---------- results page (/p/results/<admin token>) ---------- */
.results-main { max-width: 40rem; }
.results-card { background: var(--pp-bg); border-radius: calc(var(--pp-radius) * 2); padding: 1.5rem 1.25rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.results-head h1 { margin: 0; font-size: 1.375rem; line-height: 1.3; }
.results-head .btn { flex: none; }
.results-state { margin: 0.375rem 0 1.25rem; color: var(--pp-muted); font-size: 0.875rem; }
.results-attendance { display: flex; flex-direction: column; gap: 0.125rem; margin: 0 0 1.5rem; padding: 1rem 1.125rem;
  border-left: 6px solid var(--pp-primary); background: var(--pp-surface); border-radius: 0 var(--pp-radius) var(--pp-radius) 0; }
.attendance-label { font-weight: 600; font-size: 0.875rem; color: var(--pp-muted); }
.attendance-number { font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.attendance-note { color: var(--pp-muted); font-size: 0.8125rem; }
.results-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.count-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.0625rem; margin-bottom: 0.3rem; }
.count-line strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.count-bar { height: 0.625rem; border-radius: 999px; background: var(--pp-surface); overflow: hidden; }
.count-bar span { display: block; height: 100%; background: var(--pp-primary); border-radius: 999px; }
.count-people { margin: -0.125rem 0 0.375rem; color: var(--pp-muted); font-size: 0.875rem; }
.results-total { margin: 1rem 0 0; font-weight: 600; }
.results-card h2 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; }
.results-empty { color: var(--pp-muted); margin: 0; }
.detail-group { border-top: 1px solid var(--pp-neutral); }
.detail-group:last-child { border-bottom: 1px solid var(--pp-neutral); }
.detail-group summary {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none;
  padding: 0.875rem 0.25rem; font-weight: 600; font-size: 1.0625rem;
}
.detail-group summary::-webkit-details-marker { display: none; }
.detail-group summary::before { content: '\25B8'; color: var(--pp-muted); transition: transform 0.15s; }
.detail-group[open] summary::before { transform: rotate(90deg); }
.detail-group summary:focus-visible { outline: 3px solid var(--pp-primary); outline-offset: 2px; }
.detail-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--pp-muted); }
.detail-group > :not(summary):last-child { margin-bottom: 0.875rem; }
.detail-names { margin: 0; padding-left: 1.5rem; columns: 2 12rem; column-gap: 1.5rem; }
.detail-names li { padding: 0.125rem 0; break-inside: avoid; }
.detail-unnamed { margin: 0.375rem 0 0; color: var(--pp-muted); font-size: 0.875rem; }
.results-updated { margin: 1.25rem 0 0; color: var(--pp-muted); font-size: 0.8125rem; }
.results-private { margin: 1rem 0 0; color: var(--pp-muted); font-size: 0.8125rem; text-align: center; }

} /* @layer base */