/* base.css — reset, layout scaffold, shared typography.
 *
 * tokens.css is loaded first and owns colour/type/spacing values
 * plus a body baseline and a few component bindings (.btn-primary,
 * .btn-ghost, .card, .phase-label). This file builds the app's
 * structural shell on top of those tokens. Do not hard-code colours
 * or spacings here — reference the tokens.
 */

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

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

body {
  margin: 0;
  min-height: 100%;
  /* background, colour, font come from tokens.css body baseline */
  overscroll-behavior-y: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── App shell layout ──────────────────────────────────────────
 * #app fills the viewport. Each screen is a flex column: a fixed
 * top bar, a scrollable content region, and (usually) a fixed tab
 * bar. The content region is the only thing that scrolls, which
 * keeps the bars pinned without position: sticky quirks on iOS.
 */
#app {
  min-height: 100dvh;
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.screen__content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-page-y) var(--space-page-x) var(--space-7);
}

/* ── Top bar ───────────────────────────────────────────────────*/
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-page-x);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border-hairline);
}

.topbar__spacer {
  flex: 1 1 auto;
}

.topbar__icon {
  width: var(--space-touch);
  height: var(--space-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

.breadcrumb {
  font-family: var(--font-stack-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ── Tab bar ───────────────────────────────────────────────────*/
.tabbar {
  flex: 0 0 auto;
  display: flex;
  background: var(--color-background);
  border-top: 1px solid var(--color-border-hairline);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__item {
  flex: 1 1 0;
  min-height: var(--space-touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2) 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.tabbar__item[aria-current="page"] {
  /* deep-water teal: meets 4.5:1 on ivory (accent alone is ~4.0:1) */
  color: var(--color-accent-hover);
  font-weight: var(--font-weight-medium);
}

/* ── Shared type helpers ───────────────────────────────────────*/
.display {
  font-size: var(--font-size-display);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  margin: 0;
}

.subtitle {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

/* Visually-hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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