/* ============================================================================
   scored-line — THE signature motif.

   A horizontal rule with a marker positioned along it. It is a scorecard row
   abstracted, and it means exactly one thing everywhere it appears on this
   site and in the dashboard: A MEASUREMENT ON A SCALE.

   Used for: statistics, evaluation criteria, the process stepper, the coverage
   map's market list, and every score display in the dashboard.

   The marker position is set with `--pos` (0–100) as an inline custom property
   on the element, written server-side. It is never animated during scroll and
   never recalculated on a parent during a drag.
   ========================================================================= */

.scored {
  --pos: 0;
  --track: var(--border);
  --mark: var(--slate);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
}

.scored__label {
  font-size: var(--fs-body);
  color: var(--fg);
  min-inline-size: 0;
}
.scored__value {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* The track. A 1px rule the full width, with the marker sitting on it. */
.scored__track {
  grid-column: 1 / -1;
  position: relative;
  block-size: 9px;
  margin-block-start: var(--sp-2);
}
.scored__track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 4px;
  block-size: 1px;
  background: var(--track);
}
/* Filled portion — reads as "how far along the scale". */
.scored__fill {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: calc(var(--pos) * 1%);
  background: var(--mark);
}
/* The marker. 9px so it clears the 8px minimum for a chart mark. */
.scored__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--pos) * 1%);
  inline-size: 9px;
  block-size: 9px;
  margin-inline-start: -4.5px;
  border-radius: 50%;
  background: var(--mark);
  /* 2px surface ring so overlapping marks stay separable. */
  box-shadow: 0 0 0 2px var(--bg);
}
/* Benchmark tick — a second, quieter measurement on the same scale. */
.scored__benchmark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--bench, 0) * 1%);
  inline-size: 1px;
  block-size: 9px;
  background: var(--border-strong);
}

/* The value and any status flag share the inline-end cell so they sit on one
   baseline rather than stacking onto a second row. */
.scored__end {
  display: inline-flex; align-items: baseline; gap: var(--sp-4);
  justify-content: flex-end; flex-wrap: wrap;
}

/* --- Emphasis: ONLY the one key number on a page wears ember. Everything else
       keeps the muted voice, so the three-ember-per-viewport rule holds. --- */
.scored--key { --mark: var(--ember); }
.scored--key .scored__value { color: var(--ember-deep); font-weight: var(--weight-semi); }

/* --- Status variants. Always paired with an icon or a word, never colour
       alone — see .scored__flag below. -------------------------------------- */
.scored--good     { --mark: var(--good); }
.scored--warning  { --mark: var(--warning); }
.scored--serious  { --mark: var(--serious); }
.scored--critical { --mark: var(--critical); }

.scored__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.scored__flag svg { inline-size: 14px; block-size: 14px; flex: none; }

/* --- Stat variant: a headline figure sitting on its scale. --------------- */
.scored--stat { gap: var(--sp-2); padding-block: 0; }
.scored--stat .scored__label { grid-column: 1 / -1; order: 3; }
.scored--stat .scored__track { order: 2; }

/* --- Criteria list: rules between rows, not boxes. ----------------------- */
.scored-list {
  display: grid;
  gap: 0;
  border-block-start: var(--rule);
}
.scored-list > .scored {
  border-block-end: var(--rule);
}
@media (min-width: 768px) {
  .scored-list--2col {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
  }
  /* The top rule belongs to the list; each column needs its own. */
  .scored-list--2col > .scored:nth-child(2) { border-block-start: 0; }
}

/* --- Dark ground (stat bands, dashboard panels). ------------------------- */
.band--ink .scored,
.scored--on-dark {
  --track: var(--border-on-dark);
  --mark: var(--fg-on-dark);
}
.band--ink .scored--key,
.scored--on-dark.scored--key { --mark: var(--ember); }
.band--ink .scored__mark,
.scored--on-dark .scored__mark { box-shadow: 0 0 0 2px var(--ink); }