/* Resets, the page itself, the focus outline, and the skip link. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  [hidden] { display: none !important; }

  html, body { height: 100%; margin: 0; }

  /* The root paints the theme's page color, so the area under the safe-area
     insets (behind a system navigation bar) is never the browser's white. */
  html { background: var(--surface-page); }

  body {
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
    background: var(--surface-page);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
  }

  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

  a:focus-visible, button:focus-visible, main:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }

  .skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 8px 12px;
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    transform: translateY(-200%);
  }
  .skip:focus { transform: none; }
}