/* AppNest design system — Backyard BBQ RSVP (accent: ember).
 * Tokens are the canonical @appnest/design OKLCH values (packages/design/tokens.css).
 * Per-app, only --c / --c-soft change; the chassis is shared across the showcase apps. */
:root {
  --paper: oklch(0.99 0.006 85);
  --surface: oklch(0.998 0.003 90);
  --surface-2: oklch(0.965 0.01 78);
  --ink: oklch(0.24 0.02 48);
  --ink-muted: oklch(0.5 0.02 52);
  --line: oklch(0.9 0.012 70);
  --success: oklch(0.62 0.13 150);
  --success-soft: oklch(0.94 0.05 150);
  --danger: oklch(0.55 0.21 22);
  --danger-soft: oklch(0.94 0.05 22);

  /* accent — ember */
  --c: oklch(0.56 0.18 300);
  --c-strong: oklch(0.48 0.18 300);
  --c-soft: oklch(0.94 0.05 300);
  --egg-fg: oklch(0.99 0.01 80);

  --radius: 0.9rem;
  --radius-md: 0.7rem;
  --radius-xl: 1.25rem;
  --pill: 9999px;
  --shadow-soft: 0 1px 2px oklch(0.24 0.02 48 / 0.06), 0 4px 12px oklch(0.24 0.02 48 / 0.05);
  --shadow-pop: 0 4px 12px oklch(0.24 0.02 48 / 0.1), 0 14px 34px oklch(0.24 0.02 48 / 0.1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.2 0.014 50);
    --surface: oklch(0.25 0.016 50);
    --surface-2: oklch(0.29 0.016 52);
    --ink: oklch(0.94 0.008 80);
    --ink-muted: oklch(0.72 0.015 62);
    --line: oklch(0.33 0.016 55);
    --c: oklch(0.64 0.17 300);
    --c-strong: oklch(0.56 0.17 300);
    --c-soft: oklch(0.3 0.05 300);
    --success: oklch(0.7 0.13 150);
    --success-soft: oklch(0.3 0.05 150);
    --danger: oklch(0.64 0.19 22);
    --danger-soft: oklch(0.3 0.05 22);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--c-soft), transparent 60%),
    var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: 1.25rem;
}
.wrap { width: min(100%, 30rem); display: flex; flex-direction: column; gap: 1rem; }

/* hero */
.hero { text-align: center; padding: 0.5rem 0 0.25rem; }
.hero .mark { font-size: 2.5rem; line-height: 1; }
.eyebrow {
  margin-top: 0.4rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ink-muted); text-transform: uppercase;
}
h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.05; margin: 0.35rem 0 0;
}
.datepill {
  display: inline-block; margin-top: 0.7rem; padding: 0.35rem 0.9rem; border-radius: var(--pill);
  background: var(--c-soft); color: var(--ink); font-weight: 800; font-size: 0.85rem;
  box-shadow: inset 0 0 0 2px var(--c);
}
.host { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }

/* card */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft); padding: 1.15rem;
}
.card h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
}

/* fields */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
.field > label { font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1.5px solid transparent; border-radius: var(--radius-md); padding: 0.7rem 0.8rem;
  transition: border-color var(--spring) 0.18s, background 0.18s;
}
textarea { resize: vertical; min-height: 3.2rem; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 0.8; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c); background: var(--surface);
}

/* segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem; }
.seg button {
  font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; padding: 0.6rem 0.4rem;
  border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface-2);
  color: var(--ink); transition: transform 0.15s var(--spring), border-color 0.15s, background 0.15s;
}
.seg button[aria-pressed="true"] {
  background: var(--c-soft); border-color: var(--c); transform: translateY(-1px);
}

/* button */
.btn {
  width: 100%; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  padding: 0.85rem 1rem; border: none; border-radius: var(--radius-md);
  background: var(--c); color: var(--egg-fg); box-shadow: var(--shadow-soft);
  transition: transform 0.15s var(--spring), background 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--c-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* note / error */
.note { font-size: 0.82rem; font-weight: 600; margin-top: 0.6rem; text-align: center; }
.note.err { color: var(--danger); }
.note.ok { color: var(--success); }

/* roster */
.stat {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 800; font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0.25rem;
}
.stat b { color: var(--c); font-size: 1.05rem; }
.list { display: flex; flex-direction: column; gap: 0.55rem; }
.guest {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 0.7rem 0.85rem;
}
.guest .who { font-weight: 700; }
.guest .meta { font-size: 0.78rem; color: var(--ink-muted); margin-top: 0.15rem; }
.badge {
  flex: none; font-size: 0.66rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: var(--pill);
  box-shadow: inset 0 0 0 1.5px var(--c); background: var(--c-soft); color: var(--ink); white-space: nowrap;
}
.badge.maybe { box-shadow: inset 0 0 0 1.5px var(--warning, var(--ink-muted)); background: var(--surface); }
.badge.no { box-shadow: inset 0 0 0 1.5px var(--line); background: var(--surface); color: var(--ink-muted); }
.empty { text-align: center; color: var(--ink-muted); font-size: 0.85rem; padding: 0.5rem 0; }

/* footer */
.foot { text-align: center; font-size: 0.72rem; color: var(--ink-muted); padding: 0.5rem 0 0.25rem; }
.foot a { color: var(--c); text-decoration: none; font-weight: 700; }

.rise { animation: rise 0.5s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* pick'em ballot + live board */
.cat { margin-bottom: 1rem; }
.cat > label { display:block; font-size:0.8rem; font-weight:800; color:var(--ink-muted); margin-bottom:0.4rem; }
.opts { display:grid; gap:0.4rem; }
.opt {
  font:inherit; font-weight:700; font-size:0.85rem; text-align:left; cursor:pointer; padding:0.6rem 0.8rem;
  border-radius:var(--radius-md); border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:transform .15s var(--spring), border-color .15s, background .15s;
}
.opt[aria-pressed="true"]{ background:var(--c-soft); border-color:var(--c); transform:translateY(-1px); }
.board .q{ margin-bottom:1.1rem; }
.board h3{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; margin:0 0 0.55rem; }
.bar{ margin-bottom:0.45rem; }
.bar .top{ display:flex; justify-content:space-between; font-size:0.8rem; font-weight:600; margin-bottom:0.22rem; }
.bar .top .n{ color:var(--ink-muted); }
.bar .top .lead{ color:var(--c); }
.track{ height:0.6rem; background:var(--c-soft); border-radius:var(--pill); overflow:hidden; }
.track > i{ display:block; height:100%; background:var(--c); border-radius:var(--pill); transition:width .5s var(--spring); }
.chips{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.2rem; }
.vchip{ font-size:0.72rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:var(--pill); background:var(--c-soft); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--c); }