/*
 * 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 cards of tables
 * and link lists in a column (index R18f). 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;
    margin-inline: auto;

    & > .breadcrumbs {
      margin-block-end: calc(var(--space-md) * -1);
    }

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

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

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

  /* 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 targets, 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-ui);

    & 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);
  }
}