/* Expent — the web's layout on top of tokens.css (generated from
   design/tokens.json; never set a colour or size here that a token holds).
   Phone-first (../MOBILE_FIRST_STANDARD.md): base rules are the 320px layout;
   anything wider is a min-width query on the fleet's three breakpoints.
   worker/test/mobile.test.ts holds the rules. */

:root {
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--label);
  background: var(--bg-grouped);
  -webkit-font-smoothing: antialiased;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

main { padding: var(--space-6) var(--space-4) var(--space-12); max-width: 64rem; margin: 0 auto; }

h1 {
  font-size: var(--large-title-size);
  line-height: var(--large-title-lh);
  font-weight: var(--large-title-weight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
p { margin: 0 0 var(--space-4); color: var(--label-secondary); }
a { color: var(--accent-text); }

/* Every control: 16px text at least (no iOS focus zoom), 44px hit area. */
button, .button, input, select, textarea { font: inherit; font-size: max(16px, 1em); }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--label-on-accent);
  text-decoration: none;
  font-weight: var(--headline-weight);
  cursor: pointer;
}
button:active, .button:active { background: var(--accent-pressed); }

input, select, textarea {
  min-height: 44px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--label);
}

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

@media (min-width: 48rem) {
  main { padding: var(--space-12) var(--space-8) 64px; }
}