@layer base {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  :where(#main) {
    inline-size: 100dvw;
    margin-inline: auto;
    max-inline-size: 100dvw;
    text-align: center;
  }

  :where(#footer) {
    max-inline-size: 100dvw;
  }

  :where(#header) {
    position: relative;
    z-index: var(--z-nav);
    height: var(--header-height, auto);
    border-bottom: 1px solid var(--color-ink-lightest);
    background-color: var(--color-canvas);

    & a {
      transition: color 0.2s ease-in-out;
    }

    & .dropdown {
      position: relative;

      & summary {
        list-style: none;
        user-select: none;

        &::-webkit-details-marker {
          display: none;
        }

        &:hover {
          color: var(--color-link);
        }
      }

      &[open] summary .chevron {
        transform: rotate(180deg);
      }

      & summary .chevron {
        transition: transform 0.2s ease-in-out;
      }

      & .dropdown__menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--color-canvas);
        border: 1px solid var(--color-ink-lightest);
        border-radius: 0.5rem;
        padding: 0.25rem;
        box-shadow: var(--shadow);
        min-inline-size: max-content;
        z-index: 10;
        margin-top: 0;

        &.dropdown__menu--right {
          left: auto;
          right: 0;
          max-inline-size: 12rem;
        }

        & a, & button {
          text-decoration: none;
          color: var(--color-ink);
          padding: 0.5rem 0.75rem;
          border-radius: 0.25rem;
          transition: background-color 0.2s ease-in-out;

          &:hover {
            background-color: var(--color-ink-lightest);
          }
        }
      }
    }

    & .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      background-color: var(--color-ink-lightest);
      color: var(--color-ink-medium);
      border-radius: 50%;
      font-size: var(--text-small);
      font-weight: bold;
    }
  }

  :is(#header, #footer) {
    @media print {
      display: none;
    }
  }
}