/* Placuit — a deliberately quiet interface: one accent color, one card
   surface, and a dense readable grid. Light and dark are both first-class. */

:root {
    color-scheme: light dark;

    --bg: dimgrey;
    --bg-deep: #4d4d4d;
    --card: #fff;
    --card-sunken: #f7f7f8;
    --text: #222;
    /* Their preferred darkgray is reserved for rules and dark-surface text;
       body-level muted text is darkened to stay legible on white. */
    --muted: #5f6368;
    --faint: #8a8f94;
    --line: #e4e4e7;
    --line-strong: #d0d0d4;

    --accent: #d93636;
    --accent-ink: #fff;
    --accent-hover: #bf2c2c;
    --accent-soft: #fdeceb;

    --yes: #1f7a3f;
    --yes-soft: #e8f4ec;
    --maybe: #a96500;
    --maybe-soft: #fdf1de;
    --no: #6b7280;
    --no-soft: #f1f2f4;

    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .10);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .07);
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1b1d;
        --bg-deep: #141416;
        --card: #242427;
        --card-sunken: #2c2c30;
        --text: #ececee;
        --muted: #a9a9a9;
        --faint: #85858b;
        --line: #37373c;
        --line-strong: #45454b;

        --accent: #ef5350;
        --accent-hover: #f36360;
        --accent-soft: #3a2323;

        --yes: #5cc98a;
        --yes-soft: #1e3327;
        --maybe: #e0a44a;
        --maybe-soft: #362b1a;
        --no: #9aa0aa;
        --no-soft: #2e2e33;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute has to beat the layout rules below. Several components
   set display on a class — inline-flex for the time field and its picker
   button, flex for the shared time controls — and a class selector outranks
   the browser's own [hidden] rule, so those elements stayed on screen after
   the script hid them. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--sans);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- shell ---------- */

.masthead {
    background: var(--bg-deep);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
}

.masthead-inner,
.wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 1rem;
}

.masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 56px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -.01em;
    text-decoration: none;
}

.brand:hover { color: #fff; }

.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--accent);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* The name is Latin, so it says what it means. Muted, and the first thing
   dropped when the header gets tight — it is a grace note, not a label. */
.brand-gloss {
    color: #b4b4b4;
    font-weight: 400;
    font-size: .8125rem;
    font-style: italic;
    padding-left: .55rem;
    margin-left: .55rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .brand-gloss { display: none; }
}

.masthead nav { display: flex; align-items: center; gap: 1.1rem; }

.masthead nav a {
    color: #e7e7e7;
    text-decoration: none;
    font-size: .875rem;
}

.masthead nav a:hover { color: #fff; text-decoration: underline; }

main { padding: 1.25rem 0 3rem; }

.stack > * + * { margin-top: 1.25rem; }

.footer {
    color: #dcdcdc;
    font-size: .8125rem;
    text-align: center;
    padding: 0 1rem 2rem;
}

.footer a { color: #fff; }

/* The header carries the translation on a wide screen; down here is where a
   phone gets it, since the header drops it to save room. */
.footer-gloss { display: none; font-style: italic; opacity: .85; }

@media (max-width: 34rem) {
    .footer-gloss { display: inline; }
}

/* ---------- cards ---------- */

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.card-tight { padding: 1.15rem 1.25rem; }

.card + .card { margin-top: 1.25rem; }

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .5rem;
}

.muted { color: var(--muted); }
.small { font-size: .8125rem; }
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
}

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

/* ---------- poll header ---------- */

.poll-title { font-size: 1.5rem; margin-bottom: .35rem; overflow-wrap: anywhere; }

.poll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    color: var(--muted);
    font-size: .875rem;
}

.poll-meta span { display: inline-flex; align-items: center; gap: .3rem; }

.poll-desc { margin-top: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* A brief tint when live-updated content arrives, so a change that happens
   while you are reading does not go unnoticed. */
@keyframes just-updated {
    from { background: var(--accent-soft); }
    to   { background: transparent; }
}

.just-updated {
    animation: just-updated 1.4s ease-out;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .just-updated { animation: none; }
}

/* ---------- badges & notices ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    white-space: nowrap;
}

.badge-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge-yes { background: var(--yes-soft); border-color: transparent; color: var(--yes); }
.badge-you { background: var(--card-sunken); }

.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--card-sunken);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    font-size: .875rem;
}

.notice-good { border-left-color: var(--yes); }
.notice strong { display: block; margin-bottom: .15rem; }

.error-text { color: var(--accent); font-size: .8125rem; margin-top: .3rem; }

.banner-final {
    background: var(--yes-soft);
    border: 1px solid transparent;
    border-left: 3px solid var(--yes);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.banner-final .final-when { font-size: 1.0625rem; font-weight: 650; color: var(--yes); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--card-sunken); color: var(--text); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-danger { color: var(--accent); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--accent-soft); border-color: var(--accent); }

.btn-sm { padding: .3rem .6rem; font-size: .8125rem; }
.btn-lg { padding: .65rem 1.25rem; font-size: .9375rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-row-end { justify-content: flex-end; }

/* ---------- forms ---------- */

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }

