/* ============================================================
   app.css
   Version: v1.0.0001
   Mobile-first styles. Tokens from rules/default-design.md.
   CHANGELOG:
   v1.0.0000 — Initial build
   v1.0.0001 — Footer admin link
   ============================================================ */
:root {
  --bg:#07080d; --bg2:#0f1117; --bg3:#161820;
  --gold:#f0b429; --white:#f2f0eb; --muted:#888a94; --muted2:#555761;
  --green:#22c55e; --green-text:#86efac; --error:#ef4444; --error-text:#fca5a5;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.1);
  --gold-wash-08:rgba(240,180,41,.08); --gold-wash-30:rgba(240,180,41,.3);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; background:var(--bg); color:var(--white); color-scheme:dark; }
body { font-family:'Inter',sans-serif; font-size:.95rem; line-height:1.6; -webkit-text-size-adjust:100%; }
a { color:var(--gold); }
h1, h2, h3, .syne { font-family:'Syne',sans-serif; }

/* ---- Topbar ---- */
.topbar { position:fixed; top:0; left:0; right:0; height:64px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:20; }
.wordmark { font-family:'Syne',sans-serif; font-weight:700; font-size:1.25rem; line-height:1.1; text-decoration:none; color:var(--white); }
.wordmark b { color:var(--gold); font-weight:700; }
.wordmark small { display:block; font-family:'Inter',sans-serif; font-size:.68rem; color:var(--muted); font-weight:400; letter-spacing:.01em; }
.topnav a { color:var(--muted); font-size:.875rem; text-decoration:none; margin-left:14px; }
.topnav a:hover { color:var(--gold); }

.page { padding:80px 16px 40px; max-width:640px; margin:0 auto; }
.page.wide { max-width:1100px; }

/* ---- Progress ---- */
.progress { display:flex; justify-content:space-between; gap:4px; margin:8px 0 20px; }
.progress span { flex:1; text-align:center; font-family:'Syne',sans-serif; font-size:.72rem; font-weight:600; color:var(--muted2);
  padding-top:8px; border-top:3px solid var(--bg3); letter-spacing:.04em; text-transform:uppercase; }
.progress span.on { color:var(--gold); border-top-color:var(--gold); }
.progress span.done { color:var(--muted); border-top-color:var(--gold-wash-30); }
.stepcount { color:var(--muted); font-size:.75rem; margin:-12px 0 12px; text-align:right; }

