/* Compact stat strip — replaces the big "KPI card" grids (user, 2026-10-13: cards that take a lot of
   space for one number look unprofessional; compact reads as a pro tool).

   One bordered panel, cells split by hairlines, label over value, sub-note beside the value.
   Cells wrap on narrow widths; the hairlines stay clean because each cell draws its own right/bottom
   rule and the panel hides the outer ones.

   Use:
     <div class="aiq-stats">
       <div class="aiq-stat"><div class="aiq-stat-l">Total debt</div>
         <div class="aiq-stat-v">$91.3B<span class="aiq-stat-s">2% of market cap</span></div></div>
       …
     </div>
   .aiq-stats-stack puts the sub-note on its own line under the value (long notes, narrow strips).
   Colours: .tb-pos / .tb-neg on the value (or a span inside it). Width per cell: --stat-min (default 140px).
   Spec: docs/features/tables.md "Stat strips". */

.aiq-stats {
  --stat-min: 140px;
  border: 1px solid var(--tb-rule);
  border-radius: 4px;
  background: var(--tb-bg);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--stat-min), 100%), 1fr));
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.aiq-stat {
  min-width: 0;
  padding: 7px 14px 8px;
  border-right: 1px solid var(--tb-row);
  border-bottom: 1px solid var(--tb-row);
  margin: 0 -1px -1px 0;   /* hide the rules on the panel's outer edge */
}
.aiq-stat-l {
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 500;
  color: var(--tb-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiq-stat-v {
  margin-top: 2px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--tb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiq-stat-s {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--tb-faint);
}
.aiq-stat-v.tb-pos, .aiq-stat-v .tb-pos { color: var(--tb-pos); }
.aiq-stat-v.tb-neg, .aiq-stat-v .tb-neg { color: var(--tb-neg); }
.aiq-stats-stack .aiq-stat-s { display: block; margin: 1px 0 0; line-height: 14px; overflow: hidden; text-overflow: ellipsis; }
/* Skeleton: same height as a filled strip, so nothing jumps when data lands. */
.aiq-stats-skel { height: 50px; border-radius: 4px; }
.aiq-stats-skel.aiq-stats-stack { height: 64px; }
.aiq-stats:empty { display: none; }

/* Key facts list — the one-column card form of the same numbers (user, 2026-10-13: "better in a card
   that just takes up one column" than a row across the page). Put it in a side column next to the
   content it summarises; the page supplies the card and its title.
     <div class="aiq-kv">
       <div class="aiq-kv-r"><span class="aiq-kv-l">Total debt</span>
         <span class="aiq-kv-v">$91.3B<small class="aiq-kv-s">2% of market cap</small></span></div>
     </div> */
.aiq-kv { font-family: Inter, system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.aiq-kv-r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tb-row);
}
.aiq-kv-r:last-child { border-bottom: 0; }
.aiq-kv-l { font-size: 12.5px; color: var(--tb-sub); min-width: 0; }
.aiq-kv-v { font-size: 13.5px; font-weight: 600; color: var(--tb-ink); text-align: right; white-space: nowrap; }
.aiq-kv-s { display: block; font-size: 11px; font-weight: 400; color: var(--tb-faint); margin-top: 1px; }
.aiq-kv-v.tb-pos, .aiq-kv-v .tb-pos { color: var(--tb-pos); }
.aiq-kv-v.tb-neg, .aiq-kv-v .tb-neg { color: var(--tb-neg); }