@import "./tokens.css";

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  text-wrap: balance;
  font-variation-settings: "opsz" 96, "wdth" 92;
}
p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.page { overflow-x: clip; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--paper-3); color: var(--on-paper);
  padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Surfaces */
.surface-ink { background: var(--ink-950); color: var(--on-ink); }
.surface-paper { background: var(--paper); color: var(--on-paper); }

/* Film grain — shared texture that ties ink sections together */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Mono labels — the clinical "chart annotation" voice */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
}

.tabular { font-variant-numeric: tabular-nums; }

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

.scroll-progress {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft), var(--dawn));
}

/* ==========================================================================
   Web + app ergonomics
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-x: none; }
input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
a, button { touch-action: manipulation; }

/* Installed (standalone) app: no browser chrome, so respect the notch and status bar. */
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  p, blockquote, input, .fcta__addr, .foot__email { user-select: text; -webkit-user-select: text; }
}

/* Touch devices: bigger targets, no hover-only motion that would "stick" after a tap. */
@media (pointer: coarse) {
  .cw__tabs button { min-height: 40px; padding-inline: 14px; }
  .cw__accept { min-height: 40px; padding-inline: 14px; }
  .tm__list button { min-height: 48px; }
  .nav__trigger, .platform__progress button { min-height: 44px; }
  .foot__field button { width: 44px; height: 44px; }
}
@media (hover: none) {
  .btn:hover .btn__icon,
  .res__row:hover .res__go,
  .eco__ehr li:hover .eco__ehrname,
  .klas:hover { transform: none; }
  .res__row:hover .res__go { background: none; color: inherit; }
  .textlink { background-size: 100% 1px; }
}