/* Components (DESIGN.md section 6, web states from section 12). Tokens only. docs/DESIGN_SYSTEM.md
 * lists each one with usage notes. */

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--control-height); min-width: 58px;
  padding: var(--space-sm) var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: filter var(--motion-fast) var(--ease-emphasized), background-color var(--motion-fast) var(--ease-emphasized);
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { filter: brightness(0.95); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--disabled-bg); color: var(--disabled-text); filter: none; cursor: default;
}
.btn svg { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; }
.btn--primary, .btn-primary, .btn-success { background: var(--primary); color: var(--on-primary); }
.btn--destructive, .btn-danger { background: var(--error); color: var(--on-error); }
.btn--neutral { background: var(--neutral-pill); color: var(--on-neutral-pill); }
.btn--muted, .btn--outline {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--outline);
}
.btn--muted:hover, .btn--outline:hover { color: var(--text); background: var(--hover-wash); filter: none; }
/* Text button: lime label, no container (dialog actions, "View all" style links). */
.btn--text { background: transparent; color: var(--primary); padding: var(--space-sm) var(--space-md); min-width: 0; }
.btn--text:hover { background: var(--hover-wash); filter: none; }
.btn--text.btn--danger-text { color: var(--error); }
.btn--sm, .btn-sm { min-height: 32px; padding: var(--space-xs) var(--space-md); font-size: var(--fs-label-md); }
.btn--block { width: 100%; }

/* Icon button: round, transparent, 40 px visible / 48 px target via padding-free sizing. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--control-height); height: var(--control-height); padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-emphasized), color var(--motion-fast) var(--ease-emphasized);
}
.icon-btn:hover { background: var(--hover-wash); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--outline { border: 1px solid var(--outline); color: var(--text-secondary); }
.icon-btn--outline:hover { color: var(--text); }
.icon-btn--primary { background: var(--primary); color: var(--on-primary); }
.icon-btn--primary:hover { background: var(--primary); filter: brightness(1.05); }
.icon-btn[aria-pressed="true"], .icon-btn.is-active { color: var(--primary); }
.icon-btn:disabled { color: var(--disabled-text); background: transparent; cursor: default; }

/* ===================== Cards ===================== */
.card {
  background: var(--surface); border-radius: var(--radius-card);
  padding: var(--space-md); min-width: 0; box-shadow: none;
}
.card--interactive { cursor: pointer; transition: background-color var(--motion-fast) var(--ease-emphasized); }
.card--interactive:hover { background: var(--surface-hover); }
.card--flush { padding: 0; overflow: hidden; }

/* Section header (DESIGN.md section 4): title-sm white, optional grey count, lime link on the right. */
.section-header {
  display: flex; align-items: center; gap: var(--space-sm); min-width: 0;
  margin-bottom: var(--space-sm);
}
.section-header__title { font-size: var(--fs-title-sm); font-weight: var(--fw-title-sm); color: var(--text); }
.section-header__count { font-size: var(--fs-body-md); color: var(--text-secondary); }
.section-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); }
.card-label { font-size: var(--fs-body-md); color: var(--text-secondary); }

