/* Gear Phase 0 — hand-written layout only. Three full-viewport cards in a
   vertical scroll-snap container (the real card-swipe mechanism under test). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0b0f14;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}

#cards {
  height: 100vh;
  height: 100dvh;                 /* dvh tracks the iOS dynamic toolbar */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.card {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* enforce exactly one card per swipe */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

.card-tag {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 0; right: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8aa0;
}

h1 { font-size: 22px; margin: 0; font-weight: 650; }

.rows { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: #131a24; font-size: 14px;
}
.row .k { color: #8b97ab; }
.row .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.big-num { font-size: 64px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.hint { color: #7d8aa0; font-size: 13px; max-width: 300px; }

button {
  font: inherit;
  color: #e6edf3;
  background: #1f6feb;
  border: none;
  border-radius: 14px;
  padding: 18px 26px;
  font-size: 18px;
  font-weight: 650;
  min-width: 220px;
  min-height: 60px;
  touch-action: manipulation;      /* kill 300ms tap delay / dbl-tap zoom */
}
button:active { transform: scale(0.97); }
button.flash { background: #388bfd; }
button.ghost { background: #21262d; }
button.danger { background: #6e1423; }

input[type="number"], input.num {
  font: inherit;
  font-size: 28px;
  text-align: center;
  width: 200px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #30363d;
  background: #0d1117;
  color: #e6edf3;
}

input[type="file"] { color: #8b97ab; font-size: 13px; max-width: 260px; }

.status-ok { color: #3fb950; }
.status-bad { color: #f85149; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }