/**
 * root Design System - documentation styles: the brand page
 *
 * Linked by `scripts/_docs-shell.mjs` on `overview/brand.html` and nowhere else. The three
 * marks and the frames they sit on, built by `scripts/_brand-docs.mjs`.
 *
 * The page had no sheet of its own: `[data-part="marks"]`, `[data-part="mark"]` and
 * `[data-part="mark-canvas"]` matched nothing anywhere in the shell, so the three figures
 * stacked in flow at whatever size their SVG happened to carry - measured, 341x407 for the
 * mark alone and 682px wide for the Webidoo wordmark - each one taller than the viewport
 * band it was meant to sit in, with the `<figure>`'s own user-agent margin as the only
 * spacing between a mark and the sentence explaining it.
 *
 * 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.
 */

/* Three across where there is room, one under the other where there is not - the same
   `auto-fit` the foundations' scheme columns and the home page's bento use, so the marks
   reflow on the same rule as everything else on the site. */
[data-part="marks"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: var(--root-s--lg);

  margin-block: var(--root-s--lg);
}

/* A `<figure>`, so the user agent's 40px inline margin comes off: the grid above places
   the cell and the figure fills it. */
[data-part="mark"] {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--root-s--sm);

  margin: 0;
}

/* The frame the mark is read on: a surface of its own, so a mark whose ink is
   `currentColor` is seen against a ground rather than against the prose. The mark is
   centred in it because a logo on a plate is centred - which is the one place on this
   page that is true, and why `_prose.css`'s start-alignment is not what this wants. */
[data-part="mark-canvas"] {
  display: grid;
  place-items: center;

  padding: var(--root-s--xl);
  min-block-size: 16rem;

  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--root-r--xl);

  /* The size the mark is actually read at, and the reason this file exists. `max-block-size`
     rather than a width: the three marks have three different aspect ratios - a lockup is
     wide, the mark alone is nearly square, the Webidoo wordmark is a long strip - so capping
     the height is what makes them look like three marks at one size instead of three
     different sizes. The width follows, bounded by the frame. */
  > svg {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    max-block-size: 8rem;
  }
}

[data-part="mark"] > figcaption {
  color: var(--docs-muted);
  font-size: var(--root-t--font-size--sm);
  line-height: var(--root-t--line-height--base);
}