/* Campaign scorecard on the Overview (#31): the latest score out of 10, its areas, the change since the
   previous assessment and the trend.

   No inline styles (the CSP is style-src 'self'), so every size comes from an attribute or a class:
   - an area bar's width comes from its row's data-score: ten attribute rules below, exact, no JS;
   - a trend column's height comes from its sc-h-N class (the nearest 5%), which desk.js refines to the exact
     data-fill through an inline --fill (applyGeometry);
   - tone comes from data-level on the element itself: critical, warning, good use --bad, --warn, --good.
   The 4px tone stripe is an inset shadow: it follows the card's rounded corners with no overflow: hidden,
   which would clip the links' focus rings (a 4px-tall ::before can't keep a 16px corner radius). */

.sc[data-level="critical"], .sc [data-level="critical"] { --sc-tone: var(--bad); --sc-tone-bg: var(--bad-bg); }
.sc[data-level="warning"], .sc [data-level="warning"] { --sc-tone: var(--warn); --sc-tone-bg: var(--warn-bg); }
.sc[data-level="good"], .sc [data-level="good"] { --sc-tone: var(--good); --sc-tone-bg: var(--good-bg); }

/* The card. One column in source order (head, headline, areas, foot); two columns from 768px. */
.sc {
  gap: 20px;
  padding-top: 24px;
  box-shadow:
    inset 0 4px 0 var(--sc-tone, var(--pending)),
    var(--shadow-2);
}
.sc.is-empty {
  gap: 10px;
}
.sc-head h2 {
  margin: 0;
}
.sc-subtitle {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--ink-3);
}
.sc-empty {
  margin: 0;
  color: var(--ink-2);
}
.sc-error {
  min-width: 0;
  overflow-wrap: anywhere; /* a quoted cell is cut to 40 characters, but one unbroken token is still wide */
}

/* The headline: the big score, its level, the total and date, the change, the trend and the record link. */
.sc-headline {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}
.sc-score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.sc-score {
  flex: none;
  margin: 0;
  color: var(--sc-tone);
  font: 760 clamp(56px, 9vw, 84px) / 0.9 var(--display);
  letter-spacing: -0.04em;
}
.sc-score-den {
  margin-left: 0.04em;
  font-size: 0.38em;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--ink-3);
}
.sc-meta {
  flex: 1 1 180px;
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 4px;
}
.sc-chip {
  margin-bottom: 2px;
  color: var(--sc-tone);
  background: var(--sc-tone-bg);
}
.sc-total-line,
.sc-delta,
.sc-first,
.sc-record {
  margin: 0;
}
.sc-total-line {
  font-size: 15px;
  color: var(--ink-2);
}
.sc-total-line strong {
  font-weight: 750;
  color: var(--ink);
}
.sc-delta {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-3); /* flat: no glyph, muted */
}
.sc-delta[data-direction="up"] {
  color: var(--good);
}
.sc-delta[data-direction="down"] {
  color: var(--bad);
}
.sc-delta-glyph {
  font-size: 0.8em;
}
.sc-first {
  font-size: 14px;
  color: var(--ink-3);
}
.sc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em; /* a flex item drops its leading space, so this keeps the arrow off the words */
  min-height: 44px; /* a tap target on a phone */
  font-weight: 650;
}

/* The trend: one column per assessment on an absolute 0-10 scale, never rescaled to the min and max, so a
   small move looks small; each column fills a faint full-height track, as each area's bar does. The columns
   spread to the plot's width, which the two end labels set when there are only a few; then the first and
   last column sit over their labels. */