label.lbl {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.hint { color: var(--muted); font-size: .8125rem; margin-top: .3rem; }

input[type=text], input[type=email], input[type=date], input[type=time],
input[type=number], input[type=password], input[type=datetime-local], select, textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .9375rem;
}

textarea { min-height: 5rem; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .6rem 0;
    border-top: 1px solid var(--line);
}

.check:first-of-type { border-top: 0; }
.check input { margin: .2rem 0 0; width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }
.check .check-body { min-width: 0; }
.check .check-title { font-weight: 600; font-size: .875rem; }
.check .check-hint { color: var(--muted); font-size: .8125rem; }

/* segmented type switch */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented label {
    padding: .45rem .9rem;
    font-size: .875rem;
    cursor: pointer;
    background: var(--card);
    border-left: 1px solid var(--line-strong);
}
.segmented label:first-child { border-left: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span { color: var(--accent-ink); }
.segmented label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The response scale belongs to the option list above it, so it sits in the
   same panel rhythm rather than floating as another top-level control. */
.scale-choice {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.scale-choice .hint { margin: .5rem 0 0; }

/* ---------- date picker ---------- */

/* Choosing days and choosing a time are two steps of one job, so they share a
   panel. Without this the time control sat at the same level as the poll-type
   tabs and read as another set of tabs. */
.picker-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-sunken);
    padding: 1rem;
}

.picker-step + .picker-step {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-strong);
}

.picker-step-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .7rem;
}

/* The month sits on its own surface so hover and today read clearly against
   the panel behind them. */
.picker-panel .cal {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem;
}

.picker-panel .cal-add input,
.picker-panel .chosen { background: var(--card); }

/* A quieter relative of the poll-type control, so the two are not mistaken
   for each other. */
.segmented-sm label { padding: .35rem .75rem; font-size: .8125rem; }



/* Visible to screen readers only: used for the calendar's running commentary
   on what has just been selected. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.datepick {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.cal-title { font-size: 1rem; font-weight: 650; }

.cal-nav {
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--text);
    border-radius: var(--radius-sm);
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.cal-nav:hover { background: var(--card-sunken); border-color: var(--accent); color: var(--accent); }

table.cal-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.cal-grid th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--faint);
    padding-bottom: .3rem;
}

table.cal-grid td { padding: 1px; }

.cal-day {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
}

.cal-day:hover { background: var(--card-sunken); border-color: var(--line-strong); }
.cal-day.is-outside { color: var(--faint); }
.cal-day.is-weekend { color: var(--muted); }
.cal-day.is-today { border-color: var(--line-strong); font-weight: 700; }

.cal-day.is-picked,
.cal-day.is-picked:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
}

.cal-help { margin: .6rem 0 0; }

.cal-side { min-width: 0; }
.cal-add { display: flex; gap: .5rem; }
.cal-add input { min-width: 0; }

.cal-chosen { display: grid; gap: .35rem; }

.chosen {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--card-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .35rem .5rem;
}

.chosen-day {
    flex: 1;
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chosen .opt-start { width: 6.5rem; }
.chosen .opt-dur { width: 7.5rem; }

.cal-times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1rem;
}

.cal-time-fields {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.cal-time-fields input[type=time] { width: 8rem; }
.cal-time-fields select { width: auto; min-width: 8.5rem; }
.cal-vary {
    flex-basis: 100%;
    border-top: 0;
    padding-top: 0;
    margin-top: .1rem;
}

@media (max-width: 720px) {
    .datepick { grid-template-columns: 1fr; }
    .cal-day { min-height: 2.75rem; }
}

/* A deadline is a date and a time; keeping them as two fields means the time
   half gets the same picker button as every other time field. */
