/* Shared base layer for all Dr. Thump tools: reset, mobile shell, primitives. */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  /* Use svh (the *small* viewport height that Safari reserves when its
     toolbars are visible) so the layout stays put rather than shifting
     when the URL bar collapses. */
  min-height: 100svh;
  font-family: var(--font-rounded);
  color: var(--color-text-on-dark);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* single fixed screen, no scroll */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Full-viewport app shell that respects notches/home indicators.
   Clips any decorative bleed (e.g. the glow) so nothing extends the page or
   makes it pannable. Fixed overlays (intro, verdict card) are unaffected. */
.app {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reserve all four safe areas so layout never tucks under the notch or
     under the home indicator. Tools add their own inner spacing in .screen. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Primary action button, shared across tools. */
.btn-primary {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-cream);
  color: var(--color-button-text);
  cursor: pointer;
  touch-action: manipulation;
}
.btn-primary:disabled { cursor: default; }

/* Instruction-card "OK!" proceed button, shared by all four tools. Solid toy-
   green (the "go" color) so it reads as clearly tappable against the cream
   card, with white text, a chunky bottom lip, and a press-down + darken for
   tactile feedback. Self-sufficient (doesn't rely on .btn-primary), so it also
   styles the xray button, which carries only this class. Tune via --color-go*. */
.instruction-ok {
  margin-top: 8px;
  width: min(60vw, 200px);
  padding: 15px 0;
  font: 700 21px/1 var(--font-rounded);
  letter-spacing: 0.06em;
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-go);
  color: var(--color-go-text);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 5px 0 var(--color-go-edge), 0 9px 16px rgba(0, 0, 0, 0.28);
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease;
}
.instruction-ok:active {
  transform: translateY(3px);
  background: var(--color-go-edge);
  box-shadow: 0 2px 0 var(--color-go-edge), 0 5px 10px rgba(0, 0, 0, 0.28);
}

/* Tiny low-contrast disclaimer; in-flow at the bottom of the screen column.
   Sits naturally just above the safe-area inset reserved by .app — no
   absolute positioning, so it never gets clipped behind Safari's bottom
   toolbar. */
.footer-disclaimer {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
}