/* styles/sections/figure-note.css
 * The one-line figure caption the Product Leadership frames draw under the decision timeline,
 * the rework figure and the stack diagram (figure-caption nG0Ro with the local "label mono 12"
 * override): a 12/500 mono label, 0.2 tracking, then a 13px muted line, 8 apart in a row from D
 * and stacked 4 apart on M, 8 below the figure. The shared .figure-caption fixes its label at
 * 11px in the artifacts layer, so these captions use this class. --inverse retones on fern. */
@layer sections {
  .figure-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-top: 8px;
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .figure-note__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.2px;
    color: var(--ink);
  }

  .figure-note--inverse {
    color: var(--mist-2);
  }

  .figure-note--inverse .figure-note__label {
    color: var(--white);
  }

  @media (min-width: 900px) {
    .figure-note {
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
    }

    .figure-note__label {
      flex: none;
    }
  }
}