/* ==========================================================================
   Base reset & typography
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--color-background);
  color: var(--color-on-surface);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  transition: background-color .25s ease, color .25s ease;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { cursor: pointer; background: none; border: none; padding: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
fieldset { border: none; margin: 0; padding: 0; }
::selection { background: var(--color-primary-container); color: var(--color-on-primary-container); }

input::placeholder, textarea::placeholder { color: var(--color-on-surface-variant); opacity: .55; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  user-select: none;
  flex-shrink: 0;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Typography scale ---- */
.text-display   { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; }
.text-headline-lg { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 700; }
.text-headline-lg-mobile { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; }
.text-headline-md { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.text-body-lg   { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-md   { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 400; }
.text-label     { font-family: var(--font-label); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.05em; }

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-muted { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-error { color: var(--color-error); }
.text-on-surface { color: var(--color-on-surface); }

/* ---- Minimal layout utilities ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.relative { position: relative; }

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-lg); }

/* ==========================================================================
   App shell — phone-frame on wide viewports, edge-to-edge on real mobile
   ========================================================================== */

#app-outer {
  min-height: 100dvh;
  min-height: max(884px, 100dvh);
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--color-background);
}

@media (min-width: 640px) {
  body {
    background:
      radial-gradient(60vw 60vw at 85% -10%, rgba(var(--color-primary-rgb), 0.10), transparent 60%),
      radial-gradient(70vw 70vw at -10% 110%, rgba(var(--color-primary-rgb), 0.06), transparent 60%),
      var(--color-background);
  }
  #app-outer {
    min-height: 100dvh;
    padding: 32px 16px;
    align-items: flex-start;
  }
  #app {
    height: 844px;
    max-height: 90dvh;
    border-radius: 32px;
    border: 1px solid var(--hairline);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#app {
  width: 100%;
  max-width: var(--app-max-width);
  position: relative;
  min-height: 100dvh;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
}

.page { display: flex; flex-direction: column; min-height: 100%; flex: 1; animation: page-in .22s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-content {
  flex: 1;
  padding: var(--space-md) var(--container-margin) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.page-content--nav { padding-bottom: calc(var(--bottomnav-height) + 24px); }
.page-content--tight { gap: var(--space-md); }
.page-content--form { padding-bottom: 120px; }

@media (prefers-reduced-motion: reduce) {
  .page, * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}