/* ============================================================
   Spaxel Application — kiosk stylesheet
   Fluid + accessible: everything sizes in rem off a viewport-fluid
   root font-size, multiplied by --ui-scale (the A-/A+ control).
   Works from tablets up to 27"/32"/52" touch screens.
   ============================================================ */
:root{
  --ui-scale:1;                 /* set by the A-/A+ control */
  --brand:#0e4d64;
  --brand-2:#12718f;
  --accent:#f5a623;
  --ok:#1f9d55;
  --bg:#eef2f4;
  --card:#ffffff;
  --ink:#132029;               /* high-contrast text */
  --muted:#4a5960;
  --line:#c7d3d9;
  --danger:#b52d1c;
  --radius:1rem;
  --touch:3.4rem;              /* base touch target height (scales) */
  --fs:1.15rem;                /* base input font (scales) */
  --focus:#0a6ea0;
}
/* Fluid base: grows with viewport width, then scaled by the A-/A+ control.
   ~15px on a tablet → ~25px on a 4K wall screen (before scaling). */
html{ font-size: calc(clamp(15px, 0.45vw + 11.5px, 25px) * var(--ui-scale)); }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:1rem;line-height:1.55;
  -webkit-user-select:none;user-select:none;
}
input,textarea{-webkit-user-select:text;user-select:text}

/* Clear, strong focus for keyboard / low-vision users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[role=button]:focus-visible,.option:focus-visible{
  outline:4px solid var(--focus);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} }

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
  padding:0.9rem 1.6rem;box-shadow:0 2px 10px rgba(20,45,60,.06)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1500px;margin:0 auto}
.topbar img.logo{height:2.6rem;width:auto;display:block}
.row-right{display:flex;align-items:center;gap:1.1rem}
.ctx{font-size:1rem;font-weight:700;color:var(--muted);white-space:nowrap}
.a11y{display:flex;align-items:center;gap:.5rem}
.a11y-ic{font-weight:800;color:var(--muted);font-size:1.05rem}
.a11y-btn{min-width:2.9rem;min-height:2.9rem;border:2px solid var(--line);background:#fff;border-radius:.7rem;
  font-weight:800;color:var(--brand);font-size:1.1rem;cursor:pointer;line-height:1}
.a11y-btn:active{transform:scale(.96)}
.a11y-btn[disabled]{opacity:.4;pointer-events:none}
.progwrap{max-width:1500px;margin:.9rem auto 0;height:.5rem;background:#e3ecef;border-radius:999px;overflow:hidden;display:none}
.progwrap.show{display:block}
.progwrap > i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .35s ease}

/* ---------- Layout ---------- */
.wrap{max-width:min(1500px,94vw);margin:0 auto;padding:1.6rem 1.4rem 9rem}
.screen{display:none}
.screen.active{display:block;animation:fade .35s ease}
.step{display:none}
.step.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 22px rgba(20,45,60,.08);padding:1.8rem 1.7rem;margin-bottom:1.4rem}
.card h2{margin:0 0 .35rem;font-size:1.7rem;color:var(--brand)}
.card .sub{margin:0 0 1.4rem;color:var(--muted);font-size:1.12rem}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid .full{grid-column:1/-1}
@media (max-width:52em){.grid{grid-template-columns:1fr}}

label.field{display:block}
label.field > span{display:block;font-weight:700;font-size:1.12rem;margin-bottom:.5rem}
label.field .req{color:var(--danger);margin-left:.25rem}

input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea,select{
  width:100%;min-height:var(--touch);font-size:var(--fs);padding:.8rem 1.1rem;border:2px solid var(--line);
  border-radius:.8rem;background:#fff;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
textarea{min-height:7rem;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(18,113,143,.18)}
input.invalid,textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(181,45,28,.15)}

