/* SEO.md generator — additions on top of design-md.css. Reuses the dm-* tool
   shell and only styles the SEO-specific report pieces: score, checklist and
   recommendations. Colours come from the shared design tokens. */

.seo-score-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.seo-score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 3px solid var(--border);
  line-height: 1;
}
.seo-score strong {
  font-size: 30px;
  font-weight: 650;
  color: var(--foreground);
}
.seo-score small {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted-foreground);
}
.seo-score-good { border-color: #1f9d55; }
.seo-score-good strong { color: #1f9d55; }
.seo-score-ok { border-color: #c67c05; }
.seo-score-ok strong { color: #c67c05; }
.seo-score-bad { border-color: #d1443b; }
.seo-score-bad strong { color: #d1443b; }

.seo-score-meta h3 {
  margin: 0 0 6px;
}
.seo-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.seo-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.seo-pill-pass { color: #1f9d55; border-color: color-mix(in srgb, #1f9d55 40%, transparent); }
.seo-pill-warn { color: #c67c05; border-color: color-mix(in srgb, #c67c05 40%, transparent); }
.seo-pill-fail { color: #d1443b; border-color: color-mix(in srgb, #d1443b 40%, transparent); }

.seo-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.seo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--background);
}
.seo-check-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.seo-check-pass { border-left: 3px solid #1f9d55; }
.seo-check-pass .seo-check-mark { background: #1f9d55; }
.seo-check-warn { border-left: 3px solid #c67c05; }
.seo-check-warn .seo-check-mark { background: #c67c05; }
.seo-check-fail { border-left: 3px solid #d1443b; }
.seo-check-fail .seo-check-mark { background: #d1443b; }

.seo-check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.seo-check-body strong {
  font-size: 14px;
  color: var(--foreground);
}
.seo-check-body small {
  font-size: 13px;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.seo-recs {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.seo-recs li {
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* .dm-preview sets display:grid, which overrides the UA [hidden] rule — so the
   Report panel would stay visible under the Edit tab. Restore hiding for both
   tab panels explicitly (the attribute selector outranks the base class). */
.dm-preview[hidden],
.dm-file[hidden] {
  display: none;
}

/* Field values (title, description, canonical) can be long — let them wrap
   rather than stretching the definition list. */
.dm-preview .dm-type-row dd {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .seo-score-block { flex-direction: column; align-items: flex-start; }
}