body {
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
}

.root {
  margin: 0.5rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

header.layout {
  display: flex;
  justify-content: space-between;

  & .logo {
    height: 65px;
    background-color: transparent;
  }
}

main {
  margin-top: 0.5rem;
}

header.page {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1rem 0;

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }

  h1,
  h2 {
    font-size: 1.75rem;
  }
}

nav.application {
  display: flex;
  flex-direction: column;
  align-items: end;

  &>h3.current-user {
    margin: 0;
  }

  &>ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 0 2rem;

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .current {
      font-weight: bold;
    }

    .disabled {
      color: var(--clr-canvas-text-disabled);
      pointer-events: disabled;
    }
  }
}

nav.client {
  --_link-bg: var(--clr-main-800);
  --_link-text: light-dark(var(--clr-main-200), var(--clr-main-400));

  display: flex;
  gap: .5rem;
  margin-top: 1rem;

  &>a {
    background-color: var(--_link-bg);
    color: var(--_link-text) !important;
    padding-inline: 1rem;
    padding-block: .5rem;
    border: solid 1px var(--button-primary-active-border-color);
    border-radius: 5px;
    text-decoration: none !important;
    outline-offset: 3px;
    transition:
      background-color .2s cubic-bezier(.25, 0, .3, 1),
      color .2s cubic-bezier(.25, 0, .3, 1);

    &[href]:is(.current, :hover, :focus-visible) {
      --_link-bg: var(--clr-canvas);
      --_link-text: var(--clr-canvas-text);
    }

    &:not([href]) {
      cursor: not-allowed;
      --_link-bg: transparent;
    }

    &.completed::before {
      content: '✓';
      margin-inline-end: .5rem;
    }
  }
}

@media(max-width: 480px) {
  nav.client {
    font-size: 90%;

    &>a {
      padding-inline: .5rem;
      padding-block: .333rem;
    }
  }
}

footer.layout {
  margin: 2rem 0;
}

@media print {
  @page {
    size: letter portrait;
    margin: 0;
  }
  .grid {
    display: block !important;
  }
  body {
    * {
      background-color: transparent !important;
    }
    h3 {
      font-size: 1.25rem !important;
    }
    font-size: 10pt !important;
    line-height: 1.05 !important;
    section {
      break-inside: avoid;
    }
  }
  nav.application,
  .action {
    display: none !important;
  }

  .card.client {
    display: none !important;
  }

}