/* KPI card: grey label, large bold value, signed change line (DESIGN.md section 12). */
.kpi { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.kpi__label { font-size: var(--fs-body-md); color: var(--text-secondary); }
.kpi__value {
  font-size: var(--fs-title-lg); font-weight: var(--fw-display-sm); line-height: 1.2;
  font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi__value--hero { font-size: var(--fs-display-sm); }
.kpi__meta { font-size: var(--fs-body-sm); color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== Gain / loss ===================== */
.change {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.change svg { width: var(--trend-icon-size); height: var(--trend-icon-size); flex-shrink: 0; }
.change--up, .positive { color: var(--success); }
.change--down, .negative { color: var(--danger); }
.change--flat { color: var(--text-secondary); }

/* ===================== Chips ===================== */
.chip-row { display: flex; gap: var(--space-sm); align-items: center; min-width: 0; }
.chip-row--scroll { overflow-x: auto; scrollbar-width: none; }
.chip-row--scroll::-webkit-scrollbar { display: none; }
/* A scrolling row clips everything outside its box, focus rings included: room for the 2 px ring + 2 px offset. */
.chip-row--scroll { padding: var(--space-xs); margin: calc(-1 * var(--space-xs)); }
.chip-row--wrap { flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-xs); flex-shrink: 0;
  min-height: 32px; padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-emphasized), color var(--motion-fast) var(--ease-emphasized);
}
.chip:hover { color: var(--text); background: var(--hover-wash); }
/* Neutral selection: white pill, black label (DESIGN.md 6.8). */
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-selected, .chip.active {
  background: var(--neutral-pill); color: var(--on-neutral-pill); border-color: transparent;
}
.chip:disabled, .chip[aria-disabled="true"] { color: var(--disabled-text); cursor: default; background: transparent; }
.chip__count {
  min-width: 18px; padding: 0 var(--space-xs); border-radius: var(--radius-pill);
  background: var(--hover-wash); font-size: var(--fs-label-sm); text-align: center;
}
.chip.is-selected .chip__count, .chip.active .chip__count { background: var(--disabled-bg); }

/* Chart tab (ui/tab-strip.js): a chip whose selected state is the neutral white pill (selection is neutral,
   DESIGN_SYSTEM rule 4). The close mark lives inside the tab and shows on the selected tab, and on hover or
   keyboard focus where a pointer can hover; touch never shows it on other tabs (no closes while swiping). */
.chart-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto;
  max-width: 220px; min-height: 36px; padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); line-height: 1.2;
  cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--motion-fast) var(--ease-emphasized), color var(--motion-fast) var(--ease-emphasized);
}
.chart-tab:hover { color: var(--text); background: var(--hover-wash); }
.chart-tab[aria-selected="true"] { background: var(--neutral-pill); color: var(--on-neutral-pill); border-color: transparent; }
.chart-tab__symbol { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chart-tab__tf { font-size: var(--fs-label-md); font-weight: var(--fw-body-sm); }
.chart-tab__provider {
  padding: 0 var(--space-xs); border: 1px solid currentColor; border-radius: var(--radius-pill);
  font-size: var(--fs-label-sm); font-weight: var(--fw-label-sm);
}
.chart-tab__close {
  position: relative; display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; margin-right: calc(-1 * var(--space-sm)); border-radius: var(--radius-pill);
}
.chart-tab__close::after { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)); } /* a bigger target */
.chart-tab__close svg { width: 14px; height: 14px; }
.chart-tab__close:hover { background: var(--hover-wash); }
.chart-tab[aria-selected="true"] .chart-tab__close { display: inline-flex; }
/* Reordering (ui/tab-drag.js): a held or dragged tab is outlined, the others slide aside. No shadow in this
   design language, so the lift is the outline and the wash. */
.chart-tab.is-lifted { border-color: var(--text); background: var(--surface); color: var(--text); }
.chart-tab.is-dragging { z-index: 1; transition: none; cursor: grabbing; }
.chart-tab.is-shifted { transition: transform var(--motion-fast) var(--ease-emphasized); }
@media (hover: hover) {
  .chart-tab:hover .chart-tab__close, .chart-tab:focus-visible .chart-tab__close { display: inline-flex; }
}

/* Time-range pills: transparent with grey labels; the selected one is lime (DESIGN.md 6.9). */
.range-pills { display: flex; align-items: center; gap: var(--space-xxs); min-width: 0; }
.range-pill {
  flex-shrink: 0; min-height: 32px; min-width: 40px; padding: var(--space-xs) var(--space-sm);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-emphasized), color var(--motion-fast) var(--ease-emphasized);
}
.range-pill:hover { color: var(--text); }
.range-pill[aria-checked="true"], .range-pill.active { background: var(--primary); color: var(--on-primary); }
.range-pill { position: relative; }
.range-pill:disabled, .range-pill[aria-disabled="true"] { color: var(--disabled-text); }
/* Plan-locked: still operable (it opens the upgrade prompt), so it keeps readable contrast and is
   marked by a small lock that takes no width. */
