:root {
  --pine: #14342B;
  --pine-2: #1D4A3D;
  --pine-3: #2B6150;
  --cranberry: #B3263E;
  --cranberry-soft: #F6DCE0;
  --gold: #D9A441;
  --gold-soft: #F7E9C8;
  --cream: #FBF6EC;
  --paper: #FFFFFF;
  --ink: #1C2420;
  --muted: #5B6A62;
  --rule: #E7DFCF;
  --yes: #2F7D5B;
  --yes-soft: #DCEFE5;
  --maybe: #B7801C;
  --maybe-soft: #F7EBD0;
  --no: #9AA39E;
  --no-soft: #ECEEEC;
  --radius: 22px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.loading { text-align: center; padding: 6rem 1rem; color: var(--muted); }

/* hero */
.hero { background: radial-gradient(120% 90% at 50% 0%, var(--pine-3) 0%, var(--pine) 62%); color: var(--cream); padding: 44px 16px 84px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: var(--cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ornament { width: 64px; height: 64px; margin: 0 auto 14px; display: block; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 auto 14px; max-width: 14ch; }
.hero p { max-width: 34rem; margin: 0 auto; color: #D9E6DF; font-size: 1.08rem; }
.hero .where { margin-top: 12px; display: inline-flex; gap: 6px; align-items: center; color: var(--gold-soft); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(247, 233, 200, .45); min-height: 44px; }
.final { margin: 22px auto 0; max-width: 30rem; background: var(--gold); color: var(--pine); border-radius: 18px; padding: 14px 18px; font-weight: 700; position: relative; z-index: 1; }
.final small { display: block; font-weight: 500; opacity: .85; }

/* layout */
.wrap { max-width: 760px; margin: -44px auto 0; padding: 0 16px 64px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.card { background: var(--paper); border-radius: var(--radius); padding: 22px 18px; box-shadow: 0 1px 0 var(--rule), 0 10px 30px rgba(20, 52, 43, .06); }
@media (min-width: 560px) { .card { padding: 28px; } }
.card h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--pine); }
.card .sub { color: var(--muted); margin: 0 0 18px; font-size: .98rem; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .label { font-weight: 700; font-size: .95rem; }
.input, textarea.input { width: 100%; min-height: 50px; border: 2px solid var(--rule); border-radius: 14px; padding: 11px 14px; background: var(--paper); }
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { outline: none; border-color: var(--pine-3); }

/* availability rows */
.day { padding: 12px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.day:first-of-type { border-top: 0; }
.day .when b { display: block; font-size: 1.02rem; }
.day .when span { color: var(--muted); font-size: .95rem; }
.day .when .tag { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; color: var(--cranberry); background: var(--cranberry-soft); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.seg { display: inline-flex; background: var(--cream); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; min-width: 64px; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: .95rem; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.seg button[aria-pressed="true"][data-v="yes"] { background: var(--yes); color: #fff; }
.seg button[aria-pressed="true"][data-v="maybe"] { background: var(--maybe); color: #fff; }
.seg button[aria-pressed="true"][data-v="no"] { background: var(--no); color: #fff; }
@media (max-width: 420px) { .day { grid-template-columns: 1fr; } .seg { width: 100%; } .seg button { flex: 1; min-width: 0; } }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1.02rem; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--cranberry); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: none; border-color: var(--rule); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; }
.saved { margin-top: 12px; color: var(--yes); font-weight: 700; text-align: center; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--cranberry); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* results */
.rank { display: flex; flex-direction: column; gap: 14px; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.opt .t b { font-size: 1.02rem; }
.opt .t span { color: var(--muted); }
.opt .score { font-weight: 700; color: var(--pine); white-space: nowrap; }
.opt .score small { color: var(--muted); font-weight: 500; }
.bar { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--no-soft); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .y { background: var(--yes); }
.bar .m { background: var(--maybe); opacity: .7; }
.opt .who { grid-column: 1 / -1; font-size: .9rem; color: var(--muted); }
.opt.best .t b::after { content: "Most popular"; margin-left: 8px; font-size: .72rem; font-weight: 700; color: var(--pine); background: var(--gold-soft); border-radius: 999px; padding: 2px 9px; vertical-align: 2px; }
.opt.locked .t b::after { content: "Locked in"; margin-left: 8px; font-size: .72rem; font-weight: 700; color: var(--pine); background: var(--gold); border-radius: 999px; padding: 2px 9px; vertical-align: 2px; }

.grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
table.grid { border-collapse: separate; border-spacing: 4px; min-width: 100%; font-size: .9rem; }
table.grid th { font-weight: 700; color: var(--muted); text-align: center; padding: 4px; white-space: nowrap; font-size: .8rem; line-height: 1.2; }
table.grid th.name, table.grid td.name { text-align: left; position: sticky; left: 0; background: var(--paper); z-index: 1; padding-right: 10px; white-space: nowrap; font-weight: 700; color: var(--ink); font-size: .92rem; }
table.grid td.c { width: 40px; height: 36px; border-radius: 10px; text-align: center; font-weight: 700; }
td.c.yes { background: var(--yes-soft); color: var(--yes); }
td.c.maybe { background: var(--maybe-soft); color: var(--maybe); }
td.c.no { background: var(--no-soft); color: var(--no); }
td.c.none { background: #F7F4EE; color: #C9C2B4; }
.note { font-weight: 400; color: var(--muted); font-size: .85rem; display: block; max-width: 14rem; white-space: normal; }
.empty { color: var(--muted); text-align: center; padding: 18px 0 6px; }

/* host */
.host { border: 2px dashed var(--gold); }
.opt-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--pine); color: var(--cream); padding: 13px 20px; border-radius: 999px; font-weight: 500; z-index: 10; max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.toast.err { background: var(--cranberry); }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 16px 40px; }

/* gentle snow in the hero (off for reduced motion) */
.snow { position: absolute; inset: 0 0 auto 0; height: 420px; pointer-events: none; z-index: 0; overflow: hidden;
  background-image: radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(2px 2px at 70% 20%, #fff6, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff7, transparent), radial-gradient(2px 2px at 85% 60%, #fff5, transparent), radial-gradient(1.5px 1.5px at 10% 80%, #fff6, transparent);
  background-size: 300px 300px; animation: snow 18s linear infinite; }
@keyframes snow { to { background-position: 0 300px, 40px 300px, -30px 300px, 20px 300px, -10px 300px; } }
@media (prefers-reduced-motion: reduce) { .snow { animation: none; } }
.hero > * { position: relative; z-index: 1; }

/* December calendar */
.cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cal-head h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; color: var(--pine); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 5px; vertical-align: -2px; margin-right: 5px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; }
.cal .day-btn { aspect-ratio: 1 / 1; min-height: 0; min-width: 0; border: 2px solid var(--rule); background: var(--paper); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--ink); position: relative; padding: 0; transition: transform .08s, background .12s; }
.cal .day-btn:active { transform: scale(.94); }
.cal .day-btn small { font-size: .62rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.cal .day-btn.yes { background: var(--yes); border-color: var(--yes); color: #fff; }
.cal .day-btn.maybe { background: var(--maybe-soft); border-color: var(--maybe); color: var(--maybe); border-style: dashed; }
.cal .day-btn.blocked { background: var(--no-soft); border-color: transparent; color: #B9BFBB; text-decoration: line-through; cursor: not-allowed; }
.cal .day-btn.xmas::before { content: ""; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--cranberry); }
.cal .day-btn.yes.xmas::before { background: var(--gold); }
.cal .pad { aspect-ratio: 1 / 1; }
/* results heat map */
.cal.heat .day-btn { cursor: pointer; }
.cal.heat .day-btn.sel { outline: 3px solid var(--cranberry); outline-offset: 1px; }
.cal.heat .day-btn.top { box-shadow: 0 0 0 3px var(--gold) inset; }
.cal.heat .day-btn.final { background: var(--gold) !important; color: var(--pine) !important; border-color: var(--gold) !important; }
.daypick { margin-top: 14px; background: var(--cream); border-radius: 16px; padding: 14px 16px; }
.daypick b { color: var(--pine); }
.daypick ul { margin: 6px 0 0; padding-left: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { border-radius: 999px; padding: 3px 11px; font-size: .88rem; font-weight: 500; }
.chip.yes { background: var(--yes-soft); color: var(--yes); }
.chip.maybe { background: var(--maybe-soft); color: var(--maybe); }
@media (max-width: 420px) { .card { padding: 20px 14px; } .cal { gap: 4px; } .cal .day-btn { border-radius: 11px; font-size: .98rem; } }

/* Available / Maybe mode switch */
.mode { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-radius: 999px; padding: 4px; gap: 4px; margin: 0 0 12px; }
.mode button { border: 0; background: none; border-radius: 999px; min-height: 44px; font-weight: 700; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mode button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(20, 52, 43, .15); }
.mode .sw { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.mode .sw.yes { background: var(--yes); }
.mode .sw.maybe { background: var(--maybe-soft); border: 2px dashed var(--maybe); }