/* Lineup base — reset, typography, layout primitives. Phone first. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; font-family: var(--font-display); }
h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-title); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-sub); }

a { color: inherit; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.small { font-size: var(--fs-small); color: var(--ink-soft); }
.micro {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* app frame */
.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.app.no-tabs { padding-bottom: env(safe-area-inset-bottom); }

.screen {
  flex: 1;
  padding: var(--sp-5) var(--sp-4);
  display: none;
}
.screen.active { display: block; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-tight > * + * { margin-top: var(--sp-2); }
.stack-loose > * + * { margin-top: var(--sp-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.row .grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }

.center { text-align: center; }

.hide { display: none !important; }

/* wide-content guard */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* very thin phones */
@media (max-width: 350px) {
  .screen { padding: var(--sp-4) var(--sp-3); }
  .row { gap: var(--sp-2); }
}

@media (min-width: 900px) {
  .app { max-width: 1080px; }
  .screen { padding: var(--sp-6) var(--sp-6); }
}

/* desktop: bottom tabs become a left rail (see components.css) */
@media (min-width: 1024px) {
  .app:not(.no-tabs) {
    margin-left: max(136px, calc((100vw - 1080px) / 2));
    margin-right: auto;
    padding-bottom: var(--sp-6);
  }
}

@media (min-width: 1440px) {
  .app { max-width: 1280px; }
}