:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --input-bg: #ffffff;
  --text: #1d2125;
  --muted: #5b636b;
  --border: #cfd4da;
  --accent: #1f5fae;
  --accent-text: #ffffff;
  --error: #b00020;
  --danger-bg: #fdecef;
  --warn-bg: #fff4e0;
  --warn-border: #c25e00;
  --warn-text: #4a2500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181b;
    --surface: #1f2226;
    --input-bg: #16181b;
    --text: #e6e8eb;
    --muted: #a0a7af;
    --border: #3a3f45;
    --accent: #5b9bf0;
    --accent-text: #0b1320;
    --error: #ff6b7d;
    --danger-bg: #3a1a20;
    --warn-bg: #3a2a10;
    --warn-border: #f0a030;
    --warn-text: #fde6c4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Element rules below set display; keep the hidden attribute (used by app.js) winning. */
[hidden] { display: none !important; }

html { background: var(--bg); }
body { max-width: 36rem; margin: 2rem auto; padding: 0 1rem; font-family: system-ui, sans-serif; line-height: 1.5; color: var(--text); }
h1 { margin: 0 0 1rem; font-size: 1.6rem; }

form, .card { padding: 1.25rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); }
label { display: block; margin-top: 1rem; font-weight: 600; }
form > label:first-child { margin-top: 0; }
form h2, .card h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem 0.6rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button { margin-top: 1rem; padding: 0.5rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
button[type="submit"]:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; gap: 0.75rem; }
button.link { margin: 0; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; }

fieldset { margin: 1rem 0 0; padding: 0.5rem 1rem 1rem; border: 1px solid var(--border); border-radius: 8px; }
legend { padding: 0 0.35rem; font-weight: 600; }
fieldset label { margin-top: 0.5rem; }
#booking-list { margin: 0.5rem 0 0; padding: 0; list-style: none; }
#booking-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
#booking-list .event-name { flex: 1 1 12rem; font-weight: 600; }
#booking-list button { margin-top: 0; }
.remove-guest { margin-top: 0.75rem; font-size: 0.9rem; color: var(--error); }

#status { margin-top: 1rem; font-weight: 600; }
.error { color: var(--error); }
.warning { margin-top: 1rem; padding: 0.6rem 0.75rem; border-left: 4px solid var(--error); border-radius: 4px; background: var(--danger-bg); }
.hint { margin-top: 0.35rem; font-size: 0.9rem; color: var(--muted); }

/* The booking code is shown once and is the only way back in, so it has to be impossible to miss. */
#code { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--warn-bg); color: var(--warn-text); border: 3px solid var(--warn-border); border-radius: 10px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.12); }
#code:focus { outline: none; }
#code h2 { margin: 0; font-size: 1.3rem; }
#code h2::before { content: "\26A0\FE0E  "; }
#code p { margin: 0.75rem 0 0; }
#code-value { padding: 0.75rem; text-align: center; font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.15em; color: var(--text); background: var(--surface); border: 2px dashed var(--warn-border); border-radius: 8px; user-select: all; }