:root { --ink: #18323a; --muted: #63777b; --paper: #f5f3eb; --panel: #fffdf7; --line: #d4ded8; --accent: #007d70; --danger: #a84337; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--paper); color: var(--ink); font-family: Georgia, serif; margin: 0; min-height: 100vh; }
main { margin: 0 auto; max-width: 900px; padding: 3rem 1.25rem 5rem; }
h1 { font-size: 2.4rem; font-weight: 500; margin: .2rem 0 2rem; } h2 { font-size: 1.25rem; font-weight: 500; margin-top: 0; }
.eyebrow { color: var(--accent); font-family: sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.site-header { align-items: center; background: var(--ink); display: flex; justify-content: space-between; padding: .9rem max(1.25rem, calc((100vw - 900px) / 2)); }.site-header a { color: white; font-size: 1.05rem; text-decoration: none; }.site-header form { margin: 0; }
.login-page { display: grid; place-items: center; padding: 1.25rem; }.login-panel, .create-event { background: var(--panel); border: 1px solid var(--line); padding: 2rem; }.login-panel { max-width: 430px; width: 100%; }
form { display: grid; gap: 1rem; } label { display: grid; font-family: sans-serif; font-size: .9rem; font-weight: 700; gap: .4rem; } input, select, textarea { background: white; border: 1px solid #9cafad; border-radius: 3px; font: inherit; padding: .7rem; } input[type="radio"], input[type="checkbox"] { padding: 0; } textarea { resize: vertical; }
button { background: var(--accent); border: 0; border-radius: 3px; color: white; cursor: pointer; font: 700 .9rem sans-serif; justify-self: start; padding: .7rem 1rem; } button.quiet { background: transparent; padding: .3rem; } button.danger { background: var(--danger); margin-top: 1.5rem; }
.notice { border-left: 4px solid; padding: .8rem 1rem; }.notice.error { background: #ffe9e5; border-color: var(--danger); }.notice.success { background: #e0f1e9; border-color: var(--accent); }.create-event { margin-bottom: 2.5rem; max-width: 560px; }.event-list { border-top: 1px solid var(--line); }.event-row { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); display: grid; gap: .75rem; grid-template-columns: 1fr auto auto; padding: 1rem .25rem; text-decoration: none; }.event-row:hover { background: #eaf0e9; }.status { color: var(--muted); font: .75rem sans-serif; }.empty { color: var(--muted); }.back { color: var(--accent); font-family: sans-serif; }
.action-link { color: white; background: var(--accent); border-radius: 3px; font: 700 .9rem sans-serif; padding: .7rem 1rem; text-decoration: none; }.table-wrap { overflow-x: auto; }.table-wrap table { border-collapse: collapse; width: 100%; }.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--line); padding: .7rem; text-align: left; vertical-align: top; }.table-wrap th { font-family: sans-serif; font-size: .8rem; }
.state-flow { list-style: none; margin: 0 0 2.5rem; padding: 0; }.state-step { border-left: 3px solid var(--line); display: grid; gap: .25rem; padding: .75rem 1rem 1.25rem; }.state-step strong { font-family: sans-serif; }.state-step > span { color: var(--muted); }.state-step.is-complete { border-color: var(--accent); }.state-step.is-current { background: var(--panel); border-color: var(--accent); }.state-step.is-current strong { color: var(--accent); }.state-action { max-width: 640px; }
.cancel-event { border-top: 1px solid var(--line); margin-top: 3rem; max-width: 640px; padding-top: 2rem; }.cancel-event form { display: block; }.cancel-event button.danger { margin-top: 0; }
.confirmation-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); max-width: 32rem; padding: 0; width: calc(100% - 2rem); }.confirmation-modal::backdrop { background: rgb(24 50 58 / 70%); }.confirmation-modal__content { padding: 2rem; }.confirmation-modal__content h2 { font-size: 1.6rem; margin: .35rem 0 1rem; }.confirmation-modal__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }.confirmation-modal__actions form { display: block; }.confirmation-modal__actions button { margin: 0; }.modal-secondary { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.participant-row { grid-template-columns: minmax(12rem, 1.6fr) minmax(8rem, 1fr) auto auto; padding: 1.15rem .75rem; }.participant-identity { display: grid; gap: .3rem; }.participant-identity > strong { font-family: sans-serif; font-size: .95rem; }.participant-phone { font: .9rem sans-serif; }.participant-vote-label { background: transparent; color: var(--muted); font: 700 .68rem sans-serif; justify-self: start; padding: 0; text-decoration: underline; text-transform: uppercase; text-underline-offset: 3px; }.participant-edit { background: transparent; border: 1px solid var(--accent); color: var(--accent); }.participant-edit-actions .danger { margin: 0 0 0 auto; }.participant-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }.participant-filter { background: transparent; border: 1px solid var(--accent); color: var(--accent); }.participant-filter.is-active { background: var(--accent); color: white; }.vote-result-list { border-top: 1px solid var(--line); }.vote-result-list p { border-bottom: 1px solid var(--line); font: .85rem/1.45 sans-serif; margin: 0; padding: .75rem 0; }
.public-vote { max-width: 720px; }.public-vote__event { margin-bottom: .65rem; }.public-vote__participant { color: var(--ink); font-size: 1.15rem; margin: 0 0 2rem; }.public-vote__participant span { color: var(--muted); display: block; font: 700 .7rem sans-serif; margin-bottom: .2rem; text-transform: uppercase; }.vote-instructions { border-left: 4px solid var(--accent); margin-bottom: 2rem; padding: .25rem 0 .25rem 1rem; }.vote-instructions h2 { font-family: sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }.vote-instructions p { line-height: 1.55; margin: 0; }.date-vote-form { gap: 1.25rem; }.date-option { background: var(--panel); border: 1px solid var(--line); margin: 0; padding: 1.5rem; }.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }.date-option__heading { align-items: center; background: #fff; border: 1px solid #657477; display: grid; gap: .25rem .75rem; grid-template-columns: 1.5rem 1fr; margin-bottom: 1rem; padding: .8rem 1rem; }.calendar-icon { border: 2px solid #24549a; border-radius: 2px; grid-row: 1 / 3; height: 1.25rem; position: relative; width: 1.25rem; }.calendar-icon::before { border-top: 3px solid #24549a; content: ''; left: -2px; position: absolute; right: -2px; top: 3px; }.calendar-icon::after { background: #24549a; box-shadow: 8px 0 #24549a; content: ''; height: 4px; left: 2px; position: absolute; top: -5px; width: 2px; }.date-option__number { color: var(--accent); font: 700 .75rem sans-serif; text-transform: uppercase; }.date-option__date { font: 700 1.2rem sans-serif; }.date-option__note { color: var(--muted); margin: .25rem 0 1rem; }.date-option__responses { display: grid; gap: .4rem; }.vote-choice { align-items: center; border: 1px solid transparent; cursor: pointer; display: grid; gap: .75rem; grid-template-columns: 1.1rem 1fr; min-height: 2.75rem; padding: .5rem .65rem; }.vote-choice:hover { background: #eef4f2; border-color: var(--line); }.vote-choice input { height: 1.1rem; margin: 0; width: 1.1rem; }.vote-choice span { line-height: 1.25; }.vote-submit { margin-top: .25rem; }
.vote-chart { margin-top: 3.5rem; }.vote-chart h2 { margin-bottom: 1.5rem; }.vote-bars { display: grid; gap: 1rem; }.vote-bar-row { align-items: center; display: grid; font-family: sans-serif; gap: .75rem; grid-template-columns: minmax(7rem, 10rem) 1fr 2rem; }.vote-bar-label { font-size: .9rem; }.vote-bar-track { background: #dce3e7; height: 1.75rem; overflow: hidden; }.vote-bar-fill { background: #24549a; display: block; height: 100%; min-width: 0; }.vote-bar-count { color: var(--ink); font-size: .9rem; text-align: right; }
.event-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2.5rem; }.event-vote-summary { background: var(--panel); border: 1px solid var(--line); margin: 0 0 2rem; padding: 1.5rem; }.event-vote-summary h2 { margin: .35rem 0 1rem; }.event-top-dates { display: grid; gap: .65rem; }.event-top-date { align-items: center; border-top: 1px solid var(--line); display: grid; gap: .8rem; grid-template-columns: 2rem 1fr auto; padding: .85rem 0 .2rem; }.event-top-date__rank { align-items: center; background: #24549a; color: white; display: flex; font: 700 .8rem sans-serif; height: 1.7rem; justify-content: center; width: 1.7rem; }.event-top-date strong { font: 700 1rem sans-serif; }.event-top-date small { color: var(--muted); display: block; font: .75rem sans-serif; margin-top: .2rem; }.event-top-date__votes { color: #24549a; font: 700 .85rem sans-serif; }.event-final-date { align-items: center; background: #fff; border: 1px solid #657477; display: grid; gap: 1rem; grid-template-columns: 2rem 1fr; margin: 0 0 2rem; padding: 1.25rem 1.5rem; }.event-final-date .calendar-icon { grid-row: auto; }.event-final-date h2 { font: 700 1.4rem sans-serif; margin: .25rem 0 0; }.event-final-date p:last-child { color: var(--muted); margin-bottom: 0; }
.report-page { max-width: 1180px; }.report-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 2rem; }.report-heading h1 { margin-bottom: .35rem; }.report-metrics { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin-bottom: 3rem; background: var(--line); border: 1px solid var(--line); }.report-metrics div { background: var(--panel); display: grid; gap: .25rem; padding: 1.25rem; }.report-metrics strong { color: #24549a; font: 700 1.8rem sans-serif; }.report-metrics span { color: var(--muted); font: .78rem sans-serif; }.report-table { background: var(--panel); border: 1px solid var(--line); }.report-table table { min-width: 980px; }.report-table td { font: .82rem/1.45 sans-serif; }.report-table td small { color: var(--muted); display: block; margin-top: .2rem; }
.report-leading-date { align-items: center; background: #fff; border: 1px solid #657477; display: grid; gap: 1.25rem; grid-template-columns: 3rem minmax(12rem, 1fr) auto auto; margin: -1rem 0 3rem; padding: 1.4rem 1.5rem; }.report-leading-date__calendar { align-items: center; background: #e9f0f8; display: flex; height: 3rem; justify-content: center; width: 3rem; }.report-leading-date__calendar .calendar-icon { grid-row: auto; }.report-leading-date__main h2 { font: 700 1.45rem sans-serif; margin: .2rem 0 0; }.report-leading-date__main > p:last-child { color: var(--muted); margin: .35rem 0 0; }.report-leading-date__stat { border-left: 1px solid var(--line); display: grid; gap: .2rem; min-width: 7.5rem; padding-left: 1.25rem; }.report-leading-date__stat strong { color: #24549a; font: 700 1.6rem sans-serif; }.report-leading-date__stat strong small { color: var(--muted); font-size: .85rem; }.report-leading-date__stat span { color: var(--muted); font: .72rem sans-serif; text-transform: uppercase; }
.event-index-section { margin-top: 3rem; }.event-index-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: 1fr auto; padding: 1rem .25rem; }.event-index-row > div:first-child { display: grid; gap: .25rem; }.event-index-row strong { font-family: sans-serif; }.event-index-actions { display: flex; flex-wrap: wrap; font: 700 .82rem sans-serif; gap: 1rem; }.event-index-actions a { color: var(--accent); }
@media (max-width: 580px) { main { padding: 2rem 1rem 4rem; } h1 { font-size: 2rem; margin-bottom: 1.5rem; }.public-vote__event { margin-bottom: .65rem; }.event-row, .participant-row { grid-template-columns: 1fr; }.event-row span:last-child { grid-column: auto; }.date-option { padding: 1rem .75rem; }.date-option__heading { padding: .75rem; }.date-option__date { font-size: 1.05rem; }.vote-choice { min-height: 3rem; padding: .55rem .45rem; }.vote-submit { justify-self: stretch; min-height: 3rem; }.vote-chart { margin-top: 3rem; }.vote-bar-row { grid-template-columns: 6.5rem 1fr 1.5rem; gap: .5rem; }.vote-bar-label { font-size: .8rem; }.report-heading { align-items: stretch; flex-direction: column; }.report-heading .action-link { align-self: flex-start; }.report-metrics { grid-template-columns: 1fr; }.report-leading-date { grid-template-columns: 3rem 1fr; }.report-leading-date__stat { border-left: 0; border-top: 1px solid var(--line); min-width: 0; padding: 1rem 0 0; } }