.deadline-fields {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.deadline-fields input[type=date] { flex: 1 1 9rem; min-width: 0; }

/* ---------- time picker ---------- */

/* The field keeps its own behavior; the button beside it is the way in to
   the list picker, so nothing is hijacked. */
.time-with-picker {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.time-with-picker input { min-width: 0; }

.timepop-open {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.timepop-open:hover {
    background: var(--card-sunken);
    border-color: var(--accent);
    color: var(--accent);
}

.timepop {
    position: absolute;
    z-index: 50;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .75rem;
}

.timepop-cols { display: flex; gap: .5rem; }

.timepop-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: center;
    margin-bottom: .25rem;
}

.timepop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 11.5rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-sunken);
    scrollbar-width: thin;
}

.timepop-list:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.timepop-option {
    padding: .45rem .8rem;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.timepop-option:hover { background: var(--card); }

.timepop-option.is-on {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
}

.timepop-done { width: 100%; margin-top: .6rem; }

@media (max-width: 640px) {
    /* Bigger targets, and the list is short enough to see at a glance. */
    .timepop-option { padding: .6rem 1rem; font-size: 1rem; }
    .timepop-list { max-height: 13rem; }
    .timepop-open { width: 2.6rem; height: 2.6rem; }
}

/* ---------- option builder ---------- */

.opt-list { display: grid; gap: .5rem; }

.opt-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    align-items: center;
    background: var(--card-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem;
}

.opt-row .opt-fields {
    display: grid;
    grid-template-columns: minmax(132px, 1.15fr) minmax(92px, .7fr) minmax(104px, .8fr) minmax(92px, .7fr);
    gap: .5rem;
    align-items: center;
}

.opt-row input[type=date],
.opt-row input[type=time],
.opt-row select { padding: .4rem .5rem; font-size: .875rem; }

.opt-row.opt-text .opt-fields { grid-template-columns: 1fr; }

.opt-remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: var(--radius-sm);
}

.opt-remove:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- results grid ---------- */

.grid-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    -webkit-overflow-scrolling: touch;
}

table.grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

table.grid th, table.grid td {
    border-bottom: 1px solid var(--line);
    padding: .55rem .5rem;
    text-align: center;
    vertical-align: middle;
}

table.grid tr:last-child td { border-bottom: 0; }

table.grid th.who, table.grid td.who {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    text-align: left;
    border-right: 1px solid var(--line);
    min-width: 148px;
    max-width: 220px;
}

table.grid thead th {
    background: var(--card-sunken);
    font-weight: 600;
    font-size: .8125rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-strong);
}

table.grid thead th.who { background: var(--card-sunken); z-index: 3; }

.colhead { display: grid; gap: 1px; line-height: 1.15; min-width: 62px; }
.colhead .wd { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.colhead .dn { font-size: 1.0625rem; font-weight: 650; }
.colhead .mo { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.colhead .tm { font-size: .6875rem; color: var(--muted); white-space: nowrap; }
.colhead .txt { font-size: .8125rem; font-weight: 600; max-width: 130px; overflow-wrap: anywhere; white-space: normal; }

th.is-best { box-shadow: inset 0 3px 0 var(--yes); }
th.is-final { box-shadow: inset 0 3px 0 var(--accent); }

.who-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-mail { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 700;
}

.mark-yes { background: var(--yes-soft); color: var(--yes); }
.mark-maybe { background: var(--maybe-soft); color: var(--maybe); }
.mark-no { background: var(--no-soft); color: var(--no); }
.mark-none { color: var(--faint); font-weight: 400; }

table.grid tfoot td {
    background: var(--card-sunken);
    font-size: .8125rem;
    border-top: 1px solid var(--line-strong);
    border-bottom: 0;
}

table.grid tfoot td.who { background: var(--card-sunken); font-weight: 600; }

.tally { display: grid; gap: 0; line-height: 1.25; }
.tally .t-yes { font-weight: 700; color: var(--yes); }
.tally .t-maybe { font-size: .75rem; color: var(--maybe); }

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem;
    font-size: .9375rem;
}

/* ---------- your response ---------- */

.vote-list { display: grid; gap: .4rem; }

.vote-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-sunken);
}

.vote-when { font-weight: 600; font-size: .9375rem; }
.vote-when .vote-sub { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); }

.choice { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }

.choice label {
    position: relative;
    padding: .4rem .7rem;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    border-left: 1px solid var(--line-strong);
    color: var(--muted);
    user-select: none;
}

