/**
 * Diffs surface chrome — layout rhythm + Pierre bridge only.
 *
 * Color, type, radius, and shadow come from the app token system in
 * `apps/web/src/styles.css` (`--background`, `--foreground`, `--primary`, …).
 * Legacy `--rv-*` names remain as thin aliases so the dense review Views keep
 * reading through `var(--rv-…)` without owning a second palette.
 */

[data-review-surface] {
  /* Ground */
  --rv-bg: var(--background);
  --rv-bg-subtle: color-mix(in srgb, var(--muted) 55%, var(--background));
  --rv-bg-inset: var(--muted);
  --rv-bg-raised: var(--card);
  --rv-bg-hover: var(--muted);
  --rv-bg-active: var(--accent);

  /* Hairlines */
  --rv-line: var(--border);
  --rv-edge: color-mix(in srgb, var(--border) 100%, var(--foreground) 8%);

  /* Type */
  --rv-fg: var(--foreground);
  --rv-fg-muted: var(--muted-foreground);
  --rv-fg-subtle: var(--text-tertiary);

  /* Accent — app primary, spent sparingly for selection / focus / CTA */
  --rv-accent: var(--primary);
  --rv-accent-fg: var(--primary-foreground);
  --rv-accent-wash: color-mix(in srgb, var(--primary) 12%, transparent);

  /* Diff + status semantics */
  --rv-add: var(--success-foreground);
  --rv-add-wash: color-mix(in srgb, var(--success) 14%, transparent);
  --rv-add-gutter: color-mix(in srgb, var(--success) 22%, transparent);
  --rv-del: var(--destructive-foreground);
  --rv-del-wash: color-mix(in srgb, var(--destructive) 14%, transparent);
  --rv-del-gutter: color-mix(in srgb, var(--destructive) 22%, transparent);
  --rv-warn: var(--warning-foreground);
  --rv-danger: var(--destructive);
  --rv-open: var(--success-foreground);
  --rv-merged: var(--info-foreground);
  --rv-closed: var(--text-tertiary);
  --rv-draft: var(--text-tertiary);

  /* Geometry — follow app radius / shadow scales */
  --rv-radius: var(--radius-md);
  --rv-radius-lg: var(--radius-lg);
  --rv-shadow-raised: var(--shadow-xs);
  --rv-shadow-pop: var(--shadow-md);

  /* Rhythm unique to the review reading surface */
  --rv-topbar-h: 44px;
  --rv-rail-w: 248px;
  --rv-meta-w: 264px;
  --rv-code-line-h: 18px;

  --rv-font-ui: var(--font-sans);
  --rv-font-mono: var(--font-mono);

  background: var(--rv-bg);
  color: var(--rv-fg);
  font-family: var(--rv-font-ui);
  font-feature-settings: 'cv01', 'ss03';
}

/* Digits that stack in columns (line counts, stats, check tallies) must align. */
[data-review-surface] [data-rv-num] {
  font-variant-numeric: tabular-nums;
}

[data-review-surface] :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-radius: 3px;
}

/* Pierre's CodeView paints its own chrome; align it to app diff washes. */
[data-review-surface] [data-rv-code] {
  --pierre-diff-addition-bg: var(--rv-add-wash);
  --pierre-diff-deletion-bg: var(--rv-del-wash);
  font-family: var(--rv-font-mono);
  font-size: 12px;
  line-height: var(--rv-code-line-h);
}
