/*
 * 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 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);
    }
  }

  .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. */
  .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);
    }

    & .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 >= 1024px) {
        margin-block-start: 0;
      }
    }
  }

  /* A signed-in reader's Account and Log out do not fit beside the wordmark
     on a phone, so below 640px the bar is three rows — the wordmark and its
     dateline, the buttons across the full width, the search. A visitor's
     Log in and call to action still sit beside the wordmark (owner,
     2026-10-31). */
  .masthead__bar:has(.masthead__dateline):has(.masthead__search):has(.masthead__account) {
    @media (width < 640px) {
      grid-template-areas:
        "brand"
        "dateline"
        "actions"
        "search";
      grid-template-columns: minmax(0, 1fr);

      & .masthead__actions {
        justify-self: stretch;
        margin-block-start: var(--space-sm);

        & > *,
        & .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;
          }
        }
      }
    }
  }

  .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 signed-in reader's Account, Log out and call
     to action do not fit beside the wordmark on one line. 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.

     A visitor's Log in and call to action must not wrap, or the button drops
     a row below the wordmark: on a phone they sit closer, and the button is
     narrower, to make room for the mark beside the word (owner,
     2026-10-31) — at 375px that row was 5px short. */
  .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);
      }
    }
  }

  /* 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 and Log in: quiet caps links beside the call to action. */
  .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 the wordmark and "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;
  }
}