/* Stock tabs: Trades, Statistics, Alerts, Announcements under the order book. Underline tabs that size to their
   labels (short forms in Sinhala and Tamil) and scroll sideways if they still don't fit. */
.tm-stab { container: tm-stab / inline-size; display: grid; align-content: start; gap: var(--tm-space-16); min-width: 0; }
.tm-stab__tabs { display: flex; overflow-x: auto; scrollbar-width: none; z-index: 3; background: var(--lk-canvas, var(--tm-color-bg)); }
/* The row stays in view while a long tab scrolls (the selection bubble's position: relative must not win). */
.tm-stab > .tm-stab__tabs.tm-tabs { position: sticky; top: var(--tm-dsk-top, 0px); }
.tm-stab__tabs::-webkit-scrollbar { display: none; }
.tm-stab__tabs > button { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.tm-stab__tabs .tm-count { position: static; }
.tm-stab__short { display: none; }
/* When the tab row still doesn't fit, it scrolls sideways and fades at the edge that has more. */
.tm-stab__tabs.is-more { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.tm-stab__tabs.is-more.is-end { mask-image: linear-gradient(to right, transparent, #000 24px); }
/* Narrow (phones): short labels and tighter tabs, so all four fit without scrolling. */
@container tm-stab (width < 440px) {
  .tm-stab__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: inset(50%); white-space: nowrap; }
  .tm-stab__short { display: inline; }
  .tm-stab__tabs > button { padding-inline: 4px; gap: 4px; }
  .tm-stab__tabs .tm-count { display: none; }
}
.tm-stab__pane { display: grid; gap: var(--tm-space-12); min-width: 0; }
.tm-stab__pane[hidden] { display: none; }
.tm-stab__h { margin-top: var(--tm-space-8); font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-stab__pane > .tm-stab__h:first-child { margin-top: 0; }
.tm-stab__meta { display: flex; align-items: baseline; gap: 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-stab__meta b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.tm-stab__trades { display: grid; gap: var(--tm-space-16); }
.tm-stab__trades .tm-stab__h { margin: 0 0 6px; }
@container tm-stab (width >= 620px) { .tm-stab__trades { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--tm-space-24); } }

.tm-stab__perf th[scope="row"] { text-align: left; font-weight: var(--tm-font-weight-regular, 400); color: var(--tm-color-text); }
.tm-stab__date { margin-left: 4px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-stab__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--tm-space-8); }
.tm-stab__stat { display: grid; gap: 2px; padding: var(--tm-space-12); border-radius: var(--lk-r-xs, var(--tm-radius-sm)); background: var(--tm-color-hover); min-width: 0; }
.tm-stab__stat[title] { cursor: help; }
.tm-stab__k { font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-stab__v { font-weight: var(--tm-font-weight-semibold); font-variant-numeric: tabular-nums; }
.tm-stab__note { margin: 0; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }

.tm-stab__row { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-12); }
.tm-stab__alerts { display: grid; gap: var(--tm-space-8); margin: 0; padding: 0; list-style: none; }
.tm-stab__alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--tm-space-12); padding: var(--tm-space-12); border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-sm, var(--tm-radius-sm)); }
.tm-stab__alert-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tm-color-hover); color: var(--tm-color-text-secondary); }
.tm-stab__alert-main { display: grid; gap: 2px; min-width: 0; }
.tm-stab__alert-main span { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-stab__act { display: grid; gap: 2px; padding: var(--tm-space-12) 0; border-bottom: 1px solid var(--tm-color-divider); }
.tm-stab__act > span:not(.tm-small) { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }

.tm-stab__dialog { width: min(480px, calc(100vw - 32px)); }
.tm-stab__form .tm-dialog__body { display: grid; gap: var(--tm-space-12); }
.tm-stab__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tm-space-12); }
.tm-stab__pair[hidden] { display: none; }
.tm-stab__channels { display: grid; gap: 0; }
.tm-stab__channels .tm-switch-row { min-height: 40px; border-bottom: 1px solid var(--tm-color-divider); }
/* Alert level: direction switch above the value (23 Oct 2026). */
.tm-stab__lvl { display: grid; gap: var(--tm-space-12); }
.tm-stab__lvl[hidden] { display: none; }