/* Markets list. Fills its container's height: head and footer stay put, the list scrolls.
   Comfortable rows (Simple) show name and shares held; compact rows (Pro) are one line with code, last and change. */
.tm-mrail { container: tm-mrail / inline-size; display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--tm-color-panel); font-variant-numeric: tabular-nums; }
.tm-mrail__head { display: grid; gap: var(--tm-space-12); padding: var(--tm-space-16) var(--tm-space-16) var(--tm-space-8); }
.tm-mrail__title { margin: 0; font-size: var(--tm-type-subtitle-size); line-height: var(--tm-type-subtitle-line); font-weight: var(--tm-font-weight-semibold); }
.tm-mrail__search { position: relative; }
.tm-mrail__search > .tm-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tm-color-text-secondary); pointer-events: none; }
.tm-mrail__search .tm-input__control { padding-left: 36px; padding-right: 36px; text-align: left; }
.tm-mrail__search .tm-input__control::-webkit-search-cancel-button { display: none; }
.tm-mrail__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.tm-mrail__tabs { display: flex; }
.tm-mrail__tabs > button { flex: 1 1 auto; min-width: 0; padding-inline: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tm-mrail__table th { white-space: normal; vertical-align: bottom; }
.tm-mrail__tabs.is-muted { opacity: 0.55; }
.tm-mrail__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-mrail__sub[hidden] { display: none; }
.tm-mrail__rule { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-mrail__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--tm-color-divider); }
.tm-mrail__group { padding: var(--tm-space-8) var(--tm-space-16) 4px; font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-mrail__empty { padding: var(--tm-space-24) var(--tm-space-16); color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); text-align: center; }

.tm-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--tm-space-12); width: 100%; min-height: 64px; padding: var(--tm-space-12) var(--tm-space-16); border: 0; border-bottom: 1px solid var(--tm-color-divider); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tm-mrow:hover { background: var(--tm-color-hover); }
.tm-mrow[aria-selected="true"] { background: var(--tm-color-primary-tint); box-shadow: inset 3px 0 0 var(--tm-color-primary); }
.tm-mrow:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.tm-mrow__id { display: grid; gap: 2px; min-width: 0; }
.tm-mrow__code { font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-mrow__code .tm-class { margin-left: 4px; vertical-align: 1px; }
.tm-mrow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-mrow__own { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-mrow__q { display: grid; justify-items: end; gap: 4px; }
.tm-mrow__spark, .tm-mrow__stats { display: none; }
.tm-mrow__k { color: var(--tm-color-text-secondary); }
@container tm-mrail (width >= 400px) {
  .tm-mrail:not(.tm-mrail--compact) .tm-mrow { grid-template-columns: minmax(0, 1fr) 88px auto; }
  .tm-mrow__spark { display: block; }
  .tm-mrow__spark svg { display: block; width: 88px; height: 32px; }
}
@container tm-mrail (width >= 520px) {
  .tm-mrail:not(.tm-mrail--compact) .tm-mrow { grid-template-columns: minmax(0, 1fr) 96px auto auto; column-gap: var(--tm-space-16); }
  .tm-mrow__spark svg { width: 96px; }
  .tm-mrow__stats { display: grid; gap: 2px; justify-items: end; font-size: var(--tm-density-font-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
}
.tm-mrow__px { font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-mrow .tm-change { font-size: var(--tm-density-font-small); font-weight: var(--tm-font-weight-medium); white-space: nowrap; }

.tm-mrail__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--tm-space-12); width: 100%; padding: var(--tm-space-12) var(--tm-space-16); border: 0; border-top: 1px solid var(--tm-color-divider); background: var(--tm-color-panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tm-mrail__foot:hover { background: var(--tm-color-hover); }
.tm-mrail__foot:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.tm-mrail__foot > .tm-icon { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--tm-color-text-secondary); }
.tm-mrail__k { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); min-width: 0; }
.tm-mrail__sub2 { grid-column: 1; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-mrail__foot b { grid-column: 1; font-size: var(--tm-density-font-body); line-height: var(--tm-density-line-body); font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-mrail__foot .tm-mrail__k { grid-column: 1; }

/* Compact (Pro watchlist panel): the dense market table, extra columns as the panel widens (data-table). */
.tm-mrail--compact .tm-mrail__head { gap: 6px; padding: 6px var(--tm-density-pad-cell); }
.tm-mrail--compact .tm-mrail__search .tm-input__control { min-height: 28px; padding-left: 30px; }
.tm-mrail--compact .tm-mrail__search > .tm-icon { left: 9px; }
.tm-mrail--compact .tm-mrail__rule { font-size: 11px; }
.tm-mrail--compact .tm-mrail__list { border-top: 0; }
.tm-mrail__table tbody tr { cursor: pointer; }
.tm-mrail__table tbody tr:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.tm-mrail__table .tm-status { font-size: 11px; padding: 0 6px; }
.tm-mrail__paused { padding: 2px 4px !important; }