/* ---- Cards / forms ---- */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
.eyebrow { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
h1 { font-weight:800; font-size:1.6rem; line-height:1.2; margin:0 0 10px; }
h2 { font-weight:700; font-size:1.15rem; margin:0 0 10px; }
.lead { color:var(--muted); margin:0 0 18px; }
label { display:block; font-size:.85rem; color:var(--muted); margin:14px 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select {
  width:100%; background:var(--bg); color:var(--white); border:1px solid var(--border-strong); border-radius:6px;
  padding:.8rem .85rem; font:inherit; font-size:16px; /* 16px stops iOS zoom */ }
input:focus, select:focus { outline:none; border-color:var(--gold); }
.hint { font-size:.78rem; color:var(--muted2); margin-top:6px; }
.error { background:rgba(239,68,68,.1); border:1px solid var(--error); color:var(--error-text); border-radius:8px; padding:.7rem .85rem; margin:14px 0 0; font-size:.875rem; display:none; }
.error.show { display:block; }

.check { display:flex; gap:12px; align-items:flex-start; margin:18px 0 0; cursor:pointer; color:var(--white); font-size:.9rem; }
.check input { width:24px; height:24px; flex:0 0 24px; accent-color:var(--gold); margin-top:2px; }

/* ---- Buttons ---- */
.btnrow { display:flex; gap:10px; margin-top:22px; }
.btn { appearance:none; border:0; border-radius:10px; padding:.95rem 1rem; font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer; text-align:center; text-decoration:none; display:inline-block; }
.btn-primary { background:var(--gold); color:var(--bg); flex:1; }
.btn-primary:disabled { background:var(--bg3); color:var(--muted2); cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border-strong); }
.btn-outline { background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn-ms { background:#fff; color:#5e5e5e; width:100%; font-family:'Inter',sans-serif; font-weight:500; display:flex; align-items:center; justify-content:center; gap:10px; }

/* ---- Waiver text ---- */
.doc { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:1rem; font-size:.88rem; line-height:1.65; }
.doc h3 { font-size:.95rem; font-weight:700; margin:20px 0 6px; color:var(--white); }
.doc p { margin:0 0 10px; color:#d9d7d1; }
.doc .warn { border:1px solid var(--gold); background:var(--gold-wash-08); color:var(--white); padding:.75rem; border-radius:8px; font-weight:600; font-size:.82rem; }
.initial-btn { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 4px; padding:.8rem .9rem;
  background:var(--bg2); border:1px dashed var(--gold); border-radius:8px; color:var(--gold); font:inherit; font-size:.85rem; cursor:pointer; text-align:left; }
.initial-btn .stamp { font-family:'Syne',sans-serif; font-weight:800; font-size:1rem; min-width:56px; text-align:center;
  border:1px solid var(--gold-wash-30); border-radius:6px; padding:4px 6px; }
.initial-btn.done { border-style:solid; border-color:var(--green); color:var(--green-text); background:rgba(34,197,94,.07); }
.initial-btn.done .stamp { border-color:var(--green); color:var(--green-text); }
.status-pill { font-size:.78rem; color:var(--muted); margin-top:10px; }

/* ---- Photo ---- */
.camera { position:relative; width:100%; aspect-ratio:3/4; max-height:60vh; background:var(--bg); border:1px dashed var(--border-strong);
  border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--muted2); }
.camera video, .camera img { width:100%; height:100%; object-fit:cover; }
.camera video { transform:scaleX(-1); }

/* ---- Signature ---- */
.sigwrap { position:relative; background:#fff; border-radius:10px; touch-action:none; }
.sigwrap canvas { display:block; width:100%; height:200px; border-radius:10px; touch-action:none; }
.sigwrap .line { position:absolute; left:16px; right:16px; bottom:44px; border-bottom:1px solid #c9c9c9; pointer-events:none; }
.sigwrap .x { position:absolute; left:16px; bottom:48px; color:#999; font-weight:700; pointer-events:none; }
.linkbtn { background:none; border:0; color:var(--muted); font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer; padding:6px 0; }

/* ---- Done ---- */
.big-check { width:64px; height:64px; border-radius:50%; background:rgba(34,197,94,.15); border:2px solid var(--green); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 14px; }
.center { text-align:center; }

/* ---- Admin ---- */
.search { display:flex; gap:8px; margin:0 0 14px; }
.search input { flex:1; }
.list { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; justify-content:space-between; gap:12px; align-items:center; background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:.9rem 1rem; text-decoration:none; color:var(--white); }
.row:hover { border-color:var(--gold-wash-30); }
.row .name { font-family:'Syne',sans-serif; font-weight:700; }
.row .meta { color:var(--muted); font-size:.78rem; }
.badge { font-size:.625rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:3px; white-space:nowrap; }
.badge-ok { background:rgba(34,197,94,.15); color:var(--green); border:1px solid rgba(34,197,94,.3); }
.badge-old { background:rgba(240,180,41,.1); color:var(--gold); border:1px solid var(--gold-wash-30); }
dl.kv { display:grid; grid-template-columns:1fr; gap:2px 16px; margin:0; }
dl.kv dt { color:var(--muted); font-size:.75rem; margin-top:10px; }
dl.kv dd { margin:0; word-break:break-word; }
.mono { font-family:ui-monospace,Menlo,monospace; font-size:.78rem; }
.media { display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
.media img { width:100%; border-radius:10px; border:1px solid var(--border); background:#fff; }
@media (min-width:700px) {
  dl.kv { grid-template-columns:200px 1fr; }
  dl.kv dt { margin-top:0; }
  .media { grid-template-columns:1fr 1fr; }
  h1 { font-size:2rem; }
}
footer.foot { text-align:center; color:var(--muted2); font-size:.75rem; padding:24px 16px; }
footer.foot .adminlink { color:var(--muted2); text-decoration:none; }
footer.foot .adminlink:hover { color:var(--gold); }