@layer components {
  .page-header {
    --padding: 2ch;
    --space: 1.25ch;

    align-items: center;
    color: var(--color-text-subtle);
    display: flex;
    gap: var(--space);
    font-size: var(--txt-small);
    margin-block: calc(var(--panel-padding) * -1) 1ch;
    margin-inline: calc(var(--panel-padding) * -1);
    padding-block-start: var(--padding);
    padding-inline-end: var(--padding);

    &:not(.timeline &) {
      @media (max-width: 480px) {
        padding-inline-start: var(--space);

        .page-header__badge {
          display: none;
        }
      }
    }
  }

  .page-header__meta {
    align-items: flex-end;
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    font-family: var(--font-mono);
    text-align: start;

    span {
      padding-block: 0.25ch;

      &:not(:first-child) {
        border-inline-start: 1px solid var(--color-ink-lighter);
        padding-inline-start: var(--space);
      }

      &:not(:last-child) {
        padding-inline-end: var(--space);
      }
    }
  }

  .page-header__badge {
    block-size: 2.5em;
    border: 1px solid var(--color-theme-light);
    border-inline-start: 0;
    border-radius: 0 2px 2px 0;
    color: var(--color-theme);
    display: grid;
    font-size: var(--txt-small);
    font-weight: bold;
    inline-size: fit-content;
    padding-inline: 2ch;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;

    & + .avatar {
      margin-inline-start: -2.4ch;
    }
  }

  .page-header__menu {
    margin-inline-start: auto;
    position: relative;
  }

  .page-header__menu-button {
    --btn-size: 2rem;

    &:hover,
    &:focus-visible {
      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }

    .icon,
    img {
      inline-size: 100%;
    }
  }
}