/* ─────────────────────────────────────────────────────────────────────
   InfoBorne — Base Styles
   Shared by index.html (login flow) and collection.html (collection flow).
   Page-specific overrides (font-size, screen height model) live in
   index.css and collection.css respectively.
   ───────────────────────────────────────────────────────────────────── */

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ── Screen shell ───────────────────────────────────────────────────── */
/* height is set per-page: 100dvh in index.css, 100% in collection.css  */
.screen {
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.screen.active { display: flex; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Desktop / tablet shell ─────────────────────────────────────────── */
/* On screens wider than 520 px the app is centred at phone width so    */
/* number plates and buttons don't stretch absurdly.                    */
@media (min-width: 520px) {
  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #060810;
  }
  .screen {
    max-width: 480px;
    width: 100%;
    min-height: 100dvh;
    box-shadow: 0 0 80px rgba(0,0,0,0.9);
    position: relative;
  }
}