/*
 * The directory pages (tasks/growth/milestones/10, M10-X4): /sectors, a
 * sector, an industry, /stocks, an index, a list, a screen, and the /lists and
 * /screens hubs. One file for all of them because they share one shape — a
 * trail, a title and a paragraph of template sentences, then ruled sections
 * of tables and link lists in a column (index R18f), set from the page's left
 * edge like every other page of reading (/indicators). The trail sits on a
 * hairline like the company header's utility row, and the paragraph is the
 * serif standfirst (tasks/redesign, D14). A page family splits out of here
 * only when it grows an arrangement the others do not have.
 *
 * Tables are `shared/data_table` and `.data-table` in `.table-scroll`, which
 * scroll in their own box on a phone; the link lists are `.link-columns`
 * (pages/content.css).
 */
@layer pages {
  .directory {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-inline-size: 90rem;

    & > .breadcrumbs {
      margin: 0;
      padding-block-end: var(--space-xs);
      border-block-end: var(--rule-hairline);
    }

    & > .page-meta {
      margin-block: 0;
    }
  }

  .directory__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    & > .heading {
      margin-block-end: 0;
    }

    /* The standfirst: the intro sentence, at the company header's size. */
    & > .prose {
      font-size: var(--text-lead);
      line-height: var(--leading-lead);
    }
  }

  /* A sector's industries, or any list of pages, under its heading. */
  .directory__group {
    & > .heading {
      margin-block-end: var(--space-xs);
    }
  }

  /* How many companies a linked page lists, after its name. */
  .directory__count {
    margin-inline-start: var(--space-3xs);
    color: var(--color-ink-subtle);
    font-size: var(--text-ui-sm);
  }

  /* The day's five biggest gains beside its five biggest losses, one above
     the other on a phone. */
  .directory__movers-lists {
    display: grid;
    gap: var(--space-md) var(--space-xl);
    margin-block-start: var(--space-sm);

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* /stocks' letters: a wrapping row of caps links, each at least a finger
     wide on touch. */
  .directory__letters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-sm);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;

    & a {
      display: inline-flex;
      justify-content: center;
      min-inline-size: var(--space-lg);

      @media (pointer: coarse) {
        min-block-size: var(--target-min);
        align-items: center;
      }
    }
  }

  /* A hub's line under each page's name. */
  .directory__description {
    display: block;
    color: var(--color-ink-subtle);
    font-size: var(--text-ui-sm);
  }

  /* A screen's own actions under its table: e-mail on change, or its lock. */
  .directory__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    font-size: var(--text-ui-sm);
  }
}