:root {
  --ink: #11100f;
  --charcoal: #191816;
  --panel: #211f1c;
  --panel-2: #2a2722;
  --paper: #d6cec0;
  --muted: #a79d8f;
  --brass: #b69255;
  --brass-light: #d0b177;
  --danger: #8e3e32;
  --danger-light: #c26856;
  --green: #6f845c;
  --line: rgba(214, 206, 192, .16);
  --shadow: 0 18px 50px rgba(0,0,0,.38);
  --radius: 16px;
}
* { box-sizing: border-box; }
/* Class-based display rules below would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }
html { background: var(--ink); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 0%, rgba(182,146,85,.11), transparent 24rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    #11100f;
  background-size: auto, 28px 28px, 28px 28px, auto;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 2px; }
.app-shell { max-width: 1180px; min-height: 100vh; margin: 0 auto; padding-bottom: 92px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(14px, 3vw, 28px);
  background: rgba(17,16,15,.9); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand, .active-helper { border: 0; background: none; cursor: pointer; }
.brand { display: flex; gap: 10px; align-items: center; text-align: left; padding: 0; }
.brand-mark {
  display:grid; place-items:center; width:42px; height:42px; border-radius: 8px;
  border: 1px solid rgba(208,177,119,.45); color: var(--brass-light); font-weight: 900; letter-spacing: -.05em;
  background: linear-gradient(145deg, #2e2923, #171513); box-shadow: inset 0 0 0 3px rgba(0,0,0,.22);
}
.brand b { display:block; text-transform: uppercase; letter-spacing: .08em; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.02rem; }
.brand small { color: var(--muted); display:block; margin-top:2px; font-size:.7rem; letter-spacing:.05em; }
.active-helper {
  display:flex; align-items:center; gap:8px; min-height:40px; max-width:48vw; padding:8px 11px;
  border:1px solid rgba(182,146,85,.4); border-radius:999px; background:rgba(182,146,85,.08); color:var(--paper);
  white-space:nowrap; overflow:hidden;
}
.active-helper span:last-child { overflow:hidden; text-overflow:ellipsis; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(182,146,85,.13); flex:none; }
main { padding: clamp(14px, 3vw, 28px); }
.page-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-end; margin: 4px 0 18px; }
.page-head h1 { margin:0; font: 700 clamp(1.8rem, 5vw, 3rem)/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform:uppercase; letter-spacing:.035em; }
.page-head p { margin:6px 0 0; color:var(--muted); }
.hero {
  position:relative; min-height:310px; overflow:hidden; border-radius:22px; border:1px solid rgba(214,206,192,.12); box-shadow:var(--shadow); margin-bottom:18px;
  background:#1b1916;
}
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 8%; filter:saturate(.85) contrast(1.04); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,9,8,.9), rgba(10,9,8,.38) 55%, rgba(10,9,8,.08)), linear-gradient(0deg, rgba(10,9,8,.68), transparent 55%); }
.hero-copy { position:relative; z-index:1; max-width:480px; padding:clamp(22px,5vw,50px); }
.hero-kicker { color:var(--brass-light); font-weight:800; letter-spacing:.13em; text-transform:uppercase; font-size:.72rem; }
.hero h1 { margin:10px 0 8px; font: 700 clamp(2.4rem, 8vw, 5rem)/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform:uppercase; letter-spacing:.02em; text-shadow:0 4px 18px rgba(0,0,0,.5); }
.hero p { max-width:37ch; margin:0; color:#ddd4c7; font-size:clamp(.95rem,2vw,1.08rem); }
.tape-note { display:inline-block; margin-top:18px; transform:rotate(-1.5deg); padding:8px 12px; background:#c6bda9; color:#22201c; font:700 .83rem/1.15 "Courier New", monospace; box-shadow:0 4px 12px rgba(0,0,0,.35); }
/* Below this width the labels wrap and the buttons grow taller, so stack instead. */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin:16px 0 22px; }
.action-card {
  min-height:52px; padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid #c5a76f; border-radius:10px; background:linear-gradient(#b99658,#967442); color:#181512; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transition:.15s transform,.15s filter,.15s box-shadow;
}
.action-card:hover { filter:brightness(1.07); }
.action-card:active { transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.action-card strong { font-size:.92rem; }
.action-card .icon { font-size:1.2rem; line-height:1; color:#181512; }
.layout { display:grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px,.75fr); gap:18px; align-items:start; }
.panel { background:linear-gradient(155deg, rgba(37,34,30,.96), rgba(25,23,21,.97)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 36px rgba(0,0,0,.18); overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; }
.panel-body { padding:12px 14px; }
.event-list, .contact-list, .change-list { display:flex; flex-direction:column; gap:9px; }
.event-row, .contact-row, .change-row {
  display:grid; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018);
}
.event-row { grid-template-columns:104px 1fr auto; cursor:pointer; border-left:3px solid var(--brass); }
.event-row.meal { border-left-color:var(--green); }
.event-row:hover, .contact-row:hover { border-color:rgba(182,146,85,.48); }
.event-row.appointment:hover { border-left-color:var(--brass-light); }
.event-row.meal:hover { border-left-color:#8fa877; }
.event-time { text-align:center; border-right:1px solid var(--line); padding-right:10px; color:var(--brass-light); font-weight:800; }
.event-row.meal .event-time { color:#bdcca9; }
.event-time small { display:block; color:var(--muted); font-weight:600; margin-top:2px; }
.event-main strong, .contact-main strong { display:block; color:#eee8dd; }
.event-main small, .contact-main small { display:block; margin-top:3px; color:var(--muted); line-height:1.35; }
.helper-pill, .status-pill { justify-self:end; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:rgba(111,132,92,.14); color:#bdcca9; border:1px solid rgba(111,132,92,.32); font-size:.72rem; }
.helper-pill.open { color:var(--brass-light); background:rgba(182,146,85,.1); border-color:rgba(182,146,85,.3); }
.helper-pill.canceled { color:#e6a295; background:rgba(142,62,50,.14); border-color:rgba(142,62,50,.35); }
.note-card { margin-top:16px; padding:13px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.note-card strong { display:block; color:#ddd5c9; }
.note-card p { margin:5px 0 0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.empty { padding:26px 16px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.btn { min-height:42px; padding:9px 13px; border:1px solid rgba(182,146,85,.35); border-radius:10px; background:#2c2823; cursor:pointer; font-weight:750; }
.btn:hover { border-color:var(--brass-light); }
.btn.primary { background:linear-gradient(#b99658,#967442); color:#181512; border-color:#c5a76f; }
.btn.danger { background:rgba(142,62,50,.22); border-color:rgba(194,104,86,.44); color:#edb1a6; }
.btn.ghost { background:transparent; }
.btn.subtle-danger {
  border:0; background:transparent; color:var(--muted); font-weight:600;
  font-size:.82rem; text-decoration:underline; text-underline-offset:3px;
}
.btn.subtle-danger:hover { color:var(--danger-light); }
.btn.small { min-height:32px; padding:5px 9px; font-size:.76rem; }
.contact-row { grid-template-columns:44px 1fr auto; cursor:pointer; }
a.contact-row { color:inherit; text-decoration:none; }
.text-tag { padding:5px 9px; border-radius:999px; border:1px solid rgba(182,146,85,.35); color:var(--brass-light); font-size:.72rem; font-weight:750; }
.identity-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:14px; padding:13px 16px; border:1px solid rgba(182,146,85,.28); border-radius:14px;
  background:linear-gradient(145deg, rgba(45,41,35,.9), rgba(27,25,22,.9));
}
.identity-bar small { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.identity-bar strong { display:block; margin-top:3px; font-size:1.05rem; color:#eee8dd; }
.identity-cluster { display:flex; align-items:center; gap:8px; }
.link-btn { border:0; background:none; padding:4px 2px; color:var(--brass-light); font-size:.76rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.link-btn:hover { color:var(--paper); }
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip { padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:.74rem; font-weight:700; cursor:pointer; }
.chip:hover { border-color:rgba(182,146,85,.5); color:var(--paper); }
.chip.on { background:rgba(182,146,85,.16); border-color:var(--brass); color:var(--brass-light); }
.switch-toggle {
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:5px 12px 5px 7px;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--muted); font-size:.76rem; font-weight:700; cursor:pointer; transition:.18s;
  text-align:left; line-height:1.25;
}
.switch-toggle:hover { border-color:rgba(182,146,85,.5); color:var(--paper); }
.switch-track {
  position:relative; flex:none; width:34px; height:20px; border-radius:999px;
  background:#3a352e; border:1px solid var(--line); transition:.18s;
}
.switch-knob {
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--muted); transition:.18s;
}
.switch-toggle.on { background:rgba(182,146,85,.16); border-color:var(--brass); color:var(--brass-light); }
.switch-toggle.on .switch-track { background:var(--brass); border-color:var(--brass-light); }
.switch-toggle.on .switch-knob { left:16px; background:#171411; }
.btn.wide { width:100%; margin-top:10px; }
.claim-btn { justify-self:end; max-width:210px; white-space:normal; line-height:1.25; text-align:center; }
.type-key { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.74rem; font-weight:700; }
.type-dot { width:10px; height:10px; border-radius:3px; background:var(--brass); }
.type-dot.meal { background:var(--green); }
.side-stack { display:flex; flex-direction:column; gap:14px; }
.side-note { margin:0; font:inherit; color:var(--muted); font-size:.88rem; line-height:1.5; }
.modal-actions .btn.danger:first-child { margin-right:auto; }
/* A lone quiet delete sits centred rather than pinned to the right. */
.modal-actions:has(> .btn.subtle-danger:only-child) { justify-content:center; }
.avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--brass-light); background:#302a23; border:1px solid rgba(182,146,85,.34); font-weight:850; }
.contact-actions { display:flex; gap:6px; align-items:center; }
.active-badge { color:#c5d3b3; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
/* Equal side columns keep the month centred no matter how wide the labels are. */
.calendar-toolbar { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:12px; }
.calendar-filters { display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.filter-note { color:var(--muted); font-size:.74rem; }
.calendar-toolbar h2 { margin:0; text-transform:uppercase; letter-spacing:.08em; font-size:1rem; text-align:center; }
.calendar-toolbar .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; min-width:118px; }
.calendar-toolbar .btn:first-child { justify-self:start; }
.calendar-toolbar .btn:last-child { justify-self:end; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.day-name, .day-cell { background:#211f1c; }
.day-name { padding:8px 4px; text-align:center; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.day-cell { min-height:112px; padding:7px; }
.day-cell.outside { background:#181715; color:#615b53; }
.day-number { font-size:.78rem; color:var(--muted); margin-bottom:6px; }
.day-number.today { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--brass); color:#171411; font-weight:900; }
.mini-event {
  display:block; width:100%; margin:4px 0; padding:5px 6px; border:1px solid rgba(182,146,85,.25);
  border-left:3px solid var(--brass); border-radius:6px; background:#2d2924; color:#e8dfd0;
  text-align:left; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.mini-event.meal { border-color:rgba(111,132,92,.35); border-left-color:var(--green); background:#262b23; color:#cfdcc0; }
.mini-event.canceled { text-decoration:line-through; opacity:.55; }
.change-row { grid-template-columns:1fr auto; }
.change-row strong { display:block; }
.change-row p { margin:5px 0; color:var(--muted); }
.change-meta { color:#8f8579; font-size:.72rem; }
.rule-card { padding:18px; border:1px solid rgba(182,146,85,.25); border-radius:14px; background:linear-gradient(145deg,#27231f,#1a1816); }
.rule-card b { display:block; color:var(--brass-light); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
.rule-card p { margin:0; font:700 1rem/1.6 "Courier New", monospace; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
/* Start and end time stay side by side at every width. */
.field-pair { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.form-actions .btn { min-width:112px; justify-content:center; }
.field label { color:#bcb2a5; font-size:.78rem; font-weight:700; }
.field input, .field textarea, .field select {
  width:100%; border:1px solid rgba(214,206,192,.18); border-radius:9px; background:#171614; color:var(--paper); padding:11px 12px;
}
.field textarea { min-height:88px; resize:vertical; }
/* A checkbox sitting beside its explanation. `.field` is a column and stretches
   its inputs to full width, which is wrong for a tick box. */
.toggle-row { display:flex; gap:11px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); cursor:pointer; }
.toggle-row input[type="checkbox"] { flex:0 0 20px; width:20px; height:20px; margin:2px 0 0; accent-color:var(--brass); }
.toggle-row small { display:block; margin-top:3px; color:var(--muted); }
.toggle-row.disabled { opacity:.55; cursor:default; }
.toggle-row.full { grid-column:1/-1; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.modal { width:min(620px,100%); max-height:min(90vh,820px); overflow:auto; border:1px solid rgba(214,206,192,.18); border-radius:18px; background:linear-gradient(155deg,#2a2723,#171614); box-shadow:0 30px 90px rgba(0,0,0,.55); }
.modal-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:15px 16px; border-bottom:1px solid var(--line); background:rgba(31,29,26,.96); backdrop-filter:blur(12px); }
.modal-head h2 { margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.1em; }
.modal-body { padding:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 16px 16px; border-top:1px solid var(--line); }
.close-btn { border:0; background:transparent; font-size:1.4rem; cursor:pointer; }
.detail-hero { padding:16px; border:1px solid rgba(182,146,85,.25); border-radius:12px; background:#201d1a; }
.detail-hero h3 { margin:0 0 6px; font-size:1.25rem; }
.detail-hero p { margin:4px 0; color:var(--muted); }
.signup-box { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.signup-box strong { display:block; margin-bottom:8px; }
.bottom-nav {
  position:fixed; z-index:30; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,1180px);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-top:1px solid var(--line); background:rgba(18,17,16,.94); backdrop-filter:blur(20px);
}
.bottom-nav button { display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:transparent; color:#8d857b; padding:4px; font-size:.67rem; cursor:pointer; }
.bottom-nav button span { font-size:1.2rem; line-height:1; }
.bottom-nav button.active { color:var(--brass-light); }
.toast { position:fixed; z-index:200; left:50%; bottom:92px; transform:translate(-50%,20px); padding:10px 14px; border:1px solid rgba(182,146,85,.4); border-radius:999px; background:#2c2823; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.code-box { padding:12px; border:1px dashed rgba(182,146,85,.4); border-radius:10px; font-family:monospace; color:var(--brass-light); background:#171513; }
@media (max-width: 760px) {
  .brand small { display:none; }
  .brand b { white-space:nowrap; font-size:.95rem; }
  .active-helper { max-width:42vw; padding:7px 10px; font-size:.86rem; }
  .link-btn { font-size:.72rem; }
  .layout { grid-template-columns:1fr; }
  .hero { min-height:390px; }
  .hero img { object-position:62% 30%; }
  .hero::after { background:linear-gradient(0deg,rgba(10,9,8,.93),rgba(10,9,8,.18) 78%); }
  .hero-copy { position:absolute; left:0; right:0; bottom:0; padding:22px; }
  .hero h1 { font-size:2.9rem; }
  .calendar-grid { display:none; }
  .event-row { grid-template-columns:92px 1fr; }
  .event-row .helper-pill { grid-column:2; justify-self:start; }
  .event-row .claim-btn { grid-column:2; justify-self:stretch; max-width:none; }
  .panel-head { flex-wrap:wrap; }
  .identity-bar { align-items:stretch; }
  .identity-bar .btn { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .page-head { align-items:flex-start; }
}
@media (max-width: 480px) {
  .brand > span:last-child { display:none; }
  .topbar { padding:10px 12px; gap:8px; }
  .active-helper { max-width:52vw; }
}
@media (min-width:761px) { .mobile-calendar-list { display:none; } }