/* Numbers, Arc-style (piece 17, 2026-10-29).
 *
 * - Tabular figures wherever a number changes or aligns: prices, changes,
 *   percentages, P&L, counts, KPI values. :where() keeps this at zero
 *   specificity so a page that wants proportional digits still can.
 * - Rolling digits (Arc animated-counter): arc_numbers.js swaps only the
 *   digit columns that changed; each one turns the way the number moved,
 *   the cell flashes its direction for 280ms. These rules are its frame.
 * - The ticker header's quote grid as a definition grid that never
 *   truncates a number: label left, value right, as many columns as fit.
 * - Mission Control, Portfolio and dashboard KPI tiles as Arc metric cards:
 *   sentence-case label in secondary ink, the value at 20px/500 tabular,
 *   a context line under it.
 */

/* ---- Tabular figures ----------------------------------------------------- */
:where([class*="price"], [class*="-px"], [class*="-chg"], [class*="-pct"], [class*="pnl"], [class*="kpi"],
  [class*="-num"], .num, [class*="-val"], [class*="-count"], [class*="mcap"], [class*="-vol"],
  .oc-tick, .oc-roll, td.oc-num-col, th.oc-num-col) {
  font-variant-numeric: tabular-nums;
}

/* ---- Rolling digits ------------------------------------------------------ */
.oc-roll {
  display: inline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.oc-roll__col {
  position: relative;
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0;
  vertical-align: baseline;
  line-height: inherit;
}
.oc-roll__in,
.oc-roll__out {
  display: block;
}
.oc-roll__out {
  position: absolute;
  inset: 0;
  text-align: center;
}
/* The direction flash: a brief tint under the value, ≤ 300ms. */
.oc-flash-up,
.oc-flash-down {
  border-radius: 3px;
  animation: oc-flash-up 280ms var(--arc-ease) both;
}
.oc-flash-down { animation-name: oc-flash-down; }
@keyframes oc-flash-up {
  from { background-color: var(--arc-success-subtle); }
  to { background-color: transparent; }
}
@keyframes oc-flash-down {
  from { background-color: var(--arc-danger-subtle); }
  to { background-color: transparent; }
}

/* ---- Ticker header: the quote grid -----------------------------------------
   Dense rows of name · figure, as before, but nothing is cut: a column is at
   least 112px: the widest English pair is ~101px (Prev Close 254.60,
   Turnover $ 19.44B), with room for a four-digit price; five to a packed block (6 rows); names are never ellipsed; and if a long translation still does
   not fit, the figure drops under its name inside the cell (flex-wrap) rather
   than being clipped. Bid/Ask (two prices) spans two columns, last, so it
   leaves no hole. The rows share the mast's height beside the name; a narrow
   mast wraps (flex, no container query: that would contain the floating
   Copilot's fixed position) and puts the grid under the name, full width. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .th-masthead {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: var(--arc-space-6, 24px) !important;
  row-gap: var(--arc-space-3, 12px) !important;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .th-masthead > .mh-left { flex: 1 1 230px; min-width: 0; }
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.th-stat-grid, .th-masthead .th-stat-grid) {
  /* A packed block of five 112px columns (30 slots: 6 rows): values sit by their names, not
     across a wide column; the name block takes the rest of the mast. */
  flex: 0 1 auto;
  width: calc(5 * 112px + 4 * 12px);
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  grid-template-rows: none !important;
  /* Rows share the mast's height, but no more than 26px each (six rows:
     156px): a taller name block leaves the grid tight, not spaced out. */
  grid-auto-rows: minmax(min-content, 1fr) !important;
  grid-auto-flow: row !important;
  align-self: stretch !important;
  align-content: stretch !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;   /* a divider would stray once the grid wraps under the name */
  border-top: 0 !important;
  font-size: 11px;
  line-height: 16px;
}
/* Wide: five columns beside the name, six rows of at most 26px. (Narrower,
   the grid has more rows and lies under the name, at its content height.) */
@media (min-width: 1500px) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.th-stat-grid, .th-masthead .th-stat-grid) { max-height: calc(6 * 26px); }
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .th-stat-grid .sg-cell {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: center;
  column-gap: 8px;
  row-gap: 0;
  min-width: 0;
  padding: 1px 0 !important;
  border-bottom: 1px solid var(--arc-border-subtle) !important;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .th-stat-grid .sg-cell--wide { grid-column: span 2; order: 1; }
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2):is(body, #oc-arc-3) .th-stat-grid .sg-cell label {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: var(--arc-text-secondary);
  font-size: 10.5px;
  line-height: 16px;
  font-weight: var(--arc-weight);
  text-transform: none;
  letter-spacing: 0;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2):is(body, #oc-arc-3) .th-stat-grid .sg-cell b {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: right;
  color: var(--arc-foreground);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---- KPI tiles as metric cards ------------------------------------------- */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.mc-kpi, .pf2-kpi, .pf-kpis .pf-kpi) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--arc-space-3) var(--arc-space-4);
  border-radius: var(--arc-radius-card);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.mc-kpi__label, .pf2-kpi .lbl, .pf-kpis .pf-kpi .lbl) {
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight);
  letter-spacing: 0;
  text-transform: none;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.mc-kpi__value, .pf2-kpi .val, .pf-kpis .pf-kpi .val) {
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight-strong);
  line-height: 1.2;
  letter-spacing: var(--arc-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.mc-kpi__sub, .pf2-kpi .sub) {
  color: var(--arc-text-muted);
  font-size: var(--arc-text-xs);
  font-variant-numeric: tabular-nums;
}
/* Tone stays on the value (status), never on the card. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-kpi--bad .mc-kpi__value { color: var(--arc-danger); }
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-kpi--warn .mc-kpi__value { color: var(--arc-warning); }
/* Mission Control's dense row keeps its compact padding. */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) #mc-root .mc-kpi {
  padding: var(--arc-space-2) var(--arc-space-3);
}
@media (prefers-reduced-motion: reduce) {
  .oc-flash-up, .oc-flash-down { animation: none; }
  .oc-roll__in, .oc-roll__out { transform: none !important; }
}