/* 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/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. 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; }

/* ---- 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; }

/* ---- 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; }

/* ---- 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/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); }
}

/* ---- 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; }