/* ===================================================================
   WCI: Analytic tables (INTEL-520 Leaderboard, INTEL-521 Heat table,
   INTEL-525 Comparison matrix)
   -------------------------------------------------------------------
   PORTED from the ip-b2b design repo (local checkout pulled 2026-10-14):
     pages/analytics-report.css
       lines 1477-1485     .atx-pop, .atx-fade, .atx-line
       lines 1497-1506     prefers-reduced-motion
       lines 1599-1620     .atx-tbl, -name, -num, -delta (the table look)
       lines 1622-1636     .atx-mini, .atx-mini-fill (the capsule bar)
       lines 1638          .atx-spark
       lines 1640-1651     .atx-heat, .atx-heat-swatch
       lines 1791, 1832    .attb-tbl floor, .attb-prose
       lines 1915-1920     .attb-grade, .attb-gradeltr
       lines 2039-2043     the 900px container rule (prose and bars give width back)
     js/analytics-types-tables.js buildSparkTable(), buildHeatTable(),
       the attb-cmp specimen and gradeCell()

   WHY THIS SHEET IS GLOBAL, NOT A .razor.css: three components
   (WciLeaderboardTable, WciHeatTable, WciComparisonMatrix) draw the one
   .atx-tbl vocabulary, and the design keeps it in one block. One copy
   keeps a re-port a section diff (REGISTRY rule 1).

   HOW THE COLLAPSE IS DRIVEN: every table sits in .wci-output-table and
   is a table.rtbl whose cells are .rtbl-fld with data-rlabel, so the card
   collapse at 560px of the table's own width is wci-output.css's, the
   same one js/responsive-tables.js drives in the design. Only the pieces
   these cells add are restyled for cards below.

   HOW THE MOTION IS DRIVEN: the server draws every bar, line, swatch and
   number at its final state, so print, a view without script and reduced
   motion all read correctly. js/wci/wci-analytic-table.js plays the
   entrance from zero with the Web Animations API and writes only text
   nodes, never a class or style Blazor renders. So the design's
   .atx-stage.is-in animation rules are not ported.

   Class names are kept IDENTICAL to the design. Consumes tokens from
   wci-tokens.css (body.wci).
   =================================================================== */

/* ---- The table's look, analytics-report.css 1599-1620 ---- */
.atx-tbl {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.atx-tbl th {
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--border-strong);
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.atx-tbl td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text); vertical-align: middle;
}
.atx-tbl tbody tr:last-child td { border-bottom: none; }
.atx-tbl tbody tr { transition: background .12s ease; }
.atx-tbl tbody tr:hover { background: var(--primary-soft); }
.atx-tbl-name { font-weight: 700; white-space: nowrap; }
.atx-tbl-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.atx-tbl-delta { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atx-tbl-delta.is-up { color: var(--sec-green-text, var(--chart-status-excellent)); }
.atx-tbl-delta.is-dn { color: var(--sec-red-text, var(--chart-status-poor)); }

/* ---- Capsule bar, analytics-report.css 1622-1636 ---- */
.atx-mini {
  position: relative; display: block; height: 10px; width: 128px; max-width: 18vw;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--surface));
  overflow: hidden;
}
html.dark .atx-mini { background: color-mix(in srgb, var(--chart-ink-on-fill-light) 9%, transparent); }
/* The design starts the fill at scaleX(0) for its CSS sweep; here it is drawn
   full and the script grows it, so the resting state is the real value. */
.atx-mini-fill {
  display: block;
  height: 100%; border-radius: inherit; transform-origin: left center;
  width: var(--atx-mini, 0%);
}

/* ---- Sparkline, analytics-report.css 1477-1485 and 1638 ---- */
.atx-spark { display: block; width: 92px; height: 28px; overflow: visible; }
.atx-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atx-pop { fill: var(--primary); transform-box: fill-box; transform-origin: center; }
html.dark .atx-line { stroke: var(--primary-bright, var(--primary)); }
html.dark .atx-pop { fill: var(--primary-bright, var(--primary)); }

/* ---- Heat table, analytics-report.css 1640-1651 ---- */
.atx-heat th { text-align: center; padding-right: 8px; }
.atx-heat th:first-child, .atx-heat td:first-child { text-align: left; padding-right: 18px; }
.atx-heat td.atx-heat-cell { text-align: center; padding: 6px 8px; }
.atx-heat-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 32px; padding: 0 8px; border-radius: 8px;
  color: var(--chart-ink-on-fill-light); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-ink-on-fill-light) 14%, transparent);
}
/* APP-OWNED: the ink on a swatch. The design writes white on every tier,
   which fails contrast on the light green, amber and orange fills. The
   status fills are the same in light and dark, so the ink is the fixed
   dark of wci-tokens.css (--chart-ink-on-fill-dark) on every tier but
   Poor, which keeps the fixed light; each pick is the higher-contrast of
   the two on that fill. The design's literal #fff and rgba() are written
   in those tokens too (REGISTRY rule 2). */
