/* ============================================================
   The Market Terminal — page kit (pairs with tmt-kit.js)
   The segmented control, KPI tile, loading/empty/busy states and the one
   tooltip, drawn the way the dashboard draws them. Tokens only.
   ============================================================ */

/* ---------- Segmented control / tabs ----------
   A track with an ink indicator that slides to the chosen option (the
   dashboard's "on" chip: ink ground, paper text). The indicator is placed
   from the option's own box (--seg-x/-y/-w/-h, set by tmt-kit.js), jumps
   instead of sliding across a wrapped row, and never moves under reduced
   motion. Until the script has measured, the active option paints its own
   ground, so nothing is missing without JS. */
.tmt-seg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  max-width: 100%;
}
.tmt-seg__ind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--seg-w, 0);
  height: var(--seg-h, 0);
  transform: translate(var(--seg-x, 0), var(--seg-y, 0));
  background: var(--ink);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dur-mid) var(--ease-spring),
    width var(--dur-mid) var(--ease-spring),
    height var(--dur-mid) var(--ease-spring);
}
.tmt-seg--ready > .tmt-seg__ind { opacity: 1; }
.tmt-seg--jump > .tmt-seg__ind { transition: none; }

.tmt-seg > .tmt-seg__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t-color);
}
.tmt-seg > .tmt-seg__item:hover { color: var(--ink); }
.tmt-seg > .tmt-seg__item.active { color: var(--paper); font-weight: 600; }
.tmt-seg:not(.tmt-seg--ready) > .tmt-seg__item.active { background: var(--ink); }
.tmt-seg > .tmt-seg__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tmt-seg > .tmt-seg__item svg { flex: none; }
/* Figures in a range picker (1Y 3Y 5Y) line up. */
.tmt-seg--mono > .tmt-seg__item { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .tmt-seg__ind { transition: none; }
}

/* A long set of tabs (five or more: AI Tracker, Portfolio, the calendar's
   filter) on a phone is one row that scrolls sideways, as a finance app's tab
   strip does, instead of wrapping to two rows inside the pill: the options
   snap, the edge that has more fades (data-fade, set by tmt-kit.js when the
   row really overflows) and the chosen one is scrolled into view. Opt in with
   the class in the markup, so the first paint has the row's final shape. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tmt-seg--scroll {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    width: max-content;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tmt-seg--scroll::-webkit-scrollbar { display: none; }
  .tmt-seg--scroll > * { flex: none; scroll-snap-align: start; }
  /* The same edge fade for any other row that scrolls sideways on a phone
     (13F's managers and fund figures): mark it data-hscroll and tmt-kit.js
     keeps its data-fade. Not for a sticky bar with a ground of its own,
     whose ground would fade too (the Solutions rail draws its own). */
  :is(.tmt-seg--scroll, [data-hscroll])[data-fade="end"] {
    -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, var(--ink) calc(100% - 32px), transparent);
  }
  :is(.tmt-seg--scroll, [data-hscroll])[data-fade="start"] {
    -webkit-mask-image: linear-gradient(to left, var(--ink) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, var(--ink) calc(100% - 32px), transparent);
  }
  :is(.tmt-seg--scroll, [data-hscroll])[data-fade="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 32px, var(--ink) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, var(--ink) 32px, var(--ink) calc(100% - 32px), transparent);
  }
}

/* ---------- KPI tile ----------
   Label, figure, delta chip with its window, then the data's own date. The
   figure node holds only the figure (checks read it exactly), in Inter
   tabular digits (.tmt-fig) so a change never shifts its neighbours. */
.tmt-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px 11px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.tmt-kpi__label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.tmt-kpi__label > span { overflow: hidden; text-overflow: ellipsis; }
.tmt-kpi__label svg { flex: none; color: var(--ink-3); }
/* A series swatch in a tile's label: the tile names a line on the chart. */
.tmt-kpi__dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.tmt-kpi { container-type: inline-size; }
.tmt-kpi__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tmt-kpi__spark { flex: none; display: block; width: 76px; height: 26px; margin-left: auto; }
.tmt-kpi__value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.tmt-kpi__unit {
  align-self: flex-end;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.tmt-kpi__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 11.5px;
}
.tmt-kpi__foot .tmt-delta--chip { padding: 2px 6px; font-size: 11px; }
/* A reading's band or state as a word ("Elevated", "Alert"), in a tile
   (.tmt-kpi__status) or in a table cell (.tmt-pill). Tones are for states
   that are good or bad news; a neutral state stays ink. */
