/*
 * SERVICE SEO - DESIGN SYSTEM (single canonical font and component hierarchy)
 * All 11 locales. Changes must agree with php-site/docs/DESIGN-SYSTEM.md.
 * The original main-page font uses system-ui, not a downloaded Google font.
 * This file is loaded on every page AFTER other feature styles.
 */
:root {
  --site-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --site-font-copy: 400;
  --site-font-ui: 500;
  --site-font-heading: 600;
  --site-text-tight: -.025em;
  --site-text-small: 12px;
  --site-text-normal: 16px;
  --site-text-line: 1.55;
}
html, body, button, input, select, textarea, dialog { font-family: var(--site-font); }
.checker, .checker-results, .checker-results :is(button, input, summary) {
  font-family: var(--site-font);
  font-synthesis: none;
}
.checker .checker-heading h2 {
  font-weight: var(--site-font-heading);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.checker .checker-heading p, .checker-results p {
  font-weight: var(--site-font-copy);
  letter-spacing: normal;
}
.checker-results :is(h3, h4) {
  font-family: var(--site-font);
  font-weight: var(--site-font-heading);
  letter-spacing: var(--site-text-tight);
  line-height: 1.2;
}
.checker-result-heading h3 { font-size: clamp(23px, 2.35vw, 32px); }
.checker-verdict > h4 { font-size: clamp(22px, 2.3vw, 28px); }
.checker-score-number strong {
  font-weight: 600;
  letter-spacing: -.045em;
}
.checker-grade, .checker-score-label, .checker-check-status, .checker-result-heading p > span {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.55;
}
.checker-results .checker-check-name,
.checker-results .checker-next li strong { font-weight: 550; font-size: 14px; }
.checker-results .checker-check-value { font-weight: 400; }
.checker-results .checker-count strong { font-weight: 550; }
.checker-results .checker-count span { font-weight: 400; }
.checker-results .checker-help .button { font-weight: 500; }
.checker-results .checker-next h4,
.checker-results .checker-help h4 { font-weight: 600; }
.checker-score-card { transition: background-color .2s ease, color .2s ease; }
.checker-results[data-level="good"] .checker-score-card {
  background: #19734f;
  color: #fff;
}
.checker-results[data-level="warning"] .checker-score-card {
  background: #f2ce58;
  color: #182219;
}
.checker-results[data-level="poor"] .checker-score-card {
  background: #bd4249;
  color: #fff;
}
.checker-results[data-level="critical"] .checker-score-card {
  background: #822b36;
  color: #fff;
}
.checker-results[data-level="unavailable"] .checker-score-card {
  background: #333b3b;
  color: #fff;
}
.checker-results:is([data-level="good"], [data-level="poor"], [data-level="critical"], [data-level="unavailable"])
  .checker-score-card :is(.checker-score-label, .checker-score-number > span, .checker-grade) {
  color: #fff;
}
.checker-results[data-level="warning"]
  .checker-score-card :is(.checker-score-label, .checker-score-number > span, .checker-grade) {
  color: #182219;
}
.checker-results[data-level="good"] .checker-grade::before { background: #c8ffdf; }
.checker-results[data-level="warning"] .checker-grade::before { background: #614709; }
.checker-results[data-level="poor"] .checker-grade::before,
.checker-results[data-level="critical"] .checker-grade::before { background: #fff0f0; }
.checker-results[data-level="unavailable"] .checker-grade::before { background: #e4e5e5; }
@media (max-width: 700px) {
  .checker .checker-heading h2 { font-size: clamp(29px, 8vw, 39px); }
  .checker-result-heading h3 { font-size: 23px; }
  .checker-verdict > h4 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .checker-score-card { transition: none; }
}