/* ============================================================
   The Market Terminal — shared UI primitives (pairs with tmt-ui.js)
   Tokens only (src/shared/tokens.css).
   ============================================================ */

/* ---------- Delta: the one up/down indicator ----------
   Tone classes (.up/.down/.flat/.none) set the colour; direction classes
   (.is-up/.is-down) orient the glyph. They differ for inverted series such
   as VIX, where a rise is printed "+" with an up-glyph but coloured down. */
.tmt-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  line-height: 1.2;
}
.tmt-delta__glyph {
  width: 7px;
  height: 7px;
  flex: none;
  fill: currentColor;
}
.tmt-delta.is-down .tmt-delta__glyph { transform: rotate(180deg); }

.tmt-delta.up   { color: var(--up); }
.tmt-delta.down { color: var(--down); }
.tmt-delta.flat,
.tmt-delta.none { color: var(--ink-3); }
.tmt-delta.neutral { color: var(--ink-2); }

/* Chip: a tinted pill. Geometry sits in :where() (zero specificity) so a
   host's own chip rules (.rb-pct, .mv-row .pct and their dense-band media
   variants) keep deciding padding and size; only the colours come from here. */
:where(.tmt-delta--chip, .tmt-delta--heat) {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
/* Compact: the glyph stands in for the sign (▲ 0.84%), for chips where every
   pixel is contested (the indices ribbon). Screen readers still get the sign
   from a visually hidden span. */
.tmt-delta--compact { gap: 2px; }
.tmt-delta--compact .tmt-delta__glyph { width: 6px; height: 6px; }

/* Visually hidden, still read aloud. */
.tmt-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.tmt-delta--chip.up   { background: var(--up-bg); }
.tmt-delta--chip.down { background: var(--down-bg); }
.tmt-delta--chip.flat,
.tmt-delta--chip.none,
.tmt-delta--chip.neutral { background: var(--paper-2); }

/* Heat: the tint deepens with magnitude (data-mag 1..3). */
.tmt-delta--heat.flat,
.tmt-delta--heat.none { background: var(--paper-2); }
.tmt-delta--heat.up[data-mag="1"]   { background: color-mix(in oklab, var(--up-bg) 60%, transparent); }
.tmt-delta--heat.up[data-mag="2"]   { background: var(--up-bg); }
.tmt-delta--heat.up[data-mag="3"]   { background: color-mix(in oklab, var(--up) 30%, var(--up-bg)); }
.tmt-delta--heat.down[data-mag="1"] { background: color-mix(in oklab, var(--down-bg) 60%, transparent); }
.tmt-delta--heat.down[data-mag="2"] { background: var(--down-bg); }
.tmt-delta--heat.down[data-mag="3"] { background: color-mix(in oklab, var(--down) 30%, var(--down-bg)); }

/* ---------- Tick flash ----------
   A changed value is tinted and fades back to whatever background it had
   (keyframes with only a `from` animate to the element's own style), so the
   same rule works on a plain cell and on a tinted chip. Two identical sets
   alternate so a repeat tick restarts cleanly. --dur-flash is 0 under
   reduced motion, and tmt-ui.js skips the flash there too. */
@keyframes tmt-flash-up-a   { from { background-color: var(--up-soft);   box-shadow: 0 0 0 1px var(--up-soft); } }
@keyframes tmt-flash-up-b   { from { background-color: var(--up-soft);   box-shadow: 0 0 0 1px var(--up-soft); } }
@keyframes tmt-flash-down-a { from { background-color: var(--down-soft); box-shadow: 0 0 0 1px var(--down-soft); } }
@keyframes tmt-flash-down-b { from { background-color: var(--down-soft); box-shadow: 0 0 0 1px var(--down-soft); } }
.tmt-flash-up-a   { animation: tmt-flash-up-a   var(--dur-flash) var(--ease-out); }
.tmt-flash-up-b   { animation: tmt-flash-up-b   var(--dur-flash) var(--ease-out); }
.tmt-flash-down-a { animation: tmt-flash-down-a var(--dur-flash) var(--ease-out); }
.tmt-flash-down-b { animation: tmt-flash-down-b var(--dur-flash) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .tmt-flash-up-a, .tmt-flash-up-b, .tmt-flash-down-a, .tmt-flash-down-b { animation: none; }
}

/* ---------- Skeletons shaped like their content ----------
   Built on .tmt-skel (chrome.css: the shimmer, off under reduced motion). */
.tmt-skel-wrap .tmt-skel { display: block; min-height: 0; margin: 0; }
.tmt-skel-row { pointer-events: none; }
.tmt-skel-row .left { gap: 5px; }
.tmt-skel.sk-rank { width: 14px; height: 9px; }
.tmt-skel.sk-sym  { width: 42px; height: 11px; }
.tmt-skel.sk-name { height: 9px; max-width: 160px; }
.tmt-skel.sk-px   { width: 50px; height: 10px; justify-self: end; }
.tmt-skel.sk-chip { width: 58px; height: 18px; justify-self: end; }
.tmt-skel.sk-vol  { width: 36px; height: 10px; justify-self: end; }
.tmt-skel-news { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.tmt-skel.sk-meta { width: 110px; height: 8px; }
.tmt-skel.sk-h    { height: 12px; }
.tmt-skel-stat { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.tmt-skel.sk-k { height: 10px; max-width: 150px; }
.tmt-skel.sk-v { width: 44px; height: 11px; flex: none; }
.tmt-skel-line { padding: 10px 16px; }
.tmt-skel-line .tmt-skel { height: 10px; }
.tmt-skel.sk-block { width: auto; margin: 14px 16px; border-radius: var(--radius-md); }

/* ---------- States inside a card ----------
   .tmt-state (chrome.css) is a boxed, centred panel. Inside a card the card
   is already the box, so the compact variant drops the border and tint and
   keeps the error colour to the icon: a red panel inside a card shouts. */
.tmt-state.compact {
  border: 0;
  background: none;
  padding: 26px 20px;
  gap: 6px;
}
.tmt-state.compact .t { font-size: 14px; }
.tmt-state.compact .d { font-size: 12px; }
.tmt-state.compact.error { background: none; }
.tmt-state.compact.error .t { color: var(--ink); }
.tmt-state.compact .act { margin-top: 4px; }

/* ---------- Rolling digits (TMT_UI.roll) ----------
   The real text (.tmt-roll__t) keeps the layout and innerText; while a roll
   runs it goes transparent and the overlay draws over it, cell by cell, in
   the same font. Kerning is off on both so the cells (one glyph each) land
   exactly on the real glyphs. --dur-data is 0 under reduced motion and
   tmt-ui.js does not roll there. */
.tmt-roll { position: relative; font-kerning: none; }
.tmt-roll.is-rolling > .tmt-roll__t { color: transparent; }
.tmt-roll__fx {
  position: absolute;
  display: flex;
  height: var(--roll-h);
  white-space: pre;
  pointer-events: none;
  user-select: none;
}
.tmt-roll__c { flex: none; display: block; height: var(--roll-h); overflow: hidden; }
.tmt-roll__c::before,
.tmt-roll__c::after { display: block; height: var(--roll-h); line-height: var(--roll-h); }
.tmt-roll__c::before { content: attr(data-a); }
.tmt-roll__c.is-roll::after { content: attr(data-b); }
.tmt-roll__fx.is-up .is-roll::before,
.tmt-roll__fx.is-up .is-roll::after { animation: tmt-roll-up var(--dur-data) var(--ease-out) both; }
.tmt-roll__fx.is-down .is-roll::before,
.tmt-roll__fx.is-down .is-roll::after { animation: tmt-roll-down var(--dur-data) var(--ease-out) both; }
.tmt-roll__c.is-in::before { animation: tmt-roll-in var(--dur-data) var(--ease-out) both; }
@keyframes tmt-roll-up   { from { transform: translateY(0); }     to { transform: translateY(-100%); } }
@keyframes tmt-roll-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes tmt-roll-in   { from { opacity: 0; } }