/* Loaded only by /ornek-rapor.

 * The shared stylesheet is what every one of the site's pages pays for on first paint, so a
 * component used by exactly one page does not belong in it. With twenty-odd interior pages still
 * to write, putting each page's own components here is the difference between a stylesheet that
 * stays honest about its weight and one that quietly doubles.
 */

/* ======================= report document ======================= */

/* The sample report is set as a document: numbered sections separated by rules, a measure that
 * stays readable, and data in definition lists rather than marketing cards. It should look like
 * the thing it is showing, not like the home page with different words. */

.report__section {
  padding-block: clamp(var(--space-7), 4vw, var(--space-9));
  border-top: 1px solid var(--border);
}

.report__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}

.report__no {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.report__section > .shell > p { max-width: 68ch; }

/* ---- data completeness ---- */

.coverage { list-style: none; margin: var(--space-5) 0 0; padding: 0; }

.coverage__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.coverage__name { font-weight: 500; }

.coverage__state {
  justify-self: end;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* A partial category is marked, not hidden. It is the most credible row on the page. */
.is-partial .coverage__state { color: var(--accent); }

.coverage__note {
  grid-column: 1 / -1;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 66ch;
}

/* ---- per-category blocks ---- */

.catblock {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.catblock:last-child { border-bottom: 0; }
.catblock h3 { font-size: var(--text-lg); }

/* ---- recommended checks ---- */

.checks {
  margin: var(--space-5) 0 0;
  padding-left: 1.4rem;
  max-width: 68ch;
}

.checks li { padding: var(--space-2) 0; color: var(--fg-muted); }
.checks li::marker { font-family: var(--font-data); color: var(--accent); font-size: 0.85em; }