.range-pill.is-locked::after {
  content: "\1F512"; position: absolute; top: -2px; right: -2px; font-size: 9px; line-height: 1; pointer-events: none;
}

/* ===================== Fields ===================== */
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field__label { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.field__help { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.field__help--error { color: var(--error); }
/* Outlined field: transparent container (as in the reference screenshots), 1 px outline, lime on focus. */
.input, .select, .textarea {
  width: 100%; min-height: var(--control-height);
  padding: var(--space-sm) var(--space-md);
  background: transparent; color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--radius-field);
  font-size: var(--fs-body-md); line-height: 1.3;
  transition: border-color var(--motion-fast) var(--ease-emphasized);
}
.input::placeholder, .textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-secondary); }
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--primary); outline: none; }
.input[aria-invalid="true"], .input.is-error { border-color: var(--error); }
.input:disabled, .select:disabled { color: var(--disabled-text); border-color: var(--outline-variant); }
.select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: var(--space-xl);
  background-image: var(--select-caret);
  background-repeat: no-repeat; background-position: right var(--space-sm) center; background-size: 16px 16px;
}
.select option { background: var(--surface); color: var(--text); }
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap > .input { padding-left: calc(var(--space-md) + var(--icon-size-sm) + var(--space-sm)); }
.input-wrap__icon {
  position: absolute; left: var(--space-md); width: var(--icon-size-sm); height: var(--icon-size-sm);
  color: var(--text-secondary); pointer-events: none;
}

/* ===================== Switch (DESIGN.md 6.11) ===================== */
.switch {
  display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none;
  min-height: var(--control-height); font-size: var(--fs-body-md); color: var(--text);
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toggle-slider {
  position: relative; flex-shrink: 0; width: 52px; height: 32px; border-radius: var(--radius-pill);
  background: transparent; border: 2px solid var(--outline);
  transition: background-color var(--motion-normal) var(--ease-emphasized), border-color var(--motion-normal) var(--ease-emphasized);
}
.toggle-slider::before {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-secondary); transform: translateY(-50%);
  transition: transform var(--motion-normal) var(--ease-emphasized), width var(--motion-normal), height var(--motion-normal), background-color var(--motion-normal);
}
.switch input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .toggle-slider::before {
  width: 24px; height: 24px; left: 2px; transform: translate(22px, -50%); background: var(--on-primary);
}
.switch input:focus-visible + .toggle-slider { outline: var(--focus-ring-width) solid var(--primary); outline-offset: var(--focus-ring-gap); }
.switch input:disabled + .toggle-slider { border-color: var(--outline-variant); }

