/* UTME Lab — base layer: reset, body, typography, focus, safe area.
 * Loaded before tokens/components so specificity stays flat. */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    height: 100%;
  }

  body {
    margin: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-strong);
    background-color: var(--color-bg-app);
  }

  /* Keyboard focus — visible, consistent outline (a11y decision, DESIGN §6) */
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Safe area for notched phones (iPhone, Android) */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Top inset, for a header that paints into the status-bar strip.
     Pair with `viewport-fit=cover` (see `app.rs`), without which every
     `env(safe-area-inset-top)` resolves to 0 and this is just the base
     padding. The top inset is *added* to the header's normal padding rather
     than replacing it, so a notch never eats into the title. */
  .pt-safe {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  }

  /* Bottom inset for a bar that already has its own padding: the inset is
     *added* to that padding rather than replacing it. Needed once
     `viewport-fit=cover` is on — `h-dvh` then spans the full screen including
     the iPhone home indicator, so a bottom bar with no inset sits under it.
     Mirrors `.pt-safe` for the other edge. */
  .pb-safe-2 {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Sticky header variant used by the exam chrome. `position: sticky` alone is
     visually a no-op here — the exam shell is `h-dvh` and does not scroll — but
     it makes the header viewport-constrained, which is the condition Safari
     26 uses to extend an element's background up into the top bar
     (WebKit Bugzilla, cited at arpit.blog 2025-11-09).

     `theme-color` would be the obvious way to tint the status bar, but iOS
     Safari 26 dropped support for it outright, so the extension of the
     header's own background is the mechanism that actually works on iPhone. */
  .chrome-top {
    position: sticky;
    top: 0;
  }

  button {
    font-family: inherit;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}