/*
 * Small labelled boxes, square except the news impact score — the one pill
 * left on the site (tasks/redesign, D1).
 *
 *   .badge--score-1 … 5   a news article's impact score (`news_score_classes`).
 *                         One ramp: 1–2 recede into the page, 3 is present, 4
 *                         carries the accent, 5 is solid and unmistakable.
 *   .badge                on its own, a news article's coverage flag
 *   .ticker               a ticker symbol set beside a company name
 *   .badge--score-band    a score on its scale, "F-score 7/9": its name in caps
 *                         over the value in serif, in the band the caller
 *                         judged it (`score_badge_tag`)
 *   .filing-flag          something a filing revealed, toned by severity, with
 *                         the filing's date (`filing_flag_tag`)
 *   .badge--kind-*        what a changelog entry is: new, improved or data;
 *                         a fix is the plain badge (`changelog_kind_tag`)
 */
@layer components {
  .badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-block-size: 1.625rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge--score {
    min-inline-size: 1.625rem;
    padding-inline: 0;
    border-radius: var(--radius-pill);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
  }

  .badge--score-1 {
    color: var(--color-ink-subtle);
  }

  .badge--score-2 {
    color: var(--color-ink-muted);
  }

  .badge--score-3 {
    border-color: var(--color-rule-strong);
    color: var(--color-ink);
  }

  .badge--score-4 {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .badge--score-5 {
    border-color: var(--color-ink);
    background-color: var(--color-ink);
    color: var(--color-ink-inverse);
  }

  .badge--kind-new {
    border-color: var(--color-accent-line);
    background-color: var(--color-accent-tint);
    color: var(--color-accent-strong);
  }

  .badge--kind-improved {
    border-color: var(--color-gain-line);
    background-color: var(--color-gain-tint);
    color: var(--color-gain-strong);
  }

  .badge--kind-data {
    border-color: var(--color-rule-strong);
    color: var(--color-ink);
  }

  /* A score on its scale: not a chip but a figure — its name as a caps
     label over the value in serif, the band colouring the value alone
     (tasks/redesign, D10). */
  .badge--score-band {
    display: inline-grid;
    justify-items: start;
    gap: var(--space-3xs);
    min-block-size: 0;
    padding: 0;
    border: 0;
    color: var(--color-ink-muted);
    white-space: normal;
  }

  .badge__name {
    font-size: var(--text-meta-xs);
  }

  .badge__value {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-stat);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .badge--band-good .badge__value {
    color: var(--color-gain);
  }

  .badge--band-neutral .badge__value {
    color: var(--color-ink);
  }

  .badge--band-weak .badge__value {
    color: var(--color-loss);
  }

  /* A flag from a filing: its words, linking to the filing, and its date. The
     tone is the severity (R18c) — white caps on brick for critical and high,
     brick caps on the paper otherwise — never the kind. */
  .filing-flag {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-sm);
    border: var(--rule-width) solid;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--text-caps);
    line-height: var(--leading-caps);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .filing-flag--severe {
    border-color: var(--color-loss);
    background-color: var(--color-loss);
    color: var(--color-ink-inverse);
  }

  .filing-flag--caution {
    border-color: var(--color-loss);
    color: var(--color-loss);
  }

  .filing-flag__label {
    color: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .filing-flag__date {
    font-size: var(--text-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .ticker {
    display: inline-flex;
    align-items: center;
    block-size: 1.625rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    vertical-align: middle;
  }
}