/* iPad-first. Touch targets never below 44px; body text never below 16px so
   Safari does not zoom on focus. */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --ink:#111827; --muted:#5b6472; --line:#e2e5ea;
  --accent:#0f5ea8; --accent-ink:#ffffff; --accent-soft:#e8f1fb;
  --good:#0d7a4f; --good-soft:#e3f5ec; --warn:#9a5b00; --warn-soft:#fdf1de;
  --bad:#a3232c; --bad-soft:#fbeaeb; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1319; --panel:#181d26; --ink:#e9edf3; --muted:#9aa5b5; --line:#2a323f;
    --accent:#4a9be8; --accent-ink:#08131f; --accent-soft:#16293d;
    --good:#4ecb92; --good-soft:#12291f; --warn:#e0a95a; --warn-soft:#2b2313;
    --bad:#f08a90; --bad-soft:#2e1719; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:26px; margin:0 0 4px; letter-spacing:-.02em}
h2{font-size:19px; margin:0 0 12px; letter-spacing:-.01em}
h3{font-size:15px; margin:0 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
p{margin:0 0 12px}

/* ---------- chrome ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:650}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--accent); font-size:20px}
.brand-name{max-width:32vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar nav{display:flex; gap:4px; flex:1}
.topbar nav a{
  padding:10px 14px; border-radius:10px; color:var(--muted); font-weight:550; min-height:44px;
  display:flex; align-items:center;
}
.topbar nav a:hover{background:var(--bg); text-decoration:none; color:var(--ink)}
.topbar nav a.on{background:var(--accent-soft); color:var(--accent)}
.who{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px}
.wrap{max-width:1080px; margin:0 auto; padding:24px 20px 80px}
.wide{max-width:1320px; margin:0 auto; padding:24px 20px 80px}

/* ---------- surfaces ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow); margin-bottom:18px}
.card.tight{padding:14px 16px}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.spread{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px}
hr{border:0; border-top:1px solid var(--line); margin:18px 0}

/* ---------- stats ---------- */
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat b{display:block; font-size:32px; line-height:1.1; letter-spacing:-.02em}
.stat span{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.05em}

/* ---------- forms ---------- */
label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin:0 0 6px;
  text-transform:uppercase; letter-spacing:.04em}
