/* webscoreguru.com — functional floor for the score tool.
 *
 * The generated page styles the same class names in its own design language
 * and its rules win (it ships a later <style> block and heavier selectors).
 * Everything here exists only so the tool is legible if the build leaves a
 * container unstyled: layout, not identity. Colours come from the page via
 * currentColor and transparency — nothing here paints a brand.
 */

[hidden] { display: none !important; }

#wsg-status:empty,
#wsg-deep-status:empty { display: none; }

#wsg-score-number { font-variant-numeric: tabular-nums; line-height: 1; }

.wsg-cat + .wsg-cat { margin-top: 1.5rem; }

.wsg-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.wsg-cat-score { font-variant-numeric: tabular-nums; opacity: 0.7; }

.wsg-cat-blurb { margin: 0.25rem 0 0.5rem; opacity: 0.7; }

.wsg-cat-bar {
  display: block;
  height: 2px;
  background: currentColor;
  opacity: 0.2;
  margin: 0.5rem 0 0.75rem;
}

.wsg-cat-fill {
  display: block;
  height: 100%;
  background: currentColor;
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wsg-items { list-style: none; margin: 0; padding: 0; }

.wsg-item {
  display: grid;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 15%, transparent);
}

/* The pass/fail mark is drawn in the item's own colour rather than the
 * traffic-light red and green a tool like this usually reaches for: the page
 * has one signal colour and this must not introduce two more. */
.wsg-item-label::before {
  content: "—";
  display: inline-block;
  width: 1.2em;
  opacity: 0.55;
}

.wsg-pass > .wsg-item-label::before { content: "✓"; opacity: 0.9; }
.wsg-fail > .wsg-item-label::before { content: "×"; opacity: 0.9; }

.wsg-fail { opacity: 1; }
.wsg-pass { opacity: 0.75; }

.wsg-item-detail { opacity: 0.65; }
.wsg-item-fix { opacity: 0.9; }

@media (min-width: 40rem) {
  .wsg-item {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    align-items: start;
  }
  .wsg-item-label { grid-row: 1; grid-column: 1; }
  .wsg-item-detail { grid-row: 1; grid-column: 2; }
  .wsg-item-fix { grid-row: 2; grid-column: 2; }
}

/* Only used when the build failed to ship #wsg-result at all. */
.wsg-result-fallback {
  max-width: 46rem;
  margin: 3rem auto;
  padding: 0 1.25rem;
}