/* base.css — reset, body, focus ring, type scale (frontend.md §3.5)
   Verbatim from theme.html's BASE + TYPE SCALE sections. Do not
   hand-edit a value here without updating theme.html first. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
/* Not from theme.html. A component's own `display:flex`/`inline-flex`
   silently beats the UA's plain `[hidden]{display:none}` -- found via
   .field-group/.processing-screen/.transfer-row__payoff/.btn all having
   this bug. One global override beats patching each class. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}
.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 10;
  background: var(--brand); color: var(--on-brand); text-decoration: none;
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* ---------- TYPE SCALE (frontend.md §3.5) ------------------------------ */
.t-display   { font-size:32px; line-height:1.10; font-weight:700; }
.t-h1        { font-size:24px; line-height:1.25; font-weight:700; }
.t-h2        { font-size:20px; line-height:1.30; font-weight:600; }
.t-h3        { font-size:17px; line-height:1.40; font-weight:600; }
.t-body      { font-size:16px; line-height:1.50; font-weight:400; }
.t-body-sm   { font-size:15px; line-height:1.45; font-weight:400; }
.t-caption   { font-size:13px; line-height:1.40; font-weight:500; }
.t-label     { font-size:11px; line-height:1.20; font-weight:600;
               letter-spacing:.06em; text-transform:uppercase; }
.muted  { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }

/* ---------- FORM PRIMITIVES (frontend.md §13 assigns these to base.css,
   even though theme.html's single stylesheet places the rule physically
   next to the OTP component — F07) ------------------------------------ */
.field {
  width:100%; min-height:52px; padding:14px 16px;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text); font-size:16px;
}
.field::placeholder { color:var(--text-subtle); }
.field:focus { outline:none; border:2px solid var(--brand); padding:13px 15px; }
.field-group { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.statement-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-2); }
.preset-chip{padding:6px 12px;border-radius:var(--radius-full);background:var(--surface-2);color:var(--text);font-size:12px;font-weight:600}
.preset-chip[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}

/* ---------- APP SHELL LAYOUT + SAFE AREA (frontend.md §4, §12) -- F08 -- */
.app-shell {
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
}
.content {
  flex: 1 1 auto; overflow-y: auto;
  padding-inline: max(16px, env(safe-area-inset-left));
  padding-block: var(--space-4);
}
@media (min-width: 768px) {
  .content { padding-inline: max(24px, env(safe-area-inset-left)); }
}

/* ---------- VIEW TRANSITIONS (frontend.md §9) -- F08 -------------------
   iOS Safari ignores all of this and performs a plain load -- accepted,
   no JS fallback is built. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: mb-slide-out var(--dur-slow) var(--ease-in) both; }
::view-transition-new(root) { animation: mb-slide-in  var(--dur-slow) var(--ease)    both; }

@keyframes mb-slide-out { to   { transform: translateX(-30%); opacity: .6; } }
@keyframes mb-slide-in  { from { transform: translateX(100%); } }

/* Back navigation mirrors the animation -- app.js sets data-nav="back"
   on popstate. */
html[data-nav="back"]::view-transition-old(root) { animation-name: mb-slide-out-back; }
html[data-nav="back"]::view-transition-new(root) { animation-name: mb-slide-in-back; }
@keyframes mb-slide-out-back { to   { transform: translateX(100%); } }
@keyframes mb-slide-in-back  { from { transform: translateX(-30%); opacity: .6; } }

/* App bar and tab bar hold still while content moves -- this single
   detail is most of what makes navigation read as native. */
.app-bar { view-transition-name: app-bar; }
.tab-bar { view-transition-name: tab-bar; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  @view-transition { navigation: none; }
}