/* Base element styles and layout primitives. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  /* The canvas is the page's own ground, so nothing white shows before the body paints or behind a view transition. */
  html { background-color: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* A page on its way (nav.js): a thin line at the top, growing; still when motion is reduced. */
  html[data-loading]::after {
    content: "";
    position: fixed;
    z-index: 1000;
    inset: env(safe-area-inset-top, 0px) 0 auto;
    height: 3px;
    background: var(--accent);
    transform-origin: left;
    animation: page-on-its-way 2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  @keyframes page-on-its-way { from { scale: 0.05 1; } to { scale: 0.9 1; } }
  @media (prefers-reduced-motion: reduce) { html[data-loading]::after { animation: none; opacity: 0.7; } }
  ::view-transition { background-color: var(--bg); }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    margin: 0;
    line-height: var(--leading-tight);
    font-weight: 720;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  /* Page titles and big numbers use the display face; section headings stay in the reading face. */
  h1, .display {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    font-optical-sizing: auto;
  }

  p { margin: 0; text-wrap: pretty; }

  a { color: var(--accent); text-underline-offset: 0.18em; }

  code { font-size: 0.85em; color: var(--ink-2); }

  /* A placeholder is text: the hint color, never faded further (a browser's own grey or opacity
     falls under 4.5:1 on a dark field). */
  ::placeholder { color: var(--ink-3); opacity: 1; }

  kbd {
    font: inherit;
    font-size: 0.8em;
    font-weight: 650;
    padding: 0.05em 0.45em;
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-2);
  }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* A heading the page focuses after a change (tabindex -1) shows no ring to a pointer or a finger. */
  [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

  /* hidden wins over a component's own display (a row that leaves under reduced motion). */
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  /* <details> opens like every part that shows and hides (motion.md): its content grows into
     place and fades in; a browser that cannot grow to "auto" still fades. */
  /* Sizes may move to and from "auto" (a message line, a details' content). */
  :root { interpolate-size: allow-keywords; }
  @supports selector(::details-content) {
    details::details-content {
      block-size: 0;
      opacity: 0;
      overflow: clip;
      transition: block-size var(--reveal) var(--ease), opacity var(--base) var(--ease), content-visibility var(--reveal) allow-discrete;
    }
    details[open]::details-content { block-size: auto; opacity: 1; }
  }

  ::selection { background: var(--accent-soft); color: var(--ink); }

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

@layer layout {
  .shell {
    width: 100%;
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }

  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
}

@layer utilities {
  .muted { color: var(--ink-2); }

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

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border-radius: var(--radius-control);
    z-index: 10;
  }
  .skip-link:focus { top: var(--space-4); }
}