/* ==========================================================================
   Quality Score diagnostics — tool-only CSS.

   Shared components (jbm-panel, jbm-pill, jbm-stat, jbm-list, jbm-callout)
   come from jbm-tools.css. Only the band scale and the factor cards are new.
   ========================================================================== */

/* ── the documented band scale ───────────────────────────────────────────── */

.jbm-bandlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--jbm-line);
  border-radius: 10px;
  overflow: hidden;
}

.jbm-bandlist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  padding: .7rem .9rem;
  border-top: 1px solid var(--jbm-line);
}
.jbm-bandlist__row:first-child { border-top: 0; }

.jbm-bandlist__row:nth-child(odd) { background: var(--jbm-surface); }

.jbm-bandlist__range {
  flex: 0 0 auto;
  font-size: .8rem;
  white-space: nowrap;
}

.jbm-bandlist__what {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: .85rem;
  color: var(--jbm-ink-soft);
  line-height: 1.5;
}

/* ── one factor card ─────────────────────────────────────────────────────── */

.jbm-diag {
  padding: 1rem;
  border: 1px solid var(--jbm-line);
  border-radius: 10px;
  background: var(--jbm-surface);
}

.jbm-diag + .jbm-diag { margin-top: .75rem; }

/* A factor that needs work is called out. A factor Google has not reported is
   distinguished from one rated good: an absent reading is not a good reading. */
.jbm-diag[data-state="bad"] { border-left: 3px solid var(--jbm-warn); }
.jbm-diag[data-state="unsure"] { border-style: dashed; }
.jbm-diag[data-state="good"] { border-left: 3px solid var(--jbm-good); }

.jbm-diag__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.jbm-diag__name {
  font-weight: 700;
  color: #fff;
  font-size: .98rem;
  line-height: 1.3;
  min-width: 0;
}

.jbm-diag__pill { flex: none; }

.jbm-diag__q {
  margin: .4rem 0 0;
  font-size: .84rem;
  color: var(--jbm-muted);
  font-style: italic;
  line-height: 1.5;
}

.jbm-diag__body {
  margin: .6rem 0 0;
  font-size: .87rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-diag__body b { color: #fff; }

.jbm-diag__fixes {
  margin: .6rem 0 0;
  padding-left: 1.15rem;
  font-size: .85rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}

.jbm-diag__fixes li { margin: .25rem 0; }
.jbm-diag__fixes li::marker { color: var(--jbm-muted); }

/* ── the fix list ────────────────────────────────────────────────────────── */

[data-jbm-out="fixes"] li,
[data-jbm-out="costlist"] li {
  margin: .6rem 0;
  line-height: 1.6;
  color: var(--jbm-ink-soft);
}
[data-jbm-out="fixes"] li b,
[data-jbm-out="costlist"] li b { color: #fff; }
[data-jbm-out="fixes"] li::marker { color: var(--jbm-muted); }

@media (max-width: 560px) {
  .jbm-bandlist__row { flex-direction: column; align-items: flex-start; }
  .jbm-diag__top { align-items: flex-start; }
}