/* ---------- Home screen ---------- */
.home-hero{text-align:center;padding:1.2rem .6rem .4rem}
.home-hero h1{font-size:2.4rem;color:var(--brand);margin:0 0 .5rem}
.home-hero p{font-size:1.3rem;color:var(--muted);margin:0}
.options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.6rem}
.options.single{grid-template-columns:min(34rem,100%);justify-content:center}
@media (max-width:52em){.options{grid-template-columns:1fr}}
.option{background:var(--card);border:2px solid var(--line);border-radius:1.3rem;padding:2rem 1.9rem;cursor:pointer;
  text-align:left;transition:.18s;box-shadow:0 6px 22px rgba(20,45,60,.08);min-height:15rem;display:flex;flex-direction:column}
.option:active{transform:scale(.99)}
.option:hover{border-color:var(--brand-2);box-shadow:0 10px 30px rgba(14,77,100,.16)}
.option .tag{display:inline-block;align-self:flex-start;font-size:.85rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:999px;margin-bottom:1rem;background:#e7f1f5;color:var(--brand)}
.option h2{font-size:1.8rem;margin:0 0 .6rem;color:var(--ink)}
.option p{font-size:1.15rem;color:var(--muted);margin:0 0 1.1rem;flex:1}
.option ul{margin:0 0 1.4rem;padding-left:1.3rem;color:var(--muted);font-size:1.08rem;line-height:1.8}
.option .go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--touch);border-radius:.8rem;
  font-size:1.3rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}

/* Yes/No choices */
.choices{display:flex;flex-wrap:wrap;gap:.9rem}
.choice{flex:1 1 9rem;min-height:var(--touch);border:2px solid var(--line);border-radius:.8rem;background:#fff;
  font-size:1.3rem;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:0 1.25rem}
.choice:active{transform:scale(.98)}
.choice.sel{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(14,77,100,.25)}
.choicewrap.invalid .choice{border-color:var(--danger)}

