@layer components {
  /* Checks */
  .issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .issue { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0; padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-size: 1.4rem; }
  .issue.is-error { border-color: var(--error-line); background: var(--error-surface); }
  .issue.is-warning { border-color: var(--warning-line); background: var(--warning-surface); }
  .issue.is-clean { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok-ink); font-weight: 550; }
  .issue-body { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; }
  .issue-screen { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; }
  .issue-source { font-size: 1.15rem; color: var(--ink-3); }
}