/* Reset + base layout. Phone-first; iPad/Mac grow from this. */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The page itself never scrolls — the content area (#screen-root) does. This
     pins the bottom nav as a real flex item so it can't rubber-band/drift on iOS
     (a fixed bottom bar over a body-scroll visibly lags during momentum scroll). */
  overflow: hidden;
  /* safe areas for notch / home indicator */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }

/* Fixed-height frame: app bar + content + bottom nav stack, and ONLY the middle
   (#screen-root) scrolls. The bar is then a normal flex item that never moves. */
#app { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
#screen-root {
  flex: 1;
  min-height: 0;                 /* let the flex child shrink so it can scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* no scroll-chaining bounce past the edges */
}

/* The content column inside the scroll area. */
.screen {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--space) * 2);
  padding-bottom: calc(var(--space) * 3);
}

/* iPad / Mac: the content column widens and chrome aligns to it, so the app
   reads as designed-for-the-size rather than a stretched phone screen. */
@media (min-width: 700px) {
  :root { --content-max: 860px; }
}
@media (min-width: 1100px) {
  :root { --content-max: 1000px; }
}

.screen-title {
  font-size: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: calc(var(--space) * 0.5);
}
.screen-subtitle {
  font-size: var(--font-caption);
  color: var(--muted);
  margin-bottom: calc(var(--space) * 2);
}

/* Layout primitives — use these instead of inline flex styles so spacing and
   alignment stay consistent across screens (the design-system discipline). */
.row { display: flex; align-items: center; gap: var(--space); }
.cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cluster--end { align-items: flex-end; }
.cluster--baseline { align-items: baseline; }
.stack > * + * { margin-top: var(--space); }
.spacer { flex: 1; }

.hidden { display: none !important; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: var(--space); }
.mt-2 { margin-top: calc(var(--space) * 2); }
.mt-3 { margin-top: calc(var(--space) * 3); }