:root {
  --ink: #f3f6fb;
  --ink-secondary: #d2d8e2;
  --muted: #a9b4c4;
  --line: #303a4b;
  --soft: #18202c;
  --surface: #121925;
  --field: #0d131d;
  --page: #090e16;
  --header: rgba(9, 14, 22, .94);
  --input-border: #4a566a;
  --brand: #91a8ff;
  --brand-dark: #becaff;
  --brand-button: #526fd7;
  --brand-button-hover: #6681e6;
  --brand-soft: #1a2850;
  --yes: #6ad8b7;
  --yes-button: #147d64;
  --yes-soft: #102e29;
  --yes-border: #276e5d;
  --maybe: #f3bd68;
  --maybe-soft: #352817;
  --maybe-border: #80602e;
  --no: #ff8ca0;
  --no-soft: #391b24;
  --no-border: #854153;
  --danger-button: #b4233c;
  --shadow: 0 10px 32px rgba(0, 0, 0, .28);
  --focus: rgba(128, 157, 255, .38);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  color-scheme: dark;
  background: var(--page);
  font-synthesis: none;
}

:root[data-theme="light"] {
  --ink: #18212f;
  --ink-secondary: #3e4959;
  --muted: #667085;
  --line: #dfe3ea;
  --soft: #f5f7fa;
  --surface: #ffffff;
  --field: #ffffff;
  --page: #fafbfc;
  --header: rgba(255, 255, 255, .94);
  --input-border: #bbc2ce;
  --brand: #3157d5;
  --brand-dark: #2444aa;
  --brand-button: #3157d5;
  --brand-button-hover: #2444aa;
  --brand-soft: #edf1ff;
  --yes: #147d64;
  --yes-button: #147d64;
  --yes-soft: #e7f7f2;
  --yes-border: #a9dcca;
  --maybe: #a56205;
  --maybe-soft: #fff4dc;
  --maybe-border: #ebcc8f;
  --no: #b4233c;
  --no-soft: #ffedf0;
  --no-border: #edbbc4;
  --danger-button: #b4233c;
  --shadow: 0 8px 28px rgba(24, 33, 47, .08);
  --focus: rgba(49, 87, 213, .23);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; line-height: 1.5; background: var(--page); }
main { padding-bottom: clamp(3rem, 8vw, 6rem); }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 18ch; margin-bottom: .55rem; font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1.04; letter-spacing: -.045em; }
h2 { margin-bottom: .6rem; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.15; letter-spacing: -.025em; }
h3 { line-height: 1.25; }
code { padding: .15rem .35rem; border-radius: 5px; background: var(--soft); overflow-wrap: anywhere; }

.shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); background: var(--header); backdrop-filter: blur(12px); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--brand-button); }
.site-header nav { display: flex; align-items: center; gap: 1rem; }
.site-header nav a { color: var(--muted); font-weight: 650; text-decoration: none; }
.theme-toggle { min-height: 38px; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); font-weight: 700; cursor: pointer; }
.theme-toggle:hover { border-color: var(--brand); background: var(--brand-soft); }
.theme-toggle [data-theme-icon] { width: 1.1rem; color: var(--brand); font-size: 1.05rem; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; transform: translateY(-150%); background: var(--brand-button); color: white; border-radius: 8px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

.page-grid { padding-top: clamp(2.5rem, 7vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 3rem; align-items: start; }
.page-main { min-width: 0; }
.page-aside { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.narrow-page { max-width: 760px; padding-top: clamp(3rem, 9vw, 6rem); text-align: center; }
.narrow-page h1, .narrow-page .lede { margin-inline: auto; }
.narrow-page .card { text-align: left; }
.poll-page, .manage-page, .admin-page { padding-top: 2.5rem; }
.eyebrow { margin-bottom: .55rem; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lede { max-width: 650px; color: var(--muted); font-size: 1.12rem; }
.notes { max-width: 70ch; white-space: pre-wrap; color: var(--ink-secondary); }
.location { margin-bottom: 0; color: var(--muted); overflow-wrap: anywhere; }
.optional { color: var(--muted); font-size: .82em; font-weight: 500; }
.help { display: block; color: var(--muted); font-size: .86rem; font-weight: 450; }

.card, .aside-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card { padding: clamp(1rem, 3vw, 1.6rem); }
.aside-card { padding: 1.25rem; }
.aside-card h2 { font-size: 1.05rem; }
.form-stack { display: grid; gap: 1.2rem; }
.form-stack > label, .inline-form label, .copy-field > label { display: grid; gap: .4rem; font-weight: 700; }
.field-label { display: inline; }
input, select, textarea { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid var(--input-border); border-radius: 9px; color: var(--ink); background: var(--field); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--brand); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.two-columns label { display: grid; gap: .4rem; font-weight: 700; }
.form-section { min-width: 0; margin: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 10px; }
.form-section legend { padding: 0 .4rem; font-weight: 800; }
.time-builder { display: grid; gap: .65rem; margin-bottom: .8rem; }
.time-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto; gap: .6rem; align-items: end; }
.time-row > input[type=hidden] + .button { grid-column: 3; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 9px; font-weight: 750; line-height: 1.1; text-decoration: none; cursor: pointer; }
.button.primary { color: white; background: var(--brand-button); }
.button.primary:hover { color: white; background: var(--brand-button-hover); }
.button.secondary { color: var(--brand); border-color: var(--brand-button); background: var(--brand-soft); }
.button.ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button.danger { color: white; background: var(--danger-button); }
.button.danger.ghost { color: var(--no); border-color: var(--no-border); background: var(--surface); }
.button.large { min-height: 52px; padding-inline: 1.35rem; }
.button.compact { min-height: 38px; padding: .5rem .7rem; font-size: .86rem; }
.button.full { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.delete-own { margin-top: .7rem; text-align: right; }

.alert { margin: 1rem 0; padding: .9rem 1rem; border-radius: 10px; border: 1px solid; text-align: left; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert.error { color: var(--no); border-color: var(--no-border); background: var(--no-soft); }
.alert.success { color: var(--yes); border-color: var(--yes-border); background: var(--yes-soft); }
.alert.warning { color: var(--maybe); border-color: var(--maybe-border); background: var(--maybe-soft); }
.success-mark { width: 64px; height: 64px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--yes-button); font-size: 2rem; font-weight: 900; }
.error-code { color: var(--brand); font-size: 5rem; font-weight: 900; letter-spacing: -.07em; }

.steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: .7rem; font-weight: 650; }
.steps span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .82rem; }
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.link-list li:first-child { border-top: 0; }
.link-list small { color: var(--muted); }
.copy-field { display: grid; gap: .35rem; }
.copy-field > div { display: flex; gap: .5rem; }
.copy-field input { min-width: 0; font-family: ui-monospace, monospace; font-size: .86rem; }
.copy-field.sensitive { padding: 1rem; border-radius: 10px; background: var(--maybe-soft); }

.poll-heading, .manage-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
.status-panel { min-width: 210px; display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid; border-radius: 10px; }
.status-panel span { color: var(--muted); font-size: .86rem; }
.relative-deadline { cursor: help; text-decoration: underline dotted; text-underline-offset: .15em; }
.status-panel.open { border-color: var(--yes-border); background: var(--yes-soft); }
.status-panel.closed { border-color: var(--no-border); background: var(--no-soft); }
.timezone-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: .9rem; }
.timezone-bar label { display: flex; align-items: center; gap: .6rem; }
.timezone-bar select { width: auto; min-height: 38px; padding-block: .35rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.section-heading h1, .section-heading h2 { margin-bottom: 0; }
.best-badge { display: inline-block; padding: .2rem .45rem; border-radius: 20px; color: white; background: var(--brand-button); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.local-time { display: block; color: var(--muted); font-size: .82rem; }
.local-time:not(:empty)::before { content: "Your time: "; font-weight: 700; }

.response-section { max-width: 820px; margin-inline: auto; }
.response-disclosure { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.response-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.response-summary::-webkit-details-marker { display: none; }
.response-summary-title { display: block; color: var(--ink); font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.response-summary-action { flex: 0 0 auto; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: .84rem; font-weight: 750; }
.response-summary:hover .response-summary-action { border-color: var(--brand); color: var(--brand); }
.response-disclosure .when-open { display: none; }
.response-disclosure[open] .when-closed { display: none; }
.response-disclosure[open] .when-open { display: inline; }
.response-disclosure[open] .response-summary { margin-bottom: 1rem; }
.persona-switcher { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.persona { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 30px; color: var(--ink); background: var(--surface); text-decoration: none; font-weight: 650; }
.persona.active { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.you-badge { margin-left: .35rem; padding: .12rem .35rem; border-radius: 4px; color: var(--brand); background: var(--brand-soft); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.availability-list { display: grid; gap: .75rem; }
.availability-card { min-width: 0; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; }
.availability-card legend { width: 100%; padding: 0 .25rem; font-weight: 750; }
.availability-card .local-time { margin-bottom: .55rem; font-weight: 450; }
.segmented { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: .4rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { min-height: 46px; display: grid; place-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font-size: .88rem; font-weight: 750; cursor: pointer; text-align: center; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice.yes input:checked + span { color: var(--yes); border-color: var(--yes); background: var(--yes-soft); }
.choice.maybe input:checked + span { color: var(--maybe); border-color: var(--maybe); background: var(--maybe-soft); }
.choice.no input:checked + span { color: var(--no); border-color: var(--no); background: var(--no-soft); }
.clear-choice { margin-top: .45rem; padding: .2rem; border: 0; color: var(--muted); background: transparent; font-size: .78rem; text-decoration: underline; cursor: pointer; }
.empty-state { text-align: center; color: var(--muted); }

.results-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.results-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.results-table th, .results-table td { min-width: 130px; padding: .7rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.results-table thead th { position: sticky; top: 0; z-index: 2; background: var(--soft); }
.results-table thead th.best-result { background: var(--brand-soft); }
.results-table thead .best-badge { margin-top: .45rem; }
.result-date { display: block; }
.results-table th:first-child { position: sticky; left: 0; z-index: 3; min-width: 160px; text-align: left; background: var(--surface); }
.results-table thead th:first-child { z-index: 4; background: var(--soft); }
.results-table tr:last-child > * { border-bottom: 0; }
.results-table tr > *:last-child { border-right: 0; }
.status-cell span[aria-hidden] { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 900; }
.status-cell.yes span { color: var(--yes); background: var(--yes-soft); }
.status-cell.if_necessary span { color: var(--maybe); background: var(--maybe-soft); }
.status-cell.no span { color: var(--no); background: var(--no-soft); }
.status-cell.unanswered span { color: var(--muted); background: var(--soft); }
.mobile-results { display: none; }

.manage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; }
.manage-main { min-width: 0; display: grid; gap: 1rem; }
.manage-main .section-heading { margin-top: 1rem; }
.manage-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.managed-times { margin: 0 0 1rem; padding: 0; list-style: none; }
.managed-times li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.inline-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .6rem; align-items: end; }
.inline-form.without-offset { grid-template-columns: minmax(0, 1fr) auto; }
.response-editor { padding: 0; overflow: clip; }
.response-editor summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; cursor: pointer; }
.response-editor[open] summary { border-bottom: 1px solid var(--line); background: var(--soft); }
.response-editor > form { margin: 1rem 1.2rem; }
.manager-responses { display: grid; gap: .7rem; }
.danger-zone { border-color: var(--no-border); }
.danger-zone hr { border: 0; border-top: 1px solid var(--no-border); margin: 1.2rem 0; }
.search-form { display: flex; gap: .6rem; margin-bottom: 1rem; }
.admin-poll-list { display: grid; gap: .65rem; }
.admin-poll { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.admin-poll > div { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.admin-poll h2 { margin: 0; font-size: 1rem; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.status-dot.open { background: var(--yes); }
.status-dot.closed { background: var(--no); }
.pill { padding: .2rem .45rem; border-radius: 20px; background: var(--soft); color: var(--muted); font-size: .75rem; font-weight: 750; }

@media (max-width: 850px) {
  .page-grid, .manage-grid { grid-template-columns: 1fr; }
  .page-aside, .manage-aside { position: static; }
  .poll-heading, .manage-heading { display: grid; }
  .status-panel { min-width: 0; }
  .inline-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 1rem, 1180px); }
  h1 { font-size: 2.35rem; }
  .page-grid, .poll-page, .manage-page, .admin-page { padding-top: 1.5rem; }
  .two-columns, .time-row { grid-template-columns: 1fr; }
  .time-row > input[type=hidden] + .button { grid-column: 1; }
  .time-row .button { justify-self: start; }
  .timezone-bar { display: grid; }
  .timezone-bar label { display: grid; }
  .timezone-bar select { width: 100%; }
  .section-heading { display: grid; align-items: start; }
  .response-summary { align-items: center; }
  .segmented { grid-template-columns: 1fr; }
  .choice span { min-height: 44px; }
  .results-table-wrap { display: none; }
  .mobile-results { display: grid; gap: .75rem; }
  .result-card { padding: 1rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
  .result-card.best-result { border-color: var(--brand); }
  .result-card .best-badge { display: table; margin: .55rem auto 0; }
  .result-card h3 { margin-bottom: .2rem; font-size: 1rem; }
  .result-card dl { margin: .8rem 0 0; }
  .result-card dl div { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--line); }
  .result-card dt { font-weight: 700; }
  .result-card dd { margin: 0; overflow-wrap: anywhere; }
  .copy-field > div, .search-form { display: grid; }
  .admin-poll { align-items: start; }
  .admin-poll > div { display: grid; }
  .admin-poll code { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}