.choice label:first-child { border-left: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label:hover { background: var(--card-sunken); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.choice label.c-yes:has(input:checked) { background: var(--yes); color: #fff; }
.choice label.c-maybe:has(input:checked) { background: var(--maybe); color: #fff; }
.choice label.c-no:has(input:checked) { background: var(--no); color: #fff; }

/* ---------- signup list ---------- */

.signup-list { display: grid; gap: .6rem; }

.signup-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .8rem .9rem;
    background: var(--card);
}

/* Inside the sign-up form the cards sit on the card surface already, so they
   take the sunken tone to stay distinct from it. */
.response-form .signup-item { background: var(--card-sunken); }
.response-form .signup-item .claimants li { background: var(--card); }

.signup-item.is-full { background: var(--card-sunken); }

.signup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    flex-wrap: wrap;
}

.signup-head .badge { flex: none; }

.signup-name { font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }

.signup-item.is-full .signup-name { color: var(--muted); }

.meter {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    background: var(--yes);
    border-radius: inherit;
    transition: width .25s ease-out;
}

.signup-count {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .35rem;
    font-variant-numeric: tabular-nums;
}

.claimants {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .4rem;
}

.claimants li {
    font-size: .8125rem;
    background: var(--card-sunken);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .55rem;
}

.signup-item.is-full .claimants li { background: var(--card); }
.claimants li.is-you { border-color: var(--accent); color: var(--accent); }
.claimants .qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.claimants-empty { font-size: .8125rem; color: var(--faint); margin: .5rem 0 0; }

/* The claim control sits on its own row under the item's status, so it has
   room to be a proper target rather than something squeezed beside a title. */
.signup-claim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.qty-label {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* A number box flanked by minus and plus, big enough to hit with a thumb.
   The buttons are revealed by the script; without it the field is a plain
   number input with the browser's own spinner, which still works. */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    min-height: 3.1rem;
}

.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.stepper input[type=number] {
    width: 5rem;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .4rem .25rem;
}

.stepper input[type=number]:focus {
    box-shadow: none;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* The native spinner is redundant once the buttons are in place, and it is
   the fiddliest target on the page. */
.stepper.has-buttons input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.stepper.has-buttons input[type=number]::-webkit-outer-spin-button,
.stepper.has-buttons input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.step-btn {
    border: 0;
    background: var(--card-sunken);
    color: var(--text);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    width: 3.25rem;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s;
}

.step-btn:hover { background: var(--accent-soft); color: var(--accent); }
.step-btn:active { background: var(--accent); color: var(--accent-ink); }
.step-btn[disabled] { opacity: .4; cursor: not-allowed; background: var(--card-sunken); color: var(--muted); }

.vote-item.is-full { opacity: .72; }

/* item builder row: name plus quantity, the quantity as tall as the name */
.opt-row.opt-item .opt-fields { grid-template-columns: 1fr auto; }
.opt-row.opt-item input[type=text] { min-height: 2.6rem; }

/* ---------- comments ---------- */

.comment { display: flex; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; padding-top: 0; }

.avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card-sunken);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
}

.comment-body { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.comment-name { font-weight: 600; font-size: .875rem; }
.comment-time { color: var(--faint); font-size: .75rem; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; margin-top: .1rem; }

/* ---------- share links ---------- */

.share { display: grid; gap: .75rem; }

.share-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem;
    background: var(--card-sunken);
}

.share-item .section-label { margin-bottom: .35rem; }

.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    background: var(--card);
}

/* ---------- QR code ---------- */

.qr-block { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }

/* A white plate under the code whatever the theme, because a scanner wants
   dark modules on light ones and nothing else. */
.qr-art {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .35rem;
    flex: 0 0 auto;
}

.qr-art svg { display: block; width: 8.5rem; height: 8.5rem; }

.qr-meta { flex: 1 1 14rem; min-width: 0; }
.qr-meta .hint:first-child { margin-top: 0; }
.qr-meta .btn-row { margin-top: .6rem; }

/* ---------- dialogs ---------- */

/* Both dialogs are rendered by the server; the script promotes them to
   modals. Without it, .ready is an ordinary panel in the flow of the page —
   hence the margin and the full width here, which showModal() overrides. */
dialog {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    padding: 0;
    box-shadow: var(--shadow);
}

dialog::backdrop { background: rgba(0, 0, 0, .55); }

/* Open but not modal — no script — the browser would otherwise float this
   over the page on top of whatever is beneath it. In the flow it reads as
   the first card instead. showModal() needs the positioning back. */
.ready {
    position: static;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto 1.25rem;
}

.ready:modal {
    position: fixed;
    margin: auto;
}

.ready-inner { padding: 1.35rem 1.4rem 1.15rem; }
.ready-inner h2 { margin: 0; font-size: 1.2rem; }
.ready-lead { color: var(--muted); margin: .3rem 0 1rem; }

.ready-choices { display: grid; gap: .55rem; }

.ready-choice {
    display: block;
    padding: .8rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card-sunken);
    color: inherit;
    text-decoration: none;
}

