/* Cape Ride setup flow. Shares the palette and type of app.css; kept
   separate because riders load it once, days before the event. */

:root{
  --water:#EDF2F3; --shoal:#DCE7E8; --sand:#E8DCC0;
  --ink:#132321; --ink-soft:#4A5C5A; --hair:#C3D2D2; --magenta:#B3175E;
  --good:#2C7A52; --soon:#C98A12; --now:#BE5219;
  --pad:22px; --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;min-height:100%}
body{background:var(--water);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

.step{display:none;min-height:100dvh;flex-direction:column;
  padding:calc(var(--safe-top) + 22px) var(--pad) calc(24px + var(--safe-bot))}
.step.on{display:flex}

.progress{display:flex;gap:6px;margin-bottom:34px}
.progress i{flex:1;height:3px;border-radius:2px;background:var(--hair)}
.progress i.done{background:var(--ink)}

.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px}
h1{font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.035em;
  font-variation-settings:"wdth" 88,"wght" 800;margin:0 0 14px}
h1.small{font-size:30px}
p{margin:0 0 16px;color:var(--ink-soft);font-weight:500}
p strong{color:var(--ink)}

.act{margin-top:auto;padding-top:24px}
.btn{display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:21px;background:var(--ink);color:var(--water);border-radius:3px;
  font-size:20px;font-weight:800;font-variation-settings:"wdth" 92,"wght" 800}
.btn:disabled{opacity:.45}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--ink);margin-top:10px;
  font-size:17px;font-weight:700;padding:16px;text-decoration:none}
.btn.danger-text{color:var(--now);border-color:var(--now)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;
  border-top-color:transparent;animation:spin .8s linear infinite;display:none}
.btn.busy .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* passphrase */
.phrase{width:100%;padding:20px;border:2px solid var(--ink);border-radius:3px;
  background:transparent;font-size:26px;font-weight:700;letter-spacing:-.01em;
  text-align:center;font-variation-settings:"wdth" 94,"wght" 700}
.phrase:focus{outline:3px solid var(--magenta);outline-offset:2px}
.err{color:var(--now);font-weight:700;margin-top:12px;font-size:15px}
.err[hidden]{display:none}

/* the install card */
.card{background:var(--sand);border-radius:4px;padding:20px;margin-bottom:18px}
.card ol{margin:0;padding-left:20px}
.card li{margin-bottom:11px;font-weight:600}
.card li:last-child{margin-bottom:0}
.card li span{font-weight:500;color:var(--ink-soft);display:block;font-size:15px}
.glyph{display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border:1.5px solid var(--ink);border-radius:5px;
  vertical-align:-6px;margin:0 2px;font-size:14px;font-weight:700}

/* why-location bullets */
.why{list-style:none;margin:0 0 18px;padding:0}
.why li{display:grid;grid-template-columns:26px 1fr;gap:12px;margin-bottom:16px;
  font-weight:500;color:var(--ink-soft)}
.why li b{color:var(--ink);font-weight:700;display:block}
.why .mk{font-weight:800;color:var(--good);text-align:center}
.why .mk.no{color:var(--now)}

/* fix readout */
.fix{border:2px solid var(--ink);border-radius:3px;padding:26px 20px;text-align:center;
  margin-bottom:18px}
.fix.good{background:var(--good);border-color:var(--good);color:#fff}
.fix .num{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.04em;
  font-variation-settings:"wdth" 86,"wght" 800}
.fix .lbl{font-size:15px;font-weight:600;margin-top:6px;opacity:.8}
.fix .wait{font-size:19px;font-weight:700}

.recover{background:var(--shoal);border-radius:4px;padding:20px;margin-bottom:18px}
.recover ol{margin:0;padding-left:20px}
.recover li{margin-bottom:10px;font-weight:600}
.recover li:last-child{margin-bottom:0}

.done-mark{font-size:56px;color:var(--good);font-weight:800;line-height:1;margin-bottom:14px}

.sum{border-top:1px solid var(--hair);padding:14px 0;display:grid;
  grid-template-columns:1fr auto;gap:12px;font-weight:600}
.sum:last-of-type{border-bottom:1px solid var(--hair);margin-bottom:20px}
.sum .v{color:var(--good);font-weight:800}

/* mock-only */