/* Outrider — shared styles
   Dusk over open country: cool sky, warm ground, saddle-tan accent.
   Brand is blue so green/amber/rust mean condition state and nothing else. */

:root {
  --ground:#ECEBE6; --surface:#FBFAF7; --sunk:#F3F2ED;
  --ink:#16181B; --ink-2:#4E5257; --ink-3:#85857D;
  --line:#DCDAD3; --hair:#E7E5DE;
  --navy:#1B3453; --blue:#2C4E75; --sky:#6E9CC4;
  --blue-soft:#E1E7EF; --on-blue:#FFFFFF;
  --tan:#A2622A; --sand:#DDA05A;
  --good:#3B7644; --warn:#9E7016; --crit:#9C4230;
  --lift:0 1px 2px rgba(30,26,20,.05), 0 14px 36px rgba(30,26,20,.09);
  --r:13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#131311; --surface:#1C1C19; --sunk:#181815;
    --ink:#EDEBE4; --ink-2:#ABA9A0; --ink-3:#7A786F;
    --line:#2D2C26; --hair:#242320;
    --navy:#0F1A28; --blue:#8CB2D8; --sky:#A9CBE8;
    --blue-soft:#1E2831; --on-blue:#0C1119;
    --tan:#D08D50; --sand:#E2A961;
    --good:#6BA574; --warn:#C99B3E; --crit:#C36F58;
    --lift:0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}

.page { max-width:560px; margin:0 auto; background:var(--surface); min-height:100vh; }
@media (min-width:600px) {
  .page { margin:28px auto; min-height:0; border-radius:20px; overflow:hidden;
          box-shadow:var(--lift); }
}

.body { padding:20px; display:flex; flex-direction:column; gap:18px; }

/* ---------- hero ---------- */
.hero { padding:26px 20px 20px; color:#fff; position:relative;
  background:linear-gradient(168deg, var(--navy) 0%, var(--blue) 78%, #3F6489 100%); }
.hero.has-photo { padding-top:130px; background-size:cover; background-position:center; }
.hero.has-photo::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,28,40,.12) 30%, rgba(12,18,28,.84) 100%); }
.hero > * { position:relative; z-index:1; }
.hero .kick { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:10px; letter-spacing:.2em; opacity:.72; margin:0; }
.hero h1 { font-size:26px; font-weight:700; letter-spacing:-.028em; line-height:1.1;
  margin:9px 0 5px; text-wrap:balance; }
.hero .when { font-size:14px; opacity:.9; margin:0; }

.byline { display:flex; align-items:center; gap:11px; padding:15px 20px;
  border-bottom:1px solid var(--hair); }
.byline p { margin:0; font-size:14px; color:var(--ink-2); }
.byline b { color:var(--ink); font-weight:640; }

.av { width:34px; height:34px; border-radius:99px; flex:none; display:grid;
  place-items:center; font-size:12px; font-weight:700; color:#fff;
  background:var(--blue); }

/* ---------- rsvp ---------- */
.rsvp { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rsvp button { font:inherit; font-size:14.5px; font-weight:630; min-height:50px;
  border-radius:12px; border:none; background:var(--sunk); color:var(--ink-2);
  cursor:pointer; transition:background .12s, color .12s; }
.rsvp button:hover { background:var(--blue-soft); color:var(--ink); }
.rsvp button[aria-pressed="true"] { background:var(--blue); color:var(--on-blue); }
.rsvp button:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12.5px; font-weight:640; color:var(--ink-2); }
.field input { font:inherit; font-size:16px; padding:13px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--sunk); color:var(--ink); width:100%; }
.field input:focus-visible { outline:2px solid var(--blue); outline-offset:1px;
  border-color:var(--blue); }

.going { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-3); }
.going b { color:var(--ink-2); font-weight:640; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hair); border-radius:12px; overflow:hidden; }
.stat { background:var(--surface); padding:12px 8px; text-align:center; }
.stat .k { font-size:10px; color:var(--ink-3); font-weight:640; letter-spacing:.04em; }
.stat .v { font-size:17px; font-weight:670; margin-top:3px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.stat .v small { font-size:11.5px; color:var(--ink-3); font-weight:500; }

.desc { margin:0; font-size:15px; line-height:1.6; color:var(--ink-2);
  white-space:pre-wrap; }

/* ---------- blocks ---------- */
.blk { }
.blk h2 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:650; margin:0 0 10px; }
.kv { display:flex; gap:12px; padding:7px 0; font-size:15px; }
.kv .k { color:var(--ink-3); width:88px; flex:none; }
.kv .v { flex:1; }
.kv .v em { font-style:normal; font-weight:640; color:var(--good); }
.kv .v em.w { color:var(--warn); }
.kv .v em.c { color:var(--crit); }

.callout { background:var(--blue-soft); border-radius:12px; padding:13px 15px;
  font-size:14.5px; color:var(--ink-2); }
.callout b { color:var(--ink); font-weight:650; display:block; margin-bottom:4px; }

.locked { background:var(--sunk); border-radius:12px; padding:13px 15px;
  font-size:13.5px; color:var(--ink-3); }
.locked b { color:var(--ink-2); font-weight:640; }

.btn { font:inherit; font-size:15.5px; font-weight:650; min-height:52px; width:100%;
  border:none; border-radius:13px; background:var(--blue); color:var(--on-blue);
  cursor:pointer; display:grid; place-items:center; text-decoration:none; }
.btn:hover { filter:brightness(1.09); }
.btn:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }
.btn.ghost { background:var(--sunk); color:var(--ink-2); }
.btn.ghost:hover { background:var(--blue-soft); color:var(--ink); filter:none; }
.btn[disabled] { opacity:.5; cursor:default; filter:none; }

.foot { padding:22px 20px 28px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--ink-3); text-align:center; }
.foot a { color:var(--ink-2); }

/* ---------- states ---------- */
.state { padding:64px 26px; text-align:center; }
.state h2 { font-size:20px; font-weight:680; margin:0 0 8px; letter-spacing:-.02em; }
.state p { margin:0; color:var(--ink-3); font-size:15px; }
.spinner { width:26px; height:26px; margin:0 auto 18px; border-radius:99px;
  border:3px solid var(--line); border-top-color:var(--blue);
  animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  .spinner { border-top-color:var(--line); }
}