/*
 * The Shell: the navbar and the page container that wrap every Screen.
 *
 * Breakpoints follow the Figma frames — mobile 393, tablet 834, desktop 1440.
 * 1280 is the file's declared `breakpoint/xl`; 768 is the tablet boundary.
 */

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

/* The UA rule for [hidden] is display:none at the lowest precedence, so any
   class setting a display value silently unhides the element. Screens and
   panels are toggled entirely through [hidden], so it has to win. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

/* -- Navbar ----------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--navbar-height);
  padding-inline: var(--space-5);
  background: var(--color-white);
}

.navbar__inner {
  display: flex;
  /* Figma centres the logo on mobile (393) and tablet (834) and pins it left
     on desktop (1440). The flip is keyed to the file's declared
     `breakpoint/xl: 1280` — note that is the breakpoint, not the point where
     the 1280 container itself starts to bind, which is 1440 once the 80px
     gutters are counted. Between the two the design describes no frame. */
  justify-content: center;
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
}

.navbar__home {
  display: block;
  line-height: 0;
  border-radius: var(--radius-xl);
}

.navbar__home:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
}

.navbar__logo {
  display: block;
  width: 144px;
  height: 48px;
}

/* -- Page ------------------------------------------------------------- */

/* Padding sits on the outer element and the 1280 cap on the inner one, so the
   content box is a true 1280 at desktop rather than 1280 minus the gutters. */
.page {
  padding-inline: var(--space-5);
  padding-block: var(--space-5) var(--space-20);
}

.page__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .navbar {
    padding-inline: var(--space-10);
  }

  .page {
    padding-inline: var(--space-10);
  }
}

@media (min-width: 1280px) {
  .navbar {
    padding-inline: var(--space-20);
  }

  .navbar__inner {
    justify-content: flex-start;
  }

  .page {
    padding-inline: var(--space-20);
  }
}