/* Fact-check verdict component (S068) — `web/templates/partials/verdict.html`. Typography
 * first, no rainbow scale: the gauge is a row of neutral segments with exactly one filled
 * in one of three tones (`--accent`, `--false`, `--text`), and the verdict word carries the
 * same tone as text, so the reader never depends on colour alone (`docs/design-brief.md`,
 * "5-step scale ... typography + a small neutral gauge, not 5 rainbow colors"). Introduces
 * no colour literal outside `tokens.css`'s tokens — the palette ceiling is
 * `docs/design-brief.md`'s "max 6 colors total ... exactly one accent" (D-31: `design/` is
 * reference-only, so the mockups' inline values are transcribed into tokens, never copied
 * as literals). Layout is verified in a browser against the handoff mockup, not in
 * `cargo test` (D-33). */

/* `margin:2em 0` resolves against the aside's own 15px font-size (30px), not the
 * `--space-8` token (32px) — the mockup's off-token literal, same class as the eyebrow/
 * claim/gauge literals below. `padding` keeps `--space-5` (20px) block but drops to a
 * commented 22px inline: `design/design_handoff_agentblog/mockups/Article.dc.html:74`
 * (S077d review round 2, minor). */
.verdict {
  margin: 2em 0;
  padding: var(--space-5) 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  font-family: var(--sans);
  font-size: var(--size-ui);
  line-height: 1.55;
}

/* `.verdict <class>`, not the bare class: `app.css`'s `.wrap-main p` is `(0,1,1)` and every
 * paragraph of this card is selected by it, so the shell's system-page body copy (`--text-2`,
 * 1.55, `--space-5` bottom margin) would win `color`/`line-height`/`margin` outright — the
 * same override `post.css`'s `.article-header .eyebrow` and `.article-body p` already work
 * around (S068 review, round 2, major). `.verdict-claim` therefore also re-declares
 * `color: var(--text)`, which the mockup gets by inheritance
 * (`design/design_handoff_agentblog/mockups/Article.dc.html:76`: the claim carries no colour
 * override). */
.verdict .verdict-eyebrow {
  /* 10px, not `--space-3` (12px): mockup `:75` — S077d review round 1. */
  margin: 0 0 10px;
  font-family: var(--mono);
  /* 11px, not the shared `--size-mono` (12px): the mockup sets this eyebrow one size below
   * the mono scale, the same correction `post.css`'s citation superscripts already carry
   * (mockup `:69-70, :72`): mockup `:75` — S077d review round 1. */
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
}

.verdict .verdict-claim {
  /* 14px, not `--space-4` (16px): mockup `:76` — S077d review round 1. */
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: var(--size-reading);
  line-height: 1.4;
  color: var(--text);
}

.verdict-rating {
  display: flex;
  align-items: center;
  /* 14px, not the shared `--space-3` (12px):
   * `design/design_handoff_agentblog/mockups/Article.dc.html:77` (S077d). */
  gap: 14px;
  flex-wrap: wrap;
}

/* One box per point of the scale, whatever its length — the template derives the count from
 * `worst_rating..=best_rating`, never a hardcoded five here. Unfilled segments share one
 * neutral regardless of tone, which is the "no rainbow" requirement: only the single filled
 * segment ever carries `--accent`/`--false`/`--text`. `gap`/segment `width`/`height`/
 * `border-radius` are transcribed from `design/design_handoff_agentblog/mockups/
 * Article.dc.html:78-79`, off the 4px spacing scale by design (a hairline gauge). */
.verdict-gauge {
  display: inline-flex;
  gap: 3px;
}

.verdict-segment {
  width: 18px;
  height: 4px;
  border-radius: 1px;
  background: var(--line);
}

.verdict-segment-filled.verdict-tone-accent {
  background: var(--accent);
}

.verdict-segment-filled.verdict-tone-false {
  background: var(--false);
}

.verdict-segment-filled.verdict-tone-text {
  background: var(--text);
}

.verdict-word {
  font-weight: 500;
}

.verdict-word.verdict-tone-accent {
  color: var(--accent);
}

.verdict-word.verdict-tone-false {
  color: var(--false);
}

.verdict-word.verdict-tone-text {
  color: var(--text);
}

.verdict-note {
  color: var(--text-2);
}

.verdict .verdict-source {
  margin: var(--space-3) 0 0;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.verdict-source a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}