.sc-trend {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
.sc-trend-caption {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-2);
}
.sc-trend-plot {
  display: inline-grid;
  gap: 6px;
  max-width: 100%;
}
.sc-trend-cols {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.sc-trend-point {
  display: flex;
  align-items: flex-end;
  flex: none;
  width: 14px;
  height: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--surface-3);
}
.sc-trend-col {
  display: block;
  width: 100%;
  height: var(--fill, 0%);
  border-radius: inherit;
  /* an older total is only a height to a sighted reader, so it keeps 3:1 against its track (WCAG 1.4.11):
     3.3:1 light, 4.0:1 dark; the latest column still stands out in the level's hue */
  background: color-mix(in oklab, var(--ink-3) 80%, transparent);
}
.sc-trend-point.is-latest .sc-trend-col {
  background: var(--sc-tone);
}
.sc-trend-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-3);
  white-space: nowrap;
}

/* The areas: name and weight, then the bar and the score (one line from 768px). */
.sc-areas {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.sc-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3ch;
  grid-template-areas: "name name" "bar score";
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}
.sc-area-name {
  grid-area: name;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}
.sc-area-weight {
  font-size: 13.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.sc-bar {
  grid-area: bar;
  display: block;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.sc-bar-fill {
  display: block;
  width: var(--sc-fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--sc-tone);
}
.sc-area-score {
  grid-area: score;
  text-align: right;
  font: 760 18px / 1 var(--display);
  color: var(--ink);
}
.sc-area[data-score="1"] { --sc-fill: 10%; }
.sc-area[data-score="2"] { --sc-fill: 20%; }
.sc-area[data-score="3"] { --sc-fill: 30%; }
.sc-area[data-score="4"] { --sc-fill: 40%; }
.sc-area[data-score="5"] { --sc-fill: 50%; }
.sc-area[data-score="6"] { --sc-fill: 60%; }
.sc-area[data-score="7"] { --sc-fill: 70%; }
.sc-area[data-score="8"] { --sc-fill: 80%; }
.sc-area[data-score="9"] { --sc-fill: 90%; }
.sc-area[data-score="10"] { --sc-fill: 100%; }

/* The footer: what the colours mean, and the scores file. */
.sc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-2);
}
.sc-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sc-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sc-tone);
}
.sc-source-link {
  font-size: 14px;
}

@media (min-width: 768px) {
  /* grid-area only here, where the areas exist: on a grid without them it would add implicit columns */
  .sc.is-scored {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    grid-template-areas: "head head" "headline areas" "foot foot";
    align-items: start;
    column-gap: 32px;
  }
  .sc-head { grid-area: head; }
  .sc-headline { grid-area: headline; }
  .sc-foot { grid-area: foot; }
  .sc-areas {
    grid-area: areas;
    padding-top: 0;
    border-top: 0;
  }
  .sc-area {
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 3ch;
    grid-template-areas: "name bar score";
    gap: 0 14px;
  }
}
@media (min-width: 1024px) {
  .sc.is-scored {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }
  .sc-area {
    grid-template-columns: minmax(120px, 300px) minmax(0, 1fr) 3ch; /* the eight names, weight included, on one line */
  }
}

@keyframes sc-grow {
  from {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sc-bar-fill {
    transform-origin: left center;
    animation: sc-grow 500ms var(--ease-out) both;
  }
}

/* No-JS trend heights, the nearest 5%; desk.js replaces each with the exact data-fill. */
.sc-h-0 { --fill: 0%; }
.sc-h-5 { --fill: 5%; }
.sc-h-10 { --fill: 10%; }
.sc-h-15 { --fill: 15%; }
.sc-h-20 { --fill: 20%; }
.sc-h-25 { --fill: 25%; }
.sc-h-30 { --fill: 30%; }
.sc-h-35 { --fill: 35%; }
.sc-h-40 { --fill: 40%; }
.sc-h-45 { --fill: 45%; }
.sc-h-50 { --fill: 50%; }
.sc-h-55 { --fill: 55%; }
.sc-h-60 { --fill: 60%; }
.sc-h-65 { --fill: 65%; }
.sc-h-70 { --fill: 70%; }
.sc-h-75 { --fill: 75%; }
.sc-h-80 { --fill: 80%; }
.sc-h-85 { --fill: 85%; }
.sc-h-90 { --fill: 90%; }
.sc-h-95 { --fill: 95%; }
.sc-h-100 { --fill: 100%; }