.tmt-kpi__status,
.tmt-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tmt-kpi__status.is-up, .tmt-pill.is-up { background: var(--up-bg); color: var(--up); }
.tmt-kpi__status.is-down, .tmt-pill.is-down { background: var(--down-bg); color: var(--down); }
/* A warning: the threshold amber, darkened toward the ink so the word reads
   at 11px on either theme. */
.tmt-kpi__status.is-warn, .tmt-pill.is-warn {
  background: color-mix(in oklab, var(--chart-threshold) 16%, transparent);
  color: color-mix(in oklab, var(--chart-threshold) 70%, var(--ink));
}
.tmt-kpi__value.is-up { color: var(--up); }
.tmt-kpi__value.is-down { color: var(--down); }
.tmt-kpi__ctx {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.tmt-kpi__note {
  overflow: hidden;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tmt-kpi__asof {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
}
.tmt-kpi__asof.is-flag { color: var(--down); font-weight: 600; }

/* A narrow tile (two to a row on a phone) keeps the figure and the line on
   one row: a smaller figure, a shorter line. */
@container (max-width: 200px) {
  .tmt-kpi__value { font-size: 20px; }
  .tmt-kpi__spark { width: 48px; height: 22px; }
  .tmt-kpi__main { gap: 6px; }
}

/* A tile's placeholder, in the tile's own shape. A page writes the markup of
   the tiles to come (.tmt-kpi.tmt-kpi--skel, aria-hidden) with a line for
   each line they will have, each holding a non-breaking space and a bar
   (.tmt-skel). Every line then takes the height the real one will at any
   width (a narrow tile's figure is smaller), so the tiles arriving move
   nothing; a fixed-height block was 92 to 104px where the tiles are 90 to
   97. The bars sit out of the flow, on the line's middle.
     <div class="tmt-kpi tmt-kpi--skel" aria-hidden="true">
       <div class="tmt-kpi__label"><span class="tmt-skel"></span>&nbsp;</div>
       <div class="tmt-kpi__main"><span class="tmt-skel"></span><div class="tmt-kpi__value">&nbsp;</div></div>
       <div class="tmt-kpi__foot"><span class="tmt-skel"></span>&nbsp;</div>   (or __note)
     </div> */
.tmt-kpi--skel { pointer-events: none; }
.tmt-kpi--skel > * { position: relative; }
.tmt-kpi--skel .tmt-skel {
  position: absolute;
  left: 0;
  top: 50%;
  width: 45%;
  height: 10px;
  min-height: 0;
  transform: translateY(-50%);
}
.tmt-kpi--skel > .tmt-kpi__main > .tmt-skel { width: 60%; height: 18px; }

/* A tile that is a link (a quote tile to its details page): the tile's box,
   no link chrome, a firmer border on hover and a focus ring. */
.tmt-kpi-link { display: block; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-lg); }
.tmt-kpi-link:hover .tmt-kpi { border-color: var(--rule-strong); }
.tmt-kpi-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- States ----------
   .tmt-skel and .tmt-state live in chrome.css. The kit adds a compact state
   for inside a card or chart, and the busy bar: the content stays, and a
   2px bar along the top says it is being replaced. */
.tmt-kit-skel { display: block; width: 100%; border-radius: var(--radius-md); }
.tmt-state--compact { padding: 20px 16px; border-style: dashed; height: 100%; }
.tmt-state--compact .t { font-size: 14px; }

.tmt-busy { position: relative; }
.tmt-busy::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: tmt-busy-sweep 1.1s var(--ease-in-out) infinite;
}
@keyframes tmt-busy-sweep {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tmt-busy::before { animation: none; background: var(--brand); opacity: 0.5; }
}

/* ---------- Tooltip ----------
   One per page, on the popover layer, in the chart-tooltip colours. */
