/**
 * Stat card (DS nv-o-stat). Markup comes from one function,
 * design-system/shared/stat-card.js (product copy: js/ds/stat-card.js).
 *
 * Every product stat row renders from that module and carries [data-nv-stats]
 * (a hook for live data, not a style scope). The legacy KPI blocks (.nv-o-stat
 * in contracts, nv-fin-stat, dash-kpi on the dashboard) are gone, so this
 * layer is the only source of the look. No importance flags: a page that needs
 * a different stat is a new DS case, not a local override.
 *
 * Values match the Taxes reference: 104 px island, 24 px frame, 36 px neutral
 * icon circle with an 18 px glyph, label callout 13 / value numeric-title 16–22 / meta caption 11
 * (roles from components/nv-typography.css, DS shared/typography.css).
 * Colours read the DS table tokens and fall back to the dash-* tokens, so a page
 * without the DS primitives (the dashboard) gets the same island. A row nested
 * in another island sets --nv-stat-surface to the inset surface.
 */
@layer components {
  .nv-o-stat {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: 104px;
    padding: var(--nv-island-padding, 24px);
    overflow: hidden;
    border: 0;
    border-radius: var(--nv-island-radius, 32px);
    background: var(--nv-stat-surface, var(--nv-section-surface, var(--nv-table-island, var(--dash-card))));
    box-shadow: none;
    color: var(--nv-table-text, var(--dash-text));
    font-family: var(--lib-font-primary, inherit);
    container: nv-stat-card / inline-size;
  }

  .nv-o-stat--chart {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(56px, 1fr);
    align-items: center;
    column-gap: 18px;
  }

  .nv-o-stat__top {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
  }

  .nv-o-stat__icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dash-text, #eee) 8%, transparent);
    color: var(--dash-text, #eee);
  }

  .nv-o-stat__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
  }

  .nv-o-stat__copy {
    min-width: 0;
    flex: 1;
  }

  .nv-o-stat__copy p {
    margin: 0;
  }

  .nv-o-stat__label,
  .nv-o-stat__meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .nv-o-stat__label {
    color: var(--nv-table-cell, var(--dash-text-muted));
    font-size: var(--nv-type-callout-size);
    line-height: var(--nv-type-callout-line);
    letter-spacing: var(--nv-type-callout-tracking);
  }

  .nv-o-stat__value {
    overflow: hidden;
    color: var(--nv-table-text, var(--dash-text));
    font-size: clamp(17px, 6cqi, var(--nv-type-numeric-title-size));
    font-weight: var(--nv-type-numeric-title-weight);
    font-variant-numeric: var(--nv-type-numeric-figures);
    letter-spacing: var(--nv-type-numeric-title-tracking);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Meta is the quiet line: the delta reads as secondary text so the value stays the only primary. */
  .nv-o-stat__meta {
    font-size: var(--nv-type-caption-size);
    font-weight: var(--nv-type-caption-weight);
    line-height: var(--nv-type-caption-line);
    letter-spacing: var(--nv-type-caption-tracking);
  }

  .nv-o-stat__meta--up,
  .nv-o-stat__meta--down {
    color: var(--nv-table-cell, var(--dash-text-muted));
  }

  .nv-o-stat__meta--muted {
    color: var(--nv-table-head, var(--dash-text-subtle));
  }

  .nv-o-stat__spark {
    width: 100%;
    height: 28px;
    align-self: center;
    pointer-events: none;
  }

  .nv-o-stat__spark svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nv-o-stat__meter {
    width: 100%;
    height: 6px;
    align-self: center;
    border-radius: 999px;
  }

  .nv-o-stat__meter-fill--red { --nv-meter-tone: var(--nv-feedback-error); }
  .nv-o-stat__meter-fill--green { --nv-meter-tone: var(--nv-feedback-success); }
  .nv-o-stat__meter-fill--orange { --nv-meter-tone: var(--nv-table-pending); }

  /* Foot: the chart row under the copy, one height with a spark, a meter, nothing, or a loading bone. */
  .nv-o-stat__foot {
    display: flex;
    height: 20px;
    flex-direction: column;
    justify-content: flex-end;
  }

  .nv-o-stat__foot > .nv-o-stat__spark {
    height: 100%;
  }

  .nv-o-stat--loading .nv-o-stat__foot::after {
    content: "";
    height: 6px;
    border-radius: 999px;
    background: var(--nv-table-well, var(--dash-surface-hover));
  }

  .nv-o-stat--loading :is(.nv-o-stat__label, .nv-o-stat__value, .nv-o-stat__meta) {
    width: fit-content;
    border-radius: 999px;
    background: var(--nv-table-well, var(--dash-surface-hover));
    color: transparent;
  }

  .nv-o-stat--loading .nv-o-stat__icon {
    background: var(--nv-table-well, var(--dash-surface-hover));
  }

  .nv-o-stat--loading .nv-o-stat__icon svg {
    visibility: hidden;
  }

  /* Narrow card: the value steps down instead of truncating early. */
  @container nv-stat-card (max-width: 260px) {
    .nv-o-stat__value {
      font-size: var(--nv-type-title-3-size);
      letter-spacing: var(--nv-type-title-3-tracking);
    }
  }
}