/* ==========================================================================
   Reset + document defaults
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--surface);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Stops the grey flash on tap in Android WebView. */
  -webkit-tap-highlight-color: transparent;

  /* Prevents the whole page rubber-banding behind the app shell. */
  overscroll-behavior-y: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Any author-level `display` rule outranks the UA stylesheet's
   `[hidden] { display: none }`, which silently un-hides elements such as
   badges and banners. Restore the attribute's meaning. */
[hidden] {
  display: none !important;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

ul,
ol {
  padding-inline-start: 1.25rem;
}

/* ==========================================================================
   Focus
   --------------------------------------------------------------------------
   The old stylesheet removed outlines with `outline:none` and never replaced
   them, leaving the app unusable by keyboard. :focus-visible keeps the ring
   for keyboard users without showing it on touch.
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: calc(var(--safe-top) + var(--space-2));
}

.stack > * + * {
  margin-top: var(--space-4);
}

.text-muted {
  color: var(--muted);
  font-size: var(--text-sm);
}

.text-center {
  text-align: center;
}

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.app-shell {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  padding-inline: max(var(--space-4), var(--safe-left)) max(var(--space-4), var(--safe-right));
  padding-top: calc(var(--safe-top) + var(--space-3));
  padding-bottom: calc(var(--safe-bottom) + var(--space-6));
}

.app-shell--wide {
  max-width: var(--wide-max);
}

/* Just enough to clear the fixed bottom navigation, plus one gap. Anything
   more reads as dead space under the last card. */
.app-shell--with-nav {
  padding-bottom: calc(var(--safe-bottom) + var(--nav-height) + var(--space-4));
}

@media (min-width: 48rem) {
  .app-shell {
    padding-inline: var(--space-6);
    padding-top: calc(var(--safe-top) + var(--space-6));
  }
}

/* From here the tab bar becomes a left rail, so the content clears it on the
   left instead of reserving space at the bottom. The max() centres the column
   in the space beside the rail once the viewport is wide enough, and falls
   back to sitting flush against the rail when it is not. */
@media (min-width: 64rem) {
  .app-shell--with-nav {
    padding-bottom: var(--space-10);
    /* 100% (the body box), not 100vw -- 100vw includes the scrollbar and
       pushes the layout one pixel wide. */
    margin-left: max(var(--rail-width), calc((100% - var(--app-max)) / 2));
    margin-right: auto;
  }
}

.page-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.page-subtitle {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}