/* styles/primitives.css
 * Content primitives from board HmWBl: index, numeral, timecode, indexed row, attribution,
 * stat, meta line. Type size and family come from a t-* role on the element (pairings are in
 * REBUILD.md); this file owns tone, weight, case and spacing. Quotes use the testimonial
 * pattern (figure, blockquote, figcaption); .attribution styles the figcaption. */
@layer components {
  /* Index: mono ordinal (pair with t-mono-sm). Fern by default. */
  .index {
    font-weight: 500;
    letter-spacing: 0.6px;
    color: var(--fern);
    font-variant-numeric: tabular-nums;
  }

  .index--muted {
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-muted);
  }

  .index--inverse {
    font-weight: 400;
    letter-spacing: 0.2px;
    color: var(--white-70);
  }

  /* Numeral: display step number (pair with t-h4). Muted by default, fern when current.
     The board's ink 40% fails 3:1; --ink-48 is the closest value that passes. */
  .numeral {
    font-weight: 600;
    line-height: 1;
    color: var(--ink-48);
    font-variant-numeric: tabular-nums;
  }

  .numeral--current {
    color: var(--fern);
  }

  /* Timecode: "0:24  ·  Beat title" (pair with t-mono). Put the separators in the text. */
  .timecode {
    font-weight: 400;
    white-space: pre-wrap;
    color: var(--ink-muted);
  }

  .timecode--fern {
    color: var(--fern);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .timecode--inverse {
    letter-spacing: 0.2px;
    color: var(--white-70);
  }

  /* Indexed row: an li in an ol. Index + title (+ optional body) on a 1px rule. */
  .indexed-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-14);
    align-items: baseline;
    /* --indexed-row-pad (default 11px): a page sets e.g. 11px 10px where its frame draws the rule inside the pad */
    padding-block: var(--indexed-row-pad, 11px);
    border-bottom: 1px solid var(--line-2);
  }

  .indexed-row .index {
    font-weight: 400;
    letter-spacing: 0;
  }

  .indexed-row__title {
    font-weight: 600;
    color: var(--ink);
  }

  .indexed-row__body {
    grid-column: 2;
    margin-top: var(--space-4);
    color: var(--ink-2);
  }

  /* Muted: serif title on a soft rule (the Tools table of contents). */
  .indexed-row--muted {
    column-gap: var(--space-16);
    padding-block: 9px;
    border-bottom-color: var(--line);
  }

  .indexed-row--muted .indexed-row__title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
  }

  .indexed-row--muted .index {
    color: var(--ink-muted);
  }

  /* Attribution: the figcaption of a testimonial figure. Name over role; --logo adds a
     company mark and divider; --anonymous is one muted line. */
  .attribution {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .attribution__name {
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
  }

  .attribution__role {
    line-height: 1.2;
    color: var(--ink-muted);
  }

  /* Logo: a 100 x 29 mark, a 1px divider, then the person block, 14px apart. */
  .attribution--logo {
    flex-direction: row;
    align-items: center;
    gap: var(--space-14);
  }

  .attribution__logo {
    box-sizing: content-box;
    width: 100px;
    height: 29px;
    padding-right: var(--space-14);
    border-right: 1px solid var(--line);
    object-fit: contain;
  }

  .attribution__person {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .attribution--anonymous {
    color: var(--ink-muted);
  }

  /* Stat: display value (pair with a t-display-* or t-h2 role) over a muted caption. */
  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .stat__value {
    color: var(--fern);
  }

  .stat__caption {
    color: var(--ink-muted);
  }

  /* Meta line: mono caps items joined by "  ·  " (pair with t-mono-sm). */
  .meta-line {
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: pre-wrap;
    color: var(--ink-55);
  }

  .meta-line--inverse {
    color: var(--white-85);
  }

  /* Inverse surfaces retone the family without a modifier on every child: index and
     timecode at white 70%, meta line at white 85%. Pieces the board does not draw on fern
     use mist for secondary text and field-edge for rules. */
  :is(.surface--inverse, .surface--inverse-textured) {
    .index,
    .timecode {
      color: var(--white-70);
    }

    .meta-line {
      color: var(--white-85);
    }

    .numeral,
    .attribution__role,
    .attribution--anonymous,
    .stat__caption,
    .indexed-row__body {
      color: var(--mist);
    }

    .numeral--current,
    .attribution__name,
    .indexed-row__title,
    .stat__value {
      color: var(--white);
    }

    .indexed-row {
      border-bottom-color: var(--field-edge);
    }

    .attribution__logo {
      border-right-color: var(--field-edge);
    }
  }
}