.ready-choice:hover,
.ready-choice:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ready-choice-name { display: block; font-weight: 600; }

.ready-choice-note {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
    margin-top: .15rem;
}

.ready-choice.is-done { border-color: var(--yes); background: var(--yes-soft); }
.ready-choice.is-done .ready-choice-note { color: var(--yes); }

.ready-foot { margin-top: 1rem; }

/* The presenting view: one code, as large as the screen allows, for a room
   full of people to scan at once. */
.present {
    width: min(94vw, 52rem);
    max-width: none;
    max-height: 94vh;
    margin: auto;
    text-align: center;
}

.present-inner { padding: 1.5rem 1.5rem 1.25rem; }

.present-title {
    margin: 0;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.present-lead { color: var(--muted); margin: .3rem 0 1rem; }

/* As large as the window allows: the person reading it is at the back of the
   room, not at the keyboard. The plate carries the width rather than the SVG,
   because a percentage inside a shrink-to-fit box resolves against the
   image's own intrinsic size and comes out far too small. */
.present-art {
    display: block;
    width: min(64vh, 100%);
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: .75rem;
}

.present-art svg {
    display: block;
    width: 100%;
    height: auto;
}

.present-url {
    margin: 1rem auto 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
    color: var(--text);
}

.present-actions { justify-content: center; margin-top: 1.1rem; }

/* Real fullscreen, when the browser grants it: the whole screen goes to the
   code, and the address bar goes away with everything else. */
.present:fullscreen {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
}

/* ---------- covered values ---------- */

/* The organizer link lives behind this. A <details> because it needs no
   script: closed by default, and one click opens it either way. */
.reveal {
    margin-top: .6rem;
    border-top: 1px solid var(--line);
    padding-top: .6rem;
}

.reveal > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .8125rem;
    width: fit-content;
}

.reveal > summary:hover { color: var(--text); }
.reveal[open] > summary { margin-bottom: .5rem; }
.reveal .copy-row { margin-top: .4rem; }

.hint-warn { color: var(--accent); }

/* ---------- tables (admin) ---------- */

table.list { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.list th {
    text-align: left;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 .6rem .5rem;
    border-bottom: 1px solid var(--line-strong);
}
table.list td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list .num { text-align: right; font-variant-numeric: tabular-nums; }

.stat-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.stat .stat-num { font-size: 1.5rem; font-weight: 650; }
.stat .stat-lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }

/* ---------- hero (home) ----------
   Deliberately shallow: the form is the point of the page, and it should be
   in view without scrolling past a banner. */

.hero { color: #fff; text-align: center; padding: 0 0 1rem; }
.hero h1 { font-size: 1.375rem; margin-bottom: .2rem; }
.hero p { color: #ededed; font-size: .9375rem; max-width: 54ch; margin: 0 auto; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
    main { padding: .9rem 0 2.5rem; }
    .card { padding: 1.15rem; border-radius: var(--radius); }
    .wrap { padding: 0 .75rem; }
    .masthead-inner { padding: 0 .75rem; }
    h1, .poll-title { font-size: 1.3125rem; }
    .hero { padding-bottom: .8rem; }
    .hero h1 { font-size: 1.25rem; }
    .hero p { font-size: .875rem; }
    .opt-row .opt-fields { grid-template-columns: 1fr 1fr; }
    .opt-row .opt-fields .opt-date { grid-column: 1 / -1; }
    .opt-row .opt-fields .opt-dur { grid-column: 2 / 3; }
    .vote-item { flex-direction: column; align-items: stretch; }
    .signup-head { align-items: flex-start; }
    /* Thumb-sized on a phone: the box stretches to fill the row. */
    .signup-claim .stepper { flex: 1; min-height: 3.25rem; }
    .signup-claim .stepper input[type=number] { flex: 1; width: auto; }
    .choice { width: 100%; }
    .choice label { flex: 1; text-align: center; }
    .btn-row .btn { flex: 1 1 auto; }
}

@media print {
    body { background: #fff; }
    .masthead, .footer, .btn, form.response-form { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .grid-scroll { overflow: visible; }
}