/* figure.css: Figure (component 15). Owner: group B (P2.T5).
   Strip figure: label --type-label --text-secondary, value --type-figure tabular, change --type-caption with a 14 px trend icon, an
   optional 96 by 24 sparkline at the inline-end. Strip: figures separated by 1 px --border inline-start hairlines, --space-5 block and
   --space-7 inline padding, minimum 200 wide, in a region (--surface, --radius-region, 1 px --border). Exception line: a 56 px row. The
   whole figure is a link, focus ring inset. */
[data-component="figure"] { color: var(--text); }
a.figure,
a.figure-exception { text-decoration: none; }
a.figure:hover,
a.figure-exception:hover { text-decoration: none; }

a.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  box-sizing: border-box;
  min-inline-size: var(--size-field-short);
  padding-block: var(--space-5);
  padding-inline: var(--space-7);
  color: var(--text);
}
a.figure:hover,
a.figure[data-force="hover"] { background: var(--surface-hover); }
a.figure:active,
a.figure[data-force="active"] { background: var(--border); }
a.figure:focus-visible,
a.figure[data-force="focus-visible"],
a.figure-exception:focus-visible,
a.figure-exception[data-force="focus-visible"] {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--border-width-thick));
}
.figure__main { display: grid; flex: 1 1 auto; gap: var(--space-2); min-inline-size: 0; }
.figure__label { font: var(--type-label); color: var(--text-secondary); }
.figure__value { font: var(--type-figure); color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.figure__change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.figure__change[data-tone="good"] { color: var(--good); }
.figure__change[data-tone="critical"] { color: var(--critical); }
.figure__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.figure__breakdown-item { display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: none; }
.figure__programme { color: var(--text-secondary); }
.figure__breakdown-value { color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.figure__spark {
  flex: none;
  align-self: flex-end;
  margin-inline-start: auto;
  inline-size: var(--size-spark-w);
  block-size: var(--size-spark-h);
  color: var(--text-secondary);
}
.figure__spark svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.figure__spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The strip region. One row at wide, standard and narrow; two columns at tablet; one at small. */
.figure-strip {
  display: grid;
  inline-size: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--size-field-short), 1fr);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-region);
  overflow: hidden;
}
.figure-strip > a.figure + a.figure,
.figure-strip > .figure + .figure,
.figure-strip > [data-component] + [data-component] { border-inline-start: var(--border-width) solid var(--border); }
@media (width < 1024px) {
  .figure-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .figure-strip > :nth-child(odd) { border-inline-start: 0; }
  .figure-strip > :nth-child(n + 3) { border-block-start: var(--border-width) solid var(--border); }
}
@media (width < 768px) {
  .figure-strip { grid-template-columns: minmax(0, 1fr); }
  .figure-strip > * { border-inline-start: 0 !important; }
  .figure-strip > :nth-child(n + 2) { border-block-start: var(--border-width) solid var(--border); }
}

/* Exception line: leading severity icon, count in --type-section, the sentence, a chevron at the inline-end. */
.figure-exceptions {
  display: grid;
  inline-size: 100%;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-region);
  overflow: hidden;
}
.figure-exceptions > a.figure-exception + a.figure-exception { border-block-start: var(--border-width) solid var(--border); }
a.figure-exception {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  min-block-size: var(--size-header);
  padding: var(--space-5);
  background: var(--surface);
  color: var(--text);
}
a.figure-exception:hover,
a.figure-exception[data-force="hover"] { background: var(--surface-hover); }
a.figure-exception:active,
a.figure-exception[data-force="active"] { background: var(--border); }
.figure-exception__count { font: var(--type-section); font-variant-numeric: tabular-nums lining-nums; }
.figure-exception__sentence { flex: 1 1 auto; min-inline-size: 0; font: var(--type-body); color: var(--text); }
a.figure-exception[data-severity="critical"] > .icon:first-child,
a.figure-exception[data-severity="critical"] .figure-exception__count { color: var(--critical); }
a.figure-exception[data-severity="warning"] > .icon:first-child,
a.figure-exception[data-severity="warning"] .figure-exception__count { color: var(--warning); }
a.figure-exception > .icon:last-child { color: var(--text-secondary); }

/* Skeleton cell of the figure strip: the same padding as a loaded figure, so nothing shifts when the data arrives. */
.figure-strip__skeleton { box-sizing: border-box; padding-block: var(--space-5); padding-inline: var(--space-7); }
.figure-strip > .figure-strip__skeleton + .figure-strip__skeleton { border-inline-start: var(--border-width) solid var(--border); }