/* base.css — reset, fonts, screen shell, layout primitives. */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

html {
  /* iOS: stop Safari enlarging text in landscape */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--type-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* Touch-first: no text selection, no tap highlight, no double-tap zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }

/* Anything focusable gets a clear ring — but only for keyboard users. */
:focus-visible {
  outline: 4px solid var(--color-border-selected);
  outline-offset: 3px;
}

/* ---------------- app shell ---------------- */

#app {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: 40px var(--spacing-2xl);
  overflow: hidden;
}

/* Screens whose content can exceed the viewport (path, profile grid). */
.screen--scroll { overflow-y: auto; overscroll-behavior: contain; }

.screen__header {
  width: 100%;
  min-height: var(--size-tap-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex: none;
}

/* Equal flexible sides keep whatever sits between them (the title, the
   progress bar) centred on the screen, whatever the sides contain. */
.screen__header-side {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1 1 0;
  min-width: var(--size-tap-min);
}
.screen__header-side--end { justify-content: flex-end; }

.screen__body {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "safe" keeps tall content from overflowing past the top of the scroll
     container, where it can never be scrolled back into view. */
  justify-content: center;
  justify-content: safe center;
  gap: var(--spacing-xl);
}

/* ---------------- type ---------------- */

.t-title    { font-size: var(--type-title);   font-weight: 800; line-height: 1.2; margin: 0; }
.t-section  { font-size: var(--type-section); font-weight: 800; line-height: 1.28; margin: 0; }
.t-body     { font-size: var(--type-body);    font-weight: 600; line-height: 1.4; margin: 0; }
.t-small    { font-size: var(--type-small);   font-weight: 700; line-height: 1.38; margin: 0; }
.t-muted    { color: var(--color-text-secondary); }
.t-center   { text-align: center; }

.hanzi {
  font-family: var(--font-hanzi);
  font-weight: 500;
  line-height: 1.16;
}

/* Screen-reader-only text: every icon-only control needs one. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- layout helpers ---------------- */

.stack   { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); }
.row     { display: flex; align-items: center; gap: var(--spacing-md); }
.row--wrap { flex-wrap: wrap; justify-content: center; }
.spacer  { flex: 1; }

/* ---------------- phone portrait ---------------- */

@media (max-width: 560px) {
  .screen { padding: var(--spacing-md) var(--spacing-md); gap: var(--spacing-md); }
  .screen__body { gap: var(--spacing-lg); }
}

/* Short landscape phones: claw back vertical space. */
@media (max-height: 460px) {
  .screen { padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); }
  .screen__body { gap: var(--spacing-md); }
}