/* Base: reset, type, focus, layout primitives, motion policy. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Phones: keep animations/blurs from creating sideways rubber-band scroll. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
}
body {
  min-height: 100vh; min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-md)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* iOS notch / Android gesture bar */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--blood-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* Headings: Lora for the voice, Inter for the interface. */
h1, h2, .h1, .h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1, .h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-2xl); line-height: 1.18; }
h3, .h3 { font: 600 var(--fs-lg)/var(--lh-snug) var(--font-ui); }
p { max-width: 68ch; }
.lede { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.5; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
.label {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.label--blood { color: var(--blood-deep); }
.num { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }

/* Focus: always visible for keyboard users, never for mouse clicks. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
}
.skip:focus { top: var(--s-3); }

/* Layout primitives */
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.column { width: 100%; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grid { display: grid; gap: var(--s-4); }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }

/* Page scaffold: top bar, main, optional tab bar. */
#main { display: block; min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); padding-bottom: var(--s-16); overflow-x: clip; }
body.has-tabbar #main { padding-bottom: calc(var(--tabbar-h) + var(--s-16) + env(safe-area-inset-bottom)); }
.page { padding-top: var(--s-6); }
.page-head { margin-bottom: var(--s-6); }
.page-head .label { margin-bottom: var(--s-2); }
@media (min-width: 1080px) {
  .page { padding-top: var(--s-10); }
  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 30px; }
}

/* Phones / tablets: keep controls tappable, stop iOS input zoom, clip spill. */
@media (max-width: 1079px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em); /* iOS zooms if < 16px */
  }
  .wrap, .column { min-width: 0; }
  .btn-row { width: 100%; }
  .btn-row > .btn { flex: 1 1 auto; min-width: 0; }
}

/* Motion policy: every animation has a still final frame.
   Base styles ARE the final frame; @keyframes only describe where a move starts (`from`).
   With "reduce motion" on, animations collapse to 1 ms, so people see the final frame at once.
   JavaScript motion (count-ups, thread drawing) checks K.ui.motionOk() the same way. */
#main > * { animation: page-in .7s var(--ease-out) both; }
#main > *:nth-child(2) { animation-delay: .07s; }
#main > *:nth-child(3) { animation-delay: .14s; }
#main > *:nth-child(4) { animation-delay: .2s; }
#main > *:nth-child(n + 5) { animation-delay: .26s; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }

.assistant-bubble { animation: msg-in .4s var(--ease-out) both; }
.assistant-map {
  align-self: flex-start;
  margin-top: -2px;
  text-decoration: none;
  animation: msg-in .4s var(--ease-out) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes msg-in-user { from { opacity: 0; transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Coarse pointers (phones/tablets): no hover lift that “sticks”; short press feedback instead. */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { box-shadow: none; }
  .btn:active { transform: scale(.98); }
  .btn--primary:active { box-shadow: var(--shadow-cta); }
  .card:hover, .quick a:hover, .req:hover { border-color: var(--line); }
  html { scroll-behavior: auto; } /* native inertia feels smoother than CSS smooth on iOS */
}