@layer base {
  html {
    scrollbar-color: var(--color-brand-tint) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    inline-size: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
  }

  body {
    background: var(--color-canvas);
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-block-start: var(--nav-height);

    /* The native shell provides its own top bar and the web nav is not
       rendered inside it, so the reserved nav space is just an empty gap. */
    &[data-platform~="native"] {
      padding-block-start: 0;
    }

    /* The Android app's tab bar is a pill floating over the bottom of the
       WebView (72px tall, 12px above the system nav bar), so the page needs
       room to scroll its last content out from under it. Some WebViews don't
       report the nav bar through `safe-area-inset-bottom`, hence the floor
       that assumes a 24px gesture bar. */
    &[data-platform~="android"] {
      --native-tab-bar-clearance: max(7rem, calc(6rem + env(safe-area-inset-bottom, 0px)));
      padding-block-end: var(--native-tab-bar-clearance);
    }

    /* The iOS app's pill floats the same way, 12pt above the home indicator.
       WKWebView already keeps the page clear of the home indicator (it insets
       its scroll view), so `safe-area-inset-bottom` only counts should the
       page ever extend under it. */
    &[data-platform~="ios"] {
      --native-tab-bar-clearance: calc(6rem + env(safe-area-inset-bottom, 0px));
      padding-block-end: var(--native-tab-bar-clearance);
    }
  }

  /* A grid item's `min-inline-size` defaults to its content, so a wide
     descendant — a slider track, a table, an input measured to a long
     placeholder — would push `main` past the viewport. Zero keeps the page
     the viewport's width and lets the content shrink or clip inside it. */
  main {
    inline-size: 100%;
    margin: 0 auto;
    max-inline-size: var(--content-max-inline-size);
    min-inline-size: 0;
    padding: 0 var(--gutter);
  }

  footer {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    inline-size: 100%;
    margin: 0 auto;
    max-inline-size: var(--content-max-inline-size);
    min-block-size: 100px;
    padding: 2rem var(--gutter);
  }
}