/*
 * THE BAND OWNS THE SPACE UNDER ITSELF — one rhythm, whether the band is
 * rendered on a hand-rolled screen or by `PageContent`, so a shell adds nothing
 * after it.
 *
 * Both rows lay out a pair of intrinsically-sized children, and each states
 * which side gives way: the TITLE shrinks and wraps, the verbs keep their width,
 * because a CTA pushed off the row is unreachable while a wrapped title is
 * merely taller. `flex-wrap` is the floor under that rule, not a competing one —
 * a title shrinks only as far as its longest word, and past that a row that
 * cannot wrap has nowhere to put the excess but off the edge.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding-bottom: var(--lotics-space-16);
  }

  /* `min-height` rather than `height`: a fixed height cannot absorb a wrap, so
     the row that most needs to grow would be the one forbidden to. */
  .lotics-page-header__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    min-height: 64px;
    gap: var(--lotics-space-12);
    padding-bottom: var(--lotics-space-16);
  }

  .lotics-page-header__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
  }

  /*
   * An auto margin rather than the row's `justify-content`, because
   * justification is applied PER LINE: once the row wraps, the second line holds
   * only this half and `space-between` packs one item at the START, dropping it
   * to the left edge under the title on exactly the narrow frame the wrap exists
   * for. An auto margin right-aligns it on the shared line and on a line of its
   * own alike.
   */
  .lotics-page-header__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .lotics-page-header__title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  .lotics-page-header__title-row[data-described] {
    align-items: flex-start;
  }

  .lotics-page-header__title-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-page-header__title-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* The pair is written whole because its two halves land on different
     elements: a wrapper is floorless and needs the shrink, a run of text is
     floored at its longest WORD and needs the floor. */
  .lotics-page-header__title {
    flex-shrink: 1;
    min-width: 0;
  }

  .lotics-page-header__trailing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
  }

  .lotics-page-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }
}