/* Occupants */
.occ{border:2px dashed var(--line);border-radius:1rem;padding:1.1rem;margin-bottom:1rem;background:#fafcfd}
.occ .occhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.occ .occhead b{font-size:1.15rem;color:var(--brand)}
.btn-remove{background:#fdece9;color:var(--danger);border:2px solid #f0bdb4;border-radius:.7rem;min-height:3.1rem;padding:0 1.1rem;font-size:1rem;font-weight:700;cursor:pointer}
.grid3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1rem}
@media (max-width:52em){.grid3{grid-template-columns:1fr}}
.btn-add{width:100%;min-height:var(--touch);border:2px dashed var(--brand-2);color:var(--brand);background:#eef7fa;border-radius:.8rem;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem}
.btn-add:active{transform:scale(.99)}

/* Signature */
.sigblock{margin-top:.5rem}
.sig-label{font-weight:700;font-size:1.15rem;display:block;margin-bottom:.6rem}
.consent{background:#f4f8fa;border:1px solid var(--line);border-radius:.8rem;padding:1.1rem 1.25rem;font-size:1.08rem;line-height:1.65;color:#28353c;margin-bottom:1.1rem}
.consent.small{font-size:.9rem;line-height:1.5;padding:.8rem 1rem;margin-bottom:.7rem;color:#3a4850}
.consent-intro{font-size:1rem;font-weight:700;color:var(--muted);margin:1.2rem 0 .6rem}
.sigpad-wrap{position:relative;border:2px solid var(--line);border-radius:1rem;background:repeating-linear-gradient(#fff,#fff 2.9rem,#eef3f5 3rem);overflow:hidden}
.sigpad-wrap.invalid{border-color:var(--danger)}
canvas.sigpad{display:block;width:100%;height:14rem;touch-action:none;cursor:crosshair}
.sig-baseline{position:absolute;left:1.5rem;right:8rem;bottom:3.4rem;border-bottom:2px solid #b9c6cd;pointer-events:none}
.sig-x{position:absolute;left:1.5rem;bottom:3.6rem;color:#9fb0b8;font-size:1.5rem;font-weight:700;pointer-events:none}
.sig-clear{position:absolute;right:.9rem;bottom:.9rem;background:#fff;border:2px solid var(--line);border-radius:.7rem;min-height:3.1rem;padding:0 1.25rem;font-size:1.05rem;font-weight:700;color:var(--muted);cursor:pointer}
.sig-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b4c2c9;font-size:1.35rem;pointer-events:none}
.sigdate{margin-top:1rem;max-width:22rem}

/* Camera / photo step */
.camera{position:relative;max-width:38rem;margin:0 auto;background:#0b1418;border-radius:1rem;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.camera video,.camera img{width:100%;height:100%;object-fit:cover;display:block}
.cam-error{color:#fff;padding:2rem 1.5rem;text-align:center;font-size:1.15rem;line-height:1.5}
.cam-controls{display:flex;gap:1rem;justify-content:center;margin-top:1.3rem;flex-wrap:wrap}
.cam-btn{max-width:22rem;flex:1 1 14rem}

/* Review */
.rev-sec{margin-bottom:1.5rem}
.rev-sec h3{color:var(--brand);font-size:1.3rem;margin:0 0 .8rem;border-bottom:2px solid var(--line);padding-bottom:.5rem}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.8rem}
@media (max-width:52em){.rev-grid{grid-template-columns:1fr}}
.rev-item{display:flex;flex-direction:column;padding:.4rem 0}
.rev-item .k{font-size:.95rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.rev-item .v{font-size:1.2rem;word-break:break-word}
.rev-sig img{max-width:20rem;border:1px solid var(--line);border-radius:.7rem;background:#fff}
.rev-photo img{max-height:12rem;border:1px solid var(--line);border-radius:.7rem}

/* Scroll / swipe-down cue */
.scrollcue{position:fixed;left:50%;transform:translateX(-50%);bottom:7.2rem;z-index:40;
  display:none;align-items:center;gap:.5rem;background:rgba(14,77,100,.96);color:#fff;
  padding:.5rem 1.15rem;border-radius:999px;font-size:1rem;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none;white-space:nowrap}
.scrollcue.show{display:flex;animation:cuein .25s ease}
.scrollcue-arrow{font-size:1.35rem;line-height:1;display:inline-block;animation:cuebounce 1.2s infinite}
@keyframes cuebounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes cuein{from{opacity:0}to{opacity:1}}

/* Footer nav */
.navbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(20,45,60,.08);padding:1rem 1.4rem;z-index:30;display:none}
.navbar.show{display:block}
.navbar .inner{max-width:1500px;margin:0 auto;display:flex;gap:1rem}
.btn{min-height:4.4rem;border:none;border-radius:1rem;font-size:1.4rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:0 1.8rem;transition:.15s}
.btn:active{transform:scale(.98)}
.btn-back{background:#e7edf0;color:var(--brand);flex:0 0 12rem;border:2px solid var(--line)}
.btn-next{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;flex:1}
.btn-skip{background:#fff;color:var(--muted);border:2px solid var(--line);flex:0 0 auto;min-width:9rem}
.btn-submit{background:linear-gradient(135deg,var(--ok),#159b6b);color:#fff;flex:1}
.btn[disabled]{opacity:.5;pointer-events:none}
@media (max-width:36em){.btn-back{flex:0 0 7rem;padding:0 .8rem}.btn-skip{min-width:6rem;padding:0 .8rem}.btn{font-size:1.2rem}}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(14,45,60,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:60;padding:1.25rem}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:1.4rem;max-width:36rem;width:100%;padding:2.8rem 2.2rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .ic{width:6.5rem;height:6.5rem;border-radius:50%;margin:0 auto 1.4rem;display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.ic.good{background:#e5f6ee;color:var(--ok)}
.ic.bad{background:#fdece9;color:var(--danger)}
.modal h2{margin:0 0 .7rem;font-size:2.1rem}
.modal p{margin:0 0 1.7rem;color:var(--muted);font-size:1.25rem}
.spinner{width:4.4rem;height:4.4rem;border:.45rem solid #e3ecef;border-top-color:var(--brand);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:7.5rem;transform:translateX(-50%);background:var(--danger);color:#fff;padding:1rem 1.6rem;border-radius:.8rem;font-size:1.2rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:70;display:none;max-width:90%;text-align:center}
.toast.show{display:block;animation:fade .25s}