.atx-heat-swatch.is-dark-ink {
  color: var(--chart-ink-on-fill-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-ink-on-fill-dark) 10%, transparent);
}
.atx-heat-none { color: var(--text-subtle); }

/* ---- Comparison matrix, analytics-report.css 1791, 1832, 1915-1920 ---- */
.attb-tbl { min-width: var(--attb-minw, 0); }
.attb-prose { color: var(--text); line-height: 1.5; }
.attb-num { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attb-grade { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.attb-grade .atx-mini { width: 64px; max-width: none; }
.attb-gradeltr {
  min-width: 30px; text-align: right; font-weight: 800; font-size: 13px; color: var(--text-muted);
}
/* APP-OWNED: the rail names the metric; the product columns read right. */
.attb-tbl th.attb-th--num, .attb-tbl td.attb-td--num { text-align: right; }
/* The rail is a row header (<th scope="row">), so it is told apart from the
   column headers: it reads as a body cell, bold. */
.atx-tbl tbody th.attb-rail {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border);
  text-align: left; font-size: 13px; font-weight: 700; letter-spacing: normal;
  text-transform: none; color: var(--text); white-space: normal; vertical-align: middle;
}
.atx-tbl tbody tr:last-child th.attb-rail { border-bottom: none; }
/* Product names are long and wrap rather than truncate (INTEL-525). */
.attb-tbl th.attb-th--num { white-space: normal; vertical-align: bottom; }

/* ---- APP-OWNED: sortable headers (the caret of js/sort-arrow.js) ---- */
.atx-tbl .wci-th-sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.atx-tbl .wci-th-sort:hover { color: var(--text); }
.atx-tbl .wci-th-sort:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
.atx-tbl .rtbl-sort-arrow { display: inline-flex; width: 10px; height: 10px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.atx-tbl .rtbl-sort-arrow svg { width: 10px; height: 10px; }
.atx-tbl th[aria-sort="ascending"] .rtbl-sort-arrow { opacity: 1; transform: rotate(180deg); }
.atx-tbl th[aria-sort="descending"] .rtbl-sort-arrow { opacity: 1; }
.atx-tbl th[aria-sort="ascending"], .atx-tbl th[aria-sort="descending"] { color: var(--text); }
.atx-heat th .wci-th-sort { justify-content: center; }

/* ---- APP-OWNED: the five-tier legend under the heat table ----
   The dots are wci-chart.css's .att-dot; this is only their row. */
.wci-heat-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.wci-heat-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Tablet and below, analytics-report.css 2039-2043 ----
   A table still in table view close to its floor: prose and in-cell bars
   give width back. */
@container rtbl (max-width: 900px) {
  .attb-prose { min-width: 15ch; }
  .atx-tbl .atx-mini { width: 64px; }
  .attb-grade .atx-mini { width: 40px; }
}

/* ---- Cards (wci-output.css drives the collapse at 560px) ----
   The bar and the sparkline keep their own fixed sizes and never stretch
   to the card's width (INTEL-520); a long name wraps. */
@container rtbl (max-width: 560px) {
  .wci-output-table table.atx-tbl tbody > tr > td.rtbl-fld { padding: 5px 0; }
  /* A bar, a sparkline or a swatch has no text baseline to share with its
     label (wci-output.css aligns fields by baseline), so these fields centre. */
  .wci-output-table:not(.wci-output-table--scroll) table.atx-tbl tbody > tr > td.rtbl-fld[data-rlabel] { align-items: center; }
  .wci-output-table table.atx-tbl .atx-tbl-name { white-space: normal; }
  .wci-output-table table.atx-tbl .atx-mini { width: 96px; max-width: none; }
  .wci-output-table table.atx-tbl .attb-grade .atx-mini { width: 64px; }
  .wci-output-table table.atx-tbl td.atx-heat-cell { text-align: left; }
  /* The first cell names the card (a product, a metric): a heading, not a field. */
  .wci-output-table table.atx-tbl tbody > tr > .rtbl-fld.atx-card-head { font-size: 14px; padding-bottom: 8px; }
  /* The matrix's rail is a <th>, which wci-output.css's td.rtbl-fld field rules
     do not reach: it spans the card like any heading field. */
  .wci-output-table table.atx-tbl tbody > tr > th.rtbl-fld {
    display: block; flex: 1 1 100%; order: 4; min-width: 0; margin: 0; border: 0; padding: 5px 0 8px;
  }
  .wci-output-table table.attb-tbl { --attb-minw: 0; }
  .wci-output-table table.atx-tbl .attb-prose { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .atx-tbl tbody tr { transition: none; }
}