/* ===================== Badges & status ===================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-xs); flex-shrink: 0;
  padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill);
  border: 1px solid var(--outline); color: var(--text-secondary);
  font-size: var(--fs-label-sm); font-weight: var(--fw-label-sm); line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.badge:empty { display: none; }
.badge--warning { color: var(--warning); border-color: var(--warning); }
.badge--error { color: var(--error); border-color: var(--error); }
.badge--success { color: var(--success); border-color: var(--success); }
.badge--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.badge svg { width: 12px; height: 12px; }

/* Status pill: a coloured dot plus a text label, so colour is never the only signal. */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-secondary);
  font-size: var(--fs-label-md); font-weight: var(--fw-label-md); white-space: nowrap;
}
.status-pill__dot { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===================== Table (DESIGN.md section 12) ===================== */
.table-wrap { overflow-x: auto; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-md); }
.table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  padding: var(--space-sm) var(--space-md); text-align: left; white-space: nowrap;
  font-size: var(--fs-label-md); font-weight: var(--fw-label-md); color: var(--text-secondary);
  border-bottom: 1px solid var(--outline-variant);
}
.table td {
  height: var(--row-height); padding: 0 var(--space-md); white-space: nowrap;
  border-bottom: 1px solid var(--outline-variant); color: var(--text);
}
.table--dense td { height: var(--row-height-dense); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-hover); }
.table tbody tr.is-selected td { background: var(--surface-hover); }
.table .num { text-align: right; }
.table .muted { color: var(--text-secondary); }
.table td.truncate-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* ===================== Menu / popover ===================== */
.menu {
  min-width: 200px; padding: var(--space-sm) 0; background: var(--surface);
  border: 1px solid var(--outline); border-radius: var(--radius-sm);
}
.menu__item {
  display: flex; align-items: center; gap: var(--space-md); width: 100%;
  min-height: var(--touch-target); padding: 0 var(--space-md);
  background: none; border: 0; color: var(--text); text-align: left;
  font-size: var(--fs-body-md); cursor: pointer; text-decoration: none;
}
.menu__item:hover { background: var(--hover-wash); text-decoration: none; }
.menu__item svg { width: 20px; height: 20px; color: var(--text-secondary); }
.menu__item:disabled { color: var(--text-secondary); opacity: 0.5; cursor: default; background: none; }
/* The menu of a chart tab (ui/tab-menu.js): placed under the tab, above the sticky header. */
.tab-menu { position: fixed; z-index: var(--z-popover); }

/* ===================== Dialog, sheet, drawer ===================== */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim);
  display: flex; align-items: center; justify-content: center; padding: var(--space-md);
}
.dialog {
  width: min(560px, 100%); max-height: calc(100dvh - var(--space-xl)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-overlay); padding: var(--space-lg);
}
.dialog__title { font-size: var(--fs-title-lg); font-weight: var(--fw-title-lg); margin-bottom: var(--space-md); }
.dialog__body { font-size: var(--fs-body-md); color: var(--text-secondary); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }

/* ===================== Banner & toast ===================== */
.banner {
  display: flex; align-items: center; gap: var(--space-md); min-width: 0;
  padding: var(--space-md); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text);
}
.toast {
  display: inline-flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill); background: var(--inverse-surface); color: var(--inverse-on-surface);
  font-size: var(--fs-body-md);
}
.toast .btn--text { color: var(--inverse-primary); }
/* Toasts raised by TradeScopeDialog.toast(): bottom centre, above everything except a modal. */
.toast-region {
  position: fixed; left: 0; right: 0; bottom: var(--space-lg); z-index: var(--z-banner);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-md); pointer-events: none;
}
.toast-region .toast { padding: var(--space-sm) var(--space-lg); min-height: var(--control-height); max-width: 100%; }
.toast-region .toast__action { pointer-events: auto; margin-right: calc(-1 * var(--space-sm)); }

/* TradeScopeDialog (ui/dialog.js): confirm / prompt / alert, built from .scrim > .dialog. */
.ts-dialog .dialog { width: min(400px, 100%); }
.ts-dialog__message { color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ts-dialog__field { margin-top: var(--space-md); }
.ts-dialog .dialog__actions { margin-top: var(--space-md); }
input[aria-invalid="true"] { border-color: var(--error); }
.warning-text { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--warning); font-size: var(--fs-body-sm); }
.warning-text svg { width: var(--trend-icon-size); height: var(--trend-icon-size); }
.error-text { color: var(--error); }

/* ===================== Empty, loading, error ===================== */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md);
  padding: var(--space-xl) var(--space-md); text-align: center; color: var(--text);
  font-size: var(--fs-body-lg);
}
.state__hint { font-size: var(--fs-body-md); color: var(--text-secondary); max-width: 44ch; }
.state--error .state__title { color: var(--text); }
.spinner {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--outline-variant); border-top-color: var(--primary);
  animation: ts-spin 0.8s linear infinite;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.skeleton {
  display: block; border-radius: var(--radius-field); min-height: 1em;
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 400% 100%; animation: ts-shimmer 1.6s linear infinite;
}