/*
 * The masthead (shared/_masthead; tasks/redesign, D3): the bar, the double
 * rule under it, and the section row. Not sticky — it scrolls away with the
 * page, as a printed page's would, and gives the 56–64px the old sticky bar
 * took back to the content. It sits on the page's own column, so its edges
 * line up with everything below it.
 *
 *   .masthead--home     the nameplate: dateline | wordmark | actions
 *   .masthead           inner pages: logo | search | actions
 *
 * Below 1024px the bar is two rows — the wordmark and the actions, then the
 * search at the full width (or the dateline): between the wordmark, its
 * dateline and the buttons, a search squeezed into the middle any narrower is
 * too short to read as the page's way in. Below 640px the buttons take a row
 * of their own under the wordmark and its dateline. Below 768px the section
 * row is one line that scrolls sideways inside itself, never the page.
 *
 * A component rather than layout: its links sit beside `.link`s, and `.link`
 * lives in this layer — in `layout` these rules would lose to it whatever
 * their specificity, because a later layer always wins.
 */
@layer components {
  /* `--masthead-bleed` is how far the double rule and the following strip's
     band hang past the masthead's text edge, on both ends; the text itself
     stays on the page's column. */
  .masthead {
    --masthead-bleed: var(--space-sm);

    padding-inline: var(--gutter);
  }

  .masthead__bar {
    display: grid;
    margin-inline: calc(-1 * var(--masthead-bleed));
    padding-inline: var(--masthead-bleed);
    grid-template-areas:
      "brand actions"
      "search search";
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-sm) calc(var(--space-sm) + var(--rule-double-height));
    background: var(--rule-double) bottom / 100% var(--rule-double-height) no-repeat;

    @media (width >= 768px) {
      column-gap: var(--space-xl);
      padding-block: var(--space-md) calc(var(--space-md) + var(--rule-double-height));
    }

    @media (width >= 1024px) {
      grid-template-areas: "brand search actions";
      grid-template-columns: 1fr minmax(0, 36rem) 1fr;
      column-gap: var(--space-4xl);
    }
  }

  .masthead--home .masthead__bar {
    grid-template-areas:
      "brand actions"
      "dateline dateline";

    @media (width >= 768px) {
      grid-template-areas: "dateline brand actions";
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    @media (width < 640px) {
      grid-template-areas:
        "brand"
        "dateline"
        "actions";
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-2xs);
    }
  }

  .masthead--home .masthead__brand {
    @media (width >= 768px) {
      justify-self: center;
    }
  }

  /* Every inner bar, and a signed-in reader's homepage, has the dateline
     under the wordmark (owner, 2026-10-04): the wordmark on the left, the
     search in the centre. The search and the actions span both rows, so they
     sit level with the middle of the two, not with the wordmark. Below
     1024px the dateline takes a row of its own, between the wordmark and the
     search, and below 640px so do the buttons. */
  .masthead__bar:has(.masthead__dateline):has(.masthead__search) {
    grid-template-areas:
      "brand actions"
      "dateline dateline"
      "search search";
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-2xs);

    @media (width >= 1024px) {
      grid-template-areas:
        "brand search actions"
        "dateline search actions";
      /* The wordmark's column is never narrower than the dateline on one
         line: near 1024px the search gives up the width, not the date. */
      grid-template-columns: minmax(max-content, 1fr) minmax(0, 36rem) 1fr;
      column-gap: var(--space-4xl);
    }

    @media (width < 640px) {
      grid-template-areas:
        "brand"
        "dateline"
        "actions"
        "search";
      grid-template-columns: minmax(0, 1fr);
    }

    & .masthead__brand {
      justify-self: start;
    }

    & .masthead__nameplate {
      font-size: var(--text-wordmark);
    }

    /* On its own row the search stands clear of the dateline above it. */
    & .masthead__search {
      margin-block-start: var(--space-md);

      @media (width < 640px) {
        margin-block-start: var(--space-sm);
      }

      @media (width >= 1024px) {
        margin-block-start: 0;
      }
    }
  }

  .masthead__brand {
    display: flex;
    grid-area: brand;
    align-items: center;
    gap: var(--space-xs);
  }

  .masthead__search {
    grid-area: search;
    inline-size: 100%;

    @media (width >= 1024px) {
      justify-self: center;
    }
  }

  .masthead__dateline {
    display: block;
    grid-area: dateline;
    min-block-size: var(--leading-caps);
    color: var(--color-ink-muted);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .masthead__dateline-skeleton {
    display: block;
    inline-size: 18rem;
    max-inline-size: 100%;
    --height: calc(var(--text-caps) * var(--leading-caps));
  }

  /* Wraps on a phone, where a free reader's Account, Log out and call to
     action can outrun the row. Only there: from 768px the grid sizes this
     column to its content, and a column that may wrap is one the grid
     squeezes until it does.

     Below 640px the buttons, signed in or out, share the full width of a row
     of their own: they do not fit beside the wordmark. */
  .masthead__actions {
    display: flex;
    grid-area: actions;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: var(--space-sm) var(--space-lg);

    @media (width < 768px) {
      flex-wrap: wrap;
      column-gap: var(--space-sm);

      & > .button {
        padding-inline: var(--space-sm);
      }
    }

    @media (width < 640px) {
      justify-self: stretch;
      column-gap: var(--space-xs);
      margin-block-start: var(--space-xs);

      & > *,
      & .masthead__account > * {
        flex: 1 1 0;
      }

      /* Log out is a `button_to`: its form takes the share, the button fills
         the form. */
      & .masthead__account > form {
        display: flex;

        & > .button {
          flex: 1;
        }
      }
    }
  }

  /* Signed in: "Account" and, close beside it, "Log out". */
  .masthead__account {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    & .button {
      white-space: nowrap;
    }
  }

  /* Pricing: a quiet caps link beside the buttons. */
  .masthead__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--color-link);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

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

  /* Pricing gives way on a phone, where the row holds the wordmark and the
     call to action; the footer still links it. */
  .masthead__link--wide {
    @media (width < 768px) {
      display: none;
    }
  }

  /* The word the call to action drops on a phone: "Create free account" is
     "Create account" there, so it fits beside "Log in". */
  .masthead__wide-word {
    @media (width < 768px) {
      display: none;
    }
  }

  /* The homepage's nameplate: the mark and the word, centred, larger. */
  .masthead__nameplate {
    display: inline-flex;
    align-items: baseline;
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;

    @media (width >= 768px) {
      font-size: var(--text-wordmark-masthead);
    }
  }

  /* Positioned, so the dot's screen-reader text — absolutely positioned —
     is clipped by the row's own scroll box rather than widening the page. */
  .masthead__sections {
    position: relative;
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-block-end: var(--rule-hairline);

    @media (width >= 1024px) {
      gap: var(--space-xl);
    }
  }

  .masthead__section {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: var(--target-min);
    border-block-end: 2px solid transparent;
    color: var(--color-link);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

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

    &[aria-current="page"] {
      border-block-end-color: var(--color-ink);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  /* The wordmark on inner pages: the mark and the word, in the serif. */
  .logo {
    display: inline-flex;
    align-items: baseline;
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  /* The market-map mark beside the wordmark, set as the lockup sets it: as
     tall as the word's ascenders, its foot on the baseline, a third of its
     height clear of the "s". Its colours are the logo's own, in the SVG, not
     tokens: the mark does not change with the palette. */
  .brand-mark {
    flex: none;
    block-size: 0.72em;
    inline-size: auto;
    margin-inline-end: 0.22em;
  }
}