/* The bar across the top of the sheet: wordmark, nav tabs, theme, account.
   Below 70rem the tabs and the theme switch fold into a <details> disclosure
   (they no longer fit beside a long handle); above it the disclosure's
   content is always shown and its summary hidden, so one set of links serves
   both widths without JavaScript. */
@layer layout {
  .header {
    --header-gutter: calc(var(--inline-space) * 1.25);

    position: relative;
    display: flex;
    align-items: stretch;
    min-block-size: var(--bar-height);
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-bar);
    font-size: var(--text-sm);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-medium);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    white-space: nowrap;

    a {
      text-decoration: none;
    }

    :focus-visible {
      outline-offset: calc(var(--rule-width) * -4);
    }
  }

  .header__wordmark {
    display: flex;
    align-items: center;
    padding-inline: var(--header-gutter);
    border-inline-end: var(--rule-width) solid var(--color-rule);
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.02em;
  }

  .header__slash {
    color: var(--color-accent);
  }

  .header__menu {
    display: flex;
    flex-grow: 1;
  }

  .header__toggle {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding-inline: var(--header-gutter);
    color: var(--color-ink-dim);
    cursor: pointer;
    list-style: none;

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

    &::after {
      content: "+";
    }

    [open] > &::after {
      content: "−";
    }

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

  /* Phone: the open menu drops below the bar as a column of tabs, with the
     theme buttons in a row underneath. */
  .header__drawer {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-bar);
  }

  .header__nav {
    display: flex;
    flex-direction: column;
  }

  .header__tab {
    display: flex;
    align-items: center;
    min-block-size: var(--bar-height);
    padding-inline: var(--header-gutter);
    color: var(--color-ink-dim);

    &[aria-current] {
      color: var(--color-ink);
      box-shadow: inset 0 calc(var(--rule-width) * -3) 0 var(--color-accent);
    }
  }

  /* The theme switch: a disclosure of its own whose content is one form, a
     button per theme. On a phone it is the last row of the open menu and
     opens in place; inline it is a narrow cell with a drop-down. The pressed
     theme is marked with a square in ink, not red: red is for the active tab. */
  .header__theme-menu {
    border-block-start: var(--rule-width) solid var(--color-hairline);
  }

  .header__toggle--theme {
    min-block-size: var(--bar-height);

    &::after,
    [open] > &::after {
      content: "\25BE" / "";
    }

    [open] > & {
      color: var(--color-ink);
    }
  }

  .header__themes {
    display: flex;
    flex-direction: column;
    border-block-start: var(--rule-width) solid var(--color-hairline);
  }

  .header__theme {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    min-block-size: 2.75rem;
    padding-inline: var(--header-gutter);
    border: 0;
    background: none;
    color: var(--color-ink-dim);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;

    & + & {
      border-block-start: var(--rule-width) solid var(--color-hairline);
    }

    &::before {
      content: "\25A0" / "";
      visibility: hidden;
    }

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

    &[aria-pressed="true"] {
      color: var(--color-ink);

      &::before {
        visibility: visible;
      }
    }
  }

  /* The account slot shrinks and clips, so even an over-long handle never
     pushes the bar wider than a phone. The handle is set at normal width in
     its own case: it is a name, not a label. Below 48rem a signed-in account
     takes a strip of its own under the bar, so the handle shows in full. */
  .header__wordmark,
  .header__menu {
    flex-shrink: 0;
  }

  .header__account {
    display: flex;
    min-inline-size: 0;
    overflow: hidden;
    margin-inline-start: auto;
    border-inline-start: var(--rule-width) solid var(--color-rule);
  }

  .header__sign-in,
  .header__handle,
  .header__sign-out {
    display: flex;
    align-items: center;
    padding-inline: var(--header-gutter);
  }

  .header__handle {
    display: block;
    flex-grow: 1;
    align-content: center;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-stretch: var(--stretch-normal);
    letter-spacing: normal;
    text-transform: none;
  }

  .header__sign-out-form {
    display: flex;
  }

  .header__sign-out {
    block-size: 100%;
    border: 0;
    border-inline-start: var(--rule-width) solid var(--color-rule);
    background: none;
    color: var(--color-ink-dim);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;

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

  @media (width < 48rem) {
    .header {
      flex-wrap: wrap;
    }

    .header__wordmark,
    .header__menu {
      min-block-size: var(--bar-height);
    }

    .header__account:has(.header__handle) {
      flex-basis: 100%;
      min-block-size: 2.75rem;
      border-inline-start: 0;
      border-block-start: var(--rule-width) solid var(--color-hairline);
    }
  }

  @media (width >= 48rem) {
    .header {
      --header-gutter: calc(var(--inline-space) * 2.5);
    }
  }

  /* Three tabs (four for an admin), the theme cell and a 20-character
     handle fit inline from 70rem only with the gutters tightened. */
  @media (width >= 70rem) {
    /* Without ::details-content the disclosure stays, which still works. */
    @supports selector(::details-content) {
      .header {
        --header-gutter: calc(var(--inline-space) * 1.5);
      }

      .header__menu > .header__toggle {
        display: none;
      }

      .header__menu::details-content {
        content-visibility: visible;
        display: flex;
        flex-grow: 1;
      }

      .header__drawer {
        position: static;
        flex-grow: 1;
        flex-direction: row;
        border: 0;
      }

      .header__nav {
        flex-direction: row;
      }

      .header__theme-menu {
        position: relative;
        display: flex;
        margin-inline-start: auto;
        border-block-start: 0;
        border-inline-start: var(--rule-width) solid var(--color-rule);
      }

      .header__themes {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-end: calc(var(--rule-width) * -1);
        z-index: 1;
        min-inline-size: calc(100% + var(--rule-width) * 2);
        border: var(--rule-width) solid var(--color-rule);
        background-color: var(--color-bar);
      }
    }
  }
}