input,select,textarea,button{font:inherit; font-size:16px}
input[type=text],input[type=date],input[type=tel],input[type=email],input[type=password],
input[type=number],select,textarea{
  width:100%; padding:12px 14px; min-height:48px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); color:var(--ink); -webkit-appearance:none;
}
textarea{min-height:100px; resize:vertical; line-height:1.55}
input:focus,select,textarea:focus{outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field{margin-bottom:14px}
.fields{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fields .full{grid-column:1/-1}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:600; cursor:pointer;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.btn:hover{text-decoration:none; border-color:var(--muted)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.btn.big{min-height:56px; padding:14px 28px; font-size:17px}
.btn.block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost,a.ghost{background:transparent; border:0; color:var(--muted); padding:6px 8px; min-height:auto}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg)}

/* ---------- pills ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:650; letter-spacing:.02em; white-space:nowrap}
.pill.expected{background:var(--warn-soft); color:var(--warn)}
.pill.checked_in{background:var(--good-soft); color:var(--good)}
.pill.checked_out{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.pill.cancelled{background:var(--bad-soft); color:var(--bad)}
.pill.info{background:var(--accent-soft); color:var(--accent)}

.empty{padding:36px 20px; text-align:center; color:var(--muted)}
.notice{padding:12px 16px; border-radius:11px; background:var(--accent-soft);
  color:var(--accent); margin-bottom:16px; font-weight:550}
.errbox{padding:12px 16px; border-radius:11px; background:var(--bad-soft);
  color:var(--bad); margin-bottom:16px; font-weight:550}

/* ---------- check-in flow ---------- */
.flow{max-width:920px; margin:0 auto; padding:0 20px 140px}
.steps{display:flex; gap:6px; padding:16px 0 20px; position:sticky; top:64px; z-index:30;
  background:var(--bg)}
.steps div{flex:1; height:5px; border-radius:99px; background:var(--line)}
.steps div.done{background:var(--good)}
.steps div.now{background:var(--accent)}
.stepname{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
  font-weight:650; margin-bottom:4px}
.panel{display:none}
.panel.on{display:block; animation:in .18s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.flowbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(16,24,40,.08);
}
.flowbar .status{color:var(--muted); font-size:14px; flex:1; min-width:120px}
/* display:flex above beats the browser's default [hidden]{display:none}, so the
   bar would still show on the completion screen without this. */
.flowbar[hidden]{display:none !important}

.guestcard{border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:16px;
  background:var(--panel)}
.guestcard header{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; gap:12px}
.guestcard header b{font-size:17px}

.shots{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.shot{position:relative; width:150px; height:110px; border-radius:11px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot .x{position:absolute; top:5px; right:5px; width:30px; height:30px; border-radius:99px;
  border:0; background:rgba(0,0,0,.68); color:#fff; font-size:17px; line-height:30px;
  cursor:pointer; padding:0}
.shot .cap{position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.62);
  color:#fff; font-size:11px; padding:3px 7px; text-align:center}
.addshot{width:150px; height:110px; border:2px dashed var(--line); border-radius:11px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--muted); background:transparent; cursor:pointer; font-size:13px; font-weight:600}
.addshot:hover{border-color:var(--accent); color:var(--accent)}
.addshot .plus{font-size:24px; line-height:1}

#pad{
  width:100%; height:300px; border:2px dashed var(--line); border-radius:var(--r);
  background:var(--panel); touch-action:none; display:block; cursor:crosshair;
}
#pad.signed{border-style:solid; border-color:var(--good)}
.termsbox{max-height:260px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:16px;
  white-space:pre-wrap; font-size:15px; line-height:1.65; margin-bottom:16px}

.check{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:11px;
  background:var(--bg); cursor:pointer; margin-bottom:16px}
.check input{width:26px; height:26px; margin:0; flex:none; accent-color:var(--accent)}
.check span{font-size:15px; line-height:1.5; color:var(--ink); text-transform:none;
  letter-spacing:0; font-weight:500}

.thumbs{display:flex; gap:12px; flex-wrap:wrap}
.thumbs a{display:block; width:170px}
.thumbs img{width:170px; height:120px; object-fit:cover; border-radius:11px;
  border:1px solid var(--line); display:block}
.thumbs .cap{font-size:12px; color:var(--muted); margin-top:5px; text-align:center}
.sigimg{max-width:340px; width:100%; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:10px}

.dl{display:grid; grid-template-columns:170px 1fr; gap:10px 16px; font-size:15px}
.dl dt{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  padding-top:2px}
.dl dd{margin:0}
@media (max-width:620px){ .dl{grid-template-columns:1fr; gap:2px 0} .dl dd{margin-bottom:10px} }

/* ---------- login ---------- */
.loginwrap{min-height:100svh; display:grid; place-items:center; padding:24px}
.loginbox{width:100%; max-width:420px}
.loginbox .card{padding:32px}
.loginbox h1{text-align:center; margin-bottom:6px}
.loginbox .sub{text-align:center; color:var(--muted); margin-bottom:26px}

/* ---------- print ---------- */
@media print{
  .topbar,.flowbar,.noprint{display:none !important}
  body{background:#fff; color:#000; font-size:11.5pt}
  .card{box-shadow:none; border:1px solid #bbb; break-inside:avoid; margin-bottom:12px}
  .wrap,.wide{max-width:none; padding:0}
  a{color:#000; text-decoration:none}
  .thumbs img{width:230px; height:auto}
  @page{margin:14mm}
}