:root {
    color-scheme: dark;
    --bg-dark: #17140f;
    --fg-dark: #ebe4d6;
    --bg-light: #f7f3ea;
    --fg-light: #1e1a13;
    --primary: oklch(0.8 0.14 78);
    --accent: var(--primary);
    --success: oklch(0.76 0.14 150);
    --error: oklch(0.7 0.18 28);
    --warning: var(--primary);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-ratio-min: 1.16;
    --font-ratio-max: 1.2;
    --br-xs: 2px;
    --br-s: 3px;
    --br-m: 4px;
    --br-l: 6px;
    --br-xl: 8px;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --line: 1px solid var(--fg-2);
    --hair: 1px solid var(--fg-1);
}

body { display: flex; flex-direction: column; }
main { padding: var(--vs-m) var(--pad-l) var(--vs-xl); inline-size: 100%; max-inline-size: 42rem; margin-inline: auto; --gap: var(--vs-m); }
body.wide main { max-inline-size: 78rem; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { --fl: 3; }
h2 { --fl: 1; padding-block-end: var(--vs-xs); border-block-end: var(--hair); }
h3 { --fl: 0; color: var(--fg-6); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
section { margin: 0; }
p { margin: 0; }
code, .num, .stat strong, time, .time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.85em; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
small { color: var(--fg-6); display: block; font-size: 0.8rem; line-height: 1.35; }

.bar { display: flex; align-items: center; gap: var(--pad-l); padding: var(--pad-s) var(--pad-l); border-block-end: var(--line); flex-wrap: wrap; }
.bar .brand { font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: var(--fg); }
.bar .event { text-decoration: none; color: var(--fg-7); border-inline-start: var(--line); padding-inline-start: var(--pad-l); }
.bar nav ul { display: flex; gap: var(--pad-xs); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.bar nav a { text-decoration: none; color: var(--fg-7); padding: var(--pad-xs) var(--pad-s); border-radius: var(--br-s); --fl: -1; }
.bar nav a:hover { background: var(--fg-1); color: var(--fg); }
.bar nav a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.bar .spacer { flex: 1; }
.bar .me { --fl: -1; color: var(--fg-7); }
.bar form { margin: 0; }
.foot { margin-block-start: auto; padding: var(--pad-l); text-align: center; opacity: 0.5; }

button, .button { border-radius: var(--br-s); font-weight: 500; }
button.quiet { --button-color: transparent; background: transparent; border: var(--line); color: var(--fg-7); box-shadow: none; }
button.quiet:hover { background: var(--fg-1); color: var(--fg); }
button.mini { --fl: -1; padding: 0.3rem 0.6rem; }
button.big { min-block-size: 3rem; --fl: 0; padding-inline: var(--pad-xl); }
button { --button-color: oklch(0.72 0.02 80); --button-text: var(--fg); color: var(--fg); }
button.primary { --button-color: var(--primary); --button-text: #1a1408; }

input:not([type="checkbox"], [type="radio"]), select, textarea {
    inline-size: 100%; padding: 0.6rem 0.75rem; border: var(--line); border-radius: var(--br-s);
    background: var(--fg-05); color: inherit; min-block-size: 2.75rem; font: inherit; --fl: 0;
}
input:not([type="checkbox"], [type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
label { --fl: -1; color: var(--fg-7); display: block; }
label > input, label > select, label > textarea { margin-block-start: 0.25rem; color: var(--fg); }
label.check { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--fg); cursor: pointer; --fl: 0; }
label.check input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--primary); flex: none; }
label.check.big { padding: var(--pad-m) 0; }
label.check.big input { inline-size: 1.6rem; block-size: 1.6rem; margin-block-start: 0; }
label.check.big > span { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
label.check.big small { flex-basis: 100%; }
form.inline { display: inline; margin: 0; }
form { margin: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--pad-s) var(--pad-m); align-items: center; }
.cluster.end { align-items: flex-end; }
.cluster.end label { flex: 1 1 14rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.stack.tight { --gap: var(--vs-xs); }
.narrow { max-inline-size: 30rem; }
.card { border: var(--line); border-radius: var(--br-l); padding: var(--pad-l); background: var(--fg-05); box-shadow: none; --gap: var(--vs-base); }
.card h2 { border: 0; padding: 0; }
.section { padding-block: var(--vs-m); border-block-start: var(--hair); --gap: var(--vs-base); }
.section h2 { border: 0; padding: 0; }
main > .section:first-of-type { border: 0; }

.table { border: var(--line); border-radius: var(--br-m); overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; --fl: -1; }
th { --fl: -1; color: var(--fg-6); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; padding: var(--pad-s) var(--pad-m); background: var(--fg-05); white-space: nowrap; }
td { padding: var(--pad-s) var(--pad-m); border-block-start: var(--hair); vertical-align: top; }
thead { border: 0; }
tfoot th { background: var(--fg-1); color: var(--fg); text-transform: none; font-size: inherit; border-block-start: var(--line); }
tr.unanswered td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
th.num, td.num { text-align: right; }
td.usage { white-space: nowrap; }
ul.people, ul.signups, ul.links, ul.tasks { list-style: none; margin: 0; padding: 0; }
ul.people > li + li { margin-block-start: 0.25rem; }
ul.signups { --fl: -1; color: var(--fg-6); padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--fg-2); margin-block-start: 0.15rem; }
ul.links li { padding: var(--pad-s) 0; border-block-end: var(--hair); }
.note { --fl: -1; color: var(--fg-6); white-space: pre-line; }
.note.big { --fl: 0; padding: var(--pad-m); border-inline-start: 3px solid var(--primary); background: var(--fg-05); white-space: pre-line; }
.note-cell { white-space: pre-line; min-inline-size: 8rem; }
.prose { white-space: pre-line; }
.meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0; color: var(--fg-6); --fl: -1; }
.meta span + span::before { content: "·"; margin-inline: 0.5rem; color: var(--fg-3); }
.crumb { --fl: -1; }

.tag { padding: 0.1rem 0.55rem; border-radius: 2px; background: none; border: 1px solid var(--fg-3); color: var(--fg-7); box-shadow: none; --fl: -1; font-weight: 500; gap: 0.5rem; }
.tag.ok { border-color: var(--success); color: var(--success); }
.tag.warn { border-color: var(--primary); color: var(--primary); }
.tag.off { border-color: var(--fg-3); color: var(--fg-5); }
.tag form { display: inline; }

.stats { display: flex; flex-wrap: wrap; gap: var(--pad-l); }
.stat { flex: 1 1 8rem; border-block-start: 2px solid var(--primary); padding-block-start: var(--pad-s); display: flex; flex-direction: column; }
.stat strong { --fl: 3; font-size: 2rem; line-height: 1.1; font-weight: 500; }
.stat.small strong { font-size: 1.1rem; padding-block: 0.45rem; }
.stat small { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }

.url { display: inline-flex; align-items: center; gap: var(--pad-s); max-inline-size: 100%; }
.url code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 16rem; color: var(--fg-6); direction: rtl; }
button[data-copy].done { --button-color: var(--success); }

details { margin: 0; }
details::details-content { transition: none; box-sizing: border-box; }
details > :not(summary) { padding: 0; }
details.edit summary { color: var(--primary); --fl: -1; padding: 0; }
details.edit > form { margin-block-start: var(--vs-s); min-inline-size: 18rem; }
details.group > summary { gap: var(--pad-m); flex-wrap: wrap; align-items: baseline; padding: 0; color: var(--fg); }
details.group[open] > summary { margin-block-end: var(--vs-base); }
.groups { display: flex; flex-direction: column; gap: var(--vs-base); }

.segmented { display: flex; gap: var(--pad-s); }
.segmented.vertical { flex-direction: column; }
.segmented label { flex: 1; --fl: 0; color: var(--fg); cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.segmented span { display: flex; align-items: center; justify-content: center; min-block-size: 3.25rem; border: var(--line); border-radius: var(--br-m); font-weight: 500; --fl: 1; }
.segmented.vertical span { justify-content: flex-start; padding-inline: var(--pad-l); }
.segmented input:checked + span { background: var(--primary); color: #1a1408; border-color: var(--primary); }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

ul.tasks li { border-block-end: var(--hair); }
ul.tasks li.full { opacity: 0.55; }
ul.tasks .what { margin: 0 0 var(--pad-m) 2.4rem; inline-size: calc(100% - 2.4rem); }
.guest-name { --fl: 5; font-weight: 700; letter-spacing: -0.02em; }
.brand-big { --fl: 6; font-weight: 700; letter-spacing: 0.02em; }
.flash { padding: var(--pad-s) var(--pad-m); border: 1px solid var(--success); color: var(--success); border-radius: var(--br-s); --fl: -1; }
.error { color: var(--error); }
.detach { text-align: center; }
.numbers .in { color: var(--success); }
.numbers .out { color: var(--error); }
.empty { padding: var(--vs-base) 0; }
.filter select { min-inline-size: 10rem; }

@media (max-width: 40rem) {
    main { padding-inline: var(--pad-l); }
    .bar { gap: var(--pad-s); }
    .bar nav { order: 10; flex-basis: 100%; overflow-x: auto; }
    .bar .event { display: none; }
    .stat strong { font-size: 1.6rem; }
    button.big { inline-size: 100%; }
    .url code { max-inline-size: 10rem; }
}