/* ../design-system/css/tokens.css */
/* Trade Market tokens. Generated by tools/build.py from tokens/*.json. Do not edit by hand. */
/* Roles (layer 2) are written as values; palette (layer 1) stays in tokens/palette.json.
   Component tokens (layer 3) are written as var() references to roles. */

/* Dark is the default. Light follows the system setting unless data-theme says otherwise. */
:root {
  color-scheme: dark;
  --tm-color-bg: #111418;
  --tm-color-panel: #171B21;
  --tm-color-raised: #1E232B;
  --tm-color-divider: #262C35;
  --tm-color-divider-strong: #343B46;
  --tm-color-border-control: #626A77;
  --tm-color-text: #E6E8EB;
  --tm-color-text-secondary: #8C939D;
  --tm-color-text-faint: #6B727D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #6EA0FF;
  --tm-color-primary-tint: rgb(110 160 255 / 0.13);
  --tm-color-primary-tint-strong: rgb(110 160 255 / 0.2);
  --tm-color-focus: #6EA0FF;
  --tm-color-up: #2EBD85;
  --tm-color-on-up: #111418;
  --tm-color-up-tint: rgb(46 189 133 / 0.13);
  --tm-color-down: #F0616D;
  --tm-color-on-down: #111418;
  --tm-color-down-tint: rgb(240 97 109 / 0.13);
  --tm-color-warning: #E5A93B;
  --tm-color-warning-tint: rgb(229 169 59 / 0.13);
  --tm-color-hover: rgb(255 255 255 / 0.04);
  --tm-color-pressed: rgb(255 255 255 / 0.08);
  --tm-color-scrim: rgb(0 0 0 / 0.55);
  --tm-color-skeleton: #262C35;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 18px 40px -22px #000000B3;
  --tm-font-family-inter: "Inter", "Segoe UI", system-ui, sans-serif;
  --tm-font-family-geist: "Geist", "Segoe UI", system-ui, sans-serif;
  --tm-font-family-mono: "Geist Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --tm-font-family-sinhala: "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
  --tm-font-family-tamil: "Noto Sans Tamil", "Latha", sans-serif;
  --tm-font-weight-regular: 400;
  --tm-font-weight-medium: 500;
  --tm-font-weight-semibold: 600;
  --tm-font-feature-numbers: tnum;
  --tm-font-feature-slashed-zero: zero;
  --tm-type-display-size: 32px;
  --tm-type-display-line: 36px;
  --tm-type-display-weight: 600;
  --tm-type-display-large-size: 40px;
  --tm-type-display-large-line: 44px;
  --tm-type-display-large-weight: 600;
  --tm-type-title-size: 20px;
  --tm-type-title-line: 26px;
  --tm-type-title-weight: 600;
  --tm-type-subtitle-size: 17px;
  --tm-type-subtitle-line: 24px;
  --tm-type-subtitle-weight: 600;
  --tm-type-body-simple-size: 15px;
  --tm-type-body-simple-line: 22px;
  --tm-type-body-simple-weight: 400;
  --tm-type-body-pro-size: 13px;
  --tm-type-body-pro-line: 18px;
  --tm-type-body-pro-weight: 400;
  --tm-type-data-pro-size: 12.5px;
  --tm-type-data-pro-line: 16px;
  --tm-type-data-pro-weight: 500;
  --tm-type-label-size: 12px;
  --tm-type-label-line: 16px;
  --tm-type-label-weight: 500;
  --tm-type-axis-size: 11px;
  --tm-type-axis-line: 14px;
  --tm-type-axis-weight: 400;
  --tm-font-ui: var(--tm-font-family-inter);
  --tm-space-0: 0px;
  --tm-space-2: 2px;
  --tm-space-4: 4px;
  --tm-space-8: 8px;
  --tm-space-12: 12px;
  --tm-space-16: 16px;
  --tm-space-20: 20px;
  --tm-space-24: 24px;
  --tm-space-32: 32px;
  --tm-space-40: 40px;
  --tm-space-48: 48px;
  --tm-radius-xs: 4px;
  --tm-radius-sm: 6px;
  --tm-radius-md: 8px;
  --tm-radius-lg: 12px;
  --tm-radius-full: 999px;
  --tm-border-divider: 1px;
  --tm-border-focus: 2px;
  --tm-border-focus-offset: 2px;
  --tm-icon-sm: 16px;
  --tm-icon-md: 20px;
  --tm-z-base: 0;
  --tm-z-sticky: 10;
  --tm-z-dropdown: 100;
  --tm-z-sheet: 200;
  --tm-z-dialog: 300;
  --tm-z-toast: 400;
  --tm-motion-duration-fast: 120ms;
  --tm-motion-duration-base: 200ms;
  --tm-motion-duration-price-tint: 300ms;
  --tm-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --tm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --tm-breakpoint-phone-min: 360px;
  --tm-breakpoint-phone-max: 430px;
  --tm-breakpoint-tablet: 768px;
  --tm-breakpoint-desktop: 1024px;
  --tm-breakpoint-laptop: 1280px;
  --tm-breakpoint-wide: 1600px;
  --tm-breakpoint-ultra: 2240px;
  --tm-layout-content-simple: 1200px;
  --tm-layout-content-tablet: 720px;
  --tm-layout-gutter-phone: 16px;
  --tm-layout-gutter-tablet: 24px;
  --tm-layout-gutter-desktop: 32px;
  --tm-layout-ticket-docked: 360px;
  --tm-layout-sheet-side: 400px;
  --tm-layout-pro-watchlist-desktop: 240px;
  --tm-layout-pro-watchlist-laptop: 240px;
  --tm-layout-pro-watchlist-wide: 460px;
  --tm-layout-pro-watchlist-ultra: 700px;
  --tm-layout-pro-side-desktop: 300px;
  --tm-layout-pro-book-laptop: 260px;
  --tm-layout-pro-tape: 280px;
  --tm-layout-pro-ticket-laptop: 300px;
  --tm-layout-pro-ticket: 340px;
  --tm-layout-pro-dock-min: 160px;
  --tm-layout-pro-dock-max: 300px;
  --tm-layout-pro-min: 1024px;
  --tm-layout-pro-dock-collapse: 760px;
  --tm-density-font-body: 15px;
  --tm-density-line-body: 22px;
  --tm-density-font-data: 15px;
  --tm-density-line-data: 20px;
  --tm-density-font-label: 13px;
  --tm-density-font-small: 13px;
  --tm-density-row-height: 56px;
  --tm-density-table-row-height: 48px;
  --tm-density-control-height: 48px;
  --tm-density-control-height-xs: 30px;
  --tm-density-control-height-sm: 36px;
  --tm-density-control-height-lg: 56px;
  --tm-density-pad-cell: 16px;
  --tm-density-pad-panel: 20px;
  --tm-density-gap: 16px;
  --tm-density-radius-control: 12px;
  --tm-density-icon: 20px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --tm-color-bg: #F6F7F9;
    --tm-color-panel: #FFFFFF;
    --tm-color-raised: #FFFFFF;
    --tm-color-divider: #E4E7EB;
    --tm-color-divider-strong: #D3D8DF;
    --tm-color-border-control: #8C939D;
    --tm-color-text: #14171C;
    --tm-color-text-secondary: #5F6672;
    --tm-color-text-faint: #8C939D;
    --tm-color-primary: #366EE9;
    --tm-color-primary-hover: #2C62DC;
    --tm-color-primary-pressed: #2556C4;
    --tm-color-on-primary: #FFFFFF;
    --tm-color-primary-text: #1F5FD6;
    --tm-color-primary-tint: rgb(31 95 214 / 0.08);
    --tm-color-primary-tint-strong: rgb(31 95 214 / 0.14);
    --tm-color-focus: #1F5FD6;
    --tm-color-up: #067A4C;
    --tm-color-on-up: #FFFFFF;
    --tm-color-up-tint: rgb(6 122 76 / 0.09);
    --tm-color-down: #D6363F;
    --tm-color-on-down: #FFFFFF;
    --tm-color-down-tint: rgb(214 54 63 / 0.09);
    --tm-color-warning: #A15C00;
    --tm-color-warning-tint: rgb(161 92 0 / 0.1);
    --tm-color-hover: rgb(20 23 28 / 0.04);
    --tm-color-pressed: rgb(20 23 28 / 0.08);
    --tm-color-scrim: rgb(20 23 28 / 0.32);
    --tm-color-skeleton: #E4E7EB;
    --tm-shadow-none: 0px 0px 0px 0px #00000000;
    --tm-shadow-overlay: 0px 12px 32px -12px #141E3247, 0px 1px 2px 0px #141E321A;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --tm-color-bg: #F6F7F9;
  --tm-color-panel: #FFFFFF;
  --tm-color-raised: #FFFFFF;
  --tm-color-divider: #E4E7EB;
  --tm-color-divider-strong: #D3D8DF;
  --tm-color-border-control: #8C939D;
  --tm-color-text: #14171C;
  --tm-color-text-secondary: #5F6672;
  --tm-color-text-faint: #8C939D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #1F5FD6;
  --tm-color-primary-tint: rgb(31 95 214 / 0.08);
  --tm-color-primary-tint-strong: rgb(31 95 214 / 0.14);
  --tm-color-focus: #1F5FD6;
  --tm-color-up: #067A4C;
  --tm-color-on-up: #FFFFFF;
  --tm-color-up-tint: rgb(6 122 76 / 0.09);
  --tm-color-down: #D6363F;
  --tm-color-on-down: #FFFFFF;
  --tm-color-down-tint: rgb(214 54 63 / 0.09);
  --tm-color-warning: #A15C00;
  --tm-color-warning-tint: rgb(161 92 0 / 0.1);
  --tm-color-hover: rgb(20 23 28 / 0.04);
  --tm-color-pressed: rgb(20 23 28 / 0.08);
  --tm-color-scrim: rgb(20 23 28 / 0.32);
  --tm-color-skeleton: #E4E7EB;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 12px 32px -12px #141E3247, 0px 1px 2px 0px #141E321A;
}

[data-theme="dark"] {
  color-scheme: dark;
  --tm-color-bg: #111418;
  --tm-color-panel: #171B21;
  --tm-color-raised: #1E232B;
  --tm-color-divider: #262C35;
  --tm-color-divider-strong: #343B46;
  --tm-color-border-control: #626A77;
  --tm-color-text: #E6E8EB;
  --tm-color-text-secondary: #8C939D;
  --tm-color-text-faint: #6B727D;
  --tm-color-primary: #366EE9;
  --tm-color-primary-hover: #2C62DC;
  --tm-color-primary-pressed: #2556C4;
  --tm-color-on-primary: #FFFFFF;
  --tm-color-primary-text: #6EA0FF;
  --tm-color-primary-tint: rgb(110 160 255 / 0.13);
  --tm-color-primary-tint-strong: rgb(110 160 255 / 0.2);
  --tm-color-focus: #6EA0FF;
  --tm-color-up: #2EBD85;
  --tm-color-on-up: #111418;
  --tm-color-up-tint: rgb(46 189 133 / 0.13);
  --tm-color-down: #F0616D;
  --tm-color-on-down: #111418;
  --tm-color-down-tint: rgb(240 97 109 / 0.13);
  --tm-color-warning: #E5A93B;
  --tm-color-warning-tint: rgb(229 169 59 / 0.13);
  --tm-color-hover: rgb(255 255 255 / 0.04);
  --tm-color-pressed: rgb(255 255 255 / 0.08);
  --tm-color-scrim: rgb(0 0 0 / 0.55);
  --tm-color-skeleton: #262C35;
  --tm-shadow-none: 0px 0px 0px 0px #00000000;
  --tm-shadow-overlay: 0px 18px 40px -22px #000000B3;
}

/* Typeface: one token. */
[data-font="inter"] {
  --tm-font-ui: var(--tm-font-family-inter);
}
[data-font="geist"] {
  --tm-font-ui: var(--tm-font-family-geist);
}

/* Density: comfortable (Simple) is the default; compact is Pro. */
[data-density="comfortable"] {
  --tm-density-font-body: 15px;
  --tm-density-line-body: 22px;
  --tm-density-font-data: 15px;
  --tm-density-line-data: 20px;
  --tm-density-font-label: 13px;
  --tm-density-font-small: 13px;
  --tm-density-row-height: 56px;
  --tm-density-table-row-height: 48px;
  --tm-density-control-height: 48px;
  --tm-density-control-height-xs: 30px;
  --tm-density-control-height-sm: 36px;
  --tm-density-control-height-lg: 56px;
  --tm-density-pad-cell: 16px;
  --tm-density-pad-panel: 20px;
  --tm-density-gap: 16px;
  --tm-density-radius-control: 12px;
  --tm-density-icon: 20px;
}
[data-density="compact"] {
  --tm-density-font-body: 13px;
  --tm-density-line-body: 18px;
  --tm-density-font-data: 12.5px;
  --tm-density-line-data: 16px;
  --tm-density-font-label: 12px;
  --tm-density-font-small: 12px;
  --tm-density-row-height: 30px;
  --tm-density-table-row-height: 30px;
  --tm-density-control-height: 32px;
  --tm-density-control-height-xs: 22px;
  --tm-density-control-height-sm: 26px;
  --tm-density-control-height-lg: 40px;
  --tm-density-pad-cell: 8px;
  --tm-density-pad-panel: 12px;
  --tm-density-gap: 8px;
  --tm-density-radius-control: 6px;
  --tm-density-icon: 16px;
}
/* Pro on a touch screen (iPad landscape): same layout, larger hit targets. */
@media (pointer: coarse) {
  [data-density="compact"] {
    --tm-density-row-height: 36px;
    --tm-density-table-row-height: 36px;
    --tm-density-control-height: 36px;
    --tm-density-control-height-sm: 32px;
    --tm-density-control-height-xs: 28px;
  }
}

/* Component tokens reference roles only. Declared on every scope that can change a role,
   so a nested data-theme or data-density re-resolves them. */
:root, [data-theme], [data-density], [data-font] {
  --tm-button-primary-bg: var(--tm-color-primary);
  --tm-button-primary-bg-hover: var(--tm-color-primary-hover);
  --tm-button-primary-bg-pressed: var(--tm-color-primary-pressed);
  --tm-button-primary-fg: var(--tm-color-on-primary);
  --tm-button-secondary-border: var(--tm-color-border-control);
  --tm-button-secondary-fg: var(--tm-color-text);
  --tm-button-secondary-bg-hover: var(--tm-color-hover);
  --tm-button-ghost-fg: var(--tm-color-text);
  --tm-button-ghost-bg-hover: var(--tm-color-hover);
  --tm-button-ghost-bg-pressed: var(--tm-color-pressed);
  --tm-button-buy-bg: var(--tm-color-up);
  --tm-button-buy-fg: var(--tm-color-on-up);
  --tm-button-sell-bg: var(--tm-color-down);
  --tm-button-sell-fg: var(--tm-color-on-down);
  --tm-button-radius: var(--tm-density-radius-control);
  --tm-input-bg: var(--tm-color-bg);
  --tm-input-border: var(--tm-color-border-control);
  --tm-input-border-focus: var(--tm-color-focus);
  --tm-input-border-error: var(--tm-color-down);
  --tm-input-fg: var(--tm-color-text);
  --tm-input-placeholder: var(--tm-color-text-secondary);
  --tm-input-affix: var(--tm-color-text-secondary);
  --tm-input-radius: var(--tm-density-radius-control);
  --tm-segmented-bg: var(--tm-color-bg);
  --tm-segmented-border: var(--tm-color-divider-strong);
  --tm-segmented-selected-bg: var(--tm-color-primary-tint);
  --tm-segmented-selected-fg: var(--tm-color-primary-text);
  --tm-segmented-buy-bg: var(--tm-color-up-tint);
  --tm-segmented-buy-fg: var(--tm-color-up);
  --tm-segmented-sell-bg: var(--tm-color-down-tint);
  --tm-segmented-sell-fg: var(--tm-color-down);
  --tm-tabs-fg: var(--tm-color-text-secondary);
  --tm-tabs-selected-fg: var(--tm-color-text);
  --tm-tabs-indicator: var(--tm-color-primary-text);
  --tm-panel-bg: var(--tm-color-panel);
  --tm-panel-divider: var(--tm-color-divider);
  --tm-panel-header-fg: var(--tm-color-text);
  --tm-panel-radius: var(--tm-radius-sm);
  --tm-sheet-bg: var(--tm-color-raised);
  --tm-sheet-radius: var(--tm-radius-lg);
  --tm-sheet-shadow: var(--tm-shadow-overlay);
  --tm-sheet-handle: var(--tm-color-divider-strong);
  --tm-menu-bg: var(--tm-color-raised);
  --tm-menu-shadow: var(--tm-shadow-overlay);
  --tm-menu-item-hover: var(--tm-color-hover);
  --tm-table-header-fg: var(--tm-color-text-secondary);
  --tm-table-row-hover: var(--tm-color-hover);
  --tm-table-row-selected: var(--tm-color-primary-tint);
  --tm-table-row-halted-fg: var(--tm-color-text-secondary);
  --tm-table-divider: var(--tm-color-divider);
  --tm-change-up: var(--tm-color-up);
  --tm-change-down: var(--tm-color-down);
  --tm-change-flat: var(--tm-color-text-secondary);
  --tm-price-tint-up: var(--tm-color-up);
  --tm-price-tint-down: var(--tm-color-down);
  --tm-order-book-bid-depth: var(--tm-color-up-tint);
  --tm-order-book-ask-depth: var(--tm-color-down-tint);
  --tm-order-book-price: var(--tm-color-text);
  --tm-order-book-level-hover: var(--tm-color-hover);
  --tm-chart-line-up: var(--tm-color-up);
  --tm-chart-line-down: var(--tm-color-down);
  --tm-chart-baseline: var(--tm-color-divider-strong);
  --tm-chart-grid: var(--tm-color-divider);
  --tm-chart-axis: var(--tm-color-text-secondary);
  --tm-chart-session-shade: var(--tm-color-hover);
  --tm-chart-crosshair: var(--tm-color-text-secondary);
  --tm-banner-info-bg: var(--tm-color-primary-tint);
  --tm-banner-info-icon: var(--tm-color-primary-text);
  --tm-banner-warning-bg: var(--tm-color-warning-tint);
  --tm-banner-warning-icon: var(--tm-color-warning);
  --tm-banner-halt-bg: var(--tm-color-warning-tint);
  --tm-banner-halt-icon: var(--tm-color-warning);
  --tm-banner-error-bg: var(--tm-color-down-tint);
  --tm-banner-error-icon: var(--tm-color-down);
  --tm-status-neutral-bg: var(--tm-color-hover);
  --tm-status-neutral-fg: var(--tm-color-text-secondary);
  --tm-status-uncertain-bg: var(--tm-color-warning-tint);
  --tm-status-uncertain-fg: var(--tm-color-warning);
  --tm-status-error-bg: var(--tm-color-down-tint);
  --tm-status-error-fg: var(--tm-color-down);
  --tm-status-active-fg: var(--tm-color-text);
  --tm-market-state-open: var(--tm-color-up);
  --tm-market-state-pre-open: var(--tm-color-warning);
  --tm-market-state-closed: var(--tm-color-text-secondary);
  --tm-market-state-halted: var(--tm-color-warning);
  --tm-focus-ring: var(--tm-color-focus);
  --tm-skeleton: var(--tm-color-skeleton);
  --tm-link: var(--tm-color-primary-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tm-motion-duration-fast: 0ms;
    --tm-motion-duration-base: 0ms;
    --tm-motion-duration-price-tint: 0ms;
  }
}

/* ../design-system/css/trade-market.css */
/* Trade Market components. Generated by tools/build.py. */

/* ---- css/base.css ---- */
/* Trade Market base: type, numbers, focus, utilities. Loads after tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

.tm-root, body.tm-root {
  margin: 0;
  background: var(--tm-color-bg);
  color: var(--tm-color-text);
  font-family: var(--tm-font-ui);
  font-size: var(--tm-density-font-body);
  line-height: var(--tm-density-line-body);
  font-weight: var(--tm-font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[data-font], [data-density], [data-theme] { font-family: var(--tm-font-ui); }
[data-theme] { color: var(--tm-color-text); }

/* Sinhala and Tamil: the script face first, the Latin face for digits and codes. */
:lang(si) { --tm-font-ui: var(--tm-font-family-sinhala); }
:lang(ta) { --tm-font-ui: var(--tm-font-family-tamil); }

/* Every number uses tabular figures. */
.tm-num, .tm-price, .tm-change, .tm-table td, .tm-table th, input { font-variant-numeric: tabular-nums; }
.tm-mono { font-family: var(--tm-font-family-mono); font-variant-numeric: tabular-nums; font-size: 0.92em; letter-spacing: 0; }
[data-density="compact"] .tm-table { font-feature-settings: "tnum", "zero"; }

.tm-up { color: var(--tm-change-up); }
.tm-down { color: var(--tm-change-down); }
.tm-flat, .tm-secondary { color: var(--tm-color-text-secondary); }
.tm-warning-text { color: var(--tm-color-warning); }

.tm-display { font-size: var(--tm-type-display-size); line-height: var(--tm-type-display-line); font-weight: var(--tm-type-display-weight); letter-spacing: -0.02em; }
.tm-title { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); font-weight: var(--tm-type-title-weight); letter-spacing: -0.01em; margin: 0; }
.tm-subtitle { font-size: var(--tm-type-subtitle-size); line-height: var(--tm-type-subtitle-line); font-weight: var(--tm-type-subtitle-weight); margin: 0; }
.tm-label { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); font-weight: var(--tm-type-label-weight); color: var(--tm-color-text-secondary); }
.tm-small { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }

.tm-icon { flex: none; display: inline-block; vertical-align: middle; }

:where(.tm-root, [data-theme]) :focus-visible {
  outline: var(--tm-border-focus) solid var(--tm-focus-ring);
  outline-offset: var(--tm-border-focus-offset);
}

.tm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Price-change tint: the number's colour, never the cell background. */
@keyframes tm-tint-up { 0%, 30% { color: var(--tm-price-tint-up); } 100% { color: inherit; } }
@keyframes tm-tint-down { 0%, 30% { color: var(--tm-price-tint-down); } 100% { color: inherit; } }
.tm-tint-up { animation: tm-tint-up calc(var(--tm-motion-duration-price-tint) * 3) var(--tm-motion-easing-standard); }
.tm-tint-down { animation: tm-tint-down calc(var(--tm-motion-duration-price-tint) * 3) var(--tm-motion-easing-standard); }
@media (prefers-reduced-motion: reduce) { .tm-tint-up, .tm-tint-down { animation: none; } }

/* ---- components/button/button.css ---- */
/* Button: primary (blue), secondary (outline), ghost, Buy (up), Sell (down). Sizes XS, S, M, L.
   Trade buttons are the one place a whole control takes a status colour. */
.tm-btn {
  --_h: var(--tm-density-control-height);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tm-space-8);
  min-height: var(--_h); padding: 0 calc(var(--_h) * 0.38);
  border: 1px solid transparent; border-radius: var(--tm-button-radius);
  background: transparent; color: var(--tm-button-ghost-fg);
  font: var(--tm-font-weight-semibold) var(--tm-density-font-body)/1.2 var(--tm-font-ui);
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  transition: background-color var(--tm-motion-duration-fast) var(--tm-motion-easing-standard), border-color var(--tm-motion-duration-fast);
  -webkit-tap-highlight-color: transparent;
}
.tm-btn--xs { --_h: var(--tm-density-control-height-xs); gap: var(--tm-space-4); padding: 0 calc(var(--_h) * 0.36); font-size: max(12px, calc(var(--tm-density-font-small) - 0.5px)); }
.tm-btn--sm { --_h: var(--tm-density-control-height-sm); font-size: var(--tm-density-font-small); }
.tm-btn--lg { --_h: var(--tm-density-control-height-lg); }
.tm-btn--block { display: flex; width: 100%; }
.tm-btn--primary { background: var(--tm-button-primary-bg); color: var(--tm-button-primary-fg); }
.tm-btn--primary:hover { background: var(--tm-button-primary-bg-hover); }
.tm-btn--primary:active { background: var(--tm-button-primary-bg-pressed); }
.tm-btn--secondary { border-color: var(--tm-button-secondary-border); color: var(--tm-button-secondary-fg); }
.tm-btn--secondary:hover, .tm-btn--ghost:hover { background: var(--tm-button-ghost-bg-hover); }
.tm-btn--secondary:active, .tm-btn--ghost:active { background: var(--tm-button-ghost-bg-pressed); }
.tm-btn--buy { background: var(--tm-button-buy-bg); color: var(--tm-button-buy-fg); }
.tm-btn--sell { background: var(--tm-button-sell-bg); color: var(--tm-button-sell-fg); }
.tm-btn--buy:hover, .tm-btn--sell:hover { filter: brightness(1.06); }
.tm-btn--buy:active, .tm-btn--sell:active { filter: brightness(0.94); }
.tm-btn:disabled, .tm-btn[aria-disabled="true"] {
  background: var(--tm-color-hover); border-color: transparent; color: var(--tm-color-text-faint);
  cursor: not-allowed; filter: none;
}
.tm-btn.is-hover { background: var(--tm-button-ghost-bg-hover); }
.tm-btn--primary.is-hover { background: var(--tm-button-primary-bg-hover); }
.tm-btn--primary.is-pressed { background: var(--tm-button-primary-bg-pressed); }
.tm-btn--buy.is-hover, .tm-btn--sell.is-hover { filter: brightness(1.06); }
.tm-btn.is-focus { outline: var(--tm-border-focus) solid var(--tm-focus-ring); outline-offset: var(--tm-border-focus-offset); }
.tm-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.tm-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--_spin, var(--tm-color-text)); animation: tm-spin 0.8s linear infinite;
}
.tm-btn--primary.is-loading { --_spin: var(--tm-button-primary-fg); }
.tm-btn--buy.is-loading { --_spin: var(--tm-button-buy-fg); }
.tm-btn--sell.is-loading { --_spin: var(--tm-button-sell-fg); }
@keyframes tm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tm-btn.is-loading::after { animation-duration: 2.4s; } }

/* Icon button */
.tm-icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; padding: 0;
  width: var(--tm-density-control-height-sm); height: var(--tm-density-control-height-sm);
  border: 1px solid transparent; border-radius: var(--tm-radius-md);
  background: transparent; color: var(--tm-color-text-secondary); cursor: pointer;
}
.tm-icon-btn:hover { background: var(--tm-color-hover); color: var(--tm-color-text); }
.tm-icon-btn:active { background: var(--tm-color-pressed); }
.tm-icon-btn--outline { border-color: var(--tm-color-border-control); color: var(--tm-color-text); }
.tm-icon-btn[aria-pressed="true"] { color: var(--tm-color-primary-text); background: var(--tm-color-primary-tint); }
.tm-icon-btn:disabled { color: var(--tm-color-text-faint); cursor: not-allowed; background: none; }
.tm-icon-btn .tm-count { position: absolute; top: -3px; right: -4px; }

/* Link */
.tm-link { color: var(--tm-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tm-link) 45%, transparent); text-underline-offset: 3px; cursor: pointer; }
.tm-link:hover { text-decoration-color: var(--tm-link); }
.tm-link--standalone { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-weight: var(--tm-font-weight-medium); background: none; border: 0; padding: 0; font: inherit; font-weight: var(--tm-font-weight-medium); color: var(--tm-link); }
.tm-link--standalone:hover { text-decoration: underline; }

.tm-btn--xs.is-loading::after { width: 12px; height: 12px; }

/* ---- components/input/input.css ---- */
/* Text and number input. Label above, hint or error below. Prefix (LKR) and suffix slots. */
.tm-field { display: grid; gap: var(--tm-space-4); min-width: 0; }
.tm-field__label { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); }
.tm-field__hint { font-size: var(--tm-density-font-small); line-height: 1.4; color: var(--tm-color-text-secondary); }
.tm-field__error { display: flex; gap: var(--tm-space-4); align-items: flex-start; font-size: var(--tm-density-font-small); line-height: 1.4; color: var(--tm-color-text); }
.tm-field__error .tm-icon { color: var(--tm-input-border-error); margin-top: 1px; }
.tm-input {
  display: flex; align-items: center; gap: var(--tm-space-8);
  min-height: var(--tm-density-control-height); padding: 0 calc(var(--tm-density-pad-cell) * 0.75);
  background: var(--tm-input-bg); color: var(--tm-input-fg);
  border: 1px solid var(--tm-input-border); border-radius: var(--tm-input-radius);
  transition: border-color var(--tm-motion-duration-fast);
}
.tm-input:hover { border-color: var(--tm-color-text-secondary); }
.tm-input:focus-within, .tm-input.is-focus { border-color: var(--tm-input-border-focus); box-shadow: 0 0 0 1px var(--tm-input-border-focus); }
.tm-field--error .tm-input { border-color: var(--tm-input-border-error); }
.tm-field--error .tm-input:focus-within { box-shadow: 0 0 0 1px var(--tm-input-border-error); }
.tm-input__control {
  flex: 1; min-width: 0; width: 100%; height: calc(var(--tm-density-control-height) - 2px);
  border: 0; outline: 0; padding: 0; background: transparent; color: inherit;
  font: var(--tm-font-weight-medium) var(--tm-density-font-body)/1 var(--tm-font-ui);
  font-variant-numeric: tabular-nums;
}
.tm-input__control::placeholder { color: var(--tm-input-placeholder); font-weight: var(--tm-font-weight-regular); }
.tm-input__control[inputmode="decimal"], .tm-input__control[inputmode="numeric"] { text-align: right; }
.tm-input__affix { flex: none; color: var(--tm-input-affix); font-size: var(--tm-density-font-small); font-weight: var(--tm-font-weight-medium); }
.tm-input.is-disabled, .tm-input:has(:disabled) { background: var(--tm-color-hover); border-color: var(--tm-color-divider); color: var(--tm-color-text-faint); }
.tm-input:has(:disabled):hover { border-color: var(--tm-color-divider); }

/* ---- components/price-stepper/price-stepper.css ---- */
/* Price stepper: − and + move one valid price step and snap to it. Shows today's allowed range.
   Off-step prices show the two nearest valid prices as tappable suggestions. */
.tm-stepper .tm-input { padding: 0; gap: 0; }
.tm-stepper__btn {
  flex: none; display: grid; place-items: center; width: var(--tm-density-control-height); height: calc(var(--tm-density-control-height) - 2px);
  border: 0; background: none; color: var(--tm-color-text); cursor: pointer;
}
.tm-stepper__btn:first-child { border-right: 1px solid var(--tm-color-divider); border-radius: var(--tm-input-radius) 0 0 var(--tm-input-radius); }
.tm-stepper__btn:last-child { border-left: 1px solid var(--tm-color-divider); border-radius: 0 var(--tm-input-radius) var(--tm-input-radius) 0; }
.tm-stepper__btn:hover { background: var(--tm-color-hover); }
.tm-stepper__btn:disabled { color: var(--tm-color-text-faint); cursor: not-allowed; background: none; }
.tm-stepper .tm-input__control { text-align: center; padding: 0 var(--tm-space-8); }
.tm-stepper__meta { display: flex; justify-content: space-between; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-stepper__suggest { display: flex; flex-wrap: wrap; gap: var(--tm-space-8); margin-top: var(--tm-space-4); }

/* ---- components/amount-input/amount-input.css ---- */
/* Amount or quantity: enter shares, or a rupee amount that converts to whole shares with fees and shows the leftover. */
.tm-amount__head { display: flex; justify-content: space-between; align-items: center; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-amount__head .tm-seg { --_seg-h: calc(var(--tm-density-control-height-sm) - 6px); }
.tm-amount__result { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.45; }
.tm-amount__result b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }

/* ---- components/select/select.css ---- */
/* Select: native select for short lists; listbox with descriptions for choices that need a line of explanation. */
.tm-select { position: relative; }
.tm-select select {
  appearance: none; width: 100%; min-height: var(--tm-density-control-height);
  padding: 0 calc(var(--tm-density-pad-cell) * 0.75 + 24px) 0 calc(var(--tm-density-pad-cell) * 0.75);
  background: var(--tm-input-bg); color: var(--tm-input-fg); border: 1px solid var(--tm-input-border); border-radius: var(--tm-input-radius);
  font: var(--tm-font-weight-medium) var(--tm-density-font-body)/1.2 var(--tm-font-ui); cursor: pointer;
}
.tm-select select:hover { border-color: var(--tm-color-text-secondary); }
.tm-select select:focus-visible { outline: none; border-color: var(--tm-input-border-focus); box-shadow: 0 0 0 1px var(--tm-input-border-focus); }
.tm-select > .tm-icon { position: absolute; right: calc(var(--tm-density-pad-cell) * 0.75); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tm-color-text-secondary); }

.tm-dropdown { position: relative; }
.tm-dropdown__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-8); width: 100%;
  min-height: var(--tm-density-control-height); padding: 0 calc(var(--tm-density-pad-cell) * 0.75);
  background: var(--tm-input-bg); color: var(--tm-input-fg); border: 1px solid var(--tm-input-border); border-radius: var(--tm-input-radius);
  font: var(--tm-font-weight-medium) var(--tm-density-font-body)/1.2 var(--tm-font-ui); text-align: left; cursor: pointer;
}
.tm-dropdown__trigger:hover { border-color: var(--tm-color-text-secondary); }
.tm-dropdown__trigger[aria-expanded="true"] { border-color: var(--tm-input-border-focus); box-shadow: 0 0 0 1px var(--tm-input-border-focus); }
.tm-dropdown__trigger .tm-icon { color: var(--tm-color-text-secondary); }
.tm-listbox {
  position: absolute; z-index: var(--tm-z-dropdown); left: 0; top: calc(100% + 4px);
  min-width: 100%; width: max-content; max-width: min(440px, calc(100vw - 24px)); /* longest option title, left-aligned to the trigger; descriptions wrap (contain: inline-size) */
  margin: 0; padding: var(--tm-space-4); list-style: none;
  background: var(--tm-menu-bg); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md); box-shadow: var(--tm-menu-shadow);
  max-height: 320px; overflow: auto;
}
.tm-listbox [role="option"] { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--tm-space-8); padding: var(--tm-space-8) var(--tm-space-12); border-radius: var(--tm-radius-xs); cursor: pointer; }
/* A list shown inline (not floating under a trigger) fits its container instead of growing to its longest option. */
.tm-listbox.is-static { position: static; width: auto; min-width: 0; max-width: 100%; box-shadow: none; }
.tm-listbox [role="option"] + [role="option"] { margin-top: 3px; }
.tm-listbox [role="option"] b { font-weight: var(--tm-font-weight-medium); }
.tm-listbox [role="option"] span { contain: inline-size; grid-column: 1; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.4; }
.tm-listbox [role="option"] .tm-icon { grid-column: 2; grid-row: 1; color: var(--tm-color-primary-text); visibility: hidden; }
.tm-listbox [role="option"][aria-selected="true"] .tm-icon { visibility: visible; }
.tm-listbox [role="option"]:hover, .tm-listbox [role="option"].is-active { background: var(--tm-menu-item-hover); }

/* ---- components/segmented/segmented.css ---- */
/* Segmented control: 2 to 5 options. Selection is blue; the Buy/Sell variant takes the side colour. */
.tm-seg {
  --_seg-h: calc(var(--tm-density-control-height) - 8px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 3px; gap: 2px; background: var(--tm-segmented-bg);
  border: 1px solid var(--tm-segmented-border); border-radius: var(--tm-input-radius);
}
.tm-seg--inline { display: inline-grid; grid-auto-columns: auto; }
.tm-seg button {
  min-height: var(--_seg-h); padding: 2px calc(var(--tm-density-pad-cell) * 0.75);
  border: 0; border-radius: calc(var(--tm-input-radius) - 3px); background: none; color: var(--tm-color-text-secondary);
  font: var(--tm-font-weight-medium) var(--tm-density-font-small)/1.2 var(--tm-font-ui); cursor: pointer; white-space: normal;
  transition: background-color var(--tm-motion-duration-fast), color var(--tm-motion-duration-fast);
}
.tm-seg button:hover { color: var(--tm-color-text); }
.tm-seg button[aria-pressed="true"] { background: var(--tm-segmented-selected-bg); color: var(--tm-segmented-selected-fg); font-weight: var(--tm-font-weight-semibold); }
.tm-seg button:disabled { color: var(--tm-color-text-faint); cursor: not-allowed; }
.tm-seg--side button { font-size: var(--tm-density-font-body); }
.tm-seg--side button[data-side="buy"][aria-pressed="true"] { background: var(--tm-segmented-buy-bg); color: var(--tm-segmented-buy-fg); }
.tm-seg--side button[data-side="sell"][aria-pressed="true"] { background: var(--tm-segmented-sell-bg); color: var(--tm-segmented-sell-fg); }

/* ---- components/switch/switch.css ---- */
.tm-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-16); min-height: var(--tm-density-control-height); }
.tm-switch-row > span { min-width: 0; }
.tm-switch {
  flex: none; position: relative; width: 40px; height: 24px; padding: 0; border-radius: 999px;
  border: 1px solid var(--tm-color-border-control); background: var(--tm-color-bg); cursor: pointer;
  transition: background-color var(--tm-motion-duration-fast), border-color var(--tm-motion-duration-fast);
}
.tm-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tm-color-text-secondary); transition: transform var(--tm-motion-duration-fast) var(--tm-motion-easing-standard), background-color var(--tm-motion-duration-fast);
}
.tm-switch[aria-checked="true"] { background: var(--tm-color-primary); border-color: var(--tm-color-primary); }
.tm-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--tm-color-on-primary); }
.tm-switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- components/otp-input/otp-input.css ---- */
/* One-time code: one real input (so paste, autofill and screen readers work) drawn as six recessed cells.
   The typed digits show in the cells; the next empty cell carries the focus ring. */
.tm-otp { position: relative; display: grid; grid-template-columns: repeat(var(--_n, 6), minmax(0, 1fr)); gap: var(--tm-space-8); max-width: 360px; }
.tm-otp__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 2em; opacity: 0.01; cursor: text;
}
.tm-otp__cell {
  display: grid; place-items: center; height: calc(var(--tm-density-control-height-lg) + 4px);
  border: 1px solid var(--tm-color-border-control); border-radius: var(--tm-density-radius-control);
  background: var(--tm-color-panel); color: var(--tm-color-text);
  font: var(--tm-font-weight-semibold) 22px/1 var(--tm-font-ui); font-feature-settings: var(--tm-font-feature-numbers);
  pointer-events: none; transition: border-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast);
}
.tm-otp.is-focus .tm-otp__cell.is-next, .tm-otp.is-focus.is-full .tm-otp__cell:last-child { border-color: var(--tm-color-focus); box-shadow: 0 0 0 1px var(--tm-color-focus); }
.tm-otp.is-error .tm-otp__cell { border-color: var(--tm-color-down); }
.tm-otp.is-disabled { opacity: 0.5; }
.tm-otp__resend { display: flex; align-items: center; gap: var(--tm-space-8); min-height: 32px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
@media (max-width: 360px) { .tm-otp { gap: var(--tm-space-4); } }

/* Instrument look: the cells are wells with the same focus glow as the text fields. */
[data-design="instrument"] .tm-otp__cell { background: var(--lk-well); border-color: var(--lk-field-border); border-radius: var(--lk-r-control, 12px); box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi); }
[data-design="instrument"] .tm-otp.is-focus .tm-otp__cell.is-next, [data-design="instrument"] .tm-otp.is-focus.is-full .tm-otp__cell:last-child { border-color: var(--tm-color-focus); box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 0 0 3px var(--tm-color-primary-tint-strong), 0 0 18px -6px var(--tm-color-primary-text); }
[data-design="instrument"] .tm-otp.is-error .tm-otp__cell { border-color: var(--tm-color-down); }

/* ---- components/choice-card/choice-card.css ---- */
/* Choice cards: a radio group (or checkboxes) drawn as cards, for choices that need a sentence each
   (language, "How do you invest?", what to import). Cards in a row end level; the picked card gets the
   selected tint, a blue edge and a check. Two or three across from 480px wide, stacked below. */
.tm-choices { display: grid; gap: var(--tm-space-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min, 200px)), 1fr)); align-items: stretch; }
.tm-choices--list { grid-template-columns: 1fr; gap: var(--tm-space-8); }
.tm-choice {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-content: start; gap: var(--tm-space-4) var(--tm-space-12);
  min-height: 56px; padding: var(--tm-space-16); text-align: left;
  border: 1px solid var(--tm-color-border-control); border-radius: var(--tm-radius-lg); background: var(--tm-color-panel); color: var(--tm-color-text);
  font: inherit; cursor: pointer; transition: border-color var(--tm-motion-duration-fast), background-color var(--tm-motion-duration-fast);
}
.tm-choice:hover { border-color: var(--tm-color-text-secondary); }
.tm-choice:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.tm-choice[aria-checked="true"] { border-color: var(--tm-color-primary-text); background: var(--tm-color-primary-tint); }
.tm-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.tm-choice__title { display: flex; align-items: center; gap: var(--tm-space-8); font-weight: var(--tm-font-weight-semibold); font-size: var(--tm-density-font-body); line-height: 1.3; }
.tm-choice__title > .tm-icon { color: var(--tm-color-text-secondary); flex: none; }
.tm-choice__text { grid-column: 1; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.5; }
.tm-choice__meta { grid-column: 1 / -1; align-self: end; margin-top: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-choice__mark {
  grid-column: 2; grid-row: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--tm-color-border-control); color: transparent; flex: none;
}
.tm-choices--multi .tm-choice__mark { border-radius: 6px; }
.tm-choice[aria-checked="true"] .tm-choice__mark { background: var(--tm-color-primary); border-color: var(--tm-color-primary); color: var(--tm-color-on-primary); }
.tm-choice__mark > .tm-icon { width: 14px; height: 14px; stroke-width: 2.5; }
/* The language picker names each language in its own script, so the title is bigger. */
.tm-choice--lang .tm-choice__title { font-size: 20px; font-weight: var(--tm-font-weight-medium); }
/* A small picture of what the choice looks like (How do you invest?). */
.tm-choice__art { grid-column: 1 / -1; margin-top: var(--tm-space-12); border-radius: var(--tm-radius-md); background: var(--tm-color-bg); padding: var(--tm-space-12); display: grid; gap: 6px; }
.tm-choice__art i { display: block; height: 6px; border-radius: 3px; background: var(--tm-color-divider-strong); }
.tm-choice__art b { display: block; height: 12px; width: 55%; border-radius: 4px; background: var(--tm-color-text-secondary); opacity: .6; }
.tm-choice__art--pro { grid-template-columns: 1.4fr 1fr 1fr; }
.tm-choice__art--pro i { height: 4px; }
.tm-choice__art--pro span { display: grid; gap: 4px; align-content: start; }

[data-design="instrument"] .tm-choice { border-radius: var(--lk-r-lg, 20px); border-color: var(--lk-field-border); background: var(--lk-content, var(--tm-color-panel)); }
[data-design="instrument"] .tm-choice[aria-checked="true"] { border-color: var(--tm-color-primary-text); background: var(--tm-color-primary-tint); }
[data-design="instrument"] .tm-choice__mark { box-shadow: none; }
[data-design="instrument"] .tm-choice[aria-checked="true"] .tm-choice__mark { background: var(--lk-primary, var(--tm-color-primary)); border-color: var(--lk-primary, var(--tm-color-primary)); color: #fff; }
[data-design="instrument"] .tm-choice__art { border-radius: var(--lk-r-md, 12px); background: var(--lk-well, var(--tm-color-bg)); }
@supports (corner-shape: squircle) { [data-design="instrument"] .tm-choices:not(.tm-choices--multi) .tm-choice__mark { corner-shape: round; } }

/* ---- components/date-picker/date-picker.css ---- */
/* Date picker for "Valid until a date". Weekends and market holidays are disabled with a reason. */
.tm-datepicker { position: relative; }
.tm-calendar {
  width: 296px; max-width: 100%; padding: var(--tm-space-12);
  background: var(--tm-menu-bg); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md); box-shadow: var(--tm-menu-shadow);
}
.tm-datepicker .tm-calendar { position: absolute; z-index: var(--tm-z-dropdown); top: calc(100% + 4px); left: 0; }
.tm-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tm-space-8); font-weight: var(--tm-font-weight-semibold); }
.tm-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.tm-calendar__dow { font-size: 12px; color: var(--tm-color-text-secondary); padding: 4px 0; }
.tm-calendar__grid button {
  aspect-ratio: 1; border: 0; border-radius: var(--tm-radius-xs); background: none; color: var(--tm-color-text);
  font: var(--tm-font-weight-medium) 13px/1 var(--tm-font-ui); font-variant-numeric: tabular-nums; cursor: pointer;
}
.tm-calendar__grid button:hover:not(:disabled) { background: var(--tm-color-hover); }
.tm-calendar__grid button:disabled { color: var(--tm-color-text-faint); cursor: not-allowed; }
.tm-calendar__grid button.is-today { box-shadow: inset 0 0 0 1px var(--tm-color-divider-strong); }
.tm-calendar__grid button.is-holiday { text-decoration: line-through; }
.tm-calendar__grid button[aria-pressed="true"] { background: var(--tm-color-primary); color: var(--tm-color-on-primary); }
.tm-calendar__note { margin-top: var(--tm-space-8); font-size: 12px; line-height: 1.4; color: var(--tm-color-text-secondary); }

/* ---- components/search/search.css ---- */
/* Search: name or code, results grouped by company with each share class and its label. */
.tm-search { position: relative; min-width: 0; }
.tm-search .tm-input { gap: var(--tm-space-8); }
.tm-search .tm-input > .tm-icon { color: var(--tm-color-text-secondary); }
.tm-search__results {
  position: absolute; z-index: var(--tm-z-dropdown); left: 0; right: 0; top: calc(100% + 4px);
  background: var(--tm-menu-bg); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md); box-shadow: var(--tm-menu-shadow);
  max-height: 380px; overflow: auto; padding: var(--tm-space-4) 0;
}
.tm-search__results.is-static { position: static; box-shadow: none; }
.tm-search__group { padding: var(--tm-space-8) var(--tm-space-12) var(--tm-space-4); font-size: var(--tm-density-font-label); font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); }
.tm-search__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--tm-space-8); align-items: center; width: 100%; padding: var(--tm-space-8) var(--tm-space-12); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tm-search__item:hover, .tm-search__item.is-active { background: var(--tm-menu-item-hover); }
.tm-search__item b { font-weight: var(--tm-font-weight-semibold); }
.tm-search__item .tm-search__px { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--tm-density-font-small); }
.tm-search__empty { padding: var(--tm-space-12); color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-search__recent { display: flex; flex-wrap: wrap; gap: var(--tm-space-8); padding: var(--tm-space-4) var(--tm-space-12) var(--tm-space-8); }

/* ---- components/tabs/tabs.css ---- */
/* Tabs: underline for pages, contained for panels, folder (add tm-tabs--folder to underline tabs) for a section that opens below the row; the Lumen look draws folder tabs, the others show underline. Tabs wrap to a scroll row instead of truncating long labels. */
.tm-tabs { display: flex; gap: var(--tm-space-4); overflow-x: auto; scrollbar-width: none; }
.tm-tabs::-webkit-scrollbar { display: none; }
.tm-tabs button {
  flex: none; border: 0; background: none; cursor: pointer; color: var(--tm-tabs-fg);
  font: var(--tm-font-weight-medium) var(--tm-density-font-body)/1.2 var(--tm-font-ui); white-space: nowrap;
}
.tm-tabs--underline { border-bottom: 1px solid var(--tm-color-divider); gap: calc(var(--tm-density-pad-cell) * 1.25); }
.tm-tabs--underline button { padding: calc(var(--tm-density-pad-cell) * 0.6) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.tm-tabs--underline button[aria-selected="true"] { color: var(--tm-tabs-selected-fg); border-bottom-color: var(--tm-tabs-indicator); }
.tm-tabs--contained button { padding: calc(var(--tm-density-pad-cell) * 0.4) calc(var(--tm-density-pad-cell) * 0.8); border-radius: var(--tm-radius-sm); font-size: var(--tm-density-font-small); }
.tm-tabs--contained button[aria-selected="true"] { background: var(--tm-color-primary-tint); color: var(--tm-color-primary-text); }
.tm-tabs button:hover { color: var(--tm-color-text); }
.tm-tabs button .tm-count { margin-left: 6px; }
/* A row with hidden tabs fades on that side (data-more from tabs.js), so a cut-off label reads as "scroll for more". */
.tm-tabs[data-more="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tm-tabs[data-more="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tm-tabs[data-more="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---- components/tooltip/tooltip.css ---- */
/* Tooltip: shown on hover and keyboard focus. Optional shortcut. */
.tm-tip { position: relative; display: inline-flex; }
.tm-tooltip {
  position: absolute; z-index: var(--tm-z-dropdown); bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--tm-space-8); width: max-content; max-width: 240px;
  padding: 6px 8px; border-radius: var(--tm-radius-xs);
  background: var(--tm-color-raised); color: var(--tm-color-text); border: 1px solid var(--tm-color-divider); box-shadow: var(--tm-shadow-overlay);
  font: var(--tm-font-weight-regular) 12px/1.4 var(--tm-font-ui);
  opacity: 0; visibility: hidden; transition: opacity var(--tm-motion-duration-fast); pointer-events: none;
}
.tm-tip:hover .tm-tooltip, .tm-tip:focus-within .tm-tooltip, .tm-tooltip.is-open { opacity: 1; visibility: visible; }
.tm-tooltip--below { bottom: auto; top: calc(100% + 6px); }
/* Alignment for triggers near an edge: start lines the tooltip up with the trigger's left edge, end with its right.
   tooltip.js also nudges any open tooltip back inside the window or its clipping container. */
.tm-tooltip--start { left: 0; transform: none; }
.tm-tooltip--end { left: auto; right: 0; transform: none; }

/* ---- components/menu/menu.css ---- */
/* Menu and popover: actions with icons and shortcuts. Closes on Escape and outside click. */
.tm-menu-wrap { position: relative; display: inline-block; }
.tm-menu {
  position: absolute; z-index: var(--tm-z-dropdown); top: calc(100% + 4px); right: 0; min-width: 220px;
  margin: 0; padding: var(--tm-space-4); list-style: none;
  background: var(--tm-menu-bg); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md); box-shadow: var(--tm-menu-shadow);
}
.tm-menu.is-static { position: static; display: block; }
.tm-menu [role="menuitem"] {
  display: flex; align-items: center; gap: var(--tm-space-12); width: 100%;
  padding: var(--tm-space-8) var(--tm-space-12); border: 0; border-radius: var(--tm-radius-xs);
  background: none; color: var(--tm-color-text); font: var(--tm-font-weight-regular) var(--tm-density-font-body)/1.3 var(--tm-font-ui); text-align: left; cursor: pointer;
}
.tm-menu [role="menuitem"] .tm-icon { color: var(--tm-color-text-secondary); }
.tm-menu [role="menuitem"] .tm-kbd { margin-left: auto; }
.tm-menu [role="menuitem"]:hover, .tm-menu [role="menuitem"]:focus-visible { background: var(--tm-menu-item-hover); outline: none; }
.tm-menu [role="menuitem"][aria-disabled="true"] { color: var(--tm-color-text-faint); cursor: not-allowed; }
.tm-menu [role="separator"] { height: 1px; margin: var(--tm-space-4) 0; background: var(--tm-color-divider); }
.tm-popover { padding: var(--tm-space-12) var(--tm-space-16); max-width: 300px; font-size: var(--tm-density-font-small); line-height: 1.5; }

/* ---- components/sheet/sheet.css ---- */
/* Bottom sheet (phone): half or full height, with a handle. Slides in; respects reduced motion. */
.tm-sheet-host { position: relative; overflow: hidden; }
.tm-sheet-scrim { position: absolute; inset: 0; z-index: var(--tm-z-sheet); background: var(--tm-color-scrim); opacity: 0; transition: opacity var(--tm-motion-duration-base); }
.tm-sheet {
  position: absolute; z-index: calc(var(--tm-z-sheet) + 1); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 92%;
  background: var(--tm-sheet-bg); border-radius: var(--tm-sheet-radius) var(--tm-sheet-radius) 0 0; box-shadow: var(--tm-sheet-shadow);
  transform: translateY(100%); transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tm-sheet--half { height: 52%; }
.tm-sheet--full { height: 92%; }
.tm-sheet-host.is-open .tm-sheet { transform: none; }
.tm-sheet-host.is-open .tm-sheet-scrim { opacity: 1; }
.tm-sheet-host:not(.is-open) .tm-sheet-scrim { pointer-events: none; }
.tm-sheet__handle { display: block; width: 100%; padding: 8px 0 4px; border: 0; background: none; cursor: grab; }
.tm-sheet__handle::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--tm-sheet-handle); }
.tm-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-8); padding: var(--tm-space-4) var(--tm-space-16) var(--tm-space-12); }
.tm-sheet__body { flex: 1; overflow: auto; padding: 0 var(--tm-space-16) var(--tm-space-16); }

/* ---- components/dialog/dialog.css ---- */
/* Dialog: confirm or informational. Native <dialog> for focus trapping and Escape. */
.tm-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-lg);
  background: var(--tm-color-raised); color: var(--tm-color-text); box-shadow: var(--tm-shadow-overlay);
  font-family: var(--tm-font-ui);
}
.tm-dialog::backdrop { background: var(--tm-color-scrim); }
.tm-dialog.is-inline { position: static; display: block; margin: 0; width: 100%; max-width: 440px; }
.tm-dialog__body { padding: var(--tm-space-20) var(--tm-space-20) var(--tm-space-8); display: grid; gap: var(--tm-space-8); }
.tm-dialog__body p { margin: 0; color: var(--tm-color-text-secondary); line-height: 1.5; }
.tm-dialog__actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: var(--tm-space-8); padding: var(--tm-space-16) var(--tm-space-20) var(--tm-space-20); }

/* Buttons never stack: they stay side by side and share the width; a long label wraps inside its button. */
.tm-dialog__actions > .tm-btn { flex: 1 1 auto; min-width: 0; padding-inline: 14px; }
.tm-dialog__actions > .tm-btn:only-child { flex: 0 0 auto; }

/* ---- components/side-panel/side-panel.css ---- */
/* Side panel (desktop): docked on the right, used for the order ticket on Simple stock pages. */
.tm-side-panel {
  position: sticky; top: var(--tm-space-16); align-self: start; width: 100%; max-width: 380px;
  background: var(--tm-color-panel); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-sm);
}
.tm-side-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-8); padding: var(--tm-density-pad-panel); border-bottom: 1px solid var(--tm-color-divider); }
.tm-side-panel__body { padding: var(--tm-density-pad-panel); }

/* ---- components/toast/toast.css ---- */
/* Toast: neutral, success, warning, error. Quiet, with an optional action. No celebrations. */
.tm-toast-region { position: fixed; z-index: var(--tm-z-toast); left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: var(--tm-space-8); width: min(420px, calc(100vw - 32px)); }
.tm-toast {
  display: flex; align-items: flex-start; gap: var(--tm-space-12); padding: var(--tm-space-12) var(--tm-space-12) var(--tm-space-12) var(--tm-space-16);
  background: var(--tm-color-raised); color: var(--tm-color-text); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-overlay); font-size: var(--tm-density-font-small); line-height: 1.45;
  animation: tm-toast-in var(--tm-motion-duration-base) var(--tm-motion-easing-standard);
}
.tm-toast > .tm-icon { margin-top: 1px; color: var(--tm-color-text-secondary); }
.tm-toast--success > .tm-icon { color: var(--tm-color-primary-text); }
.tm-toast--warning > .tm-icon { color: var(--tm-color-warning); }
.tm-toast--error > .tm-icon { color: var(--tm-color-down); }
.tm-toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.tm-toast__text b { display: block; font-weight: var(--tm-font-weight-semibold); }
.tm-toast .tm-link--standalone { white-space: nowrap; align-self: center; margin-top: 0; } /* the action sits on the toast's centre line, with the close button */
.tm-toast > .tm-icon-btn { align-self: center; }
@keyframes tm-toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---- components/banner/banner.css ---- */
/* Banner: info, warning, halt, error. Inline in a block, or page-wide under the header. Always with an icon. */
.tm-banner {
  display: flex; align-items: flex-start; gap: var(--tm-space-12);
  padding: calc(var(--tm-density-pad-cell) * 0.75) var(--tm-density-pad-cell);
  border-radius: var(--tm-radius-md); font-size: var(--tm-density-font-small); line-height: 1.45; color: var(--tm-color-text);
}
.tm-banner > .tm-icon { margin-top: 1px; }
.tm-banner__text { flex: 1; min-width: 0; }
.tm-banner__text b { font-weight: var(--tm-font-weight-semibold); }
.tm-banner__text > b:first-child { margin-right: 4px; }
.tm-banner__action { flex: none; align-self: center; }
.tm-banner--info { background: var(--tm-banner-info-bg); } .tm-banner--info > .tm-icon { color: var(--tm-banner-info-icon); }
.tm-banner--warning { background: var(--tm-banner-warning-bg); } .tm-banner--warning > .tm-icon { color: var(--tm-banner-warning-icon); }
.tm-banner--halt { background: var(--tm-banner-halt-bg); } .tm-banner--halt > .tm-icon { color: var(--tm-banner-halt-icon); }
.tm-banner--error { background: var(--tm-banner-error-bg); } .tm-banner--error > .tm-icon { color: var(--tm-banner-error-icon); }
.tm-banner--offline { background: var(--tm-color-hover); } .tm-banner--offline > .tm-icon { color: var(--tm-color-text-secondary); }
.tm-banner--page { border-radius: 0; padding-inline: max(var(--tm-density-pad-panel), env(safe-area-inset-left, 0px)); }

/* ---- components/chip/chip.css ---- */
/* Chips and badges: share-class badge, order status pill, count badge, filter chip. */
.tm-class {
  display: inline-flex; align-items: center; justify-self: start; align-self: center; padding: 1px 6px; border-radius: var(--tm-radius-xs);
  border: 1px solid var(--tm-color-divider-strong); color: var(--tm-color-text-secondary);
  font: var(--tm-font-weight-medium) 12px/16px var(--tm-font-ui); white-space: nowrap;
}
.tm-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--tm-status-neutral-bg); color: var(--tm-status-neutral-fg);
  font: var(--tm-font-weight-medium) 12px/16px var(--tm-font-ui); white-space: nowrap;
}
.tm-status .tm-icon { width: 14px; height: 14px; }
.tm-status--active { color: var(--tm-status-active-fg); }
.tm-status--uncertain { background: var(--tm-status-uncertain-bg); color: var(--tm-status-uncertain-fg); }
.tm-status--error { background: var(--tm-status-error-bg); color: var(--tm-status-error-fg); }
.tm-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--tm-color-primary); color: var(--tm-color-on-primary); font: var(--tm-font-weight-semibold) 11px/1 var(--tm-font-ui); font-variant-numeric: tabular-nums;
}
.tm-count--neutral { background: var(--tm-color-divider-strong); color: var(--tm-color-text); }
.tm-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--tm-color-divider-strong); background: none; color: var(--tm-color-text-secondary);
  font: var(--tm-font-weight-medium) var(--tm-density-font-small)/1 var(--tm-font-ui); cursor: pointer;
}
[data-density="compact"] .tm-filter { min-height: 26px; padding: 0 10px; }
.tm-filter:hover { color: var(--tm-color-text); }
.tm-filter[aria-pressed="true"] { background: var(--tm-color-primary-tint); border-color: transparent; color: var(--tm-color-primary-text); }
.tm-group-letter {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--tm-radius-xs);
  border: 1px solid var(--tm-color-border-control); color: var(--tm-color-text); font: var(--tm-font-weight-semibold) 11px/1 var(--tm-font-ui);
}

/* ---- components/avatar/avatar.css ---- */
.tm-avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tm-color-raised); border: 1px solid var(--tm-color-divider-strong); color: var(--tm-color-text);
  font: var(--tm-font-weight-semibold) 12px/1 var(--tm-font-ui);
}
.tm-avatar--sm { width: 24px; height: 24px; font-size: 10.5px; }
.tm-avatar--lg { width: 44px; height: 44px; font-size: 15px; }

/* ---- components/divider/divider.css ---- */
.tm-divider { height: 1px; border: 0; margin: 0; background: var(--tm-color-divider); }
.tm-divider--vertical { width: 1px; height: auto; align-self: stretch; }
.tm-divider--strong { background: var(--tm-color-divider-strong); }

/* ---- components/skeleton/skeleton.css ---- */
/* Skeletons: text, number, row, chart. A slow, low-contrast shimmer; static with reduced motion. */
.tm-skel { display: block; border-radius: var(--tm-radius-xs); background: var(--tm-skeleton); position: relative; overflow: hidden; }
.tm-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--tm-color-hover), transparent); transform: translateX(-100%); animation: tm-shimmer 1.6s ease-in-out infinite; }
@keyframes tm-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tm-skel::after { animation: none; } }
.tm-skel--text { height: 0.8em; width: 60%; }
.tm-skel--num { height: 1em; width: 64px; }
.tm-skel--display { height: 32px; width: 160px; }
.tm-skel--chart { height: 160px; width: 100%; }
.tm-skel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tm-space-8); align-items: center; min-height: var(--tm-density-row-height); border-bottom: 1px solid var(--tm-color-divider); padding: 0 var(--tm-density-pad-cell); }
.tm-skel-row > div { display: grid; gap: 6px; }

/* ---- components/empty-state/empty-state.css ---- */
.tm-empty { display: grid; justify-items: center; gap: var(--tm-space-8); padding: var(--tm-space-32) var(--tm-space-16); text-align: center; }
.tm-empty > .tm-icon { color: var(--tm-color-text-secondary); margin-bottom: var(--tm-space-4); }
.tm-empty__title { font-weight: var(--tm-font-weight-semibold); }
.tm-empty__text { max-width: 36ch; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.5; margin: 0; }
.tm-empty .tm-btn { margin-top: var(--tm-space-8); }

/* ---- components/kbd/kbd.css ---- */
.tm-kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--tm-radius-xs);
  border: 1px solid var(--tm-color-divider-strong); border-bottom-width: 2px; background: var(--tm-color-bg); color: var(--tm-color-text-secondary);
  font: var(--tm-font-weight-medium) 11.5px/1 var(--tm-font-ui);
}

/* ---- components/price/price.css ---- */
/* Price and change. Prices in the interface face with tabular figures; LKR set smaller before the amount.
   Change always carries ▲ ▼ and a sign, so colour is never the only signal. */
.tm-price { font-variant-numeric: tabular-nums; font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-price__cur { font-size: 0.55em; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); margin-right: 0.3em; letter-spacing: 0; vertical-align: 0.12em; }
.tm-price--display { font-size: var(--tm-type-display-size); line-height: var(--tm-type-display-line); letter-spacing: -0.02em; }
.tm-price--title { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); }
.tm-price--data { font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); font-weight: var(--tm-font-weight-medium); }
.tm-price--data .tm-price__cur { font-size: 0.85em; vertical-align: 0; }
.tm-change { font-variant-numeric: tabular-nums; font-weight: var(--tm-font-weight-medium); white-space: nowrap; }
.tm-change--up { color: var(--tm-change-up); }
.tm-change--down { color: var(--tm-change-down); }
.tm-change--flat { color: var(--tm-change-flat); }
.tm-change--pill { display: inline-block; min-width: 76px; padding: 4px 8px; border-radius: var(--tm-radius-sm); text-align: right; }
.tm-change--pill.tm-change--up { background: var(--tm-color-up-tint); }
.tm-change--pill.tm-change--down { background: var(--tm-color-down-tint); }
.tm-change--pill.tm-change--flat { background: var(--tm-color-hover); }

/* ---- components/stat/stat.css ---- */
/* Stat: label above value. Grid of stats separated by dividers. */
.tm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); column-gap: var(--tm-space-16); border-top: 1px solid var(--tm-color-divider); }
.tm-stat { display: grid; gap: 2px; padding: calc(var(--tm-density-pad-cell) * 0.75) 0; border-bottom: 1px solid var(--tm-color-divider); min-width: 0; }
.tm-stat__label { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); color: var(--tm-color-text-secondary); }
.tm-stat__value { font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); font-weight: var(--tm-font-weight-medium); font-variant-numeric: tabular-nums; }
.tm-stat__sub { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-stats--inline { display: flex; flex-wrap: wrap; gap: var(--tm-space-4) var(--tm-space-24); border: 0; }
.tm-stats--inline .tm-stat { border: 0; padding: 0; }

/* ---- components/key-value/key-value.css ---- */
/* Key-value list for quote and order details. */
.tm-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.tm-kv > dt, .tm-kv > dd { padding: calc(var(--tm-density-pad-cell) * 0.5) 0; border-bottom: 1px solid var(--tm-color-divider); margin: 0; }
.tm-kv > dt { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); padding-right: var(--tm-space-12); align-self: center; }
.tm-kv > dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--tm-font-weight-medium); font-size: var(--tm-density-font-data); }
.tm-kv > dt:last-of-type, .tm-kv > dd:last-of-type { border-bottom: 0; }
.tm-kv--total > dt:last-of-type, .tm-kv--total > dd:last-of-type { border-top: 1px solid var(--tm-color-divider-strong); font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }

/* ---- components/data-table/data-table.css ---- */
/* Data table: two densities, sortable headers, sticky header, selected, halted and stale rows.
   Bid and Ask stay neutral; only change columns carry direction colour. */
.tm-table-wrap { overflow: auto; max-width: 100%; position: relative; }
.tm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); }
.tm-table th, .tm-table td { padding: 0 var(--tm-density-pad-cell); height: var(--tm-density-table-row-height); border-bottom: 1px solid var(--tm-table-divider); text-align: right; white-space: nowrap; }
.tm-table th:first-child, .tm-table td:first-child { text-align: left; }
.tm-table .is-left { text-align: left; }
.tm-table thead th {
  position: sticky; top: 0; z-index: 1; height: calc(var(--tm-density-table-row-height) - 4px);
  background: var(--tm-color-panel); color: var(--tm-table-header-fg); font-size: var(--tm-density-font-label); font-weight: var(--tm-font-weight-medium);
  border-bottom-color: var(--tm-color-divider-strong);
}
.tm-table thead th button { all: unset; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; color: inherit; }
.tm-table thead th button:focus-visible { outline: var(--tm-border-focus) solid var(--tm-focus-ring); outline-offset: 2px; border-radius: 2px; }
.tm-table thead th[aria-sort] { color: var(--tm-color-text); }
.tm-table thead th .tm-icon { width: 12px; height: 12px; opacity: 0.7; }
.tm-table tbody tr { cursor: default; }
.tm-table tbody tr:hover td { background: var(--tm-table-row-hover); }
.tm-table tbody tr.is-selected td { background: var(--tm-table-row-selected); }
.tm-table tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--tm-color-primary-text); }
.tm-table tbody tr.is-halted td { color: var(--tm-table-row-halted-fg); }
.tm-table tbody tr.is-stale td .tm-num { color: var(--tm-color-text-secondary); }
.tm-table .tm-code { font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-table td > .tm-code, .tm-table td .tm-status, .tm-table td .tm-class { vertical-align: middle; }
.tm-table td .tm-status, .tm-table td .tm-class { margin-left: 6px; }
.tm-table td .tm-status { padding-block: 0; line-height: 18px; }
.tm-table--simple td { height: var(--tm-density-row-height); }
.tm-table-foot { display: flex; justify-content: space-between; gap: var(--tm-space-8); padding: var(--tm-space-8) var(--tm-density-pad-cell); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
/* Column priority inside a panel (container tm-panel): extra columns appear as the panel widens.
   tm-col-md from 390px (Bid, Ask), tm-col-lg from 460px (Volume), tm-col-xl from 700px (Turnover, Trades).
   Below 520px a status pill keeps its icon and tooltip; the word stays for screen readers. */
@container tm-panel (width < 700px) { .tm-col-xl { display: none; } }
@container tm-panel (width < 520px) {
  .tm-table td .tm-status { padding: 2px; margin-left: 4px; }
  .tm-table td .tm-status__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container tm-panel (width < 460px) { .tm-col-lg { display: none; } }
@container tm-panel (width < 390px) { .tm-col-md { display: none; } }
@container tm-panel (width < 300px) { .tm-table th, .tm-table td { padding-inline: 6px; } }

/* ---- components/security-row/security-row.css ---- */
/* Security row. Simple leads with the company name; Pro leads with the code. */
.tm-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--tm-space-12); align-items: center; min-height: var(--tm-density-row-height); padding: var(--tm-space-8) var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); color: inherit; text-decoration: none; background: none; width: 100%; border-left: 0; border-right: 0; border-top: 0; font: inherit; text-align: left; cursor: pointer; }
.tm-sec:hover { background: var(--tm-color-hover); }
.tm-sec__name { display: block; font-weight: var(--tm-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sec__meta { display: flex; align-items: center; gap: 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); flex-wrap: wrap; }
.tm-sec__right { display: grid; justify-items: end; gap: 2px; text-align: right; }
.tm-sec__right .tm-price { font-size: var(--tm-density-font-data); font-weight: var(--tm-font-weight-medium); }
.tm-sec__right .tm-change { font-size: var(--tm-density-font-small); }
.tm-sec .tm-spark { width: 64px; height: 28px; }
.tm-sec--pro { grid-template-columns: 76px minmax(0, 1fr) 64px 64px; gap: var(--tm-space-8); padding-block: 0; font-size: var(--tm-density-font-data); }
.tm-sec--pro .tm-sec__code { font-weight: var(--tm-font-weight-semibold); }
.tm-sec--pro .tm-num { text-align: right; }
.tm-sec.is-halted .tm-sec__name, .tm-sec.is-halted .tm-price { color: var(--tm-color-text-secondary); }

/* ---- components/sparkline/sparkline.css ---- */
/* Sparkline: one line in the day's direction colour, dotted previous-close baseline. */
.tm-spark { display: block; overflow: visible; }
.tm-spark__base { stroke: var(--tm-chart-baseline); stroke-dasharray: 2 3; fill: none; }
.tm-spark__area { fill: none; stroke: none; }
.tm-spark__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tm-spark--up .tm-spark__line { stroke: var(--tm-chart-line-up); }
.tm-spark--down .tm-spark__line { stroke: var(--tm-chart-line-down); }
.tm-spark--flat .tm-spark__line { stroke: var(--tm-color-text-secondary); }

/* ---- components/line-chart/line-chart.css ---- */
/* Line chart (Simple): ranges 1D to 5Y, drag or hover to read, previous close dotted, pre-open shaded. */
.tm-lchart { display: grid; gap: var(--tm-space-8); }
.tm-lchart__readout { display: grid; gap: 2px; min-height: 64px; }
.tm-lchart__readout .tm-small { min-height: 1.4em; }
.tm-lchart__plot { position: relative; touch-action: pan-y; }
.tm-lchart__plot > svg { display: block; width: 100%; height: 200px; overflow: visible; }
.tm-lchart .grid { stroke: var(--tm-chart-grid); }
.tm-lchart .base { stroke: var(--tm-chart-baseline); stroke-dasharray: 3 4; }
.tm-lchart .shade { fill: var(--tm-chart-session-shade); }
.tm-lchart .line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.tm-lchart .area { stroke: none; opacity: 0.08; }
.tm-lchart--up .line { stroke: var(--tm-chart-line-up); } .tm-lchart--up .area { fill: var(--tm-chart-line-up); }
.tm-lchart--down .line { stroke: var(--tm-chart-line-down); } .tm-lchart--down .area { fill: var(--tm-chart-line-down); }
.tm-lchart .axis { fill: var(--tm-chart-axis); font: var(--tm-type-axis-weight) var(--tm-type-axis-size)/1 var(--tm-font-ui); font-variant-numeric: tabular-nums; }
.tm-lchart .xhair { stroke: var(--tm-chart-crosshair); stroke-width: 1; }
.tm-lchart .dot { stroke: var(--tm-color-panel); stroke-width: 2; }
.tm-lchart--up .dot { fill: var(--tm-chart-line-up); } .tm-lchart--down .dot { fill: var(--tm-chart-line-down); }
.tm-lchart .tm-tabs--contained { justify-content: space-between; }
.tm-lchart .tm-tabs--contained button { flex: 1; }
.tm-lchart__empty { height: 200px; display: grid; place-items: center; }

/* fill: the plot grows with its container; the drawing is laid over it so it never props the container open. */
.tm-lchart--fill { display: flex; flex-direction: column; min-height: 0; }
.tm-lchart--fill .tm-lchart__plot { position: relative; flex: 1 1 auto; min-height: 200px; }
.tm-lchart--fill .tm-lchart__plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- components/candle-chart/candle-chart.css ---- */
/* Candle chart container (Pro). Wraps the charting library; candles, volume and an indicator toolbar.
   The drawing here is a stand-in until the library is chosen. */
.tm-cchart { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 240px; }
.tm-cchart__bar { display: flex; align-items: center; gap: var(--tm-space-4); padding: 4px var(--tm-space-8); border-bottom: 1px solid var(--tm-color-divider); overflow-x: auto; }
.tm-cchart__bar .tm-divider--vertical { margin: 4px 4px; }
.tm-cchart__ohlc { display: flex; gap: var(--tm-space-12); padding: 6px var(--tm-space-8) 0; font-size: 12px; color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.tm-cchart__ohlc b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.tm-cchart__plot > svg { display: block; width: 100%; height: 100%; min-height: 200px; }
.tm-cchart .grid { stroke: var(--tm-chart-grid); }
.tm-cchart .axis { fill: var(--tm-chart-axis); font: 400 11px/1 var(--tm-font-ui); font-variant-numeric: tabular-nums; }
.tm-cchart .c-up { fill: var(--tm-chart-line-up); stroke: var(--tm-chart-line-up); }
.tm-cchart .c-down { fill: var(--tm-chart-line-down); stroke: var(--tm-chart-line-down); }
.tm-cchart .vol { fill: var(--tm-color-divider-strong); }
.tm-cchart .last { fill: var(--tm-color-text); }
.tm-cchart .last-tag { fill: var(--tm-color-raised); stroke: var(--tm-color-divider-strong); }
.tm-cchart .base { stroke: var(--tm-chart-baseline); stroke-dasharray: 3 4; }

/* ---- components/order-book/order-book.css ---- */
/* Order book ladder: bids and asks side by side, neutral prices, faint depth bars, order counts.
   Click a level to set the ticket price. Thin books say so. */
.tm-book { font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); font-variant-numeric: tabular-nums; }
.tm-book__head, .tm-book__row { display: grid; grid-template-columns: 1fr 1fr; }
.tm-book__head { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-label); border-bottom: 1px solid var(--tm-color-divider-strong); }
.tm-book__half { position: relative; display: grid; grid-template-columns: minmax(calc(3.2em + 10px), 0.55fr) 1fr 1fr; align-items: center; min-height: calc(var(--tm-density-table-row-height) - 4px); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; }
.tm-book__head .tm-book__half { min-height: 28px; }
.tm-book__head .tm-book__half > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-book__half > span { position: relative; z-index: 1; padding: 0 calc(var(--tm-density-pad-cell) * 0.6); }
.tm-book__half > span:first-child { text-align: left; }
button.tm-book__half { cursor: pointer; }
button.tm-book__half:hover { background: var(--tm-order-book-level-hover); }
.tm-book__half .px { font-weight: var(--tm-font-weight-medium); color: var(--tm-order-book-price); }
.tm-book__half .n { color: var(--tm-color-text-secondary); }
.tm-book__half--ask { grid-template-columns: 1fr 1fr minmax(calc(3.2em + 10px), 0.55fr); }
.tm-book__half--ask > span:first-child { text-align: left; }
.tm-book__half--bid > span:last-child { text-align: right; }
.tm-book__bar { position: absolute !important; top: 2px; bottom: 2px; z-index: 0 !important; padding: 0 !important; }
.tm-book__half--bid .tm-book__bar { right: 0; background: var(--tm-order-book-bid-depth); }
.tm-book__half--ask .tm-book__bar { left: 0; background: var(--tm-order-book-ask-depth); }
.tm-book__half--bid { border-right: 1px solid var(--tm-color-divider); }
.tm-book__half.is-best .px { font-weight: var(--tm-font-weight-semibold); }
.tm-book__spread { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--tm-space-4) var(--tm-space-16); padding: 6px 0; border-top: 1px solid var(--tm-color-divider); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-book__thin { margin-top: var(--tm-space-8); }
/* Narrow panels: order counts give way so quantities and prices keep their room. */
@container tm-panel (width < 280px) {
  .tm-book__half, .tm-book__half--ask { grid-template-columns: 1fr 1fr; }
  .tm-book__half .n, .tm-book__head .tm-book__half--bid > span:first-child, .tm-book__head .tm-book__half--ask > span:last-child { display: none; }
}

/* ---- components/time-and-sales/time-and-sales.css ---- */
/* Time and sales: time, quantity, price, tick direction. Crossing-board trades marked. */
.tm-tape { font-size: var(--tm-density-font-data); font-variant-numeric: tabular-nums; }
.tm-tape__row { display: grid; grid-template-columns: 1fr 1fr 1fr 18px; gap: var(--tm-space-8); align-items: center; min-height: calc(var(--tm-density-table-row-height) - 4px); padding: 0 calc(var(--tm-density-pad-cell) * 0.6); border-bottom: 1px solid var(--tm-color-divider); }
.tm-tape__row > :nth-child(2), .tm-tape__row > :nth-child(3) { text-align: right; }
.tm-tape__row--head { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-label); border-bottom-color: var(--tm-color-divider-strong); }
.tm-tape__row .t { color: var(--tm-color-text-secondary); }
.tm-tape__row .tick { font-size: 10px; text-align: center; }
.tm-tape__row .tm-class { font-size: 11px; padding: 0 4px; margin-left: 4px; }

/* ---- components/market-state/market-state.css ---- */
/* Market-state chip: pre-open, open, closed, halted. Colombo time and a countdown. */
.tm-mkt { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--tm-color-divider); background: var(--tm-color-panel); font: var(--tm-font-weight-medium) 12px/16px var(--tm-font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-mkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tm-mkt__label { color: var(--tm-color-text); }
.tm-mkt__meta { color: var(--tm-color-text-secondary); }
.tm-mkt--open { color: var(--tm-market-state-open); }
.tm-mkt--pre-open { color: var(--tm-market-state-pre-open); }
.tm-mkt--closed { color: var(--tm-market-state-closed); }
.tm-mkt--closed::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.tm-mkt--halted { color: var(--tm-market-state-halted); background: var(--tm-color-warning-tint); border-color: transparent; }
.tm-mkt--halted::before { border-radius: 1px; width: 7px; height: 7px; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }

/* ---- components/freshness/freshness.css ---- */
/* Data freshness: live, delayed, stale with time, offline. */
.tm-fresh { display: inline-flex; align-items: center; gap: 6px; font: var(--tm-font-weight-medium) 12px/16px var(--tm-font-ui); color: var(--tm-color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-fresh .tm-icon { width: 14px; height: 14px; }
.tm-fresh--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-color-up); }
.tm-fresh--stale { color: var(--tm-color-warning); }
.tm-fresh--offline { color: var(--tm-color-text); }

/* ---- components/order-timeline/order-timeline.css ---- */
/* Order timeline: done, current, pending, uncertain. The exchange is the only source of truth. */
.tm-timeline { list-style: none; margin: 0; padding: 0; }
.tm-timeline li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--tm-space-8); padding-bottom: var(--tm-space-16); }
.tm-timeline li:last-child { padding-bottom: 0; }
.tm-timeline li::before { content: ""; position: absolute; left: 9.5px; top: 18px; bottom: 0; width: 1px; background: var(--tm-color-divider-strong); }
.tm-timeline li:last-child::before { display: none; }
.tm-timeline__dot { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--tm-color-panel); border: 1.5px solid var(--tm-color-divider-strong); color: var(--tm-color-text-secondary); }
.tm-timeline__dot .tm-icon { width: 12px; height: 12px; }
.tm-timeline li.is-done .tm-timeline__dot { border-color: var(--tm-color-text-secondary); background: var(--tm-color-text-secondary); color: var(--tm-color-panel); }
.tm-timeline li.is-current .tm-timeline__dot { border-color: var(--tm-color-primary-text); color: var(--tm-color-primary-text); }
.tm-timeline li.is-current .tm-timeline__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tm-timeline li.is-uncertain .tm-timeline__dot { border-color: var(--tm-color-warning); color: var(--tm-color-warning); border-style: dashed; }
.tm-timeline li.is-failed .tm-timeline__dot { border-color: var(--tm-color-down); background: var(--tm-color-down); color: var(--tm-color-panel); }
.tm-timeline li.is-pending .tm-timeline__title { color: var(--tm-color-text-secondary); }
.tm-timeline__title { font-weight: var(--tm-font-weight-medium); line-height: 20px; }
.tm-timeline__text { grid-column: 2; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.45; }
.tm-timeline__time { grid-column: 3; grid-row: 1; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; line-height: 20px; }

/* ---- components/fee-breakdown/fee-breakdown.css ---- */
/* Fee breakdown: order value, fees at 1.12% with their parts, total or net, break-even. */
.tm-fees summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 2px; color: var(--tm-color-text-secondary); }
.tm-fees summary::-webkit-details-marker { display: none; }
.tm-fees details[open] summary .tm-icon { transform: rotate(180deg); }
.tm-fees__parts { margin: 4px 0 8px; padding: 8px 12px; border-radius: var(--tm-radius-sm); background: var(--tm-color-hover); font-size: var(--tm-density-font-small); }
.tm-fees__parts .tm-kv > dt, .tm-fees__parts .tm-kv > dd { padding: 3px 0; border: 0; font-size: inherit; }
.tm-fees__be { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.45; margin: var(--tm-space-8) 0 0; }
.tm-fees__be b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---- components/order-ticket/order-ticket.css ---- */
/* Order ticket: one component for both modes. Simple collapses the advanced fields; Pro opens them.
   Checks run while typing and show the plain message with a fix. */
.tm-ticket { display: grid; gap: calc(var(--tm-density-gap) * 1); min-width: 0; }
.tm-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tm-space-8); }
.tm-ticket__sec { display: grid; gap: 2px; min-width: 0; }
.tm-ticket__sec b { font-weight: var(--tm-font-weight-semibold); font-size: var(--tm-density-font-body); }
.tm-ticket__sec span { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-ticket__mode { flex: none; }
.tm-ticket__mode.tm-seg { --_seg-h: 24px; padding: 2px; }
.tm-ticket__mode.tm-seg button { font-size: 12px; padding: 0 8px; }
.tm-ticket__row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--tm-density-gap); }
.tm-ticket__adv { border-top: 1px solid var(--tm-color-divider); padding-top: calc(var(--tm-density-gap) * 0.75); }
.tm-ticket__adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); font-weight: var(--tm-font-weight-medium); }
.tm-ticket__adv > summary::-webkit-details-marker { display: none; }
.tm-ticket__adv[open] > summary .tm-icon { transform: rotate(180deg); }
.tm-ticket__adv-body { display: grid; gap: var(--tm-density-gap); padding-top: var(--tm-density-gap); }
.tm-ticket__summary { border-top: 1px solid var(--tm-color-divider); padding-top: calc(var(--tm-density-gap) * 0.5); }
.tm-ticket__checks { display: grid; gap: var(--tm-space-8); }
.tm-ticket__checks:empty { display: none; }
.tm-ticket__submit { display: grid; gap: var(--tm-space-8); }
.tm-ticket__note { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); text-align: center; line-height: 1.45; margin: 0; }
.is-blocked .tm-ticket__fields { opacity: 0.55; pointer-events: none; }

/* ---- components/order-review/order-review.css ---- */
/* Order review: summary, fees, settlement, then slide to place (phone) or a button (desktop). */
.tm-review { display: grid; gap: var(--tm-space-16); }
.tm-review__lead { display: grid; gap: 2px; text-align: center; padding: var(--tm-space-8) 0; }
.tm-review__lead .tm-price { justify-self: center; }
.tm-review__settle { display: flex; gap: var(--tm-space-8); align-items: flex-start; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.45; }
.tm-review__settle .tm-icon { flex: none; margin-top: 1px; }
/* Optional plain sentence that opens the review (compare page, from Viky's V2). */
.tm-review__sentence { margin: 0; font-size: var(--tm-density-font-body); line-height: 1.55; color: var(--tm-color-text); }


/* ---- components/slide-to-confirm/slide-to-confirm.css ---- */
/* Slide to confirm (phone). The label is centred in the whole track, with the handle's width kept clear on both sides. Drag the handle to the end. Keyboard and switch users press Enter on the handle. */
.tm-slide {
  --_side: var(--tm-color-primary); --_on: var(--tm-color-on-primary);
  position: relative; height: 56px; border-radius: var(--tm-radius-lg); background: var(--tm-color-hover);
  border: 1px solid var(--tm-color-divider-strong); overflow: hidden; user-select: none; touch-action: none;
}
.tm-slide--buy { --_side: var(--tm-color-up); --_on: var(--tm-color-on-up); }
.tm-slide--sell { --_side: var(--tm-color-down); --_on: var(--tm-color-on-down); }
.tm-slide__fill { position: absolute; inset: 0 auto 0 0; width: 56px; background: var(--_side); opacity: 0.18; }
.tm-slide__label { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 56px; text-align: center; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); pointer-events: none; }
.tm-slide__thumb {
  position: absolute; top: 3px; left: 3px; width: 48px; height: 48px; border-radius: calc(var(--tm-radius-lg) - 3px);
  display: grid; place-items: center; border: 0; background: var(--_side); color: var(--_on); cursor: grab;
}
.tm-slide__thumb:active { cursor: grabbing; }
.tm-slide.is-done .tm-slide__label { padding-inline: 56px; }
.tm-slide.is-done .tm-slide__fill { width: 100% !important; }
.tm-slide.is-snap .tm-slide__thumb, .tm-slide.is-snap .tm-slide__fill { transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard), width var(--tm-motion-duration-base); }
.tm-slide[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---- components/order-row/order-row.css ---- */
/* Order row (Pro blotter) and order card (Simple). Status label, fill progress, change and cancel. */
.tm-ocard { display: grid; gap: var(--tm-space-8); padding: var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-ocard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-ocard__title { font-weight: var(--tm-font-weight-semibold); }
.tm-ocard__title .side-buy { color: var(--tm-color-up); } .tm-ocard__title .side-sell { color: var(--tm-color-down); }
.tm-ocard__sub { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-ocard__msg { font-size: var(--tm-density-font-small); line-height: 1.45; margin: 0; }
.tm-ocard__actions { display: flex; gap: var(--tm-space-8); flex-wrap: nowrap; }
.tm-ocard__actions > .tm-btn { flex: 0 1 auto; min-width: 0; } /* side by side; long labels wrap inside */
.tm-progress { height: 4px; border-radius: 2px; background: var(--tm-color-divider); overflow: hidden; }
.tm-progress > i { display: block; height: 100%; background: var(--tm-color-text-secondary); border-radius: 2px; }
.tm-side { font-weight: var(--tm-font-weight-semibold); }
.tm-side--buy { color: var(--tm-color-up); } .tm-side--sell { color: var(--tm-color-down); }
.tm-table .tm-row-actions { display: inline-flex; gap: 2px; }

/* ---- components/rejection/rejection.css ---- */
/* Rejection message: what happened in plain words, and the fix as a button. */
.tm-reject { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--tm-space-12); padding: var(--tm-density-pad-cell); border-radius: var(--tm-radius-md); background: var(--tm-banner-error-bg); }
.tm-reject > .tm-icon { color: var(--tm-banner-error-icon); grid-row: span 3; margin-top: 1px; }
.tm-reject__title { font-weight: var(--tm-font-weight-semibold); }
.tm-reject__text { font-size: var(--tm-density-font-small); line-height: 1.45; margin: 0; }
.tm-reject__fix { display: flex; gap: var(--tm-space-8); flex-wrap: wrap; margin-top: var(--tm-space-4); }

/* ---- components/holding-row/holding-row.css ---- */
/* Holding row: quantity, can sell now, awaiting CDS update, value, return after fees, break-even. */
.tm-hold { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--tm-space-12); align-items: center; min-height: var(--tm-density-row-height); padding: var(--tm-space-12) var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-hold__name { font-weight: var(--tm-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-hold__meta { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-hold__val { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--tm-font-weight-medium); }
.tm-hold__ret { text-align: right; font-size: var(--tm-density-font-small); }
.tm-hold__detail { grid-column: 1 / -1; margin-top: var(--tm-space-8); }

/* ---- components/position-summary/position-summary.css ---- */
/* "Your position" block on the stock page. */
.tm-position { display: grid; gap: var(--tm-space-12); }
.tm-position__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tm-space-8); flex-wrap: wrap; }

/* ---- components/portfolio-header/portfolio-header.css ---- */
/* Portfolio header: one large number, today's move, return after fees. */
.tm-phead { display: grid; gap: var(--tm-space-4); }
.tm-phead__label { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-phead__moves { display: flex; flex-wrap: wrap; gap: var(--tm-space-4) var(--tm-space-16); font-size: var(--tm-density-font-small); }
.tm-phead__moves span { color: var(--tm-color-text-secondary); }

/* ---- components/cash-summary/cash-summary.css ---- */
/* Cash summary: cleared, reserved for open orders, available to trade, clearing, withdrawable. */
.tm-cash { display: grid; gap: var(--tm-space-8); }
.tm-cash__avail { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-cash__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--tm-color-divider); }
.tm-cash__bar i { display: block; height: 100%; }
.tm-cash__bar .a { background: var(--tm-color-text-secondary); }
.tm-cash__bar .r { background: repeating-linear-gradient(45deg, var(--tm-color-text-faint) 0 2px, transparent 2px 5px); }
.tm-cash__note { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.45; margin: 0; }

/* ---- components/watchlist/watchlist.css ---- */
/* Watchlist: list switcher, add, edit mode with reorder and remove. */
.tm-watch__bar { display: flex; align-items: center; gap: var(--tm-space-8); padding: var(--tm-space-8) var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-watch__bar .tm-tabs { flex: 0 1 auto; min-width: 0; }
/* The list switcher hugs its tabs (scrolling sideways when there are many lists); add and edit sit at the right. */
.tm-watch__bar .tm-tabs + * { margin-left: auto; }
.tm-watch__edit { display: flex; align-items: center; gap: var(--tm-space-8); min-height: var(--tm-density-row-height); padding: 0 var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-watch__edit > span { flex: 1; min-width: 0; }
.tm-watch__edit .tm-icon-btn { width: 32px; height: 32px; }

/* ---- components/announcement-row/announcement-row.css ---- */
.tm-ann { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--tm-space-12); padding: calc(var(--tm-density-pad-cell) * 0.75) var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-ann__meta { display: flex; align-items: center; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); flex-wrap: wrap; }
.tm-ann__meta b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.tm-ann__title { grid-column: 1 / -1; line-height: 1.4; }
.tm-ann__time { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- components/corporate-action/corporate-action.css ---- */
/* Corporate action card: dividend, rights, AGM. Dates, entitlement, net of 15% withholding tax.
   One of the few framed blocks: it is a self-contained item in a list of upcoming events. */
.tm-cact { display: grid; gap: var(--tm-space-12); padding: var(--tm-density-pad-panel); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-sm); background: var(--tm-color-panel); }
.tm-cact__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tm-space-8); }
.tm-cact__dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--tm-space-8); }

/* ---- components/notification-item/notification-item.css ---- */
.tm-note { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px var(--tm-space-12); padding: var(--tm-density-pad-cell); border-bottom: 1px solid var(--tm-color-divider); }
.tm-note__icon { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--tm-color-hover); color: var(--tm-color-text-secondary); }
.tm-note__icon--warning { background: var(--tm-color-warning-tint); color: var(--tm-color-warning); }
.tm-note__icon--error { background: var(--tm-color-down-tint); color: var(--tm-color-down); }
.tm-note__title { font-weight: var(--tm-font-weight-medium); }
.tm-note__body { grid-column: 2 / -1; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); line-height: 1.45; }
.tm-note__time { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-note.is-unread .tm-note__title { font-weight: var(--tm-font-weight-semibold); }
/* Unread: a very faint blue background (5%, just enough to tell rows apart), a heavier title, and a blue dot after the time. */
.tm-note.is-unread { background: color-mix(in srgb, var(--tm-color-primary-text) 5%, transparent); }
.tm-note__time { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tm-note.is-unread .tm-note__time::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tm-color-primary-text); }

/* ---- components/welcome-card/welcome-card.css ---- */
/* Welcome card: one calm message on the first visit to Home, dismissed with Got it and never shown again.
   Chosen over a setup checklist on 23 Oct 2026 (Viky's V2). It names the mode and where to change it. */
.tm-welcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tm-space-4) var(--tm-space-12); align-items: start; padding: var(--tm-space-16); border-radius: var(--tm-radius-lg); background: var(--tm-color-hover); }
.tm-welcome__mark { grid-row: span 3; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tm-color-primary-tint); color: var(--tm-color-primary-text); }
.tm-welcome__title { margin: 0; font-size: var(--tm-density-font-body); font-weight: var(--tm-font-weight-semibold); line-height: 1.35; }
.tm-welcome__text { margin: 0; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.5; }
.tm-welcome__actions { display: flex; gap: var(--tm-space-8); margin-top: var(--tm-space-8); }
.tm-welcome.is-gone { display: none; }
[data-design="instrument"] .tm-welcome { border-radius: var(--lk-r-lg, 20px); background: color-mix(in srgb, var(--tm-color-hover) 70%, transparent); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
[data-design="instrument"] .tm-welcome__mark { border-radius: 12px; }

/* ---- components/market-stage/market-stage.css ---- */
/* Market stage (23 Oct 2026): the live side of the sign-in split view. The one place that uses a blue glow: a deep
   navy field with soft blue light, a faint dot grid, glass cards with hairline edges and a hairline figure. It stays
   dark in both themes (a brand moment beside the form). Green and red appear only on market direction. */
.tm-stage {
  --st-bg: #0B0E14; --st-ink: #E9ECF1; --st-mute: #9AA3B2; --st-hair: rgb(255 255 255 / 0.1); --st-glass: rgb(255 255 255 / 0.035);
  --st-up: #3FD49A; --st-down: #FF7A85;
  container-type: inline-size; position: relative; height: 100%; min-height: 100%; overflow: hidden; border-radius: inherit; color: var(--st-ink);
  /* Mostly neutral near-black; one soft blue light behind the figure and a faint one in the far corner. */
  background:
    radial-gradient(42% 34% at 32% 58%, rgb(47 107 235 / 0.26), transparent 72%),
    radial-gradient(30% 26% at 96% 4%, rgb(74 134 255 / 0.1), transparent 70%),
    linear-gradient(165deg, #10141C 0%, #0B0E14 55%, #08090D 100%);
  font-family: var(--tm-font-ui);
}
.tm-stage::before { /* dot grid, fading out towards the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.13) 1px, transparent 1.3px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(75% 70% at 40% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(75% 70% at 40% 40%, #000 20%, transparent 80%);
}
.tm-stage__in { position: relative; height: 100%; display: grid; grid-template-rows: auto auto minmax(min-content, 1fr) auto; gap: 18px; padding: clamp(22px, 4cqw, 40px); overflow-y: auto; scrollbar-width: none; }
.tm-stage__in::-webkit-scrollbar { display: none; }
.tm-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-stage__mark { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.tm-stage__live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--st-hair); background: var(--st-glass); backdrop-filter: blur(10px); font-size: 12px; }
.tm-stage__live > i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-up); box-shadow: 0 0 0 0 rgb(63 212 154 / 0.6); animation: tm-stage-sonar 2.4s ease-out infinite; }
.tm-stage__livemeta { color: var(--st-mute); }
.tm-stage__hero h2 { margin: 0; max-width: 18ch; font-size: clamp(24px, 4cqw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.tm-stage__hero p { margin: 10px 0 0; max-width: 46ch; color: var(--st-mute); font-size: 15px; line-height: 1.5; }

.tm-stage__card { position: relative; align-self: center; min-height: 0; display: grid; gap: 12px; padding: 18px 18px 14px; border-radius: 22px; border: 1px solid var(--st-hair); background: var(--st-glass); backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.05); }
.tm-stage__quote { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; }
.tm-stage__qname { grid-column: 1 / -1; font-size: 12px; color: var(--st-mute); }
.tm-stage__qv { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; border-radius: 6px; transition: background-color .6s ease; }
.tm-stage__qv.is-up { animation: tm-stage-tint-up .9s ease; } .tm-stage__qv.is-down { animation: tm-stage-tint-down .9s ease; }
.tm-stage__qc { font-size: 13px; }
.tm-stage .tm-up, .tm-stage .tm-change--up { color: var(--st-up); } .tm-stage .tm-down, .tm-stage .tm-change--down { color: var(--st-down); } .tm-stage .tm-change--flat { color: var(--st-mute); }
.tm-stage__plot { position: relative; }
.tm-stage__svg { display: block; width: 100%; height: auto; max-height: calc(var(--tm-vh, 100vh) * 0.3); overflow: visible; outline: none; touch-action: pan-y; cursor: crosshair; }
.tm-stage__svg:focus-visible { outline: 2px solid #6EA0FF; outline-offset: 4px; border-radius: 8px; }
.tm-stage__grid { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tm-stage__axis { fill: var(--st-mute); font-size: 11px; font-family: var(--tm-font-ui); font-feature-settings: "tnum"; }
.tm-stage__base { stroke: rgb(255 255 255 / 0.32); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tm-stage__future { stroke: rgb(255 255 255 / 0.14); stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.tm-stage__line { fill: none; stroke: #EEF1F6; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgb(110 160 255 / 0.3)); }
.tm-stage__dot { fill: #fff; stroke: #4A86FF; stroke-width: 2; }
.tm-stage__pulse { fill: #4A86FF; opacity: .5; transform-box: fill-box; transform-origin: center; animation: tm-stage-pulse 2.2s ease-out infinite; }
.tm-stage__cursor line { stroke: rgb(255 255 255 / 0.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tm-stage__cursor circle { fill: #0A1120; stroke: #DCE7FF; stroke-width: 1.6; }
.tm-stage__read { position: absolute; top: -6px; display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--st-hair); background: rgb(14 17 23 / 0.9); backdrop-filter: blur(8px); font-size: 12px; white-space: nowrap; pointer-events: none; }
.tm-stage__read[hidden] { display: none; }
.tm-stage__read > span:first-child { color: var(--st-mute); }
.tm-stage__stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--st-hair); }
.tm-stage__stats div { display: grid; gap: 2px; }
.tm-stage__stats dt { font-size: 11px; color: var(--st-mute); }
.tm-stage__stats dd { margin: 0; font-size: 14px; font-weight: 600; }

/* Order updates float over the card's top right corner. */
.tm-stage__toast { position: absolute; top: -18px; right: -14px; display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--st-hair); background: rgb(20 24 31 / 0.92); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7); font-size: 12px; opacity: 0; transform: translateY(6px); }
.tm-stage__toast.is-in { animation: tm-stage-toast 4.2s ease both; }
.tm-stage__toast b { display: block; font-size: 12px; }
.tm-stage__toast span span { color: var(--st-mute); }
.tm-stage__ticon { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / 0.06); color: #8FB0F5; }

.tm-stage__slides { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--st-hair); background: var(--st-glass); backdrop-filter: blur(12px); }
.tm-stage__slide { display: flex; gap: 12px; align-items: flex-start; min-height: 52px; }
.tm-stage__slide b { display: block; font-size: 16px; font-weight: 600; }
.tm-stage__slide p { margin: 4px 0 0; color: var(--st-mute); font-size: 13px; line-height: 1.45; }
.tm-stage__sicon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / 0.06); color: #8FB0F5; }
.tm-stage__nav { display: flex; align-items: center; gap: 8px; }
.tm-stage__dots { display: inline-flex; gap: 6px; margin-right: 6px; }
.tm-stage__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.25); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.tm-stage__dots i.is-on { width: 18px; background: #E9ECF1; }
.tm-stage__arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--st-hair); background: transparent; color: var(--st-ink); cursor: pointer; }
.tm-stage__arrow:hover { background: rgb(255 255 255 / 0.06); }
.tm-stage__arrow:focus-visible { outline: 2px solid #6EA0FF; outline-offset: 2px; }

@keyframes tm-stage-sonar { 0% { box-shadow: 0 0 0 0 rgb(63 212 154 / 0.6); } 80%, 100% { box-shadow: 0 0 0 8px rgb(63 212 154 / 0); } }
@keyframes tm-stage-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes tm-stage-tint-up { 0% { background: rgb(63 212 154 / 0.28); } 100% { background: transparent; } }
@keyframes tm-stage-tint-down { 0% { background: rgb(255 122 133 / 0.28); } 100% { background: transparent; } }
@keyframes tm-stage-toast { 0% { opacity: 0; transform: translateY(8px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .tm-stage__live > i, .tm-stage__pulse { animation: none; }
  .tm-stage__toast.is-in { animation: none; opacity: 1; transform: none; }
}

/* Band: a phone or any narrow frame. Mark, live chip, the figure and its quote; no hero, promises or updates. */
@container (max-width: 419px) {
  .tm-stage__in { grid-template-rows: auto auto; gap: 12px; padding: 14px 16px 16px; }
  .tm-stage__hero, .tm-stage__slides, .tm-stage__toast, .tm-stage__stats { display: none; }
  .tm-stage__card { padding: 12px 12px 8px; border-radius: 18px; gap: 6px; }
  .tm-stage__qv { font-size: 22px; }
  .tm-stage__axis { display: none; }
}
@supports (corner-shape: squircle) { [data-design="instrument"] .tm-stage__live > i, [data-design="instrument"] .tm-stage__arrow, [data-design="instrument"] .tm-stage__dots i { corner-shape: round; } }
.tm-stage__hero h2 { background: linear-gradient(100deg, #FFFFFF 0%, #E3E8F1 55%, #A9C0EE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Calm variants (23 Oct 2026): horizon, quiet, lines. No boxes, little text, hairlines on near-black. ===== */
.st2 {
  --st-ink: #ECEDEF; --st-mute: #8D929B; --st-faint: rgb(255 255 255 / 0.22); --st-up: #3FD49A; --st-down: #FF7A85;
  container-type: inline-size; position: relative; height: 100%; min-height: 100%; overflow: hidden; color: var(--st-ink); font-family: var(--tm-font-ui);
  display: grid; grid-template-rows: auto 1fr; padding: clamp(24px, 5cqw, 56px);
  background: radial-gradient(38% 30% at 70% 78%, rgb(74 134 255 / 0.09), transparent 70%), #0D0E11;
}
.st2 .tm-change--up, .st2 .tm-up { color: var(--st-up); } .st2 .tm-change--down, .st2 .tm-down { color: var(--st-down); } .st2 .tm-change--flat { color: var(--st-mute); }
.st2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st2-mark { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.st2-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--st-mute); }
.st2-live > i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-up); animation: st2-breathe 2.8s ease-in-out infinite; }
.st2-label { margin: 0; font-size: 13px; color: var(--st-mute); }
.st2-value { display: block; width: fit-content; margin: 8px 0 6px; font-size: clamp(44px, 9cqw, 76px); line-height: 1; font-weight: 400; letter-spacing: -0.035em; font-feature-settings: "tnum"; border-radius: 6px; }
.st2-value.is-up { animation: tm-stage-tint-up .9s ease; } .st2-value.is-down { animation: tm-stage-tint-down .9s ease; }
.st2-change { margin: 0; font-size: 15px; }
.st2-today { color: var(--st-mute); }
.st2-figure { align-self: start; margin-top: clamp(40px, 12cqh, 120px); }

/* The chart: a stretched SVG for the line, HTML for dots and labels. */
.st2-chart { position: relative; outline: none; cursor: crosshair; touch-action: pan-y; }
.st2-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st2-line { fill: none; stroke: rgb(236 237 239 / 0.92); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.st2-base { stroke: var(--st-faint); stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.st2-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08); }
.st2-cur { position: absolute; top: 0; bottom: 22px; width: 1px; background: rgb(255 255 255 / 0.28); pointer-events: none; }
.st2-cur::after { content: ""; position: absolute; left: -4px; top: var(--y); width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1.25px solid #fff; background: #0D0E11; }
.st2-cur[hidden], .st2-read[hidden] { display: none; }
.st2-read { position: absolute; top: -28px; font-size: 13px; white-space: nowrap; color: var(--st-mute); pointer-events: none; }
.st2-read b { color: var(--st-ink); font-weight: 500; }
.st2-times { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--st-mute); pointer-events: none; }
.st2-chart:focus-visible { outline: 1px solid rgb(255 255 255 / 0.4); outline-offset: 8px; }

/* Horizon: the line runs across the bottom of the half, edge to edge. */
.st2--horizon { grid-template-rows: auto 1fr auto; }
.st2--horizon .st2-chart { height: clamp(180px, 42cqh, 360px); margin: 0 calc(clamp(24px, 5cqw, 56px) * -1) calc(clamp(24px, 5cqw, 56px) * -1); }
.st2--horizon .st2-chart > svg { bottom: 34px; height: calc(100% - 34px); }
.st2--horizon .st2-times { padding: 0 clamp(24px, 5cqw, 56px) 12px; }

@keyframes st2-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .st2-live > i { animation: none; } }
@supports (corner-shape: squircle) { [data-design="instrument"] .st2 .st2-live > i, [data-design="instrument"] .st2 .st2-dot, [data-design="instrument"] .st2 .st2-cur::after { corner-shape: round; } }

/* Phones: mark and live text, then the figure, compact. */
@container (max-width: 419px) {
  .st2 { padding: 16px; gap: 12px; grid-template-rows: auto auto; }
  .st2-figure { margin-top: 8px; }
  .st2-value { font-size: 36px; }
  .st2--horizon .st2-chart { height: 120px; margin: 0 -16px -16px; }
  .st2--horizon .st2-times { padding: 0 16px 8px; }
}


/* ===== Horizon and the mixes with Cards (23 Oct 2026) ===== */
.st2--horizon { display: flex; flex-direction: column; }
.st2-top { display: grid; gap: 22px; align-content: start; margin-top: clamp(32px, 8cqh, 96px); }
.st2--horizon .st2-figure { margin-top: 0; }
.st2--horizon .st2-chart { margin-top: auto; flex: 1 1 0; height: auto; min-height: 170px; max-height: clamp(180px, 42cqh, 360px); }
.st2--horizon .st2-top { flex: none; }
.st2-hero h2 { margin: 0; max-width: 17ch; font-size: clamp(26px, 4.2cqw, 40px); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.st2-hero p { margin: 10px 0 0; max-width: 44ch; color: var(--st-mute); font-size: 15px; line-height: 1.5; }
.st2--mix-headline .st2-value, .st2--mix-glass .st2-value { font-size: clamp(38px, 6.5cqw, 58px); }
.st2-stats { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.st2-stats div { display: grid; gap: 3px; }
.st2-stats dt { font-size: 12px; color: var(--st-mute); }
.st2-stats dd { margin: 0; font-size: 15px; font-weight: 500; }
.st2-figure--glass { width: fit-content; max-width: 100%; padding: 20px 24px 20px; border-radius: 22px; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.035); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.05); }
.st2-promise { display: flex; align-items: baseline; gap: 16px; max-width: 560px; font-size: 14px; line-height: 1.45; }
.st2-promise [data-slide] { flex: 1; min-width: 0; color: var(--st-mute); min-height: 2.9em; }
.st2-promise [data-slide] b { color: var(--st-ink); font-weight: 500; }
.st2-pdots { display: inline-flex; gap: 6px; flex: none; }
.st2-pdots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.22); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.st2-pdots i.is-on { width: 16px; background: var(--st-ink); }
/* Order updates sit just above and right of the moving end of the line, over the part of the day still to come. */
.st2-update { position: absolute; translate: 14px calc(-100% - 14px); display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 9px; border-radius: 14px; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(22 24 29 / 0.92); backdrop-filter: blur(12px); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.st2-update.is-in { animation: tm-stage-toast 4.2s ease both; }
.st2-update b { display: block; font-weight: 500; }
.st2-update span span { color: var(--st-mute); }
.st2-uicon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgb(255 255 255 / 0.06); color: #9DB6EA; }
.st2.is-reading .st2-update { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .st2-update.is-in { animation: none; opacity: 1; } }
@supports (corner-shape: squircle) { [data-design="instrument"] .st2 .st2-pdots i { corner-shape: round; } }
@container (max-width: 419px) {
  .st2--horizon { padding: 16px; }
  .st2-top { margin-top: 12px; gap: 10px; }
  .st2-hero p, .st2-promise, .st2-stats, .st2-update { display: none; }
  .st2-hero h2 { font-size: 20px; }
  .st2--mix-headline .st2-value, .st2--mix-glass .st2-value { font-size: 32px; }
  .st2-figure--glass { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .st2--horizon .st2-chart { flex: none; height: 120px; min-height: 0; max-height: none; margin-top: 12px; }
}

/* Cards, calm: the first version in the near-black palette, without the blue glow and dot grid. */
.tm-stage--calm { background: radial-gradient(40% 32% at 30% 62%, rgb(74 134 255 / 0.08), transparent 70%), #0D0E11; }
.tm-stage--calm::before { display: none; }
.tm-stage--calm .tm-stage__hero h2 { background: none; color: var(--st-ink); font-weight: 500; letter-spacing: -0.025em; }
.tm-stage--calm .tm-stage__qv { font-weight: 400; font-size: 36px; letter-spacing: -0.03em; }
.tm-stage--calm linearGradient stop { stop-color: #FFFFFF; stop-opacity: 0.07; }
.tm-stage--calm linearGradient stop + stop { stop-opacity: 0; }
.tm-stage--calm .tm-stage__line { filter: none; stroke-width: 1.25; }
.tm-stage--calm .tm-stage__dot { fill: #fff; stroke: none; }
.tm-stage--calm .tm-stage__pulse { fill: #fff; opacity: .25; }
.tm-stage--calm .tm-stage__card, .tm-stage--calm .tm-stage__slides { background: rgb(255 255 255 / 0.03); }
.tm-stage--calm .tm-stage__live { background: none; }

/* Horizon, live: rolling digits, a fuller chart and a quieter blue (23 Oct 2026). */
.st2--mix-live { background:
  radial-gradient(70% 34% at 38% 100%, rgb(74 134 255 / 0.13), transparent 72%),
  radial-gradient(26% 20% at 92% 0%, rgb(74 134 255 / 0.05), transparent 70%),
  #0D0E11; }
.st2-roll { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.st2-roll__col { display: block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.st2--mix-live .st2-value, .st2--mix-live .st2-stats dd { line-height: 1; }
.st2--mix-live .st2-value { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .st2-roll__col { transition: none; } }
.st2-grid { stroke: rgb(255 255 255 / 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st2-vol { fill: rgb(255 255 255 / 0.1); }
.st2-vol.is-last { fill: rgb(255 255 255 / 0.3); }
.st2-ylab { position: absolute; top: 0; left: clamp(24px, 5cqw, 56px); right: clamp(24px, 5cqw, 56px); bottom: 34px; pointer-events: none; }
.st2-ylab span { position: absolute; right: 0; transform: translateY(-120%); font-size: 11px; color: var(--st-mute); font-feature-settings: "tnum"; white-space: nowrap; }
.st2-ylab .st2-pclose { right: auto; left: 0; transform: translateY(-130%); opacity: .8; }
@container (max-width: 419px) { .st2-ylab { display: none; } }

/* ---- components/sign-in/sign-in.css ---- */
/* Sign-in and first run. One centred card on the page canvas, a top bar with the wordmark, language and help,
   and a help line at the foot. Phones (the card's own width under 560px) drop the card frame and use the
   whole screen. Actions sit side by side at the foot of the card and never stack. */
.tm-auth { container: tm-auth / inline-size; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--tm-color-bg); color: var(--tm-color-text); font-family: var(--tm-font-ui); }
.tm-auth__top { display: flex; align-items: center; gap: var(--tm-space-12); min-height: 60px; padding: var(--tm-space-8) var(--tm-space-24); }
.tm-auth__grow { flex: 1; }
.tm-auth__help { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); text-decoration: none; white-space: nowrap; }
.tm-auth__help:hover { color: var(--tm-color-text); }
.tm-auth__main { display: grid; align-content: center; justify-items: center; gap: var(--tm-space-16); padding: var(--tm-space-16) var(--tm-space-16) var(--tm-space-40); }
.tm-auth__card {
  width: 100%; max-width: 440px; display: grid; gap: var(--tm-space-16); align-content: start;
  padding: var(--tm-space-32); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-lg); background: var(--tm-color-panel);
}
.tm-auth__card--wide { max-width: 600px; }
.tm-auth__title { margin: 0; font-size: 24px; line-height: 30px; font-weight: var(--tm-font-weight-semibold); letter-spacing: -0.01em; outline: none; }
.tm-auth__sub { margin: -8px 0 0; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-body); line-height: 1.5; }
.tm-auth__sub b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-auth__also { display: grid; gap: 2px; margin: 0; }
.tm-auth__hero { display: grid; gap: var(--tm-space-8); }

.tm-auth__form { display: grid; gap: var(--tm-space-16); }
.tm-auth__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tm-space-8); }
.tm-auth__labelrow .tm-field__label { margin: 0; }
.tm-auth__show { flex: none; align-self: stretch; padding: 0 var(--tm-space-12); border: 0; border-left: 1px solid var(--tm-color-divider); background: none; color: var(--tm-link, var(--tm-color-primary-text)); font: var(--tm-font-weight-medium) var(--tm-density-font-small) var(--tm-font-ui); cursor: pointer; }
.tm-auth__err:empty { display: none; }
.tm-auth__err { display: flex; gap: var(--tm-space-8); align-items: flex-start; color: var(--tm-color-down); font-size: var(--tm-density-font-small); line-height: 1.45; margin-top: -4px; }
.tm-auth__err > .tm-icon { flex: none; margin-top: 1px; }
.tm-auth__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--tm-space-12); color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-auth__or::before, .tm-auth__or::after { content: ""; height: 1px; background: var(--tm-color-divider); }
.tm-auth__providers { display: flex; gap: var(--tm-space-8); }
.tm-auth__providers > .tm-btn { flex: 1 1 0; min-width: 0; }
.tm-auth__alt { margin: 0; text-align: center; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-auth__legal { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--tm-color-text-secondary); }
.tm-auth__back { justify-self: start; margin: -8px 0 -4px -2px; font-size: var(--tm-density-font-small); }
.tm-auth__actions { display: flex; justify-content: flex-end; gap: var(--tm-space-8); margin-top: var(--tm-space-8); }
.tm-auth__actions > .tm-btn { flex: 0 1 auto; min-width: 0; }
.tm-auth__progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--tm-space-12); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); font-feature-settings: var(--tm-font-feature-numbers); }
.tm-auth__bar { height: 4px; border-radius: 2px; background: var(--tm-color-divider); overflow: hidden; }
.tm-auth__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--tm-color-primary); }
.tm-auth__who { display: flex; align-items: center; gap: var(--tm-space-12); }
.tm-auth__who b { display: block; font-size: 20px; font-weight: var(--tm-font-weight-semibold); outline: none; }
.tm-auth__who span:not(.tm-avatar) { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); font-family: var(--tm-font-family-mono); }
.tm-auth__bio { display: grid; justify-items: center; gap: var(--tm-space-8); padding: var(--tm-space-24); border: 1px solid var(--tm-color-border-control); border-radius: var(--tm-radius-lg); background: none; color: var(--tm-color-text); font: var(--tm-font-weight-medium) var(--tm-density-font-body) var(--tm-font-ui); cursor: pointer; }
.tm-auth__bio > .tm-icon { width: 40px; height: 40px; color: var(--tm-color-primary-text); stroke-width: 1.4; }
.tm-auth__bio:hover { background: var(--tm-color-hover); }
.tm-auth__bio.is-loading { opacity: 0.6; pointer-events: none; }
.tm-auth__glyph { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tm-color-primary-tint); color: var(--tm-color-primary-text); }
.tm-auth__need { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tm-space-12); }
.tm-auth__need li { display: flex; align-items: center; gap: var(--tm-space-12); }
.tm-auth__need .tm-icon { color: var(--tm-color-text-secondary); flex: none; }
.tm-auth__pay { margin: 0; display: grid; border-top: 1px solid var(--tm-color-divider); }
.tm-auth__pay > div { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-12); min-height: 48px; border-bottom: 1px solid var(--tm-color-divider); }
.tm-auth__pay dt { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-auth__pay dd { margin: 0; display: flex; align-items: center; gap: var(--tm-space-4); font-weight: var(--tm-font-weight-medium); text-align: right; }
.tm-auth__pay .tm-icon-btn { width: 32px; height: 32px; }
.tm-auth__picks { max-height: 360px; overflow: auto; padding: 2px; margin: -2px; }
.tm-auth__pick { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; align-items: center; padding: var(--tm-space-12) var(--tm-space-16); }
.tm-auth__pick .tm-choice__mark { grid-column: 3; }
.tm-auth__sec { display: grid; gap: 2px; min-width: 0; }
.tm-auth__sec b { font-weight: var(--tm-font-weight-semibold); }
.tm-auth__sec > span { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-auth__px { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-auth__foot { padding: var(--tm-space-16) var(--tm-space-24) var(--tm-space-24); text-align: center; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
/* Sample rules for the pattern lab only: never in the product. */
.tm-auth__demo { max-width: 440px; margin: 0; padding: var(--tm-space-8) var(--tm-space-12); border: 1px dashed var(--tm-color-divider-strong); border-radius: var(--tm-radius-md); color: var(--tm-color-text-secondary); font-size: 12px; line-height: 1.5; }

/* Phone or any narrow frame: no card frame, content from the top, the help line under the card. */
@container (max-width: 559px) {
  .tm-auth__top { padding-inline: var(--tm-space-16); min-height: 56px; }
  .tm-auth__help span { display: none; }
  .tm-auth__help { width: 40px; height: 40px; justify-content: center; }
  .tm-auth__main { align-content: start; padding: var(--tm-space-8) 0 var(--tm-space-24); }
  .tm-auth__card { max-width: none; border: 0; border-radius: 0; background: transparent; padding: var(--tm-space-8) var(--tm-space-16) var(--tm-space-16); }
  .tm-auth__actions { margin-top: var(--tm-space-16); }
  .tm-auth__actions > .tm-btn { flex: 1 1 0; }
  .tm-auth__actions > .tm-btn:only-child { flex: 1 1 auto; }
  .tm-auth__demo { margin-inline: var(--tm-space-16); }
  .tm-auth__picks { max-height: none; }
}

[data-design="instrument"] .tm-auth { background: var(--lk-chrome, var(--tm-color-bg)); }
[data-design="instrument"] .tm-auth__card { border-radius: var(--lk-r-lg, 20px); background: var(--lk-content, var(--tm-color-panel)); border-color: var(--tm-color-divider); }
[data-design="instrument"] .tm-auth__bio { border-radius: var(--lk-r-lg, 20px); border-color: var(--lk-field-border); }
[data-design="instrument"] .tm-auth__bar > i { background: var(--lk-primary, var(--tm-color-primary)); }
@container (max-width: 559px) { [data-design="instrument"] .tm-auth__card { background: transparent; border-radius: 0; } }
@container (max-width: 559px) { .tm-auth__langs { grid-template-columns: minmax(0, 1fr); } }
/* Circles stay circles under the Instrument look's smooth corners. */
@supports (corner-shape: squircle) { [data-design="instrument"] .tm-auth .tm-auth__glyph { corner-shape: round; } }
.tm-auth__labelrow .tm-link--standalone { font-size: var(--tm-density-font-small); }

/* ---- Stage style (default, 23 Oct 2026): split view. The live market stage (components/market-stage) on the left
   from 900px, the steps on the right; narrower, the stage is a band above the steps. The split grid sits on an inner
   wrapper because a container query can't style its own container. */
.tm-auth--stage { display: block; height: 100%; }
.tm-auth__sv { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.tm-auth__stagewrap { padding: 10px 10px 0; }
.tm-auth__stagewrap > .tm-stage { border-radius: 22px; }
.tm-auth__side { container-type: inline-size; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.tm-auth--stage .tm-auth__top .tm-wordmark { visibility: hidden; }
@container tm-auth (min-width: 900px) {
  /* A full split: two equal halves, the stage edge to edge in its half. */
  .tm-auth__sv { grid-template-columns: minmax(0, 1fr) minmax(460px, 1fr); height: 100%; }
  .tm-auth__stagewrap { padding: 0; min-height: 0; }
  .tm-auth__stagewrap > .tm-stage { height: 100%; border-radius: 0; }
  .tm-auth__side { overflow-y: auto; }
}
/* The steps side is its own container: from 540px wide the card loses its frame and the title grows. */
@container (min-width: 540px) {
  .tm-auth--stage .tm-auth__main { padding-inline: clamp(24px, 8cqw, 72px); }
  .tm-auth--stage .tm-auth__card { border: 0; background: transparent; box-shadow: none; padding: 8px 0; max-width: 420px; }
  .tm-auth--stage .tm-auth__card--wide { max-width: 560px; }
  .tm-auth--stage .tm-auth__title { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
}
[data-design="instrument"] .tm-auth--stage .tm-auth__card { background: transparent; }
/* Stage on top (tablets, 420 to 899px): a shorter band so the steps start on the first screen. */
@container tm-auth (max-width: 899px) {
  .tm-auth--stage .tm-stage__slides, .tm-auth--stage .tm-stage__toast, .tm-auth--stage .tm-stage__stats, .tm-auth--stage .tm-stage__hero p { display: none; }
  .tm-auth--stage .tm-stage__in { grid-template-rows: auto auto auto; }
  .tm-auth--stage .tm-stage__hero h2 { font-size: 24px; max-width: 26ch; }
  .tm-auth--stage .tm-stage__svg { max-height: 190px; }
}

/* ---- components/panel/panel.css ---- */
/* Panel (Pro): header with title, link-group letter, tabs and actions. Flat, separated by dividers. */
.tm-panel { container: tm-panel / inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--tm-panel-bg); }
.tm-panel--framed { border: 1px solid var(--tm-panel-divider); border-radius: var(--tm-panel-radius); overflow: hidden; }
.tm-panel__head { display: flex; align-items: center; gap: var(--tm-space-8); min-width: 0; min-height: 34px; white-space: nowrap; padding: 0 var(--tm-space-4) 0 var(--tm-space-12); border-bottom: 1px solid var(--tm-panel-divider); }
.tm-panel__title { font-weight: var(--tm-font-weight-semibold); font-size: 13px; color: var(--tm-panel-header-fg); white-space: nowrap; }
.tm-panel__head .tm-tabs { flex: 1; min-width: 0; }
.tm-panel__head .tm-tabs--contained button { padding: 3px 8px; font-size: 12.5px; }
.tm-panel__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tm-panel__actions .tm-icon-btn { width: 26px; height: 26px; }
.tm-panel__body { overflow: auto; min-height: 0; }
.tm-panel__body--pad { padding: var(--tm-density-pad-panel); }
/* Narrow panels: the pop-out action moves to the options menu, and header tabs drop to a second row. */
@container tm-panel (width < 320px) { .tm-panel__pop { display: none; } }
@container tm-panel (width < 300px) {
  .tm-panel__head { flex-wrap: wrap; column-gap: 6px; }
  .tm-panel__head .tm-tabs { order: 1; flex: 1 0 100%; margin-bottom: 4px; }
}

/* ---- components/pulse-strip/pulse-strip.css ---- */
/* Pulse strip (Pro): index values, turnover, volume, trades, foreign flows, breadth, buy sentiment. */
.tm-pulse { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: thin; background: var(--tm-color-panel); border-bottom: 1px solid var(--tm-color-divider); }
.tm-pulse__item { flex: none; display: grid; gap: 0; padding: 5px 14px; border-right: 1px solid var(--tm-color-divider); font-variant-numeric: tabular-nums; }
.tm-pulse__label { font-size: 12px; line-height: 16px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.tm-pulse__value { font-size: 12.5px; line-height: 16px; font-weight: var(--tm-font-weight-medium); white-space: nowrap; }
.tm-pulse__value .tm-change { font-size: 12px; margin-left: 6px; }

/* ---- components/shell-phone/shell-phone.css ---- */
/* Phone app shell (Simple): header with market state, search, inbox and avatar; four bottom tabs. */
.tm-phone { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 390px; max-width: 100%; height: 844px; max-height: 88vh; overflow: hidden; background: var(--tm-color-bg); border: 1px solid var(--tm-color-divider-strong); border-radius: 36px; }
.tm-phone__status { height: 20px; }
.tm-phone__header { display: flex; align-items: center; gap: var(--tm-space-8); padding: 22px var(--tm-space-16) var(--tm-space-8); }
.tm-phone__header .tm-mkt { margin-right: auto; }
.tm-phone__main { overflow-y: auto; overflow-x: hidden; }
.tm-phone__section { padding: var(--tm-space-16); }
.tm-phone__section + .tm-phone__section { border-top: 1px solid var(--tm-color-divider); }
.tm-phone__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tm-space-8); padding: var(--tm-space-16) var(--tm-space-16) var(--tm-space-4); }
.tm-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--tm-color-divider); background: var(--tm-color-panel); padding-bottom: 18px; }
.tm-tabbar button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 4px; border: 0; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 11.5px/1.25 var(--tm-font-ui); cursor: pointer; text-align: center; min-width: 0; }
.tm-tabbar button[aria-current="page"] { color: var(--tm-color-text); }
.tm-tabbar button[aria-current="page"] .tm-icon { color: var(--tm-color-primary-text); }
.tm-phone__trade { position: sticky; bottom: 0; padding: var(--tm-space-12) var(--tm-space-16); background: linear-gradient(to top, var(--tm-color-bg) 70%, transparent); }

/* ---- components/shell-desktop/shell-desktop.css ---- */
/* Desktop Simple shell: top navigation with the same four areas as the phone.
   Reacts to its own width (container tm-dsk), which is the window in the app (tokens/breakpoints.json):
   tablet 768 to 1023: one column up to 720px, the order ticket opens as a right-hand sheet from a pinned Trade button;
   desktop 1024 and up: two columns with the ticket docked right, content up to 1200px, centred. */
.tm-dsk { container: tm-dsk / inline-size; position: relative; min-width: var(--tm-breakpoint-tablet); background: var(--tm-color-bg); }
.tm-dsk__nav { position: sticky; top: 0; z-index: var(--tm-z-sticky); display: flex; align-items: center; gap: var(--tm-space-16); height: 64px; background: var(--tm-color-bg); border-bottom: 1px solid var(--tm-color-divider); white-space: nowrap; }
.tm-dsk__nav > * { flex: none; }
.tm-wordmark { font-weight: var(--tm-font-weight-semibold); font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; color: var(--tm-color-text); }
.tm-dsk__links { display: flex; gap: var(--tm-space-4); }
.tm-dsk__links a { padding: 8px 12px; border-radius: var(--tm-radius-sm); color: var(--tm-color-text-secondary); text-decoration: none; font-weight: var(--tm-font-weight-medium); }
.tm-dsk__links a:hover { color: var(--tm-color-text); }
.tm-dsk__links a[aria-current="page"] { color: var(--tm-color-text); background: var(--tm-color-hover); }
.tm-dsk__right { margin-left: auto; display: flex; align-items: center; gap: var(--tm-space-8); }
.tm-dsk__right .tm-search { display: none; width: 240px; }
.tm-dsk__right .tm-search .tm-input { min-height: 38px; }
.tm-dsk__right .tm-mkt__meta { display: none; }
.tm-dsk__content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tm-space-24); max-width: calc(var(--tm-layout-content-tablet) + 2 * var(--tm-layout-gutter-tablet)); margin: 0 auto; padding: var(--tm-space-24) var(--tm-layout-gutter-tablet); }
.tm-dsk__col { display: grid; gap: var(--tm-space-24); align-content: start; min-width: 0; }
.tm-dsk__block { border-top: 1px solid var(--tm-color-divider); padding-top: var(--tm-space-16); }
/* Navigation and page banners line up with the content column. */
.tm-dsk__nav, .tm-dsk .tm-banner--page { padding-inline: max(var(--tm-layout-gutter-tablet), calc((100% - var(--tm-layout-content-tablet)) / 2)); }

/* Tablet: the ticket is a sheet from the right, opened by the pinned Trade button. */
.tm-dsk__trade { position: sticky; bottom: 0; z-index: 2; padding: var(--tm-space-12) 0 var(--tm-space-16); margin-top: calc(-1 * var(--tm-space-8)); background: linear-gradient(to top, var(--tm-color-bg) 70%, transparent); }
.tm-dsk__trade .tm-btn { width: 100%; }
.tm-dsk__scrim { position: fixed; inset: 0; z-index: var(--tm-z-sheet); background: var(--tm-color-scrim); opacity: 0; pointer-events: none; transition: opacity var(--tm-motion-duration-base); }
.tm-dsk__content > .tm-side-panel {
  position: fixed; z-index: calc(var(--tm-z-sheet) + 1); top: 0; right: 0; bottom: 0; align-self: stretch; width: min(var(--tm-layout-sheet-side), 100%); max-width: none;
  overflow-y: auto; border-radius: var(--tm-radius-lg) 0 0 var(--tm-radius-lg); border-width: 0 0 0 1px; box-shadow: var(--tm-sheet-shadow);
  transform: translateX(100%); visibility: hidden; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard), visibility 0s var(--tm-motion-duration-base);
}
.tm-dsk.is-ticket-open .tm-dsk__content > .tm-side-panel { transform: none; visibility: visible; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard); }
.tm-dsk.is-ticket-open .tm-dsk__scrim { opacity: 1; pointer-events: auto; }
.tm-side-panel__close { margin: -6px -6px -6px 0; }

@container tm-dsk (width >= 1024px) {
  .tm-dsk__nav { gap: var(--tm-space-24); }
  .tm-dsk__nav, .tm-dsk .tm-banner--page { padding-inline: max(var(--tm-layout-gutter-desktop), calc((100% - var(--tm-layout-content-simple)) / 2)); }
  .tm-dsk__right { gap: var(--tm-space-12); }
  .tm-dsk__right .tm-search { display: block; }
  .tm-dsk__search-btn { display: none; }
  .tm-dsk__content {
    grid-template-columns: minmax(0, 1fr) var(--tm-layout-ticket-docked);
    max-width: calc(var(--tm-layout-content-simple) + 2 * var(--tm-layout-gutter-desktop));
    padding: var(--tm-space-24) var(--tm-layout-gutter-desktop) var(--tm-space-48);
  }
  .tm-dsk .tm-price--display { font-size: var(--tm-type-display-large-size); line-height: var(--tm-type-display-large-line); }
  .tm-dsk__trade, .tm-dsk__scrim, .tm-side-panel__close { display: none; }
  .tm-dsk__content > .tm-side-panel {
    position: sticky; top: calc(64px + var(--tm-space-16)); bottom: auto; z-index: auto; align-self: start; width: 100%;
    max-height: calc(100vh - 64px - var(--tm-space-32)); border-width: 1px; border-radius: var(--tm-radius-sm); box-shadow: none;
    transform: none; visibility: visible; transition: none;
  }
}
@container tm-dsk (width >= 1280px) {
  .tm-dsk__right .tm-search { width: 280px; }
  .tm-dsk__right .tm-mkt__meta { display: inline; }
  .tm-dsk__content { column-gap: var(--tm-space-32); }
}

/* Sliding selection pill (24 Oct 2026, optional): a shell may put .tm-nav-pill inside the navigation links or the tab
   bar and position it on the selected item; looks style it (Lumen draws the lit key on it). Hidden by default. */
.tm-nav-pill { display: none; position: absolute; z-index: 0; pointer-events: none; }
.tm-dsk__links { position: relative; }
.tm-dsk__links > a, .tm-tabbar > button { position: relative; z-index: 1; }

/* ---- components/shell-pro/shell-pro.css ---- */
/* Pro workspace: top bar, pulse strip, docked linked panels, bottom dock, status bar. Compact density.
   The shell reacts to its own size (container tm-pro), which is the window in the app.
   Widths follow tokens/breakpoints.json: desktop 1024 (compact arrangement, book over ticket),
   laptop 1280 (Trader: ticket in its own column), wide 1600 (Time and sales under the book, dock in two),
   ultra 2240 (book, Time and sales and ticket side by side, dock in three). */
.tm-pro {
  container: tm-pro / size;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100vh; height: 100dvh; min-width: var(--tm-layout-pro-min); overflow: hidden;
  background: var(--tm-color-bg); font-size: var(--tm-density-font-body);
}

/* Top bar: nothing in it wraps. Workspaces show as tabs from laptop width, as one menu below it. */
.tm-pro__top { display: flex; align-items: center; gap: var(--tm-space-12); min-width: 0; height: 44px; padding: 0 var(--tm-space-12); background: var(--tm-color-panel); border-bottom: 1px solid var(--tm-color-divider); white-space: nowrap; }
.tm-pro__top > * { flex: none; }
.tm-pro__ws { display: none; }
.tm-pro__ws-menu { width: 150px; }
.tm-pro__ws-menu select { min-height: 30px; }
.tm-pro__top .tm-search { flex: 0 1 220px; min-width: 150px; }
.tm-pro__top .tm-search .tm-input { min-height: 30px; }
.tm-pro__top .tm-mkt__meta { display: none; }
.tm-pro__right { margin-left: auto; display: flex; align-items: center; gap: var(--tm-space-12); }
.tm-pro__bp { display: grid; justify-items: end; font-size: 12px; line-height: 15px; white-space: nowrap; }
.tm-pro__bp span { color: var(--tm-color-text-secondary); }
.tm-pro__bp b { font-weight: var(--tm-font-weight-semibold); }
.tm-pro__top .tm-icon-btn { width: var(--tm-density-control-height); height: var(--tm-density-control-height); }

/* Panel grid. Columns resize by dragging the splitters (--_c1 watchlist, --_c3 the column after the chart). */
.tm-pro__grid {
  display: grid; min-height: 0; gap: 1px 0; background: var(--tm-color-divider);
  grid-template-columns: var(--_c1, var(--tm-layout-pro-watchlist-desktop)) 1px minmax(0, 1fr) 1px var(--_c3, var(--tm-layout-pro-side-desktop));
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "wl s1 chart s2 book" "wl s1 chart s2 ticket";
}
.tm-pro__grid > [data-area="wl"] { grid-area: wl; }
.tm-pro__grid > [data-area="s1"] { grid-area: s1; }
.tm-pro__grid > [data-area="chart"] { grid-area: chart; }
.tm-pro__grid > [data-area="s2"] { grid-area: s2; }
.tm-pro__grid > [data-area="book"] { grid-area: book; }
.tm-pro__grid > [data-area="ticket"] { grid-area: ticket; }
.tm-pro__grid > [data-area="tape"] { grid-area: tape; display: none; }
.tm-pro__grid > [data-area="tape"], .tm-pro__grid > [data-area="ticket"] { box-shadow: inset 1px 0 var(--tm-color-divider); }
.tm-pro__grid > [data-area="ticket"] { box-shadow: none; }
.tm-pro__split { background: var(--tm-color-divider); cursor: col-resize; position: relative; z-index: 1; }
.tm-pro__split::after { content: ""; position: absolute; inset: 0 -3px; }
.tm-pro__split:hover, .tm-pro__split.is-drag { background: var(--tm-color-primary-text); }

/* Order book: five levels in the compact arrangement (book over ticket), ten from laptop width. */
.tm-pro [data-area="book"] .tm-book__row:nth-child(n+7) { display: none; }
.tm-pro__wide-only { display: none; }

/* Ticket: when it is taller than its panel, the summary and place button stay pinned at the bottom. */
.tm-pro [data-area="ticket"] .tm-ticket__submit {
  position: sticky; bottom: calc(-1 * var(--tm-density-pad-panel)); z-index: 1;
  margin: 0 calc(-1 * var(--tm-density-pad-panel)) calc(-1 * var(--tm-density-pad-panel));
  padding: var(--tm-space-8) var(--tm-density-pad-panel) var(--tm-density-pad-panel);
  background: var(--tm-panel-bg); border-top: 1px solid var(--tm-color-divider);
}

/* Bottom dock: one tabbed panel; holdings and fills get their own panels on wide screens. */
.tm-pro__dock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1px; height: clamp(var(--tm-layout-pro-dock-min), 25cqh, var(--tm-layout-pro-dock-max)); min-height: 0; background: var(--tm-color-divider); border-top: 1px solid var(--tm-color-divider); }
.tm-pro__dock-toggle { display: none; }
.tm-pro__dock > .tm-panel { min-height: 0; }
.tm-pro__dock > [data-dock] { display: none; }

/* Status bar: connection, freshness, Colombo time and session always; shortcut hints from laptop width. */
.tm-pro__status { display: flex; align-items: center; gap: var(--tm-space-16); min-width: 0; height: 26px; padding: 0 var(--tm-space-12); background: var(--tm-color-panel); border-top: 1px solid var(--tm-color-divider); font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; overflow: hidden; }
.tm-pro__status .tm-kbd { height: 17px; min-width: 17px; font-size: 11px; }
.tm-pro__keys { display: none; margin-left: auto; gap: var(--tm-space-16); }
.tm-pro__keys > span { display: inline-flex; align-items: center; gap: 4px; }
.tm-pro__status-update { display: none; }

/* Pulse strip scrolls sideways when it doesn't fit; a fade says there is more. */
.tm-pro .tm-pulse { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }

@container tm-pro (width >= 1280px) {
  .tm-pro__ws { display: block; }
  .tm-pro__ws-menu { display: none; }
  .tm-pro__grid {
    grid-template-columns: var(--_c1, var(--tm-layout-pro-watchlist-laptop)) 1px minmax(0, 1fr) 1px var(--_c3, var(--tm-layout-pro-book-laptop)) var(--tm-layout-pro-ticket-laptop);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "wl s1 chart s2 book ticket";
  }
  .tm-pro__grid > [data-area="ticket"] { box-shadow: inset 1px 0 var(--tm-color-divider); }
  .tm-pro [data-area="book"] .tm-book__row:nth-child(n+7) { display: grid; }
  .tm-pro__keys { display: flex; }
  .tm-pro__status-update { display: inline; }
  .tm-pro .tm-pulse { mask-image: none; }
}
@container tm-pro (width >= 1600px) {
  .tm-pro__top .tm-search { flex-basis: 280px; }
  .tm-pro__top .tm-mkt__meta { display: inline; }
  .tm-pro__grid {
    grid-template-columns: var(--_c1, var(--tm-layout-pro-watchlist-wide)) 1px minmax(0, 1fr) 1px var(--_c3, var(--tm-layout-pro-side-desktop)) var(--tm-layout-pro-ticket);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "wl s1 chart s2 book ticket" "wl s1 chart s2 tape ticket";
  }
  .tm-pro__grid > [data-area="tape"] { box-shadow: none; }
  .tm-pro__grid > [data-area="tape"] { display: grid; }
  .tm-pro [data-area] .tm-pro__narrow-only { display: none; }
  .tm-pro__dock { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .tm-pro__dock > [data-dock="holdings"] { display: grid; }
  .tm-pro [data-dock-tab="holdings"] { display: none; }
}
@container tm-pro (width >= 2240px) {
  .tm-pro__grid {
    grid-template-columns: var(--_c1, var(--tm-layout-pro-watchlist-ultra)) 1px minmax(0, 1fr) 1px var(--_c3, var(--tm-layout-pro-side-desktop)) var(--tm-layout-pro-tape) var(--tm-layout-pro-ticket);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "wl s1 chart s2 book tape ticket";
  }
  .tm-pro__grid > [data-area="tape"] { box-shadow: inset 1px 0 var(--tm-color-divider); }
  .tm-pro__dock { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
  .tm-pro__dock > [data-dock="fills"] { display: grid; order: 1; }
  .tm-pro__dock > [data-dock="holdings"] { order: 2; }
  .tm-pro [data-dock-tab="fills"] { display: none; }
}
/* Short windows (below pro-dock-collapse, 760px): the dock starts as its tab bar so the panels keep their height. */
@container tm-pro (height < 760px) {
  .tm-pro__dock:not(.is-open) { height: auto; }
  .tm-pro__dock:not(.is-open) .tm-panel__body, .tm-pro__dock:not(.is-open) > [data-dock] { display: none; }
  .tm-pro__dock:not(.is-open) .tm-panel__head { border-bottom: 0; }
  .tm-pro__dock.is-open { height: 45cqh; }
  .tm-pro__dock-toggle { display: inline-grid; }
  .tm-pro__dock.is-open .tm-pro__dock-toggle .tm-icon { transform: rotate(180deg); }
}

/* ---- css/look-instrument.css ---- */
/* Look: Instrument. Switch with data-design="instrument" on the root.
   A trading desk built like precision hardware: keycap controls lit from above, recessed wells for input,
   glass for anything that floats, a glowing indicator for the selected option, a receipt for the order summary.
   It changes surface, depth and light only. Colour roles and their meanings stay as they are:
   blue for action and selection, green and red for direction, amber for market state. */

/* ---------- Look variables ---------- */
[data-design="instrument"] {
  --lk-hi: rgb(255 255 255 / 0.07);          /* top light on raised surfaces */
  --lk-hi-strong: rgb(255 255 255 / 0.14);
  --lk-edge: rgb(255 255 255 / 0.08);        /* hairline around floating things */
  --lk-shade: rgb(0 0 0 / 0.45);             /* contact shadow under keycaps */
  --lk-shade-in: rgb(0 0 0 / 0.38);          /* inner shadow at the top of wells */
  --lk-well: color-mix(in srgb, var(--tm-color-bg) 82%, black);
  --lk-key-top: color-mix(in srgb, var(--tm-color-raised) 88%, white);
  --lk-key-bottom: var(--tm-color-raised);
  --lk-glass: color-mix(in srgb, var(--tm-color-raised) 80%, transparent);
  --lk-float: 0 1px 1px rgb(0 0 0 / 0.3), 0 12px 32px -10px rgb(0 0 0 / 0.75);
  --lk-grid: rgb(255 255 255 / 0.035);       /* dot grid behind shells */
  /* Idle border of text fields and dropdowns: toned down (about 1.85:1 on panels, below the 3:1 control role).
     Agreed 23 Oct 2026; the recessed fill and label identify the field, hover and focus bring the border up. */
  --lk-field-border: color-mix(in srgb, var(--tm-color-border-control) 45%, var(--tm-color-divider));
  /* Trade fills: deep enough that white text passes 4.5:1 on dark. */
  /* Bright fills with white labels, the same in both themes. Agreed 22 Oct 2026 as a known exception:
     white text is 3.4 to 3.6:1 on these (meets 3:1 for large text, not 4.5:1). */
  --lk-primary: #4A86FF;
  --lk-buy: #10A86C;
  --lk-sell: #EE4F5C;
  --lk-on-trade: #FFFFFF;
  /* Unselected tabs and segments, a step quieter than secondary text and still 4.5:1. */
  --lk-unselected: color-mix(in srgb, var(--tm-color-text-secondary) 90%, var(--tm-color-panel));
}
/* The primary role follows the agreed blue in every theme, including system light and nested themes. */
:root[data-design="instrument"], [data-design="instrument"] [data-theme] {
  --tm-color-primary: var(--lk-primary);
  --tm-color-primary-hover: color-mix(in srgb, var(--lk-primary) 92%, black);
  --tm-color-primary-pressed: color-mix(in srgb, var(--lk-primary) 84%, black);
}
[data-design="instrument"][data-theme="light"], [data-design="instrument"] [data-theme="light"] {
  --lk-hi: rgb(255 255 255 / 0.9);
  --lk-hi-strong: rgb(255 255 255 / 1);
  --lk-edge: rgb(20 30 50 / 0.09);
  --lk-shade: rgb(20 30 50 / 0.16);
  --lk-shade-in: rgb(20 30 50 / 0.1);
  --lk-well: color-mix(in srgb, var(--tm-color-bg) 70%, #E9ECF1);
  --lk-key-top: #FFFFFF;
  --lk-key-bottom: #F3F5F8;
  --lk-glass: rgb(255 255 255 / 0.78);
  --lk-float: 0 1px 2px rgb(20 30 50 / 0.08), 0 14px 34px -12px rgb(20 30 50 / 0.28);
  --lk-grid: rgb(20 30 50 / 0.05);
}
@media (prefers-color-scheme: light) {
  [data-design="instrument"]:not([data-theme="dark"]) {
    --lk-hi: rgb(255 255 255 / 0.9);
    --lk-hi-strong: rgb(255 255 255 / 1);
    --lk-edge: rgb(20 30 50 / 0.09);
    --lk-shade: rgb(20 30 50 / 0.16);
    --lk-shade-in: rgb(20 30 50 / 0.1);
    --lk-well: color-mix(in srgb, var(--tm-color-bg) 70%, #E9ECF1);
    --lk-key-top: #FFFFFF;
    --lk-key-bottom: #F3F5F8;
    --lk-glass: rgb(255 255 255 / 0.78);
    --lk-float: 0 1px 2px rgb(20 30 50 / 0.08), 0 14px 34px -12px rgb(20 30 50 / 0.28);
    --lk-grid: rgb(20 30 50 / 0.05);
  }
}

/* ---------- Smooth corners ----------
   Continuous (squircle) corners like iOS on every rounded surface. A squircle reads smaller than a circular
   arc of the same radius, so the radii step up. Round things (dots, avatars, switches, counts) stay round. */
/* Radius roles, agreed 22 Oct 2026: buttons 20, controls 20, chips 12, panels 20, menus 24, sheets 32 (smooth corners).
   The Corner radius lab sets the --lk-r-* values; compact density scales controls and buttons down. */
[data-design="instrument"], [data-design="instrument"] [data-density="comfortable"], [data-design="instrument"][data-density="comfortable"] {
  --tm-density-radius-control: var(--lk-r-control, 20px); --_btn-r: var(--lk-r-button, 20px);
}
[data-design="instrument"] [data-density="compact"], [data-design="instrument"][data-density="compact"] {
  --tm-density-radius-control: calc(var(--lk-r-control, 20px) * 0.56); --_btn-r: calc(var(--lk-r-button, 20px) * 0.55);
}
[data-design="instrument"] {
  --tm-radius-xs: var(--lk-r-xs, 12px); --tm-radius-sm: var(--lk-r-sm, 20px); --tm-radius-md: var(--lk-r-md, 24px); --tm-radius-lg: var(--lk-r-lg, 32px);
  --lk-r-menu: var(--lk-r-md, 24px);
}
@supports (corner-shape: squircle) {
  [data-design="instrument"]:not([data-corners="round"]) *, [data-design="instrument"]:not([data-corners="round"]) *::before, [data-design="instrument"]:not([data-corners="round"]) *::after, [data-design="instrument"]:not([data-corners="round"]) ::picker(select) { corner-shape: squircle; }
  [data-design="instrument"] :is(.tm-avatar, .tm-count, .tm-switch, .tm-timeline__dot, .tm-mkt, .tm-progress, .tm-progress > i, .tm-spark, .tm-banner > .tm-icon),
  [data-design="instrument"] .tm-switch::after, [data-design="instrument"] .tm-mkt::before, [data-design="instrument"] .tm-status::before,
  [data-design="instrument"] .tm-sheet__handle::before, [data-design="instrument"] .tm-btn.is-loading::after { corner-shape: round; }
}

/* ---------- Buttons: keycaps ---------- */
[data-design="instrument"] .tm-btn {
  border-radius: var(--_btn-r, var(--tm-button-radius));
  letter-spacing: -0.005em;
  transition: background-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast), transform 80ms var(--tm-motion-easing-standard), filter var(--tm-motion-duration-fast);
}
[data-design="instrument"] .tm-btn--primary { --_k: var(--tm-button-primary-bg); }
[data-design="instrument"] .tm-btn--buy { --_k: var(--lk-buy); color: var(--lk-on-trade); }
[data-design="instrument"] .tm-btn--sell { --_k: var(--lk-sell); color: var(--lk-on-trade); }
/* The full colour, lit a little at the top and a touch deeper at the base. */
[data-design="instrument"] :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell, .tm-seg--side button[aria-pressed="true"], .tm-slide__thumb) {
  --_fill: linear-gradient(180deg, color-mix(in srgb, var(--_k) 84%, white) 0%, var(--_k) 46%, color-mix(in srgb, var(--_k) 90%, black) 100%);
}
[data-design="instrument"] :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell) {
  background: var(--_fill);
  border-color: color-mix(in srgb, var(--_k) 70%, black);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 1px 2px var(--lk-shade), 0 8px 18px -12px var(--lk-shade);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.16);
}
/* Loading: flat, no light or shadow, no press. A second click does nothing (see button.js). */
[data-design="instrument"] .tm-btn.is-loading {
  text-shadow: none; filter: none; transform: none; box-shadow: none; border-color: transparent; cursor: progress;
}
[data-design="instrument"] :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell).is-loading { background: color-mix(in srgb, var(--_k) 82%, var(--tm-color-panel)); --_spin: #FFFFFF; }
[data-design="instrument"] .tm-btn--secondary.is-loading { background: color-mix(in srgb, var(--tm-color-text) 7%, transparent); }
[data-design="instrument"] :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell):is(:hover, .is-hover) {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 1px 2px var(--lk-shade), 0 12px 24px -12px var(--lk-shade);
}
[data-design="instrument"] :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell):is(:active, .is-pressed) {
  transform: translateY(1px); filter: brightness(0.96);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.22), 0 0 0 transparent;
}
/* Secondary: a soft neutral fill with a top light, no outline. */
[data-design="instrument"] .tm-btn--secondary {
  border-color: transparent; background: color-mix(in srgb, var(--tm-color-text) 9%, transparent);
  box-shadow: inset 0 1px 0 var(--lk-hi);
}
[data-design="instrument"] .tm-btn--secondary:is(:hover, .is-hover) { background: color-mix(in srgb, var(--tm-color-text) 14%, transparent); }
[data-design="instrument"] .tm-btn--secondary:is(:active, .is-pressed) { transform: translateY(1px); background: color-mix(in srgb, var(--tm-color-text) 12%, transparent); box-shadow: inset 0 2px 3px var(--lk-shade-in); }
[data-design="instrument"] .tm-btn--secondary.is-focus { border-color: transparent; }

[data-design="instrument"] .tm-btn:disabled, [data-design="instrument"] .tm-btn[aria-disabled="true"] {
  background: var(--lk-well); border-color: var(--tm-color-divider); box-shadow: inset 0 1px 2px var(--lk-shade-in); color: var(--tm-color-text-faint); text-shadow: none; filter: none; transform: none;
}
[data-design="instrument"] .tm-icon-btn { transition: background-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast); }
[data-design="instrument"] .tm-icon-btn:hover { background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom)); box-shadow: inset 0 1px 0 var(--lk-hi), 0 1px 2px var(--lk-shade); }
[data-design="instrument"] .tm-icon-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 35%, transparent); }

/* ---------- Segmented control and contained tabs: a recessed track holding a raised key ---------- */
[data-design="instrument"] :is(.tm-seg, .tm-tabs--contained) {
  background: var(--lk-well); border: 1px solid var(--tm-color-divider);
  box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi);
}
[data-design="instrument"] .tm-tabs--contained {
  display: inline-flex; max-width: 100%; padding: 3px; gap: 2px; border-radius: var(--tm-input-radius);
}
[data-design="instrument"] .tm-tabs--contained button { border-radius: calc(var(--tm-input-radius) - 3px); }
/* Tabs in a panel header: a slim track with clear space above and below it, never touching the header edges. */
[data-design="instrument"] .tm-panel__head { min-height: 38px; }
[data-design="instrument"] .tm-panel__head .tm-tabs--contained { flex: 0 1 auto; padding: 2px; margin-block: 5px; }
[data-design="instrument"] .tm-panel__head .tm-tabs--contained button { padding: 2px 9px; line-height: 18px; }
[data-design="instrument"] .tm-panel__head .tm-tabs--contained .tm-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; margin-left: 5px; }
[data-design="instrument"] :is(.tm-seg button, .tm-tabs button) {
  color: var(--lk-unselected); font-weight: var(--tm-font-weight-regular);
  transition: color var(--tm-motion-duration-fast), background-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast);
}
[data-design="instrument"] :is(.tm-seg button, .tm-tabs button):hover { color: var(--tm-color-text); }
[data-design="instrument"] .tm-seg button[aria-pressed="true"],
[data-design="instrument"] .tm-tabs--contained button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom));
  color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold);
  box-shadow: inset 0 1px 0 var(--lk-hi-strong), 0 0 0 1px var(--lk-edge), 0 1px 2px var(--lk-shade), 0 4px 10px -6px var(--lk-shade);
}
/* Buy and Sell: the selected side is the full side colour with white text. */
[data-design="instrument"] .tm-seg--side button[aria-pressed="true"] {
  color: var(--lk-on-trade); text-shadow: 0 1px 0 rgb(0 0 0 / 0.16);
  background: var(--_fill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 1px color-mix(in srgb, var(--_k) 70%, black), 0 1px 2px var(--lk-shade), 0 6px 14px -8px var(--lk-shade);
}
[data-design="instrument"] .tm-seg--side button[data-side="buy"] { --_k: var(--lk-buy); }
[data-design="instrument"] .tm-seg--side button[data-side="sell"] { --_k: var(--lk-sell); }

/* Underline tabs: a short neutral bar under the selected tab, no colour. */
[data-design="instrument"] .tm-tabs--underline button { position: relative; border-bottom-color: transparent !important; }
[data-design="instrument"] .tm-tabs--underline button[aria-selected="true"] { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
[data-design="instrument"] .tm-tabs--underline button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: min(100%, 28px); height: 2px; transform: translateX(-50%);
  border-radius: 2px; background: var(--tm-color-text);
}

/* ---------- Inputs: recessed wells ---------- */
[data-design="instrument"] .tm-input {
  border-color: var(--lk-field-border);
  background: var(--lk-well);
  box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi);
  transition: border-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast);
}
[data-design="instrument"] .tm-input:focus-within, [data-design="instrument"] .tm-input.is-focus {
  box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 0 0 3px var(--tm-color-primary-tint-strong), 0 0 18px -6px var(--tm-color-primary-text);
}
[data-design="instrument"] .tm-field--error .tm-input:focus-within { box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 0 0 3px var(--tm-color-down-tint); }
[data-design="instrument"] .tm-input__affix { letter-spacing: 0.02em; }
[data-design="instrument"] .tm-input__affix:first-child { padding-right: 10px; border-right: 1px solid var(--tm-color-divider); }
[data-design="instrument"] .tm-input__affix:last-child { padding-left: 10px; border-left: 1px solid var(--tm-color-divider); }
[data-design="instrument"] .tm-input.is-disabled, [data-design="instrument"] .tm-input:has(:disabled) { box-shadow: none; }
[data-design="instrument"] .tm-stepper__btn {
  background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom));
  box-shadow: inset 0 1px 0 var(--lk-hi), 0 1px 2px var(--lk-shade);
}
[data-design="instrument"] .tm-stepper__btn:active { transform: translateY(1px); box-shadow: inset 0 2px 3px var(--lk-shade-in); }

/* Selects and dropdown triggers: recessed wells, the same as the text fields, so every field in a form matches.
   Agreed 22 Oct 2026; it replaced the raised keycap trigger. */
[data-design="instrument"] :is(.tm-select select, .tm-dropdown__trigger) {
  border-color: var(--lk-field-border); background: var(--lk-well);
  box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi);
  transition: border-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast);
}
[data-design="instrument"] :is(.tm-select select, .tm-dropdown__trigger):hover { border-color: var(--tm-color-text-secondary); }
[data-design="instrument"] :is(.tm-select select:focus-visible, .tm-dropdown__trigger:focus-visible, .tm-dropdown__trigger[aria-expanded="true"]) {
  border-color: var(--tm-input-border-focus);
  box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 0 0 3px var(--tm-color-primary-tint-strong), 0 0 18px -6px var(--tm-color-primary-text);
}
[data-design="instrument"] .tm-listbox {
  background: var(--lk-glass); border-color: var(--lk-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
}
[data-design="instrument"] .tm-listbox [role="option"]:is(:hover, .is-active) { background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-primary-text) 12%, transparent), var(--tm-color-hover)); }
[data-design="instrument"] .tm-calendar__grid button { position: relative; }
[data-design="instrument"] .tm-calendar__grid button[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-color-primary) 84%, white), var(--tm-color-primary));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 6px 14px -8px var(--tm-color-primary);
}
[data-design="instrument"] .tm-datepicker .tm-calendar { background: var(--lk-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float); }

/* Native selects open a styled list (customizable select). Browsers without it keep the system list. */
@supports (appearance: base-select) {
  [data-design="instrument"] .tm-select select, [data-design="instrument"] .tm-select select::picker(select) { appearance: base-select; }
  [data-design="instrument"] .tm-select select { display: flex; align-items: center; }
  [data-design="instrument"] .tm-select select::picker-icon { display: none; }
  [data-design="instrument"] .tm-select select::picker(select) {
    /* As wide as the longest option, never narrower than the field, left edge on the field's left edge. */
    /* Open below the field and shrink to the room left down to the window edge (at least ~3 rows); open above only
       when that room isn't there. The browser's default picks the side with more room, which made lists open upward. */
    position-area: bottom span-right; margin-top: 6px; max-height: 320px;
    position-try-order: normal; position-try-fallbacks: --tm-below-240, --tm-below-180, --tm-below-132, --tm-above, --tm-above-200;
    min-width: anchor-size(width); width: max-content; max-width: min(440px, calc(100vw - 24px));
    padding: 5px; border: 1px solid var(--lk-edge); border-radius: var(--lk-r-menu); color: var(--tm-color-text);
    background: var(--lk-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
    opacity: 1; transform: none;
    transition: opacity 160ms var(--tm-motion-easing-standard), transform 160ms var(--tm-motion-easing-standard), overlay 160ms allow-discrete, display 160ms allow-discrete;
  }
  /* Shorter tries below the field before flipping above it. */
  @position-try --tm-below-240 { position-area: bottom span-right; margin-top: 6px; max-height: 240px; }
  @position-try --tm-below-180 { position-area: bottom span-right; margin-top: 6px; max-height: 180px; }
  @position-try --tm-below-132 { position-area: bottom span-right; margin-top: 6px; max-height: 132px; }
  /* Only when even three rows don't fit below: open above the field. */
  @position-try --tm-above { position-area: top span-right; margin-top: 0; margin-bottom: 6px; max-height: 320px; }
  @position-try --tm-above-200 { position-area: top span-right; margin-top: 0; margin-bottom: 6px; max-height: 200px; }
  @starting-style { [data-design="instrument"] .tm-select select:open::picker(select) { opacity: 0; transform: translateY(-4px); } }
  [data-design="instrument"] .tm-select option {
    display: flex; align-items: center; gap: 16px; min-height: 38px; padding: 0 12px; border-radius: max(4px, calc(var(--lk-r-menu) - 5px)); white-space: nowrap;
    font: var(--tm-font-weight-regular) var(--tm-density-font-body)/1.25 var(--tm-font-ui); color: var(--tm-color-text);
  }
  /* A gap between rows, so a hovered row never joins the selected one. */
  [data-design="instrument"] .tm-select option + option { margin-top: 3px; }
  [data-design="instrument"] .tm-select option:is(:hover, :focus-visible) { outline: none; background: color-mix(in srgb, var(--tm-color-text) 8%, transparent); }
  [data-design="instrument"] .tm-select option:checked { font-weight: var(--tm-font-weight-semibold); }
  [data-design="instrument"] .tm-select option::checkmark { order: 1; margin-left: auto; color: var(--tm-color-primary-text); }
}

/* Search: results float as their own card, a clear gap below the field. */
[data-design="instrument"] .tm-search__results:not(.is-static) {
  top: calc(100% + 10px); padding: 6px; border-color: var(--lk-edge); border-radius: var(--lk-r-menu);
  background: var(--lk-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
}
[data-design="instrument"] .tm-search__results.is-static {
  margin-top: 10px; padding: 6px; border: 1px solid var(--lk-edge); border-radius: var(--lk-r-menu);
  background: linear-gradient(180deg, var(--lk-hi), transparent 40%), var(--tm-color-raised);
  box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
}
[data-design="instrument"] .tm-search__group { padding: 8px 10px 4px; }
[data-design="instrument"] .tm-search__item { border-radius: max(4px, calc(var(--lk-r-menu) - 6px)); padding: 8px 10px; }
[data-design="instrument"] .tm-search__item:is(:hover, .is-active) { background: color-mix(in srgb, var(--tm-color-text) 7%, transparent); }
[data-design="instrument"] .tm-search__empty { padding: 10px; }

/* Switch: a lit track when on. */
[data-design="instrument"] .tm-switch { background: var(--lk-well); box-shadow: inset 0 1px 3px var(--lk-shade-in); }
[data-design="instrument"] .tm-switch::after { background: linear-gradient(180deg, #FFFFFF, #E4E7EB); box-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 6px -2px rgb(0 0 0 / 0.4); }
[data-design="instrument"] .tm-switch[aria-checked="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-color-primary) 85%, white), var(--tm-color-primary));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2), 0 0 14px -4px var(--tm-color-primary);
}

/* ---------- Chips and badges ---------- */
/* Share-class badge: the soft fill of secondary buttons, label a step brighter than secondary text so it doesn't read as faded. */
[data-design="instrument"] .tm-class {
  border-color: transparent; border-radius: var(--tm-radius-xs);
  background: color-mix(in srgb, var(--tm-color-text) 9%, transparent);
  color: color-mix(in srgb, var(--tm-color-text) 72%, var(--tm-color-text-secondary));
  box-shadow: inset 0 1px 0 var(--lk-hi);
}
[data-design="instrument"] .tm-status {
  border-radius: calc(var(--tm-radius-xs) + 1px); gap: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
[data-design="instrument"] .tm-status:not(:has(.tm-icon))::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
[data-design="instrument"] .tm-status--active { background: linear-gradient(90deg, var(--tm-color-hover), var(--tm-status-neutral-bg)); }
[data-design="instrument"] .tm-count {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-color-primary) 80%, white), var(--tm-color-primary));
  box-shadow: 0 0 0 2px var(--tm-color-panel), 0 0 10px -2px var(--tm-color-primary);
}
[data-design="instrument"] .tm-count--neutral { background: var(--tm-color-divider-strong); box-shadow: 0 0 0 2px var(--tm-color-panel); }
[data-design="instrument"] .tm-filter { border-color: var(--tm-color-divider-strong); background: linear-gradient(180deg, var(--lk-hi), transparent); }
[data-design="instrument"] .tm-filter[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-color-primary-text) 18%, transparent), var(--tm-color-primary-tint));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 40%, transparent); /* blue tint, no glow (agreed 23 Oct 2026) */
}
[data-design="instrument"] .tm-group-letter {
  border-color: var(--lk-edge); background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom));
  box-shadow: inset 0 1px 0 var(--lk-hi), 0 1px 2px var(--lk-shade);
}
[data-design="instrument"] .tm-kbd {
  background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom)); border-color: var(--lk-edge);
  box-shadow: inset 0 1px 0 var(--lk-hi), 0 1px 0 var(--lk-shade), 0 2px 0 color-mix(in srgb, var(--lk-shade) 50%, transparent);
}
[data-design="instrument"] .tm-avatar { box-shadow: 0 0 0 1.5px var(--tm-color-panel), 0 0 0 2.5px var(--lk-edge); background-image: linear-gradient(160deg, var(--lk-hi-strong), transparent 60%); }

/* ---------- Market state: a sonar ping while the market is open, hazard stripes when halted ---------- */
[data-design="instrument"] .tm-mkt {
  background: var(--lk-glass); border-color: var(--lk-edge);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--lk-hi);
}
[data-design="instrument"] .tm-mkt__meta { font-variant-numeric: tabular-nums; }
[data-design="instrument"] .tm-mkt--open::before { box-shadow: 0 0 6px currentColor; animation: lk-ping 2.4s var(--tm-motion-easing-standard) infinite; }
[data-design="instrument"] .tm-mkt--pre-open::before { box-shadow: 0 0 6px currentColor; }
[data-design="instrument"] .tm-mkt--halted {
  background: repeating-linear-gradient(-45deg, var(--tm-color-warning-tint) 0 6px, transparent 6px 12px), var(--tm-color-panel);
  border-color: color-mix(in srgb, var(--tm-color-warning) 35%, transparent);
}
@keyframes lk-ping {
  0% { box-shadow: 0 0 6px currentColor, 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 6px currentColor, 0 0 0 7px transparent; }
}

/* ---------- Prices: engraved display numbers, smaller decimals ---------- */
[data-design="instrument"] .tm-price--display {
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--tm-color-text) 45%, color-mix(in srgb, var(--tm-color-text) 72%, var(--tm-color-text-secondary)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-design="instrument"] .tm-price--display .tm-price__cur { -webkit-text-fill-color: var(--tm-color-text-secondary); letter-spacing: 0.02em; }
[data-design="instrument"] :is(.tm-price--display, .tm-price--title) .tm-price__dec { font-size: 0.6em; letter-spacing: 0; -webkit-text-fill-color: var(--tm-color-text-secondary); }
[data-design="instrument"] .tm-price--display :is(.tm-tint-up, .tm-tint-down) { -webkit-text-fill-color: currentColor; }
[data-design="instrument"] .tm-change--pill { border-radius: calc(var(--tm-radius-xs) + 1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* ---------- Rows, sparklines, tables ---------- */
[data-design="instrument"] :is(.tm-sec, .tm-hold) { transition: background-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast); }
[data-design="instrument"] :is(.tm-sec, .tm-hold):hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-primary-text) 9%, transparent), var(--tm-color-hover) 45%, transparent);
  box-shadow: inset 2px 0 0 var(--tm-color-primary-text);
}
[data-design="instrument"] .tm-spark--up .tm-spark__area { fill: url(#tm-spark-fill-up); }
[data-design="instrument"] .tm-spark--down .tm-spark__area { fill: url(#tm-spark-fill-down); }
[data-design="instrument"] .tm-spark__line { stroke-width: 1.6; }
[data-design="instrument"] .tm-table thead th { background: linear-gradient(180deg, var(--lk-hi), transparent); }
[data-design="instrument"] .tm-table tbody tr:hover td { background: color-mix(in srgb, var(--tm-color-primary-text) 6%, transparent); }
[data-design="instrument"] .tm-progress { background: var(--lk-well); box-shadow: inset 0 1px 2px var(--lk-shade-in); }
[data-design="instrument"] .tm-progress > i { background: linear-gradient(90deg, color-mix(in srgb, currentColor 60%, transparent), currentColor); box-shadow: 0 0 8px -1px currentColor; }

/* ---------- Order book: depth that fades toward the spread ---------- */
[data-design="instrument"] .tm-book__half--bid .tm-book__bar { background: linear-gradient(270deg, color-mix(in srgb, var(--tm-color-up) 20%, transparent), color-mix(in srgb, var(--tm-color-up) 3%, transparent)); border-radius: 3px 0 0 3px; }
[data-design="instrument"] .tm-book__half--ask .tm-book__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-down) 20%, transparent), color-mix(in srgb, var(--tm-color-down) 3%, transparent)); border-radius: 0 3px 3px 0; }
[data-design="instrument"] .tm-book__half--bid.is-best .tm-book__bar { box-shadow: inset -2px 0 0 var(--tm-color-up); }
[data-design="instrument"] .tm-book__half--ask.is-best .tm-book__bar { box-shadow: inset 2px 0 0 var(--tm-color-down); }
[data-design="instrument"] button.tm-book__half:hover { background: color-mix(in srgb, var(--tm-color-primary-text) 8%, transparent); }
[data-design="instrument"] .tm-book__spread { background: linear-gradient(90deg, transparent, var(--tm-color-hover), transparent); }

/* ---------- Order ticket: the summary reads as a receipt ---------- */
[data-design="instrument"] .tm-ticket__summary {
  position: relative; border-top: 0; margin-top: 4px;
  padding: 14px 14px 10px; border-radius: var(--tm-radius-md);
  background: var(--lk-well); box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi);
}
/* Perforation along the top edge. */
[data-design="instrument"] .tm-ticket__summary::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -4px; height: 8px;
  background: radial-gradient(circle, var(--tm-color-panel) 2.5px, transparent 3px) 0 0 / 10px 8px repeat-x;
}
[data-design="instrument"] .tm-ticket__summary .tm-kv > :is(dt, dd) { border-bottom-style: dashed; }
[data-design="instrument"] .tm-kv--total > :is(dt, dd):last-of-type { border-top: 1px dashed var(--tm-color-divider-strong); padding-top: 10px; font-size: calc(var(--tm-density-font-data) + 1px); }
[data-design="instrument"] .tm-fees__parts { background: var(--lk-well); box-shadow: inset 0 1px 2px var(--lk-shade-in); }
[data-design="instrument"] .tm-review__lead .tm-price { letter-spacing: -0.03em; }

/* Slide to confirm: a lit track and a shimmering prompt. */
[data-design="instrument"] .tm-slide { --_side: var(--tm-color-primary); background: var(--lk-well); border-color: var(--tm-color-divider); box-shadow: inset 0 1px 3px var(--lk-shade-in), 0 1px 0 var(--lk-hi); }
[data-design="instrument"] .tm-slide--buy { --_side: var(--lk-buy); --_on: var(--lk-on-trade); }
[data-design="instrument"] .tm-slide--sell { --_side: var(--lk-sell); --_on: var(--lk-on-trade); }
[data-design="instrument"] .tm-slide__thumb { --_k: var(--_side); }
/* The trail fills in behind the handle as it moves and fades out under it, so nothing shows at rest. */
[data-design="instrument"] .tm-slide__fill {
  opacity: 1; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--_side) 22%, transparent) 0, color-mix(in srgb, var(--_side) 22%, transparent) calc(100% - 56px), transparent 100%);
}
[data-design="instrument"] .tm-slide__thumb {
  border-radius: calc(var(--tm-radius-lg) - 2px);
  background: var(--_fill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 1px 2px var(--lk-shade), 0 4px 10px -4px var(--lk-shade);
}
[data-design="instrument"] .tm-slide:not(.is-done) .tm-slide__label {
  background: linear-gradient(90deg, var(--tm-color-text-secondary) 0 35%, var(--tm-color-text) 50%, var(--tm-color-text-secondary) 65% 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: lk-shimmer 2.8s linear infinite;
}
@keyframes lk-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- Floating surfaces: glass ---------- */
[data-design="instrument"] :is(.tm-toast, .tm-menu, .tm-popover, .tm-tooltip, .tm-dialog, .tm-sheet) {
  background: var(--lk-glass); border-color: var(--lk-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
}
/* The status edge is an inset shadow, so it follows the toast's curved corners and tapers into them. */
[data-design="instrument"] .tm-toast { --_tone: var(--tm-color-text-secondary); box-shadow: inset 3px 0 0 var(--_tone), inset 0 1px 0 var(--lk-hi), var(--lk-float); }
[data-design="instrument"] .tm-toast--success { --_tone: var(--tm-color-primary-text); }
[data-design="instrument"] .tm-toast--warning { --_tone: var(--tm-color-warning); }
[data-design="instrument"] .tm-toast--error { --_tone: var(--tm-color-down); }
[data-design="instrument"] .tm-sheet__handle::before { background: linear-gradient(90deg, var(--tm-color-divider-strong), var(--tm-color-text-faint), var(--tm-color-divider-strong)); }
[data-design="instrument"] .tm-menu [role="menuitem"]:is(:hover, :focus-visible) { background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-primary-text) 12%, transparent), var(--tm-color-hover)); }

/* ---------- Banners: a lit edge in the status colour, the icon in a halo ---------- */
[data-design="instrument"] .tm-banner {
  --_tone: var(--tm-color-text-secondary); position: relative; overflow: hidden;
  box-shadow: inset 3px 0 0 var(--_tone), inset 0 0 0 1px color-mix(in srgb, var(--_tone) 18%, transparent);
}
/* Banner icons are filled: the outer shape takes the banner colour and the symbol is knocked out in the panel
   colour. Icons with no outer shape sit on a filled circle. No glow; aligned with the first line of text. */
[data-design="instrument"] .tm-banner > .tm-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--_tone); box-shadow: none; background: none; padding: 0; }
[data-design="instrument"] .tm-banner > .tm-icon:is([data-icon="info"], [data-icon="warning"], [data-icon="halt"], [data-icon="error"], [data-icon="clock"]) > :first-child { fill: currentColor; stroke: currentColor; }
[data-design="instrument"] .tm-banner > .tm-icon:is([data-icon="info"], [data-icon="warning"], [data-icon="halt"], [data-icon="error"], [data-icon="clock"]) > :not(:first-child) { stroke: var(--tm-color-panel); stroke-width: 2.25; }
[data-design="instrument"] .tm-banner > .tm-icon:not([data-icon="info"], [data-icon="warning"], [data-icon="halt"], [data-icon="error"], [data-icon="clock"]) {
  box-sizing: border-box; padding: 3px; border-radius: 50%; background: var(--_tone); color: var(--tm-color-panel); stroke-width: 2.25;
}
[data-design="instrument"] .tm-banner--info { --_tone: var(--tm-banner-info-icon); background: linear-gradient(90deg, var(--tm-banner-info-bg), color-mix(in srgb, var(--tm-banner-info-bg) 35%, transparent)); }
[data-design="instrument"] .tm-banner--warning { --_tone: var(--tm-banner-warning-icon); background: linear-gradient(90deg, var(--tm-banner-warning-bg), color-mix(in srgb, var(--tm-banner-warning-bg) 35%, transparent)); }
[data-design="instrument"] .tm-banner--error { --_tone: var(--tm-banner-error-icon); background: linear-gradient(90deg, var(--tm-banner-error-bg), color-mix(in srgb, var(--tm-banner-error-bg) 35%, transparent)); }
[data-design="instrument"] .tm-banner--halt { --_tone: var(--tm-banner-halt-icon); background: linear-gradient(90deg, var(--tm-banner-halt-bg), color-mix(in srgb, var(--tm-banner-halt-bg) 35%, transparent)); }
[data-design="instrument"] .tm-banner--halt { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_tone) 18%, transparent); }
[data-design="instrument"] .tm-banner--halt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: repeating-linear-gradient(-45deg, var(--tm-banner-halt-icon) 0 4px, transparent 4px 8px); }
[data-design="instrument"] .tm-banner--page { box-shadow: none; }

/* ---------- Empty state: the icon sits in rings ---------- */
[data-design="instrument"] .tm-empty > .tm-icon {
  box-sizing: content-box; padding: 14px; border-radius: calc(var(--tm-radius-md) + 4px); color: var(--tm-color-text-secondary);
  background: radial-gradient(circle at 50% 30%, var(--lk-hi-strong), transparent 70%), linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom));
  box-shadow: inset 0 1px 0 var(--lk-hi), 0 0 0 7px color-mix(in srgb, var(--tm-color-divider) 55%, transparent), 0 0 0 14px color-mix(in srgb, var(--tm-color-divider) 25%, transparent);
  margin-bottom: 14px;
}

/* ---------- Order timeline: the current step glows ---------- */
[data-design="instrument"] .tm-timeline li.is-current .tm-timeline__dot { box-shadow: 0 0 0 4px var(--tm-color-primary-tint), 0 0 12px -2px var(--tm-color-primary-text); }

/* ---------- Pro panels and workspace ---------- */
[data-design="instrument"] .tm-panel__head { background: linear-gradient(180deg, var(--lk-hi), transparent); }
[data-design="instrument"] .tm-panel__title { display: inline-flex; align-items: center; gap: 8px; }
[data-design="instrument"] .tm-panel__title::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--tm-color-text-faint); box-shadow: inset 0 1px 0 var(--lk-hi-strong); }
[data-design="instrument"] .tm-panel--framed { border-color: var(--tm-color-divider); box-shadow: inset 0 1px 0 var(--lk-hi), 0 1px 2px var(--lk-shade); }
[data-design="instrument"] .tm-pulse { background: linear-gradient(180deg, var(--lk-hi), transparent 80%), var(--tm-color-panel); }
[data-design="instrument"] .tm-pro { background-color: var(--tm-color-bg); background-image: radial-gradient(var(--lk-grid) 1px, transparent 1.2px); background-size: 14px 14px; }
[data-design="instrument"] .tm-pro__top { background: linear-gradient(180deg, var(--lk-hi), transparent), var(--tm-color-panel); }
[data-design="instrument"] :is(.tm-pro__split:hover, .tm-pro__split.is-drag)::after { box-shadow: 0 0 10px var(--tm-color-primary-text); }

/* ---------- Desktop Simple ---------- */
[data-design="instrument"] .tm-dsk__nav {
  background: var(--lk-glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 -1px 0 var(--tm-color-divider), 0 8px 24px -18px var(--lk-shade);
}
[data-design="instrument"] .tm-dsk__links a { position: relative; }
[data-design="instrument"] .tm-dsk__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px;
  background: var(--tm-color-text);
}
[data-design="instrument"] .tm-dsk { background-color: var(--tm-color-bg); background-image: radial-gradient(90% 40% at 30% -10%, color-mix(in srgb, var(--tm-color-primary-text) 7%, transparent), transparent 70%); }

/* ---------- Phone: atmosphere in the day's direction, a floating glass tab bar ---------- */
[data-design="instrument"] .tm-phone {
  --_mood: var(--tm-color-primary-text);
  background: radial-gradient(130% 42% at 50% -8%, color-mix(in srgb, var(--_mood) 13%, transparent), transparent 70%), var(--tm-color-bg);
}
[data-design="instrument"] .tm-phone:has(.tm-phead__moves > div:first-child > .tm-change--up) { --_mood: var(--tm-color-up); }
[data-design="instrument"] .tm-phone:has(.tm-phead__moves > div:first-child > .tm-change--down) { --_mood: var(--tm-color-down); }
[data-design="instrument"] .tm-phone:has(.tm-phead) .tm-phead .tm-price--display { font-size: calc(var(--tm-type-display-size) * 1.12); }
[data-design="instrument"] .tm-phone__main { padding-bottom: 84px; }
[data-design="instrument"] .tm-tabbar {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 5;
  padding: 2px 4px 4px; border: 1px solid var(--lk-edge); border-radius: calc(var(--tm-radius-lg) + 2px);
  background: var(--lk-glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--lk-hi), var(--lk-float);
}
[data-design="instrument"] .tm-tabbar button { position: relative; padding: 9px 2px 8px; }
[data-design="instrument"] .tm-tabbar button[aria-current="page"] .tm-icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tm-color-primary-text) 70%, transparent)); }

[data-design="instrument"] .tm-phone__trade { padding-bottom: 92px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-design="instrument"] .tm-mkt--open::before, [data-design="instrument"] .tm-slide .tm-slide__label { animation: none; }
  [data-design="instrument"] .tm-slide:not(.is-done) .tm-slide__label { -webkit-text-fill-color: var(--tm-color-text); }
  [data-design="instrument"] :is(.tm-btn, .tm-stepper__btn):active { transform: none; }
}

/* ---------- Liquid selection bubble (segmented controls and tabs) ----------
   One raised key (or the underline bar) slides to the selected option; the leading edge moves first and the
   trailing edge catches up, so it stretches and settles. Driven by components/_core/bubble.js. */
.lk-bubble { display: none; }
[data-design="instrument"] .has-bubble { position: relative; isolation: isolate; }
[data-design="instrument"] .has-bubble > .lk-bubble {
  display: block; position: absolute; z-index: 0; pointer-events: none; opacity: 1;
  border-radius: calc(var(--tm-input-radius) - 3px);
  background: linear-gradient(180deg, var(--lk-key-top), var(--lk-key-bottom));
  box-shadow: inset 0 1px 0 var(--lk-hi-strong), 0 0 0 1px var(--lk-edge), 0 1px 2px var(--lk-shade), 0 4px 10px -6px var(--lk-shade);
}
[data-design="instrument"] .has-bubble > :is(button, [role="tab"]) { position: relative; z-index: 1; }
[data-design="instrument"] :is(.tm-seg, .tm-tabs--contained).has-bubble > button:is([aria-pressed="true"], [aria-selected="true"]) { background: transparent; box-shadow: none; }
[data-design="instrument"] .tm-seg--side.has-bubble > .lk-bubble[data-side] {
  --_k: var(--lk-buy);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_k) 84%, white) 0%, var(--_k) 46%, color-mix(in srgb, var(--_k) 90%, black) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 1px color-mix(in srgb, var(--_k) 70%, black), 0 1px 2px var(--lk-shade), 0 6px 14px -8px var(--lk-shade);
}
[data-design="instrument"] .tm-seg--side.has-bubble > .lk-bubble[data-side="sell"] { --_k: var(--lk-sell); }
[data-design="instrument"] .tm-tabs--underline.has-bubble > .lk-bubble { top: auto !important; bottom: 0; height: 2px !important; border-radius: 2px; background: var(--tm-color-text); box-shadow: none; }
[data-design="instrument"] .tm-tabs--underline.has-bubble > button[aria-selected="true"]::after { display: none; }

/* ---------- Surfaces ----------
   Solid colours, no gradients: chrome (top bar, panel headers, status bar, desktop nav) a step darker than the
   content panels. A is the default, agreed 22 Oct 2026. C and D are kept as samples, and data-surface="gradient"
   brings back the earlier top-lit gradients for comparison.
   Checked against WCAG 2.2: every text colour on every surface is 4.5:1 or more. In light, red and green text
   can't sit on grey chrome, so the pulse strip and table headers use the near-white header band. */
/* A: Recessed chrome (default) */
[data-design="instrument"] { --lk-canvas: #0C0E11; --lk-chrome: #111418; --lk-content: #181C22; --lk-thead: #14181D; }
[data-design="instrument"][data-theme="light"], [data-design="instrument"] [data-theme="light"] { --lk-canvas: #E7EAEE; --lk-chrome: #EEF0F3; --lk-content: #FFFFFF; --lk-thead: #F7F8FA; }
@media (prefers-color-scheme: light) { [data-design="instrument"]:not([data-theme="dark"]) { --lk-canvas: #E7EAEE; --lk-chrome: #EEF0F3; --lk-content: #FFFFFF; --lk-thead: #F7F8FA; } }
/* C: Lifted content (sample) */
[data-design="instrument"][data-surface="c"] { --lk-canvas: #0E1014; --lk-chrome: #13161B; --lk-content: #1E232B; --lk-thead: #181C22; }
[data-design="instrument"][data-surface="c"][data-theme="light"], [data-design="instrument"][data-surface="c"] [data-theme="light"] { --lk-canvas: #ECEEF1; --lk-chrome: #F3F4F6; --lk-content: #FFFFFF; --lk-thead: #F9FAFB; }
@media (prefers-color-scheme: light) { [data-design="instrument"][data-surface="c"]:not([data-theme="dark"]) { --lk-canvas: #ECEEF1; --lk-chrome: #F3F4F6; --lk-content: #FFFFFF; --lk-thead: #F9FAFB; } }
/* D: Cool slate (sample) */
[data-design="instrument"][data-surface="d"] { --lk-canvas: #0A0E16; --lk-chrome: #0E131D; --lk-content: #171E2B; --lk-thead: #121823; }
[data-design="instrument"][data-surface="d"][data-theme="light"], [data-design="instrument"][data-surface="d"] [data-theme="light"] { --lk-canvas: #E3E8F1; --lk-chrome: #EAEFF7; --lk-content: #FFFFFF; --lk-thead: #F6F8FC; }
@media (prefers-color-scheme: light) { [data-design="instrument"][data-surface="d"]:not([data-theme="dark"]) { --lk-canvas: #E3E8F1; --lk-chrome: #EAEFF7; --lk-content: #FFFFFF; --lk-thead: #F6F8FC; } }
[data-design="instrument"]:not([data-surface="gradient"]) :is(.tm-pro, .tm-dsk) { background: var(--lk-canvas); background-image: none; }
[data-design="instrument"]:not([data-surface="gradient"]) .tm-panel { background: var(--lk-content); }
[data-design="instrument"]:not([data-surface="gradient"]) :is(.tm-panel__head, .tm-pro__top, .tm-pro__status, .tm-dsk__nav) {
  background: var(--lk-chrome); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
[data-design="instrument"]:not([data-surface="gradient"]) .tm-pulse { background: var(--lk-thead); }
[data-design="instrument"]:not([data-surface="gradient"]) .tm-table thead th { background: var(--lk-thead); }
[data-design="instrument"]:not([data-surface="gradient"]) :is(.tm-panel__head, .tm-pro__top) :is(.tm-tabs--contained, .tm-seg) { background: color-mix(in srgb, var(--lk-chrome) 55%, black); box-shadow: none; }
[data-design="instrument"]:not([data-surface="gradient"])[data-theme="light"] :is(.tm-panel__head, .tm-pro__top) :is(.tm-tabs--contained, .tm-seg) { background: color-mix(in srgb, var(--lk-chrome) 92%, #8C939D); }
[data-design="instrument"]:not([data-surface="gradient"]) .tm-panel__title::before { box-shadow: none; }


/* ---- css/look-lumen.css ---- */
/* Look: Lumen (23 October 2026). Switch with data-look="lumen" on the root, on top of data-design="instrument".
   A quiet terminal at night: near-black glass panels with a faint top sheen and a lit rim, one cool slate light in
   the corner of the canvas, soft layered shadows, and colour glows only where a number has something to say (the
   area under a chart and behind a price card take the day's direction). Mixed from seven references the user
   chose; the explore hub on :5062 shows each reference against this look.
   Colour roles keep their meaning: blue for action and selection, green and red for direction, amber for market
   state. It bends one agreed rule on purpose: cards carry a sheen and a lit rim (Instrument surfaces are solid).
   Everything is nested under one selector so it outranks the Instrument rules it replaces. */

:root[data-look="lumen"][data-design] {
  /* ---------- Palette (dark) ---------- */
  --tm-color-bg: #0B0D11;
  --tm-color-panel: #12151A;
  --tm-color-raised: #1A1E25;
  --tm-color-divider: #1F242B;
  --tm-color-divider-strong: #2B313A;
  --tm-color-text: #E9EBEE;
  --tm-color-text-secondary: #8F96A1;   /* 5.9:1 on panels, 6.4:1 on the canvas */
  --tm-color-skeleton: #1F242B;
  --tm-color-hover: rgb(255 255 255 / 0.045);
  --tm-color-pressed: rgb(255 255 255 / 0.08);
  --lk-canvas: #08090C; --lk-chrome: #0D1014; --lk-content: #12151A; --lk-thead: #0F1216;
  --lk-well: #0A0C0F;
  --lk-glass: rgb(22 25 31 / 0.74);
  --lk-edge: rgb(255 255 255 / 0.07);
  --lk-key-top: #272B33; --lk-key-bottom: #1D2128;
  --lk-field-border: rgb(255 255 255 / 0.09);

  --lm-ambient: #8E9CCB;                 /* desaturated slate light, never the action blue */
  --lm-edge: rgb(255 255 255 / 0.065);
  --lm-edge-strong: rgb(255 255 255 / 0.11);
  --lm-hi: rgb(255 255 255 / 0.055);     /* top light on a surface */
  --lm-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.032), rgb(255 255 255 / 0) 58%);
  --lm-card: var(--lm-sheen), var(--tm-color-panel);
  /* Lit rim (references 6 and 7): the edge catches light at the top and fades down the sides. */
  --lm-fill: linear-gradient(var(--tm-color-panel), var(--tm-color-panel));
  --lm-rim: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05) 34%, rgb(255 255 255 / 0.04) 80%, rgb(255 255 255 / 0.07));
  --lm-knock: #0B0D11;
  --lm-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 22px 44px -30px rgb(0 0 0 / 0.95);
  --lm-float: 0 2px 6px rgb(0 0 0 / 0.32), 0 30px 64px -26px rgb(0 0 0 / 0.9);
  --lm-key: linear-gradient(180deg, #2A2E36, #1F232A);
  --lm-well-in: inset 0 1px 2px rgb(0 0 0 / 0.5);
  --lm-glow-up: color-mix(in srgb, var(--tm-color-up) 26%, transparent);
  --lm-glow-down: color-mix(in srgb, var(--tm-color-down) 22%, transparent);
  --lm-dot: var(--tm-color-primary-text);
  --lm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --tm-radius-md: 22px;

  /* ---------- Palette (light): white glass on a cool grey canvas ---------- */
  &[data-theme="light"] {
    --tm-color-bg: #EEF0F4;
    --tm-color-panel: #FFFFFF;
    --tm-color-raised: #FFFFFF;
    --tm-color-divider: #E4E7EC;
    --tm-color-divider-strong: #D4D9E0;
    --tm-color-text: #12151A;
    --tm-color-text-secondary: #5B6270;  /* 6.2:1 on white, 5.3:1 on the canvas */
    --tm-color-skeleton: #E4E7EC;
    --tm-color-hover: rgb(16 24 40 / 0.04);
    --tm-color-pressed: rgb(16 24 40 / 0.07);
    --lk-canvas: #E9ECF1; --lk-chrome: #F3F4F7; --lk-content: #FFFFFF; --lk-thead: #F7F8FA;
    --lk-well: #F1F3F6;
    --lk-glass: rgb(255 255 255 / 0.8);
    --lk-edge: rgb(16 24 40 / 0.08);
    --lk-key-top: #FFFFFF; --lk-key-bottom: #F4F5F8;
    --lk-field-border: rgb(16 24 40 / 0.13);
    --lm-ambient: #8E9CCB;
    --lm-edge: rgb(16 24 40 / 0.07);
    --lm-edge-strong: rgb(16 24 40 / 0.12);
    --lm-hi: rgb(255 255 255 / 0.95);
    --lm-sheen: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0) 60%);
    --lm-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 18px 40px -28px rgb(16 24 40 / 0.35);
    --lm-float: 0 2px 6px rgb(16 24 40 / 0.08), 0 28px 60px -26px rgb(16 24 40 / 0.4);
    --lm-key: linear-gradient(180deg, #FFFFFF, #F4F6F9);
    --lm-well-in: inset 0 1px 2px rgb(16 24 40 / 0.08);
    --lm-glow-up: color-mix(in srgb, var(--tm-color-up) 13%, transparent);
    --lm-glow-down: color-mix(in srgb, var(--tm-color-down) 11%, transparent);
    --lm-noise: none;
    --lm-rim: linear-gradient(180deg, rgb(16 24 40 / 0.07), rgb(16 24 40 / 0.1) 60%, rgb(16 24 40 / 0.13));
    --lm-knock: #FFFFFF;
  }

  /* ---------- Page canvas: one cool light from the top left, nothing else ---------- */
  &, & body { background-color: var(--lk-canvas); }

  /* ---------- Cards and panels: glass with a top sheen, no borders that box them in ---------- */
  & :is(.tm-panel--framed, .lm-card) {
    border: 1px solid transparent; border-radius: 24px;
    background: var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box;
    box-shadow: var(--lm-shadow);
  }

  /* ---------- Buttons ---------- */
  & .tm-btn { letter-spacing: -0.006em; }
  /* Bright fills stay (agreed 22 Oct), flatter: an even colour, a hairline of light on top and a soft glow below
     in the button's own colour (reference 3's Upgrade button). */
  & :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--_k) 92%, white), var(--_k));
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 1px rgb(0 0 0 / 0.25), 0 10px 26px -12px color-mix(in srgb, var(--_k) 75%, transparent);
    text-shadow: none;
  }
  & :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell):is(:hover, .is-hover) {
    filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), 0 1px 1px rgb(0 0 0 / 0.25), 0 14px 32px -12px color-mix(in srgb, var(--_k) 85%, transparent);
  }
  & :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell):is(:active, .is-pressed) { transform: translateY(1px); filter: brightness(0.97); box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2); }
  & .tm-btn:is(:disabled, [aria-disabled="true"]) {
    background: var(--lk-well); border-color: var(--lm-edge); box-shadow: var(--lm-well-in); color: var(--tm-color-text-secondary); filter: none; transform: none;
  }
  /* Secondary: a dark glass chip with a hairline edge (reference 3's Help and Share buttons). */
  & .tm-btn--secondary {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.035));
    border: 1px solid var(--lm-edge-strong);
    box-shadow: inset 0 1px 0 var(--lm-hi), 0 1px 2px rgb(0 0 0 / 0.25);
  }
  & .tm-btn--secondary:is(:hover, .is-hover) { background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.05)); }
  & .tm-btn--ghost:is(:hover, .is-hover) { background: var(--tm-color-hover); }
  &[data-theme="light"] .tm-btn--secondary { background: linear-gradient(180deg, #FFFFFF, #F5F6F9); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(16 24 40 / 0.08); }
  &[data-theme="light"] .tm-btn--secondary:is(:hover, .is-hover) { background: #FFFFFF; border-color: var(--tm-color-divider-strong); }
  & .tm-icon-btn:hover { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--lm-edge); }
  &[data-theme="light"] .tm-icon-btn:hover { background: rgb(16 24 40 / 0.05); }

  /* ---------- Segmented controls and contained tabs: a pill well holding a lit key (references 1 and 4) ---------- */
  & :is(.tm-seg, .tm-tabs--contained) {
    background: var(--lk-well); border: 1px solid var(--lm-edge);
    box-shadow: var(--lm-well-in), 0 1px 0 var(--lm-hi);
  }
  & :is(.tm-seg button, .tm-tabs button) { color: var(--tm-color-text-secondary); }
  & :is(.tm-seg button, .tm-tabs button):hover { color: var(--tm-color-text); }
  & :is(.tm-seg button[aria-pressed="true"], .tm-tabs button[aria-selected="true"]) { color: var(--tm-color-text); }
  & .tm-seg--side button[aria-pressed="true"] { color: var(--lk-on-trade); }
  & .tm-seg button[aria-pressed="true"],
  & .tm-tabs--contained button[aria-selected="true"],
  & .has-bubble > .lk-bubble {
    background: var(--lm-key);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge), 0 2px 6px -1px rgb(0 0 0 / 0.5);
  }
  &[data-theme="light"] :is(.tm-seg button[aria-pressed="true"], .tm-tabs--contained button[aria-selected="true"], .has-bubble > .lk-bubble) {
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--lm-edge), 0 2px 6px -2px rgb(16 24 40 / 0.18);
  }
  & .tm-seg--side.has-bubble > .lk-bubble[data-side] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--_k) 92%, white), var(--_k));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 8px 20px -10px color-mix(in srgb, var(--_k) 80%, transparent);
  }
  & .tm-seg--side button[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--_k) 92%, white), var(--_k)); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--_k) 80%, transparent); }

  /* Underline tabs become the v.1 pill well (reference 1, the main tab style): a dark well, the selected tab a lit
     key. The selected tab is styled directly (the bubble script keeps a 28px marker on underline tabs). */
  & .tm-tabs--underline {
    display: inline-flex; max-width: 100%; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none;
    border: 1px solid var(--lm-edge); border-radius: 999px; background: var(--lk-well); box-shadow: var(--lm-well-in), 0 1px 0 var(--lm-hi);
  }
  & .tm-tabs--underline > .lk-bubble { display: none; }
  /* Long labels in the pill well: the well keeps its edge; a fade inside it shows the side with more tabs. */
  & .tm-tabs[data-more]:is(.tm-tabs--underline, .tm-tabs--contained) { -webkit-mask-image: none; mask-image: none; }
  & .tm-tabs[data-more]:is(.tm-tabs--underline, .tm-tabs--contained)::before,
  & .tm-tabs[data-more]:is(.tm-tabs--underline, .tm-tabs--contained)::after {
    content: ""; position: sticky; z-index: 2; flex: none; align-self: stretch; width: 44px; pointer-events: none; opacity: 0;
    transition: opacity var(--tm-motion-fast, 150ms) ease;
  }
  & .tm-tabs[data-more]:is(.tm-tabs--underline, .tm-tabs--contained)::before { order: -1; left: -4px; margin: -4px -44px -4px -4px; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, var(--lk-well) 30%, transparent); }
  & .tm-tabs[data-more]:is(.tm-tabs--underline, .tm-tabs--contained)::after { order: 99; right: -4px; margin: -4px -4px -4px -44px; border-radius: 0 999px 999px 0; background: linear-gradient(270deg, var(--lk-well) 30%, transparent); }
  & .tm-tabs:is([data-more="start"], [data-more="both"]):is(.tm-tabs--underline, .tm-tabs--contained)::before,
  & .tm-tabs:is([data-more="end"], [data-more="both"]):is(.tm-tabs--underline, .tm-tabs--contained)::after { opacity: 1; }
  & .tm-tabs--underline > button { margin: 0; padding: 7px 14px; border: 0 !important; border-radius: 999px; white-space: nowrap; }
  & .tm-tabs--underline > button::after { display: none !important; }
  & .tm-tabs--underline > button[aria-selected="true"] {
    color: var(--tm-color-text); background: var(--lm-key);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge), 0 2px 6px -1px rgb(0 0 0 / 0.5);
  }
  &[data-theme="light"] .tm-tabs--underline > button[aria-selected="true"] { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--lm-edge), 0 2px 6px -2px rgb(16 24 40 / 0.18); }

  /* Folder tabs, the Lumen underline (reference 1, v.2; a design system variant since 24 Oct 2026):
     class="tm-tabs tm-tabs--underline tm-tabs--folder". Other looks show plain underline tabs. Used for the stock page
     tabs under the chart. Built from the same parts as the pills: the row is a recessed well with rounded top corners,
     the selected tab a raised, lit key that opens into the section below. Its foot fades into --tm-tabs-join, the
     colour of what sits under the row (the page canvas by default; set it to the panel colour inside a card). */
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline {
    --_join: var(--tm-tabs-join, var(--lk-canvas));
    display: flex; align-items: flex-end; gap: 2px; padding: 5px 5px 0; border: 1px solid var(--lm-edge); border-bottom-color: var(--tm-color-divider-strong);
    border-radius: 18px 18px 0 0; background: linear-gradient(180deg, var(--lk-well), color-mix(in srgb, var(--lk-well) 60%, var(--_join)));
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45), 0 1px 0 var(--lm-hi); overflow-y: hidden;
  }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button { padding: 10px 16px 11px; border-radius: 13px 13px 0 0; }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button:hover:not([aria-selected="true"]) { background: rgb(255 255 255 / 0.04); color: var(--tm-color-text); }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"] {
    position: relative; z-index: 1; margin-bottom: -1px; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text);
    background: linear-gradient(180deg, #2C3038 0%, #22262D 45%, var(--_join) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 1px 0 0 rgb(255 255 255 / 0.06), inset -1px 0 0 rgb(255 255 255 / 0.06), 0 -4px 12px -4px rgb(0 0 0 / 0.65);
  }
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline { box-shadow: inset 0 2px 3px rgb(16 24 40 / 0.08), 0 1px 0 #fff; }
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 50%, var(--_join) 100%);
    box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgb(16 24 40 / 0.08), inset -1px 0 0 rgb(16 24 40 / 0.08), 0 -3px 10px -4px rgb(16 24 40 / 0.18);
  }
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button:hover:not([aria-selected="true"]) { background: rgb(16 24 40 / 0.04); }
  /* Revised 24 Oct 2026 at the user's request: the selected tab keeps its raised folder look, but the row loses its
     outer border, well and side padding; only the bottom line stays under it. */
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline, &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline {
    padding: 5px 0 0; border: 0; border-bottom: 1px solid var(--tm-color-divider-strong); border-radius: 0; background: none; box-shadow: none;
  }
  /* The raised key slides between tabs (the liquid bubble), so switching feels like every other switch. */
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button { position: relative; z-index: 1; }
  /* The row keeps its own positioning (the stock tabs stick under the top bar); hover only brightens the label, so it
     never looks like a second key. */
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button:hover:not([aria-selected="true"]),
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button:hover:not([aria-selected="true"]) { background: none; color: var(--tm-color-text); }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"],
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"] { background: none !important; box-shadow: none !important; }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline.has-bubble > .lk-bubble {
    display: block; position: absolute; z-index: 0; margin: 0; border-radius: 13px 13px 0 0; pointer-events: none;
    top: 5px !important; bottom: 0 !important; height: auto !important; opacity: 1;
    background: var(--lm-gloss-line), var(--lm-gloss-light), linear-gradient(180deg, #2C3038 0%, #22262D 45%, var(--_join) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 1px 0 0 rgb(255 255 255 / 0.06), inset -1px 0 0 rgb(255 255 255 / 0.06), 0 -4px 12px -4px rgb(0 0 0 / 0.65);
  }
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline.has-bubble > .lk-bubble {
    background: var(--lm-gloss-line), linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 50%, var(--_join) 100%);
    box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgb(16 24 40 / 0.08), inset -1px 0 0 rgb(16 24 40 / 0.08), 0 -3px 10px -4px rgb(16 24 40 / 0.18);
  }

  /* ---------- Inputs and dropdowns: deep wells, a hairline edge, the agreed blue focus glow ---------- */
  & :is(.tm-input, .tm-select select, .tm-dropdown__trigger) {
    background: var(--lk-well); border-color: var(--lk-field-border);
    box-shadow: var(--lm-well-in), 0 1px 0 var(--lm-hi);
  }
  & :is(.tm-input:focus-within, .tm-input.is-focus, .tm-select select:focus-visible, .tm-dropdown__trigger:focus-visible, .tm-dropdown__trigger[aria-expanded="true"]) {
    border-color: var(--tm-input-border-focus);
    box-shadow: var(--lm-well-in), 0 0 0 3px var(--tm-color-primary-tint-strong), 0 0 22px -6px var(--tm-color-primary-text);
  }
  & .tm-stepper__btn { background: var(--lm-key); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px var(--lm-edge); }
  & .tm-switch[aria-checked="true"] { background: var(--tm-color-primary); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2), 0 0 16px -4px var(--tm-color-primary); }

  /* ---------- Chips, badges, change pills (reference 7's tinted pills, with ▲ ▼ kept) ---------- */
  & .tm-class { background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--lm-edge); }
  &[data-theme="light"] .tm-class { background: rgb(16 24 40 / 0.05); }
  & .tm-change--pill {
    padding: 2px 8px; border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  }
  & .tm-change--pill.tm-change--up { background: color-mix(in srgb, var(--tm-color-up) 13%, transparent); }
  & .tm-change--pill.tm-change--down { background: color-mix(in srgb, var(--tm-color-down) 13%, transparent); }
  & .tm-status { border-radius: 999px; }
  & .tm-filter { border-radius: 999px; }
  /* Selected filter chip (picked 24 Oct 2026, option C of the samples): a blue ring, a faint blue fill and bright text.
     The fill keeps it distinct from the blue focus ring. */
  & .tm-filter[aria-pressed="true"] {
    border-color: transparent; color: var(--tm-color-text);
    background: color-mix(in srgb, var(--tm-color-primary-text) 12%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--tm-color-primary-text);
  }
  & .tm-count { background: var(--tm-color-down); box-shadow: 0 0 0 2px var(--lk-canvas), 0 0 10px -2px var(--tm-color-down); }
  & .tm-count--neutral { background: var(--tm-color-divider-strong); box-shadow: 0 0 0 2px var(--lk-canvas); }
  & .tm-avatar { box-shadow: 0 0 0 1px var(--lm-edge-strong), 0 0 0 3px var(--lk-canvas); }

  /* ---------- Market state: the sonar dot stays; the chip is dark glass ---------- */
  & .tm-mkt { background: rgb(255 255 255 / 0.04); border-color: var(--lm-edge); box-shadow: inset 0 1px 0 var(--lm-hi); }
  &[data-theme="light"] .tm-mkt { background: #FFFFFF; }

  /* ---------- Prices: a calm large number, decimals and currency a step back (reference 6) ---------- */
  & .tm-price--display { font-weight: var(--tm-font-weight-regular); letter-spacing: -0.035em; background: none; -webkit-text-fill-color: currentColor; color: var(--tm-color-text); }
  & .tm-price--display .tm-price__cur { -webkit-text-fill-color: var(--tm-color-text-secondary); font-weight: var(--tm-font-weight-regular); letter-spacing: 0; }
  & :is(.tm-price--display, .tm-price--title) .tm-price__dec { -webkit-text-fill-color: var(--tm-color-text-secondary); }

  /* ---------- Line charts: a gradient under the line and a soft glow behind the plot, in the day's direction ---------- */
  & .tm-lchart .area { fill: url(#lm-area-up); }
  & .tm-lchart--down .area { fill: url(#lm-area-down); }
  & .tm-lchart .line { stroke-width: 2.25; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 65%, transparent)); }
  & .tm-lchart--up .line { color: var(--tm-chart-line-up, var(--tm-color-up)); }
  & .tm-lchart--down .line { color: var(--tm-chart-line-down, var(--tm-color-down)); }
  & .tm-lchart__plot { position: relative; border-radius: 16px; }
  /* No glow behind the plot (24 Oct 2026): it read as a random blur. The fill under the line carries the colour. */
  & .tm-lchart__plot::before { content: none; }
  & .tm-lchart__plot > svg { position: relative; z-index: 1; }
  /* Dotted vertical guides (reference 4), faint, behind the line. */
  & .tm-lchart__plot::after {
    content: ""; position: absolute; inset: 10px 0 22px; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(255 255 255 / 0.09) calc(12.5% - 1px) 12.5%);
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 6px); mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 6px);
  }
  &[data-theme="light"] .tm-lchart__plot::after { background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(16 24 40 / 0.1) calc(12.5% - 1px) 12.5%); }
  & .tm-lchart .grid { stroke: var(--tm-color-divider); }
  & .tm-lchart .dot.end { stroke: currentColor; stroke-width: 2.25; fill: var(--lk-canvas); r: 6px; filter: drop-shadow(0 0 8px currentColor); }
  & .tm-lchart--up .dot.end { color: var(--tm-color-up); }
  & .tm-lchart--down .dot.end { color: var(--tm-color-down); }
  /* Sparklines: the area tint only, no glow (they sit in rows). */
  & .tm-spark--up .tm-spark__area { fill: url(#lm-spark-up); }
  & .tm-spark--down .tm-spark__area { fill: url(#lm-spark-down); }
  & .tm-spark__line { stroke-width: 1.6; }

  /* ---------- Tables: Quantix's market overview (reference 7): quiet header, hairline rows, a lit hover ---------- */
  /* One table style for Lumen (24 Oct 2026, from Home): column heads are a quiet band that runs the full width, with
     the table divider under it, smaller than any card title. */
  & .tm-table thead th {
    background: color-mix(in srgb, var(--tm-color-panel) 94%, var(--tm-color-text)); color: var(--tm-color-text-secondary);
    font-weight: var(--tm-font-weight-medium); font-size: 12.5px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--tm-color-divider);
  }
  & [data-density="comfortable"] .tm-table thead th, &[data-density="comfortable"] .tm-table thead th { height: 36px; padding-top: 0; padding-bottom: 0; }
  & .tm-table td { border-bottom-color: color-mix(in srgb, var(--tm-color-divider) 70%, transparent); }
  & .tm-table tbody tr:hover td { background: linear-gradient(90deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.015)); }
  &[data-theme="light"] .tm-table tbody tr:hover td { background: rgb(16 24 40 / 0.03); }
  & .tm-table tbody tr.is-selected td { background: var(--tm-color-primary-tint); }

  /* ---------- Order book: neutral prices, faint rounded depth, the best rows lit at the spread ---------- */
  & .tm-book__half--bid .tm-book__bar { background: linear-gradient(270deg, color-mix(in srgb, var(--tm-color-up) 22%, transparent), color-mix(in srgb, var(--tm-color-up) 2%, transparent)); border-radius: 6px 0 0 6px; }
  & .tm-book__half--ask .tm-book__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-down) 22%, transparent), color-mix(in srgb, var(--tm-color-down) 2%, transparent)); border-radius: 0 6px 6px 0; }
  & .tm-book__spread { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.04), transparent); }

  /* ---------- Order ticket: the summary is a soft inset card (the receipt perforation goes) ---------- */
  & .tm-ticket__summary { background: var(--lk-well); border: 1px solid var(--lm-edge); box-shadow: var(--lm-well-in); border-radius: 18px; }
  /* Even spacing (24 Oct 2026): the same padding all round, equal rows, label and value centred on each row. */
  & .tm-ticket__summary { padding: 4px 16px; }
  & .tm-ticket__summary .tm-kv { align-items: center; }
  & .tm-ticket__summary .tm-kv > :is(dt, dd) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  & .tm-ticket__summary .tm-kv > dd { justify-content: flex-end; }
  & .tm-ticket__summary::before { display: none; }
  & .tm-ticket__summary .tm-kv > :is(dt, dd) { border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--tm-color-divider) 70%, transparent); }
  & .tm-kv--total > :is(dt, dd):last-of-type { border-top: 1px solid var(--tm-color-divider-strong); }
  & .tm-slide { background: var(--lk-well); border-color: var(--lm-edge); box-shadow: var(--lm-well-in); }
  & .tm-slide__thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--_side) 92%, white), var(--_side)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 8px 20px -8px color-mix(in srgb, var(--_side) 80%, transparent); }

  /* ---------- Floating surfaces: deeper glass, a lit top edge, long soft shadows ---------- */
  & :is(.tm-menu, .tm-popover, .tm-tooltip, .tm-dialog, .tm-sheet, .tm-listbox, .tm-search__results:not(.is-static)) {
    /* Near solid (24 Oct 2026): a menu inside the blurred top bar cannot blur what is behind it, so the glass let the
       page show through. The fill is now the raised colour with only a trace of transparency. */
    background: color-mix(in srgb, var(--tm-color-raised) 97%, transparent); border: 1px solid var(--lm-edge-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float);
  }
  /* Menu hover: a soft light that fades from the left, nothing else (no box, no edge). */
  & :is(.tm-menu [role="menuitem"], .tm-listbox [role="option"], .xp-acct__list button, .xp-acct__foot button):is(:hover, :focus-visible, .is-active) {
    background: linear-gradient(90deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.035) 55%, rgb(255 255 255 / 0.01)); box-shadow: none; outline: none;
  }
  & :is(.tm-menu [role="menuitem"], .xp-acct__list button, .xp-acct__foot button):focus-visible { box-shadow: inset 0 0 0 1.5px var(--tm-color-focus); }
  &[data-theme="light"] :is(.tm-menu [role="menuitem"], .tm-listbox [role="option"], .xp-acct__list button, .xp-acct__foot button):is(:hover, :focus-visible, .is-active) {
    background: linear-gradient(90deg, rgb(16 24 40 / 0.07), rgb(16 24 40 / 0.03) 55%, rgb(16 24 40 / 0.005));
  }

  /* ---------- Toasts: simplified (reference 5). Icon in a soft badge, title, one line, one action. ----------
     No coloured edge: the icon carries the status. Success keeps the blue check (decision 2): green means price. */
  & .tm-toast {
    position: relative; overflow: hidden; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 24px;
    background: var(--lm-noise), linear-gradient(90deg, var(--_tint, transparent), transparent 68%), linear-gradient(105deg, transparent 0 46px, rgb(255 255 255 / 0.03) 46px 86px, transparent 86px), var(--lk-glass);
    border-color: color-mix(in srgb, var(--_edge, var(--tm-color-text)) 14%, transparent);
    border-width: 1px; border-style: solid;
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float);
    --_tone: var(--tm-color-text-secondary);
  }
  &[data-theme="light"] .tm-toast { background: linear-gradient(90deg, var(--_tint, transparent), transparent 68%), linear-gradient(105deg, transparent 0 46px, rgb(16 24 40 / 0.025) 46px 86px, transparent 86px), var(--lk-glass); }
  /* A soft wash of the status colour from the left, the same language as the banners. Neutral toasts stay clear. */
  & :is(.tm-toast--success, .tm-toast--warning, .tm-toast--error) { --_tint: color-mix(in srgb, var(--_tone) 15%, transparent); --_edge: var(--_tone); }
  &[data-theme="light"] :is(.tm-toast--success, .tm-toast--warning, .tm-toast--error) { --_tint: color-mix(in srgb, var(--_tone) 10%, transparent); }
  & .tm-toast--success { --_tone: var(--tm-color-primary-text); }
  & .tm-toast--warning { --_tone: var(--tm-color-warning); }
  & .tm-toast--error { --_tone: var(--tm-color-down); }
  & .tm-toast > .tm-icon:first-child {
    width: 24px; height: 24px; flex: none; color: var(--_tone);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--_tone) 55%, transparent));
  }
  & .tm-toast > .tm-icon:first-child:is([data-icon="warning"], [data-icon="error"], [data-icon="info"]) > :first-child { fill: currentColor; stroke: currentColor; }
  & .tm-toast > .tm-icon:first-child:is([data-icon="warning"], [data-icon="error"], [data-icon="info"]) > :not(:first-child) { stroke: var(--lm-knock); stroke-width: 2.4; }
  & .tm-toast:not(:is(.tm-toast--success, .tm-toast--warning, .tm-toast--error)) > .tm-icon:first-child { color: var(--tm-color-text-secondary); filter: none; }
  /* Success: a scalloped seal with the check knocked out. */
  & .tm-toast > .tm-icon:first-child[data-icon="check"] {
    box-sizing: border-box; padding: 5px; border-radius: 0; background: var(--_tone); color: var(--lm-knock); stroke-width: 3;
    clip-path: polygon(50.0% 0.0%, 61.4% 7.5%, 75.0% 6.7%, 81.1% 18.9%, 93.3% 25.0%, 92.5% 38.6%, 100.0% 50.0%, 92.5% 61.4%, 93.3% 75.0%, 81.1% 81.1%, 75.0% 93.3%, 61.4% 92.5%, 50.0% 100.0%, 38.6% 92.5%, 25.0% 93.3%, 18.9% 81.1%, 6.7% 75.0%, 7.5% 61.4%, 0.0% 50.0%, 7.5% 38.6%, 6.7% 25.0%, 18.9% 18.9%, 25.0% 6.7%, 38.6% 7.5%);
  }
  & .tm-toast:has(> .tm-icon[data-icon="check"]) { --_seal-glow: 1; }
  & .tm-toast__text { display: grid; gap: 2px; color: var(--tm-color-text-secondary); font-size: 13.5px; line-height: 1.4; }
  & .tm-toast__text b { display: block; color: var(--tm-color-text); font-size: 15px; font-weight: var(--tm-font-weight-semibold); letter-spacing: -0.01em; }
  & .tm-toast .lm-toast__act { flex: none; align-self: center; }

  /* ---------- Banners: the toast's language, tinted from the left in the status colour ---------- */
  & .tm-banner {
    border-radius: 20px; border: 1px solid color-mix(in srgb, var(--_tone) 22%, transparent);
    box-shadow: inset 0 1px 0 var(--lm-hi);
  }
  & .tm-banner--info { background: linear-gradient(90deg, color-mix(in srgb, var(--_tone) 12%, var(--tm-color-panel)), var(--tm-color-panel) 70%); }
  & .tm-banner--warning { background: linear-gradient(90deg, color-mix(in srgb, var(--_tone) 13%, var(--tm-color-panel)), var(--tm-color-panel) 70%); }
  & .tm-banner--error { background: linear-gradient(90deg, color-mix(in srgb, var(--_tone) 12%, var(--tm-color-panel)), var(--tm-color-panel) 70%); }
  & .tm-banner--halt { background: linear-gradient(90deg, color-mix(in srgb, var(--_tone) 13%, var(--tm-color-panel)), var(--tm-color-panel) 70%); }
  & .tm-banner--page { border-radius: 0; border-inline: 0; }

  /* ---------- Empty state: one soft ring, no stacked rings ---------- */
  & .tm-empty > .tm-icon { background: var(--lm-key); box-shadow: inset 0 1px 0 var(--lm-hi), 0 0 0 1px var(--lm-edge), 0 0 0 8px color-mix(in srgb, var(--tm-color-divider) 40%, transparent); }

  /* ---------- Timeline: hollow dots and a dashed line (reference 2) ---------- */
  & .tm-timeline li.is-current .tm-timeline__dot { box-shadow: 0 0 0 4px var(--tm-color-primary-tint), 0 0 14px -2px var(--tm-color-primary-text); }

  /* ---------- Market strip: a ticker line (reference 7), items split by short hairlines ---------- */
  & .tm-pulse { background: transparent; border-bottom: 1px solid var(--tm-color-divider); }
  & .tm-pulse__item { border-right: 0; position: relative; }
  & .tm-pulse__item + .tm-pulse__item::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--tm-color-divider-strong); }
  & .tm-mstrip--simple .tm-pulse__item + .tm-pulse__item { padding-left: 20px; }

  /* ---------- Rows in lists: a lit glass row on hover; the selected row is a pill with an edge mark (reference 7) ---------- */
  & :is(.tm-sec, .tm-hold, .tm-mrow) { transition: background-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast); }
  & :is(.tm-sec, .tm-hold, .tm-mrow):hover { background: linear-gradient(90deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015)); box-shadow: none; }
  &[data-theme="light"] :is(.tm-sec, .tm-hold, .tm-mrow):hover { background: rgb(16 24 40 / 0.035); }
  & .tm-mrow[aria-selected="true"] {
    background: linear-gradient(90deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03) 60%, rgb(255 255 255 / 0.02));
    box-shadow: inset 0 0 0 1px var(--lm-edge), inset -3px 0 0 -1px var(--tm-color-primary-text);
  }
  &[data-theme="light"] .tm-mrow[aria-selected="true"] { background: linear-gradient(90deg, var(--tm-color-primary-tint), rgb(16 24 40 / 0.02)); }

  /* ---------- Pro workspace: one continuous surface split by hairlines (agreed 23 Oct 2026: no separate boxes
     in Pro, it is a dense desk). The canvas keeps its ambient light; panels share one solid content colour. ---------- */
  & .tm-pro { background: radial-gradient(42% 52% at 6% -8%, color-mix(in srgb, var(--lm-ambient) 18%, transparent), transparent 72%), var(--lk-canvas); }
  & .tm-pro__top, & .tm-pro__status { background: transparent; border-color: var(--tm-color-divider); }
  & .tm-pro .tm-pulse { background: transparent; }
  & .tm-pro__grid { border-top: 1px solid var(--tm-color-divider); border-bottom: 1px solid var(--tm-color-divider); }
  & .tm-pro__grid > .tm-panel, & .tm-pro__dock > .tm-panel { background: var(--lk-content); }
  & .tm-pro__split { background: var(--tm-color-divider); }
  & .tm-panel__head { background: transparent; border-bottom-color: var(--tm-color-divider); }
  & .tm-panel__title::before { width: 5px; height: 5px; border-radius: 50%; background: var(--tm-color-text-secondary); box-shadow: none; }
  & .tm-panel__head .tm-tabs--contained { border-radius: 999px; }
  & .tm-panel__head .tm-tabs--contained button { border-radius: 999px; }

  /* ---------- Desktop Simple: a floating pill navigation (reference 1, v.1) over the ambient canvas ---------- */
  & .tm-dsk { background: radial-gradient(42% 52% at 6% -6%, color-mix(in srgb, var(--lm-ambient) 22%, transparent), transparent 72%), radial-gradient(60% 40% at 40% -12%, color-mix(in srgb, var(--lm-ambient) 8%, transparent), transparent 70%), var(--lk-canvas); }
  & .tm-dsk__nav { background: color-mix(in srgb, var(--lk-canvas) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: transparent; box-shadow: 0 1px 0 var(--tm-color-divider); }
  & .tm-dsk__links {
    padding: 4px; gap: 2px; border-radius: 999px; background: var(--lk-well); border: 1px solid var(--lm-edge);
    box-shadow: var(--lm-well-in), 0 1px 0 var(--lm-hi), 0 10px 24px -16px rgb(0 0 0 / 0.8);
  }
  & .tm-dsk__links a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; }
  /* The selected item is a lit key, no dot (24 Oct 2026). When the shell provides a sliding pill (.tm-nav-pill, placed by
     script), the key is drawn on the pill, which slides to the new item; otherwise on the link itself. */
  & .tm-dsk__links a[aria-current="page"] { background: var(--lm-key); color: var(--tm-color-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge), 0 4px 10px -4px rgb(0 0 0 / 0.6); }
  & .tm-dsk__links a[aria-current="page"]::before, & .tm-dsk__links a[aria-current="page"]::after { display: none; }
  &[data-theme="light"] .tm-dsk__links a[aria-current="page"] { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--lm-edge), 0 3px 8px -4px rgb(16 24 40 / 0.25); }
  & .tm-nav-pill { display: block; background: var(--lm-key); border-radius: 999px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge), 0 4px 10px -4px rgb(0 0 0 / 0.6); }
  &[data-theme="light"] .tm-nav-pill { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--lm-edge), 0 3px 8px -4px rgb(16 24 40 / 0.25); }
  & :is(.tm-dsk__links, .tm-tabbar):has(> .tm-nav-pill.is-placed) > [aria-current="page"] { background: transparent; box-shadow: none; }
  & .tm-dsk .tm-pulse { background: transparent; }

  /* ---------- Phone: the day's mood at the top, a floating glass tab bar (reference 2) ---------- */
  & .tm-phone { background: radial-gradient(130% 40% at 50% -8%, color-mix(in srgb, var(--_mood, var(--lm-ambient)) 14%, transparent), transparent 70%), var(--lk-canvas); }
  & .tm-tabbar {
    border-radius: 26px; border: 1px solid var(--lm-edge-strong); padding: 4px;
    background: var(--lk-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float);
  }
  & .tm-tabbar button { border-radius: 20px; color: var(--tm-color-text-secondary); }
  & .tm-tabbar button[aria-current="page"] { color: var(--tm-color-text); background: rgb(255 255 255 / 0.06); }
  &[data-theme="light"] .tm-tabbar button[aria-current="page"] { background: rgb(16 24 40 / 0.05); }
  & .tm-tabbar button[aria-current="page"] .tm-icon { filter: none; }
  & .tm-tabbar button[aria-current="page"]::after { display: none; }
  & .tm-tabbar > .tm-nav-pill { background: rgb(255 255 255 / 0.07); border-radius: 20px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
  &[data-theme="light"] .tm-tabbar > .tm-nav-pill { background: rgb(16 24 40 / 0.06); box-shadow: none; }

  /* ---------- Sign-in stage: keeps its agreed blue glow; the card takes Lumen glass ---------- */
  & .tm-auth__card { box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float); }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    & .tm-lchart .line { filter: none; }
  }
}

/* Inside the pattern lab: its own bar and frames match the canvas. */
:root[data-look="lumen"][data-design] {
  & .lab-bar { background: transparent; border-bottom-color: var(--tm-color-divider); }
  & .lab-stage, & #lab-canvas { background: transparent; }
  & .lab-embed body, &.lab-embed { background: var(--lk-canvas); }
  & .lab-acct__menu { min-width: 260px; padding: 6px; border-radius: 22px; }
  & .lab-acct__who { margin: -6px -6px 6px; padding: 14px 16px; border-bottom: 1px solid var(--tm-color-divider); }
  & .lab-acct__menu [role="menuitem"] { border-radius: 14px; }
  & .tm-dsk__block, & .tm-stab { border-radius: 20px; }
  /* A chart has only its bottom axis line: no border or rounded corner above it (24 Oct 2026). */
  & .tm-dsk__block:has(.tm-lchart) { border-top: 0; border-radius: 0; padding-top: var(--tm-space-8); }
  & .lab-phone-fig .tm-phone { box-shadow: 0 0 0 1px var(--lm-edge-strong), var(--lm-float); }
}

/* ================= Gloss (24 Oct 2026): the polish from the Quantix and Exchange references =================
   Lit edges that peak at one point, a glossy selected key (light from the right, a bright top line, faint specks, a
   glowing tick), glassy highlights on filled buttons, dust in the ambient light, and a bright hairline under the top
   bar. Colour roles and text contrast are unchanged. */
:root[data-look="lumen"][data-design] {
  --lm-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='84' cy='40' r='0.9' fill='white' opacity='0.35'/%3E%3Ccircle cx='20' cy='139' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='151' cy='16' r='0.6' fill='white' opacity='0.35'/%3E%3Ccircle cx='24' cy='113' r='0.9' fill='white' opacity='0.35'/%3E%3Ccircle cx='63' cy='25' r='0.9' fill='white' opacity='0.35'/%3E%3Ccircle cx='146' cy='33' r='0.6' fill='white' opacity='0.35'/%3E%3Ccircle cx='149' cy='151' r='0.9' fill='white' opacity='0.35'/%3E%3Ccircle cx='58' cy='13' r='0.6' fill='white' opacity='0.7'/%3E%3Ccircle cx='109' cy='38' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='145' cy='48' r='0.5' fill='white' opacity='0.5'/%3E%3Ccircle cx='97' cy='26' r='0.5' fill='white' opacity='0.35'/%3E%3Ccircle cx='54' cy='129' r='0.9' fill='white' opacity='0.7'/%3E%3Ccircle cx='121' cy='151' r='0.9' fill='white' opacity='0.7'/%3E%3Ccircle cx='78' cy='65' r='0.6' fill='white' opacity='0.5'/%3E%3Ccircle cx='22' cy='149' r='0.7' fill='white' opacity='0.9'/%3E%3Ccircle cx='89' cy='116' r='0.7' fill='white' opacity='0.35'/%3E%3C/svg%3E");
  /* Edges catch the light at the top right (references: Quantix cards, the Exchange card). */
  --lm-rim: radial-gradient(50% 80% at 76% 0%, rgb(255 255 255 / 0.3), transparent 70%), linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.045) 34%, rgb(255 255 255 / 0.035) 80%, rgb(255 255 255 / 0.07));
  /* The glossy selected key. */
  --lm-gloss-line: linear-gradient(90deg, transparent 8%, rgb(255 255 255 / 0.12) 40%, rgb(255 255 255 / 0.42) 78%, transparent 96%) top / 100% 1px no-repeat;
  --lm-gloss-light: radial-gradient(60% 150% at 90% 0%, rgb(255 255 255 / 0.09), transparent 62%);
  --lm-gloss: var(--lm-gloss-line), var(--lm-gloss-light), var(--lm-key);

  &[data-theme="light"] {
    --lm-rim: radial-gradient(42% 70% at 78% 0%, rgb(255 255 255 / 1), transparent 70%), linear-gradient(180deg, rgb(16 24 40 / 0.07), rgb(16 24 40 / 0.1) 60%, rgb(16 24 40 / 0.13));
    --lm-gloss-line: linear-gradient(90deg, transparent 8%, rgb(255 255 255 / 0.6) 45%, #fff 78%, transparent 97%) top / 100% 1px no-repeat;
    --lm-gloss-light: radial-gradient(55% 140% at 88% 0%, rgb(255 255 255 / 0.9), transparent 62%);
    --lm-gloss: var(--lm-gloss-line), var(--lm-gloss-light), var(--lm-key);
  }

  /* Selected keys: navigation pill, segmented and tab selections, folder tab, rails. */
  & :is(.tm-nav-pill, .has-bubble > .lk-bubble, .tm-seg button[aria-pressed="true"], .tm-tabs--contained button[aria-selected="true"], .tm-tabs--underline > button[aria-selected="true"]):not([data-side]) { background: var(--lm-gloss); }
  & .tm-tabbar > .tm-nav-pill { background: var(--lm-gloss-line), var(--lm-gloss-light), rgb(255 255 255 / 0.06); }
  & .tm-seg--side.has-bubble > .lk-bubble[data-side] { background: var(--lm-gloss-line), linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, color-mix(in srgb, var(--_k) 92%, white), var(--_k)); }
  & :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"] { background: var(--lm-gloss-line), var(--lm-gloss-light), linear-gradient(180deg, #2C3038 0%, #22262D 45%, var(--_join) 100%); }
  &[data-theme="light"] :is(.tm-tabs--folder, .tm-stab__tabs).tm-tabs--underline > button[aria-selected="true"] { background: var(--lm-gloss-line), linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 50%, var(--_join) 100%); }

  /* Filled buttons: a glassy upper highlight and a soft light rising from the bottom (reference: Buy ETH). */
  & :is(.tm-btn--primary, .tm-btn--buy, .tm-btn--sell):not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(90deg, transparent 12%, rgb(255 255 255 / 0.32) 50%, transparent 88%) top / 100% 1px no-repeat,
      radial-gradient(60% 90% at 50% 120%, rgb(255 255 255 / 0.12), transparent 70%),
      linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 52%),
      linear-gradient(180deg, color-mix(in srgb, var(--_k) 92%, white), var(--_k));
  }
  /* Secondary buttons and icon buttons: dark glass with a lit top edge. */
  & .tm-btn--secondary { background: var(--lm-gloss-line), linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03)); }
  &[data-theme="light"] .tm-btn--secondary { background: var(--lm-gloss-line), linear-gradient(180deg, #FFFFFF, #F5F6F9); }

  /* Dust in the ambient light (reference: Quantix), behind every shell and the explore pages. */
  & :is(.tm-dsk, .tm-pro, .xh, .hub) { isolation: isolate; }
  & :is(.xh, .hub) { position: relative; }
  & :is(.tm-dsk, .tm-pro, .xh, .hub)::before {
    content: ""; position: absolute; inset: 0 auto auto 0; width: min(70%, 900px); height: 520px; z-index: -1; pointer-events: none;
    background: var(--lm-spark) 0 0 / 160px 160px;
    -webkit-mask: radial-gradient(70% 80% at 12% 0%, #000, transparent 75%); mask: radial-gradient(70% 80% at 12% 0%, #000, transparent 75%);
    opacity: 0.22;
  }
  &[data-theme="light"] :is(.tm-dsk, .tm-pro, .xh, .hub)::before { display: none; }

  /* A bright hairline under the top bar, strongest in the middle (reference: the Quantix frame edge). */
  & :is(.tm-dsk__nav, .tm-pro__top, .hub-head, .xh-top) { border-bottom-color: transparent; box-shadow: none;
    background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.03) 15%, rgb(255 255 255 / 0.13) 50%, rgb(255 255 255 / 0.03) 85%, transparent); background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat; }
  &[data-theme="light"] :is(.tm-dsk__nav, .tm-pro__top, .hub-head, .xh-top) { background-image: linear-gradient(90deg, transparent, rgb(16 24 40 / 0.05) 15%, rgb(16 24 40 / 0.12) 50%, rgb(16 24 40 / 0.05) 85%, transparent); }

  /* Side rails: the selected row gets the glossy key and a glowing tick (reference: Quantix Dashboard row). */
  & :is(.xh-rail__item, .hub-nav__item)[aria-current="page"] { background: var(--lm-gloss-line), var(--lm-gloss-light), linear-gradient(90deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.025)); box-shadow: inset 0 0 0 1px var(--lm-edge), 0 10px 24px -16px rgb(0 0 0 / 0.9); }
  & :is(.xh-rail__item, .hub-nav__item)[aria-current="page"]::after { background: #fff; box-shadow: 0 0 5px rgb(255 255 255 / 0.45); }
  & .mrow-gloss, & .tm-mrow[aria-selected="true"] { background: var(--lm-gloss-line), var(--lm-gloss-light), linear-gradient(90deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); }

  /* Icon tiles and monograms pick up the same lit edge. */
  & :is(.xp-mono, .sp-mono, .xp-tile, .sp-tile, .xp-date, .sp-date) { background: var(--lm-gloss-line), var(--lm-key); }
}

/* components/quick-read/quick-read.css */
/* Quick read: plain-language summary of the chart range. Neutral range bar; the move from the start of the range
   to now is the only colour, paired with the signed change pill. Compact variant is one line for Pro panels. */
.tm-qread { container: tm-qread / inline-size; display: grid; gap: var(--tm-space-12); padding: var(--tm-space-16); border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-sm, var(--tm-radius-sm)); background: var(--tm-color-panel); font-variant-numeric: tabular-nums; }
.tm-qread__top { display: flex; align-items: center; gap: var(--tm-space-12); min-width: 0; }
.tm-qread__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--lk-r-xs, var(--tm-radius-sm)); background: var(--tm-color-hover); color: var(--tm-color-text-secondary); }
.tm-qread__head { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tm-qread__kicker { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); color: var(--tm-color-text-secondary); }
.tm-qread__title { font-size: var(--tm-type-subtitle-size); line-height: var(--tm-type-subtitle-line); font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-qread__top > .tm-change { flex: none; min-width: 0; }
.tm-qread .tm-change--pill { white-space: nowrap; }

/* Range bar: low on the left, high on the right. Dashed tick = start of range; dot = now; tint = the move between them. */
.tm-qread__bar { position: relative; height: 8px; margin: 6px 7px; border-radius: 4px; background: var(--tm-color-hover); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.tm-qread__move { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.tm-qread__move--up { background: color-mix(in srgb, var(--tm-color-up) 45%, transparent); }
.tm-qread__move--down { background: color-mix(in srgb, var(--tm-color-down) 45%, transparent); }
.tm-qread__ref { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dotted var(--tm-color-text-secondary); transform: translateX(-1px); }
.tm-qread__now { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--tm-color-text); box-shadow: 0 0 0 3px var(--tm-color-panel); transform: translate(-50%, -50%); }

.tm-qread__scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-qread__scale > :last-child { text-align: right; }
.tm-qread__scale .tm-qread__where { text-align: center; color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); font-size: var(--tm-density-font-body); }
.tm-qread b { font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text); }
.tm-qread__legend { display: flex; flex-wrap: wrap; gap: var(--tm-space-4) var(--tm-space-16); padding-top: var(--tm-space-12); border-top: 1px solid var(--tm-color-divider); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-qread__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tm-qread__key-now { width: 10px; height: 10px; border-radius: 50%; background: var(--tm-color-text); }
.tm-qread__key-ref { width: 0; height: 12px; border-left: 2px dotted var(--tm-color-text-secondary); }
.tm-qread__note { margin: 0; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }

/* Narrow: the change pill drops under the title and the position phrase gets its own line. */
@container tm-qread (width < 420px) {
  .tm-qread__top { flex-wrap: wrap; row-gap: var(--tm-space-8); }
  .tm-qread__head { flex-basis: calc(100% - 48px); }
  .tm-qread__top > .tm-change { margin-left: 48px; }
  .tm-qread__scale { grid-template-columns: 1fr 1fr; }
  .tm-qread__scale .tm-qread__where { grid-column: 1 / -1; grid-row: 1; }
}

/* Compact: one line for the Pro chart panel. Labels shorten; the bar shrinks to a 64px mini bar. */
.tm-qread--line { display: flex; align-items: center; gap: var(--tm-space-8); padding: 0 var(--tm-density-pad-cell); min-height: 28px; border: 0; border-top: 1px solid var(--tm-color-divider); border-radius: 0; background: none; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; overflow: hidden; }
.tm-qread--line .tm-qread__kicker { padding: 1px 6px; border-radius: var(--lk-r-xs, var(--tm-radius-xs)); background: var(--tm-color-hover); color: var(--tm-color-text); font-size: inherit; line-height: inherit; }
.tm-qread--line .tm-qread__where { color: var(--tm-color-text); }
.tm-qread__mini { width: 64px; flex: none; }
.tm-qread__mini .tm-qread__bar { height: 4px; margin: 0 5px; }
.tm-qread__mini .tm-qread__now { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--tm-color-panel); }
.tm-qread__mini .tm-qread__ref { top: -3px; bottom: -3px; border-left-width: 1px; }
.tm-qread__sep { width: 1px; height: 12px; background: var(--tm-color-divider-strong); flex: none; }
.tm-qread--line .tm-qread__note { margin-left: auto; padding-left: var(--tm-space-8); }
.tm-qread--line > * { flex: none; }
@container tm-panel (width < 520px) { .tm-qread--line .tm-qread__note, .tm-qread--line .tm-qread__mini { display: none; } }
@media (prefers-reduced-motion: no-preference) { .tm-qread__now, .tm-qread__move, .tm-qread__ref { transition: left var(--tm-motion-duration-base, 200ms) var(--tm-motion-easing-standard, ease), width var(--tm-motion-duration-base, 200ms) var(--tm-motion-easing-standard, ease); } }

/* Smaller Simple versions. Compact: two lines in a card. Inline: one strip under the range tabs, no card. */
.tm-qread--compact, .tm-qread--inline { padding: 10px var(--tm-space-16); }
.tm-qread__in { display: grid; gap: 8px; min-width: 0; }
.tm-qread--inline { padding: 8px 0 0; border: 0; border-radius: 0; background: none; }
.tm-qread--compact .tm-qread__top, .tm-qread--inline .tm-qread__top { justify-content: space-between; gap: var(--tm-space-12); flex-wrap: wrap; }
.tm-qread--compact .tm-qread__title, .tm-qread--inline .tm-qread__title { font-size: var(--tm-density-font-body); line-height: var(--tm-density-line-body); }
.tm-qread--compact .tm-change, .tm-qread--inline .tm-change { font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.tm-qread__range { display: flex; align-items: center; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; }
.tm-qread__range .tm-qread__bar { flex: 1 1 120px; min-width: 80px; height: 6px; margin: 0 6px; }
.tm-qread__range .tm-qread__now { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--tm-color-panel); }
.tm-qread__range .tm-qread__ref { top: -4px; bottom: -4px; }
.tm-qread__range .tm-qread__lo, .tm-qread__range .tm-qread__hi { color: var(--tm-color-text); font-variant-numeric: tabular-nums; }
.tm-qread__range .tm-qread__where { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); font-size: inherit; }
.tm-qread__range .tm-qread__note { margin: 0; cursor: help; }
.tm-qread--inline .tm-qread__now { box-shadow: 0 0 0 2px var(--tm-color-bg); }
/* Inline on one line when there is room: sentence and change, then the range on the same row. */
@container tm-qread (width >= 760px) {
  .tm-qread--inline .tm-qread__in { display: flex; align-items: center; gap: var(--tm-space-16); }
  .tm-qread--inline .tm-qread__top { flex: none; flex-wrap: nowrap; gap: var(--tm-space-8); }
  .tm-qread--inline .tm-qread__range { flex: 1; min-width: 0; }
}
@container tm-qread (width < 420px) {
  .tm-qread__range { flex-wrap: wrap; row-gap: 4px; }
  .tm-qread__range .tm-qread__bar { flex-basis: calc(100% - 120px); }
  .tm-qread__range .tm-qread__where { flex: 1 0 auto; }
}
.tm-qread--compact .tm-qread__top > .tm-change, .tm-qread--inline .tm-qread__top > .tm-change { margin-left: 0; }

/* components/stock-header/stock-header.css */
/* Stock header. Reacts to its own width: phones stack identity, price and stats; from 640px the price sits
   to the right of the name, as on a quote board. Pro is one dense line that scrolls sideways if it must. */
.tm-shead { container: tm-shead / inline-size; font-variant-numeric: tabular-nums; }
.tm-shead__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id actions" "quote quote" "halt halt" "stats stats" "explain explain"; gap: var(--tm-space-12) var(--tm-space-16); }
.tm-shead__id { grid-area: id; min-width: 0; display: grid; gap: 4px; align-content: start; }
.tm-shead__quote { grid-area: quote; display: grid; gap: 6px; align-content: start; }
.tm-shead__actions { grid-area: actions; display: flex; align-items: center; gap: var(--tm-space-8); align-self: start; }
.tm-shead__halt { grid-area: halt; }
.tm-shead__stats { grid-area: stats; }
.tm-shead__explain { grid-area: explain; }

.tm-shead__switch-wrap { position: relative; justify-self: start; }
.tm-shead__switch { display: inline-flex; align-items: center; gap: 8px; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: var(--lk-r-control, var(--tm-radius-sm)); background: none; color: var(--tm-color-text); font: inherit; cursor: pointer; }
.tm-shead__switch:hover { background: var(--tm-color-hover); }
.tm-shead__switch:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.tm-shead__switch .tm-icon { color: var(--tm-color-text-secondary); }
.tm-shead__code { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); font-weight: var(--tm-font-weight-semibold); letter-spacing: -0.01em; }
.tm-shead__name { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-body); min-width: 0; }
.tm-shead__company { color: var(--tm-color-text-secondary); }
/* Narrow: name and sector on their own lines, so a wrapped line never starts with the dot. */
.tm-shead__name { flex-direction: column; }
.tm-shead__name > [aria-hidden] { display: none; }

.tm-shead__menu { position: absolute; z-index: var(--tm-z-dropdown, 30); top: calc(100% + 8px); left: -8px; width: max-content; min-width: 260px; max-width: min(360px, 90vw); padding: 6px; border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-md, var(--tm-radius-md)); background: var(--lk-glass, var(--tm-color-raised)); backdrop-filter: blur(16px); box-shadow: var(--lk-float, var(--tm-shadow-overlay)); }
.tm-shead__mgroup { padding: 8px 10px 4px; font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-shead__menu [role="menuitem"] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: calc(var(--lk-r-md, var(--tm-radius-md)) - 6px); background: none; color: var(--tm-color-text); font: inherit; font-size: var(--tm-density-font-small); text-align: left; cursor: pointer; }
.tm-shead__menu [role="menuitem"]:hover, .tm-shead__menu [role="menuitem"]:focus-visible { background: var(--tm-color-hover); outline: none; }
.tm-shead__mcode { font-weight: var(--tm-font-weight-semibold); }
.tm-shead__mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm-color-text-secondary); }
.tm-shead__msearch { grid-template-columns: auto 1fr !important; margin-top: 4px; border-top: 1px solid var(--tm-color-divider) !important; color: var(--tm-color-primary-text) !important; }

.tm-shead__move { display: flex; align-items: center; gap: var(--tm-space-8); flex-wrap: wrap; }
.tm-shead__today { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-shead__fresh { display: flex; align-items: center; gap: 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; }
.tm-shead__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-color-up); box-shadow: 0 0 0 3px var(--tm-color-up-tint); }
.tm-shead__dot.is-paused { background: var(--tm-color-warning); box-shadow: 0 0 0 3px var(--tm-color-warning-tint); }
.tm-shead__star[aria-pressed="true"] { color: var(--tm-color-warning); }
.tm-shead__star[aria-pressed="true"] svg { fill: currentColor; }

/* Stats strip: labels above values, sentence case. In Simple each label explains itself when tapped. */
.tm-shead__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(144px, 100%), 1fr)); gap: 0 var(--tm-space-16); margin: 0; padding-top: var(--tm-space-4); border-top: 1px solid var(--tm-color-divider); }
.tm-shead__stat { display: grid; gap: 2px; align-content: start; padding: var(--tm-space-8) 0; min-width: 0; }
.tm-shead__stat[hidden] { display: none; }
.tm-shead__stat dt { font-size: var(--tm-density-font-label); line-height: var(--tm-type-label-line); color: var(--tm-color-text-secondary); }
.tm-shead__stat dd { margin: 0; font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); font-weight: var(--tm-font-weight-medium); white-space: nowrap; }
.tm-shead__term { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; }
.tm-shead__term:hover, .tm-shead__term[aria-expanded="true"] { color: var(--tm-color-text); }
.tm-shead__term:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; border-radius: 2px; }
.tm-shead__stat--more { flex: 0 0 auto; align-content: center; justify-items: start; }
.tm-shead__stat--more .tm-btn { margin-left: -8px; }
.tm-shead__stat--more [aria-expanded="true"] svg { transform: rotate(180deg); }
.tm-shead__rbar { position: relative; display: block; height: 4px; margin-top: 6px; max-width: 120px; border-radius: 2px; background: var(--tm-color-hover); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.tm-shead__rbar i { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--tm-color-text); transform: translate(-50%, -50%); }
.tm-shead__explain { margin: calc(-1 * var(--tm-space-4)) 0 0; padding: var(--tm-space-8) var(--tm-space-12); border-radius: var(--lk-r-xs, var(--tm-radius-sm)); background: var(--tm-color-hover); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-shead__explain b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }

@container tm-shead (width >= 640px) {
  .tm-shead__name { flex-direction: row; }
  .tm-shead__name > [aria-hidden] { display: inline; }
  /* Wide: the stats fill the space beside the price as a short scrolling box, most important first. */
  .tm-shead:not(.tm-shead--pro) > .tm-shead__in { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--tm-space-32); grid-template-areas: "id actions" "quote stats" "halt halt" "explain explain"; align-items: start; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__actions { justify-self: end; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stats {
    grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 148px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--tm-space-12);
    padding: 2px var(--tm-space-12) 6px; border-top: 0; border-left: 1px solid var(--tm-color-divider);
    --fl: 0px; --fr: 96px; mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); scrollbar-width: none;
  }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stat { scroll-snap-align: start; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stats:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stats.is-end { --fr: 0px; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stats.is-scrolled { --fl: 24px; }
  .tm-shead:not(.tm-shead--pro) .tm-shead__stats::-webkit-scrollbar { display: none; }
}

/* Pro: two dense lines at the top of the chart panel: identity, price and actions; then every stat inline,
   scrolling sideways if the panel is narrow. */
.tm-shead--pro { padding: 6px var(--tm-density-pad-cell) 0; white-space: nowrap; border-bottom: 1px solid var(--tm-color-divider); }
.tm-shead--pro > .tm-shead__in { grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto; grid-template-areas: "id quote . actions" "halt halt halt halt" "stats stats stats stats"; gap: 4px var(--tm-space-16); }
.tm-shead--pro .tm-shead__id { display: flex; align-items: center; gap: var(--tm-space-8); min-width: 0; }
.tm-shead--pro .tm-shead__code { font-size: 15px; line-height: 20px; }
.tm-shead--pro .tm-shead__switch { gap: 6px; margin: -2px -6px; padding: 2px 6px; flex: none; }
.tm-shead--pro .tm-shead__name { flex-direction: row; flex-wrap: nowrap; font-size: var(--tm-density-font-small); overflow: hidden; min-width: 0; }
.tm-shead--pro .tm-shead__name > :not(.tm-shead__company) { display: none; }
.tm-shead--pro .tm-shead__company { overflow: hidden; text-overflow: ellipsis; }
.tm-shead--pro .tm-shead__quote { display: flex; align-items: baseline; gap: var(--tm-space-8); }
.tm-shead--pro .tm-shead__price .tm-price { font-size: 17px; font-weight: var(--tm-font-weight-semibold); }
.tm-shead--pro .tm-shead__fresh .tm-shead__dot { width: 6px; height: 6px; box-shadow: none; }
.tm-shead--pro .tm-shead__actions { gap: 2px; align-self: center; }
.tm-shead--pro .tm-shead__stats { display: flex; gap: var(--tm-space-16); padding: 5px 0 6px; border-top: 1px solid var(--tm-color-divider); overflow-x: auto; scrollbar-width: none; }
.tm-shead--pro .tm-shead__stats::-webkit-scrollbar { display: none; }
.tm-shead--pro .tm-shead__stat { display: flex; align-items: baseline; gap: 6px; padding: 0; flex: none; }
.tm-shead--pro .tm-shead__stat dt { font-size: var(--tm-density-font-small); line-height: 16px; }
.tm-shead--pro .tm-shead__stat dd { font-size: var(--tm-density-font-data); line-height: 16px; }
.tm-shead--pro .tm-shead__halt { padding: 4px 8px; }
@container tm-shead (width < 760px) { .tm-shead--pro .tm-shead__fresh { display: none; } }
.tm-shead--pro .tm-shead__company { min-width: 60px; }

/* Simple, 24 Oct 2026 (second pass): price, then one line with the change and freshness, then the key figures as one
   aligned row across the full width (6 columns wide, 3 medium, 2 on phones), labels on one line. No day range here:
   the Quick read under the chart shows today's low and high. */
.tm-shead:not(.tm-shead--pro) .tm-shead__move .tm-change { font-size: 17px; }
.tm-shead__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.tm-shead:not(.tm-shead--pro) .tm-shead__term { text-decoration: none; white-space: nowrap; }
.tm-shead:not(.tm-shead--pro) .tm-shead__term:hover { text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; }
.tm-shead:not(.tm-shead--pro) > .tm-shead__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id actions" "quote quote" "halt halt" "stats stats" "explain explain"; }
.tm-shead:not(.tm-shead--pro) .tm-shead__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto;
  gap: 0 24px; overflow: visible; mask-image: none; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--tm-color-divider);
}
.tm-shead:not(.tm-shead--pro) .tm-shead__stat dt, .tm-shead:not(.tm-shead--pro) .tm-shead__stat dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-shead:not(.tm-shead--pro) .tm-shead__stat dd { font-size: 15px; line-height: 22px; }
@container tm-shead (width >= 480px) { .tm-shead:not(.tm-shead--pro) .tm-shead__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container tm-shead (width >= 640px) { .tm-shead:not(.tm-shead--pro) > .tm-shead__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id actions" "quote quote" "halt halt" "stats stats" "explain explain"; } }
@container tm-shead (width >= 780px) { .tm-shead:not(.tm-shead--pro) .tm-shead__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Figures take their own width and spread across the row, so a long value (turnover) is never cut. */
@container tm-shead (width >= 780px) { .tm-shead:not(.tm-shead--pro) .tm-shead__stats { grid-template-columns: repeat(6, max-content); justify-content: space-between; } }
.tm-shead:not(.tm-shead--pro) .tm-shead__stat dt, .tm-shead:not(.tm-shead--pro) .tm-shead__stat dd { overflow: visible; text-overflow: clip; }

/* components/markets-rail/markets-rail.css */
/* 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; }

/* Sector filter (24 Oct 2026) */
.tm-mrail__sector { margin-top: var(--tm-space-8); }
.tm-mrail__sector select { width: 100%; }
.tm-mrail--compact .tm-mrail__sector { margin-top: 6px; }
.tm-mrail--compact .tm-mrail__sector select { min-height: 30px; font-size: 12.5px; }

/* components/book-insights/book-insights.css */
/* Order book with insights. Prices stay neutral everywhere; only the balance bar and the ladder's depth bars
   carry faint up and down tints, always with words and numbers beside them. */
.tm-binsight { container: tm-binsight / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tm-space-12); font-variant-numeric: tabular-nums; }
/* Narrow (phones): order counts give way so quantities and prices keep their room. */
@container tm-binsight (width < 420px) {
  .tm-binsight .tm-book__half, .tm-binsight .tm-book__half--ask { grid-template-columns: 1fr 1fr; }
  .tm-binsight .tm-book__half .n, .tm-binsight .tm-book__head .tm-book__half--bid > span:first-child, .tm-binsight .tm-book__head .tm-book__half--ask > span:last-child { display: none; }
  .tm-bsum__px { font-size: var(--tm-type-subtitle-size); line-height: var(--tm-type-subtitle-line); }
  .tm-bal__row { grid-template-columns: 1fr 1fr; }
  .tm-bal__say { grid-column: 1 / -1; grid-row: 1; }
}
.tm-binsight .tm-book__spread { display: none; }

.tm-bsum { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--tm-space-12); }
.tm-bsum > div { display: grid; gap: 2px; min-width: 0; }
.tm-bsum__side--ask { text-align: right; }
.tm-bsum__mid { text-align: center; padding: 0 var(--tm-space-8); }
.tm-bsum__k { font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-bsum__px { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-bsum__mid b { font-weight: var(--tm-font-weight-semibold); }
.tm-bsum__sub { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); white-space: nowrap; }

.tm-bal { display: grid; gap: 6px; }
.tm-bal__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-bal__row > :last-child { text-align: right; }
.tm-bal__row b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.tm-bal__say { text-align: center; color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.tm-bal__bar { position: relative; display: flex; height: 18px; border-radius: var(--lk-r-xs, 6px); overflow: hidden; box-shadow: inset 0 0 0 1px var(--tm-color-divider); font-size: 11px; line-height: 18px; color: var(--tm-color-text); }
.tm-bal__bar::after { content: ""; position: absolute; left: 50%; top: 3px; bottom: 3px; border-left: 1px dashed var(--tm-color-text-secondary); opacity: 0.6; }
.tm-bal__bar i { display: block; min-width: 0; font-style: normal; }
.tm-bal__b { background: var(--tm-color-up-tint); box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--tm-color-up) 14%, transparent); }
.tm-bal__a { flex: 1; background: var(--tm-color-down-tint); box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--tm-color-down) 14%, transparent); text-align: right; }
.tm-bal__bar span { padding: 0 8px; }
.tm-bal__note { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); text-align: center; }

.tm-bfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--tm-space-8); }
.tm-bfacts__cell { display: grid; gap: 2px; align-content: start; padding: var(--tm-space-12); border-radius: var(--lk-r-xs, var(--tm-radius-sm)); background: var(--tm-color-hover); min-width: 0; }
.tm-bfacts__k { font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
.tm-bfacts__v { font-size: var(--tm-density-font-body); font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-bfacts__sub { font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-bfacts__note { grid-column: 1 / -1; margin: 0; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }

.tm-bexplain { border-top: 1px solid var(--tm-color-divider); padding-top: var(--tm-space-8); font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.tm-bexplain summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--tm-color-primary-text); font-weight: var(--tm-font-weight-medium); list-style: none; }
.tm-bexplain summary::-webkit-details-marker { display: none; }
.tm-bexplain p { margin: var(--tm-space-8) 0 0; max-width: 60ch; }

/* Pro: tighter header, facts as one strip of four. */
.tm-binsight--pro { gap: 6px; }
.tm-bsum--pro { padding: 4px var(--tm-density-pad-cell); gap: var(--tm-space-8); }
.tm-bsum--pro .tm-bsum__px { font-size: 15px; line-height: 20px; }
.tm-bsum--pro .tm-bsum__k, .tm-bsum--pro .tm-bsum__sub { font-size: 11px; line-height: 14px; }
.tm-binsight--pro .tm-bal { padding: 0 var(--tm-density-pad-cell); gap: 4px; }
.tm-binsight--pro .tm-bal__bar { height: 14px; line-height: 14px; font-size: 10.5px; }
.tm-binsight--pro .tm-bal__row, .tm-binsight--pro .tm-bal__note { font-size: 11px; }
.tm-bfacts--pro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; border-top: 1px solid var(--tm-color-divider); }
.tm-bfacts--pro .tm-bfacts__cell { padding: 6px var(--tm-density-pad-cell); border-radius: 0; background: none; border-right: 1px solid var(--tm-color-divider); }
.tm-bfacts--pro .tm-bfacts__cell:nth-child(4) { border-right: 0; }
.tm-bfacts--pro .tm-bfacts__k, .tm-bfacts--pro .tm-bfacts__sub { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-bfacts--pro .tm-bfacts__v { font-size: var(--tm-density-font-data); font-weight: var(--tm-font-weight-medium); }
.tm-bfacts--pro .tm-bfacts__note { padding: 4px var(--tm-density-pad-cell); border-top: 1px solid var(--tm-color-divider); font-size: 11px; }
@container tm-panel (width < 360px) { .tm-bfacts--pro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-bfacts--pro .tm-bfacts__cell:nth-child(2) { border-right: 0; } .tm-bfacts--pro .tm-bfacts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--tm-color-divider); } }

/* components/volume-by-price/volume-by-price.css */
/* Volume by price. Bars are neutral grey: they show where trading happened, not direction. */
.tm-vbp { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(56px, auto); column-gap: var(--tm-space-12); font-size: var(--tm-density-font-data); line-height: var(--tm-density-line-data); font-variant-numeric: tabular-nums; }
.tm-vbp__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: calc(var(--tm-density-table-row-height) - 4px); padding: 0 2px; border-bottom: 1px solid var(--tm-color-divider); }
.tm-vbp--pro { grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(48px, auto) minmax(52px, auto); column-gap: var(--tm-space-8); }
.tm-vbp--pro .tm-vbp__row { padding: 0 var(--tm-density-pad-cell); }
.tm-vbp__row > :nth-child(n+3) { text-align: right; }
.tm-vbp__row--head { min-height: 28px; font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); border-bottom-color: var(--tm-color-divider-strong); }
.tm-vbp__px { display: flex; align-items: center; gap: 6px; font-weight: var(--tm-font-weight-medium); white-space: nowrap; }
.tm-vbp__tag { padding: 0 6px; border-radius: var(--lk-r-xs, var(--tm-radius-xs)); background: var(--tm-color-hover); box-shadow: inset 0 0 0 1px var(--tm-color-divider); font-size: 11px; line-height: 18px; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); }
.tm-vbp__vol { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tm-vbp__vol i { flex: none; height: 8px; min-width: 2px; border-radius: 4px; background: color-mix(in srgb, var(--tm-color-text-secondary) 55%, transparent); }
.tm-vbp__vol > span { white-space: nowrap; }
.tm-vbp__share { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); }
.tm-vbp--pro .tm-vbp__share { display: none; }

/* components/market-strip/market-strip.css */
/* Market strip. Pro uses the pulse strip as is; Simple adds air and slightly larger figures. Scrolls sideways when
   it doesn't fit, with a fade at the edge that says there is more. */
.tm-mstrip { scrollbar-width: none; }
.tm-mstrip::-webkit-scrollbar { display: none; }
.tm-mstrip .tm-pulse__item:last-child { border-right: 0; }
.tm-pulse__item--bar .tm-pulse__value { display: grid; gap: 3px; }
.tm-pulse__bar { display: block; width: 88px; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--tm-color-down) 70%, transparent); }
.tm-pulse__bar i { display: block; height: 100%; background: var(--tm-color-up); }
.tm-mstrip--simple { background: var(--tm-color-bg); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tm-mstrip--simple .tm-pulse__item { padding: 8px 20px 8px 0; margin-right: 20px; }
.tm-mstrip--simple .tm-pulse__item:first-child { padding-left: 0; }
.tm-mstrip--simple .tm-pulse__label { font-size: 12px; line-height: 16px; }
.tm-mstrip--simple .tm-pulse__value { font-size: 14px; line-height: 20px; }
.tm-mstrip--simple .tm-pulse__value .tm-change { font-size: 12.5px; }
.tm-mstrip--simple .tm-pulse__item[title] { cursor: help; }

/* components/stock-tabs/stock-tabs.css */
/* 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; }
/* 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; }

/* Alert channels (24 Oct 2026): a grouped card with icon chips, inset dividers and even rows. */
.tm-stab__channels { display: grid; gap: 8px; }
.tm-stab__chlist { display: grid; padding: 4px 14px; border-radius: 16px; background: color-mix(in srgb, var(--tm-color-text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-text) 6%, transparent); }
.tm-stab__ch { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; }
.tm-stab__ch + .tm-stab__ch::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: color-mix(in srgb, var(--tm-color-divider) 75%, transparent); }
.tm-stab__chi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--tm-color-text); background: color-mix(in srgb, var(--tm-color-text) 7%, transparent); }
.tm-stab__cht { display: grid; gap: 1px; min-width: 0; }
.tm-stab__cht b { font-size: 14.5px; font-weight: var(--tm-font-weight-medium); }
.tm-stab__cht span { font-size: 12.5px; color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-stab__on { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--tm-color-text-secondary); background: color-mix(in srgb, var(--tm-color-text) 6%, transparent); }
.tm-stab__on .tm-icon { color: var(--tm-color-up); }

/* components/simple-pages/simple-pages.css */
/* Simple pages (pattern lab): Home, Orders and Funds pieces. Plain in Instrument; Lumen adds glass and glow. */

/* ---------- Shared bits ---------- */
.sp-code { font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); letter-spacing: -0.005em; }
.sp-label { color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-own { color: var(--tm-color-text); }
.sp-mono { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font: var(--tm-font-weight-semibold) 12px/1 var(--tm-font-ui); letter-spacing: 0.02em;
  color: var(--tm-color-text); background: var(--tm-color-raised); box-shadow: inset 0 0 0 1px var(--tm-color-divider-strong); }
.sp-mono--sq { border-radius: 10px; width: 32px; height: 32px; }
.sp-tile { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tm-color-raised); color: var(--tm-color-text-secondary); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.sp-dotsep { display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--tm-color-text-secondary); vertical-align: middle; }
.sp-card { background: var(--tm-color-panel); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md, 12px); }
.sp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.sp-card-head h3, .sp-cc__title, .sp-mtab__title { margin: 0; font: var(--tm-font-weight-semibold) 16px/1.3 var(--tm-font-ui); color: var(--tm-color-text); letter-spacing: -0.01em; }
.tm-fresh--live::before { content: ""; }

/* ---------- Sparkline that stretches ---------- */
.sp-spark { position: relative; display: block; width: 100%; height: var(--h); }
.sp-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-spark .tm-spark__line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.sp-spark--up .tm-spark__line { stroke: var(--tm-chart-line-up, var(--tm-color-up)); }
.sp-spark--down .tm-spark__line { stroke: var(--tm-chart-line-down, var(--tm-color-down)); }
.sp-spark--flat .tm-spark__line { stroke: var(--tm-color-text-secondary); }
.sp-spark .tm-spark__base { stroke: var(--tm-color-divider-strong); stroke-dasharray: 2 3; }
.sp-spark--up .tm-spark__area { fill: url(#tm-spark-fill-up); }
.sp-spark--down .tm-spark__area { fill: url(#tm-spark-fill-down); }
.sp-spark--flat .tm-spark__area { fill: none; }
.sp-spark__dot { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--tm-color-panel); border: 2px solid var(--tm-color-text-secondary); box-sizing: border-box; }
.sp-spark--up .sp-spark__dot { border-color: var(--tm-color-up); }
.sp-spark--down .sp-spark__dot { border-color: var(--tm-color-down); }

/* ---------- Ticker strip ---------- */
.sp-ticker { display: flex; align-items: center; gap: 16px; min-width: 0; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--tm-color-divider); }
.sp-ticker__live { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12.5px; }
.sp-ticker__list { display: flex; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.sp-ticker__list::-webkit-scrollbar { display: none; }
.sp-tick { display: inline-flex; align-items: baseline; gap: 8px; flex: none; padding: 0 16px; font-size: 13px; white-space: nowrap; position: relative; }
.sp-tick + .sp-tick::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--tm-color-divider-strong); }
.sp-tick__k { color: var(--tm-color-text-secondary); font-weight: var(--tm-font-weight-medium); }
.sp-tick__v { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.sp-tick .tm-change { font-size: 12.5px; }

/* ---------- Price card ---------- */
.sp-pcard { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-width: 0; padding: 18px 18px 14px; overflow: hidden; position: relative; }
.sp-pcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-pcard__head .tm-icon-btn { margin-left: auto; }
.sp-pcard__id { display: grid; gap: 2px; min-width: 0; }
.sp-pcard__name { color: var(--tm-color-text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pcard__body { display: grid; justify-items: start; gap: 6px; }
.sp-pcard__body .tm-price--title { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.sp-pcard__chg { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pcard__spark { display: grid; gap: 4px; margin: 0 -18px; padding: 0 18px; }
.sp-pcard__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--tm-color-text-secondary); }

/* ---------- Chart card ---------- */
.sp-cc { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; padding: 18px 20px; }
.sp-cc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-cc__sub { margin: 4px 0 0; color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-cc__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 13.5px; }
.sp-cc__facts dt { color: var(--tm-color-text-secondary); }
.sp-cc__facts dd { margin: 0; color: var(--tm-color-text); }
.sp-cc__chart.tm-lchart { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-cc__chart .tm-tabs { order: -1; align-self: stretch; display: flex; }
.sp-cc__chart .tm-tabs button { flex: 1; }
.sp-cc__chart.sp-cc--one .tm-tabs { display: none; }
.sp-cc__chart .tm-lchart__readout { order: 3; }
.sp-cc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--tm-color-divider); }

/* ---------- Portfolio hero ---------- */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "facts facts"; gap: 20px 24px; padding: 8px 0 4px; }
.sp-hero__main { grid-area: main; display: grid; gap: 10px; min-width: 0; }
.sp-hero__label { display: inline-flex; align-items: center; gap: 10px; color: var(--tm-color-text-secondary); font-size: 14px; }
.sp-hero__num .tm-price--display { font-size: 56px; line-height: 1.05; }
.sp-hero__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.sp-hero__facts { grid-area: facts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.sp-hero__facts > div { display: grid; gap: 4px; padding: 12px 16px; border-left: 1px solid var(--tm-color-divider); }
.sp-hero__facts > div:first-child { padding-left: 0; border-left: 0; }
.sp-hero__facts dt { color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-hero__facts dd { margin: 0; font: var(--tm-font-weight-medium) 16px/1.3 var(--tm-font-ui); font-variant-numeric: tabular-nums; color: var(--tm-color-text); }
.sp-hero__actions { grid-area: actions; display: flex; align-items: flex-end; gap: 10px; }

/* ---------- Holdings and Coming up ---------- */
.sp-hold { display: flex; flex-direction: column; }
.sp-hold ul { flex: 1; }
.sp-hold__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 20px; padding: 14px 0 18px; border-top: 1px solid var(--tm-color-divider); }
.sp-hold__foot .sp-label { display: grid; gap: 4px; }
.sp-hold__foot b { font: var(--tm-font-weight-medium) 16px/1.3 var(--tm-font-ui); color: var(--tm-color-text); }
.sp-hold ul, .sp-up ul { margin: 0; padding: 0 8px 10px; list-style: none; }
.sp-hold__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-hold__row:hover { background: var(--tm-color-hover); }
.sp-hold__id { display: grid; gap: 2px; min-width: 0; }
.sp-hold__q { color: var(--tm-color-text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-hold__v { display: grid; justify-items: end; gap: 2px; font-size: 14px; white-space: nowrap; }
.sp-hold__v .tm-change { font-size: 12.5px; }
.sp-up li { display: flex; gap: 14px; padding: 10px 12px; }
.sp-up li > span:last-child { display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; }
.sp-date { display: grid; place-items: center; flex: none; width: 44px; height: 48px; border-radius: 12px; background: var(--tm-color-raised); box-shadow: inset 0 0 0 1px var(--tm-color-divider); font-size: 11.5px; color: var(--tm-color-text-secondary); line-height: 1.1; }
.sp-date b { font-size: 17px; color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }

/* ---------- Market overview table ---------- */
.sp-mtab { display: grid; min-width: 0; padding-bottom: 6px; }
.sp-mtab { container: sp-mtab / inline-size; }
.sp-mtab__title { padding: 18px 20px 0; }
.sp-mtab__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 20px 10px; }
@container sp-mtab (width < 760px) { .sp-col-md { display: none; } }
@container sp-mtab (width < 600px) { .sp-col-lg { display: none; } }
.sp-cc--index .tm-price__cur { display: none; }
.sp-mtab__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sp-mtab__search { width: 180px; transition: width var(--tm-motion-duration-fast); }
.sp-mtab__search:focus-within { width: 300px; }
.sp-mtab__wrap { overflow-x: auto; }
.sp-mtab .tm-table { width: 100%; }
.sp-mtab .tm-table th:first-child, .sp-mtab .tm-table td:first-child { padding-left: 20px; width: 28px; }
.sp-mtab .tm-table td:nth-child(2), .sp-mtab .tm-table th:nth-child(2) { text-align: left; }
.sp-mtab .tm-table tbody tr { height: 60px; }
.sp-mtab .tm-table td { height: 60px; }
.sp-mtab .tm-table td:last-child, .sp-mtab .tm-table th:last-child { padding-right: 20px; }
.sp-sec { display: inline-flex; align-items: center; gap: 12px; }
.sp-sec > span:last-child { display: grid; gap: 2px; }
.sp-sec__n { color: var(--tm-color-text-secondary); font-size: 12.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.sp-tspark { display: block; width: 96px; margin-left: auto; }
.sp-mtab__foot { margin: 8px 20px 10px; font-size: 12.5px; }

/* ---------- Inbox panel ---------- */
.sp-inbox { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 380px; max-width: 100%; max-height: 640px; border-radius: 28px; overflow: hidden;
  background: var(--tm-color-raised); border: 1px solid var(--tm-color-divider-strong); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6); }
.sp-inbox__scroll { overflow-y: auto; padding: 22px 22px 8px; scrollbar-width: thin; }
.sp-inbox__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-new { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-color-primary-text); font-weight: var(--tm-font-weight-medium); }
.sp-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sp-inbox h3 { margin: 0 0 6px; font: var(--tm-font-weight-semibold) 18px/1.3 var(--tm-font-ui); letter-spacing: -0.01em; color: var(--tm-color-text); }
.sp-inbox h4 { margin: 0 0 4px; font: var(--tm-font-weight-semibold) 15.5px/1.35 var(--tm-font-ui); color: var(--tm-color-text); }
.sp-inbox p { margin: 0; color: var(--tm-color-text-secondary); font-size: 14px; line-height: 1.5; }
.sp-inbox__media { margin: 16px 0 6px; padding: 16px; border-radius: 18px; background: var(--tm-color-bg); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.sp-inbox__order { display: grid; gap: 12px; font-size: 13px; }
.sp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--tm-color-text-secondary); }
.sp-steps li { display: grid; gap: 6px; line-height: 1.3; }
.sp-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--tm-color-divider-strong); }
.sp-steps li.is-done::before { background: var(--tm-color-text-secondary); }
.sp-steps li.is-now { color: var(--tm-color-warning); }
.sp-steps li.is-now::before { background: var(--tm-color-warning); box-shadow: 0 0 10px -1px var(--tm-color-warning); }
.sp-tl { margin: 18px 0 0; padding: 0; list-style: none; }
.sp-tl__item { position: relative; padding: 0 0 20px 30px; }
.sp-tl__item::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 2px; border-left: 1.5px dashed var(--tm-color-divider-strong); }
.sp-tl__item:last-child::before { display: none; }
.sp-tl__dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--tm-color-text); box-shadow: 0 0 0 3px var(--tm-color-raised); }
.sp-tl--up .sp-tl__dot { background: var(--tm-color-up); }
.sp-tl--down .sp-tl__dot { background: var(--tm-color-down); }
.sp-tl--warning .sp-tl__dot { background: var(--tm-color-warning); }
.sp-inbox__tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 10px 10px; border-top: 1px solid var(--tm-color-divider); }
.sp-inbox__tabs button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 16px; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 12.5px/1.2 var(--tm-font-ui); cursor: pointer; }
.sp-inbox__tabs button[aria-current="page"] { color: var(--tm-color-text); }
.sp-inbox__tabs button:hover { background: var(--tm-color-hover); }
.sp-badge { position: absolute; top: 0; left: calc(50% + 6px); padding: 1px 7px; border-radius: 999px; background: var(--tm-color-down); color: #fff; font-size: 11px; line-height: 16px; font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }

/* ---------- Account menu ---------- */
.sp-acct { display: grid; width: 360px; max-width: 100%; border-radius: 28px; overflow: hidden; background: var(--tm-color-raised); border: 1px solid var(--tm-color-divider-strong); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6); }
.sp-acct__who { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--tm-color-divider); }
.sp-acct__who > span:last-child { display: grid; gap: 2px; font-size: 13.5px; }
.sp-acct__who b { font-size: 17px; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.tm-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.sp-acct__well { display: flex; align-items: center; gap: 12px; margin: 14px 14px 6px; padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--tm-color-bg); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.sp-acct__well .sp-mono { color: var(--tm-color-text-secondary); }
.sp-acct__wl { margin: 0 6px 6px; color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-acct__cds { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.sp-acct__cds b { white-space: nowrap; font-size: 14px; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text); }
.sp-acct__row { display: flex; gap: 8px; margin-top: 6px; }
.sp-acct__pro { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; border: 0; border-radius: 999px; font: var(--tm-font-weight-medium) 13.5px/1.2 var(--tm-font-ui); cursor: pointer; white-space: nowrap; }
.sp-acct__row button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 13.5px/1.2 var(--tm-font-ui); cursor: pointer; white-space: nowrap; }
.sp-acct__row button:hover { color: var(--tm-color-text); background: var(--tm-color-hover); }
.sp-acct__pro { margin-left: auto; color: var(--tm-color-primary-text) !important; background: var(--tm-color-primary-tint) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 30%, transparent); }
.sp-acct__list { margin: 0; padding: 6px 10px; list-style: none; }
.sp-acct__list button, .sp-acct__foot button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 12px; border: 0; border-radius: 14px; background: none; color: var(--tm-color-text); font: var(--tm-font-weight-regular) 15px/1.3 var(--tm-font-ui); text-align: left; cursor: pointer; }
.sp-acct__list .tm-icon, .sp-acct__foot .tm-icon { color: var(--tm-color-text-secondary); }
.sp-acct__list button:is(:hover, :focus-visible), .sp-acct__foot button:is(:hover, :focus-visible) { background: var(--tm-color-hover); outline: none; }
.sp-acct__foot { padding: 6px 10px 10px; border-top: 1px solid var(--tm-color-divider); }

/* ---------- Tab bar styles (reference 1) ---------- */
.sp-pillnav { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.sp-pillnav { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tm-color-bg); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.sp-pillnav a, .sp-pillnav button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 14px/1.2 var(--tm-font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sp-pillnav [aria-current="page"] { color: var(--tm-color-text); background: var(--tm-color-raised); box-shadow: inset 0 0 0 1px var(--tm-color-divider-strong); }
.sp-pillnav [aria-current="page"] .tm-icon { color: var(--tm-color-primary-text); }
.sp-textnav { display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--tm-color-bg); box-shadow: inset 0 0 0 1px var(--tm-color-divider); }
.sp-textnav button { position: relative; padding: 10px 18px 14px; border: 0; border-radius: 999px; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 14px/1.2 var(--tm-font-ui); cursor: pointer; }
.sp-textnav button:hover { background: var(--tm-color-hover); color: var(--tm-color-text); }
.sp-textnav button[aria-current="page"] { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.sp-textnav button[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tm-color-primary-text); box-shadow: 0 0 8px 1px var(--tm-color-primary-text); }
.sp-folder { display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--tm-color-divider-strong); }
.sp-folder button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 14px 14px 0 0; background: none; color: var(--tm-color-text-secondary); font: var(--tm-font-weight-medium) 14px/1.2 var(--tm-font-ui); cursor: pointer; }
.sp-folder button:hover:not([aria-selected="true"]) { color: var(--tm-color-text); background: var(--tm-color-hover); }
.sp-folder button[aria-selected="true"] { position: relative; margin-bottom: -1px; color: var(--tm-color-text); background: var(--tm-color-panel); box-shadow: inset 1px 0 0 var(--tm-color-divider-strong), inset -1px 0 0 var(--tm-color-divider-strong), inset 0 1px 0 var(--tm-color-divider-strong); }
.sp-folder-body { padding: 16px; background: var(--tm-color-panel); border: 1px solid var(--tm-color-divider-strong); border-top: 0; border-radius: 0 0 16px 16px; color: var(--tm-color-text-secondary); font-size: 13.5px; }

/* ---------- Lumen additions for the new pieces ---------- */
:root[data-look="lumen"][data-design] {
  & .sp-mono { background: var(--lm-key); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge); }
  & .sp-tile { background: var(--lm-key); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge); }
  & .sp-date { background: var(--lm-key); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px var(--lm-edge); }
  & .sp-spark--up .tm-spark__area { fill: url(#lm-spark-up); }
  & .sp-spark--down .tm-spark__area { fill: url(#lm-spark-down); }
  & .sp-spark--up .tm-spark__line { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tm-color-up) 60%, transparent)); }
  & .sp-spark--down .tm-spark__line { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tm-color-down) 55%, transparent)); }
  & .sp-spark__dot { background: var(--lk-canvas); box-shadow: 0 0 8px currentColor; }
  & .sp-spark--up .sp-spark__dot { color: var(--tm-color-up); }
  & .sp-spark--down .sp-spark__dot { color: var(--tm-color-down); }
  & .sp-tspark .tm-spark__line, & .sp-hold__spark .tm-spark__line { filter: none; }
  /* Price cards: a soft glow in the day's direction rises from behind the sparkline (reference 7). */
  & .sp-pcard { border: 1px solid transparent; background: radial-gradient(80% 55% at 20% 112%, var(--_glow, transparent), transparent 70%) padding-box, var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; }
  /* The tick at the card's edge beside the price (reference 7), in the day's direction. */
  & .sp-pcard__body { position: relative; }
  & .sp-pcard__body::before { content: ""; position: absolute; left: -19px; top: 2px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--_tick, var(--tm-color-text-secondary)); box-shadow: 0 0 10px var(--_tick, transparent); }
  & .sp-pcard:has(.sp-spark--up) { --_tick: var(--tm-color-up); }
  & .sp-pcard:has(.sp-spark--down) { --_tick: var(--tm-color-down); }
  & .sp-pcard:has(.sp-spark--up) { --_glow: var(--lm-glow-up); }
  & .sp-pcard:has(.sp-spark--down) { --_glow: var(--lm-glow-down); }
  /* Chart cards: the plot glow spreads to the whole card corner (references 4 and 6). */
  & .sp-cc { border: 1px solid transparent; background: radial-gradient(85% 70% at 90% 104%, var(--_glow, transparent), transparent 72%) padding-box, var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; }
  /* Market overview header: a soft rounded band (reference 7). */
  & .sp-mtab__wrap { padding: 0 10px; }
  & .sp-mtab .tm-table { border-collapse: separate; border-spacing: 0; }
  & .sp-mtab .tm-table thead th { height: 40px; border-bottom: 0; background: rgb(255 255 255 / 0.035); }
  &[data-theme="light"] .sp-mtab .tm-table thead th { background: rgb(16 24 40 / 0.035); }
  & .sp-mtab .tm-table thead th:first-child { border-radius: 12px 0 0 12px; padding-left: 12px; }
  & .sp-mtab .tm-table thead th:last-child { border-radius: 0 12px 12px 0; padding-right: 12px; }
  & .sp-mtab .tm-table td:first-child { padding-left: 12px; }
  & .sp-mtab .tm-table td:last-child { padding-right: 12px; }
  & .sp-cc:has(.tm-lchart--up) { --_glow: var(--lm-glow-up); }
  & .sp-cc:has(.tm-lchart--down) { --_glow: var(--lm-glow-down); }
  & .sp-cc .tm-lchart__plot::before { display: none; }
  & .sp-cc__foot { border-top-color: var(--lm-edge); }
  & :is(.sp-inbox, .sp-acct) { border: 1px solid transparent; background: var(--lm-noise) padding-box, linear-gradient(var(--lk-glass), var(--lk-glass)) padding-box, var(--lm-rim) border-box; -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float); }
  & .sp-inbox__media, & .sp-acct__well { background: var(--lk-well); box-shadow: var(--lm-well-in), 0 0 0 1px var(--lm-edge); }
  & .sp-tl__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-color-raised) 80%, transparent), 0 0 10px -1px currentColor; }
  & .sp-acct__pro { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 35%, transparent), 0 6px 22px -8px var(--tm-color-primary-text); }
  & .sp-pillnav, & .sp-textnav { background: var(--lk-well); box-shadow: var(--lm-well-in), 0 0 0 1px var(--lm-edge), 0 12px 28px -18px rgb(0 0 0 / 0.9); }
  & .sp-pillnav [aria-current="page"] { background: var(--lm-key); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px var(--lm-edge), 0 4px 10px -4px rgb(0 0 0 / 0.6); }
  & .sp-pillnav [aria-current="page"] .tm-icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tm-color-primary-text) 80%, transparent)); }
  & .sp-folder button[aria-selected="true"] { background: linear-gradient(180deg, rgb(255 255 255 / 0.05), var(--tm-color-panel)); }
  &[data-theme="light"] :is(.sp-pillnav, .sp-textnav) { box-shadow: var(--lm-well-in), 0 0 0 1px var(--lm-edge); }
}

/* ---------- Stock tab row sample ---------- */
.sp-stab-demo { display: grid; min-width: 0; overflow: hidden; }
.sp-stab-demo__body { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: baseline; gap: 6px 10px; padding: 16px 4px 4px; font-size: 13.5px; }
.sp-stab-demo__body > :nth-child(3) { justify-self: center; }
.sp-stab-demo__body b { font: var(--tm-font-weight-semibold) 16px/1.2 var(--tm-font-ui); color: var(--tm-color-text); }

/* ---------- Page layout (Home, Orders, Funds). Desktop Simple caps content at 1200px; narrow widths stack. ---------- */
.sp-wrap { container: sp / inline-size; }
.sp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: var(--sp-max, 1200px); margin: 0 auto; padding: 20px 24px 56px; box-sizing: border-box; color: var(--tm-color-text); }
.sp-hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 14px; }
.sp-hello b { font: var(--tm-font-weight-semibold) 18px/1.3 var(--tm-font-ui); color: var(--tm-color-text); letter-spacing: -0.01em; }
.sp-head h1 { margin: 0; font: var(--tm-font-weight-semibold) 28px/1.2 var(--tm-font-ui); letter-spacing: -0.015em; }
.sp-head p { margin: 0; font-size: 14px; }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sp-head > div { display: grid; gap: 4px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
.sp-side { display: grid; grid-template-rows: auto 1fr; gap: 20px; min-width: 0; }
.sp-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sp-sec-head h2 { margin: 0; font: var(--tm-font-weight-semibold) 18px/1.3 var(--tm-font-ui); }
.sp-sec-head .tm-btn { margin-left: auto; }
.sp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-big { margin-top: 2px; font: var(--tm-font-weight-medium) 24px/1.2 var(--tm-font-ui); color: var(--tm-color-text); letter-spacing: -0.02em; }
.sp-ret { display: grid; justify-items: end; gap: 2px; font-size: 15px; }
.sp-ret .tm-secondary { font-size: 12.5px; }
.sp-table { min-width: 0; }
.sp-h2 { margin: 0 0 6px; font: var(--tm-font-weight-semibold) 17px/1.3 var(--tm-font-ui); }
.sp-h3 { margin: 18px 0 8px; font: var(--tm-font-weight-semibold) 14px/1.3 var(--tm-font-ui); color: var(--tm-color-text); }
.sp-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
.sp-box { padding: 20px; }
.sp-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sp-card-head .tm-btn { margin-left: auto; }
.sp-box > .tm-secondary, .sp-box > p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }

/* Orders */
.sp-bar { display: flex; align-items: center; gap: 16px; }
.sp-orders { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.sp-olist { display: grid; gap: 12px; min-width: 0; }
.sp-ocard { border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-md, 16px); background: var(--tm-color-panel); cursor: pointer; transition: border-color var(--tm-motion-duration-fast), box-shadow var(--tm-motion-duration-fast); }
.sp-ocard:hover { border-color: var(--tm-color-divider-strong); }
.sp-ocard.is-selected { border-color: color-mix(in srgb, var(--tm-color-primary-text) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 35%, transparent); }
.sp-ocard:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.sp-odetail { position: sticky; top: calc(var(--tm-dsk-top, 120px) + 16px); display: grid; align-content: start; min-width: 0; }
.sp-odetail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-odetail__head h2 { margin: 2px 0; font: var(--tm-font-weight-semibold) 22px/1.25 var(--tm-font-ui); letter-spacing: -0.01em; }
.sp-odetail__head p { margin: 0; font-size: 13.5px; }
.sp-odetail .side-buy, .sp-hist .side-buy { color: var(--tm-color-up); }
.sp-odetail .side-sell, .sp-hist .side-sell { color: var(--tm-color-down); }
.sp-note-link { margin-top: 12px; }
.sp-today .tm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-hist { padding: 6px 10px; overflow-x: auto; }
.sp-hist .tm-table { width: 100%; }
.sp-hist tbody tr { cursor: pointer; }

/* Funds */
.sp-frow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sp-frow > .sp-box { display: flex; flex-direction: column; }
.sp-fout .sp-actions, .sp-fadd .sp-actions { margin-top: auto; padding-top: 14px; }
.sp-fout .tm-field { margin-top: 4px; }
.sp-fadd .tm-cash__note { margin-top: 10px; }
.sp-fcash .tm-price--display { font-size: 36px; }
.sp-ref { font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.sp-stmt { padding: 20px 10px 10px; }
.sp-stmt .sp-card-head { padding: 0 10px; }
.sp-stmt__wrap { overflow-x: auto; }
.sp-stmt .tm-table { width: 100%; }
.sp-stmt td:nth-child(3), .sp-stmt th:nth-child(3), .sp-stmt td:nth-child(2), .sp-stmt th:nth-child(2) { text-align: left; }
.sp-in { color: var(--tm-color-up); }

@container sp (width < 1180px) { .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sp (width < 1000px) {
  .sp-row, .sp-orders { grid-template-columns: minmax(0, 1fr); }
  .sp-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .sp-odetail { position: static; }
  .sp-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .sp-hero__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* Phone width */
@container sp (width < 600px) {
  .sp-page { gap: 20px; padding: 16px 16px 110px; }
  .sp-head h1 { font-size: 24px; }
  .sp-head { align-items: flex-start; }
  .sp-hero { grid-template-columns: 1fr; grid-template-areas: "main" "facts" "actions"; gap: 16px; }
  .sp-hero__num .tm-price--display { font-size: 40px; }
  .sp-hero__line .sp-dotsep { display: none; }
  .sp-hero__facts > div { padding: 10px 12px; }
  .sp-hero__facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sp-hero__actions .tm-btn { flex: 1; }
  .sp-side, .sp-frow { grid-template-columns: minmax(0, 1fr); }
  .sp-table { display: none; }
  .sp-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .sp-cards > * { flex: 0 0 80%; scroll-snap-align: start; }
  .sp-cc { padding: 16px; }
  .sp-cc__facts { grid-template-columns: 1fr; gap: 0; }
  .sp-cc__facts dd { margin-bottom: 6px; }
  .sp-today .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-bar .sp-bar__count { display: none; }
}

/* Lumen: order cards and the detail share the card rim; the selected card glows softly in the selection blue. */
:root[data-look="lumen"][data-design] {
  & .sp-ocard { border: 1px solid transparent; background: var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; border-radius: 22px; }
  & .sp-ocard.is-selected { background: linear-gradient(90deg, color-mix(in srgb, var(--tm-color-primary-text) 9%, transparent), transparent 70%) padding-box, var(--lm-fill) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--tm-color-primary-text) 60%, transparent), color-mix(in srgb, var(--tm-color-primary-text) 25%, transparent)) border-box; box-shadow: 0 10px 30px -18px var(--tm-color-primary-text); }
  & .sp-hist { padding: 6px 10px; }
}

.sp-fadd .tm-kv dt { white-space: nowrap; }

.sp-up { display: flex; flex-direction: column; }
.sp-up__more { margin: auto 18px 0; padding: 12px 0 16px; border-top: 1px solid var(--tm-color-divider); }
.sp-up__more h4 { margin: 0 0 8px; font: var(--tm-font-weight-semibold) 13.5px/1.3 var(--tm-font-ui); color: var(--tm-color-text); }
.sp-up__more p { display: grid; gap: 2px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; }
.sp-up__more p:last-child { margin-bottom: 0; }
:root[data-look="lumen"][data-design] { & .sp-up__more { border-top-color: var(--lm-edge); } }

/* Desktop Simple pages: the top bar, the market strip and the page share one centred width and gutter, so every edge
   lines up with equal margins on both sides (24 Oct 2026). 1200px, or 1360px for Home on wide screens. */
.tm-dsk--page > * { --sp-max: 1200px; }
@container tm-dsk (width >= 1480px) { .tm-dsk--home > * { --sp-max: 1360px; } }
.tm-dsk--page .tm-dsk__nav, .tm-dsk--page .tm-dsk__strip { padding-inline: max(24px, calc((100% - var(--sp-max)) / 2 + 24px)); }

/* ---------- Home (24 Oct 2026): the portfolio first, your stocks in one list beside it (Robinhood's pattern) ---------- */
.sp-pf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 24px; align-items: start; }
.sp-pf__main { display: grid; gap: 20px; min-width: 0; }
.sp-pf__label { margin: 0 0 4px; color: var(--tm-color-text-secondary); font-size: 14px; }
.sp-pf__lchart .tm-lchart__readout .tm-price--display { font-size: 48px; line-height: 1.05; }
.sp-pf__lchart .tm-lchart__readout > div { margin-top: 6px; font-size: 14px; }
.sp-pf__lchart .tm-lchart__plot { margin-top: 14px; }
.sp-pf__lchart .tm-tabs { margin-top: 10px; }
.sp-pf__note { margin: 10px 0 0; font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp-pf__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--tm-color-divider); border-bottom: 1px solid var(--tm-color-divider); }
.sp-pf__facts > div { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-left: 1px solid var(--tm-color-divider); }
.sp-pf__facts > div:first-child { padding-left: 0; border-left: 0; }
.sp-pf__facts dt { color: var(--tm-color-text-secondary); font-size: 13px; }
.sp-pf__facts dd { display: grid; gap: 2px; margin: 0; font: var(--tm-font-weight-medium) 16px/1.3 var(--tm-font-ui); font-variant-numeric: tabular-nums; color: var(--tm-color-text); }
.sp-pf__facts dd .tm-secondary { font: var(--tm-font-weight-regular) 12.5px/1.35 var(--tm-font-ui); }
.sp-pf__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sp-news ul { margin: 0; padding: 0 18px 14px; list-style: none; display: grid; gap: 12px; }
.sp-news li { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; color: var(--tm-color-text); }
.sp-news__meta { font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp-news__meta b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.sp-pf__side { position: sticky; top: calc(var(--tm-dsk-top, 124px) + 16px); display: grid; padding-bottom: 8px; }
.sp-pf__side .sp-card-head { padding: 16px 18px 8px; margin: 0; }
.sp-card-head--sub { border-top: 1px solid var(--tm-color-divider); margin-top: 6px !important; }
.sp-srow { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: center; gap: 12px; width: 100%; padding: 9px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-srow:hover { background: var(--tm-color-hover); }
.sp-srow:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.sp-srow__id { display: grid; gap: 1px; min-width: 0; }
.sp-srow__id b { font-weight: var(--tm-font-weight-semibold); font-size: 14.5px; }
.sp-srow__id .tm-secondary { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-srow__q { display: grid; justify-items: end; gap: 3px; font-size: 14px; }
.sp-srow__q .tm-change { font-size: 12px; }
.sp-orders-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 18px 4px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--tm-color-hover); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-orders-link > span { display: grid; gap: 2px; font-size: 14px; }
.sp-orders-link .tm-secondary { font-size: 12.5px; }
@container sp (width < 1000px) {
  .sp-pf { grid-template-columns: minmax(0, 1fr); }
  .sp-pf__side { position: static; }
  .sp-pf__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-pf__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sp-pf__facts > div:nth-child(n+3) { border-top: 1px solid var(--tm-color-divider); }
}
@container sp (width < 600px) {
  .sp-pf__lchart .tm-lchart__readout .tm-price--display { font-size: 38px; }
  .sp-pf__more { grid-template-columns: minmax(0, 1fr); }
  .sp-pf__facts > div { padding: 12px 12px; }
}
:root[data-look="lumen"][data-design] {
  & :is(.sp-pf__facts, .sp-pf__facts > div, .sp-card-head--sub) { border-color: var(--lm-edge); }
  & .sp-orders-link { background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--lm-edge); }
  & .sp-srow:hover { background: linear-gradient(90deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015)); }
  /* The portfolio chart is the hero: its glow fills the space under the line (references 4 and 6). */
  & .sp-pf__lchart .tm-lchart__plot::before { background: radial-gradient(70% 100% at 70% 100%, var(--lm-glow-up), transparent 72%); }
  & .sp-pf__lchart.tm-lchart--down .tm-lchart__plot::before { background: radial-gradient(70% 100% at 70% 100%, var(--lm-glow-down), transparent 72%); }
}
.sp-pf__more .sp-up__more { display: none; }
/* Narrow widths: your stocks come straight after the value and figures, before Coming up and news. */
@container sp (width < 1000px) {
  .sp-pf__main { display: contents; }
  .sp-pf__value { order: 1; } .sp-pf__facts { order: 2; } .sp-pf__side { order: 3; } .sp-pf__more { order: 4; }
}

/* ================= Desktop Simple 2 (24 Oct 2026) ================= */
.tm-dsk--v2 { --tm-dsk-strip: 0px; }
.tm-dsk--v2 > * { --sp-max: 1240px; }
.sp2-nav { gap: 20px; }
.sp2-search { position: relative; flex: 1 1 260px !important; max-width: 360px; min-width: 180px; }
.sp2-search .tm-kbd { margin-right: 8px; }
.sp2-res { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: grid; gap: 3px; padding: 6px; border-radius: 18px; background: var(--tm-color-raised); border: 1px solid var(--tm-color-divider-strong); box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6); }
.sp2-res [role="option"] { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-size: 14px; }
.sp2-res [role="option"] .tm-secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sp2-res [role="option"]:hover, .sp2-res .is-active { background: var(--tm-color-hover); }
.sp2-res__none { padding: 10px; font-size: 13.5px; }
.sp2-bp { display: grid; justify-items: end; gap: 1px; padding: 4px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.sp2-bp span { font-size: 12px; color: var(--tm-color-text-secondary); }
.sp2-bp b { font: var(--tm-font-weight-semibold) 15px/1.2 var(--tm-font-ui); }
.sp2-bp:hover { background: var(--tm-color-hover); }
@container tm-dsk (width < 1180px) { .sp2-bp span { display: none; } .sp2-search { max-width: 260px; } }

.sp2-page { gap: 20px; }
.sp2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sp2-main, .sp2-side { display: grid; gap: 20px; min-width: 0; }
.sp2-side { position: sticky; top: calc(var(--tm-dsk-top, 64px) + 16px); }
.sp2-card { min-width: 0; }
.sp2-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.sp2-card__head h3 { margin: 0; font: var(--tm-font-weight-semibold) 16px/1.3 var(--tm-font-ui); letter-spacing: -0.01em; }
.sp2-card > .tm-kv, .sp2-card > p, .sp2-card > details { margin-inline: 18px; }
.sp2-card > .tm-kv { margin-bottom: 4px; }
.sp2-link { display: inline-flex; align-items: center; gap: 4px; margin: 6px 18px 14px; padding: 0; border: 0; background: none; color: var(--tm-color-primary-text); font: var(--tm-font-weight-medium) 13.5px/1.3 var(--tm-font-ui); cursor: pointer; }
.sp2-link:hover { text-decoration: underline; }
.sp2-note { margin: 8px 18px 14px; font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp2-sub { display: block; font-size: 12px; color: var(--tm-color-text-secondary); }
.sp2-big { margin: 0 0 4px; font: var(--tm-font-weight-regular) 30px/1.1 var(--tm-font-ui); letter-spacing: -0.02em; }
.sp2-card.sp2-sp20 > .tm-change { display: block; margin: 0 18px 16px; font-size: 14px; }
.sp2-card.sp2-sp20 > .sp2-big { margin-inline: 18px; }

/* Home 2 */
.sp2-value__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.sp2-value .tm-price--display { font-size: 48px; line-height: 1.05; }
.sp2-value__ret { display: flex; gap: 28px; margin: 0; }
.sp2-value__ret > div { display: grid; gap: 3px; max-width: 280px; }
.sp2-value__ret dt { font-size: 13px; color: var(--tm-color-text-secondary); }
.sp2-value__ret dd { margin: 0; font: var(--tm-font-weight-medium) 20px/1.25 var(--tm-font-ui); }
.sp2-value__ret dd.tm-secondary { font: var(--tm-font-weight-regular) 12px/1.4 var(--tm-font-ui); }
.sp2-chart { margin-top: 12px; }
.sp2-res[hidden] { display: none; }
.sp2-chart .tm-lchart__readout .tm-price { display: none; }
.sp2-chart .tm-lchart__readout > div { font-size: 14px; }
.sp2-tablewrap { overflow-x: auto; padding: 0 8px 8px; }
.sp2-table { width: 100%; }
.sp2-table th:first-child, .sp2-table td:first-child { text-align: left; padding-left: 10px; }
.sp2-table tbody td { height: 58px; vertical-align: middle; }
.sp2-table tbody tr { cursor: pointer; }
.sp2-table tbody tr:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.sp2-stock { display: grid; gap: 1px; }
.sp2-stock b { font-weight: var(--tm-font-weight-semibold); }
.sp2-stock .tm-secondary { font-size: 12.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp2-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sp2-pair .sp-up__more { display: none; }
/* Needs your attention: plain rows like the other cards (24 Oct 2026). The status shows in the icon only. */
.sp2-attn__list { margin: 0; padding: 0 18px 4px; list-style: none; display: grid; }
.sp2-attn__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0 14px; }
.sp2-attn__list li + li { border-top: 1px solid var(--tm-color-divider); }
.sp2-attn__list li > .tm-icon { margin-top: 1px; }
.sp2-attn__list li > div { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.sp2-attn__list li b { font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); }
.sp2-attn__list li span { color: var(--tm-color-text-secondary); }
.sp2-attn__list .sp2-link { justify-self: start; margin: 2px 0 0; }
.sp2-attn__list .is-warning > .tm-icon { color: var(--tm-color-warning); }
.sp2-attn__list .is-error > .tm-icon { color: var(--tm-color-down); }
:root[data-look="lumen"][data-design] { & .sp2-attn__list li + li { border-top-color: var(--lm-edge); } }
.sp2-watch .sp-srow, .sp2-wl .sp-srow, .sp2-movers .sp-srow, .sp2-active .sp-srow { padding-inline: 18px; }

/* Markets 2 */
.sp2-idx { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: stretch; }
.sp2-idx__side { display: grid; gap: 20px; grid-template-rows: auto 1fr; }
.sp2-more summary { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 14px; color: var(--tm-color-primary-text); font: var(--tm-font-weight-medium) 13.5px/1.3 var(--tm-font-ui); cursor: pointer; list-style: none; }
.sp2-more summary::-webkit-details-marker { display: none; }
.sp2-more[open] summary .tm-icon { transform: rotate(180deg); }
.sp2-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sp2-three .sp2-card { padding-bottom: 8px; }

/* Stock page 2 */
.sp2-trail { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tm-color-text-secondary); }
.sp2-trail a { display: inline-flex; align-items: center; gap: 4px; color: var(--tm-color-text-secondary); text-decoration: none; }
.sp2-trail a:hover { color: var(--tm-color-text); }
.sp2-trail [aria-current] { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.sp2-trail__sep { width: 1px; height: 14px; background: var(--tm-color-divider-strong); }
.sp2-stock { grid-template-columns: none; }
.sp2-stockpage .sp2-stock { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.sp2-stock__main { display: grid; gap: 20px; min-width: 0; }
.sp2-ticket { position: sticky; top: calc(var(--tm-dsk-top, 64px) + 16px); max-height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top, 64px) - 32px); overflow: auto; padding: 18px; }
.sp2-pos .tm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Funds 2 */
.sp2-cashcard { padding: 22px; display: grid; gap: 18px; }
.sp2-cashcard__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sp2-cashcard .tm-price--display { font-size: 44px; }
.sp2-actions { display: flex; gap: 10px; }
.sp2-cashfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--tm-color-divider); }
.sp2-cashfacts > div { display: grid; gap: 3px; align-content: start; padding: 14px 16px 0; border-left: 1px solid var(--tm-color-divider); }
.sp2-cashfacts > div:first-child { padding-left: 0; border-left: 0; }
.sp2-cashfacts dt { font-size: 13px; color: var(--tm-color-text-secondary); }
.sp2-cashfacts dd { margin: 0; font: var(--tm-font-weight-medium) 16px/1.3 var(--tm-font-ui); }
.sp2-cashfacts dd.tm-secondary { font: var(--tm-font-weight-regular) 12.5px/1.4 var(--tm-font-ui); }
.sp2-panel { padding-top: 16px; border-top: 1px solid var(--tm-color-divider); max-width: 560px; }
.sp2-panel .sp-h3 { margin-top: 0; }
.sp2-panel > p { margin: 0 0 10px; font-size: 14px; }
.sp2-help { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--tm-color-text-secondary); }

@container sp (width < 1060px) {
  .sp2-cols, .sp2-idx, .sp2-stockpage .sp2-stock { grid-template-columns: minmax(0, 1fr); }
  .sp2-side, .sp2-ticket { position: static; max-height: none; }
  .sp2-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp2-cashfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp2-cashfacts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@container sp (width < 700px) { .sp2-pair, .sp2-three { grid-template-columns: minmax(0, 1fr); } }

:root[data-look="lumen"][data-design] {
  & .sp2-res { background: var(--lk-glass); border-color: var(--lm-edge-strong); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float); }
  & .sp2-res [role="option"]:hover, & .sp2-res .is-active { background: linear-gradient(90deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)); }
  & :is(.sp2-cashfacts, .sp2-cashfacts > div, .sp2-panel) { border-color: var(--lm-edge); }
  & .sp2-cashcard { border: 1px solid transparent; background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--lm-ambient) 10%, transparent), transparent 70%) padding-box, var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; }
  & .sp2-value .sp-pf__lchart .tm-lchart__plot::before { background: radial-gradient(70% 100% at 70% 100%, var(--lm-glow-up), transparent 72%); }
}

/* Card heads line up across a row: one height, the title and any control centred on it (24 Oct 2026). */
.sp2-three .sp2-card__head, .sp2-pair .sp2-card__head { min-height: 56px; box-sizing: border-box; align-items: center; padding-block: 12px 4px; }
.sp2-seg { flex: none; padding: 2px; }
.sp2-seg button { padding: 4px 12px; font-size: 13px; line-height: 20px; min-height: 0; }

/* Lumen: lab cards take the same glass, sheen and lit rim as the design system's cards. */
:root[data-look="lumen"][data-design] {
  & .sp-card:not(.sp-pcard):not(.sp-cc):not(.sp-ocard) { border: 1px solid transparent; border-radius: 24px; background: var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; box-shadow: var(--lm-shadow); }
  & .sp2-cashcard { background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--lm-ambient) 10%, transparent), transparent 70%) padding-box, var(--lm-sheen) padding-box, var(--lm-fill) padding-box, var(--lm-rim) border-box; }
}

/* A chart card whose chart fills the card (Markets: the All Share card ends level with the figures beside it). */
.sp-cc:has(.tm-lchart--fill) { display: flex; flex-direction: column; }
.sp-cc:has(.tm-lchart--fill) .sp-cc__chart { flex: 1 1 auto; }
.sp2-idx > .sp2-asi { min-height: 100%; }

/* Long lists: six rows, then Show all (24 Oct 2026). */
.sp2-list:not(.is-open) > .sp-srow:nth-child(n+7) { display: none; }
.sp2-more-btn { display: inline-flex; align-items: center; gap: 4px; margin: 4px 18px 12px; padding: 0; border: 0; background: none; color: var(--tm-color-primary-text); font: var(--tm-font-weight-medium) 13.5px/1.3 var(--tm-font-ui); cursor: pointer; align-self: flex-start; }
.sp2-more-btn:hover { text-decoration: underline; }
.sp2-three .sp2-card { display: flex; flex-direction: column; }
.sp2-three .sp2-note { margin-top: auto; padding-top: 4px; }
/* All securities: the filter matches the small Rising / Falling switch. */
.sp2-all .sp-mtab__bar .tm-seg { padding: 2px; }
.sp2-all .sp-mtab__bar .tm-seg button { padding: 4px 12px; font-size: 13px; line-height: 20px; min-height: 0; }

/* Smart search popup (24 Oct 2026): below the field, at least as wide as it, grouped results. */
.sp2-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: max(100%, 560px); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; box-sizing: border-box;
  border-radius: 20px; background: var(--tm-color-raised); border: 1px solid var(--tm-color-divider-strong); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.65); }
.sp2-pop[hidden] { display: none; }
.sp2-pop__group + .sp2-pop__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tm-color-divider); }
.sp2-pop__label { margin: 4px 10px 4px; font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp2-pop__item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 12px; cursor: pointer; font-size: 14px; }
.sp2-pop__item + .sp2-pop__item { margin-top: 2px; }
.sp2-pop__item > .tm-icon { color: var(--tm-color-text-secondary); flex: none; }
.sp2-pop__item b { font-weight: var(--tm-font-weight-semibold); white-space: nowrap; }
.sp2-pop__verb { color: var(--tm-color-primary-text); font-weight: var(--tm-font-weight-medium); white-space: nowrap; }
.sp2-pop__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm-color-text-secondary); font-size: 13px; }
.sp2-pop__end { display: inline-flex; gap: 10px; margin-left: auto; padding-left: 12px; font-size: 13.5px; white-space: nowrap; }
.sp2-pop__item.is-active { background: var(--tm-color-hover); }
.sp2-pop__hint { margin: 2px 10px 6px; font-size: 13px; line-height: 1.5; }
.sp2-pop__hint .sp2-pop__sub { white-space: normal; }
.sp2-pop__hint b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
:root[data-look="lumen"][data-design] {
  & .sp2-pop { background: var(--lk-glass); border-color: var(--lm-edge-strong); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); box-shadow: inset 0 1px 0 var(--lm-hi), var(--lm-float); }
  & .sp2-pop__group + .sp2-pop__group { border-top-color: var(--lm-edge); }
  & .sp2-pop__item.is-active { background: linear-gradient(90deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.035) 55%, rgb(255 255 255 / 0.01)); }
  &[data-theme="light"] .sp2-pop__item.is-active { background: linear-gradient(90deg, rgb(16 24 40 / 0.07), rgb(16 24 40 / 0.02)); }
}

/* ---------- Markets 2, rethought (24 Oct 2026): summary tiles, one list with category chips and a pager ---------- */
.sp2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sp2-tile { display: grid; align-content: start; gap: 4px; padding: 16px 18px 14px; }
.sp2-tile__k { margin: 0; font-size: 13px; color: var(--tm-color-text-secondary); }
.sp2-tile__v { margin: 0; font: var(--tm-font-weight-regular) 28px/1.15 var(--tm-font-ui); letter-spacing: -0.02em; color: var(--tm-color-text); }
.sp2-tile .tm-change { font-size: 13.5px; }
.sp2-tile__spark { margin-top: 6px; }
.sp2-tile__note, .sp2-tile__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp2-breadth { display: flex; height: 6px; margin-top: 10px; border-radius: 3px; overflow: hidden; gap: 2px; }
.sp2-breadth i { display: block; height: 100%; }
.sp2-breadth .up { background: var(--tm-color-up); } .sp2-breadth .down { background: var(--tm-color-down); } .sp2-breadth .flat { background: var(--tm-color-divider-strong); }
.sp2-mk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: stretch; }
.sp2-browse { display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
.sp2-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 12px; }
.sp2-cats::-webkit-scrollbar { display: none; }
.sp2-cats .tm-filter { flex: none; white-space: nowrap; }
.sp2-cnt { margin-left: 4px; font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.sp2-cats__sep { flex: none; width: 1px; margin: 4px 4px; background: var(--tm-color-divider-strong); }
.sp2-browse__bar { display: flex; align-items: center; gap: 12px; padding: 0 18px 8px; }
.sp2-browse__count { margin-right: auto; font-size: 13.5px; }
.sp2-browse__count b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.sp2-sort select { min-height: 36px; font-size: 13.5px; }
.sp2-browse__q { width: 180px; height: 36px; }
.sp2-stocks tbody td { height: 54px; }
.sp2-empty { text-align: left !important; color: var(--tm-color-text-secondary); }
.sp2-tspark { display: block; width: 88px; margin-left: auto; }
.sp2-sectors { display: flex; flex-direction: column; min-width: 0; }
.sp2-sectors ul { margin: 0; padding: 0 8px 8px; list-style: none; display: grid; }
.sp2-sectors li button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp2-sectors li button:hover { background: var(--tm-color-hover); }
.sp2-sectors li button.is-on { background: var(--tm-color-primary-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 35%, transparent); }
.sp2-sec__n { display: grid; gap: 1px; min-width: 0; font-size: 14px; }
.sp2-sec__n .tm-secondary { font-size: 12px; }
.sp2-sectors .tm-change { flex: none; font-size: 13px; }
@container sp (width < 1060px) { .sp2-mk { grid-template-columns: minmax(0, 1fr); } }
@container sp (width < 900px) { .sp2-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sp2-col-md { display: none; } }
@container sp (width < 600px) { .sp2-tiles { grid-template-columns: minmax(0, 1fr); } .sp2-col-lg { display: none; } .sp2-browse__bar { flex-wrap: wrap; } }
/* The sectors card takes the list's height and scrolls inside, so both cards end level. */
.sp2-sectors { height: 0; min-height: 100%; }
.sp2-sectors ul { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sp2-browse__bar .tm-input, .sp2-browse__bar .tm-select select { height: 36px; min-height: 36px; }
/* Narrower: the sector chips already filter by sector, so the side list goes rather than stacking and lengthening the page. */
@container sp (width < 1060px) { .sp2-sectors { display: none; } }
.sp2-own { margin-left: 8px; font-size: 12px; font-weight: var(--tm-font-weight-regular); color: var(--tm-color-text-secondary); }

/* Markets list, second pass (24 Oct 2026): title first, views, then Search this list, sector and sort; the card has the
   window's height and its rows scroll inside under sticky column heads, so the page never grows. */
.sp2-browse { height: max(520px, calc(100dvh - 150px)); padding-bottom: 0; overflow: hidden; }
.sp2-browse__head { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 10px; }
.sp2-browse__head h3 { margin: 0; font: var(--tm-font-weight-semibold) 17px/24px var(--tm-font-ui); }
.sp2-browse__count { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sp2-browse__bar { gap: 10px; padding: 0 18px 12px; }
.sp2-browse__q { position: relative; flex: 1 1 240px; max-width: 320px; width: auto; }
.sp2-browse__q .tm-input__control::-webkit-search-cancel-button { display: none; }
.sp2-browse__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; min-height: 0; }
.sp2-browse__note { margin: 0 auto 0 4px !important; font-size: 12.5px; }
.sp2-browse__note:empty { margin-right: auto !important; }
.sp2-sector select { min-height: 36px; font-size: 13.5px; }
.sp2-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; border-top: 1px solid var(--tm-color-divider); }
.sp2-scroll:focus-visible { outline: 2px solid var(--tm-color-primary-text); outline-offset: -2px; border-radius: 0 0 20px 20px; }
.sp2-stocks thead th { position: sticky; top: 0; z-index: 1; background: var(--tm-color-panel); box-shadow: inset 0 -1px 0 var(--tm-color-divider); }
.sp2-stocks tbody tr:last-child td { border-bottom-color: transparent; }
.sp2-col-star { width: 44px; padding-right: 0 !important; padding-left: 10px !important; }
.sp2-star { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: none; color: var(--tm-color-text-secondary); cursor: pointer; }
.sp2-star:hover { color: var(--tm-color-text); background: var(--tm-color-hover); }
.sp2-star:focus-visible { outline: 2px solid var(--tm-color-primary-text); outline-offset: 0; }
.sp2-star[aria-pressed="true"] { color: var(--tm-color-warning); }
.sp2-star[aria-pressed="true"] svg { fill: currentColor; }
.sp2-sectors li button[aria-pressed="true"] { color: inherit; }
@container sp (width < 600px) { .sp2-browse__q { max-width: none; flex-basis: 100%; } }
.sp2-stocks th:nth-child(2), .sp2-stocks td:nth-child(2) { text-align: left; padding-left: 6px; }
.sp2-browse__clear[hidden] { display: none; }

/* ---------- Orders 2, rethought (24 Oct 2026, with Codex): grouped two-line rows, a "where it stands" panel ---------- */
.sp2-omenu { position: relative; }
.sp2-omenu .tm-menu[hidden] { display: none; }
.sp2-otop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp2-otop__sum { margin: 0 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sp2-ord { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 20px; height: max(480px, calc(100dvh - 240px)); }
.sp2-olist, .sp2-odetail { min-height: 0; overflow: hidden; }
.sp2-olist { display: flex; flex-direction: column; }
.sp2-obar { padding-top: 14px; }
.sp2-obar__done { display: flex; gap: 10px; margin-left: auto; }
.sp2-obar__done[hidden] { display: none; }
.sp2-obar__done select { min-height: 36px; font-size: 13.5px; }
.sp2-oscroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 0 8px 10px; border-top: 1px solid var(--tm-color-divider); }
.sp2-ogroup h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 10px 8px; background: var(--tm-color-panel); font: var(--tm-font-weight-semibold) 13.5px/1.3 var(--tm-font-ui); color: var(--tm-color-text); }
.sp2-ogroup h4 .tm-secondary { margin-left: 4px; font-weight: var(--tm-font-weight-regular); }
.sp2-ogroup ul { margin: 0; padding: 0; list-style: none; }
.sp2-orow { display: flex; align-items: center; gap: 16px; width: 100%; padding: 11px 10px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp2-orow:hover { background: var(--tm-color-hover); }
.sp2-orow:focus-visible { outline: 2px solid var(--tm-color-primary-text); outline-offset: -2px; }
.sp2-orow.is-sel { background: var(--tm-color-primary-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 30%, transparent); }
.sp2-orow__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sp2-orow__main b { font-size: 15px; font-weight: var(--tm-font-weight-semibold); }
.sp2-orow__main > .tm-secondary { font-size: 13px; font-variant-numeric: tabular-nums; }
.sp2-orow__why { font-size: 13px; color: var(--tm-color-text); }
.sp2-orow .tm-status { flex: none; }
.sp2-oprog { display: grid; gap: 5px; flex: none; width: 112px; font-size: 12.5px; color: var(--tm-color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.sp2-oprog i { display: block; height: 4px; border-radius: 2px; background: var(--tm-color-divider-strong); overflow: hidden; }
.sp2-oprog b { display: block; height: 100%; background: var(--tm-color-text-secondary); }
.sp2-oempty { margin: 0; padding: 28px 10px; color: var(--tm-color-text-secondary); font-size: 14px; }
.sp2-odetail { overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 20px 22px 22px; }
.sp2-od__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp2-od__head h2 { margin: 0; font: var(--tm-font-weight-semibold) 20px/26px var(--tm-font-ui); }
.sp2-od__head p { margin: 4px 0 0; font-size: 13px; }
.sp2-od__now { display: grid; gap: 8px; margin: 16px 0 4px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--tm-color-text) 4%, transparent); }
.sp2-od__now.is-uncertain { background: color-mix(in srgb, var(--tm-color-warning) 10%, transparent); }
.sp2-od__now.is-rejected { background: color-mix(in srgb, var(--tm-color-down) 9%, transparent); }
.sp2-od__now p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.sp2-od__now .sp2-od__lead { font-size: 15.5px; line-height: 1.4; color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.sp2-odetail .sp-actions { margin-top: 14px; }
.sp2-odetail .sp-h3 { margin: 20px 0 6px; }
.sp2-od__hist { margin-top: 18px; border-top: 1px solid var(--tm-color-divider); }
.sp2-od__hist summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; list-style: none; cursor: pointer; font: var(--tm-font-weight-semibold) 14px/1.3 var(--tm-font-ui); }
.sp2-od__hist summary::-webkit-details-marker { display: none; }
.sp2-od__hist summary .tm-icon { color: var(--tm-color-text-secondary); transition: transform var(--tm-motion-fast, 150ms) ease; }
.sp2-od__hist[open] summary .tm-icon { transform: rotate(180deg); }
.sp2-od__steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.sp2-od__steps li { display: flex; justify-content: space-between; gap: 12px; }
@container sp (width < 960px) { .sp2-ord { grid-template-columns: minmax(0, 1fr); height: auto; } .sp2-olist { height: max(420px, 60dvh); } .sp2-odetail { overflow: visible; } }
@container sp (width < 640px) { .sp2-oprog { display: none; } }
.sp2-orders2 .side-buy { color: var(--tm-color-up); } .sp2-orders2 .side-sell { color: var(--tm-color-down); }
/* Sticky heads need a solid fill so rows don't show through when they scroll under (Lumen clears table heads).
   The scrolling cards drop Lumen's top sheen so that fill matches the card everywhere. */
.sp2-browse .sp2-stocks thead th, :root[data-look][data-design] .sp2-browse .sp2-stocks thead th { background: var(--_sticky, var(--tm-color-panel)); }
.sp2-browse, .sp2-olist { --_sticky: var(--tm-color-panel); }
:root[data-look="lumen"][data-design] :is(.sp2-browse, .sp2-olist).sp-card:not(.sp-pcard):not(.sp-cc):not(.sp-ocard) { background: var(--lm-fill) padding-box, var(--lm-rim) border-box; } /* no top sheen, so sticky heads match the card */
.sp2-ogroup h4 { background: var(--_sticky); }
/* Orders: a very faint line between rows, hidden next to the selected row. */
.sp2-ogroup li + li { position: relative; }
.sp2-ogroup li + li::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: color-mix(in srgb, var(--tm-color-divider) 65%, transparent); pointer-events: none; }
.sp2-ogroup li:has(.is-sel) + li::before, .sp2-ogroup li:has(.is-sel)::before, .sp2-ogroup li:has(.sp2-orow:hover) + li::before, .sp2-ogroup li:has(.sp2-orow:hover)::before { opacity: 0; }
/* Orders groups: a full-width divider and more air above each group, clearly stronger than the faint row lines. */
.sp2-ogroup + .sp2-ogroup { margin: 12px -8px 0; padding: 4px 8px 0; border-top: 1px solid var(--tm-color-divider-strong); }
.sp2-ogroup h4 { padding-top: 16px; }
.sp2-ogroup:first-child h4 { padding-top: 14px; }

/* ---------- Home 3 (24 Oct 2026, the Home plan): value and return, your stocks, what to do or expect ---------- */
.sp3-home { display: grid; gap: 20px; }
.sp3-hero { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: stretch; min-height: 200px; }
.sp3-hero__num { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.sp3-k { margin: 0; font-size: 14px; color: var(--tm-color-text-secondary); }
.sp3-ret { margin: 2px 0 0; font-size: 17px; line-height: 24px; min-height: 24px; }
.sp3-ret .tm-secondary { font-size: 14px; }
.sp3-today { margin: 0; font-size: 14px; color: var(--tm-color-text-secondary); }
.sp3-today .tm-change { font-size: 14px; margin-left: 4px; }
.sp3-note { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp3-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; color: var(--tm-color-warning); background: color-mix(in srgb, var(--tm-color-warning) 12%, transparent); }
.sp3-hero__chart { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sp3-hero__chart .tm-lchart__readout { display: none; }
.sp3-hero__chart .tm-lchart__plot { flex: 1; min-height: 150px; }
.sp3-hero__chart.tm-lchart--fill .tm-lchart__plot { min-height: 150px; }
.sp3-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.sp3-cap { margin: -4px 18px 4px; font-size: 13px; }
.sp3-table th:first-child, .sp3-table td:first-child { text-align: left; }
.sp3-table tbody td { height: 56px; }
.sp3-table .sp2-stock .tm-status { margin-left: 6px; vertical-align: 1px; }
.sp3-side { display: grid; gap: 20px; min-width: 0; }
.sp3-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sp3-ev, .sp3-news ul { margin: 0; padding: 0 8px 8px; list-style: none; display: grid; }
.sp3-ev li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px; font-size: 14px; }
.sp3-ev li + li { border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 65%, transparent); }
.sp3-ev li > div { display: grid; gap: 2px; }
.sp3-ev li > div > span { font-size: 12.5px; line-height: 1.45; color: var(--tm-color-text-secondary); }
.sp3-ev__d { display: grid; place-items: center; align-content: center; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--tm-color-text) 5%, transparent); font-size: 11.5px; color: var(--tm-color-text-secondary); line-height: 1.1; }
.sp3-ev__d b { font-size: 16px; color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.sp3-empty { margin: 0; padding: 4px 18px 16px; font-size: 13.5px; }
.sp3-news li button { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 12px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; font-size: 14px; }
.sp3-news li button:hover { background: var(--tm-color-hover); }
.sp3-news li + li { border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 65%, transparent); }
.sp3-news__m { font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp3-news__m b { margin-right: 8px; color: var(--tm-color-text); }
.sp3-news li .tm-icon { color: var(--tm-color-text-secondary); }
@container sp (width < 1000px) { .sp3-cols { grid-template-columns: minmax(0, 1fr); } .sp3-hero { grid-template-columns: minmax(0, 1fr); } .sp3-news li button { grid-template-columns: minmax(0, 1fr) auto; } .sp3-news__m { grid-column: 1 / -1; } }

/* Your stocks page */
.sp3-holdings { --sp3-a1: var(--tm-color-primary-text); --sp3-a2: color-mix(in srgb, var(--tm-color-primary-text) 72%, var(--tm-color-bg)); --sp3-a3: color-mix(in srgb, var(--tm-color-primary-text) 50%, var(--tm-color-bg)); --sp3-a4: color-mix(in srgb, var(--tm-color-primary-text) 34%, var(--tm-color-bg)); --sp3-a5: color-mix(in srgb, var(--tm-color-primary-text) 22%, var(--tm-color-bg)); --sp3-a0: var(--tm-color-divider-strong); display: grid; gap: 16px; }
.sp3-inl .tm-change { font-size: inherit; }
.sp3-alloc { display: grid; gap: 12px; padding: 16px 18px; }
.sp3-alloc__bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.sp3-alloc__bar i { display: block; height: 100%; }
.sp3-alloc__key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.sp3-alloc__key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.sp3-alloc__key b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.sp3-browse { height: max(480px, calc(100dvh - 330px)); }
.sp3-bar { padding-top: 14px; }
.sp3-bar .sp2-browse__count { margin-right: auto; }
.sp3-grp-sw { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.sp3-browse .sp3-table thead th { position: sticky; top: 0; z-index: 1; background: var(--_sticky, var(--tm-color-panel)); box-shadow: inset 0 -1px 0 var(--tm-color-divider); }
:root[data-look][data-design] .sp3-browse .sp3-table thead th { background: var(--_sticky, var(--tm-color-panel)); }
.sp3-browse { --_sticky: var(--tm-color-panel); }
:root[data-look="lumen"][data-design] .sp3-browse.sp-card:not(.sp-pcard):not(.sp-cc):not(.sp-ocard) { background: var(--lm-fill) padding-box, var(--lm-rim) border-box; }
.sp3-grp th, .sp3-grp td { height: 40px !important; padding-top: 14px; font-size: 13.5px; text-align: left; background: color-mix(in srgb, var(--tm-color-text) 3%, transparent); }
.sp3-grp td { text-align: right; }
.sp3-grp th .tm-secondary { margin-left: 6px; font-weight: var(--tm-font-weight-regular); }
.sp3-holdings .sp2-trail span:last-child { color: var(--tm-color-text-secondary); }
.sp3-main { display: grid; gap: 20px; min-width: 0; }
.sp3-crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--tm-color-text-secondary); }
.sp3-crumb a { color: inherit; text-decoration: none; }
.sp3-crumb a:hover { color: var(--tm-color-text); }
.sp2-trail button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--tm-color-text-secondary); font: inherit; cursor: pointer; }
.sp2-trail button:hover { color: var(--tm-color-text); }

/* Home 3, second pass (24 Oct 2026): chart without hard edges, the range switch under its number, table heads as a
   band, a centred View all, Needs you as tinted cards, In progress with icon chips and a settlement track. */
:root[data-look][data-design] .sp3-hero__chart .tm-lchart__plot::before { border-radius: 0; background: radial-gradient(50% 55% at 62% 50%, var(--lm-glow-up), transparent 72%); }
:root[data-look][data-design] .sp3-hero__chart.tm-lchart--down .tm-lchart__plot::before { background: radial-gradient(50% 55% at 62% 50%, var(--lm-glow-down), transparent 72%); }
:root[data-look][data-design] .sp3-hero__chart .tm-lchart__plot::after {
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 6px), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 6px) intersect, linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sp3-ranges { margin: 4px 0 2px; }
.sp3-ranges .tm-tabs { display: inline-flex; width: auto; justify-content: flex-start; }
.sp3-ranges .tm-tabs button { flex: none; min-width: 48px; }
.sp3-ranges .tm-tabs button:disabled { opacity: 0.4; cursor: default; }
.sp3-note { margin-top: 10px; }

/* Table heads: a quiet band, smaller than the card title, so title, heads and rows read as three levels. */
.sp2-card__head h3 { font-size: 17px; line-height: 24px; }
.sp3-table, .sp2-stocks { --_band: color-mix(in srgb, var(--tm-color-panel) 94%, var(--tm-color-text)); }
.sp3-table thead th, .sp2-stocks thead th, :root[data-look][data-design] :is(.sp3-table, .sp2-stocks) thead th {
  height: 36px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary);
  background: var(--_band); border-bottom: 0; box-shadow: none;
}
.sp3-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 18px 16px; }

/* Needs you */
.sp3-needs .sp2-card__head .tm-count { margin-left: 8px; }
.sp3-needs .sp2-card__head { justify-content: flex-start; }
.sp3-need__list { margin: 0; padding: 0 12px 12px; list-style: none; display: grid; gap: 10px; }
.sp3-need { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--_c) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 22%, transparent); }
.sp3-need.is-error { --_c: var(--tm-color-down); } .sp3-need.is-warning { --_c: var(--tm-color-warning); }
.sp3-need__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--_c); background: color-mix(in srgb, var(--_c) 16%, transparent); }
.sp3-need__body { display: grid; gap: 4px; min-width: 0; }
.sp3-need__body p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tm-color-text-secondary); }
.sp3-need__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp3-need__t b { font-size: 14.5px; color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.sp3-need__t .tm-secondary { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp3-need__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* In progress */
.sp3-prog ul { margin: 0; padding: 0 8px 8px; list-style: none; display: grid; gap: 2px; }
.sp3-prog li + li { border-top: 0; }
.sp3-prog__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; }
button.sp3-prog__row { cursor: pointer; }
button.sp3-prog__row:hover { background: var(--tm-color-hover); }
.sp3-prog__row > .tm-icon:last-child { color: var(--tm-color-text-secondary); }
.sp3-prog__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--tm-color-text); background: color-mix(in srgb, var(--tm-color-text) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-text) 8%, transparent); }
.sp3-prog__i.is-wait { color: var(--tm-color-warning); background: color-mix(in srgb, var(--tm-color-warning) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-warning) 20%, transparent); }
.sp3-prog__tx { display: grid; gap: 2px; min-width: 0; }
.sp3-prog__tx b { font-size: 14px; font-weight: var(--tm-font-weight-semibold); }
.sp3-prog__tx .tm-secondary { font-size: 12.5px; line-height: 1.4; }
.sp3-prog__pill { padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--tm-color-text-secondary); background: color-mix(in srgb, var(--tm-color-text) 7%, transparent); }
.sp3-track { display: inline-flex; align-items: center; gap: 0; }
.sp3-track i { position: relative; width: 9px; height: 9px; border-radius: 999px; background: var(--tm-color-divider-strong); }
.sp3-track i + i { margin-left: 14px; }
.sp3-track i + i::before { content: ""; position: absolute; right: 9px; top: 4px; width: 14px; height: 1px; background: var(--tm-color-divider-strong); }
.sp3-track i.on { background: var(--tm-color-primary-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-color-primary-text) 20%, transparent); }
.sp3-needs .sp2-card__head { align-items: center; gap: 10px; }
.sp3-needs .sp2-card__head .tm-count { margin: 0; }
/* Table heads run edge to edge with the Markets divider under them (24 Oct 2026); first and last cells line up with
   the card title. */
:root[data-look][data-design] :is(.sp3-table, .sp2-stocks) thead th, :is(.sp3-table, .sp2-stocks) thead th { box-shadow: inset 0 -1px 0 var(--tm-color-divider); }
.sp3-stocks .sp2-tablewrap { padding: 0; }
.sp3-table th:first-child, .sp3-table td:first-child { padding-left: 18px; }
.sp3-table th:last-child, .sp3-table td:last-child { padding-right: 18px; }

/* Add funds by bank transfer (24 Oct 2026): a transfer card beside numbered steps. */
.sp4-add { display: grid; gap: 16px; }
.sp4-add__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sp4-add__head .sp-h3 { margin: 0 0 4px; }
.sp4-add__head p { margin: 0; font-size: 14px; }
.sp4-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--tm-color-warning); background: color-mix(in srgb, var(--tm-color-warning) 12%, transparent); }
.sp4-add__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sp4-bank { display: grid; gap: 14px; padding: 18px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tm-color-text) 7%, transparent), color-mix(in srgb, var(--tm-color-text) 2%, transparent) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-text) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); }
.sp4-bank__top { display: flex; align-items: center; gap: 12px; }
.sp4-bank__top > div { display: grid; gap: 1px; }
.sp4-bank__top b { font-size: 15px; font-weight: var(--tm-font-weight-semibold); }
.sp4-bank__top .tm-secondary { font-size: 12.5px; }
.sp4-bank__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--tm-color-text); background: color-mix(in srgb, var(--tm-color-text) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-text) 10%, transparent); }
.sp4-bank__rows { margin: 0; display: grid; }
.sp4-bank__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 8px 0; }
.sp4-bank__rows > div + div { border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 70%, transparent); }
.sp4-bank__rows dt { font-size: 13px; color: var(--tm-color-text-secondary); }
.sp4-bank__rows dd { margin: 0; font-size: 14.5px; color: var(--tm-color-text); text-align: right; }
.sp4-bank__rows dd.tm-mono { letter-spacing: 0.04em; }
.sp4-copy { width: 32px; height: 32px; min-height: 0; color: var(--tm-color-text-secondary); }
.sp4-copy:hover { color: var(--tm-color-text); }
.sp4-ref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--tm-color-text) 28%, transparent); background: color-mix(in srgb, var(--tm-color-bg) 55%, transparent); }
.sp4-ref > div { display: grid; gap: 4px; }
.sp4-ref__k { font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp4-ref__v { font-size: 24px; line-height: 1.1; font-weight: var(--tm-font-weight-semibold); letter-spacing: 0.06em; color: var(--tm-color-text); }
.sp4-all { justify-self: start; }
.sp4-steps { position: relative; margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.sp4-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--tm-color-divider-strong); }
.sp4-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.sp4-steps__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; font-size: 13px; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); background: var(--tm-color-panel); box-shadow: inset 0 0 0 1px var(--tm-color-divider-strong); }
.sp4-steps li:last-child .sp4-steps__n { color: var(--tm-color-up); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-up) 45%, transparent); background: color-mix(in srgb, var(--tm-color-up) 10%, var(--tm-color-panel)); }
.sp4-steps li > div { display: grid; gap: 3px; padding-top: 5px; }
.sp4-steps b { font-size: 14.5px; font-weight: var(--tm-font-weight-semibold); }
.sp4-steps .tm-secondary { font-size: 13px; line-height: 1.45; }
@container sp (width < 760px) { .sp4-add__grid { grid-template-columns: minmax(0, 1fr); } .sp4-add__head { flex-direction: column; } }
/* Statement: the table runs edge to edge like Home's, its first and last cells in line with the card title. */
.sp-stmt { padding: 20px 0 10px; }
.sp-stmt .sp-card-head { padding: 0 20px; }
.sp-stmt th:first-child, .sp-stmt td:first-child { padding-left: 20px; }
.sp-stmt th:last-child, .sp-stmt td:last-child { padding-right: 20px; }
.sp2-panel.sp4-add { max-width: none; }
.sp4-add__grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; }
.sp4-steps .sp4-nowrap { white-space: nowrap; }

/* Home 3, third pass (24 Oct 2026): a roomier hero with a bigger number, a day sparkline per stock, one Next card. */
.sp3-hero { min-height: 260px; padding: 12px 0 8px; gap: 40px; }
.sp3-hero__num { gap: 10px; }
.sp3-hero__num .tm-price--display { font-size: 56px; line-height: 60px; }
.sp3-ret { font-size: 18px; }
.sp3-ranges { margin: 6px 0 4px; }
.sp3-note { margin-top: 14px; }
.sp3-table .sp2-today { width: 110px; }
.sp3-table .sp2-today .sp3-spark { display: block; width: 88px; margin: 0 0 2px auto; }
.sp3-table .sp2-today .tm-change { font-size: 13px; }
.sp3-next .sp3-grp-l { margin: 4px 18px 2px; font-size: 12.5px; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); }
.sp3-next .sp3-grp-l ~ .sp3-grp-l { margin-top: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 70%, transparent); margin-left: 0; margin-right: 0; padding-left: 18px; }
.sp3-next ul { margin: 0; padding: 0 8px 8px; list-style: none; display: grid; gap: 2px; }
.sp3-next .sp3-ev li + li { border-top: 0; }
.sp3-hero { grid-template-columns: minmax(400px, 1fr) minmax(0, 1.25fr); }
.sp2-stock__main > .tm-dsk__block { padding-top: 0; margin-top: -8px; }

/* Order detail, finetuned (24 Oct 2026). */
.sp2-od__now { gap: 10px; }
.sp2-od__bar { display: grid; gap: 6px; }
.sp2-od__bar .tm-progress { height: 6px; }
.sp2-od__barl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tm-color-text-secondary); font-variant-numeric: tabular-nums; }
.sp2-od__barl span:first-child { color: var(--tm-color-text); }
.sp2-od__fills { margin: 2px 0 0; padding: 8px 0 0; list-style: none; display: grid; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 80%, transparent); }
.sp2-od__fills li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sp2-od__fills .tm-secondary { font-size: 12.5px; }
.sp2-od__cn { width: 32px; height: 32px; min-height: 0; color: var(--tm-color-primary-text); }
.sp2-od__k { margin: 22px 0 8px; font-size: 12.5px; font-weight: var(--tm-font-weight-medium); color: var(--tm-color-text-secondary); }
.sp2-od__money { margin: 0; display: grid; }
.sp2-od__money > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; }
.sp2-od__money > div + div { border-top: 1px solid color-mix(in srgb, var(--tm-color-divider) 70%, transparent); }
.sp2-od__money dt { display: grid; gap: 2px; font-size: 14px; color: var(--tm-color-text); }
.sp2-od__money dt .tm-secondary { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp2-od__money dd { margin: 0; font-size: 15px; font-weight: var(--tm-font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp2-od__terms { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--tm-color-text) 4%, transparent); }
.sp2-od__terms > div { display: grid; gap: 2px; min-width: 0; }
.sp2-od__terms dt { font-size: 12.5px; color: var(--tm-color-text-secondary); }
.sp2-od__terms dd { margin: 0; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp2-od__hist summary { outline: none; border-radius: 8px; }
.sp2-od__hist summary:focus-visible { outline: 2px solid var(--tm-color-primary-text); outline-offset: 2px; }
/* Order detail: each part in its own soft panel, like the status block, with even space between (24 Oct 2026). */
.sp2-od__grp { margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--tm-color-text) 4%, transparent); }
.sp2-od__grp .sp2-od__k { margin: 0 0 4px; }
.sp2-od__grp .sp2-od__terms { padding: 4px 0 2px; background: none; border-radius: 0; }
.sp2-od__money > div { padding: 9px 0; }
.sp2-od__money dt { min-width: 0; }
.sp2-od__hist.sp2-od__grp { border-top: 0; padding: 0 16px; }
.sp2-od__hist summary { padding: 13px 0; }
.sp2-od__hist[open] { padding-bottom: 12px; }
.sp2-odetail .sp-actions { margin: 14px 0 2px; }

/* Add funds and Withdraw as dialogs (24 Oct 2026): a focused card over the page, closed with ×, Esc or a click outside. */
.sp4-dlg { width: min(940px, calc(100vw - 48px)); max-height: calc(100dvh - 64px); margin: auto; padding: 24px 26px 26px; overflow: auto; border: 1px solid var(--tm-color-divider-strong); border-radius: 28px; background: var(--tm-color-raised); color: var(--tm-color-text); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6); }
.sp4-dlg.sp4-out { width: min(480px, calc(100vw - 48px)); }
.sp4-dlg::backdrop { background: rgb(5 7 10 / 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:root[data-theme="light"] .sp4-dlg::backdrop { background: rgb(16 24 40 / 0.35); }
.sp4-dlg[open] { display: grid; gap: 18px; animation: sp4-in 180ms var(--tm-motion-easing-standard, ease-out); }
@keyframes sp4-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .sp4-dlg[open] { animation: none; } }
.sp4-add__end { display: flex; align-items: center; gap: 10px; flex: none; }
.sp4-x { width: 36px; height: 36px; min-height: 0; color: var(--tm-color-text-secondary); }
.sp4-x:hover { color: var(--tm-color-text); }
.sp4-dlg .sp4-add__head .sp-h3 { font-size: 19px; line-height: 26px; }
.sp4-dlg .sp4-add__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sp4-out .tm-field { margin: 0; }
.sp4-out .sp-actions { justify-content: flex-end; margin: 0; }
:root[data-look="lumen"][data-design] .sp4-dlg { background: var(--lm-sheen) padding-box, linear-gradient(var(--tm-color-raised), var(--tm-color-raised)) padding-box, var(--lm-rim) border-box; border-color: transparent; }
@media (max-width: 760px) { .sp4-dlg .sp4-add__grid { grid-template-columns: minmax(0, 1fr); } }
/* Your stocks footer: text and link on one line, equal space above and below (24 Oct 2026). */
.sp3-foot { padding: 14px 18px; gap: 20px; font-size: 14px; line-height: 20px; }
.sp3-foot .sp2-link { margin: 0; font-size: 14px; line-height: 20px; }
.sp3-foot .tm-secondary { font-size: 14px; line-height: 20px; }
/* If a money dialog is ever open without being modal, it still sits above the page and centred in the window. */
.sp4-dlg[open]:not(:modal) { position: fixed; inset: 0; z-index: 1000; }
/* A closed dialog stays hidden. (.sp4-add's display: grid from the old inline panel showed it while closed, so it sat
   in the page and × could not hide it.) */
.sp4-dlg:not([open]) { display: none !important; }
/* Funds cash card, evened out (24 Oct 2026): the same space each side of every divider, outer columns flush with the
   card edge, and the same space above the figures (after the line) as below them (the card's bottom padding). */
.sp2-cashcard { padding: 22px 24px 20px; gap: 18px; }
.sp2-cashfacts > div { padding: 18px 24px 0; }
.sp2-cashfacts > div:first-child { padding-left: 0; }
.sp2-cashfacts > div:last-child { padding-right: 0; }
.sp2-cashfacts dt { margin-bottom: 4px; }
.sp2-cashfacts dd.tm-secondary { margin-top: 2px; }
@container sp (width < 1060px) {
  .sp2-cashfacts > div { padding: 16px 20px 16px; }
  .sp2-cashfacts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sp2-cashfacts > div:nth-child(even) { padding-right: 0; }
  .sp2-cashfacts > div:nth-child(n+3) { border-top: 1px solid var(--tm-color-divider); }
  .sp2-cashfacts > div:nth-last-child(-n+2) { padding-bottom: 0; }
}

/* Add funds, second pass (24 Oct 2026): details card beside a QR panel, one line instead of steps. */
.sp4-dlg.sp4-add { width: min(820px, calc(100vw - 48px)); }
.sp4-dlg:focus { outline: none; }
.sp4-dlg .sp4-add__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: stretch; }
.sp4-all { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 0; border: 0; background: none; color: var(--tm-color-primary-text); font: var(--tm-font-weight-medium) 13.5px/1.3 var(--tm-font-ui); cursor: pointer; }
.sp4-all:hover { text-decoration: underline; }
.sp4-qr { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px 18px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tm-color-text) 7%, transparent), color-mix(in srgb, var(--tm-color-text) 2%, transparent) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-text) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); }
.sp4-qr__tile { width: 176px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6); }
.sp4-qr__tile svg { display: block; width: 100%; height: auto; }
.sp4-qr__tx { display: grid; gap: 4px; }
.sp4-qr__tx b { font-size: 14.5px; font-weight: var(--tm-font-weight-semibold); }
.sp4-qr__tx .tm-secondary { font-size: 12.5px; line-height: 1.45; }
.sp4-add__foot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--tm-color-text-secondary); }
.sp4-add__foot .tm-icon { flex: none; }
@media (max-width: 760px) { .sp4-dlg .sp4-add__grid { grid-template-columns: minmax(0, 1fr); } }

/* components/quick-search/quick-search.css */
/* Quick search (quick-search.js): a centred dialog over a dimmed page, full screen on a phone. Results on the left,
   the highlighted one previewed on the right. Built from the design system's tokens; Lumen adds glass. */
html.qs-lock { overflow: hidden; }
.qs { width: min(920px, calc(100vw - 32px)); max-width: none; height: min(600px, calc(100vh - 14vh - 32px)); max-height: none; margin: 11vh auto auto; padding: 0;
  border: 1px solid var(--tm-color-divider-strong); border-radius: 24px; background: var(--tm-color-raised); color: var(--tm-color-text); font: 400 15px/1.4 var(--tm-font-ui); overflow: hidden;
  box-shadow: 0 34px 90px -28px rgb(0 0 0 / 0.65); }
.qs[open] { display: flex; flex-direction: column; animation: qs-in 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); }
.qs::backdrop { background: rgb(5 7 10 / 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: qs-fade 0.16s ease-out; }
@keyframes qs-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes qs-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qs[open], .qs::backdrop { animation: none; } }

.qs-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--tm-color-divider); }
.qs-bar > .tm-icon { flex: none; color: var(--tm-color-text-secondary); }
.qs-q { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--tm-color-text); font: 400 18px/1.2 var(--tm-font-ui); }
.qs-q::placeholder { color: var(--tm-color-text-secondary); opacity: 1; }
.qs-q:focus { outline: none; }
.qs-x { flex: none; min-height: 28px; padding: 0 10px; border: 1px solid var(--tm-color-divider-strong); border-radius: 999px; background: transparent; color: var(--tm-color-text-secondary); font: 500 12px/1 var(--tm-font-ui); cursor: pointer; }
.qs-x:hover { color: var(--tm-color-text); }

.qs-read { flex: none; display: grid; gap: 7px; margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--tm-color-divider); color: var(--tm-color-text-secondary); font-size: 14px; }
.qs-read b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-semibold); }
.qs-read .qs-chips:empty { display: none; }
.qs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.qs-lab { margin-right: 2px; color: var(--tm-color-text-secondary); font-size: 12px; }
.qs-lab:not(:first-child) { margin-left: 8px; }
.qs-held { color: var(--tm-color-text-secondary); font-style: italic; }
.qs-free { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.qs-n { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--tm-color-primary-tint-strong); color: var(--tm-color-primary-text); font: var(--tm-font-weight-semibold) 12px/1.3 var(--tm-font-ui); white-space: nowrap; }
.qs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--tm-color-primary-tint); color: var(--tm-color-primary-text); font: var(--tm-font-weight-medium) 13px/1 var(--tm-font-ui); white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-color-primary-text) 30%, transparent); }
.qs-chip small { color: inherit; opacity: 0.8; font-size: 11px; font-weight: var(--tm-font-weight-medium); }
.qs-verb { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--tm-color-hover); color: var(--tm-color-text); font: var(--tm-font-weight-semibold) 13px/1 var(--tm-font-ui); text-transform: capitalize; }
.qs-t .qs-verb { background: none; padding: 0 2px 0 0; min-height: 0; color: var(--tm-color-primary-text); text-transform: none; }

.qs-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.qs-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 8px 10px; border-right: 1px solid var(--tm-color-divider); scrollbar-width: thin; }
.qs-body:focus-visible, .qs-pv:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: -2px; }
.qs-g + .qs-g { margin-top: 6px; border-top: 1px solid var(--tm-color-divider); }
.qs-gh { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 12px 6px; color: var(--tm-color-text-secondary); font-size: 12.5px; }
.qs-gn { font-variant-numeric: tabular-nums; }
.qs-o { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; scroll-margin: 40px 0 8px; }
.qs-o[aria-selected="true"] { background: var(--tm-color-hover); }
.qs-ic { display: grid; place-items: center; width: 20px; height: 20px; color: var(--tm-color-text-secondary); }
.qs-o[aria-selected="true"] .qs-ic { color: var(--tm-color-primary-text); }
.qs-tx { display: grid; gap: 3px; min-width: 0; }
.qs-t { overflow: hidden; font: var(--tm-font-weight-medium) 14.5px/1.3 var(--tm-font-ui); white-space: nowrap; text-overflow: ellipsis; }
.qs-t b { font-weight: var(--tm-font-weight-semibold); }
.qs-m { overflow: hidden; color: var(--tm-color-text-secondary); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.qs-end { display: inline-flex; align-items: baseline; gap: 10px; font-size: 13.5px; white-space: nowrap; }
.qs mark { padding: 0; background: transparent; color: var(--tm-color-primary-text); font-weight: var(--tm-font-weight-semibold); box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--tm-color-primary-text) 60%, transparent); }
.qs-all .qs-t { color: var(--tm-color-primary-text); }
.qs-kb { display: inline-flex; gap: 3px; }
.qs-none { margin: 18px 12px; color: var(--tm-color-text-secondary); font-size: 14px; }
.qs-none[hidden], .qs-clear[hidden] { display: none; }
.qs-clear { margin: 8px 12px; padding: 0; border: 0; background: none; color: var(--tm-color-text-secondary); font: 500 13px/1.3 var(--tm-font-ui); text-decoration: underline; cursor: pointer; }

.qs-pv { min-height: 0; overflow: auto; padding: 20px 22px; scrollbar-width: thin; }
.qs-pv-empty { display: grid; justify-items: center; gap: 10px; margin-top: 40%; color: var(--tm-color-text-secondary); text-align: center; font-size: 14px; }
.qs-pe { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--tm-color-text-secondary); font-size: 13px; }
.qs-ph { margin: 0 0 4px; font: var(--tm-font-weight-semibold) 20px/1.3 var(--tm-font-ui); letter-spacing: -0.01em; }
.qs-ps { margin: 0 0 12px; color: var(--tm-color-text-secondary); font-size: 14px; line-height: 1.5; }
.qs-price { display: grid; gap: 4px; margin: 6px 0 10px; }
.qs-price .tm-price--title { font-size: 26px; }
.qs-spark { margin: 0 0 12px; }
.qs-warn { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--tm-color-warning); font-size: 13.5px; }
.qs-facts { display: grid; gap: 0; margin: 0 0 16px; }
.qs-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tm-color-divider); font-size: 13.5px; }
.qs-facts dt { color: var(--tm-color-text-secondary); }
.qs-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.qs-act { display: flex; gap: 8px; }

.qs-foot { flex: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 20px; border-top: 1px solid var(--tm-color-divider); color: var(--tm-color-text-secondary); font-size: 12.5px; }
.qs-foot span { display: inline-flex; align-items: center; gap: 4px; }
.qs kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--tm-color-divider-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--tm-color-panel); color: var(--tm-color-text-secondary); font: 500 11px/1 var(--tm-font-ui); }

/* The trigger in the top bar: looks like a field, opens the dialog */
.qs-trigger { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 360px; min-width: 180px; height: 42px; padding: 0 8px 0 14px; box-sizing: border-box;
  border: 1px solid var(--lk-field-border, var(--tm-color-border-control)); border-radius: 999px; background: var(--lk-well, var(--tm-color-bg)); color: var(--tm-color-text-secondary); font: 400 14px/1 var(--tm-font-ui); cursor: pointer; text-align: left; }
.qs-trigger:hover { border-color: var(--tm-color-text-secondary); }
.qs-trigger span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-trigger:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }

@media (max-width: 760px) {
  .qs { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .qs-split { grid-template-columns: minmax(0, 1fr); }
  .qs-pv, .qs-foot { display: none; }
  .qs-body { border-right: 0; }
}

:root[data-look="lumen"][data-design] {
  /* Opaque: a blur can't be relied on behind a modal, and see-through results are hard to read. */
  & .qs { border: 1px solid transparent; background: var(--lm-sheen) padding-box, linear-gradient(var(--tm-color-raised), var(--tm-color-raised)) padding-box, var(--lm-rim) border-box; box-shadow: var(--lm-float); }
  & .qs::backdrop { background: rgb(4 5 8 / 0.7); }
  &[data-theme="light"] .qs::backdrop { background: rgb(16 24 40 / 0.35); }
  & :is(.qs-bar, .qs-read, .qs-body, .qs-g + .qs-g, .qs-foot, .qs-facts > div) { border-color: var(--lm-edge); }
  & .qs-o[aria-selected="true"] { background: linear-gradient(90deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.035) 55%, rgb(255 255 255 / 0.01)); }
  &[data-theme="light"] .qs-o[aria-selected="true"] { background: linear-gradient(90deg, rgb(16 24 40 / 0.07), rgb(16 24 40 / 0.02)); }
  & .qs-trigger { background: var(--lk-well); border-color: var(--lm-edge); box-shadow: var(--lm-well-in), 0 1px 0 var(--lm-hi); }
  & .qs kbd { background: var(--lm-key); border-color: var(--lm-edge); }
}

/* Simple version (24 Oct 2026): stocks only, recent searches, no preview. Narrow, as tall as its contents. */
.qs.qs--simple { width: min(620px, calc(100vw - 32px)); height: fit-content; max-height: min(560px, calc(100vh - 14vh - 32px)); }
.qs--simple .qs-body { flex: 1 1 auto; min-height: 0; border-right: 0; padding: 4px 8px 10px; }
.qs--simple .qs-gh { align-items: center; }
.qs--simple .qs-clear { margin: 0; padding: 0; font-size: 12.5px; text-decoration: none; color: var(--tm-color-primary-text); }
.qs--simple .qs-clear:hover { text-decoration: underline; }
.qs-start { margin: 16px 12px 10px; color: var(--tm-color-text-secondary); font-size: 14px; line-height: 1.5; }
.qs-start b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }

/* lab.css */
/* Pattern lab page. Two parts: the lab chrome (bar, stage, notes), and the shell additions that merge into
   components/shell-desktop, shell-phone and shell-pro when the patterns are accepted. */

/* ================= Lab chrome ================= */
html, body { margin: 0; background: var(--tm-color-bg); }
body.tm-root { min-height: 100vh; }
.lab-bar { position: sticky; top: 0; z-index: 50; display: grid; gap: 8px; padding: 6px 16px; background: var(--tm-color-bg); border-bottom: 1px solid var(--tm-color-divider); }
.lab-bar__row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; min-width: 0; }
.lab-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.lab-brand__sub { font-size: 13px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-wip { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--tm-color-warning-tint); color: var(--tm-color-warning); font-size: 12px; font-weight: 500; }
.lab-views { margin-inline: auto; }
.lab-bar__right { display: flex; align-items: center; gap: 8px; }
.lab-ctl { display: flex; align-items: center; gap: 8px; }
.lab-ctl__label { font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-ctl__info { font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; }
.lab-opts { position: relative; }
.lab-opts__panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--lk-r-md, 16px); background: var(--lk-glass, var(--tm-color-raised)); backdrop-filter: blur(16px); box-shadow: var(--lk-float, 0 12px 32px rgb(0 0 0 / 0.4)), 0 0 0 1px var(--tm-color-divider); }
.lab-opts__panel[hidden] { display: none; }
.lab-opts__panel .lab-ctl { justify-content: space-between; gap: 16px; }
@media (max-width: 1100px) { .lab-ctl__info { display: none; } }
.lab-stage { position: relative; margin: 8px 12px 12px; border: 1px solid var(--tm-color-divider); border-radius: 16px; overflow: hidden; background: var(--tm-color-bg); }
#lab-canvas { position: relative; transform-origin: 0 0; overflow: hidden; }
#lab-scroll { height: 100%; overflow: auto; }
.lab-is-phone .lab-stage { border: 0; overflow: visible; background: none; }
.lab-is-phone #lab-scroll { height: auto; overflow: visible; }
.lab-phones { display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding: 8px 0 24px; }
.lab-phone-fig { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lab-phone-fig figcaption { font-size: 13px; color: var(--tm-color-text-secondary); }
.lab-phones .tm-phone { width: var(--lab-phone-w, 390px); max-height: none; }

.lab-notes { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; padding: 20px 24px 32px; box-sizing: border-box; background: var(--tm-color-raised); border-left: 1px solid var(--tm-color-divider); box-shadow: var(--lk-float, 0 12px 32px rgb(0 0 0 / 0.4)); font-size: 14px; line-height: 21px; color: var(--tm-color-text); }
.lab-notes[hidden] { display: none; }
.lab-notes__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lab-notes h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.lab-notes h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; }
.lab-notes p, .lab-notes ul { margin: 6px 0; color: var(--tm-color-text-secondary); }
.lab-notes ul { padding-left: 18px; }
.lab-notes li { margin: 4px 0; }
.lab-notes__lede { color: var(--tm-color-text) !important; }
.lab-notes__foot { margin-top: 20px !important; padding-top: 12px; border-top: 1px solid var(--tm-color-divider); font-size: 13px; }
.lab-notes [data-notes-close] { font-size: 22px; line-height: 1; }

/* ================= Shared blocks used by the shells ================= */
.lab-bhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--tm-space-12); flex-wrap: wrap; }
.lab-bhead h3 { margin: 0; }
.lab-meta { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--tm-density-font-small); color: var(--tm-color-text-secondary); }
.lab-meta b { color: var(--tm-color-text); font-weight: var(--tm-font-weight-medium); }
.lab-chart + .lab-qread { margin-top: var(--tm-space-16); }
.lab-trades { container: lab-trades / inline-size; display: grid; gap: var(--tm-space-12); }
.lab-trades__tabs { grid-column: 1 / -1; }
.lab-trades__tabs > button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.lab-trades__h { display: none; margin-bottom: 6px; font-size: var(--tm-density-font-label); color: var(--tm-color-text-secondary); }
@container lab-trades (width >= 620px) {
  .lab-trades { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--tm-space-24); }
  .lab-trades__tabs { display: none; }
  .lab-trades__pane[hidden] { display: block; }
  .lab-trades__h { display: block; }
}
.lab-more > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.lab-more > summary::-webkit-details-marker { display: none; }
.lab-more > summary > .tm-icon { margin-left: auto; color: var(--tm-color-text-secondary); transition: transform 0.2s; }
.lab-more[open] > summary > .tm-icon { transform: rotate(180deg); }
.lab-more[open] > summary { margin-bottom: var(--tm-space-12); }

/* ================= Desktop Simple with the Markets rail (merges into shell-desktop.css) =================
   Below 1280px the rail is a sheet from the left, opened by the Markets button; from 1280px it is a column
   outside the 1200px content cap. Heights use --tm-vh, which the preview sets to the stage height. */
.tm-dsk__rail-btn { justify-self: start; }
.tm-dsk__rail {
  position: fixed; z-index: calc(var(--tm-z-sheet) + 1); top: 0; left: 0; bottom: 0; width: min(360px, 92%);
  background: var(--tm-color-panel); border-right: 1px solid var(--tm-color-divider); border-radius: 0 var(--lk-r-lg, var(--tm-radius-lg)) var(--lk-r-lg, var(--tm-radius-lg)) 0; overflow: hidden; box-shadow: var(--tm-sheet-shadow);
  transform: translateX(-100%); visibility: hidden; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard), visibility 0s var(--tm-motion-duration-base);
}
.tm-dsk__rail > div { height: 100%; }
.tm-dsk.is-rail-open .tm-dsk__rail { transform: none; visibility: visible; transition: transform var(--tm-motion-duration-base) var(--tm-motion-easing-standard); }
.tm-dsk__rail-scrim { position: fixed; inset: 0; z-index: var(--tm-z-sheet); background: var(--tm-color-scrim); opacity: 0; pointer-events: none; transition: opacity var(--tm-motion-duration-base); }
.tm-dsk.is-rail-open .tm-dsk__rail-scrim { opacity: 1; pointer-events: auto; }
@container tm-dsk (width >= 1280px) {
  /* The rail is pinned to the left edge and widens with the window, from 288px up to 440px; the stock page and
     ticket keep the 1200px content cap and centre in the space that is left. */
  .tm-dsk--rail .tm-dsk__body { display: grid; grid-template-columns: clamp(288px, 22%, 440px) minmax(0, 1fr); }
  .tm-dsk--rail .tm-dsk__rail {
    position: sticky; top: var(--tm-dsk-top); z-index: 1; height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top)); width: auto;
    border-radius: 0; box-shadow: none; transform: none; visibility: visible; transition: none;
  }
  .tm-dsk--rail .tm-dsk__rail-btn, .tm-dsk--rail .tm-dsk__rail-scrim { display: none; }
  .tm-dsk--rail .tm-dsk__nav, .tm-dsk--rail .tm-banner--page, .tm-dsk--rail .tm-dsk__strip { padding-inline: var(--tm-space-24); }
  .tm-dsk--rail .tm-dsk__content { width: 100%; box-sizing: border-box; margin-inline: auto; }
}

/* ================= Phone additions (merge into shell-phone.css) ================= */
.tm-phone__main--rail { display: flex; flex-direction: column; overflow: hidden; }
.tm-phone__main--rail > div { flex: 1; min-height: 0; }
.tm-phone__main--rail .tm-mrail { background: var(--tm-color-bg); }
.tm-phone__main--rail .tm-mrail__title { font-size: var(--tm-type-title-size); line-height: var(--tm-type-title-line); }
.tm-phone__main--rail .tm-mrail__foot { background: var(--tm-color-bg); }
.tm-phone .tm-shead__code { font-size: 22px; }

/* ================= Pro additions (merge into shell-pro.css) ================= */
.lab-canvas-pro, #lab-canvas .tm-pro { height: 100%; }
.lab-fill { height: 100%; }
.tm-pro [data-area="wl"] .tm-panel__body { overflow: hidden; }
.tm-pro .tm-mrail { background: none; }
.lab-pro-chart { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.lab-pro-chart__plot { min-height: 0; height: 100%; }
.tm-pro [data-area="book"] .tm-panel__head .lab-ins-btn[aria-pressed="false"] { opacity: 0.7; }
.tm-pro [data-area="book"] .tm-binsight--pro .tm-book__row:nth-child(n+7) { display: grid; }
@container tm-pro (width < 1280px) { .tm-pro [data-area="book"] .tm-binsight--pro .tm-book__row:nth-child(n+7) { display: none; } }

/* Line chart under a stock header: the header already shows the price, so the chart's readout appears only
   while scrubbing, as a small label over the plot (merges into line-chart.css as an option). */
.lab-chart.tm-lchart { position: relative; }
.lab-chart .tm-lchart__readout { position: absolute; z-index: 2; top: 0; left: 0; display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border-radius: var(--lk-r-xs, 8px); background: var(--lk-glass, var(--tm-color-raised)); box-shadow: 0 0 0 1px var(--tm-color-divider); pointer-events: none; min-height: 0; }
.lab-chart .tm-lchart__readout .tm-price--display { font-size: 15px; line-height: 20px; font-weight: var(--tm-font-weight-semibold); letter-spacing: 0; }
.lab-chart .tm-lchart__readout .tm-change { font-size: var(--tm-density-font-small); }
.lab-chart.tm-lchart:not(:has(.cursor[visibility="visible"])) .tm-lchart__readout { visibility: hidden; }

/* Pro panels whose tabs name the content hide the visible title (it stays as the panel's label). */
.tm-panel.is-tab-titled .tm-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: inset(50%); white-space: nowrap; }
@container tm-pro (width >= 1600px) { .tm-pro [data-area="book"].is-tab-titled .tm-panel__title { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.tm-pro .tm-panel__head .tm-tabs { min-width: 0; }
.lab-ins-btn { flex: none; }
.lab-ins-btn[aria-pressed="true"] { color: var(--tm-color-primary-text); }

/* Market strip under the desktop Simple nav, lined up with the content group. */
.tm-dsk { --tm-dsk-top: calc(64px + var(--tm-dsk-strip, 60px)); }
.tm-dsk__strip { position: sticky; top: 64px; z-index: calc(var(--tm-z-sticky) - 1); height: var(--tm-dsk-strip, 60px); box-sizing: border-box; display: flex; align-items: center; background: var(--tm-color-bg); border-bottom: 1px solid var(--tm-color-divider); padding-inline: var(--tm-layout-gutter-tablet); }
.tm-dsk__strip > .tm-mstrip { flex: 1; min-width: 0; border-bottom: 0; }
@container tm-dsk (width >= 1024px) { .tm-dsk--rail .tm-dsk__content > .tm-side-panel { top: calc(var(--tm-dsk-top) + var(--tm-space-16)); max-height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top) - var(--tm-space-32)); } }
@container tm-dsk (width >= 1024px) { .tm-dsk__strip { padding-inline: var(--tm-layout-gutter-desktop); } }
.tm-mrail__head > .tm-mstrip { margin: -4px calc(-1 * var(--tm-space-16)) 0; padding-inline: var(--tm-space-16); background: none; border-bottom: 0; }
.tm-mrail__head > .tm-mstrip .tm-pulse__item { padding-block: 2px; }

/* Balance in the desktop Simple top bar (moved from the rail footer). The figure is the most prominent thing on
   the right; reserved cash shows on hover and focus; Add funds sits beside it from 1280px. */
.tm-dsk__cash { position: relative; display: flex; align-items: center; gap: var(--tm-space-8); padding-right: var(--tm-space-12); margin-right: var(--tm-space-4); border-right: 1px solid var(--tm-color-divider); }
.tm-dsk__cash-btn { display: grid; justify-items: end; gap: 0; padding: 4px 10px; border: 0; border-radius: var(--lk-r-control, var(--tm-radius-sm)); background: none; color: inherit; font: inherit; cursor: pointer; text-align: right; }
.tm-dsk__cash-btn:hover { background: var(--tm-color-hover); }
.tm-dsk__cash-btn:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.tm-dsk__cash-k { font-size: 12px; line-height: 16px; color: var(--tm-color-text-secondary); }
.tm-dsk__cash-v { font-size: var(--tm-type-subtitle-size); line-height: 22px; font-weight: var(--tm-font-weight-semibold); color: var(--tm-color-text); letter-spacing: -0.01em; }
.tm-dsk__cash-tip { position: absolute; z-index: 5; top: calc(100% + 6px); right: var(--tm-space-12); padding: 6px 10px; border-radius: var(--lk-r-xs, 8px); background: var(--lk-glass, var(--tm-color-raised)); box-shadow: var(--lk-float, 0 8px 24px rgb(0 0 0 / 0.3)), 0 0 0 1px var(--tm-color-divider); font-size: 12px; color: var(--tm-color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; visibility: hidden; pointer-events: none; }
.tm-dsk__cash-btn:hover + .tm-dsk__cash-tip, .tm-dsk__cash-btn:focus-visible + .tm-dsk__cash-tip { opacity: 1; visibility: visible; }
.tm-dsk__addfunds { display: none; }
.tm-dsk__cash-k { display: none; }
@container tm-dsk (width >= 1024px) { .tm-dsk__cash-k { display: block; } }
@container tm-dsk (width >= 1280px) { .tm-dsk__addfunds { display: inline-flex; } }
/* Tablet: the nav is tight, so the balance block and gaps trim a little (value only, no label). */
@container tm-dsk (width < 1024px) {
  .tm-dsk--rail .tm-dsk__nav { gap: var(--tm-space-12); }
  .tm-dsk__cash { padding-right: var(--tm-space-8); margin-right: 0; }
  .tm-dsk__cash-btn { padding: 4px 6px; }
  .tm-dsk__cash-v { font-size: var(--tm-density-font-body); }
}

/* Below 1024px the balance moves from the nav to the row above the stock, next to Search and watchlist. */
.tm-dsk__toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-12); }
.tm-dsk__cash--row { border-right: 0; padding-right: 0; margin-left: auto; }
.tm-dsk__cash--row .tm-dsk__cash-k { display: block; }
.tm-dsk__cash--nav { display: none; }
@container tm-dsk (width >= 1024px) {
  .tm-dsk__cash--nav { display: flex; }
  .tm-dsk__cash--row { display: none; }
}
@container tm-dsk (width >= 1280px) { .tm-dsk--rail .tm-dsk__toprow { display: none; } }

/* Test page bar: the view options sit inline as extra-small controls when the window is wide enough; on narrower
   windows they fold into the View options pop-over. */
.lab-inline { display: none; align-items: center; gap: 12px; }
.lab-inline .lab-ctl { gap: 6px; }
.lab-inline .lab-ctl__label { font-size: 11px; }
.lab-inline .tm-seg button { min-height: 26px; padding: 2px 8px; font-size: 12px; }
@media (min-width: 1720px) {
  .lab-inline { display: flex; }
  .lab-opts { display: none; }
  .lab-ctl__info { display: none; }
}
@media (max-width: 1599px) { .lab-notes-btn > span { display: none; } }
@media (max-width: 899px) { .lab-brand__sub { display: none; } .lab-bar__row { gap: 8px 12px; } }

/* Docked ticket: a snug density between comfortable and compact, so the whole ticket fits more in one fold.
   The ticket's own head names the stock, so the panel title hides once it is docked. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk .tm-dsk__content > .tm-side-panel {
    --tm-density-font-body: 14px; --tm-density-line-body: 20px; --tm-density-font-data: 14px; --tm-density-line-data: 18px;
    --tm-density-font-label: 12px; --tm-density-font-small: 12px; --tm-density-control-height: 40px; --tm-density-control-height-sm: 32px;
    --tm-density-control-height-lg: 44px; --tm-density-control-height-xs: 28px; --tm-density-pad-cell: 12px; --tm-density-pad-panel: 16px;
    --tm-density-gap: 12px; --tm-density-icon: 18px; --tm-density-table-row-height: 36px;
  }
  .tm-dsk .tm-dsk__content > .tm-side-panel .tm-side-panel__head { display: none; }
}

/* From 1024px the ticket is a full-height column pinned to the right edge, mirroring the Markets rail (from 1280px). It widens
   from 360px to 420px; the stock column stays capped (840px plus gutters) and centres between the two rails. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk--rail .tm-dsk__content { max-width: none; margin: 0; padding: 0; column-gap: 0; grid-template-columns: minmax(0, 1fr) clamp(360px, 28%, 420px); }
  .tm-dsk--rail .tm-dsk__col { box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * var(--tm-space-24)); justify-self: center; padding: var(--tm-space-24) var(--tm-space-24) var(--tm-space-48); }
  .tm-dsk--rail .tm-dsk__content > .tm-side-panel { top: var(--tm-dsk-top); height: calc(var(--tm-vh, 100vh) - var(--tm-dsk-top)); max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
}
/* Docked ticket: the Review / Buy button and its note stay pinned at the bottom while the fields scroll. */
@container tm-dsk (width >= 1024px) {
  .tm-dsk .tm-dsk__content > .tm-side-panel .tm-ticket__submit {
    position: sticky; bottom: 0; z-index: 1;
    margin: 0 calc(-1 * var(--tm-density-pad-panel)) calc(-1 * var(--tm-density-pad-panel));
    padding: var(--tm-space-8) var(--tm-density-pad-panel) var(--tm-density-pad-panel);
    background: var(--tm-panel-bg, var(--tm-color-panel)); border-top: 1px solid var(--tm-color-divider);
  }
}

/* Charts never push past their column: the column and the chart grid get a zero minimum, so a chart drawn at an
   older, wider size can shrink and redraw (merges into shell-desktop.css and line-chart.css). */
.tm-dsk__col, .tm-dsk__block { min-width: 0; }
.tm-dsk__col { grid-template-columns: minmax(0, 1fr); }
.tm-lchart { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tm-lchart__plot { min-width: 0; }

/* Desktop Simple ticket: order type as a four-way switch under Buy/Sell; Market shows an estimate instead of a price. */
.tm-ticket__type { display: flex; width: 100%; }
.tm-ticket__type > button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.tm-ticket__type > button:disabled { opacity: 0.45; cursor: not-allowed; }
.tm-ticket__est { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--tm-space-12); align-items: baseline; padding: var(--tm-space-12); border-radius: var(--lk-r-control, var(--tm-radius-sm)); background: var(--tm-color-hover); }
.tm-ticket__est > span:first-child { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-label); }
.tm-ticket__est b { font-weight: var(--tm-font-weight-semibold); font-variant-numeric: tabular-nums; }
.tm-ticket__est .tm-field__hint { grid-column: 1 / -1; }

/* Even 24px margin round the stock column at every width from 1280: the rails take the spare width
   (Markets 22% of the window, 288 to 440px; ticket 28% of the rest, 360 to 420px). The column only centres
   past 1248px wide, on very large screens. */
/* The chart line never draws outside its plot. */
.tm-lchart__plot > svg { overflow: hidden; }
/* Order type labels may wrap onto two lines in Sinhala and Tamil on small phones. */
.tm-ticket__type > button { padding-inline: 4px; }
.lab-more > summary { min-width: 0; }
.lab-more > summary > .tm-icon { flex: none; }
.lab-more > summary .lab-meta { flex-wrap: wrap; min-width: 0; }

/* Embedded in the design system (?embed): only the screen width controls stay in the bar. */
.lab-embed .lab-brand, .lab-embed .lab-views, .lab-embed [data-notes], .lab-embed .lab-bar__right > a,
.lab-embed .lab-ctl:has([data-lab="theme"]), .lab-embed .lab-ctl:has([data-lab="lang"]), .lab-embed .lab-dd:has(#lab-dd-look) { display: none !important; }
.lab-embed .lab-bar__row { justify-content: flex-end; }
.lab-embed .lab-bar__right { margin-left: 0; width: 100%; justify-content: space-between; }
.lab-embed .lab-ctl__info { display: inline !important; }
.lab-embed .lab-inline { display: flex !important; }
.lab-embed .lab-opts { display: none !important; }
.lab-embed .lab-stage { margin: 8px 0 0; }
.lab-embed body, .lab-embed { background: var(--tm-color-bg); }

/* Language rule: controls stay on one line. Closed selects and dropdowns show one line; long explanations live in
   the option list (title plus description) or in the hint below. Tabs and segmented controls use short labels
   ([data-i18n-short]) when the translation is long. */
.tm-select select, .tm-dropdown__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-tabs > button, .tm-seg > button { white-space: nowrap; }

/* No transitions while the page loads. */
.lab-loading *, .lab-loading *::before, .lab-loading *::after { transition: none !important; }

/* ================= Sign-in and first run, and the Compare page (23 Oct 2026, Viky's V2) ================= */
.lab-screen select { min-width: 210px; }
.lab-auth-desk { height: 100%; }
.lab-auth-desk > .lab-auth-host { height: 100%; overflow: auto; }
.lab-auth-desk .tm-auth { min-height: 100%; }
.lab-auth-phone { grid-template-rows: auto minmax(0, 1fr); }
.lab-auth-phone > .lab-auth-host { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.lab-auth-phone .tm-auth { min-height: 100%; }
.lab-home-phone { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.lab-home { display: grid; gap: 20px; padding: 16px; align-content: start; }
.lab-home__value { display: grid; gap: 4px; }
.lab-home__value p { margin: 4px 0 0; }
.lab-home__big { font-size: 32px; line-height: 36px; font-weight: 600; }
.lab-home__list { display: grid; gap: 4px; }
.lab-home__list .tm-subtitle { margin: 0 0 4px; }
.lab-home-dsk { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lab-home-dsk__body { overflow: auto; }
.lab-home-dsk .lab-home { max-width: 720px; margin: 0 auto; padding: 24px; }

.lab-is-doc .lab-stage { border: 0; background: none; overflow: visible; }
.lab-is-doc #lab-scroll { height: auto; overflow: visible; }
.lab-compare { max-width: 1240px; margin: 0 auto; padding: 8px 8px 48px; display: grid; gap: 40px; }
.lab-compare__head h1 { margin: 8px 0 6px; font-size: 24px; line-height: 30px; font-weight: 600; }
.lab-compare__head p { margin: 4px 0; color: var(--tm-color-text-secondary); max-width: 80ch; }
.lab-compare__picks { color: var(--tm-color-text) !important; font-weight: 500; }
.lab-cmp { display: grid; gap: 16px; }
.lab-cmp__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; }
.lab-cmp__head .tm-subtitle { margin: 2px 0 4px; }
.lab-cmp__head p { margin: 0; max-width: 72ch; }
.lab-cmp__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tm-color-hover); font-weight: 600; font-size: 13px; }
.lab-cmp__pick { display: grid; gap: 4px; justify-items: end; }
.lab-cmp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lab-cmp__cols--one { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.lab-cmp__col { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; }
.lab-cmp__col figcaption { font-size: 13px; color: var(--tm-color-text-secondary); }
.lab-cmp__box { padding: 20px; border: 1px solid var(--tm-color-divider); border-radius: var(--lk-r-lg, 16px); background: var(--lk-content, var(--tm-color-panel)); min-width: 0; display: grid; align-content: center; }
.lab-cmp__box:has(> .tm-phone) { justify-items: center; background: none; border-style: dashed; }
.lab-cmp__phone { width: 375px; height: 760px; max-height: none; }
.lab-cmp__panel { display: grid; gap: 16px; align-content: start; }
.lab-cmp__panel .tm-subtitle { margin: 0; }
.lab-cmp__switch > span { display: grid; gap: 2px; }
.lab-cmp__switch b { font-weight: 500; }
.lab-cmp__welcome { display: grid; gap: 8px; padding: 16px; border-radius: var(--lk-r-lg, 16px); background: var(--tm-color-hover); }
.lab-cmp__welcome p { margin: 0; line-height: 1.5; }
.lab-cmp__sec { display: grid; gap: 8px; padding: 12px 0; }
.lab-cmp__sec .tm-subtitle { margin: 0; }
.lab-cmp__note { margin: 0; font-size: 13px; color: var(--tm-color-text-secondary); }
@media (max-width: 900px) { .lab-cmp__cols { grid-template-columns: minmax(0, 1fr); } .lab-cmp__head { grid-template-columns: auto minmax(0, 1fr); } .lab-cmp__pick { grid-column: 1 / -1; justify-items: start; } }
.lab-compare__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.lab-compare__bar .lab-compare__picks { margin: 0; }
.lab-cmp__decided { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--tm-color-text); }
.lab-cmp__decided > .tm-icon { color: var(--tm-color-primary-text); }
.lab-ph-block { display: grid; gap: 8px; padding: 4px 0 12px; }
.lab-ph-block + .lab-ph-block { padding-top: 12px; border-top: 1px solid var(--tm-color-divider); }
.lab-ph-block .tm-subtitle { margin: 0; }

/* Bar dropdowns (Width, Labels, Screen) and the theme icon, 23 Oct 2026: always in the bar, compact. */
.lab-dd { flex: none; gap: 6px; }
.lab-dd .lab-ctl__label { font-size: 11px; }
.lab-dd__sel select { min-height: 30px; height: 30px; padding-block: 0; font-size: 12px; min-width: 0; }
.lab-dd__sel select#lab-dd-w { width: 196px; }
.lab-dd__sel select#lab-dd-lang { width: 104px; }
.lab-dd__sel select#lab-dd-screen { width: 236px; }
.lab-theme { flex: none; }
.lab-bar__right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin-left: auto; }
@media (max-width: 1799px) { .lab-bar__right > .lab-ctl__info { display: none; } }
@media (max-width: 1279px) { .lab-dd .lab-ctl__label { display: none; } }

/* Account menu from the avatar (23 Oct 2026): who is signed in, Switch to Pro or Simple, Help, Sign out. */
.lab-acct { flex: none; }
.lab-acct__btn { border: 0; padding: 0; cursor: pointer; font: inherit; }
.lab-acct__btn:focus-visible { outline: 2px solid var(--tm-color-focus); outline-offset: 2px; }
.lab-acct__menu { min-width: 232px; z-index: 40; }
.lab-acct__who { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--tm-color-divider); margin-bottom: 4px; }
.lab-acct__who b { font-weight: 600; font-size: 14px; }
.lab-acct__who span { font-family: var(--tm-font-family-mono); font-size: 12px; color: var(--tm-color-text-secondary); }
.lab-acct__sep { height: 1px; margin: 4px 0; background: var(--tm-color-divider); }
.lab-welcome { margin-bottom: 16px; }
#lab-ph-rail > .lab-welcome { margin: 12px 16px 4px; }
.lab-dd__sel select#lab-dd-style { width: 200px; }

/* Setup checklist, dropped for the welcome card on 23 Oct 2026; kept for the Compare page only. */
/* Setup checklist: the first-run steps someone skipped, kept on Home until they are done or hidden.
   A count and a bar show progress; each open step has one action. Done steps stay, ticked, so the list
   doesn't jump. */
.tm-checklist { display: grid; gap: var(--tm-space-12); padding: var(--tm-space-16); border: 1px solid var(--tm-color-divider); border-radius: var(--tm-radius-lg); background: var(--tm-color-panel); }
.tm-checklist__head { display: flex; align-items: center; gap: var(--tm-space-8); }
.tm-checklist__title { margin: 0; font-size: var(--tm-density-font-body); font-weight: var(--tm-font-weight-semibold); }
.tm-checklist__count { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); font-feature-settings: var(--tm-font-feature-numbers); }
.tm-checklist__head .tm-btn { margin-left: auto; }
.tm-checklist__bar { height: 4px; border-radius: 2px; background: var(--tm-color-divider); overflow: hidden; }
.tm-checklist__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--tm-color-primary); transition: width var(--tm-motion-duration-base) var(--tm-motion-easing-standard); }
.tm-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-checklist__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--tm-space-12); padding: var(--tm-space-8) 0; min-height: 48px; }
.tm-checklist__item + .tm-checklist__item { border-top: 1px solid var(--tm-color-divider); }
.tm-checklist__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tm-color-border-control); display: grid; place-items: center; }
.tm-checklist__item.is-done .tm-checklist__dot { border-color: var(--tm-color-primary); background: var(--tm-color-primary); color: var(--tm-color-on-primary); }
.tm-checklist__dot > .tm-icon { width: 12px; height: 12px; stroke-width: 2.6; }
.tm-checklist__text { display: grid; gap: 2px; min-width: 0; }
.tm-checklist__text b { font-weight: var(--tm-font-weight-medium); font-size: var(--tm-density-font-body); }
.tm-checklist__text span { color: var(--tm-color-text-secondary); font-size: var(--tm-density-font-small); line-height: 1.45; }
.tm-checklist__item.is-done .tm-checklist__text b { color: var(--tm-color-text-secondary); }

[data-design="instrument"] .tm-checklist { border-radius: var(--lk-r-lg, 20px); border-color: var(--tm-color-divider); }
[data-design="instrument"] .tm-checklist__item.is-done .tm-checklist__dot { background: var(--lk-primary, var(--tm-color-primary)); border-color: var(--lk-primary, var(--tm-color-primary)); color: #fff; }
[data-design="instrument"] .tm-checklist__bar > i { background: var(--lk-primary, var(--tm-color-primary)); }
@supports (corner-shape: squircle) { [data-design="instrument"] .tm-checklist .tm-checklist__dot { corner-shape: round; } }

/* Section switching (24 Oct 2026): new page content rises in; the selected pill slides (view transition). */
.lab-enter { animation: lab-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lab-enter--fade { animation: lab-fade 220ms ease-out both; }
@keyframes lab-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes lab-fade { from { opacity: 0; } }
::view-transition-group(tm-nav-pill) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
/* Page change: the screen itself does not fade (the bar, navigation and labels stay still); only the content area
   cross-fades and the nav pill slides. */
::view-transition-old(root) { animation: none; display: none; }
::view-transition-new(root) { animation: none; }
::view-transition-group(tm-page) { animation-duration: 200ms; }
::view-transition-old(tm-page), ::view-transition-new(tm-page) { animation-duration: 200ms; animation-timing-function: ease-in-out; }
@media (prefers-reduced-motion: reduce) { .lab-enter, .lab-enter--fade { animation: none; } }
/* Labels and Look: tabs from 1600px, dropdowns below (24 Oct 2026). */
.lab-wide, .lab-narrow { display: contents; }
@media (max-width: 1599px) { .lab-wide { display: none; } }
@media (min-width: 1600px) { .lab-narrow { display: none; } }
.lab-embed .lab-wide { display: none !important; }
/* Bar tabs (Labels, Look) at the dropdowns' size (24 Oct 2026). */
#lab-bar .tm-seg, :root[data-look][data-design] #lab-bar .tm-seg { padding: 2px; min-height: 0; }
#lab-bar .tm-seg button, :root[data-look][data-design] #lab-bar .tm-seg button { min-height: 26px; padding: 3px 10px; font-size: 12.5px; line-height: 1.2; }