/**
 * root Design System - documentation styles: status strips
 *
 * Linked by `scripts/_docs-shell.mjs` on the pages that use them: the status band opens
 * the home page, the roadmap and quality; the stats grid opens brand and accessibility;
 * the conformance strip closes the home page and the showcase; the gates table cell is
 * quality's. They were in the home page's own sheet and the roadmap's until measuring
 * showed both matched far more pages than that (ADR-047) - `page-home.css` matched on
 * seventy pages, `page-roadmap.css` on two - which is what sent these rules here rather
 * than to either. Same constraints as the rest of the shell: zero CSS classes - element,
 * `[data-part]` and attribute selectors only - zero inline styles, and every value a root
 * foundation token.
 */

/* ── The bento ──────────────────────────────────────────────────────────── */
/* Every group of cards on the site is one grid, laid out the same way: equal columns,
   `dense` packing, and the cards with more to say spanning two of them. The span is
   `[data-span="wide"]`, written at build time from the length of the card's own note
   (`bentoSpan()` in `_docs-shell.mjs`) - so it follows the content rather than a list of
   positions, which is what the home page's grid used to be and which meant nothing as
   soon as a figure moved.

   `dense` is what makes a mix of widths read as a considered layout rather than as a
   hole: a two-column card that does not fit leaves a gap the normal flow carries forward
   onto every card after it, and `dense` backfills it with the next card that does fit. */
:is([data-part="bento"], [data-part="stats"], [data-part="status"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-auto-flow: dense;
  gap: var(--root-s--md);

  /* One card, everywhere. Card paints its ground with `--root-c--neutral-100` at full
     strength, which mirrors to a saturated indigo in the dark scheme - a grid of those is
     a block of color where the site's own prose says the ground is left unmixed on
     purpose. The gap is tighter than a content card's: a label and a number are one
     two-line block, not two stacked paragraphs. */
  > article[is="root-card"] {
    --root-card--background-color: var(--docs-surface);
    --root-card--border-color: var(--docs-border);
    --root-card--gap: var(--root-s--2xs);

    display: flex;
    flex-flow: column nowrap;
  }

  > [data-span="wide"] {
    grid-column: span 2;
  }
}

[data-part="status"] {
  margin-block: var(--root-s--2xl) var(--root-s--xl);

  p + p {
    margin-block-start: var(--root-s--2xs);
    font-size: var(--root-t--font-size--sm);
    color: var(--docs-muted);
  }
}

[data-part="status-label"] {
  display: flex;
  gap: var(--root-s--2xs);
  align-items: center;
  margin: 0;
  font-size: var(--root-t--font-size--sm);
  font-weight: 600;
  color: var(--docs-text);
}

/* The tiles are `root-card` (ADR-030), so the padding, the ground, the frame, the radius
   and the shadow are the component's, and the grid that lays them out is the shared bento
   above. What is left here is what a *figure* card holds: the label's own type, and the
   number's. */
[data-part="stats"] {
  margin: var(--root-s--xl) 0;

  article[is="root-card"] header {
    font-size: var(--root-t--font-size--xs);
    font-weight: 400;
    color: var(--docs-muted);

    /* A foundation page names the token in the card, where the home page names a plain
       noun: the name is code, and reads as code. */
    code {
      font-family: var(--root-t--font-family--mono);
      word-break: break-word;
    }
  }

  [data-part="figure"] {
    margin: 0;
    font-size: var(--root-t--font-size--2xl);
    font-weight: 600;
  }
}

/* The section is the grid now, so a heading inside it is a cell unless it is told to span:
   "Scale basis" came out as a fourth column beside the three cards it names. The direct
   child is the *anchor*, not the heading - `withHeadingAnchors` wraps every h2 and h3 on
   every page in a link to itself (ADR-029) - so a selector for the heading alone matches
   nothing here, which is exactly how the first version of this rule missed. */
[data-part="stats"] > :is(h2, h3, [data-part="heading-anchor"]) {
  grid-column: 1 / -1;
  margin: 0;
}

/* The conformance strip that closes the showcase: three counted badges and the sentence
   that says where their working is shown. A row, wrapping, with the sentence taking the
   whole width under them rather than squeezing between two badges. */
[data-part="conformance"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--root-s--2xs) var(--root-s--sm);
  align-items: center;
  padding-block-start: var(--root-t--gap);
  margin-block-start: var(--root-t--gap);
  border-block-start: 1px solid var(--docs-border);

  p {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--root-t--font-size--sm);
    color: var(--docs-muted);
  }
}

/* A command is one token, and a table column narrow enough to break it in the middle
   turns `pnpm lint:readmes` into two lines that read as two commands. */
[data-part="gates"] td code {
  white-space: nowrap;
}