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

  body {
    margin: 0;
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-canvas);
    line-height: 1.5;
  }
}

@layer components {
  .navbar {
    border-block-end: var(--border);
    background: var(--color-canvas);
    position: relative;
    z-index: var(--z-nav);
  }

  .navbar__skip {
    &:focus-visible {
      position: absolute;
      inset-block-start: var(--space-3);
      inset-inline-start: var(--space-5);
      clip: auto;
      clip-path: none;
      inline-size: auto;
      block-size: auto;
      overflow: visible;
      white-space: nowrap;
      z-index: 1;
    }
  }

  .navbar__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
  }

  .navbar__brand {
    font-weight: var(--weight-bold);
    font-size: var(--text-medium);
    text-decoration: none;
    color: var(--color-ink-dark);
  }

  .navbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--target-recommended);
    min-block-size: var(--target-recommended);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .navbar__hamburger {
    display: block;
    inline-size: 1.25rem;
    block-size: 2px;
    background: var(--color-ink);
    position: relative;

    &::before,
    &::after {
      content: "";
      display: block;
      inline-size: 1.25rem;
      block-size: 2px;
      background: var(--color-ink);
      position: absolute;
      inset-inline-start: 0;
    }

    &::before { inset-block-start: -6px; }
    &::after { inset-block-start: 6px; }
  }

  .navbar__menu {
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border-block-start: var(--border);
  }

  .navbar__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .navbar__link {
    display: flex;
    align-items: center;
    min-block-size: var(--target-min);
    text-decoration: none;
    color: var(--color-ink-medium);
    font-size: var(--text-base);
    padding-block: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;

    &:hover,
    &.active {
      color: var(--color-ink-dark);
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
      border-radius: var(--radius-sm);
    }
  }

  .navbar__session {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-block-start: var(--border);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
  }

  .navbar__user {
    color: var(--color-ink-medium);
    font-size: var(--text-base);
    padding-block: var(--space-2);
  }

  @media (min-width: 640px) {
    .navbar {
      display: flex;
      align-items: center;
      padding-block: var(--space-3);
      padding-inline: var(--space-5);
    }

    .navbar__bar {
      padding: 0;
      flex-shrink: 0;
    }

    .navbar__brand {
      margin-inline-end: var(--space-4);
    }

    .navbar__toggle {
      display: none;
    }

    .navbar__menu {
      /* !important overrides the UA [hidden] { display: none !important } */
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      padding: 0;
      border-block-start: none;
    }

    .navbar__links {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
    }

    .navbar__link {
      padding-block: 0;
    }

    .navbar__session {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
      border-block-start: none;
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }
}

@layer modules {
  .container {
    max-inline-size: 64rem;
    margin-inline: auto;
    padding: var(--space-5);
  }

  .inline-form {
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--inline-space);
    margin-block-start: var(--block-space-half);
    background: var(--color-highlight);
  }

  .inline-form__fields {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .inline-form__fields > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .inline-form__actions {
    display: flex;
    gap: var(--inline-space-half);
    align-items: center;
    margin-block-start: var(--space-3);
  }
}