/* Trading tab — live view (rework 2026-09-30). Design tokens only, so it follows both themes. */

.tl-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.tl-chip {
  display: inline-flex; flex-direction: column; gap: 1px; padding: .35rem .7rem; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-card); min-width: 7.5rem;
}
.tl-chip .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.tl-chip .v { font-size: .9rem; font-weight: 600; }
.tl-chip.ok   { border-color: var(--color-success); }
.tl-chip.ok .v   { color: var(--color-success-text); }
.tl-chip.warn { border-color: var(--color-warning); background: var(--color-warning-bg); }
.tl-chip.warn .v { color: var(--color-warning-text); }
.tl-chip.bad  { border-color: var(--color-danger); background: var(--color-danger-bg); }
.tl-chip.bad .v  { color: var(--color-danger-text); }

.tl-flag {
  margin-top: .75rem; padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--color-danger);
  background: var(--color-danger-bg); color: var(--color-danger-text); font-size: .85rem;
}
.tl-flag i { margin-right: .4rem; }

.tl-day { margin-bottom: .9rem; }
.tl-day h6 { display: flex; gap: .6rem; align-items: baseline; margin: .2rem 0 .3rem; font-size: .85rem; }
.tl-day h6 .tl-counts { font-weight: 400; color: var(--text-muted); font-size: .78rem; }
.tl-table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.tl-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.tl-table td { padding: .28rem .5rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.tl-table td.num, .tl-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tl-table .sub { color: var(--text-muted); font-size: .74rem; }

.tl-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  border: 1px solid var(--border-default); white-space: nowrap; }
.tl-pill.ok   { color: var(--color-success-text); background: var(--color-success-bg); border-color: var(--color-success); }
.tl-pill.warn { color: var(--color-warning-text); background: var(--color-warning-bg); border-color: var(--color-warning); }
.tl-pill.bad  { color: var(--color-danger-text);  background: var(--color-danger-bg);  border-color: var(--color-danger); }
.tl-pill.info { color: var(--color-info-text);    background: var(--color-info-bg);    border-color: var(--color-info); }
.tl-pill.muted { color: var(--text-muted); }

.tl-good { color: var(--color-success-text); }
.tl-badc { color: var(--color-danger-text); }
.tl-a1 { font-family: 'IBM Plex Mono', monospace; font-size: .76rem; padding: .3rem 0; border-bottom: 1px solid var(--border-light); }
.tl-a1.has-trigger { color: var(--color-danger-text); }
.tl-empty { color: var(--text-muted); font-size: .85rem; padding: .4rem .2rem; }