.tmt-tip {
  position: fixed;
  z-index: var(--z-popover);
  max-width: 280px;
  padding: 7px 9px;
  background: var(--chart-tooltip-bg);
  color: var(--chart-tooltip-ink);
  border: 1px solid var(--chart-tooltip-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop, var(--shadow-card));
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.tmt-tip[hidden] { display: none; }
.tmt-tip__title {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}
.tmt-tip__row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tmt-tip__sw {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.tmt-tip__label { opacity: 0.85; }
.tmt-tip__value {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- Table ----------
   Figures right-aligned in JetBrains Mono with tabular digits; words left in
   the UI face. The header stays under the page chrome (--tmt-sticky-top is
   measured by tmt-kit.js) while the table scrolls with the page. On a phone
   the wrap scrolls sideways instead, which gives up the sticky header: a
   sticky cell cannot outlive its scrolling box. */
.tmt-table-wrap { width: 100%; }
@media (max-width: 720px) {
  .tmt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.tmt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.tmt-table thead th {
  position: sticky;
  top: var(--tmt-sticky-top, 0px);
  z-index: 2;
  padding: 8px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tmt-table thead th { position: static; }
}
/* On a phone (docs/MOBILE.md section 1) a table wider than its wrap says so:
   its right edge fades while there is more to the right, and its first
   column (the row's name) stays put while the rest scrolls under it.
   data-fade is set by tmt-kit.js only when the wrap really overflows, so a
   table that fits is untouched. A phone held sideways is wider than 720px,
   where the wrap does not scroll (so the header can stick under the chrome):
   there a table that overflows scrolls in its wrap too, rather than pushing
   the page sideways (Portfolio's holdings did, by 230px). */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tmt-table-wrap[data-fade] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tmt-table-wrap[data-fade] .tmt-table thead th { position: static; }
  .tmt-table-wrap[data-fade="end"],
  .tmt-table-wrap[data-fade="both"] {
    -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent);
  }
  .tmt-table-wrap[data-fade] .tmt-table tr > :first-child {
    position: sticky;
    top: auto;
    left: 0;
    z-index: 1;
    background: var(--card);
  }
  .tmt-table-wrap[data-fade] .tmt-table thead tr > :first-child { z-index: 3; }
  .tmt-table-wrap[data-fade="start"] .tmt-table tr > :first-child,
  .tmt-table-wrap[data-fade="both"] .tmt-table tr > :first-child { box-shadow: inset -1px 0 0 var(--rule); }
}
/* The narrowest phones: tighter cells, so a table that nearly fitted fits
   (13F's holdings and Hyperliquid's funding table lost their last column,
   the alert bell and the Q/Q chip, by 5 to 30px at 360). */
@media (max-width: 400px) {
  .tmt-table thead th,
  .tmt-table td,
  .tmt-table tbody th { padding-left: 6px; padding-right: 6px; }
  .tmt-table tr > :first-child { padding-left: 4px; }
  .tmt-table tr > :last-child { padding-right: 4px; }
  /* A two-word head ("Open interest", "Q/Q change") takes two lines rather
     than setting its column wider than the figures under it. */
  .tmt-table thead th,
  .tmt-table thead th.num { white-space: normal; vertical-align: bottom; }
  /* A sort button is a 44px target (styles-mobile.css): its label sits at
     the foot of it, on the line of the plain heads beside it. */
  .tmt-table thead .tmt-sort { align-items: flex-end; }
}

/* A row that opens a page (a ticker's Asset Details): the row is the target,
   not the 7 to 35px of the symbol. The symbol's link carries .tmt-rowlink,
   and tmt-kit.js hands a click anywhere else on the row (away from its
   other controls, and not the end of a text selection) to that link. */
.tmt-table tbody tr:has(.tmt-rowlink) { cursor: pointer; }
.tmt-table tbody tr:has(.tmt-rowlink):hover th,
.tmt-table tbody tr:has(.tmt-rowlink:focus-visible) td,
.tmt-table tbody tr:has(.tmt-rowlink:focus-visible) th { background: var(--paper-2); }
/* On a phone (docs/MOBILE.md section 1) the link itself also stretches over
   the row, so a tap anywhere on it is a tap on a real link (the press state,
   a long press's link menu). Other controls in the row (an SEC filing link,
   an alert bell, a remove button) sit above it and keep their own taps.
   The row holds the stretch only where the engine lets a table row hold a
   positioned box (html[data-tmt-rowbox], tested by tmt-kit.js; WebKit long
   did not, and the link would have covered the whole table); elsewhere the
   link's own cell does, and the script covers the rest of the row. Where
   the first column sticks (a table wider than its wrap), the sticky cell
   holds it too (the :where keeps the cell rule under the sticky one). Not on
   a desktop, where a row-wide link would open the ticker's hover card from
   anywhere on the row and stop its words from being selected. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  :root[data-tmt-rowbox] .tmt-table tbody tr:has(.tmt-rowlink) { position: relative; }
  :where(:root:not([data-tmt-rowbox]) .tmt-table tbody :is(td, th):has(> .tmt-rowlink)) { position: relative; }
  .tmt-table tbody tr:has(.tmt-rowlink):active :is(td, th) { background: var(--paper-2); }
  .tmt-rowlink::after { content: ''; position: absolute; inset: 0; z-index: 0; }
  .tmt-table tbody tr:has(.tmt-rowlink) :is(a, button, input, select, label, summary, [role="button"]):not(.tmt-rowlink) { position: relative; z-index: 1; }
}
/* A row header (a ticker, a day) reads as a cell, not as a column head.
   Words wrap (styles-mobile.css sets every table cell nowrap on a phone);
   figures do not (.num below). */
.tmt-table td,
.tmt-table tbody th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  font-weight: inherit;
  text-align: left;
  white-space: normal;
}
.tmt-table tbody tr:last-child td,
.tmt-table tbody tr:last-child th { border-bottom: 0; }
.tmt-table tbody tr:hover td { background: var(--paper-2); }
.tmt-table .num {
  text-align: right;
  white-space: nowrap;
}
.tmt-table td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.tmt-table .up { color: var(--up); }
.tmt-table .down { color: var(--down); }

/* The header's sort button: the header's own text, a caret beside it. A
   figure column keeps its label flush right, so its caret sits to the left. */
.tmt-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.tmt-sort:hover { color: var(--ink); }
.tmt-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.tmt-table thead th.num .tmt-sort { flex-direction: row-reverse; }
.tmt-table thead th.is-sorted { color: var(--ink); }
.tmt-sort__caret {
  display: inline-block;
  min-width: 0.9em;
  font-size: 0.8em;
  line-height: 1;
}

/* ---------- Tag ----------
   A word about a row (Amended, SPAC, Reported): ink on a hairline, never a
   direction colour, so it cannot be read as good or bad news. .is-strong
   inks the ground for the one tag in a set that leads. */
.tmt-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.tmt-tag.is-strong {
  border-color: var(--ink-2);
  color: var(--ink);
}

/* ---------- Tile readings (kpi lines, source, tones) ----------
   A tile that reads a company rather than a series: up to two context
   lines that wrap (never more than two lines each), and a source line
   pinned to the tile's foot so a row of tiles lines its sources up. A
   state word ("Founder-CEO", "No acquisitions") sits smaller than a figure;
   a muted tile says why it has no figure. Absent options change nothing. */
.tmt-kpi__line {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.tmt-kpi__src {
  margin-top: auto;
  padding-top: 2px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmt-kpi--word .tmt-kpi__value {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: normal;
}
.tmt-kpi--muted .tmt-kpi__value { color: var(--ink-2); }
@container (max-width: 200px) {
  .tmt-kpi--word .tmt-kpi__value { font-size: 16px; }
}

/* ---------- Tooltip text ----------
   A paragraph in the tooltip (a rule, a definition) wraps; rows do not. */
.tmt-tip__text {
  margin-bottom: 4px;
  white-space: normal;
  line-height: 1.45;
}
.tmt-tip__text:last-child { margin-bottom: 0; }

/* ---------- Badge ----------
   A status word on a row (Alert, Note, Interim, Proxy): tinted fill, small
   radius, never a pill (pills are toggles). Neutral unless it reports a
   deterioration; colour is kept for that. */
.tmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tmt-badge--alert { background: var(--down-bg); color: var(--down); }
.tmt-badge--brand { background: var(--brand-bg); color: var(--brand); }

/* ---------- Bar list ----------
   A ranked list with a bar each (open interest by market, a treasury by
   holder): the name, a bar from zero scaled to the largest, the value in
   mono. One colour; a row that is not a peer of the others (Others, a
   bucket) is muted. */
.tmt-barlist {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tmt-barlist__row {
  display: grid;
  grid-template-columns: minmax(64px, var(--barlist-label, 132px)) minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 12px;
  padding: 3px 0;
}
.tmt-barlist__label {
  overflow: hidden;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
a.tmt-barlist__label:hover { text-decoration: underline; }
/* A linked name keeps the row's height on a phone (styles-mobile.css gives
   every link a 44px box, which spread the list to twice its height). */
a.tmt-barlist__label { min-height: 0; min-width: 0; }
.tmt-barlist__track {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-2);
}
.tmt-barlist__bar {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: color-mix(in oklab, var(--cat-1) 72%, transparent);
}
.tmt-barlist__row.is-muted .tmt-barlist__label { color: var(--ink-3); }
.tmt-barlist__row.is-muted .tmt-barlist__bar { background: var(--ink-4); }
.tmt-barlist__value {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .tmt-barlist__row { gap: 8px; grid-template-columns: minmax(56px, 88px) minmax(0, 1fr) minmax(56px, auto); }
}

/* ---------- Phones: text floors ----------
   docs/MOBILE.md section 1: text at 12px or more, an uppercase label at
   11px or more. The kit's desktop sizes above are unchanged; the shared
   --fs-* tokens are not touched. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tmt-kpi__label { font-size: 11px; letter-spacing: 0.06em; }
  .tmt-kpi__ctx,
  .tmt-kpi__note,
  .tmt-kpi__asof,
  .tmt-kpi__src,
  .tmt-kpi__unit { font-size: 12px; }
  .tmt-kpi__foot { flex-wrap: wrap; row-gap: 2px; }
  .tmt-kpi__foot .tmt-delta--chip,
  .tmt-kpi__status,
  .tmt-pill,
  .tmt-badge { font-size: 12px; }
  .tmt-tag { height: 20px; font-size: 12px; }
  .tmt-table thead th { font-size: 12px; }
  .tmt-sort__caret { font-size: 11px; }
  .tmt-tip, .tmt-tip__title { font-size: 12px; }
}

/* ---------- Phones: the sticky sub-bar and the section chips ----------
   docs/MOBILE.md section 3: under the ticker, the page's own sticky bar
   parks at --tmt-sticky-top (the chrome's line; until the chrome defines
   it, the foot of the chrome as tmt-kit.js measures it, --tmt-bar-top, and
   before that 111px, the top bar and the ribbon of a phone held upright). .tmt-subbar is that bar for a
   page's own controls (the IPO filter); .tmt-chips is the section strip of
   a long page (Commodities, AI Tracker, Hyperliquid): one row of chips that
   scrolls sideways, fading at the edge that has more ([data-hscroll] on its
   track, above), the section being read lit, and an optional control at its
   end that stays put. Their ground and their foot rule run to the screen's
   edges, so what scrolls under them never shows at their sides: drawn as a
   shadow clipped to the bar's height, which (unlike a negative margin) is
   right whatever gutter the page has and adds nothing to the page's width.
   The strip exists only on a phone; the sub-bar is only a style there. */
.tmt-chips { display: none; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tmt-subbar,
  .tmt-chips {
    position: sticky;
    top: var(--tmt-sticky-top, var(--tmt-bar-top, 111px));
    z-index: 30;
    background: var(--paper);
    box-shadow: 0 0 0 100vmax var(--paper), 0 1px 0 100vmax var(--rule);
    clip-path: inset(0 -100vmax -1px);
  }
  .tmt-chips {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-5);
  }
  .tmt-chips__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tmt-chips__track::-webkit-scrollbar { display: none; }
  /* A 34px pill with a 44px target: the hit area reaches into the track's
     5px padding above and below and half the gap either side. */
  .tmt-chips__chip {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    min-height: 0;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: 17px;
    background: var(--card);
    color: var(--ink-1);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  .tmt-chips__chip[hidden] { display: none; }
  .tmt-chips__chip::before { content: ''; position: absolute; inset: -5px -4px; }
  .tmt-chips__chip:active { background: var(--paper-2); }
  .tmt-chips__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .tmt-chips__chip[aria-current="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  /* The end's control brings its own 44px (a chip's 34px and the track's
     padding). */
  .tmt-chips__end {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    padding-left: 4px;
    border-left: 1px solid var(--rule-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tmt-chips__track { scroll-behavior: auto; }
}