@tradecanvas/chart 2.0.5 → 2.1.1

package/dist/widget/index.js

@@ -1,12 +1,12 @@
-import { _ as e, a as t, c as n, d as r, f as i, h as a, i as o, l as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m, v as ee } from "../LayoutSession-CBhEZlOj.js";
+import { _ as e, a as t, c as n, d as r, f as i, h as a, i as o, l as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m, v as ee } from "../LayoutSession-DHPcgkw6.js";
 import { _ as h, b as g, g as te, h as _, l as v, m as ne, n as re, t as ie, v as ae, y as oe } from "../widgetLocales-BX7VRdl5.js";
 import { t as se } from "../monthView-N8yDaTqZ.js";
 import { a as ce, c as le, d as ue, f as de, i as fe, l as pe, n as me, o as y, r as he, s as ge, t as _e, u as ve } from "../widgetFeatures-BM6u0u74.js";
 import { a as b, c as ye, i as x, l as be, n as xe, o as Se, r as Ce, s as we } from "../focusTrap-Br9Zfje0.js";
 import { a as Te, d as S, i as Ee, l as De, n as Oe, o as ke, r as Ae, s as je, t as Me, u as Ne } from "../symbolCatalog-B_9kDAjE.js";
 import { a as Pe, c as Fe, f as C, u as Ie } from "../settingsControls-DIjzCFHI.js";
-import { a as Le, c as Re, i as ze, n as Be, o as Ve, r as w, s as He, t as T } from "../i18n-COYPJUtF.js";
-import { r as Ue } from "../indicatorInputWords-DFmWy8Ah.js";
+import { a as Le, c as Re, i as ze, n as Be, o as Ve, r as w, s as He, t as T } from "../i18n-kIZPrAaD.js";
+import { r as Ue } from "../indicatorInputWords-CaDGFQbW.js";
 import { t as We } from "../platformKeys-Dd1qOCjF.js";
 import { CHART_SPACING as Ge, CHART_STYLE_KEYS as Ke, DARK_THEME as qe, FIGURES_FONT_FAMILY as Je, LIGHT_THEME as Ye, MAX_PRICE_DECIMALS as Xe, PHI as Ze, SANS_FONT_FAMILY as Qe, barTimeUnit as E, evenPx as $e, formatPrice as et, formatVolumeLoc as tt, indicatorSource as nt, isTimeFrame as rt, isValidTimeZone as it, marketStatus as at, offsetAt as ot, ownFillColor as st, parseIndicatorSource as ct, phiStep as lt, readChartStyleOverrides as ut, readChartTypeOptions as dt, readIndicatorPlotStyles as ft, readNews as pt, readQuote as mt, resampleBars as ht, sanitizeDrawingStyle as gt, smallValueDecimals as _t, stepDecimals as vt, symbolTimeZone as yt, tickBarCount as D, tickerOf as O, timeParts as bt, timeframeFollowsDays as xt, timeframeToMs as k, tzLabel as St, wallToUtc as Ct, zoneOffsetMinutes as wt, zonedDateFormatter as Tt } from "@tradecanvas/commons";
 import { ChartStateManager as Et, MAX_ALERT_BARS as Dt, MIN_ALERT_BARS as Ot, RANGE_PRESETS as kt, ResamplingAdapter as At, SYMBOL_INDICATOR_IDS as jt, adapterFromFeed as Mt, indicatorCategory as Nt, indicatorValuePrecision as Pt, isCrosshairCursor as Ft, plotColor as It, plotShown as Lt, rangePresetStart as Rt, servesTimeframe as zt, sourceParam as Bt, withResampling as A } from "@tradecanvas/core";
@@ -277,7 +277,7 @@ function en(e, t) {
 }
 //#endregion
 //#region src/widget/WidgetStyles.css?raw
-var tn = "/* === TradeCanvas Widget — Premium Styles === */\n\n/*\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\n * so it never touches the host page.\n */\n[class^=\"tcw-\"][hidden],\n[class*=\" tcw-\"][hidden] {\n  display: none !important;\n}\n\n/* Control tooltips (WidgetTooltip): quick to appear, slide in from the control. */\n.tcw-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 60;\n  max-width: 240px;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  box-shadow: var(--tcw-tooltip-shadow);\n  width: max-content;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(var(--tcw-tip-dx, 0), var(--tcw-tip-dy, 0));\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s linear 110ms;\n}\n\n.tcw-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s;\n}\n\n/* The modal portal: carries the tokens and fonts, but no box of its own. */\n.tcw-root.tcw-portal {\n  display: contents;\n}\n\n/* Fullscreen: the root fills the screen; the chart resizes with it. */\n.tcw-root:fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: var(--tcw-font);\n  font-feature-settings: var(--tcw-font-features);\n  font-size: var(--tcw-font-size);\n  line-height: var(--tcw-line-height);\n  color: #e6e3dc;\n  background: #131416;\n  font-variant-numeric: tabular-nums;\n  position: relative;\n  /* Clipped, not hidden: a box that hides its overflow still scrolls to what the keyboard lands on\n     past its edge, and the whole widget slid aside until the next resize. Hidden where clip is unknown. */\n  overflow: hidden;\n  overflow: clip;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) ---\n   * Print at night: warm ink on an off-black, never pure white on black, so\n   * text doesn't glare. Grey for everything that is normal; colour only where\n   * it means something. */\n  --tcw-bg: #131416;\n  --tcw-bg-surface: #131416;\n  --tcw-bg-elevated: #1b1c1f;\n  --tcw-bg-overlay: rgba(19, 20, 22, 0.6);\n  --tcw-border: #2a2b2f;\n  --tcw-border-strong: #3a3b40;\n  /* Tooltips are the ink turned over: light on the dark ground. */\n  --tcw-tooltip-bg: #e6e3dc;\n  --tcw-tooltip-fg: #131416;\n  --tcw-text: #e6e3dc;\n  --tcw-text-dim: #a9a6a0;\n  --tcw-text-muted: #918f8a;\n\n  /* Ink blue: links, focus and what you picked. --tcw-accent-ink is the text colour on an accent fill. */\n  --tcw-accent: #7d9bff;\n  --tcw-accent-hover: #98b0ff;\n  --tcw-accent-ink: #131416;\n  --tcw-accent-soft: rgba(125, 155, 255, 0.14);\n  --tcw-accent-glow: rgba(125, 155, 255, 0.22);\n  --tcw-accent-line: rgba(125, 155, 255, 0.55);\n\n  --tcw-red: #e2706b;\n  --tcw-red-soft: rgba(226, 112, 107, 0.12);\n  --tcw-green: #4fae8a;\n  --tcw-green-soft: rgba(79, 174, 138, 0.12);\n\n  /* The kinds of symbol in the symbol search (stock, futures, index, crypto, forex): hues as far\n   * from the accent's blue and the up and down green and red as from each other (0.11 in OKLab at\n   * the least, where 0.02 is a step the eye just sees), so a badge is never taken for the chart's\n   * symbol, a match or a move; each readable on a tint of itself, on the selected row too. */\n  --tcw-kind-1: #4cbedf;\n  --tcw-kind-2: #e8a144;\n  --tcw-kind-3: #ca8cff;\n  --tcw-kind-4: #f387c1;\n  --tcw-kind-5: #a5c45d;\n\n  --tcw-hover-bg: rgba(230, 227, 220, 0.06);\n  --tcw-active-bg: rgba(230, 227, 220, 0.1);\n  --tcw-divider: rgba(230, 227, 220, 0.07);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Spacing: Fibonacci numbers on a 4px grid (4, 8, 12, 20, 32), with 2 and 6 under them. Every\n   * step is even, so what a gap or a padding centres lands on a whole pixel. The classic and\n   * compact densities set the plain Fibonacci numbers (2, 3, 5, 8, 13, 21, 34) inline. */\n  --tcw-space-1: 2px;\n  --tcw-space-2: 4px;\n  --tcw-space-3: 6px;\n  --tcw-space-4: 8px;\n  --tcw-space-5: 12px;\n  --tcw-space-6: 20px;\n  --tcw-space-7: 32px;\n  /* The room inside a control beside its label, a bar beside its first button, a menu row beside its text. */\n  --tcw-control-pad: 12px;\n  --tcw-bar-pad: 12px;\n  --tcw-menu-row-pad: 12px;\n  /* What a gap of 8 gives back in the classic and compact densities, where it was 7: 1px there, nothing here. */\n  --tcw-odd: 0px;\n  /* A line of body text: 18px at 13px, an even height that centres on whole pixels. */\n  --tcw-line-height: 1.38462;\n  /* An on-chart indicator row's line, on the plot and in a pane. */\n  --tcw-legend-line: 20px;\n  --tcw-legend-line-pane: 16px;\n  /* A line of the smallest type, an even height too. */\n  --tcw-line-xs: 14px;\n  /* The bars' text buttons: as wide as their text, rounded up to a whole pixel. */\n  --tcw-text-w: calc-size(max-content, round(up, size, 1px));\n\n  /* The look (UI system): Print's values. The `ui` option sets them inline. */\n  --tcw-radius-xs: 1px;\n  --tcw-radius-sm: 2px;\n  --tcw-radius: 3px;\n  --tcw-radius-lg: 5px;\n  --tcw-radius-xl: 8px;\n  --tcw-control-radius: var(--tcw-radius);\n  --tcw-input-radius: var(--tcw-radius);\n  --tcw-menu-radius: var(--tcw-radius-lg);\n  --tcw-dialog-radius: var(--tcw-radius-xl);\n  --tcw-panel-radius: var(--tcw-radius-lg);\n  --tcw-tooltip-radius: var(--tcw-radius-sm);\n  --tcw-tag-radius: var(--tcw-radius-sm);\n  --tcw-toast-radius: var(--tcw-radius-lg);\n  --tcw-toolbar-radius: 0px;\n  --tcw-sidebar-radius: 0px;\n  --tcw-toolbar-h: 42px;\n  --tcw-control-h: 34px;\n  --tcw-control-h-sm: 26px;\n  --tcw-icon: 20px;\n  --tcw-sidebar-w: 42px;\n  --tcw-tool-h: 36px;\n  --tcw-tool-icon: 26px;\n  --tcw-menu-item-h: 34px;\n  --tcw-icon-stroke: 1px;\n  --tcw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --tcw-font-size: 13px;\n  --tcw-font-size-sm: 11px;\n  --tcw-font-size-xs: 10px;\n  --tcw-font-size-lg: 15px;\n  --tcw-font-size-xl: 18px;\n  --tcw-font-size-display: 21px;\n  --tcw-weight: 400;\n  --tcw-weight-strong: 500;\n  --tcw-label-case: none;\n  --tcw-label-tracking: 0em;\n  --tcw-label-size: 11px;\n  --tcw-border-w: 1px;\n  --tcw-sep-w: 1px;\n  --tcw-menu-shadow: 0 0 0 1px var(--tcw-divider), var(--tcw-shadow-lg);\n  --tcw-dialog-shadow: 0 0 0 1px var(--tcw-divider), var(--tcw-shadow-lg);\n  --tcw-tooltip-shadow: var(--tcw-shadow-sm);\n  --tcw-blur: 0px;\n  --tcw-surface-opacity: 100%;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(125, 155, 255, 0.5);\n\n  /* Type */\n  --tcw-font-mono: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  /* The faces as drawn: a tag means something else in each face (in IBM Plex, ss01 is a one-storey a).\n   * The `ui` option never sets it, so a rule of yours on .tcw-root turns on your face's own. */\n  --tcw-font-features: normal;\n}\n\n/*\n * A button that is as wide as its text is a fraction of a pixel wide, and every icon after it on\n * the bar then sits on a fraction too, its lines soft. The bars' text buttons are a whole number\n * of pixels wide (--tcw-text-w) where the browser can size a box from its content and round it;\n * where it can't, the value is no width at all and they stay as wide as their text. No\n * specificity, so any width a rule sets wins. The classic and compact densities set it to auto.\n */\n:where(.tcw-toolbar-symbol, .tcw-toolbar .tcw-btn, .tcw-toolbar .tcw-dropdown-trigger, .tcw-range-btn, .tcw-status-clock, .tcw-status-scale-btn) {\n  width: var(--tcw-text-w, auto);\n}\n\n/* Print by day: ink on paper. */\n.tcw-root[data-tcw-theme='light'] {\n  color: #1b1d21;\n  background: #fbfaf6;\n\n  --tcw-bg: #fbfaf6;\n  --tcw-bg-surface: #fbfaf6;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(251, 250, 246, 0.8);\n  --tcw-border: #dcd8cf;\n  --tcw-border-strong: #c7c2b7;\n  --tcw-tooltip-bg: #1b1d21;\n  --tcw-tooltip-fg: #fbfaf6;\n  --tcw-text: #1b1d21;\n  --tcw-text-dim: #4a4e57;\n  --tcw-text-muted: #6a6e75;\n\n  /* A deeper ink blue: readable as text on paper, white text readable on it. */\n  --tcw-accent: #2348c4;\n  --tcw-accent-hover: #1b3a9f;\n  --tcw-accent-ink: #ffffff;\n  --tcw-accent-soft: rgba(35, 72, 196, 0.1);\n  --tcw-accent-glow: rgba(35, 72, 196, 0.16);\n  --tcw-accent-line: rgba(35, 72, 196, 0.45);\n  --tcw-ring: 0 0 0 2px rgba(35, 72, 196, 0.4);\n\n  /* Darker semantic colours: used as text on paper. */\n  --tcw-red: #b8423f;\n  --tcw-red-soft: rgba(184, 66, 63, 0.1);\n  --tcw-green: #1f7a5c;\n  --tcw-green-soft: rgba(31, 122, 92, 0.1);\n\n  /* The same hues, deep enough to read on paper. */\n  --tcw-kind-1: #06596e;\n  --tcw-kind-2: #855402;\n  --tcw-kind-3: #8238b2;\n  --tcw-kind-4: #a12673;\n  --tcw-kind-5: #415500;\n\n  --tcw-hover-bg: rgba(27, 29, 33, 0.05);\n  --tcw-active-bg: rgba(27, 29, 33, 0.08);\n  --tcw-divider: #e7e3da;\n\n  /* Warm shadows, as paper casts. */\n  --tcw-shadow-sm: 0 1px 2px rgba(40, 34, 22, 0.06);\n  --tcw-shadow-md: 0 4px 12px rgba(40, 34, 22, 0.08), 0 1px 3px rgba(40, 34, 22, 0.05);\n  --tcw-shadow-lg: 0 12px 36px rgba(40, 34, 22, 0.13), 0 4px 12px rgba(40, 34, 22, 0.07);\n  --tcw-shadow-xl: 0 24px 64px rgba(40, 34, 22, 0.17), 0 12px 24px rgba(40, 34, 22, 0.09);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 var(--tcw-bar-pad);\n  height: var(--tcw-toolbar-h);\n  border-bottom: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n}\n\n.tcw-toolbar-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  display: inline-flex;\n  align-items: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* With the symbol search switched off, the button only names the symbol. */\n.tcw-toolbar-symbol[aria-disabled=\"true\"] {\n  cursor: default;\n}\n\n.tcw-toolbar-symbol[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n/* With everything folded and still no room (a long ticker on a phone), the ticker is cut short so\n   \"more\" stays on the bar (`data-tcw-squeeze`). The button shows the ticker alone: a venue before it\n   (\"HYPERLIQUID:xyz:\") is the legend's and the tooltip's to name. */\n.tcw-toolbar[data-tcw-squeeze='cut'] > .tcw-toolbar-symbol {\n  min-width: 0;\n}\n\n.tcw-toolbar[data-tcw-squeeze='cut'] .tcw-toolbar-ticker {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-toolbar-sep {\n  width: var(--tcw-sep-w);\n  /* A button's height over phi: the rule stands as tall as the icons beside it. */\n  height: calc(var(--tcw-control-h) / 1.618);\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 var(--tcw-space-3);\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding: 0 var(--tcw-space-2);\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-badge-count {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px var(--tcw-space-3);\n  border-radius: var(--tcw-tag-radius);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The arrow after a label keeps to the button's far edge, on a whole pixel: a label is a fraction wide. */\n.tcw-dropdown-trigger > svg:last-child:not(:first-child) {\n  margin-inline-start: auto;\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 50;\n  width: max-content;\n  max-width: min(340px, calc(100vw - 16px));\n  padding: var(--tcw-menu-pad);\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: start;\n  border-radius: var(--tcw-menu-item-radius);\n  gap: var(--tcw-space-5);\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* A menu row led by an icon (chart types): icon then label, not spread apart. */\n.tcw-dropdown-item--icon {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-dropdown-item svg,\n.tcw-flyout-item svg {\n  flex-shrink: 0;\n}\n\n/* The drawing-group button's icon holder: a plain box for the swapped SVG. */\n.tcw-sidebar-icon {\n  display: inline-flex;\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* Timeframe menu: pick on the left, pin (star) on the right. */\n.tcw-tf-more {\n  padding: 0 var(--tcw-space-3);\n}\n\n.tcw-tf-more svg {\n  display: block;\n}\n\n.tcw-tf-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.tcw-tf-row .tcw-dropdown-item {\n  flex: 1;\n  min-width: 0;\n}\n\n.tcw-tf-star {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-star:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-tf-star.tcw-active {\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-star.tcw-active svg {\n  fill: currentColor;\n}\n\n.tcw-tf-star:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-tf-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-row:hover .tcw-tf-remove,\n.tcw-tf-remove:focus-visible {\n  opacity: 1;\n}\n\n/* No hover on touch screens: keep it visible rather than a hidden tap target. */\n@media (hover: none) {\n  .tcw-tf-remove { opacity: 1; }\n}\n\n.tcw-tf-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-tf-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* Typed interval, under the list: stays in view while the list scrolls. Out to the menu's edges over\n   its padding, and no further: past them, the menu scrolled a few px both ways. */\n.tcw-tf-custom {\n  position: sticky;\n  bottom: calc(-1 * var(--tcw-menu-pad));\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 4px calc(-1 * var(--tcw-menu-pad)) calc(-1 * var(--tcw-menu-pad));\n  padding: 6px calc(var(--tcw-menu-pad) + 4px) 8px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-elevated);\n}\n\n.tcw-tf-custom-hint:empty {\n  display: none;\n}\n\n.tcw-tf-custom-hint {\n  flex-basis: 100%;\n  width: 0;\n  min-width: 100%;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n}\n\n.tcw-tf-custom-input {\n  flex: 1;\n  /* Fills the row: its own width would follow the font (16px on touch). */\n  width: 0;\n  min-width: 0;\n  height: 26px;\n  padding: 0 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-tf-custom-input::placeholder {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-tf-custom-input:focus {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n\n.tcw-tf-custom-input[aria-invalid='true'] {\n  border-color: var(--tcw-red);\n  box-shadow: 0 0 0 2px var(--tcw-red-soft);\n}\n\n.tcw-tf-custom-add {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-tf-custom-add:hover {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-custom-add:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: 1px;\n}\n\n.tcw-dropdown-label {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === History pill (older bars loading at the left edge) === */\n\n.tcw-history-pill {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  z-index: 4;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-shadow-sm);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-history-pill--hidden {\n  opacity: 0;\n}\n\n.tcw-history-pill--error {\n  border-color: color-mix(in srgb, var(--tcw-red) 45%, var(--tcw-border));\n  color: var(--tcw-red);\n}\n\n.tcw-history-spinner {\n  width: 10px;\n  height: 10px;\n  border: 1.5px solid var(--tcw-accent-soft);\n  border-top-color: var(--tcw-accent);\n  border-radius: 50%;\n  animation: tcw-history-spin 0.8s linear infinite;\n}\n\n.tcw-history-pill--error .tcw-history-spinner {\n  border-color: currentColor;\n  animation: none;\n}\n\n@keyframes tcw-history-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* === Loading overlay (candle skeleton) === */\n\n.tcw-loading-overlay {\n  /* Uses a modifier class rather than the `hidden` attribute — the global\n     `[hidden] { display: none !important }` rule above would cut the\n     opacity transition off before it can play. */\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-loading-overlay--hidden {\n  opacity: 0;\n}\n\n/* A slow switch: the previous chart stays underneath, lightly dimmed and blurred, so the click\n   visibly registered without blanking the screen; the candles stand on it with no panel. */\n.tcw-loading-overlay--veil {\n  background: color-mix(in srgb, var(--tcw-bg) 45%, transparent);\n  -webkit-backdrop-filter: blur(3px);\n  backdrop-filter: blur(3px);\n}\n\n.tcw-loading-candles {\n  position: relative;\n  display: flex;\n  gap: 7px;\n  height: 64px;\n}\n\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\n.tcw-loading-candle {\n  position: relative;\n  width: 8px;\n  height: 100%;\n  color: var(--tcw-red);\n  opacity: 0.28;\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\n  animation-delay: var(--tcw-delay, 0ms);\n}\n\n.tcw-loading-candle--up { color: var(--tcw-green); }\n\n.tcw-loading-candle::before,\n.tcw-loading-candle::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  background: currentColor;\n  transform: translateX(-50%);\n}\n\n.tcw-loading-candle::before {\n  top: var(--tcw-wick-top);\n  width: 1.5px;\n  height: var(--tcw-wick-h);\n}\n\n.tcw-loading-candle::after {\n  top: var(--tcw-body-top);\n  width: 8px;\n  height: var(--tcw-body-h);\n  border-radius: 1.5px;\n}\n\n/* Each candle brightens and lifts slightly in turn, left to right. */\n@keyframes tcw-candle-light {\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\n  20% { opacity: 1; transform: translateY(-2px); }\n}\n\n/* The status text is announced, not shown — the candles say \"loading\". */\n.tcw-loading-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.tcw-loading-overlay--error .tcw-loading-candles {\n  display: none;\n}\n\n/* A failure is shown: why the chart is empty and that a retry is running. */\n.tcw-loading-overlay--error .tcw-loading-label {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n  white-space: normal;\n  max-width: 320px;\n  text-align: center;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size);\n}\n\n/* Over a veiled chart the message gets a plate of its own: red text straight on candles and\n   gridlines that are only dimmed would be hard to read. */\n.tcw-loading-overlay--veil.tcw-loading-overlay--error .tcw-loading-label {\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  box-shadow: var(--tcw-shadow-md);\n}\n\n/* Reduced motion: nothing slides or lifts, but the candles still glow in\n   turn, so the wait never looks frozen. */\n@media (prefers-reduced-motion: reduce) {\n  .tcw-loading-candle {\n    animation: tcw-candle-glow 2.4s ease-in-out infinite;\n    animation-delay: var(--tcw-delay, 0ms);\n  }\n}\n\n@keyframes tcw-candle-glow {\n  0%, 60%, 100% { opacity: 0.28; }\n  25% { opacity: 0.9; }\n}\n\n/* === On-chart indicator legend (WidgetIndicatorLegend) === */\n\n.tcw-ind-legend {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: calc(100% - 140px);\n  pointer-events: none;\n}\n\n.tcw-ind-legend--collapsed > .tcw-ind-legend-row {\n  display: none;\n}\n\n.tcw-ind-legend-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  max-width: 100%;\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-radius-sm);\n  /* The figures face at the size of the price legend above: one block, columns that line up. */\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  line-height: var(--tcw-legend-line);\n  white-space: nowrap;\n  color: var(--tcw-text-dim);\n  /* A see-through ground, as under the price legend's rows: lines across the plot run\n     behind the text. A host sets --tcw-legend-ground (transparent: none). */\n  background: var(--tcw-legend-ground, color-mix(in srgb, var(--tcw-bg) 72%, transparent));\n  pointer-events: auto;\n  cursor: default;\n  /* A narrow pane: the values shrink first, then the row is clipped. */\n  overflow: hidden;\n}\n\n/* A pane's indicator: at the top of its pane, where the canvas title was,\n   short enough to sit in the pane's header below the divider's grab zone. */\n.tcw-ind-legend-row--pane {\n  position: absolute;\n  z-index: 3;\n  line-height: var(--tcw-legend-line-pane);\n}\n\n.tcw-ind-legend-row:hover,\n.tcw-ind-legend-row:focus-within {\n  background: color-mix(in srgb, var(--tcw-bg-elevated) 90%, transparent);\n  box-shadow: 0 0 0 1px var(--tcw-border);\n}\n\n.tcw-ind-legend-name {\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-name:hover {\n  color: var(--tcw-accent);\n}\n\n/* A compared symbol's name opens nothing. */\n.tcw-ind-legend-row--compare .tcw-ind-legend-name,\n.tcw-ind-legend-row--compare .tcw-ind-legend-name:hover {\n  color: var(--tcw-text);\n  cursor: default;\n}\n\n/* The values are one line of text: a narrow chart cuts the line, so the values\n   before the cut stay whole and the one it falls in ends in an ellipsis. Values\n   shrinking each on its own cut them all at once. */\n.tcw-ind-legend-values {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ind-legend-values > * + * {\n  margin-inline-start: var(--tcw-space-4);\n}\n\n/* Too narrow for a digit and an ellipsis (Bollinger's on a 320 phone, 6 px beside the buttons), the\n   values would show a sliver: they hide, keeping their room so they come back with it, and the name\n   reads alone. */\n.tcw-ind-legend-values--no-room {\n  visibility: hidden;\n}\n\n/* A compare's line colour, as a short stroke of it before the name. */\n.tcw-ind-legend-swatch {\n  flex: none;\n  align-self: center;\n  width: 10px;\n  height: 3px;\n  margin-inline-end: var(--tcw-space-2);\n  border-radius: 1px;\n}\n\n.tcw-ind-legend-row--hidden .tcw-ind-legend-swatch,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-name,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-values {\n  opacity: 0.45;\n}\n\n/* Show / settings / remove: on hover or keyboard focus (always on touch). Out of sight, not out of the\n   page, so Tab reaches them in a row with nothing else to focus (a compare's) and a screen reader finds\n   them; a button focused shows them all. */\n.tcw-ind-legend-actions {\n  display: inline-flex;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  gap: 1px;\n  margin-left: -2px;\n}\n\n.tcw-ind-legend-row:hover .tcw-ind-legend-actions,\n.tcw-ind-legend-row:focus-within .tcw-ind-legend-actions {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n}\n\n@media (hover: none) {\n  .tcw-ind-legend-actions {\n    position: static;\n    width: auto;\n    height: auto;\n    overflow: visible;\n    clip-path: none;\n  }\n\n  /* Finger-sized targets. */\n  .tcw-ind-legend-act,\n  .tcw-ind-legend-toggle {\n    min-width: 28px;\n    min-height: 24px;\n  }\n}\n\n.tcw-ind-legend-act {\n  display: inline-grid;\n  place-items: center;\n  width: 20px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-act:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-act[data-act='remove']:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ind-legend-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  margin-top: 1px;\n  padding: 1px var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.tcw-ind-legend-toggle[hidden] {\n  display: none;\n}\n\n.tcw-ind-legend-toggle:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-name:focus-visible,\n.tcw-ind-legend-act:focus-visible,\n.tcw-ind-legend-toggle:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* === Sidebar === */\n\n/* The drawing tools' button and icon as drawn (the dock's rail has the same): never wider than\n   their column less 3 px a side (a narrow `sizes.sidebar` of yours shrinks them), nor taller\n   than a short column leaves room for (`--tcw-tool-fit`, set by toolFit.ts on the column); the\n   icon at most four fifths of its button, as a compact look's 16 in 20. */\n.tcw-root, .tcw-sidebar {\n  --tcw-tool-size: min(var(--tcw-tool-h), calc(var(--tcw-sidebar-w) - 6px), var(--tcw-tool-fit, 999px));\n  --tcw-tool-icon-size: min(var(--tcw-tool-icon), calc(var(--tcw-tool-size) * 0.8));\n}\n\n.tcw-sidebar {\n  width: var(--tcw-sidebar-w);\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-end: var(--tcw-border-w) solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* The buttons' own 1px margins at its ends make up the rest of the gap: as tall as its tools,\n     768 px high in the Print look, it doesn't scroll by those 2 px. */\n  padding: calc(var(--tcw-space-3) - 1px) 0;\n  /* On a short screen the tools scroll; the menus sit outside it. */\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.tcw-sidebar::-webkit-scrollbar {\n  display: none;\n}\n.tcw-sidebar > * {\n  flex-shrink: 0;\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n  /* The column's width, its button centred: the pointer on its way to the menu, which opens at\n     the column's edge, stays over the group the whole way. */\n  align-self: stretch;\n  display: flex;\n  justify-content: center;\n}\n\n/* The cursor button and its menu, as a drawing group's. */\n.tcw-cursor-wrap {\n  position: relative;\n  align-self: stretch;\n  display: flex;\n  justify-content: center;\n}\n\n.tcw-sidebar-btn {\n  width: var(--tcw-tool-size);\n  height: var(--tcw-tool-size);\n  margin: 1px 0;\n  /* The browser's button padding squeezed a glyph set straight in it (the cursor's) under its size. */\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-control-radius);\n}\n\n.tcw-sidebar-btn svg {\n  flex: none;\n  width: var(--tcw-tool-icon-size);\n  height: var(--tcw-tool-icon-size);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-on-icon-fg);\n  background: var(--tcw-on-icon-bg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n/* A group with more tools: a small triangle in the very corner of its button, pointing out. Not a\n   dot, which the drawing tools' icons use for their anchors, and away from the icon, so it doesn't\n   read as part of the tool. Right to left it sits in the other corner. */\n.tcw-multi-dot {\n  position: absolute;\n  inset-block-end: 1px;\n  inset-inline-end: 1px;\n  width: 5px;\n  height: 5px;\n  clip-path: polygon(100% 0, 100% 100%, 0 100%);\n  background: var(--tcw-text-muted);\n  opacity: 0.8;\n}\n[dir='rtl'] .tcw-multi-dot {\n  clip-path: polygon(0 0, 100% 100%, 0 100%);\n}\n\n/* The drawing tools' sections: always a hairline (it groups the tools), even in\n   looks that drop the rules between toolbar groups. */\n.tcw-sidebar-divider {\n  width: calc(var(--tcw-tool-size) * 0.618);\n  height: max(1px, var(--tcw-sep-w));\n  background: var(--tcw-divider);\n  margin: var(--tcw-space-3) 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 30;\n  padding: var(--tcw-menu-pad);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n/* Spans the gap to the toolbar button: crossing it stays inside the menu. */\n.tcw-flyout::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  right: 100%;\n  width: 8px;\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A kind's name in a menu of several, set as a menu's own name is. */\n.tcw-flyout-heading {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A hairline over each kind but the first sets them apart. */\n.tcw-flyout-row + .tcw-flyout-heading {\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n}\n\n.tcw-flyout-hint {\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-flyout-item {\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: none;\n  background: transparent;\n  text-align: start;\n  font-family: inherit;\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-flyout-item:focus-visible {\n  outline: none;\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(12, 12, 10, 0.42);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* A text drawing's words typed in place, over its box on the chart; under any dialog. */\n.tcw-inline-text {\n  position: fixed;\n  inset: 0;\n  z-index: 90;\n  pointer-events: none;\n}\n.tcw-inline-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  outline: none;\n  overflow: hidden;\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  pointer-events: auto;\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-dialog-radius);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  max-height: 82dvh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-dialog-shadow);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* A dialog's title is phi times its text (21 to 13). */\n.tcw-modal-header h3 {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n/* The close sized from the title, so it holds its own beside it in every look: its target phi times\n   the title (34 at 21), its icon root phi of it (27), whose cross, half the icon's grid, is about the\n   title's capitals, its stroke near 2 px. At 16 the cross was 8 px of 1.2 px lines under a 21 px title.\n   The negative margins keep the header as tall as before and the cross's edge at the text's edge. */\n.tcw-modal-close {\n  --tcw-close-box: calc(var(--tcw-font-size-display) * 1.618);\n  --tcw-close-icon: calc(var(--tcw-font-size-display) * 1.272);\n  flex: none;\n  width: var(--tcw-close-box);\n  height: var(--tcw-close-box);\n  margin-block: calc((var(--tcw-close-box) - var(--tcw-font-size-display) * 1.2) / -2);\n  margin-inline-end: calc((var(--tcw-close-box) - var(--tcw-close-icon) / 2) / -2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* A whole, even box where the browser can round one: 34, not 33.98, so the cross is centred on whole pixels. */\n@supports (width: round(nearest, 1px, 2px)) {\n  .tcw-modal-close {\n    --tcw-close-box: round(nearest, calc(var(--tcw-font-size-display) * 1.618), 2px);\n  }\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-close:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-close svg {\n  width: var(--tcw-close-icon);\n  height: var(--tcw-close-icon);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  /* Four tabs in a long language on a phone: they wrap rather than clip. No overflow here: in the\n     dialog's column it would let a long body squash the tabs, and clip the underline of the active one. */\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  gap: var(--tcw-space-2);\n  padding: var(--tcw-tabs-pad-block) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  flex-shrink: 0;\n  white-space: nowrap;\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: var(--tcw-tab-line) solid transparent;\n  border-radius: var(--tcw-tab-radius);\n  margin-bottom: calc(var(--tcw-tab-line) / -2);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-tab-hover);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-modal-body {\n  padding: var(--tcw-space-6);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: var(--tcw-space-6);\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: var(--tcw-label-size);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-bottom: var(--tcw-space-4);\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-4) 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* A number field's hint goes on a line of its own, under the field. */\n.tcw-settings-row--number {\n  flex-wrap: wrap;\n}\n\n.tcw-settings-hint {\n  flex-basis: 100%;\n  padding-top: var(--tcw-space-2);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n  text-align: end;\n}\n\n/* Empty, it takes no room but stays rendered: a live region that appears with its text is often not read out. */\n.tcw-settings-hint:empty {\n  padding-top: 0;\n}\n\n.tcw-settings-label {\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: var(--tcw-radius-xs);\n}\n\n.tcw-color-hex {\n  font-size: var(--tcw-font-size-xs);\n  /* Hex letters vary in width in a sans face: a monospaced one keeps the codes one width. */\n  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n/* A colour left to the part itself: the swatch shows where the picker starts, faded. */\n.tcw-color-auto input[type='color'] {\n  opacity: 0.45;\n  border-style: dashed;\n}\n\n.tcw-color-auto .tcw-color-hex {\n  font-family: inherit;\n  font-style: italic;\n}\n\n.tcw-color-auto-btn {\n  height: 24px;\n  padding: 0 8px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-color-auto-btn:hover,\n.tcw-color-auto-btn:focus-visible {\n  color: var(--tcw-text);\n  border-color: var(--tcw-accent);\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  /* As tall as the number field beside it (32); the classic densities keep their 30. */\n  box-sizing: border-box;\n  min-height: calc(32px - 2 * var(--tcw-odd));\n  padding: 6px 10px;\n  font-size: var(--tcw-font-size-sm);\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n}\n\n.tcw-reset-link {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: var(--tcw-space-4) var(--tcw-space-6);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-done-btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  /* Above sidebar buttons that overflow a short chart; menus (z 30+) stay on top. */\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--tcw-space-4) - var(--tcw-odd)) 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: var(--tcw-font-size-xs);\n  line-height: var(--tcw-line-xs);\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n}\n\n/* The bar holds the keyboard when a refit hides every button it could go to. */\n.tcw-statusbar:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-status-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-inline-start: auto;\n  /* Never narrower than what it holds, so the clock at its end stays whole: the range presets give way instead. */\n  flex: none;\n  white-space: nowrap;\n}\n\n/* Range presets + go to date, bottom left. The bar takes the room the rest leaves and\n   clips what's past it; WidgetStatusBar.fit folds that under \"more\". Logical margins,\n   so right to left it keeps its gap before the right group. */\n.tcw-range-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  margin-block: -4px;\n  margin-inline: -8px 12px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n/* A narrow widget (a phone, a narrow column, a grid's cell): the range presets close up. */\n.tcw-root[data-tcw-narrow] .tcw-range-btn[data-range] {\n  padding: 4px 5px;\n}\n\n/* What the bar has folded, and \"more\" while nothing is. */\n.tcw-statusbar [data-tcw-folded],\n.tcw-statusbar:not(.tcw-statusbar--folded) .tcw-range-more {\n  display: none;\n}\n\n.tcw-range-btn {\n  flex-shrink: 0;\n  padding: 4px calc(var(--tcw-space-4) - var(--tcw-odd));\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: 0.02em;\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-range-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-range-btn:active {\n  color: var(--tcw-accent);\n}\n\n.tcw-range-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-range-goto,\n.tcw-range-more {\n  display: inline-grid;\n  place-items: center;\n  padding: 4px 6px;\n}\n\n.tcw-range-goto {\n  margin-inline-start: 6px;\n}\n\n.tcw-range-goto svg,\n.tcw-range-more svg {\n  display: block;\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--tcw-space-4) - var(--tcw-odd));\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out 3;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  /* The dock's width to start (a panel of the dock takes the panel's): four figures fit. */\n  width: 262px;\n  flex-shrink: 0;\n  /* Its rows read its width: a narrow panel drops a column (see the move, below). */\n  container: tcw-watchlist / inline-size;\n  background: var(--tcw-bg-surface);\n  border-inline-start: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px 6px 8px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* The shown list's name: opens the lists menu. */\n.tcw-watchlist-name {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  text-align: start;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.tcw-watchlist-name::after {\n  content: '';\n  flex: none;\n  width: 0;\n  height: 0;\n  margin-inline-start: auto;\n  border: 4px solid transparent;\n  border-top-color: currentColor;\n  border-bottom-width: 0;\n  opacity: 0.7;\n}\n\n.tcw-watchlist-add {\n  flex: none;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  line-height: 1;\n  cursor: pointer;\n}\n\n.tcw-watchlist-name:hover,\n.tcw-watchlist-add:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-watchlist-name:focus-visible,\n.tcw-watchlist-add:focus-visible,\n.tcw-watchlist-input:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The lists menu, under the header. */\n.tcw-watchlist-menu {\n  top: calc(100% - 2px);\n  left: 6px;\n  right: 6px;\n  margin-top: 0;\n}\n.tcw-watchlist-count {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-watchlist-menu .tcw-danger {\n  color: var(--tcw-red);\n}\n\n/* Naming a list in place. */\n.tcw-watchlist-input {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h-sm);\n  padding: 0 8px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-watchlist-empty {\n  /* Across the list's grid: on its own it would land in the 2px gutter. */\n  grid-column: 1 / -1;\n  padding: 16px 14px;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n}\n\n/*\n * A row's remove button shows on hover or focus, in a column of its own after\n * the numbers: over them, it hid the price and the change of the row the\n * keyboard was on.\n */\n.tcw-watchlist-remove {\n  display: grid;\n  place-items: center;\n  width: var(--tcw-watchlist-remove);\n  height: var(--tcw-watchlist-remove);\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  line-height: 1;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-watchlist-row:hover .tcw-watchlist-remove,\n.tcw-watchlist-row:focus-within .tcw-watchlist-remove {\n  opacity: 1;\n}\n.tcw-watchlist-remove:hover {\n  color: var(--tcw-red);\n}\n.tcw-watchlist-row.tcw-watchlist-dragging {\n  opacity: 0.45;\n}\n\n/*\n * One grid for the head and the rows (each a subgrid of it), so the price,\n * the move and the change line up in columns from row to row. The columns\n * come from the script (`--tcw-watchlist-columns`): a sparkline and the\n * remove button each add one. The edges are columns too, a gutter each: a\n * subgrid's own padding would push its last cell past the panel.\n */\n.tcw-watchlist-list {\n  --tcw-watchlist-remove: 20px;\n  /* With the gap beside it, 10px from the panel's edge to the first and last cell. */\n  --tcw-watchlist-gutter: 2px;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 0 4px;\n  display: grid;\n  grid-template-columns: var(--tcw-watchlist-columns, var(--tcw-watchlist-gutter) minmax(0, 1fr) auto auto auto var(--tcw-watchlist-gutter));\n  column-gap: 8px;\n  align-content: start;\n}\n\n.tcw-watchlist-columns,\n.tcw-watchlist-row {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n  align-items: center;\n}\n/* The cells start after the leading gutter; the rest follow in order. */\n.tcw-watchlist-columns > :first-child,\n.tcw-watchlist-row > :first-child {\n  grid-column-start: 2;\n}\n\n/* The columns' names: small and quiet, held at the top as the rows scroll. */\n.tcw-watchlist-columns {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  height: 20px;\n  background: var(--tcw-bg-surface);\n  border-bottom: 1px solid var(--tcw-border);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  white-space: nowrap;\n}\n.tcw-watchlist-columns > :not(.tcw-watchlist-column-symbol) {\n  text-align: end;\n}\n\n/* A line a symbol, as short as its figures read: more of the list in sight. */\n.tcw-watchlist-row {\n  position: relative;\n  min-height: 24px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  outline: none;\n}\n\n/* The mark of the row in use or under the keyboard: a bar at its start, in the leading gutter. */\n.tcw-watchlist-row::before {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  width: 2px;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-watchlist-row:focus-visible::before,\n.tcw-watchlist-row.tcw-watchlist-active::before {\n  background: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n/* With a logo in the list, a row without one keeps its room: the tickers line up. */\n.tcw-watchlist-logos .tcw-watchlist-symbol:not(.tcw-watchlist-symbol-logo) {\n  padding-inline-start: calc(1.25em + var(--tcw-space-2));\n}\n\n/* A symbol's logo before its ticker, as tall as the ticker's capitals, cornered as the look's tags.\n   Inline whatever the page's own reset says of images (`img { display: block }` put it on a line of its own). */\n.tcw-watchlist-symbol .tcw-watchlist-logo {\n  display: inline-block;\n  width: 1.25em;\n  height: 1.25em;\n  margin-inline-end: var(--tcw-space-2);\n  vertical-align: -0.25em;\n  border-radius: var(--tcw-tag-radius);\n  object-fit: contain;\n}\n\n.tcw-watchlist-spark {\n  width: 48px;\n  height: 18px;\n  align-self: center;\n}\n\n.tcw-watchlist-price,\n.tcw-watchlist-move,\n.tcw-watchlist-change {\n  text-align: end;\n  white-space: nowrap;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-watchlist-price {\n  color: var(--tcw-text);\n}\n\n/* A panel too narrow for four figures drops the move first: the price and the % still read, and the\n   name keeps its room. 300 holds the longest a row's figures run to, a price of 0.00000528 and a\n   move of -0.00000003, beside \"DOGE/USDT\"; the dock opens narrower, so it starts with three. */\n@container tcw-watchlist (width < 300px) {\n  .tcw-watchlist-move,\n  .tcw-watchlist-column-move {\n    display: none;\n  }\n}\n\n.tcw-watchlist-move.tcw-up,\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-move.tcw-down,\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n/* === Toast === */\n\n.tcw-toast-icon {\n  display: inline-flex;\n  vertical-align: -2px;\n  margin-inline-end: 7px;\n  color: var(--tcw-accent);\n}\n.tcw-toast-error .tcw-toast-icon { color: var(--tcw-red); }\n\n/* Over an open dialog: above its backdrop, at the window's foot. */\n.tcw-toast.tcw-toast-over {\n  position: fixed;\n  z-index: 120;\n}\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: var(--tcw-space-4) var(--tcw-space-5);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-toast-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay bar ===\n * A transport over the foot of the main pane: step back / play / step\n * forward, where the replay is (its date and a track with the played part\n * filled), its pace (speed, step), and the ways out (pick another bar, back\n * to now). Only --tcw-* tokens; its sizes come from the look's own ladder.\n * The widget sets where it sits (--tcw-replay-foot, --tcw-replay-plot-*)\n * from the main pane, and the tier (data-fit) from the room it has.\n */\n\n/* Picking the replay start: the bars right of the pointer would be hidden. */\n.tcw-replay-shade {\n  position: absolute;\n  z-index: 4;\n  pointer-events: none;\n  background: color-mix(in srgb, var(--tcw-bg) 62%, transparent);\n  border-inline-start: 1.5px dashed var(--tcw-accent);\n}\n\n.tcw-replay-bar {\n  /* Buttons are the look's controls; Play two small steps above them. */\n  --tcw-replay-btn: var(--tcw-control-h);\n  --tcw-replay-play: calc(var(--tcw-control-h) + 2 * var(--tcw-space-2));\n  --tcw-replay-track-w: calc(var(--tcw-space-7) * 6);\n  --tcw-replay-track-min: calc(var(--tcw-space-7) * 3);\n  --tcw-replay-rail: var(--tcw-space-2);\n  --tcw-replay-head-w: var(--tcw-space-2);\n  --tcw-replay-head-h: var(--tcw-space-5);\n  position: absolute;\n  /* On the main pane's foot (over the volume, clear of the bottom panes), above the time axis without them. */\n  bottom: calc(var(--tcw-replay-foot, 30px) + var(--tcw-space-4));\n  inset-inline: var(--tcw-replay-plot-start, 0px) var(--tcw-replay-plot-end, 0px);\n  /* Centred on the plot by its margins: an entrance on `transform` would undo a translate. */\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - var(--tcw-replay-plot-start, 0px) - var(--tcw-replay-plot-end, 0px) - 2 * var(--tcw-space-4));\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity, 100%), transparent);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  /* The look's menu shadow carries its hairline (Print, Terminal, Capsule): no border of its own on top. */\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.2;\n  animation: tcw-sel-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-group,\n.tcw-replay-slot {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  min-width: 0;\n}\n.tcw-replay-bar [hidden] { display: none !important; }\n/* The step field on a single step: nothing there, no gap for it. */\n.tcw-replay-slot:empty { display: none; }\n\n/* Hairlines between the groups where the look draws separators (Print, Terminal); a gap in the others. */\n.tcw-replay-sep {\n  flex: none;\n  align-self: stretch;\n  width: var(--tcw-sep-w);\n  margin-block: var(--tcw-space-2);\n  background: var(--tcw-divider);\n}\n\n/* --- Buttons --- */\n.tcw-replay-btn {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  inline-size: var(--tcw-replay-btn);\n  block-size: var(--tcw-replay-btn);\n  padding: 0;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-replay-btn > svg,\n.tcw-replay-text-btn svg { width: var(--tcw-icon); height: var(--tcw-icon); flex: none; }\n.tcw-replay-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-replay-btn:active { background: var(--tcw-active-bg); transform: scale(0.94); }\n.tcw-replay-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* Play: the one filled control. Its focus ring stands off the fill, or it would vanish into it. */\n.tcw-replay-btn.tcw-replay-play {\n  inline-size: var(--tcw-replay-play);\n  block-size: var(--tcw-replay-play);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-replay-btn.tcw-replay-play:hover { background: var(--tcw-accent-hover); color: var(--tcw-accent-ink); }\n.tcw-replay-btn.tcw-replay-play:focus-visible {\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated), 0 0 0 calc(2 * var(--tcw-space-1)) var(--tcw-accent-line);\n}\n\n.tcw-replay-btn:disabled,\n.tcw-replay-text-btn:disabled,\n.tcw-replay-scrubber:disabled,\n.tcw-replay-speed:disabled { opacity: 0.4; cursor: default; transform: none; }\n/* Nothing left to play: a muted fill, not a faded accent that reads as pressed. */\n.tcw-replay-btn.tcw-replay-play:disabled { background: var(--tcw-active-bg); color: var(--tcw-text-muted); opacity: 1; }\n\n/* --- Where the replay is --- */\n.tcw-replay-timeline {\n  flex: 1 1 auto;\n  gap: var(--tcw-space-4);\n}\n.tcw-replay-time {\n  flex: none;\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  white-space: nowrap;\n}\n.tcw-replay-group[aria-busy='true'] .tcw-replay-time,\n.tcw-replay-group[aria-busy='true'] .tcw-replay-hint { color: var(--tcw-text-muted); }\n\n.tcw-root input[type='range'].tcw-replay-scrubber {\n  --tcw-replay-rest: var(--tcw-border-strong);\n  flex: 1 1 var(--tcw-replay-track-w);\n  min-inline-size: var(--tcw-replay-track-min);\n  inline-size: var(--tcw-replay-track-w);\n  block-size: var(--tcw-replay-btn);\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n/* Measured at its least: the bar's width with no slack in the track. */\n.tcw-replay-bar[data-measure] { max-width: none; animation: none; }\n.tcw-replay-bar[data-measure] input[type='range'].tcw-replay-scrubber { inline-size: var(--tcw-replay-track-min); flex: none; }\n.tcw-root input[type='range'].tcw-replay-scrubber:hover { --tcw-replay-rest: var(--tcw-text-muted); }\n.tcw-root input[type='range'].tcw-replay-scrubber:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n/* The played part in the accent, the rest a rail; Firefox fills it itself. */\n.tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-runnable-track {\n  block-size: var(--tcw-replay-rail);\n  border-radius: var(--tcw-radius-xs);\n  background: linear-gradient(to right, var(--tcw-accent) 0 var(--tcw-replay-done, 0%), var(--tcw-replay-rest) var(--tcw-replay-done, 0%) 100%);\n}\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-track { block-size: var(--tcw-replay-rail); border-radius: var(--tcw-radius-xs); background: var(--tcw-replay-rest); }\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-progress { block-size: var(--tcw-replay-rail); border-radius: var(--tcw-radius-xs); background: var(--tcw-accent); }\n/* A playhead, as the chart marks the replay's cut: a short upright in ink, rounded as the look rounds. */\n.tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: var(--tcw-replay-head-w);\n  block-size: var(--tcw-replay-head-h);\n  margin-top: calc((var(--tcw-replay-rail) - var(--tcw-replay-head-h)) / 2);\n  border: 0;\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-text);\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-root input[type='range'].tcw-replay-scrubber:hover::-webkit-slider-thumb,\n.tcw-root input[type='range'].tcw-replay-scrubber:active::-webkit-slider-thumb { transform: scaleY(1.25); }\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-thumb {\n  inline-size: var(--tcw-replay-head-w);\n  block-size: var(--tcw-replay-head-h);\n  border: 0;\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-text);\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated);\n}\n\n/* --- Pace: speed and step, each a labelled field --- */\n.tcw-replay-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n.tcw-replay-chip-label {\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  white-space: nowrap;\n}\n.tcw-root .tcw-replay-chip select.tcw-replay-speed {\n  block-size: var(--tcw-replay-btn);\n  padding-block: 0;\n  padding-inline-start: var(--tcw-space-4);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n\n/* --- The ways out, and picking --- */\n.tcw-replay-text-btn {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  block-size: var(--tcw-replay-btn);\n  padding-inline: var(--tcw-space-4);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-weight: var(--tcw-weight);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-replay-text-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-replay-text-btn:active { background: var(--tcw-active-bg); transform: scale(0.97); }\n.tcw-replay-text-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n/* Random bar: outlined, the one thing to press while picking. */\n.tcw-replay-text-btn.tcw-replay-ghost { border: var(--tcw-border-w) solid var(--tcw-border-strong); color: var(--tcw-text); }\n/* The close glyph is the phone's: on wider bars the words say it. */\n.tcw-replay-close-icon { display: none; }\n/* At the last bar, the way back to now is the next thing to do. */\n.tcw-replay-bar--ended .tcw-replay-realtime { background: var(--tcw-accent); color: var(--tcw-accent-ink); }\n.tcw-replay-bar--ended .tcw-replay-realtime:hover { background: var(--tcw-accent-hover); color: var(--tcw-accent-ink); }\n\n.tcw-replay-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-3);\n  color: var(--tcw-text-dim);\n  white-space: nowrap;\n}\n.tcw-replay-hint > svg { flex: none; width: var(--tcw-icon); height: var(--tcw-icon); color: var(--tcw-accent); }\n\n/* --- Narrower: the fields lose their captions (they stay their names) --- */\n.tcw-replay-bar:is([data-fit='compact'], [data-fit='stack']) .tcw-replay-chip-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* --- A phone, or a narrow chart: two rows across the plot, where the replay is on top --- */\n.tcw-replay-bar[data-fit='stack'] {\n  /* Touch targets: 40 px (44 for Play) at least, as the toolbar's on a phone. */\n  --tcw-replay-btn: max(40px, var(--tcw-control-h));\n  --tcw-replay-play: max(44px, calc(var(--tcw-control-h) + 2 * var(--tcw-space-2)));\n  inset-inline: var(--tcw-space-4);\n  width: auto;\n  max-width: none;\n  margin-inline: 0;\n  flex-wrap: wrap;\n  gap: var(--tcw-space-2);\n}\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-sep { display: none; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-timeline {\n  order: -2;\n  /* The first row, beside the close button; the rest wraps below. */\n  flex: 1 1 calc(100% - var(--tcw-replay-btn) - 2 * var(--tcw-space-2));\n  box-sizing: border-box;\n  padding-inline-start: var(--tcw-space-3);\n}\n.tcw-replay-bar[data-fit='stack'] input[type='range'].tcw-replay-scrubber { block-size: var(--tcw-menu-item-h); min-inline-size: 0; }\n/* Back to realtime closes the bar from the first row, a glyph touch users know. */\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-exits { display: contents; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-realtime { order: -1; inline-size: var(--tcw-replay-btn); padding: 0; justify-content: center; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-realtime .tcw-replay-text { display: none; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-close-icon { display: inline-flex; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-transport { flex: 1 0 auto; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-hint { white-space: normal; flex: 1 0 100%; padding-block: var(--tcw-space-2); }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-picking { display: contents; }\n\n/* While the bar holds the plot's foot, what lives there makes room: the toasts and the phone's drawing button. */\n.tcw-root[data-tcw-replay] > .tcw-toast:not(.tcw-toast-over) {\n  bottom: calc(var(--tcw-replay-lift, 0px) + var(--tcw-space-4));\n}\n.tcw-root[data-tcw-narrow][data-tcw-replay] > .tcw-body > .tcw-sidebar-fab {\n  bottom: calc(var(--tcw-replay-lift, 0px) + var(--tcw-space-4));\n}\n\n@media (forced-colors: active) {\n  .tcw-replay-bar { border: 1px solid CanvasText; }\n  .tcw-replay-btn.tcw-replay-play { border: 1px solid ButtonText; }\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-runnable-track { background: GrayText; }\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb { background: Highlight; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-replay-bar { animation: none; }\n  .tcw-replay-btn,\n  .tcw-replay-text-btn,\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb { transition: none; }\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: max(44px, var(--tcw-toolbar-h));   /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    height: max(40px, var(--tcw-control-h));   /* fatter tap target */\n    padding: 0 12px;\n    font-size: var(--tcw-font-size);\n  }\n  .tcw-btn-icon {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-sidebar {\n    width: max(44px, var(--tcw-sidebar-w));\n  }\n  .tcw-sidebar-btn {\n    width: max(40px, var(--tcw-tool-size));\n    height: max(40px, var(--tcw-tool-size));\n  }\n  .tcw-modal {\n    width: 94vw;\n    border-radius: var(--tcw-dialog-radius);\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal {\n    top: auto;\n    /* Above the on-screen keyboard (the widget sets it from visualViewport). */\n    bottom: var(--tcw-keyboard-inset, 0px);\n    padding-left: env(safe-area-inset-left, 0px);\n    padding-right: env(safe-area-inset-right, 0px);\n    left: 0;\n    right: 0;\n    transform: none;\n    /* The border and the safe-area padding inside the screen's width. */\n    box-sizing: border-box;\n    width: 100vw;\n    max-width: 100vw;\n    /* Less the on-screen keyboard: a sheet's top never goes above the screen. */\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets: taller, not more padding, so a tab's text stays inside its chip. */\n  .tcw-modal-tab {\n    min-height: 40px;\n    padding-inline: 16px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: var(--tcw-font-size-lg);\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: 2px 5px;\n  border-radius: var(--tcw-tag-radius);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    max-height: 40dvh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: var(--tcw-space-2) 8px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: var(--tcw-weight-strong); }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n/*\n * Placing a bracket: a strip at the foot of the chart, over its time axis\n * (30 px, the chart's TIME_AXIS_HEIGHT), clear of the tags along its top; its\n * name and Place in the side's colour. Centred by its margins, not a\n * transform: the entrance animation ends on `transform: none`, which left it\n * starting at the middle.\n */\n.tcw-bracket-bar {\n  position: absolute;\n  bottom: calc(30px + var(--tcw-space-5));\n  inset-inline: 0;\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - 2 * var(--tcw-space-4));\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-bar[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-bracket-bar[data-side='sell'] { --tcw-side: var(--tcw-red); }\n/* The name gives way first: in German or Russian it would push Place off a phone. */\n.tcw-bracket-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-side, var(--tcw-text));\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* The replay bar has the chart's foot while it shows: the bracket's goes to the top. */\n.tcw-root[data-tcw-replay] .tcw-bracket-bar {\n  top: var(--tcw-space-4);\n  bottom: auto;\n}\n.tcw-bracket-hint {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.tcw-bracket-cancel,\n.tcw-bracket-confirm {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-5);\n  border-radius: var(--tcw-control-radius);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-bracket-cancel {\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  background: transparent;\n  color: var(--tcw-text);\n}\n.tcw-bracket-cancel:hover { background: var(--tcw-hover-bg); }\n/* The ground's own colour reads on the side's: dark on the dark theme's light greens, paper on the light theme's deep ones. */\n.tcw-bracket-confirm {\n  border: none;\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-bracket-confirm:hover { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-bracket-cancel:focus-visible,\n.tcw-bracket-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar {\n    inset-inline: var(--tcw-space-4);\n    width: auto;\n    max-width: none;\n  }\n  .tcw-bracket-hint { display: none; }\n  .tcw-bracket-label { margin-inline-end: auto; }\n  .tcw-bracket-cancel,\n  .tcw-bracket-confirm { height: 34px; }\n}\n\n@media (forced-colors: active) {\n  .tcw-bracket-bar { border: 1px solid CanvasText; }\n  .tcw-bracket-confirm { border: 1px solid ButtonText; }\n  .tcw-bracket-cancel:focus-visible,\n  .tcw-bracket-confirm:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: var(--tcw-radius-xs); }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  text-align: start;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: end;\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n/* Narrow on a desktop; on a phone a sheet across the screen like every dialog. */\n@media (min-width: 641px) {\n  .tcw-modal-narrow {\n    max-width: 360px;\n  }\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-select {\n  width: 150px;\n  padding-right: 4px;\n  cursor: pointer;\n}\n/* A level: its value and a remove button. */\n.tcw-indi-level {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.tcw-indi-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-indi-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n.tcw-indi-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n.tcw-indi-add {\n  margin-top: 8px;\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* A compare: its colour and symbol, then how it is compared, taking the room left before its button. */\n.tcw-tree-compare {\n  justify-content: flex-start;\n}\n.tcw-tree-compare .tcw-tree-name {\n  flex: 0 1 auto;\n}\n.tcw-tree-compare .tcw-tree-del {\n  flex: none;\n  margin-inline-start: auto;\n}\n.tcw-tree-way {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n/* A drawing row's grip: dragged, it moves the drawing up or down the order. */\n.tcw-tree-btn.tcw-tree-grip {\n  flex: none;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-tree-row:not(:hover) .tcw-tree-grip:not(:focus-visible) {\n  opacity: 0.45;\n}\n/* The row a dragged drawing would take the place of. */\n.tcw-tree-row.tcw-tree-drop {\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n/* A drawing's name selects it on the chart. */\n.tcw-tree-name.tcw-tree-pick {\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-group .tcw-tree-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-tree-group .tcw-tree-name svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-member {\n  margin-left: 14px;\n  padding-left: 10px;\n  border-inline-start: 1px solid var(--tcw-border-strong);\n  border-radius: 0 var(--tcw-radius-sm) var(--tcw-radius-sm) 0;\n}\n.tcw-tree-rename {\n  flex: 1;\n  min-width: 0;\n  padding: 3px 6px;\n  border: 1px solid var(--tcw-accent-line);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-tree-rename:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n    max-height: 30dvh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  /* Except the loader's slow glow (opacity only): without it a long wait\n     looks frozen. */\n  .tcw-root .tcw-loading-candle {\n    animation-duration: 2.4s !important;\n    animation-iteration-count: infinite !important;\n    animation-delay: var(--tcw-delay, 0ms) !important;\n  }\n}\n\n/* --- Drawing settings dialog --- */\n.tcw-drawing-text {\n  min-height: 56px;\n  resize: vertical;\n  font-family: inherit;\n}\n/* The text a drawing writes takes the dialog's width, under its name. */\n.tcw-text-row {\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--tcw-space-3);\n}\n.tcw-text-row .tcw-drawing-text { box-sizing: border-box; width: 100%; }\n.tcw-levels-editor { display: grid; gap: var(--tcw-space-3); }\n/* Two columns of levels on a desktop, as a Fibonacci tool has a dozen. */\n.tcw-levels-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-3) var(--tcw-space-6);\n  max-height: 260px;\n  overflow-y: auto;\n  padding-inline-end: var(--tcw-space-1);\n}\n@media (max-width: 640px) {\n  .tcw-levels-grid { grid-template-columns: minmax(0, 1fr); }\n}\n.tcw-level-row {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--tcw-space-3);\n}\n.tcw-level-row .tcw-indi-input { box-sizing: border-box; width: 100%; min-width: 0; }\n.tcw-level-row input[type='checkbox'] { accent-color: var(--tcw-accent); }\n.tcw-level-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-radius-sm, 4px);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-level-remove:hover { color: var(--tcw-text); background: var(--tcw-bg-elevated); }\n.tcw-level-remove:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-level-add { justify-self: start; }\n\n/* --- Context menu (right-click on a drawing) --- */\n.tcw-context-menu {\n  position: absolute;\n  z-index: 70;\n  min-width: 200px;\n  /* Taller than the room (many templates, say), it scrolls. */\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-menu-pad);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  /* Frosted with the other menus (`ui.blur` above 0): the chart under it blurred, not sharp behind its words. */\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n}\n.tcw-context-item {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  width: 100%;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-context-item svg, .tcw-context-icon { flex: none; width: 14px; height: 14px; color: var(--tcw-text-muted); }\n.tcw-context-item:hover, .tcw-context-item:focus-visible { background: var(--tcw-hover-bg); outline: none; }\n.tcw-context-item:focus-visible { box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-context-danger, .tcw-context-danger svg { color: var(--tcw-red); }\n.tcw-context-sep { height: 1px; margin: var(--tcw-space-2) var(--tcw-space-4); background: var(--tcw-divider); }\n.tcw-context-label { flex: 1; min-width: 0; }\n/* A shortcut, a count, and the mark of a submenu, at the row's end. */\n.tcw-context-key, .tcw-context-count {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-context-item svg.tcw-context-more { width: 12px; height: 12px; }\n/* Right to left, a submenu opens to the left: its marks point there. */\n[dir='rtl'] .tcw-context-more, [dir='rtl'] .tcw-context-back > svg { transform: scaleX(-1); }\n/* No keyboard under a finger: the keys stay named to a screen reader only. */\n@media (hover: none) { .tcw-context-key { display: none; } }\n.tcw-context-item[aria-expanded='true'] { background: var(--tcw-hover-bg); }\n/* The choice made among radios: a dot where a switch has its tick. */\n.tcw-context-dot { display: grid; place-items: center; }\n.tcw-context-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tcw-text); }\n/* An entry that can be removed: its x on the row in hand, always on a touch screen. */\n.tcw-context-row { display: flex; align-items: center; border-radius: var(--tcw-menu-item-radius); }\n.tcw-context-row .tcw-context-item { flex: 1; min-width: 0; }\n.tcw-context-row:hover { background: var(--tcw-hover-bg); }\n.tcw-context-row:hover .tcw-context-item { background: transparent; }\n.tcw-context-remove {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  margin-inline-end: var(--tcw-space-1);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-context-row:hover .tcw-context-remove, .tcw-context-row:focus-within .tcw-context-remove { opacity: 1; }\n.tcw-context-remove:hover { color: var(--tcw-red); background: var(--tcw-hover-bg); }\n@media (hover: none) { .tcw-context-remove { opacity: 1; } }\n/* --- Toolbar over a selected drawing --- */\n.tcw-sel-toolbar {\n  position: absolute;\n  z-index: 65;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n  white-space: nowrap;\n  animation: tcw-sel-in var(--tcw-dur-fast) var(--tcw-ease-out);\n}\n@keyframes tcw-sel-in { from { opacity: 0; transform: translateY(3px); } }\n.tcw-sel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--tcw-space-3);\n  min-width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-btn svg { flex: none; }\n.tcw-sel-btn:hover, .tcw-sel-btn[aria-expanded=\"true\"] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-sel-btn:focus-visible, .tcw-sel-swatch:focus-visible, .tcw-sel-option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-sel-btn.tcw-sel-on { color: var(--tcw-accent); background: var(--tcw-accent-soft); }\n.tcw-sel-danger:hover { color: var(--tcw-red); background: var(--tcw-red-soft); }\n.tcw-sel-color {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 25%, transparent);\n}\n/* The fill picker: a square, where the line colour is a dot. */\n.tcw-sel-fill { border-radius: 3px; }\n/* The text colour picker: a letter over a bar in the text's colour. */\n.tcw-sel-text {\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1;\n  padding-bottom: 1px;\n  border-bottom: 3px solid var(--c, currentColor);\n}\n.tcw-sel-width {\n  display: inline-block;\n  width: 16px;\n  height: var(--w, 1px);\n  max-height: 6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n.tcw-sel-sep { flex: none; width: 1px; height: 18px; margin: 0 var(--tcw-space-2); background: var(--tcw-divider); }\n.tcw-sel-pop {\n  position: absolute;\n  z-index: 66;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n  padding: 4px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n}\n.tcw-sel-pop--color {\n  display: grid;\n  grid-template-columns: repeat(4, 24px);\n  gap: 6px;\n  min-width: 0;\n  padding: 8px;\n}\n.tcw-sel-swatch {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 20%, transparent);\n  cursor: pointer;\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-swatch:hover { transform: scale(1.1); }\n.tcw-sel-swatch.tcw-sel-on { box-shadow: 0 0 0 2px var(--tcw-bg-elevated), 0 0 0 4px var(--tcw-accent); }\n.tcw-sel-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: var(--tcw-menu-item-h);\n  padding: 4px 10px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-sel-option:hover { background: var(--tcw-bg-surface); }\n.tcw-sel-option.tcw-sel-on { color: var(--tcw-accent); }\n@media (prefers-reduced-motion: reduce) {\n  .tcw-sel-toolbar { animation: none; }\n  .tcw-sel-swatch { transition: none; }\n}\n\n/* --- The account: a panel under the chart; its head the tabs, the totals, a new order and its close. --- */\n.tcw-account-dock {\n  flex: none;\n}\n.tcw-account {\n  display: flex;\n  flex-direction: column;\n  /* 233, on the widget's φ ladder. */\n  height: 233px;\n  border-top: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n.tcw-account-head {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  padding-inline: var(--tcw-space-4) var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-account-tabs {\n  display: flex;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-account-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  border: 0;\n  border-radius: var(--tcw-tab-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.tcw-account-tab:hover { color: var(--tcw-text); background: var(--tcw-tab-hover); }\n.tcw-account-tab[aria-selected='true'] {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: inset 0 calc(-1 * var(--tcw-tab-line)) 0 var(--tcw-accent);\n}\n/* A tab's count: a figure in a soft pill. */\n.tcw-account-count {\n  min-width: 1.6em;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 999px;\n  background: var(--tcw-hover-bg);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n/* The open and realised P&L, on every tab, in the mono figures. Short of room, they keep their start: the open P&L's words stay whole. */\n.tcw-account-totals {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  justify-content: safe flex-end;\n  gap: var(--tcw-space-5);\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tcw-account-new {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  cursor: pointer;\n}\n.tcw-account-new:hover { background: var(--tcw-hover-bg); }\n.tcw-account-tab:focus-visible,\n.tcw-account-new:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-account-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n/* The rows: headings in the label case, figures set right in the mono type. */\n.tcw-account-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-account-table th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-align: start;\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  white-space: nowrap;\n}\n.tcw-account-table td {\n  height: calc(var(--tcw-control-h) + var(--tcw-space-2));\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  color: var(--tcw-text);\n  white-space: nowrap;\n}\n.tcw-account-table :is(th, td).tcw-num {\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n.tcw-account-table tbody tr:hover td { background: var(--tcw-hover-bg); }\n.tcw-account-side { font-weight: var(--tcw-weight-strong); }\n.tcw-account-buy, .tcw-account-up { color: var(--tcw-green); }\n.tcw-account-sell, .tcw-account-down { color: var(--tcw-red); }\n.tcw-account-actions { display: flex; justify-content: flex-end; gap: var(--tcw-space-1); }\n.tcw-account-empty {\n  margin: 0;\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/*\n * A narrow widget (a phone, a narrow column): the totals go under the tabs,\n * and each row is a card of named figures. The headings stay for a screen\n * reader, unseen: the cells name themselves on screen. The panel is a step\n * of phi taller (377) for two cards and more, at most 45% of a phone's screen.\n */\n.tcw-root[data-tcw-narrow] .tcw-account {\n  height: 377px;\n  max-height: 45vh;\n  max-height: 45dvh;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-head { flex-wrap: wrap; padding-block: var(--tcw-space-2); }\n/* The tabs give way (they scroll): New order and the close keep the first line. */\n.tcw-root[data-tcw-narrow] .tcw-account-tabs { flex: 1 1 0; }\n.tcw-root[data-tcw-narrow] .tcw-account-totals { order: 3; flex-basis: 100%; justify-content: flex-start; padding-inline: var(--tcw-space-3); }\n.tcw-root[data-tcw-narrow] .tcw-account-table thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table,\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody { display: block; }\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody tr {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-2) var(--tcw-space-5);\n  padding: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-3);\n  height: auto;\n  padding: 0;\n  border: 0;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td::before {\n  content: attr(data-label);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td:first-child,\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] { grid-column: 1 / -1; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label='']::before { content: none; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] .tcw-account-actions { width: 100%; }\n.tcw-root[data-tcw-narrow] .tcw-account-table .tcw-tree-btn { width: 34px; height: 34px; }\n\n@media (forced-colors: active) {\n  .tcw-account-tab[aria-selected='true'] { outline: 2px solid Highlight; }\n  .tcw-account-tab:focus-visible,\n  .tcw-account-new:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* --- Named layouts --- */\n.tcw-layouts-btn { max-width: 190px; }\n.tcw-layouts-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.tcw-layouts-dirty {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n}\n.tcw-name-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-dim); }\n.tcw-name-field .tcw-indi-input { width: 100%; height: 34px; font-size: var(--tcw-font-size); }\n\n/* --- Chart grid --- */\n.tcw-grid { background: var(--tcw-bg); }\n.tcw-grid-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: calc(var(--tcw-control-h) + 8px);\n  padding: 0 8px;\n  border-bottom: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-grid-bar::-webkit-scrollbar { display: none; }\n.tcw-grid-group { display: flex; align-items: center; gap: 2px; flex: none; }\n.tcw-grid-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: var(--tcw-label-tracking);\n  text-transform: var(--tcw-label-case);\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-sync[aria-pressed=\"true\"] { color: var(--tcw-accent); }\n.tcw-grid-cells {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  gap: 1px;\n  background: var(--tcw-border);\n}\n.tcw-grid-cell {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n.tcw-grid-cell-active::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--tcw-accent);\n  pointer-events: none;\n  z-index: 5;\n}\n/* The arrangement button: the one in use, and the picker it opens. */\n.tcw-grid-layout-btn {\n  gap: var(--tcw-space-2);\n  padding: 0 var(--tcw-space-3);\n}\n.tcw-grid-layout-btn > svg:first-child { color: var(--tcw-text); }\n.tcw-grid-layout-btn[aria-expanded='true'] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n/* A row for each chart count: the count, then its arrangements. */\n.tcw-grid-picker { min-width: 0; }\n.tcw-grid-picker-group {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--tcw-space-3);\n  padding: 1px var(--tcw-space-2);\n}\n.tcw-grid-picker-group + .tcw-grid-picker-group { border-top: 1px solid var(--tcw-divider); }\n.tcw-grid-picker-count {\n  flex: none;\n  min-width: 1.5em;\n  line-height: var(--tcw-control-h);\n  text-align: end;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-picker-row { display: flex; flex-wrap: wrap; gap: 2px; }\n.tcw-grid-picker-item[aria-checked='true'] {\n  background: var(--tcw-on-icon-bg);\n  color: var(--tcw-on-icon-fg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n/* --- Host toolbar buttons --- */\n.tcw-toolbar-host { display: inline-flex; align-items: center; gap: 2px; }\n.tcw-toolbar-host:empty { display: none; }\n.tcw-host-btn { display: inline-flex; align-items: center; gap: 4px; }\n\n/* --- Host sidebar buttons, status bar items, and the layer over the chart --- */\n.tcw-sidebar-host { display: flex; flex-direction: column; align-items: center; }\n.tcw-sidebar-host:empty { display: none; }\n/* Your items keep their width (the range presets fold for them), and on the left a gap\n   before the right group, whose auto margin closes up when the bar is full. */\n.tcw-status-host { display: flex; align-items: center; gap: 10px; flex: none; }\n.tcw-statusbar > .tcw-status-host { margin-inline-end: var(--tcw-space-5); }\n.tcw-status-host:empty { display: none; }\n.tcw-status-host-item { white-space: nowrap; }\n.tcw-status-host-btn {\n  margin: -4px -6px;\n  padding: 4px 6px;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-host-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-status-host-btn:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: -2px; }\n/* Over the plot and under the widget's own overlays; the pointer reaches the chart unless an element of yours takes it. */\n.tcw-host-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }\n\n/* --- Pane buttons (move, fold, maximise) --- */\n.tcw-pane-controls {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  gap: 1px;\n  transform: translateX(-100%);\n  padding: 1px;\n  border-radius: var(--tcw-radius-sm);\n  background: color-mix(in srgb, var(--tcw-bg) 80%, transparent);\n  opacity: 0.55;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-pane-controls:hover,\n.tcw-pane-controls:focus-within { opacity: 1; }\n.tcw-pane-btn {\n  display: inline-grid;\n  place-items: center;\n  width: 18px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-pane-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-pane-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tcw-accent-soft); }\n\n/* --- Typed interval --- */\n.tcw-interval-input {\n  position: absolute;\n  z-index: 20;\n  left: 50%;\n  top: 40%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg, 10px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-interval-field {\n  width: 150px;\n  height: 36px;\n  padding: 0 10px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xl);\n  font-weight: var(--tcw-weight-strong);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-interval-field[aria-invalid] { border-color: var(--tcw-red); }\n.tcw-interval-hint { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); max-width: 170px; }\n\n/* --- Alerts: lines, moves, bar close, expiry --- */\n.tcw-alerts-source { grid-column: auto; }\n.tcw-alerts-row-fields {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.tcw-alerts-row-fields[hidden] { display: none; }\n.tcw-alerts-row-fields > input[hidden] { display: none; }\n.tcw-alerts-row-fields:has(> input[hidden]) { grid-template-columns: 1fr; }\n.tcw-alerts-options { align-items: center; }\n.tcw-alerts-form .tcw-alerts-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-alerts-form .tcw-alerts-check input { width: auto; height: auto; }\n.tcw-alerts-form input[aria-invalid=\"true\"] { border-color: var(--tcw-red); }\n.tcw-alerts-row-meta { margin-top: 2px; font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); }\n.tcw-alerts-expired { opacity: 0.6; }\n\n/* --- Signal marker note --- */\n.tcw-marker-tip {\n  position: absolute;\n  z-index: 12;\n  pointer-events: none;\n  padding: 6px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.45;\n  font-variant-numeric: tabular-nums;\n  box-shadow: var(--tcw-menu-shadow);\n  max-width: 240px;\n}\n.tcw-marker-tip strong { display: block; font-size: var(--tcw-font-size-sm); }\n\n/* === Navigation over the chart ===\n * Centred on the plot's bottom edge, shown while a mouse is over the chart. */\n.tcw-nav {\n  position: absolute;\n  z-index: 15;\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, calc(-100% - 12px));\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-nav.tcw-nav-shown {\n  opacity: 1;\n  pointer-events: auto;\n}\n.tcw-nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  touch-action: none;\n}\n.tcw-nav-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-nav-btn:active {\n  background: var(--tcw-active-bg);\n}\n.tcw-nav-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-nav-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n@media (hover: none) {\n  .tcw-nav { display: none; }\n}\n\n/* === Symbol info ===\n * Top left, beside the drawing tools: the panels on the right stay clear. */\n.tcw-syminfo {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 38;\n  width: 288px;\n  max-height: calc(100% - var(--tcw-panel-top) - 12px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-syminfo-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-syminfo-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-syminfo-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-syminfo-body,\n.tcw-syminfo-news {\n  padding: 12px 14px;\n  overflow-y: auto;\n}\n.tcw-syminfo-body {\n  display: grid;\n  gap: 10px;\n}\n.tcw-syminfo-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-desc {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-meta {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-syminfo-quote {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-syminfo-price {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-change { font-size: var(--tcw-font-size-sm); }\n.tcw-syminfo-change.tcw-up { color: var(--tcw-green); }\n.tcw-syminfo-change.tcw-down { color: var(--tcw-red); }\n.tcw-syminfo-status {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--tcw-space-4) - var(--tcw-odd));\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-status::before,\n.tcw-status-market::before {\n  content: '';\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n}\n.tcw-syminfo-status[data-state='open']::before,\n.tcw-syminfo-status[data-state='always']::before,\n.tcw-status-market[data-state='open']::before {\n  background: var(--tcw-green);\n}\n.tcw-syminfo-stats {\n  display: grid;\n  gap: 4px;\n  margin: 0;\n  padding-top: 10px;\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-stat {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-syminfo-stat dt { color: var(--tcw-text-muted); }\n.tcw-syminfo-stat dd {\n  margin: 0;\n  color: var(--tcw-text);\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.tcw-syminfo-news {\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-news-title {\n  margin-bottom: 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-syminfo-news-list {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.tcw-syminfo-news-item {\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n  color: var(--tcw-text);\n}\n.tcw-syminfo-news-item a {\n  color: var(--tcw-text);\n  text-decoration: none;\n}\n.tcw-syminfo-news-item a:hover { color: var(--tcw-accent); text-decoration: underline; }\n.tcw-syminfo-news-item a:focus-visible { outline: none; box-shadow: var(--tcw-ring); border-radius: var(--tcw-radius-xs); }\n.tcw-syminfo-news-meta,\n.tcw-syminfo-news-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n/* Numbers keep their sign on the left, and mixed text its own order, in a right-to-left widget too. */\n.tcw-watchlist-price,\n.tcw-watchlist-move,\n.tcw-watchlist-change,\n.tcw-syminfo-price,\n.tcw-syminfo-change {\n  unicode-bidi: isolate;\n  direction: ltr;\n}\n.tcw-syminfo-desc,\n.tcw-syminfo-meta,\n.tcw-syminfo-status,\n.tcw-syminfo-stat dd,\n.tcw-syminfo-news-meta {\n  unicode-bidi: plaintext;\n}\n\n/* The market's status in the status bar. */\n.tcw-status-market {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-syminfo {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-height: 70%;\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  }\n}\n\n/* === The look: how chosen controls show, floating bars, segmented intervals ===\n * Each switch sets variables on its own root, which its parts read: a grid's\n * look never reaches into a chart that has one of its own. */\n\n/* The icons' lines (`ui.iconStroke`): one width at every icon size, on the widget and in its\n * portal, when the look sets one; otherwise as the icon set draws them. */\n[data-tcw-icon-stroke='set'] .tc-icon {\n  stroke-width: var(--tcw-icon-stroke);\n}\n[data-tcw-icon-stroke='set'] .tc-icon > * {\n  vector-effect: non-scaling-stroke;\n}\n/* Its filled dots (a drawing tool's anchors) were sized for the drawn line: smaller with the fine\n   one, so they don't outweigh it. */\n[data-tcw-icon-stroke='set'] .tc-icon > circle[stroke='none'] {\n  transform-box: fill-box;\n  transform-origin: center;\n  transform: scale(0.7);\n}\n/* A small icon (the legend's, a pin, 10 to 13 px) at most 1 px, so it isn't heavier than the\n   rest: drawn as it is, its line was under 1 px. */\n[data-tcw-icon-stroke='set'] .tc-icon:is([width='10'], [width='11'], [width='12'], [width='13']) {\n  stroke-width: min(var(--tcw-icon-stroke), 1px);\n}\n\n/* A chosen button (`ui.active`): a tinted fill (default), a solid pill, or an underline.\n * Dialog tabs are chips, or underlined in the underline look. Panels sit below the\n * toolbar and beside the drawing tools. */\n.tcw-root {\n  --tcw-on-bg: var(--tcw-accent-soft);\n  --tcw-on-fg: var(--tcw-accent);\n  --tcw-on-ring: none;\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: none;\n  --tcw-tabs-pad-block: var(--tcw-space-4);\n  --tcw-tab-h: var(--tcw-control-h);\n  --tcw-tab-pad: 0 var(--tcw-space-5);\n  --tcw-tab-line: 0px;\n  --tcw-tab-radius: var(--tcw-control-radius);\n  --tcw-tab-hover: var(--tcw-hover-bg);\n  --tcw-tab-on-bg: var(--tcw-on-bg);\n  --tcw-tab-on-fg: var(--tcw-on-fg);\n  /* A menu's rows sit inside its padding with corners that follow its own: the menu's\n   * corner less the padding between, so the two curves run parallel (Print: 5 - 3 = 2). */\n  --tcw-menu-pad: var(--tcw-space-2);\n  --tcw-menu-item-radius: max(0px, calc(var(--tcw-menu-radius) - var(--tcw-menu-pad)));\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + var(--tcw-space-3));\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + var(--tcw-space-5));\n}\n.tcw-root[data-tcw-active='solid'] {\n  --tcw-on-bg: var(--tcw-text);\n  --tcw-on-fg: var(--tcw-bg);\n  --tcw-on-icon-bg: var(--tcw-text);\n  --tcw-on-icon-fg: var(--tcw-bg);\n}\n/* Print picks a tool in ink blue on a tint: a solid square would outweigh the chart beside it. */\n.tcw-root[data-tcw-ui='print'][data-tcw-active='solid'] {\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-active='underline'] {\n  --tcw-on-bg: var(--tcw-active-bg);\n  --tcw-on-fg: var(--tcw-text);\n  --tcw-on-ring: inset 0 -2px 0 var(--tcw-accent);\n  --tcw-on-icon-bg: var(--tcw-active-bg);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: inset 2px 0 0 var(--tcw-accent);\n  --tcw-tabs-pad-block: 0px;\n  --tcw-tab-h: auto;\n  --tcw-tab-pad: 11px 14px;\n  --tcw-tab-line: 2px;\n  --tcw-tab-radius: 0px;\n  --tcw-tab-hover: transparent;\n  --tcw-tab-on-bg: transparent;\n  --tcw-tab-on-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-toolbar='floating'] {\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + 2 * var(--tcw-border-w) + 14px);\n}\n.tcw-root[data-tcw-sidebar='floating'] {\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + 2 * var(--tcw-border-w) + 22px);\n}\n\n/* The toolbar as an island (`ui.toolbar: 'floating'`). */\n.tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n  margin: 8px 10px 0;\n  padding-inline: calc(min(var(--tcw-toolbar-radius), var(--tcw-toolbar-h) / 2) / 2 + 8px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-toolbar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* The drawing tools as an island (`ui.sidebar: 'floating'`). */\n.tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n  align-self: flex-start;\n  max-height: calc(100% - 20px);\n  margin: 10px 6px 10px 10px;\n  padding-block: calc(min(var(--tcw-sidebar-radius), var(--tcw-sidebar-w) / 2) / 2 + 6px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-sidebar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* Frosted menus (`ui.blur` above 0): the chart shows through, blurred. */\n@supports (background: color-mix(in srgb, red 50%, transparent)) {\n  .tcw-dropdown,\n  .tcw-flyout,\n  .tcw-context-menu {\n    background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity), transparent);\n  }\n}\n\n/* The interval buttons in one track (`ui.intervals: 'segmented'`). */\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group {\n  gap: 2px;\n  margin: 0 4px;\n  padding: 3px;\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n  height: calc(var(--tcw-control-h) - 6px);\n  padding: 0 9px;\n}\n\n/* Phones: the variants keep comfortable tap targets and room for the bar. */\n@media (max-width: 768px) {\n  .tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n    height: max(34px, calc(var(--tcw-control-h) - 6px));\n    padding: 0 10px;\n  }\n  .tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n    margin: 6px 6px 0;\n    padding-inline: 4px;\n  }\n  .tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n    margin: 6px 4px 6px 6px;\n  }\n}\n\n/* --- Phones and tablets --- */\n\n/* Taps without the grey flash or the double-tap zoom's wait. The chart area\n   sets its own touch-action for its gestures. */\n.tcw-root {\n  -webkit-tap-highlight-color: transparent;\n  touch-action: manipulation;\n}\n\n/* iOS zooms the page into an input under 16 px when it takes focus. */\n@media (pointer: coarse) {\n  .tcw-root input:not([type='color']):not([type='range']):not([type='checkbox']):not([type='radio']),\n  .tcw-root select,\n  .tcw-root textarea {\n    font-size: max(16px, 1em);\n  }\n}\n\n/* Sheets and lists scroll on their own, without dragging the page behind them. */\n.tcw-modal {\n  overscroll-behavior: contain;\n}\n\n/* === The bars' newer parts ===\n * Interval sections and the chart type's icon, the Trade menu's button, undo\n * and redo off while idle, the tool menus' shortcuts and stars, the status\n * bar's clock and scale switches, and the grip of the selection toolbar. */\n\n/* The interval menu: each unit under its heading, a hairline between them. */\n.tcw-tf-section + .tcw-tf-section {\n  margin-top: var(--tcw-space-2);\n  padding-top: var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* The chart type: its icon alone, square. */\n.tcw-dropdown-trigger[data-role='charttype'] {\n  justify-content: center;\n  width: var(--tcw-control-h);\n  padding: 0;\n}\n.tcw-dropdown-trigger[data-role='charttype'] svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n/* Undo and redo with nothing to do: there, quiet, not pressable. */\n.tcw-btn-icon:disabled {\n  opacity: 0.35;\n  cursor: default;\n  background: transparent;\n  color: var(--tcw-text-muted);\n}\n\n/* A tool menu's row: the tool, its shortcut, and a star beside it. */\n.tcw-flyout-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n}\n.tcw-flyout-row > .tcw-flyout-item {\n  flex: 1;\n  min-width: 0;\n}\n.tcw-flyout-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-flyout-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-flyout-pin {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n/* Shown on the row in hand; always for a pinned tool, filled in ink blue; always on a touch screen. */\n.tcw-flyout-row:hover .tcw-flyout-pin,\n.tcw-flyout-row:focus-within .tcw-flyout-pin,\n.tcw-flyout-pin[aria-pressed='true'],\n.tcw-root[data-tcw-narrow] .tcw-flyout-pin {\n  opacity: 1;\n}\n@media (hover: none) {\n  .tcw-flyout-pin {\n    opacity: 1;\n  }\n}\n.tcw-flyout-pin:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-flyout-pin[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n.tcw-flyout-pin[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n/* The clock: the time in figures, the zone beside it; it opens the zones. */\n.tcw-status-clock,\n.tcw-status-scale-btn {\n  height: var(--tcw-control-h-sm);\n  padding: 0 var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-clock {\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-status-clock:hover,\n.tcw-status-scale-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-status-clock:focus-visible,\n.tcw-status-scale-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* The scale switches: %, log, auto, in ink blue while on. */\n.tcw-status-scale {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding-inline-start: var(--tcw-space-3);\n  border-inline-start: var(--tcw-sep-w) solid var(--tcw-border);\n}\n.tcw-status-scale-btn[aria-pressed='true'] {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A narrow widget keeps the range presets and the clock: the scale switches (also in the\n   settings and the scale's menu) give them the room, and the connection's word is left to\n   screen readers beside its dot. */\n.tcw-root[data-tcw-narrow] .tcw-status-scale {\n  display: none;\n}\n/* The market's status in a word (\"Closed\"), when even with everything folded under \"more\"\n   the bar has no room: the full words are left to screen readers and the tooltip. */\n.tcw-status-market-short {\n  display: none;\n}\n.tcw-statusbar--short-market .tcw-status-market-short {\n  display: inline;\n}\n.tcw-root[data-tcw-narrow] .tcw-status-indicator > span:not(.tcw-status-dot),\n.tcw-statusbar--short-market .tcw-status-market-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* The selection toolbar's grip: dots to take it by. */\n.tcw-sel-grip {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-control-h-sm);\n  margin-inline: var(--tcw-space-1) var(--tcw-space-2);\n  background-image: radial-gradient(circle, var(--tcw-text-muted) 1px, transparent 1.4px);\n  background-size: 4px 4px;\n  background-position: center;\n  opacity: 0.7;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-sel-grip:active {\n  cursor: grabbing;\n}\n\n/* --- A narrow widget (a phone, or a narrow column): data-tcw-narrow ---\n   Set from the widget's own width, below 641px. The toolbar keeps the\n   chart's own controls (symbol, interval, type, indicators) and puts the\n   rest under \"more\"; the drawing tools wait behind a button over the chart;\n   a grid shows one chart at a time, picked by its tab. */\n\n.tcw-toolbar-more,\n.tcw-sidebar-fab,\n.tcw-tf-current,\n.tcw-grid-tabs {\n  display: none;\n}\n\n/* The toolbar fits itself too (on a tablet, a window half a screen wide):\n   the right-hand buttons that don't fit fold under \"more\" (`--collapsed`\n   shows it), a host's left-hand ones last, and `--icons` drops the menus'\n   labels and the interval buttons. Narrow folds them all. */\n.tcw-toolbar [data-tcw-folded],\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-toolbar-overflow {\n  display: none;\n}\n.tcw-toolbar--collapsed > .tcw-toolbar-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar > .tcw-toolbar-more {\n  display: inline-flex;\n  margin-inline-start: auto;\n}\n.tcw-toolbar--icons.tcw-toolbar--tf-menu > .tcw-tf-group,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar.tcw-toolbar--tf-menu > .tcw-tf-group {\n  display: none;\n}\n/* A bar with no room for its labels has none to spare beside its icons either: the padding a step down. */\n.tcw-toolbar--icons {\n  --tcw-control-pad: var(--tcw-space-4);\n  --tcw-bar-pad: var(--tcw-space-4);\n}\n.tcw-toolbar--icons .tcw-tf-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n}\n.tcw-toolbar--icons .tcw-tf-current,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-current {\n  display: inline;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n}\n.tcw-toolbar--icons .tcw-trigger-label,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-trigger-label {\n  display: none;\n}\n\n/* The drawing tools lie over the chart when opened, from its edge. */\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  /* Under the toolbar (20), whose menus open over it. */\n  z-index: 18;\n  box-shadow: var(--tcw-menu-shadow);\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s linear var(--tcw-dur-normal);\n}\n.tcw-root[data-tcw-narrow][dir='rtl'] > .tcw-body > .tcw-sidebar {\n  transform: translateX(100%);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n  transform: none;\n  visibility: visible;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-flyout {\n  z-index: 19;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  /* Over the plot, in from its left edge (the widget sets where it starts): the\n     price axis stays on the chart's right in either direction, so a\n     right-to-left widget keeps the button on the left too, off the axis. */\n  left: calc(var(--tcw-fab-plot-left, 0px) + 10px);\n  /* Clear of the time axis. */\n  bottom: 44px;\n  z-index: 17;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: 999px;\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n  box-shadow: var(--tcw-menu-shadow);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), color var(--tcw-dur-fast), border-color var(--tcw-dur-fast);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab.tcw-active {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab[aria-expanded='true'] {\n  visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar,\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n    transition: none;\n  }\n}\n\n/* A narrow grid: one chart at a time, a tab for each. */\n.tcw-grid[data-tcw-narrow] > .tcw-grid-bar > .tcw-grid-tabs {\n  display: flex;\n}\n.tcw-grid-tab {\n  white-space: nowrap;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells {\n  display: flex;\n  flex-direction: column;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell {\n  flex: 1;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell:not(.tcw-grid-cell-current) {\n  display: none;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell-active::after {\n  display: none;\n}\n\n/* Phones: menus open as sheets from the bottom, in reach of a thumb and\n   never off screen (a menu's own place may be off the side of a phone). */\n@media (max-width: 640px) {\n  .tcw-dropdown,\n  .tcw-context-menu {\n    position: fixed !important;\n    /* Above the on-screen keyboard (the indicators' search). */\n    inset: auto 0 var(--tcw-keyboard-inset, 0px) 0 !important;\n    margin: 0 !important;\n    width: auto;\n    max-width: none;\n    max-height: 70vh !important;\n    max-height: 70dvh !important;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    z-index: 80;\n    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n  }\n  .tcw-dropdown-item,\n  .tcw-context-item {\n    min-height: 44px;\n  }\n}\n", nn = "/* === Base controls: fields, selects, checks, sliders, calendar, scrollbars ===\n *\n * One look for every form control in the widget, from tokens. Fields are\n * quiet until used: a faint fill and hairline, a firmer line on hover, and\n * on focus the line turns accent (no ring). Selects and date fields open\n * the widget's own list and calendar (formControls.ts).\n */\n\n.tcw-root {\n  color-scheme: dark;\n\n  --tcw-field-bg: rgba(230, 227, 220, 0.04);\n  --tcw-field-bg-hover: rgba(230, 227, 220, 0.06);\n  --tcw-field-bg-focus: rgba(230, 227, 220, 0.03);\n  --tcw-field-line: rgba(230, 227, 220, 0.12);\n  --tcw-field-line-hover: rgba(230, 227, 220, 0.22);\n  --tcw-field-line-focus: var(--tcw-accent-line);\n  --tcw-field-placeholder: var(--tcw-text-muted);\n  --tcw-check-line: rgba(230, 227, 220, 0.3);\n  --tcw-scroll-thumb: rgba(230, 227, 220, 0.14);\n  --tcw-scroll-thumb-hover: rgba(230, 227, 220, 0.26);\n  /* Glyphs drawn in a field's background (a background image takes no currentColor). */\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%23918f8a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23918f8a' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color-scheme: light;\n\n  /* Fields are white boxes on the paper, ruled in ink, as on a printed form. */\n  --tcw-field-bg: #ffffff;\n  --tcw-field-bg-hover: #ffffff;\n  --tcw-field-bg-focus: #ffffff;\n  --tcw-field-line: rgba(27, 29, 33, 0.16);\n  --tcw-field-line-hover: rgba(27, 29, 33, 0.3);\n  --tcw-check-line: rgba(27, 29, 33, 0.34);\n  --tcw-scroll-thumb: rgba(27, 29, 33, 0.16);\n  --tcw-scroll-thumb-hover: rgba(27, 29, 33, 0.3);\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%236a6e75' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236a6e75' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* --- Text, number, date and time fields, and selects --- */\n\n/* Fields speak the widget's type, not the browser's (a part's own font still wins).\n * The browser's control font resets the OpenType features, so --tcw-font-features\n * set on .tcw-root reaches every button and field only through this. */\n:where(.tcw-root) :where(input, select, textarea, button) {\n  font-family: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  font-feature-settings: inherit;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n) {\n  border: 1px solid var(--tcw-field-line);\n  border-radius: var(--tcw-input-radius);\n  background-color: var(--tcw-field-bg);\n  color: var(--tcw-text);\n  outline: none;\n  box-shadow: none;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):hover:not(:disabled, :focus) {\n  border-color: var(--tcw-field-line-hover);\n  background-color: var(--tcw-field-bg-hover);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):is(:focus, :focus-visible, [aria-expanded='true']) {\n  border-color: var(--tcw-field-line-focus);\n  background-color: var(--tcw-field-bg-focus);\n  outline: none;\n  box-shadow: none;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-indi-input,\n  .tcw-watchlist-input,\n  .tcw-goto-input,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-settings-number\n):is([aria-invalid='true']):is(*, :hover, :focus) {\n  /* As specific as the hover rule (its list holds the same :not) and later, so a wrong value stays red\n     under the pointer and in focus. */\n  border-color: var(--tcw-red);\n  box-shadow: none;\n}\n\n.tcw-root :is(input, textarea)::placeholder {\n  color: var(--tcw-field-placeholder);\n  opacity: 1;\n}\n\n.tcw-root :is(input, select, textarea):disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Selects: the browser's arrow gives way to a fine chevron. */\n.tcw-root select:not([multiple]):not([size]) {\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: var(--tcw-field-chevron);\n  background-repeat: no-repeat;\n  background-size: 12px 12px;\n  background-position: right 8px center;\n  padding-inline-end: 26px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.tcw-root[dir='rtl'] select:not([multiple]):not([size]),\n.tcw-root [dir='rtl'] select:not([multiple]):not([size]) {\n  background-position: left 8px center;\n}\n\n/* A select laid out left to right inside a right-to-left widget (the chart's\n * own area is LTR, the replay's figures too) keeps its chevron on the right,\n * where its padding is. */\n.tcw-root[dir='rtl'] [dir='ltr'] select:not([multiple]):not([size]),\n.tcw-root[dir='rtl'] select[dir='ltr']:not([multiple]):not([size]) {\n  background-position: right 8px center;\n}\n\n/* Number fields: the steppers show only on a field in use. */\n.tcw-root input[type='number']::-webkit-inner-spin-button,\n.tcw-root input[type='number']::-webkit-outer-spin-button {\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='number']:is(:hover, :focus)::-webkit-inner-spin-button {\n  opacity: 0.55;\n}\n\n/* Date and time: the widget's calendar icon where the browser's own can be hidden. */\n@supports selector(::-webkit-calendar-picker-indicator) {\n  .tcw-root input[type='date'] {\n    background-image: var(--tcw-field-calendar);\n    background-repeat: no-repeat;\n    background-size: 15px 15px;\n    background-position: right 8px center;\n    padding-inline-end: 30px;\n    cursor: text;\n  }\n\n  .tcw-root[dir='rtl'] input[type='date'],\n  .tcw-root [dir='rtl'] input[type='date'] {\n    background-position: left 8px center;\n  }\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n/* --- Checkboxes and radios --- */\n\n.tcw-root input:is([type='checkbox'], [type='radio']) {\n  appearance: none;\n  -webkit-appearance: none;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--tcw-check-line);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent center / 14px 14px no-repeat;\n  cursor: pointer;\n  vertical-align: middle;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='radio'] {\n  border-radius: 50%;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):hover:not(:disabled) {\n  border-color: var(--tcw-text-dim);\n}\n\n.tcw-root input[type='checkbox']:checked {\n  border-color: var(--tcw-accent);\n  background-color: var(--tcw-accent);\n  background-image: var(--tcw-check-mark);\n}\n\n.tcw-root input[type='radio']:checked {\n  border-color: var(--tcw-accent);\n  background-image: radial-gradient(circle, var(--tcw-accent) 0 3.5px, transparent 4px);\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus {\n  outline: none;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus-visible {\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* --- Sliders --- */\n\n.tcw-root input[type='range'] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: 4px;\n  border-radius: 999px;\n  background: var(--tcw-field-line-hover);\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-root input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='range']::-moz-range-thumb {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n}\n\n.tcw-root input[type='range']:hover::-webkit-slider-thumb {\n  transform: scale(1.12);\n}\n\n.tcw-root input[type='range']:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 0 4px var(--tcw-accent-soft);\n}\n\n/* --- The select list --- */\n\n.tcw-select-menu {\n  z-index: 120;\n  padding: var(--tcw-menu-pad);\n  max-width: min(360px, calc(100vw - 16px));\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-select-group {\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-select-option {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  min-height: var(--tcw-menu-item-h);\n  padding-block: 0;\n  padding-inline: var(--tcw-space-3) var(--tcw-space-5);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.tcw-select-option-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-select-check {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n\n.tcw-select-option.tcw-active {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-select-option[aria-selected='true'] {\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-select-option[aria-selected='true'] .tcw-select-check {\n  background: var(--tcw-accent);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n.tcw-select-option[aria-disabled='true'] {\n  opacity: 0.4;\n  cursor: default;\n  background: none;\n}\n\n/* --- The calendar --- */\n\n.tcw-calendar {\n  z-index: 120;\n  width: 268px;\n  padding: 10px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-calendar-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.tcw-calendar-title {\n  flex: 1;\n  text-align: center;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: -0.01em;\n}\n\n.tcw-calendar-nav {\n  display: inline-grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-nav svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.tcw-calendar[dir='rtl'] .tcw-calendar-nav svg,\n[dir='rtl'] .tcw-calendar-nav svg {\n  transform: scaleX(-1);\n}\n\n.tcw-calendar-nav:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-calendar-weekdays,\n.tcw-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.tcw-calendar-weekdays {\n  margin-bottom: 4px;\n  padding: 3px 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-weekday {\n  text-align: center;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  line-height: 20px;\n}\n\n.tcw-calendar-grid {\n  row-gap: 2px;\n}\n\n.tcw-calendar-week {\n  display: contents;\n}\n\n.tcw-calendar-day {\n  position: relative;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-day:hover:not(:disabled) {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-day.tcw-outside {\n  color: var(--tcw-text-muted);\n  opacity: 0.55;\n}\n\n/* Today: accent figures over a short line. */\n.tcw-calendar-day.tcw-today {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-calendar-day.tcw-today::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: 5px;\n  width: 12px;\n  height: 2px;\n  margin-left: -6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n\n.tcw-calendar-day[aria-selected='true'] {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  font-weight: var(--tcw-weight-strong);\n  opacity: 1;\n}\n\n.tcw-calendar-day:disabled {\n  opacity: 0.28;\n  cursor: not-allowed;\n}\n\n.tcw-calendar-day:focus {\n  outline: none;\n}\n\n.tcw-calendar-day:focus-visible {\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n.tcw-calendar-foot {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-calendar-today {\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-accent);\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-calendar-today:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-calendar-today:focus-visible,\n.tcw-calendar-nav:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n/* --- Scrollbars: thin and rounded, a thumb on no track. Low specificity:\n   a part that hides its bar keeps it hidden. --- */\n\n:where(.tcw-root) ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-track,\n:where(.tcw-root) ::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb {\n  background: var(--tcw-scroll-thumb);\n  background-clip: padding-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-scroll-thumb-hover);\n  background-clip: padding-box;\n  border: 2.5px solid transparent;\n}\n\n/* Engines without the pseudo-elements take the standard properties. */\n@supports not selector(::-webkit-scrollbar) {\n  :where(.tcw-root, .tcw-root *) {\n    scrollbar-width: thin;\n    scrollbar-color: var(--tcw-scroll-thumb) transparent;\n  }\n}\n\n/* --- Switches: flat, no glow --- */\n\n.tcw-root .tcw-toggle.tcw-on {\n  box-shadow: none;\n}\n\n.tcw-root .tcw-toggle::after {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n}\n\n.tcw-root .tcw-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* One choice of a few in a row (a radio group): the chosen one as the look shows a chosen button. */\n.tcw-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  gap: 2px;\n  padding: 2px;\n  border-radius: calc(var(--tcw-control-radius) + 2px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-segment {\n  height: calc(var(--tcw-control-h) - 4px);\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-segment:hover { color: var(--tcw-text); }\n.tcw-segment[aria-checked='true'] {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n.tcw-segment:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A number between a − and a +: one field, the figure right-aligned in the chart's mono type. */\n.tcw-stepper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--tcw-control-h);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg);\n  overflow: hidden;\n}\n.tcw-stepper:focus-within { box-shadow: var(--tcw-ring); }\n.tcw-stepper .tcw-indi-input {\n  width: 110px;\n  height: auto;\n  padding-inline: var(--tcw-space-3);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.tcw-stepper .tcw-indi-input::-webkit-inner-spin-button,\n.tcw-stepper .tcw-indi-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }\n.tcw-stepper .tcw-indi-input:focus { outline: none; box-shadow: none; }\n.tcw-stepper-btn {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n.tcw-stepper-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-stepper-btn:focus-visible { outline: none; background: var(--tcw-hover-bg); color: var(--tcw-text); }\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen choice. */\n@media (forced-colors: active) {\n  .tcw-segment[aria-checked='true'] { outline: 2px solid Highlight; }\n  .tcw-segment:focus-visible,\n  .tcw-stepper-btn:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-stepper:focus-within { outline: 2px solid Highlight; }\n}\n", rn = "/* === The indicators dialog === */\n\n/* 610 wide, a Fibonacci number: the groups take 233 and the list 377 beside them (377 : 233 = phi).\n   A fixed height, so the dialog keeps still while a search shortens the list. */\n.tcw-modal.tcw-ip {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* A dialog's search is a band across it, under its title, with a rule beneath: no box, no ring when\n   focused. The caret and the dialog itself say where typing goes; a lit box around the one field a\n   search dialog has only shouted it. As tall as the field and its margins were, set in as the title. */\n.tcw-ip-search,\n.tcw-ss-search {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  height: calc(var(--tcw-control-h) + 2 * var(--tcw-space-4));\n  margin: 0;\n  padding: 0 var(--tcw-space-6);\n  border: none;\n  border-bottom: 1px solid var(--tcw-divider);\n  border-radius: 0;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Focused, only the magnifier takes the text's colour. */\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n  color: var(--tcw-text);\n}\n\n/* The magnifier root phi of the typed text (19 at 15), as the close is of the title. */\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n  flex: none;\n  width: calc(var(--tcw-font-size-lg) * 1.272);\n  height: calc(var(--tcw-font-size-lg) * 1.272);\n}\n\n.tcw-ip-search input,\n.tcw-ss-search input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n}\n\n/* In forced colours the muted and the text's colour may be one: the band keeps an outline there,\n   so the field is still found. */\n@media (forced-colors: active) {\n  .tcw-ip-search:focus-within,\n  .tcw-ss-search:focus-within {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n}\n\n/* The browser's clear button for a search field (bold, and blue in Chrome's light scheme) as the\n   icon set's close, in the muted text, the text's on hover. A mask, so it takes the colour. */\n.tcw-ip-search input::-webkit-search-cancel-button,\n.tcw-ss-search input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n  width: calc(var(--tcw-font-size-lg) * 1.272);\n  height: calc(var(--tcw-font-size-lg) * 1.272);\n  background: var(--tcw-text-muted);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  cursor: pointer;\n}\n\n.tcw-ip-search input::-webkit-search-cancel-button:hover,\n.tcw-ss-search input::-webkit-search-cancel-button:hover {\n  background: var(--tcw-text);\n}\n\n.tcw-ip-search input::placeholder,\n.tcw-ss-search input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-ip-nav,\n.tcw-set-nav {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: var(--tcw-space-4) var(--tcw-space-3);\n  /* Logical sides: in Arabic, Hebrew or Persian the tabs sit on the right. */\n  border-inline-end: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  overflow-y: auto;\n  border-end-start-radius: var(--tcw-dialog-radius);\n}\n\n.tcw-ip-tab,\n.tcw-set-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-tab svg,\n.tcw-set-tab svg {\n  flex: none;\n}\n\n/* The kinds start below a gap: favourites and templates are yours, the rest the library's. */\n.tcw-ip-tab[data-view='all'] {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-tab:hover,\n.tcw-set-tab:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ip-tab.tcw-active,\n.tcw-set-tab.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-nav--searching .tcw-ip-tab.tcw-active {\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-ip-list {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Each kind's name stays at the top while its indicators scroll under it. */\n.tcw-ip-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ip-list > :first-child:not(.tcw-ip-heading) {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-add {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-ip-add:focus-visible,\n.tcw-ip-aside:focus-visible,\n.tcw-ip-tab:focus-visible,\n.tcw-set-tab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-add svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ip-short {\n  flex: none;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* Where it draws, quietly at the row's end. */\n.tcw-ip-kind {\n  flex: none;\n  margin-inline-start: auto;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* How many are on the chart: ink on its wash, the figures in a column. */\n.tcw-ip-count {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  min-width: var(--tcw-space-6);\n  height: var(--tcw-space-6);\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-ip-aside {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Shown on the row in hand; always for a starred one, filled in ink; always on a touch screen. */\n.tcw-ip-row:hover .tcw-ip-aside,\n.tcw-ip-row:focus-within .tcw-ip-aside,\n.tcw-ip-star[aria-pressed='true'] {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-ip-aside {\n    opacity: 1;\n  }\n}\n\n.tcw-ip-aside:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-star[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n\n.tcw-ip-star[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n.tcw-ip-remove:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ip-save {\n  flex: none;\n  width: 100%;\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-save svg {\n  color: currentColor;\n}\n\n.tcw-ip-save:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-ip-empty {\n  max-width: 34ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Heard by a screen reader, not seen. */\n.tcw-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A phone: the dialog is the widget's sheet, as tall as a sheet goes, and the groups a row of chips. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ip {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ip-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .tcw-ip-nav,\n  .tcw-set-nav {\n    flex-direction: row;\n    gap: var(--tcw-space-2);\n    padding: var(--tcw-space-3) var(--tcw-space-4);\n    border-inline-end: none;\n    border-bottom: 1px solid var(--tcw-divider);\n    border-radius: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .tcw-ip-tab[data-view='all'] {\n    margin-top: 0;\n    margin-inline-start: var(--tcw-space-4);\n  }\n\n  .tcw-ip-tab,\n  .tcw-set-tab {\n    /* A finger's size, as the dialogs' other tabs on a phone. */\n    min-height: 40px;\n    border: var(--tcw-border-w) solid var(--tcw-border);\n  }\n\n\n  .tcw-ip-list {\n    padding-inline: var(--tcw-space-3);\n  }\n}\n\n/* === The indicator settings, and a drawing's === */\n\n/* One half step of phi under the indicators dialog: 610 / sqrt(phi) = 480. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-modal-narrow.tcw-indi,\n  .tcw-modal.tcw-modal-narrow.tcw-drawing-settings {\n    width: 480px;\n    max-width: 92vw;\n  }\n}\n\n/* A line, or a kind of interval: ticked where it shows, its name, then what sets it. */\n.tcw-indi-plot-name {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.tcw-indi-plot-name .tcw-settings-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Unticked, its name steps back. */\n.tcw-indi-plot-name:has(input:not(:checked)) .tcw-settings-label {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-plot-controls,\n.tcw-indi-range {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n\n/* A box ticked beside other controls in a row (bold, italics, a text box's background). */\n.tcw-inline-check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.tcw-indi-plot-controls .tcw-indi-select {\n  width: 104px;\n}\n\n.tcw-indi-range {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-range .tcw-indi-input {\n  width: 68px;\n  text-align: end;\n}\n\n.tcw-indi-range .tcw-indi-input:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* Defaults on the left; Cancel and Ok on the right, one height for all three. */\n.tcw-indi .tcw-modal-footer,\n.tcw-set .tcw-modal-footer,\n.tcw-drawing-settings .tcw-modal-footer {\n  gap: var(--tcw-space-4);\n}\n\n.tcw-footer-end {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-indi .tcw-modal-footer button,\n.tcw-set .tcw-modal-footer button,\n.tcw-drawing-settings .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-footer-menu,\n.tcw-footer-cancel {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline: var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-footer-cancel {\n  border-color: var(--tcw-border-strong);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:hover,\n.tcw-footer-menu[aria-expanded='true'],\n.tcw-footer-cancel:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:focus-visible,\n.tcw-footer-cancel:focus-visible,\n.tcw-indi .tcw-done-btn:focus-visible,\n.tcw-set .tcw-done-btn:focus-visible,\n.tcw-drawing-settings .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A drawing's switches: the box, then its name, a list without rules between. */\n.tcw-check-row {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  cursor: pointer;\n}\n\n.tcw-settings-row + .tcw-check-row,\n.tcw-check-row + .tcw-settings-row {\n  border-top: 0;\n}\n\n/* A point: its name, then its price, date and time in columns; on a phone the price over the date and time. */\n.tcw-draw-point {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n  gap: var(--tcw-space-4);\n}\n\n.tcw-draw-point > .tcw-settings-label {\n  white-space: nowrap;\n}\n\n.tcw-draw-point .tcw-indi-plot-controls {\n  display: contents;\n}\n\n.tcw-draw-point input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n\n.tcw-draw-point input[type='number'] {\n  text-align: end;\n}\n\n@media (max-width: 640px) {\n  .tcw-draw-point {\n    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);\n  }\n\n  .tcw-draw-point > .tcw-settings-label {\n    grid-row: span 2;\n  }\n\n  .tcw-draw-point input[type='number'] {\n    grid-column: span 2;\n  }\n}\n\n.tcw-drawing-settings .tcw-indi-plot-controls input[type='number']:not(.tcw-draw-point *) {\n  width: 68px;\n  text-align: end;\n}\n\n/* The unit after a number (the fill's opacity in %). */\n.tcw-unit {\n  margin-inline-start: calc(-1 * var(--tcw-space-2));\n  color: var(--tcw-text-muted);\n}\n\n/* === The chart settings === */\n\n/* 776 x 610: half a step of phi wider than the indicators dialog (610 x sqrt(phi) = 776), as tall as it,\n   so the dialog is a sqrt(phi) rectangle. The tabs take 233 down the side, as the indicator groups do. */\n.tcw-modal.tcw-set {\n  width: 776px;\n  max-width: 94vw;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-set-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-set-panel {\n  min-width: 0;\n}\n\n/* A phone: the widget's sheet across the screen, the tabs a row of chips over the settings. After the rules above, which it overrides. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-set {\n    width: 100vw;\n    max-width: 100vw;\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-set-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n}\n\n/* === The symbol search, and the same dialog comparing === */\n\n/* As still as the indicators dialog: a fixed height while a search shortens the list. As wide as it,\n   610, up to a screen 1597 wide; past that a phi share of the screen (1 / phi^2), up to 987, the next\n   Fibonacci number: about 733 at 1920, 978 at 2560, room for ids with a venue before the ticker. */\n.tcw-modal.tcw-ss {\n  width: min(987px, max(610px, 38.2vw));\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* Comparing: how the next symbol goes on the chart, under the search. */\n.tcw-ss-way {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-ss-way > span {\n  flex: none;\n}\n\n.tcw-root .tcw-ss-way-select {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  padding-block: 0;\n}\n\n/* The heads' height, which the rows scroll in below; the room after a symbol before its name. */\n.tcw-modal.tcw-ss {\n  --tcw-ss-head-h: var(--tcw-control-h);\n  --tcw-ss-name-gap: var(--tcw-space-4);\n}\n\n[dir='rtl'] .tcw-ss-symbol {\n  padding-right: 0;\n  padding-left: var(--tcw-ss-name-gap);\n}\n\n/* Over the list: the kinds the rows come in, and their exchanges once there are two. The exchanges sit\n   on the tabs' first line when the tabs wrap, not between their lines. */\n.tcw-ss-filters {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The row right under the search's band (the filters, or the compare's way) stands off its rule as\n   it stands off the list: the tabs' and the exchanges' borders never sit on the rule. */\n.tcw-ss-search + .tcw-ss-filters,\n.tcw-ss-search + .tcw-ss-way {\n  margin-top: var(--tcw-space-4);\n}\n\n/* The kinds as tabs (All, stock, crypto…), showing the one picked as the look shows a choice. */\n.tcw-ss-kinds {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n  min-width: 0;\n  gap: var(--tcw-space-2);\n}\n\n/* Where they scroll in one line, the tabs fade out at an end with more past it, so a tab cut there\n   reads as more to scroll to. A mask: only its alpha counts, so what shows is drawn in the text's\n   colour, which is opaque, and what fades goes to transparent. */\n.tcw-ss-kinds[data-more] {\n  --tcw-ss-shown: currentColor;\n  --tcw-ss-fade-start: var(--tcw-ss-shown);\n  --tcw-ss-fade-end: var(--tcw-ss-shown);\n  -webkit-mask-image: linear-gradient(to right, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n  mask-image: linear-gradient(to right, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n}\n\n[dir='rtl'] .tcw-ss-kinds[data-more] {\n  -webkit-mask-image: linear-gradient(to left, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n  mask-image: linear-gradient(to left, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n}\n\n.tcw-ss-kinds[data-more~='start'] {\n  --tcw-ss-fade-start: transparent;\n}\n\n.tcw-ss-kinds[data-more~='end'] {\n  --tcw-ss-fade-end: transparent;\n}\n\n.tcw-ss-type {\n  flex: none;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-5);\n  border: none;\n  border-radius: var(--tcw-tab-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* A feed's words as it wrote them (\"Cổ phiếu\" stays so), only the first letter raised. */\n.tcw-ss-type::first-letter {\n  text-transform: uppercase;\n}\n\n.tcw-ss-type:hover {\n  background: var(--tcw-tab-hover);\n  color: var(--tcw-text);\n}\n\n.tcw-ss-type[aria-pressed='true'] {\n  background: var(--tcw-tab-on-bg);\n  color: var(--tcw-tab-on-fg);\n  box-shadow: inset 0 calc(-1 * var(--tcw-tab-line)) 0 var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ss-type:focus-visible,\n.tcw-ss-remove:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The exchanges at the end of the row, as wide as the longest up to 144. */\n.tcw-root .tcw-ss-exchange-filter {\n  flex: none;\n  width: auto;\n  max-width: 144px;\n  height: var(--tcw-control-h);\n  margin-inline-start: auto;\n  padding-block: 0;\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* What scrolls is one grid, and the heads, the list and each row are its subgrids, so a column is\n   as wide in every row: the badge, the symbol up to a quarter of the list (144 at 610, 233 in a wide\n   dialog, the next Fibonacci number), the name the rest, the kind up to 89, the exchange up to 144\n   ('XYZ · HYPERLIQUID' whole), the check. An empty cell keeps its column. */\n.tcw-ss-results {\n  display: grid;\n  grid-template-columns: max-content fit-content(clamp(144px, 25%, 233px)) minmax(0, 1fr) fit-content(89px) fit-content(144px) auto;\n  align-content: start;\n  column-gap: var(--tcw-space-4);\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below the heads, not under them. */\n  scroll-padding-block-start: calc(var(--tcw-ss-head-h) + var(--tcw-space-2));\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Comparing, under a heading of its own as well. */\n.tcw-ss--compare .tcw-ss-results {\n  scroll-padding-block-start: calc(var(--tcw-ss-head-h) + var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n}\n\n.tcw-ss-results > * {\n  grid-column: 1 / -1;\n}\n\n.tcw-ss-columns,\n.tcw-ss-list,\n.tcw-ss-added,\n.tcw-ss-row,\n.tcw-ss-added-row {\n  display: grid;\n  grid-column: 1 / -1;\n  /* Where subgrids aren't drawn: fixed columns, the rest sized row by row. */\n  grid-template-columns: var(--tcw-control-h-sm) 89px minmax(0, 1fr) auto auto auto;\n  grid-template-columns: subgrid;\n  align-items: center;\n  column-gap: inherit;\n}\n\n/* The heads stay at the top while the rows scroll under them. */\n.tcw-ss-columns {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  height: var(--tcw-ss-head-h);\n  margin-bottom: var(--tcw-space-2);\n  padding: 0 var(--tcw-space-4);\n  background: var(--tcw-bg-elevated);\n  box-shadow: 0 1px 0 var(--tcw-divider);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  white-space: nowrap;\n}\n\n.tcw-ss-head {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ss-head:nth-child(1) { grid-column: 1; }\n.tcw-ss-head:nth-child(2) { grid-column: 2; }\n.tcw-ss-head:nth-child(3) { grid-column: 3; }\n.tcw-ss-head:nth-child(4) { grid-column: 4; justify-self: end; }\n.tcw-ss-head:nth-child(5) { grid-column: 5; justify-self: end; }\n\n.tcw-ss-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n/* The logo, or the ticker's first letter on a tint of its kind's colour, cornered as the look's tags. */\n.tcw-ss-badge {\n  --tcw-ss-kind: var(--tcw-text-dim);\n  grid-column: 1;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  overflow: hidden;\n  border-radius: var(--tcw-tag-radius);\n  background: color-mix(in srgb, var(--tcw-ss-kind) 16%, transparent);\n  color: var(--tcw-ss-kind);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  line-height: 1;\n}\n\n.tcw-ss-badge[data-kind='1'] { --tcw-ss-kind: var(--tcw-kind-1); }\n.tcw-ss-badge[data-kind='2'] { --tcw-ss-kind: var(--tcw-kind-2); }\n.tcw-ss-badge[data-kind='3'] { --tcw-ss-kind: var(--tcw-kind-3); }\n.tcw-ss-badge[data-kind='4'] { --tcw-ss-kind: var(--tcw-kind-4); }\n.tcw-ss-badge[data-kind='5'] { --tcw-ss-kind: var(--tcw-kind-5); }\n\nimg.tcw-ss-badge {\n  background: transparent;\n  object-fit: cover;\n}\n\n/* The figures of a ticker, in the mono face, left to right in any widget, at the start of its column;\n   the chart's own in ink. Padding on the name's side, counted in the column, keeps the longest id a\n   gap twice the columns' from the name (\"BINANCE:BTCUSDT\" ran into \"BTC perpetual\"). The cell is\n   left to right itself, so the side is named, not its end. */\n.tcw-ss-symbol {\n  grid-column: 2;\n  display: flex;\n  justify-self: start;\n  max-width: 100%;\n  min-width: 0;\n  padding-right: var(--tcw-ss-name-gap);\n  overflow: hidden;\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n}\n\n/* The ticker alone (a venue before it is the exchange column's): cut only when it is wider than its column. */\n.tcw-ss-ticker {\n  flex: none;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ss-row.tcw-current .tcw-ss-symbol {\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-symbol mark {\n  background: transparent;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-desc-cell {\n  grid-column: 3;\n  min-width: 0;\n}\n\n/* As wide as its words, at the start of the column, whichever way they run. */\n.tcw-ss-desc {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The kind as the feed wrote it, and the exchange, each at the end of its column. */\n.tcw-ss-kind,\n.tcw-ss-exchange {\n  justify-self: end;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  font-size: var(--tcw-font-size-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-kind {\n  grid-column: 4;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ss-exchange {\n  grid-column: 5;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* The chart's symbol, or one on it already: a check in the last column. */\n.tcw-ss-check {\n  grid-column: 6;\n  display: inline-grid;\n  place-items: center;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-heading[hidden] {\n  display: none;\n}\n\n/* \"On the chart\" and \"Symbols\", under the heads while their rows scroll. */\n.tcw-ss-heading {\n  position: sticky;\n  top: var(--tcw-ss-head-h);\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ss-added-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-ss-added-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* How it is compared, across the name, kind and exchange; the line's colour, where it has one of its own, where the badges are. */\n.tcw-ss-way-cell {\n  grid-column: 3 / 6;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n\n.tcw-ss-swatch {\n  grid-column: 1;\n  justify-self: center;\n  width: var(--tcw-space-4);\n  height: var(--tcw-space-4);\n  border-radius: var(--tcw-radius-sm);\n}\n\n.tcw-ss-way-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-remove {\n  grid-column: 6;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ss-remove:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-red);\n}\n\n.tcw-ss-empty {\n  max-width: 44ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Under a list cut short: how many more match, for typing to narrow. */\n.tcw-ss-more {\n  padding: var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.5;\n}\n\n/* The way the dialog opens too: a letter typed on the chart. */\n.tcw-ss-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-align: center;\n}\n\n/* === Go to === */\n\n/* 377: the step of phi under the search dialogs. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-goto {\n    width: 377px;\n  }\n}\n\n.tcw-goto-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.tcw-goto-fields {\n  display: grid;\n  gap: var(--tcw-space-5);\n  padding: var(--tcw-space-6) var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The date takes the room; the time 144 beside it; a range's end named above its two. */\n.tcw-goto-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 144px;\n  gap: var(--tcw-space-3) var(--tcw-space-4);\n  align-items: center;\n}\n\n.tcw-goto-label {\n  grid-column: 1 / -1;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-root .tcw-goto-input {\n  width: 100%;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  box-sizing: border-box;\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-variant-numeric: tabular-nums;\n}\n\n/* No time on daily bars: the date across the row. */\n.tcw-goto-input[type='date']:last-child {\n  grid-column: 1 / -1;\n}\n\n/* The month under the fields, part of the dialog: no card of its own. */\n.tcw-calendar.tcw-goto-calendar {\n  position: static;\n  width: auto;\n  padding: var(--tcw-space-4) var(--tcw-space-6) var(--tcw-space-5);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  animation: none;\n}\n\n.tcw-goto-calendar .tcw-calendar-day {\n  height: 34px;\n}\n\n/* In a viewport too short for the month, the form scrolls: its parts keep their height, and\n   the buttons stay at its foot, over what scrolls under them. */\n.tcw-goto-form > * {\n  flex-shrink: 0;\n}\n\n.tcw-goto .tcw-modal-footer {\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: auto;\n  justify-content: flex-end;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-goto .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-goto .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: both are the widget's sheet; the search as tall as a sheet goes, its symbols up to 89\n   wide. The kind's column goes (the badge's colour still tells it), the tabs scroll in one line, and\n   a row is a finger's height. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ss {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    /* The column's room goes to the ticker; the columns' own gap is enough here. */\n    --tcw-ss-name-gap: 0px;\n  }\n\n  .tcw-ss-way,\n  .tcw-ss-filters {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ss-kinds {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tcw-ss-kinds::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tcw-root .tcw-ss-exchange-filter {\n    max-width: 110px;\n  }\n\n  /* The ticker is the row's key: its column as wide as the widest ticker, up to 144 or 38.2% of the\n     row, and the name gives way first. The exchange's up to 55, each cut in its own row. */\n  .tcw-ss-results {\n    grid-template-columns: max-content fit-content(min(144px, 38.2%)) minmax(0, 1fr) fit-content(55px) auto;\n  }\n\n  /* The head over the exchanges reads whole, over the gap before it if it must. */\n  .tcw-ss-head:nth-child(5) {\n    overflow: visible;\n  }\n\n  .tcw-ss-columns,\n  .tcw-ss-list,\n  .tcw-ss-added,\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    grid-template-columns: var(--tcw-control-h-sm) 89px minmax(0, 1fr) auto auto;\n    grid-template-columns: subgrid;\n  }\n\n  .tcw-ss-kind,\n  .tcw-ss-head:nth-child(4) {\n    display: none;\n  }\n\n  .tcw-ss-exchange,\n  .tcw-ss-head:nth-child(5) {\n    grid-column: 4;\n  }\n\n  .tcw-ss-check,\n  .tcw-ss-remove {\n    grid-column: 5;\n  }\n\n  .tcw-ss-way-cell {\n    grid-column: 3 / 5;\n  }\n\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    min-height: 44px;\n  }\n}\n\n/* Without a keyboard there are no letters to type on the chart. */\n@media (hover: none) and (pointer: coarse) {\n  .tcw-ss-foot {\n    display: none;\n  }\n}\n\n/* === The shortcut sheet === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-hotkey-sheet {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-hotkey-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-6) var(--tcw-space-5);\n}\n\n/* Two columns as tall as their groups, inside the box that scrolls: on the box itself, of a fixed\n   height, the groups past its foot went into columns to the side, out of reach. */\n.tcw-hotkey-columns {\n  columns: 2;\n  column-gap: var(--tcw-space-7);\n}\n\n/* A group keeps together in its column, its name above its rows. */\n.tcw-hotkey-group {\n  break-inside: avoid;\n  padding-top: var(--tcw-space-5);\n}\n\n.tcw-hotkey-heading {\n  padding-bottom: var(--tcw-space-3);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What it does on the left, its keys on the right, the keys in a column of their own. */\n.tcw-hotkey-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-3));\n  padding: var(--tcw-space-2) 0;\n}\n\n.tcw-hotkey-label {\n  min-width: 0;\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n}\n\n.tcw-hotkey-keys {\n  display: inline-flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--tcw-space-2);\n  flex: none;\n  max-width: 55%;\n}\n\n/* A key: its name in the mono face on a key's face. */\n.tcw-hotkey-key,\n.tcw-cp-key {\n  display: inline-block;\n  min-width: calc(var(--tcw-space-6) - var(--tcw-space-2));\n  padding: 0 var(--tcw-space-3);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-bottom-width: 2px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.6;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* A gesture is not a key: its words, quieter. */\n.tcw-hotkey-gesture {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  white-space: nowrap;\n}\n\n.tcw-hotkey-sep {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-hotkey-empty {\n  padding: var(--tcw-space-6) 0;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* How to open it again, at its foot. */\n.tcw-hotkey-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* === The command palette === */\n\n/* 610 wide, a third of the way down: a launcher, not a form; its search is the dialogs' search row. */\n.tcw-modal.tcw-cp {\n  top: 19.1%;\n  transform: translate(-50%, 0);\n  width: 610px;\n  max-height: min(610px, 76.4vh);\n  max-height: min(610px, 76.4dvh);\n  animation: none;\n}\n\n.tcw-cp-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its group's heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n  padding: 0 var(--tcw-space-4) var(--tcw-space-4);\n}\n\n.tcw-cp-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-cp-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n}\n\n.tcw-cp-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-cp-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* What is on now: its name in ink, a check at the end. */\n.tcw-cp-row.tcw-on .tcw-cp-label {\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-check {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-empty {\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* === Layouts === */\n\n/* 480, as the settings of an indicator: a list of names and when they were saved. On a phone, the sheet's width. */\n.tcw-modal.tcw-layouts-dialog {\n  max-height: min(610px, 86vh);\n  max-height: min(610px, 86dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-layouts-dialog { width: 480px; }\n}\n\n.tcw-layouts-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n}\n\n.tcw-layouts-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n}\n\n.tcw-layouts-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline-end: var(--tcw-space-3);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-layouts-row:hover,\n.tcw-layouts-row:focus-within {\n  background: var(--tcw-hover-bg);\n}\n\n/* A column for the check of the one open, so every name starts at the same place. */\n.tcw-layouts-open {\n  display: grid;\n  grid-template-columns: var(--tcw-space-5) minmax(0, 1fr);\n  column-gap: var(--tcw-space-3);\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-layouts-open:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-layouts-name,\n.tcw-layouts-meta {\n  grid-column: 2;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-layouts-name {\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-layouts-meta {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-layouts-check {\n  display: inline-grid;\n  place-items: center;\n  grid-column: 1;\n  grid-row: 1 / span 2;\n  color: var(--tcw-accent);\n}\n\n.tcw-layouts-open[aria-current='true'] .tcw-layouts-name {\n  color: var(--tcw-accent);\n}\n\n/* Rename and delete show on the row in hand; always on a touch screen. */\n.tcw-layouts-row .tcw-account-actions {\n  display: flex;\n  gap: var(--tcw-space-1);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-layouts-row:is(:hover, :focus-within) .tcw-account-actions,\n.tcw-layouts-row .tcw-account-actions:has(.tcw-layouts-confirm) {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-layouts-row .tcw-account-actions {\n    opacity: 1;\n  }\n}\n\n.tcw-layouts-confirm {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-red);\n  /* The accent fill's ink reads on the red too: dark on the dark theme's, white on the light's. */\n  color: var(--tcw-accent-ink);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-layouts-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: the sheets as tall as they go, the shortcuts in one column. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-hotkey-sheet {\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-hotkey-body {\n    padding-inline: var(--tcw-space-4);\n  }\n\n  .tcw-hotkey-columns {\n    columns: 1;\n  }\n\n  /* Their own heights outrank the sheet's: give them back its height, less the keyboard, and the palette its slide up. */\n  .tcw-modal.tcw-cp,\n  .tcw-modal.tcw-layouts-dialog {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-modal.tcw-cp {\n    top: auto;\n    transform: none;\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  .tcw-cp-row {\n    min-height: 44px;\n  }\n}\n\n/* === The order ticket === */\n\n/* 480, as a drawing's settings: the side, the order, its stop and target, then the receipt. On a phone, the sheet's width. */\n.tcw-modal.tcw-order-ticket {\n  max-height: min(610px, 92vh);\n  max-height: min(610px, 92dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-order-ticket { width: 480px; }\n}\n.tcw-order-ticket[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-order-ticket[data-side='sell'] { --tcw-side: var(--tcw-red); }\n\n.tcw-ticket-heading {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n.tcw-ticket-symbol {\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.tcw-ticket-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n/* Buy and Sell: the chosen one filled with its colour, the ground's own colour on it. */\n.tcw-ticket-side {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--tcw-space-3);\n  margin-bottom: var(--tcw-space-4);\n}\n.tcw-ticket-side-btn {\n  height: 34px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-ticket-side-btn:hover { color: var(--tcw-text); }\n.tcw-ticket-buy[aria-pressed='true'] { border-color: var(--tcw-green); background: var(--tcw-green); color: var(--tcw-bg); }\n.tcw-ticket-sell[aria-pressed='true'] { border-color: var(--tcw-red); background: var(--tcw-red); color: var(--tcw-bg); }\n.tcw-ticket-side-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A row's control goes under its name when they don't fit side by side (a long choice at 320 px). */\n.tcw-ticket-row {\n  flex-wrap: wrap;\n  gap: var(--tcw-space-3) var(--tcw-space-5);\n}\n.tcw-ticket-market {\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* A stop or a target: its switch, its name with how far it is under it, then its price. */\n.tcw-ticket-optional {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n.tcw-ticket-optional-name {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n}\n.tcw-ticket-away {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  /* Left to right inside, but at the name's start in either direction (the column's, not its own). */\n  align-self: flex-start;\n}\n\n/* The receipt: under a torn-paper rule, each sum a label and a figure in the mono type. */\n.tcw-ticket-summary:not(:empty) {\n  display: grid;\n  gap: var(--tcw-space-2);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  padding-top: var(--tcw-space-4);\n  border-top: var(--tcw-border-w) dashed var(--tcw-border-strong);\n}\n.tcw-ticket-summary-row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-5);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-figure {\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ticket-figure.tcw-ticket-up { color: var(--tcw-green); }\n.tcw-ticket-figure.tcw-ticket-down { color: var(--tcw-red); }\n\n.tcw-ticket-problems {\n  padding: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-problems p { margin: var(--tcw-space-1) 0; }\n\n/* Cancel and Place alone, at the end, as tall as each other. */\n.tcw-order-ticket .tcw-modal-footer { justify-content: flex-end; }\n.tcw-order-ticket .tcw-modal-footer button { height: var(--tcw-menu-item-h); padding-block: 0; }\n.tcw-ticket-place {\n  height: var(--tcw-menu-item-h);\n  padding-inline: var(--tcw-space-6);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n.tcw-ticket-place:hover:not(:disabled) { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-ticket-place:disabled { opacity: 0.45; cursor: not-allowed; }\n.tcw-ticket-place:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A phone: the ticket is a sheet above the keyboard, its controls a finger's size. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-order-ticket {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n  .tcw-stepper .tcw-indi-input { width: 96px; }\n  .tcw-stepper-btn, .tcw-segment { min-width: 34px; }\n  .tcw-segment { height: 34px; }\n  .tcw-stepper { height: 38px; }\n}\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen side. */\n@media (forced-colors: active) {\n  .tcw-ticket-side-btn[aria-pressed='true'] { outline: 2px solid Highlight; }\n  .tcw-ticket-place { border: 1px solid ButtonText; }\n  .tcw-ticket-side-btn:focus-visible,\n  .tcw-ticket-place:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n", an = "/* === The dock: the panels by the chart, and their rail === */\n\n/* In the body's row after the chart: the panel of the page open beside the chart, the rail at the outer edge\n   (both mirror in a right-to-left widget). */\n.tcw-dock {\n  position: relative;\n  display: flex;\n  flex: none;\n  min-height: 0;\n}\n\n/* The rail: as wide as the drawing tools on the other side, its buttons as theirs. */\n.tcw-dock-rail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  width: var(--tcw-sidebar-w);\n  padding: var(--tcw-space-3) 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n.tcw-dock-btn {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-tool-size);\n  height: var(--tcw-tool-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-btn svg {\n  width: var(--tcw-tool-icon-size);\n  height: var(--tcw-tool-icon-size);\n}\n\n.tcw-dock-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The page open: in ink on its wash, as a tool in use on the other side. */\n.tcw-dock-btn[aria-pressed='true'] {\n  background: var(--tcw-on-icon-bg, var(--tcw-accent-soft));\n  color: var(--tcw-on-icon-fg, var(--tcw-accent));\n}\n\n.tcw-dock-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The edge in focus shows as its line, in ink: a ring round a strip this thin reads as two lines. */\n.tcw-dock-resize:focus-visible {\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .tcw-dock-resize:is(:hover, :active, :focus-visible)::after {\n    background: Highlight;\n  }\n}\n\n/* The panel: 262 wide to start (233 x phi^(1/4)), from 233 to 377. */\n.tcw-dock-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: var(--tcw-dock-w, 262px);\n  min-height: 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n/* Its edge by the chart: a strip to drag, a line in ink while in hand. */\n.tcw-dock-resize {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) * -1);\n  z-index: 3;\n  width: calc(var(--tcw-space-3) * 2);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.tcw-dock-resize::after {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) - 1px);\n  width: 2px;\n  background: transparent;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-resize:hover::after,\n.tcw-dock-resize:active::after,\n.tcw-dock-resize:focus-visible::after {\n  background: var(--tcw-accent);\n}\n\n/* A page's header: 34 tall (21 + 13), or a control's height where that is more, and the rule under\n   it. Its height and the page's scroll padding are both these, so they never part. */\n.tcw-dock-page {\n  --tcw-dock-head-h: max(calc(var(--tcw-space-6) + var(--tcw-space-5)), var(--tcw-control-h));\n  --tcw-dock-head-rule: 1px;\n}\n\n/* A page fills the panel and scrolls under its header; the floating panels it was lose their card. */\n.tcw-dock-panel > .tcw-dock-page {\n  position: static;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: auto;\n  max-width: none;\n  max-height: none;\n  min-height: 0;\n  margin: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the keyboard moves to scrolls in below the header and its rule, not under them. */\n  scroll-padding-block-start: calc(var(--tcw-dock-head-h) + var(--tcw-dock-head-rule));\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  animation: none;\n}\n\n/* One header for every page: its title, its own buttons, and the close at the end. */\n.tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  flex: none;\n  min-height: var(--tcw-dock-head-h);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  border-bottom: var(--tcw-dock-head-rule) solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dock-page > :is(.tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) > span:first-child {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close) {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* What scrolled in a box of its own on a floating panel scrolls with the page here (a phone's caps too). */\n.tcw-dock-page :is(.tcw-alerts-list, .tcw-datawin-body, .tcw-watchlist-list, .tcw-tree-list) {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.tcw-dock-page .tcw-watchlist-list {\n  flex: 1;\n}\n\n/* The watchlist was a bar of its own: its width and shadow are the panel's now. It scrolls as a page\n   (no overflow of its own here: this rule, as specific as the page's and later, would win). */\n.tcw-dock-panel > .tcw-watchlist {\n  width: auto;\n  border-inline-start: none;\n  box-shadow: none;\n}\n\n/* The symbol info's own padding sits under the header. */\n.tcw-dock-page.tcw-syminfo > .tcw-syminfo-body {\n  padding: var(--tcw-space-5);\n}\n\n/* Narrow (a phone, a narrow column): no rail; the panel rises from the bottom over the chart, 61.8% tall. */\n.tcw-root[data-tcw-narrow] .tcw-dock-rail,\n.tcw-root[data-tcw-narrow] .tcw-dock-resize {\n  display: none;\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock {\n  position: static;\n}\n\n/* Above the chart's lines and tags, under its toasts; above the on-screen keyboard. */\n.tcw-root[data-tcw-narrow] .tcw-dock-panel {\n  position: absolute;\n  inset-inline: 0;\n  bottom: var(--tcw-keyboard-inset, 0px);\n  z-index: 38;\n  width: auto;\n  height: 61.8%;\n  max-height: calc(100% - var(--tcw-keyboard-inset, 0px));\n  border-inline-start: none;\n  border-top: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-dialog-shadow);\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  background: var(--tcw-bg-elevated);\n}\n\n/* The small buttons in a panel's rows: the browser's padding left their icons 8 px wide in a 20 px button. */\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) {\n  padding: 0;\n}\n\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) svg {\n  flex: none;\n}\n\n/* A page's title as the others': the watchlist's is its list's name, a menu. */\n.tcw-dock-page .tcw-watchlist-name {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-3);\n  margin-inline-start: calc(var(--tcw-space-3) * -1);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: none;\n  letter-spacing: normal;\n  flex: 0 1 auto;\n}\n\n/* Its caret beside the name, the add and close buttons at the end. */\n.tcw-dock-page .tcw-watchlist-name::after {\n  margin-inline-start: var(--tcw-space-3);\n}\n\n.tcw-dock-page .tcw-watchlist-add {\n  margin-inline-start: auto;\n}\n\n/* === The depth ladder, a page of the dock === */\n\n.tcw-ladder-title {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  font: inherit;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/*\n * Bid, price, ask: under the header, in the label case. The heading and each\n * row are grids of their own, so their columns are fixed shares: a row's\n * content (a mark of your orders) never moves its column off the others'.\n */\n.tcw-ladder-cols,\n.tcw-ladder-row {\n  --tcw-ladder-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n}\n.tcw-ladder-cols {\n  position: sticky;\n  top: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  z-index: 1;\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  align-items: center;\n  height: var(--tcw-space-6);\n  padding-inline: var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-ladder-cols span:first-child { text-align: end; padding-inline-end: var(--tcw-space-4); }\n.tcw-ladder-cols span:nth-child(2) { text-align: center; }\n.tcw-ladder-cols span:last-child { padding-inline-start: var(--tcw-space-4); }\n\n.tcw-ladder-body { flex: 1; padding-inline: var(--tcw-space-3); }\n\n/* A row 21 tall: the bid's size, the price, the ask's size, in the mono figures. */\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  height: var(--tcw-space-6);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n/* A side's size over a bar grown from the price outward, as long as its share of the largest. */\n.tcw-ladder-cell {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  cursor: pointer;\n}\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  inset-block: 2px;\n  z-index: -1;\n  width: var(--w, 0%);\n  border-radius: 1px;\n}\n.tcw-ladder-bid { justify-content: flex-end; }\n.tcw-ladder-bid::before { inset-inline-end: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-ask { justify-content: flex-start; }\n.tcw-ladder-ask::before { inset-inline-start: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover { background: var(--tcw-hover-bg); }\n.tcw-ladder-cell:disabled { cursor: default; }\n.tcw-ladder-cell:focus-visible { outline: none; box-shadow: inset var(--tcw-ring); }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--tcw-space-2);\n  min-width: 0;\n  overflow: hidden;\n  padding-inline: var(--tcw-space-3);\n  border-inline: 1px solid var(--tcw-divider);\n  white-space: nowrap;\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n/* Your orders at a price: their quantity, stamped in the side's colour. */\n.tcw-ladder-own {\n  flex: none;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 2px;\n  color: var(--tcw-bg);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-ladder-own[data-side='buy'] { background: var(--tcw-green); }\n.tcw-ladder-own[data-side='sell'] { background: var(--tcw-red); }\n/* The spread, between the asks and the bids, on a torn-paper rule. */\n.tcw-ladder-spread {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-space-6);\n  border-block: 1px dashed var(--tcw-border-strong);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-empty {\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/* Narrow (a finger, not a pointer): rows a control tall, 26 not 21. */\n.tcw-root[data-tcw-narrow] .tcw-ladder-row {\n  height: var(--tcw-control-h);\n}\n\n/* Forced colours drop the bars' and the marks' fills: the bars show in the system's highlight, the marks framed. */\n@media (forced-colors: active) {\n  .tcw-ladder-cell::before { forced-color-adjust: none; background: Highlight; opacity: 0.3; }\n  .tcw-ladder-cell:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-ladder-own { border: 1px solid CanvasText; }\n}\n", on = 0, sn = "tcw-styles";
+var tn = "/* === TradeCanvas Widget — Premium Styles === */\n\n/*\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\n * so it never touches the host page.\n */\n[class^=\"tcw-\"][hidden],\n[class*=\" tcw-\"][hidden] {\n  display: none !important;\n}\n\n/* Control tooltips (WidgetTooltip): quick to appear, slide in from the control. */\n.tcw-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 60;\n  max-width: 240px;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  box-shadow: var(--tcw-tooltip-shadow);\n  width: max-content;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(var(--tcw-tip-dx, 0), var(--tcw-tip-dy, 0));\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s linear 110ms;\n}\n\n.tcw-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s;\n}\n\n/* The modal portal: carries the tokens and fonts, but no box of its own. */\n.tcw-root.tcw-portal {\n  display: contents;\n}\n\n/* Fullscreen: the root fills the screen; the chart resizes with it. */\n.tcw-root:fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: var(--tcw-font);\n  font-feature-settings: var(--tcw-font-features);\n  font-size: var(--tcw-font-size);\n  line-height: var(--tcw-line-height);\n  color: #e6e3dc;\n  background: #131416;\n  font-variant-numeric: tabular-nums;\n  position: relative;\n  /* Clipped, not hidden: a box that hides its overflow still scrolls to what the keyboard lands on\n     past its edge, and the whole widget slid aside until the next resize. Hidden where clip is unknown. */\n  overflow: hidden;\n  overflow: clip;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) ---\n   * Print at night: warm ink on an off-black, never pure white on black, so\n   * text doesn't glare. Grey for everything that is normal; colour only where\n   * it means something. */\n  --tcw-bg: #131416;\n  --tcw-bg-surface: #131416;\n  --tcw-bg-elevated: #1b1c1f;\n  --tcw-bg-overlay: rgba(19, 20, 22, 0.6);\n  --tcw-border: #2a2b2f;\n  --tcw-border-strong: #3a3b40;\n  /* Tooltips are the ink turned over: light on the dark ground. */\n  --tcw-tooltip-bg: #e6e3dc;\n  --tcw-tooltip-fg: #131416;\n  --tcw-text: #e6e3dc;\n  --tcw-text-dim: #a9a6a0;\n  --tcw-text-muted: #918f8a;\n\n  /* Ink blue: links, focus and what you picked. --tcw-accent-ink is the text colour on an accent fill. */\n  --tcw-accent: #7d9bff;\n  --tcw-accent-hover: #98b0ff;\n  --tcw-accent-ink: #131416;\n  --tcw-accent-soft: rgba(125, 155, 255, 0.14);\n  --tcw-accent-glow: rgba(125, 155, 255, 0.22);\n  --tcw-accent-line: rgba(125, 155, 255, 0.55);\n\n  --tcw-red: #e2706b;\n  --tcw-red-soft: rgba(226, 112, 107, 0.12);\n  --tcw-green: #4fae8a;\n  --tcw-green-soft: rgba(79, 174, 138, 0.12);\n\n  /* The kinds of symbol in the symbol search (stock, futures, index, crypto, forex): hues as far\n   * from the accent's blue and the up and down green and red as from each other (0.11 in OKLab at\n   * the least, where 0.02 is a step the eye just sees), so a badge is never taken for the chart's\n   * symbol, a match or a move; each readable on a tint of itself, on the selected row too. */\n  --tcw-kind-1: #4cbedf;\n  --tcw-kind-2: #e8a144;\n  --tcw-kind-3: #ca8cff;\n  --tcw-kind-4: #f387c1;\n  --tcw-kind-5: #a5c45d;\n\n  --tcw-hover-bg: rgba(230, 227, 220, 0.06);\n  --tcw-active-bg: rgba(230, 227, 220, 0.1);\n  --tcw-divider: rgba(230, 227, 220, 0.07);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Spacing: Fibonacci numbers on a 4px grid (4, 8, 12, 20, 32), with 2 and 6 under them. Every\n   * step is even, so what a gap or a padding centres lands on a whole pixel. The classic and\n   * compact densities set the plain Fibonacci numbers (2, 3, 5, 8, 13, 21, 34) inline. */\n  --tcw-space-1: 2px;\n  --tcw-space-2: 4px;\n  --tcw-space-3: 6px;\n  --tcw-space-4: 8px;\n  --tcw-space-5: 12px;\n  --tcw-space-6: 20px;\n  --tcw-space-7: 32px;\n  /* The room inside a control beside its label, a bar beside its first button, a menu row beside its text. */\n  --tcw-control-pad: 12px;\n  --tcw-bar-pad: 12px;\n  --tcw-menu-row-pad: 12px;\n  /* What a gap of 8 gives back in the classic and compact densities, where it was 7: 1px there, nothing here. */\n  --tcw-odd: 0px;\n  /* A line of body text: 18px at 13px, an even height that centres on whole pixels. */\n  --tcw-line-height: 1.38462;\n  /* An on-chart indicator row's line, on the plot and in a pane. */\n  --tcw-legend-line: 20px;\n  --tcw-legend-line-pane: 16px;\n  /* A line of the smallest type, an even height too. */\n  --tcw-line-xs: 14px;\n  /* The bars' text buttons: as wide as their text, rounded up to a whole pixel. */\n  --tcw-text-w: calc-size(max-content, round(up, size, 1px));\n\n  /* The look (UI system): Print's values. The `ui` option sets them inline. */\n  --tcw-radius-xs: 1px;\n  --tcw-radius-sm: 2px;\n  --tcw-radius: 3px;\n  --tcw-radius-lg: 5px;\n  --tcw-radius-xl: 8px;\n  --tcw-control-radius: var(--tcw-radius);\n  --tcw-input-radius: var(--tcw-radius);\n  --tcw-menu-radius: var(--tcw-radius-lg);\n  --tcw-dialog-radius: var(--tcw-radius-xl);\n  --tcw-panel-radius: var(--tcw-radius-lg);\n  --tcw-tooltip-radius: var(--tcw-radius-sm);\n  --tcw-tag-radius: var(--tcw-radius-sm);\n  --tcw-toast-radius: var(--tcw-radius-lg);\n  --tcw-toolbar-radius: 0px;\n  --tcw-sidebar-radius: 0px;\n  --tcw-toolbar-h: 42px;\n  --tcw-control-h: 34px;\n  --tcw-control-h-sm: 26px;\n  --tcw-icon: 20px;\n  --tcw-sidebar-w: 42px;\n  --tcw-tool-h: 36px;\n  --tcw-tool-icon: 26px;\n  --tcw-menu-item-h: 34px;\n  --tcw-icon-stroke: 1px;\n  --tcw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --tcw-font-size: 13px;\n  --tcw-font-size-sm: 11px;\n  --tcw-font-size-xs: 10px;\n  --tcw-font-size-lg: 15px;\n  --tcw-font-size-xl: 18px;\n  --tcw-font-size-display: 21px;\n  --tcw-weight: 400;\n  --tcw-weight-strong: 500;\n  --tcw-label-case: none;\n  --tcw-label-tracking: 0em;\n  --tcw-label-size: 11px;\n  --tcw-border-w: 1px;\n  --tcw-sep-w: 1px;\n  --tcw-menu-shadow: 0 0 0 1px var(--tcw-divider), var(--tcw-shadow-lg);\n  --tcw-dialog-shadow: 0 0 0 1px var(--tcw-divider), var(--tcw-shadow-lg);\n  --tcw-tooltip-shadow: var(--tcw-shadow-sm);\n  --tcw-blur: 0px;\n  --tcw-surface-opacity: 100%;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(125, 155, 255, 0.5);\n\n  /* Type */\n  --tcw-font-mono: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  /* The faces as drawn: a tag means something else in each face (in IBM Plex, ss01 is a one-storey a).\n   * The `ui` option never sets it, so a rule of yours on .tcw-root turns on your face's own. */\n  --tcw-font-features: normal;\n}\n\n/*\n * A button that is as wide as its text is a fraction of a pixel wide, and every icon after it on\n * the bar then sits on a fraction too, its lines soft. The bars' text buttons are a whole number\n * of pixels wide (--tcw-text-w) where the browser can size a box from its content and round it;\n * where it can't, the value is no width at all and they stay as wide as their text. No\n * specificity, so any width a rule sets wins. The classic and compact densities set it to auto.\n */\n:where(.tcw-toolbar-symbol, .tcw-toolbar .tcw-btn, .tcw-toolbar .tcw-dropdown-trigger, .tcw-range-btn, .tcw-status-clock, .tcw-status-scale-btn) {\n  width: var(--tcw-text-w, auto);\n}\n\n/* Print by day: ink on paper. */\n.tcw-root[data-tcw-theme='light'] {\n  color: #1b1d21;\n  background: #fbfaf6;\n\n  --tcw-bg: #fbfaf6;\n  --tcw-bg-surface: #fbfaf6;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(251, 250, 246, 0.8);\n  --tcw-border: #dcd8cf;\n  --tcw-border-strong: #c7c2b7;\n  --tcw-tooltip-bg: #1b1d21;\n  --tcw-tooltip-fg: #fbfaf6;\n  --tcw-text: #1b1d21;\n  --tcw-text-dim: #4a4e57;\n  --tcw-text-muted: #6a6e75;\n\n  /* A deeper ink blue: readable as text on paper, white text readable on it. */\n  --tcw-accent: #2348c4;\n  --tcw-accent-hover: #1b3a9f;\n  --tcw-accent-ink: #ffffff;\n  --tcw-accent-soft: rgba(35, 72, 196, 0.1);\n  --tcw-accent-glow: rgba(35, 72, 196, 0.16);\n  --tcw-accent-line: rgba(35, 72, 196, 0.45);\n  --tcw-ring: 0 0 0 2px rgba(35, 72, 196, 0.4);\n\n  /* Darker semantic colours: used as text on paper. */\n  --tcw-red: #b8423f;\n  --tcw-red-soft: rgba(184, 66, 63, 0.1);\n  --tcw-green: #1f7a5c;\n  --tcw-green-soft: rgba(31, 122, 92, 0.1);\n\n  /* The same hues, deep enough to read on paper. */\n  --tcw-kind-1: #06596e;\n  --tcw-kind-2: #855402;\n  --tcw-kind-3: #8238b2;\n  --tcw-kind-4: #a12673;\n  --tcw-kind-5: #415500;\n\n  --tcw-hover-bg: rgba(27, 29, 33, 0.05);\n  --tcw-active-bg: rgba(27, 29, 33, 0.08);\n  --tcw-divider: #e7e3da;\n\n  /* Warm shadows, as paper casts. */\n  --tcw-shadow-sm: 0 1px 2px rgba(40, 34, 22, 0.06);\n  --tcw-shadow-md: 0 4px 12px rgba(40, 34, 22, 0.08), 0 1px 3px rgba(40, 34, 22, 0.05);\n  --tcw-shadow-lg: 0 12px 36px rgba(40, 34, 22, 0.13), 0 4px 12px rgba(40, 34, 22, 0.07);\n  --tcw-shadow-xl: 0 24px 64px rgba(40, 34, 22, 0.17), 0 12px 24px rgba(40, 34, 22, 0.09);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 var(--tcw-bar-pad);\n  height: var(--tcw-toolbar-h);\n  border-bottom: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n}\n\n.tcw-toolbar-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  display: inline-flex;\n  align-items: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* With the symbol search switched off, the button only names the symbol. */\n.tcw-toolbar-symbol[aria-disabled=\"true\"] {\n  cursor: default;\n}\n\n.tcw-toolbar-symbol[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n/* With everything folded and still no room (a long ticker on a phone), the ticker is cut short so\n   \"more\" stays on the bar (`data-tcw-squeeze`). The button shows the ticker alone: a venue before it\n   (\"HYPERLIQUID:xyz:\") is the legend's and the tooltip's to name. */\n.tcw-toolbar[data-tcw-squeeze='cut'] > .tcw-toolbar-symbol {\n  min-width: 0;\n}\n\n.tcw-toolbar[data-tcw-squeeze='cut'] .tcw-toolbar-ticker {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-toolbar-sep {\n  width: var(--tcw-sep-w);\n  /* A button's height over phi: the rule stands as tall as the icons beside it. */\n  height: calc(var(--tcw-control-h) / 1.618);\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 var(--tcw-space-3);\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding: 0 var(--tcw-space-2);\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-badge-count {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px var(--tcw-space-3);\n  border-radius: var(--tcw-tag-radius);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-control-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The arrow after a label keeps to the button's far edge, on a whole pixel: a label is a fraction wide. */\n.tcw-dropdown-trigger > svg:last-child:not(:first-child) {\n  margin-inline-start: auto;\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 50;\n  width: max-content;\n  max-width: min(340px, calc(100vw - 16px));\n  padding: var(--tcw-menu-pad);\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: start;\n  border-radius: var(--tcw-menu-item-radius);\n  gap: var(--tcw-space-5);\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* A menu row led by an icon (chart types): icon then label, not spread apart. */\n.tcw-dropdown-item--icon {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-dropdown-item svg,\n.tcw-flyout-item svg {\n  flex-shrink: 0;\n}\n\n/* The drawing-group button's icon holder: a plain box for the swapped SVG. */\n.tcw-sidebar-icon {\n  display: inline-flex;\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* Timeframe menu: pick on the left, pin (star) on the right. */\n.tcw-tf-more {\n  padding: 0 var(--tcw-space-3);\n}\n\n.tcw-tf-more svg {\n  display: block;\n}\n\n.tcw-tf-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.tcw-tf-row .tcw-dropdown-item {\n  flex: 1;\n  min-width: 0;\n}\n\n.tcw-tf-star {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-star:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-tf-star.tcw-active {\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-star.tcw-active svg {\n  fill: currentColor;\n}\n\n.tcw-tf-star:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-tf-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-row:hover .tcw-tf-remove,\n.tcw-tf-remove:focus-visible {\n  opacity: 1;\n}\n\n/* No hover on touch screens: keep it visible rather than a hidden tap target. */\n@media (hover: none) {\n  .tcw-tf-remove { opacity: 1; }\n}\n\n.tcw-tf-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-tf-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* Typed interval, under the list: stays in view while the list scrolls. Out to the menu's edges over\n   its padding, and no further: past them, the menu scrolled a few px both ways. */\n.tcw-tf-custom {\n  position: sticky;\n  bottom: calc(-1 * var(--tcw-menu-pad));\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 4px calc(-1 * var(--tcw-menu-pad)) calc(-1 * var(--tcw-menu-pad));\n  padding: 6px calc(var(--tcw-menu-pad) + 4px) 8px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-elevated);\n}\n\n.tcw-tf-custom-hint:empty {\n  display: none;\n}\n\n.tcw-tf-custom-hint {\n  flex-basis: 100%;\n  width: 0;\n  min-width: 100%;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n}\n\n.tcw-tf-custom-input {\n  flex: 1;\n  /* Fills the row: its own width would follow the font (16px on touch). */\n  width: 0;\n  min-width: 0;\n  height: 26px;\n  padding: 0 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-tf-custom-input::placeholder {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-tf-custom-input:focus {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n\n.tcw-tf-custom-input[aria-invalid='true'] {\n  border-color: var(--tcw-red);\n  box-shadow: 0 0 0 2px var(--tcw-red-soft);\n}\n\n.tcw-tf-custom-add {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-tf-custom-add:hover {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-custom-add:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: 1px;\n}\n\n.tcw-dropdown-label {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === History pill (older bars loading at the left edge) === */\n\n.tcw-history-pill {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  z-index: 4;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-shadow-sm);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-history-pill--hidden {\n  opacity: 0;\n}\n\n.tcw-history-pill--error {\n  border-color: color-mix(in srgb, var(--tcw-red) 45%, var(--tcw-border));\n  color: var(--tcw-red);\n}\n\n.tcw-history-spinner {\n  width: 10px;\n  height: 10px;\n  border: 1.5px solid var(--tcw-accent-soft);\n  border-top-color: var(--tcw-accent);\n  border-radius: 50%;\n  animation: tcw-history-spin 0.8s linear infinite;\n}\n\n.tcw-history-pill--error .tcw-history-spinner {\n  border-color: currentColor;\n  animation: none;\n}\n\n@keyframes tcw-history-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* === Loading overlay (candle skeleton) === */\n\n.tcw-loading-overlay {\n  /* Uses a modifier class rather than the `hidden` attribute — the global\n     `[hidden] { display: none !important }` rule above would cut the\n     opacity transition off before it can play. */\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-loading-overlay--hidden {\n  opacity: 0;\n}\n\n/* A slow switch: the previous chart stays underneath, lightly dimmed and blurred, so the click\n   visibly registered without blanking the screen; the candles stand on it with no panel. */\n.tcw-loading-overlay--veil {\n  background: color-mix(in srgb, var(--tcw-bg) 45%, transparent);\n  -webkit-backdrop-filter: blur(3px);\n  backdrop-filter: blur(3px);\n}\n\n.tcw-loading-candles {\n  position: relative;\n  display: flex;\n  gap: 7px;\n  height: 64px;\n}\n\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\n.tcw-loading-candle {\n  position: relative;\n  width: 8px;\n  height: 100%;\n  color: var(--tcw-red);\n  opacity: 0.28;\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\n  animation-delay: var(--tcw-delay, 0ms);\n}\n\n.tcw-loading-candle--up { color: var(--tcw-green); }\n\n.tcw-loading-candle::before,\n.tcw-loading-candle::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  background: currentColor;\n  transform: translateX(-50%);\n}\n\n.tcw-loading-candle::before {\n  top: var(--tcw-wick-top);\n  width: 1.5px;\n  height: var(--tcw-wick-h);\n}\n\n.tcw-loading-candle::after {\n  top: var(--tcw-body-top);\n  width: 8px;\n  height: var(--tcw-body-h);\n  border-radius: 1.5px;\n}\n\n/* Each candle brightens and lifts slightly in turn, left to right. */\n@keyframes tcw-candle-light {\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\n  20% { opacity: 1; transform: translateY(-2px); }\n}\n\n/* The status text is announced, not shown — the candles say \"loading\". */\n.tcw-loading-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.tcw-loading-overlay--error .tcw-loading-candles {\n  display: none;\n}\n\n/* A failure is shown: why the chart is empty and that a retry is running. */\n.tcw-loading-overlay--error .tcw-loading-label {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n  white-space: normal;\n  max-width: 320px;\n  text-align: center;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size);\n}\n\n/* Over a veiled chart the message gets a plate of its own: red text straight on candles and\n   gridlines that are only dimmed would be hard to read. */\n.tcw-loading-overlay--veil.tcw-loading-overlay--error .tcw-loading-label {\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  box-shadow: var(--tcw-shadow-md);\n}\n\n/* Reduced motion: nothing slides or lifts, but the candles still glow in\n   turn, so the wait never looks frozen. */\n@media (prefers-reduced-motion: reduce) {\n  .tcw-loading-candle {\n    animation: tcw-candle-glow 2.4s ease-in-out infinite;\n    animation-delay: var(--tcw-delay, 0ms);\n  }\n}\n\n@keyframes tcw-candle-glow {\n  0%, 60%, 100% { opacity: 0.28; }\n  25% { opacity: 0.9; }\n}\n\n/* === On-chart indicator legend (WidgetIndicatorLegend) === */\n\n.tcw-ind-legend {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: calc(100% - 140px);\n  pointer-events: none;\n}\n\n.tcw-ind-legend--collapsed > .tcw-ind-legend-row {\n  display: none;\n}\n\n.tcw-ind-legend-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  max-width: 100%;\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-radius-sm);\n  /* The figures face at the size of the price legend above: one block, columns that line up. */\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  line-height: var(--tcw-legend-line);\n  white-space: nowrap;\n  color: var(--tcw-text-dim);\n  /* A see-through ground, as under the price legend's rows: lines across the plot run\n     behind the text. A host sets --tcw-legend-ground (transparent: none). */\n  background: var(--tcw-legend-ground, color-mix(in srgb, var(--tcw-bg) 72%, transparent));\n  pointer-events: auto;\n  cursor: default;\n  /* A narrow pane: the values shrink first, then the row is clipped. */\n  overflow: hidden;\n}\n\n/* A pane's indicator: at the top of its pane, where the canvas title was,\n   short enough to sit in the pane's header below the divider's grab zone. */\n.tcw-ind-legend-row--pane {\n  position: absolute;\n  z-index: 3;\n  line-height: var(--tcw-legend-line-pane);\n}\n\n.tcw-ind-legend-row:hover,\n.tcw-ind-legend-row:focus-within {\n  background: color-mix(in srgb, var(--tcw-bg-elevated) 90%, transparent);\n  box-shadow: 0 0 0 1px var(--tcw-border);\n}\n\n.tcw-ind-legend-name {\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-name:hover {\n  color: var(--tcw-accent);\n}\n\n/* A compared symbol's name opens nothing. */\n.tcw-ind-legend-row--compare .tcw-ind-legend-name,\n.tcw-ind-legend-row--compare .tcw-ind-legend-name:hover {\n  color: var(--tcw-text);\n  cursor: default;\n}\n\n/* The values are one line of text: a narrow chart cuts the line, so the values\n   before the cut stay whole and the one it falls in ends in an ellipsis. Values\n   shrinking each on its own cut them all at once. */\n.tcw-ind-legend-values {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ind-legend-values > * + * {\n  margin-inline-start: var(--tcw-space-4);\n}\n\n/* Too narrow for a digit and an ellipsis (Bollinger's on a 320 phone, 6 px beside the buttons), the\n   values would show a sliver: they hide, keeping their room so they come back with it, and the name\n   reads alone. */\n.tcw-ind-legend-values--no-room {\n  visibility: hidden;\n}\n\n/* A compare's line colour, as a short stroke of it before the name. */\n.tcw-ind-legend-swatch {\n  flex: none;\n  align-self: center;\n  width: 10px;\n  height: 3px;\n  margin-inline-end: var(--tcw-space-2);\n  border-radius: 1px;\n}\n\n.tcw-ind-legend-row--hidden .tcw-ind-legend-swatch,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-name,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-values {\n  opacity: 0.45;\n}\n\n/* Show / settings / remove: on hover or keyboard focus (always on touch). Out of sight, not out of the\n   page, so Tab reaches them in a row with nothing else to focus (a compare's) and a screen reader finds\n   them; a button focused shows them all. */\n.tcw-ind-legend-actions {\n  display: inline-flex;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  gap: 1px;\n  margin-left: -2px;\n}\n\n.tcw-ind-legend-row:hover .tcw-ind-legend-actions,\n.tcw-ind-legend-row:focus-within .tcw-ind-legend-actions {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n}\n\n@media (hover: none) {\n  .tcw-ind-legend-actions {\n    position: static;\n    width: auto;\n    height: auto;\n    overflow: visible;\n    clip-path: none;\n  }\n\n  /* Finger-sized targets. */\n  .tcw-ind-legend-act,\n  .tcw-ind-legend-toggle {\n    min-width: 28px;\n    min-height: 24px;\n  }\n}\n\n.tcw-ind-legend-act {\n  display: inline-grid;\n  place-items: center;\n  width: 20px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-act:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-act[data-act='remove']:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ind-legend-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  margin-top: 1px;\n  padding: 1px var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.tcw-ind-legend-toggle[hidden] {\n  display: none;\n}\n\n.tcw-ind-legend-toggle:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-name:focus-visible,\n.tcw-ind-legend-act:focus-visible,\n.tcw-ind-legend-toggle:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* === Sidebar === */\n\n/* The drawing tools' button and icon as drawn (the dock's rail has the same): never wider than\n   their column less 3 px a side (a narrow `sizes.sidebar` of yours shrinks them), nor taller\n   than a short column leaves room for (`--tcw-tool-fit`, set by toolFit.ts on the column); the\n   icon at most four fifths of its button, as a compact look's 16 in 20. */\n.tcw-root, .tcw-sidebar {\n  --tcw-tool-size: min(var(--tcw-tool-h), calc(var(--tcw-sidebar-w) - 6px), var(--tcw-tool-fit, 999px));\n  --tcw-tool-icon-size: min(var(--tcw-tool-icon), calc(var(--tcw-tool-size) * 0.8));\n}\n\n.tcw-sidebar {\n  width: var(--tcw-sidebar-w);\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-end: var(--tcw-border-w) solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* The buttons' own 1px margins at its ends make up the rest of the gap: as tall as its tools,\n     768 px high in the Print look, it doesn't scroll by those 2 px. */\n  padding: calc(var(--tcw-space-3) - 1px) 0;\n  /* On a short screen the tools scroll; the menus sit outside it. */\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.tcw-sidebar::-webkit-scrollbar {\n  display: none;\n}\n.tcw-sidebar > * {\n  flex-shrink: 0;\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n  /* The column's width, its button centred: the pointer on its way to the menu, which opens at\n     the column's edge, stays over the group the whole way. */\n  align-self: stretch;\n  display: flex;\n  justify-content: center;\n}\n\n/* The cursor button and its menu, as a drawing group's. */\n.tcw-cursor-wrap {\n  position: relative;\n  align-self: stretch;\n  display: flex;\n  justify-content: center;\n}\n\n.tcw-sidebar-btn {\n  width: var(--tcw-tool-size);\n  height: var(--tcw-tool-size);\n  margin: 1px 0;\n  /* The browser's button padding squeezed a glyph set straight in it (the cursor's) under its size. */\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-control-radius);\n}\n\n.tcw-sidebar-btn svg {\n  flex: none;\n  width: var(--tcw-tool-icon-size);\n  height: var(--tcw-tool-icon-size);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-on-icon-fg);\n  background: var(--tcw-on-icon-bg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n/* A group with more tools: a small triangle in the very corner of its button, pointing out. Not a\n   dot, which the drawing tools' icons use for their anchors, and away from the icon, so it doesn't\n   read as part of the tool. Right to left it sits in the other corner. */\n.tcw-multi-dot {\n  position: absolute;\n  inset-block-end: 1px;\n  inset-inline-end: 1px;\n  width: 5px;\n  height: 5px;\n  clip-path: polygon(100% 0, 100% 100%, 0 100%);\n  background: var(--tcw-text-muted);\n  opacity: 0.8;\n}\n[dir='rtl'] .tcw-multi-dot {\n  clip-path: polygon(0 0, 100% 100%, 0 100%);\n}\n\n/* The drawing tools' sections: always a hairline (it groups the tools), even in\n   looks that drop the rules between toolbar groups. */\n.tcw-sidebar-divider {\n  width: calc(var(--tcw-tool-size) * 0.618);\n  height: max(1px, var(--tcw-sep-w));\n  background: var(--tcw-divider);\n  margin: var(--tcw-space-3) 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 30;\n  padding: var(--tcw-menu-pad);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n/* Spans the gap to the toolbar button: crossing it stays inside the menu. */\n.tcw-flyout::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  right: 100%;\n  width: 8px;\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A kind's name in a menu of several, set as a menu's own name is. */\n.tcw-flyout-heading {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-label-size);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A hairline over each kind but the first sets them apart. */\n.tcw-flyout-row + .tcw-flyout-heading {\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n}\n\n.tcw-flyout-hint {\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-flyout-item {\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: none;\n  background: transparent;\n  text-align: start;\n  font-family: inherit;\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-flyout-item:focus-visible {\n  outline: none;\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(12, 12, 10, 0.42);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* A text drawing's words typed in place, over its box on the chart; under any dialog. */\n.tcw-inline-text {\n  position: fixed;\n  inset: 0;\n  z-index: 90;\n  pointer-events: none;\n}\n.tcw-inline-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  outline: none;\n  overflow: hidden;\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  pointer-events: auto;\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-dialog-radius);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  max-height: 82dvh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-dialog-shadow);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* A dialog's title is phi times its text (21 to 13). */\n.tcw-modal-header h3 {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n/* The close sized from the title, so it holds its own beside it in every look: its target phi times\n   the title (34 at 21), its icon root phi of it (27), whose cross, half the icon's grid, is about the\n   title's capitals, its stroke near 2 px. At 16 the cross was 8 px of 1.2 px lines under a 21 px title.\n   The negative margins keep the header as tall as before and the cross's edge at the text's edge. */\n.tcw-modal-close {\n  --tcw-close-box: calc(var(--tcw-font-size-display) * 1.618);\n  --tcw-close-icon: calc(var(--tcw-font-size-display) * 1.272);\n  flex: none;\n  width: var(--tcw-close-box);\n  height: var(--tcw-close-box);\n  margin-block: calc((var(--tcw-close-box) - var(--tcw-font-size-display) * 1.2) / -2);\n  margin-inline-end: calc((var(--tcw-close-box) - var(--tcw-close-icon) / 2) / -2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* A whole, even box where the browser can round one: 34, not 33.98, so the cross is centred on whole pixels. */\n@supports (width: round(nearest, 1px, 2px)) {\n  .tcw-modal-close {\n    --tcw-close-box: round(nearest, calc(var(--tcw-font-size-display) * 1.618), 2px);\n  }\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-close:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-close svg {\n  width: var(--tcw-close-icon);\n  height: var(--tcw-close-icon);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  /* Four tabs in a long language on a phone: they wrap rather than clip. No overflow here: in the\n     dialog's column it would let a long body squash the tabs, and clip the underline of the active one. */\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  gap: var(--tcw-space-2);\n  padding: var(--tcw-tabs-pad-block) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  flex-shrink: 0;\n  white-space: nowrap;\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: var(--tcw-tab-line) solid transparent;\n  border-radius: var(--tcw-tab-radius);\n  margin-bottom: calc(var(--tcw-tab-line) / -2);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-tab-hover);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-modal-body {\n  padding: var(--tcw-space-6);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: var(--tcw-space-6);\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: var(--tcw-label-size);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-bottom: var(--tcw-space-4);\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-4) 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* A number field's hint goes on a line of its own, under the field. */\n.tcw-settings-row--number {\n  flex-wrap: wrap;\n}\n\n.tcw-settings-hint {\n  flex-basis: 100%;\n  padding-top: var(--tcw-space-2);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n  text-align: end;\n}\n\n/* Empty, it takes no room but stays rendered: a live region that appears with its text is often not read out. */\n.tcw-settings-hint:empty {\n  padding-top: 0;\n}\n\n.tcw-settings-label {\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: var(--tcw-radius-xs);\n}\n\n.tcw-color-hex {\n  font-size: var(--tcw-font-size-xs);\n  /* Hex letters vary in width in a sans face: a monospaced one keeps the codes one width. */\n  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n/* A colour left to the part itself: the swatch shows where the picker starts, faded. */\n.tcw-color-auto input[type='color'] {\n  opacity: 0.45;\n  border-style: dashed;\n}\n\n.tcw-color-auto .tcw-color-hex {\n  font-family: inherit;\n  font-style: italic;\n}\n\n.tcw-color-auto-btn {\n  height: 24px;\n  padding: 0 8px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-color-auto-btn:hover,\n.tcw-color-auto-btn:focus-visible {\n  color: var(--tcw-text);\n  border-color: var(--tcw-accent);\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  /* As tall as the number field beside it (32); the classic densities keep their 30. */\n  box-sizing: border-box;\n  min-height: calc(32px - 2 * var(--tcw-odd));\n  padding: 6px 10px;\n  font-size: var(--tcw-font-size-sm);\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n}\n\n.tcw-reset-link {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: var(--tcw-space-4) var(--tcw-space-6);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-done-btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  /* Above sidebar buttons that overflow a short chart; menus (z 30+) stay on top. */\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--tcw-space-4) - var(--tcw-odd)) 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: var(--tcw-font-size-xs);\n  line-height: var(--tcw-line-xs);\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n}\n\n/* The bar holds the keyboard when a refit hides every button it could go to. */\n.tcw-statusbar:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-status-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-inline-start: auto;\n  /* Never narrower than what it holds, so the clock at its end stays whole: the range presets give way instead. */\n  flex: none;\n  white-space: nowrap;\n}\n\n/* Range presets + go to date, bottom left. The bar takes the room the rest leaves and\n   clips what's past it; WidgetStatusBar.fit folds that under \"more\". Logical margins,\n   so right to left it keeps its gap before the right group. */\n.tcw-range-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  margin-block: -4px;\n  margin-inline: -8px 12px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n/* A narrow widget (a phone, a narrow column, a grid's cell): the range presets close up. */\n.tcw-root[data-tcw-narrow] .tcw-range-btn[data-range] {\n  padding: 4px 5px;\n}\n\n/* What the bar has folded, and \"more\" while nothing is. */\n.tcw-statusbar [data-tcw-folded],\n.tcw-statusbar:not(.tcw-statusbar--folded) .tcw-range-more {\n  display: none;\n}\n\n.tcw-range-btn {\n  flex-shrink: 0;\n  padding: 4px calc(var(--tcw-space-4) - var(--tcw-odd));\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: 0.02em;\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-range-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-range-btn:active {\n  color: var(--tcw-accent);\n}\n\n.tcw-range-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-range-goto,\n.tcw-range-more {\n  display: inline-grid;\n  place-items: center;\n  padding: 4px 6px;\n}\n\n.tcw-range-goto {\n  margin-inline-start: 6px;\n}\n\n.tcw-range-goto svg,\n.tcw-range-more svg {\n  display: block;\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--tcw-space-4) - var(--tcw-odd));\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out 3;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n/* A feed that is connected but runs behind the market: a ring, not the live dot, and no pulse. Told from it by shape, on a phone where its words are folded away too. */\n.tcw-status-dot.tcw-delayed {\n  background: transparent;\n  box-shadow: inset 0 0 0 2px var(--tcw-text-dim);\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  /* The dock's width to start (a panel of the dock takes the panel's): four figures fit. */\n  width: 262px;\n  flex-shrink: 0;\n  /* Its rows read its width: a narrow panel drops a column (see the move, below). */\n  container: tcw-watchlist / inline-size;\n  background: var(--tcw-bg-surface);\n  border-inline-start: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px 6px 8px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* The shown list's name: opens the lists menu. */\n.tcw-watchlist-name {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  text-align: start;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.tcw-watchlist-name::after {\n  content: '';\n  flex: none;\n  width: 0;\n  height: 0;\n  margin-inline-start: auto;\n  border: 4px solid transparent;\n  border-top-color: currentColor;\n  border-bottom-width: 0;\n  opacity: 0.7;\n}\n\n.tcw-watchlist-add {\n  flex: none;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  line-height: 1;\n  cursor: pointer;\n}\n\n.tcw-watchlist-name:hover,\n.tcw-watchlist-add:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-watchlist-name:focus-visible,\n.tcw-watchlist-add:focus-visible,\n.tcw-watchlist-input:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The lists menu, under the header. */\n.tcw-watchlist-menu {\n  top: calc(100% - 2px);\n  left: 6px;\n  right: 6px;\n  margin-top: 0;\n}\n.tcw-watchlist-count {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-watchlist-menu .tcw-danger {\n  color: var(--tcw-red);\n}\n\n/* Naming a list in place. */\n.tcw-watchlist-input {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h-sm);\n  padding: 0 8px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-watchlist-empty {\n  /* Across the list's grid: on its own it would land in the 2px gutter. */\n  grid-column: 1 / -1;\n  padding: 16px 14px;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n}\n\n/*\n * A row's remove button shows on hover or focus, in a column of its own after\n * the numbers: over them, it hid the price and the change of the row the\n * keyboard was on.\n */\n.tcw-watchlist-remove {\n  display: grid;\n  place-items: center;\n  width: var(--tcw-watchlist-remove);\n  height: var(--tcw-watchlist-remove);\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  line-height: 1;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-watchlist-row:hover .tcw-watchlist-remove,\n.tcw-watchlist-row:focus-within .tcw-watchlist-remove {\n  opacity: 1;\n}\n.tcw-watchlist-remove:hover {\n  color: var(--tcw-red);\n}\n.tcw-watchlist-row.tcw-watchlist-dragging {\n  opacity: 0.45;\n}\n\n/*\n * One grid for the head and the rows (each a subgrid of it), so the price,\n * the move and the change line up in columns from row to row. The columns\n * come from the script (`--tcw-watchlist-columns`): a sparkline and the\n * remove button each add one. The edges are columns too, a gutter each: a\n * subgrid's own padding would push its last cell past the panel.\n */\n.tcw-watchlist-list {\n  --tcw-watchlist-remove: 20px;\n  /* With the gap beside it, 10px from the panel's edge to the first and last cell. */\n  --tcw-watchlist-gutter: 2px;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 0 4px;\n  display: grid;\n  grid-template-columns: var(--tcw-watchlist-columns, var(--tcw-watchlist-gutter) minmax(0, 1fr) auto auto auto var(--tcw-watchlist-gutter));\n  column-gap: 8px;\n  align-content: start;\n}\n\n.tcw-watchlist-columns,\n.tcw-watchlist-row {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n  align-items: center;\n}\n/* The cells start after the leading gutter; the rest follow in order. */\n.tcw-watchlist-columns > :first-child,\n.tcw-watchlist-row > :first-child {\n  grid-column-start: 2;\n}\n\n/* The columns' names: small and quiet, held at the top as the rows scroll. */\n.tcw-watchlist-columns {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  height: 20px;\n  background: var(--tcw-bg-surface);\n  border-bottom: 1px solid var(--tcw-border);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  white-space: nowrap;\n}\n.tcw-watchlist-columns > :not(.tcw-watchlist-column-symbol) {\n  text-align: end;\n}\n\n/* A line a symbol, as short as its figures read: more of the list in sight. */\n.tcw-watchlist-row {\n  position: relative;\n  min-height: 24px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  outline: none;\n}\n\n/* The mark of the row in use or under the keyboard: a bar at its start, in the leading gutter. */\n.tcw-watchlist-row::before {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  width: 2px;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-watchlist-row:focus-visible::before,\n.tcw-watchlist-row.tcw-watchlist-active::before {\n  background: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n/* With a logo in the list, a row without one keeps its room: the tickers line up. */\n.tcw-watchlist-logos .tcw-watchlist-symbol:not(.tcw-watchlist-symbol-logo) {\n  padding-inline-start: calc(1.25em + var(--tcw-space-2));\n}\n\n/* A symbol's logo before its ticker, as tall as the ticker's capitals, cornered as the look's tags.\n   Inline whatever the page's own reset says of images (`img { display: block }` put it on a line of its own). */\n.tcw-watchlist-symbol .tcw-watchlist-logo {\n  display: inline-block;\n  width: 1.25em;\n  height: 1.25em;\n  margin-inline-end: var(--tcw-space-2);\n  vertical-align: -0.25em;\n  border-radius: var(--tcw-tag-radius);\n  object-fit: contain;\n}\n\n.tcw-watchlist-spark {\n  width: 48px;\n  height: 18px;\n  align-self: center;\n}\n\n.tcw-watchlist-price,\n.tcw-watchlist-move,\n.tcw-watchlist-change {\n  text-align: end;\n  white-space: nowrap;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-watchlist-price {\n  color: var(--tcw-text);\n}\n\n/* A panel too narrow for four figures drops the move first: the price and the % still read, and the\n   name keeps its room. 300 holds the longest a row's figures run to, a price of 0.00000528 and a\n   move of -0.00000003, beside \"DOGE/USDT\"; the dock opens narrower, so it starts with three. */\n@container tcw-watchlist (width < 300px) {\n  .tcw-watchlist-move,\n  .tcw-watchlist-column-move {\n    display: none;\n  }\n}\n\n.tcw-watchlist-move.tcw-up,\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-move.tcw-down,\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n/* === Toast === */\n\n.tcw-toast-icon {\n  display: inline-flex;\n  vertical-align: -2px;\n  margin-inline-end: 7px;\n  color: var(--tcw-accent);\n}\n.tcw-toast-error .tcw-toast-icon { color: var(--tcw-red); }\n\n/* Over an open dialog: above its backdrop, at the window's foot. */\n.tcw-toast.tcw-toast-over {\n  position: fixed;\n  z-index: 120;\n}\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: var(--tcw-space-4) var(--tcw-space-5);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-toast-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay bar ===\n * A transport over the foot of the main pane: step back / play / step\n * forward, where the replay is (its date and a track with the played part\n * filled), its pace (speed, step), and the ways out (pick another bar, back\n * to now). Only --tcw-* tokens; its sizes come from the look's own ladder.\n * The widget sets where it sits (--tcw-replay-foot, --tcw-replay-plot-*)\n * from the main pane, and the tier (data-fit) from the room it has.\n */\n\n/* Picking the replay start: the bars right of the pointer would be hidden. */\n.tcw-replay-shade {\n  position: absolute;\n  z-index: 4;\n  pointer-events: none;\n  background: color-mix(in srgb, var(--tcw-bg) 62%, transparent);\n  border-inline-start: 1.5px dashed var(--tcw-accent);\n}\n\n.tcw-replay-bar {\n  /* Buttons are the look's controls; Play two small steps above them. */\n  --tcw-replay-btn: var(--tcw-control-h);\n  --tcw-replay-play: calc(var(--tcw-control-h) + 2 * var(--tcw-space-2));\n  --tcw-replay-track-w: calc(var(--tcw-space-7) * 6);\n  --tcw-replay-track-min: calc(var(--tcw-space-7) * 3);\n  --tcw-replay-rail: var(--tcw-space-2);\n  --tcw-replay-head-w: var(--tcw-space-2);\n  --tcw-replay-head-h: var(--tcw-space-5);\n  position: absolute;\n  /* On the main pane's foot (over the volume, clear of the bottom panes), above the time axis without them. */\n  bottom: calc(var(--tcw-replay-foot, 30px) + var(--tcw-space-4));\n  inset-inline: var(--tcw-replay-plot-start, 0px) var(--tcw-replay-plot-end, 0px);\n  /* Centred on the plot by its margins: an entrance on `transform` would undo a translate. */\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - var(--tcw-replay-plot-start, 0px) - var(--tcw-replay-plot-end, 0px) - 2 * var(--tcw-space-4));\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity, 100%), transparent);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  /* The look's menu shadow carries its hairline (Print, Terminal, Capsule): no border of its own on top. */\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.2;\n  animation: tcw-sel-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-group,\n.tcw-replay-slot {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  min-width: 0;\n}\n.tcw-replay-bar [hidden] { display: none !important; }\n/* The step field on a single step: nothing there, no gap for it. */\n.tcw-replay-slot:empty { display: none; }\n\n/* Hairlines between the groups where the look draws separators (Print, Terminal); a gap in the others. */\n.tcw-replay-sep {\n  flex: none;\n  align-self: stretch;\n  width: var(--tcw-sep-w);\n  margin-block: var(--tcw-space-2);\n  background: var(--tcw-divider);\n}\n\n/* --- Buttons --- */\n.tcw-replay-btn {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  inline-size: var(--tcw-replay-btn);\n  block-size: var(--tcw-replay-btn);\n  padding: 0;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-replay-btn > svg,\n.tcw-replay-text-btn svg { width: var(--tcw-icon); height: var(--tcw-icon); flex: none; }\n.tcw-replay-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-replay-btn:active { background: var(--tcw-active-bg); transform: scale(0.94); }\n.tcw-replay-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* Play: the one filled control. Its focus ring stands off the fill, or it would vanish into it. */\n.tcw-replay-btn.tcw-replay-play {\n  inline-size: var(--tcw-replay-play);\n  block-size: var(--tcw-replay-play);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-replay-btn.tcw-replay-play:hover { background: var(--tcw-accent-hover); color: var(--tcw-accent-ink); }\n.tcw-replay-btn.tcw-replay-play:focus-visible {\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated), 0 0 0 calc(2 * var(--tcw-space-1)) var(--tcw-accent-line);\n}\n\n.tcw-replay-btn:disabled,\n.tcw-replay-text-btn:disabled,\n.tcw-replay-scrubber:disabled,\n.tcw-replay-speed:disabled { opacity: 0.4; cursor: default; transform: none; }\n/* Nothing left to play: a muted fill, not a faded accent that reads as pressed. */\n.tcw-replay-btn.tcw-replay-play:disabled { background: var(--tcw-active-bg); color: var(--tcw-text-muted); opacity: 1; }\n\n/* --- Where the replay is --- */\n.tcw-replay-timeline {\n  flex: 1 1 auto;\n  gap: var(--tcw-space-4);\n}\n.tcw-replay-time {\n  flex: none;\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  white-space: nowrap;\n}\n.tcw-replay-group[aria-busy='true'] .tcw-replay-time,\n.tcw-replay-group[aria-busy='true'] .tcw-replay-hint { color: var(--tcw-text-muted); }\n\n.tcw-root input[type='range'].tcw-replay-scrubber {\n  --tcw-replay-rest: var(--tcw-border-strong);\n  flex: 1 1 var(--tcw-replay-track-w);\n  min-inline-size: var(--tcw-replay-track-min);\n  inline-size: var(--tcw-replay-track-w);\n  block-size: var(--tcw-replay-btn);\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n/* Measured at its least: the bar's width with no slack in the track. */\n.tcw-replay-bar[data-measure] { max-width: none; animation: none; }\n.tcw-replay-bar[data-measure] input[type='range'].tcw-replay-scrubber { inline-size: var(--tcw-replay-track-min); flex: none; }\n.tcw-root input[type='range'].tcw-replay-scrubber:hover { --tcw-replay-rest: var(--tcw-text-muted); }\n.tcw-root input[type='range'].tcw-replay-scrubber:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n/* The played part in the accent, the rest a rail; Firefox fills it itself. */\n.tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-runnable-track {\n  block-size: var(--tcw-replay-rail);\n  border-radius: var(--tcw-radius-xs);\n  background: linear-gradient(to right, var(--tcw-accent) 0 var(--tcw-replay-done, 0%), var(--tcw-replay-rest) var(--tcw-replay-done, 0%) 100%);\n}\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-track { block-size: var(--tcw-replay-rail); border-radius: var(--tcw-radius-xs); background: var(--tcw-replay-rest); }\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-progress { block-size: var(--tcw-replay-rail); border-radius: var(--tcw-radius-xs); background: var(--tcw-accent); }\n/* A playhead, as the chart marks the replay's cut: a short upright in ink, rounded as the look rounds. */\n.tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: var(--tcw-replay-head-w);\n  block-size: var(--tcw-replay-head-h);\n  margin-top: calc((var(--tcw-replay-rail) - var(--tcw-replay-head-h)) / 2);\n  border: 0;\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-text);\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-root input[type='range'].tcw-replay-scrubber:hover::-webkit-slider-thumb,\n.tcw-root input[type='range'].tcw-replay-scrubber:active::-webkit-slider-thumb { transform: scaleY(1.25); }\n.tcw-root input[type='range'].tcw-replay-scrubber::-moz-range-thumb {\n  inline-size: var(--tcw-replay-head-w);\n  block-size: var(--tcw-replay-head-h);\n  border: 0;\n  border-radius: var(--tcw-radius-xs);\n  background: var(--tcw-text);\n  box-shadow: 0 0 0 var(--tcw-space-1) var(--tcw-bg-elevated);\n}\n\n/* --- Pace: speed and step, each a labelled field --- */\n.tcw-replay-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n.tcw-replay-chip-label {\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  white-space: nowrap;\n}\n.tcw-root .tcw-replay-chip select.tcw-replay-speed {\n  block-size: var(--tcw-replay-btn);\n  padding-block: 0;\n  padding-inline-start: var(--tcw-space-4);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n\n/* --- The ways out, and picking --- */\n.tcw-replay-text-btn {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  block-size: var(--tcw-replay-btn);\n  padding-inline: var(--tcw-space-4);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-weight: var(--tcw-weight);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-replay-text-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-replay-text-btn:active { background: var(--tcw-active-bg); transform: scale(0.97); }\n.tcw-replay-text-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n/* Random bar: outlined, the one thing to press while picking. */\n.tcw-replay-text-btn.tcw-replay-ghost { border: var(--tcw-border-w) solid var(--tcw-border-strong); color: var(--tcw-text); }\n/* The close glyph is the phone's: on wider bars the words say it. */\n.tcw-replay-close-icon { display: none; }\n/* At the last bar, the way back to now is the next thing to do. */\n.tcw-replay-bar--ended .tcw-replay-realtime { background: var(--tcw-accent); color: var(--tcw-accent-ink); }\n.tcw-replay-bar--ended .tcw-replay-realtime:hover { background: var(--tcw-accent-hover); color: var(--tcw-accent-ink); }\n\n.tcw-replay-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-3);\n  color: var(--tcw-text-dim);\n  white-space: nowrap;\n}\n.tcw-replay-hint > svg { flex: none; width: var(--tcw-icon); height: var(--tcw-icon); color: var(--tcw-accent); }\n\n/* --- Narrower: the fields lose their captions (they stay their names) --- */\n.tcw-replay-bar:is([data-fit='compact'], [data-fit='stack']) .tcw-replay-chip-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* --- A phone, or a narrow chart: two rows across the plot, where the replay is on top --- */\n.tcw-replay-bar[data-fit='stack'] {\n  /* Touch targets: 40 px (44 for Play) at least, as the toolbar's on a phone. */\n  --tcw-replay-btn: max(40px, var(--tcw-control-h));\n  --tcw-replay-play: max(44px, calc(var(--tcw-control-h) + 2 * var(--tcw-space-2)));\n  inset-inline: var(--tcw-space-4);\n  width: auto;\n  max-width: none;\n  margin-inline: 0;\n  flex-wrap: wrap;\n  gap: var(--tcw-space-2);\n}\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-sep { display: none; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-timeline {\n  order: -2;\n  /* The first row, beside the close button; the rest wraps below. */\n  flex: 1 1 calc(100% - var(--tcw-replay-btn) - 2 * var(--tcw-space-2));\n  box-sizing: border-box;\n  padding-inline-start: var(--tcw-space-3);\n}\n.tcw-replay-bar[data-fit='stack'] input[type='range'].tcw-replay-scrubber { block-size: var(--tcw-menu-item-h); min-inline-size: 0; }\n/* Back to realtime closes the bar from the first row, a glyph touch users know. */\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-exits { display: contents; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-realtime { order: -1; inline-size: var(--tcw-replay-btn); padding: 0; justify-content: center; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-realtime .tcw-replay-text { display: none; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-close-icon { display: inline-flex; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-transport { flex: 1 0 auto; }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-hint { white-space: normal; flex: 1 0 100%; padding-block: var(--tcw-space-2); }\n.tcw-replay-bar[data-fit='stack'] .tcw-replay-picking { display: contents; }\n\n/* While the bar holds the plot's foot, what lives there makes room: the toasts and the phone's drawing button. */\n.tcw-root[data-tcw-replay] > .tcw-toast:not(.tcw-toast-over) {\n  bottom: calc(var(--tcw-replay-lift, 0px) + var(--tcw-space-4));\n}\n.tcw-root[data-tcw-narrow][data-tcw-replay] > .tcw-body > .tcw-sidebar-fab {\n  bottom: calc(var(--tcw-replay-lift, 0px) + var(--tcw-space-4));\n}\n\n@media (forced-colors: active) {\n  .tcw-replay-bar { border: 1px solid CanvasText; }\n  .tcw-replay-btn.tcw-replay-play { border: 1px solid ButtonText; }\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-runnable-track { background: GrayText; }\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb { background: Highlight; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-replay-bar { animation: none; }\n  .tcw-replay-btn,\n  .tcw-replay-text-btn,\n  .tcw-root input[type='range'].tcw-replay-scrubber::-webkit-slider-thumb { transition: none; }\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: max(44px, var(--tcw-toolbar-h));   /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    height: max(40px, var(--tcw-control-h));   /* fatter tap target */\n    padding: 0 12px;\n    font-size: var(--tcw-font-size);\n  }\n  .tcw-btn-icon {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-sidebar {\n    width: max(44px, var(--tcw-sidebar-w));\n  }\n  .tcw-sidebar-btn {\n    width: max(40px, var(--tcw-tool-size));\n    height: max(40px, var(--tcw-tool-size));\n  }\n  .tcw-modal {\n    width: 94vw;\n    border-radius: var(--tcw-dialog-radius);\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal {\n    top: auto;\n    /* Above the on-screen keyboard (the widget sets it from visualViewport). */\n    bottom: var(--tcw-keyboard-inset, 0px);\n    padding-left: env(safe-area-inset-left, 0px);\n    padding-right: env(safe-area-inset-right, 0px);\n    left: 0;\n    right: 0;\n    transform: none;\n    /* The border and the safe-area padding inside the screen's width. */\n    box-sizing: border-box;\n    width: 100vw;\n    max-width: 100vw;\n    /* Less the on-screen keyboard: a sheet's top never goes above the screen. */\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets: taller, not more padding, so a tab's text stays inside its chip. */\n  .tcw-modal-tab {\n    min-height: 40px;\n    padding-inline: 16px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: var(--tcw-font-size-lg);\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: 2px 5px;\n  border-radius: var(--tcw-tag-radius);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    max-height: 40dvh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: var(--tcw-space-2) 8px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: var(--tcw-weight-strong); }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n/*\n * Placing a bracket: a strip at the foot of the chart, over its time axis\n * (30 px, the chart's TIME_AXIS_HEIGHT), clear of the tags along its top; its\n * name and Place in the side's colour. Centred by its margins, not a\n * transform: the entrance animation ends on `transform: none`, which left it\n * starting at the middle.\n */\n.tcw-bracket-bar {\n  position: absolute;\n  bottom: calc(30px + var(--tcw-space-5));\n  inset-inline: 0;\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - 2 * var(--tcw-space-4));\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-bar[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-bracket-bar[data-side='sell'] { --tcw-side: var(--tcw-red); }\n/* The name gives way first: in German or Russian it would push Place off a phone. */\n.tcw-bracket-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-side, var(--tcw-text));\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* The replay bar has the chart's foot while it shows: the bracket's goes to the top. */\n.tcw-root[data-tcw-replay] .tcw-bracket-bar {\n  top: var(--tcw-space-4);\n  bottom: auto;\n}\n.tcw-bracket-hint {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.tcw-bracket-cancel,\n.tcw-bracket-confirm {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-5);\n  border-radius: var(--tcw-control-radius);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-bracket-cancel {\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  background: transparent;\n  color: var(--tcw-text);\n}\n.tcw-bracket-cancel:hover { background: var(--tcw-hover-bg); }\n/* The ground's own colour reads on the side's: dark on the dark theme's light greens, paper on the light theme's deep ones. */\n.tcw-bracket-confirm {\n  border: none;\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-bracket-confirm:hover { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-bracket-cancel:focus-visible,\n.tcw-bracket-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar {\n    inset-inline: var(--tcw-space-4);\n    width: auto;\n    max-width: none;\n  }\n  .tcw-bracket-hint { display: none; }\n  .tcw-bracket-label { margin-inline-end: auto; }\n  .tcw-bracket-cancel,\n  .tcw-bracket-confirm { height: 34px; }\n}\n\n@media (forced-colors: active) {\n  .tcw-bracket-bar { border: 1px solid CanvasText; }\n  .tcw-bracket-confirm { border: 1px solid ButtonText; }\n  .tcw-bracket-cancel:focus-visible,\n  .tcw-bracket-confirm:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: var(--tcw-radius-xs); }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  text-align: start;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: end;\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n/* Narrow on a desktop; on a phone a sheet across the screen like every dialog. */\n@media (min-width: 641px) {\n  .tcw-modal-narrow {\n    max-width: 360px;\n  }\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-select {\n  width: 150px;\n  padding-right: 4px;\n  cursor: pointer;\n}\n/* A level: its value and a remove button. */\n.tcw-indi-level {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.tcw-indi-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-indi-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n.tcw-indi-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n.tcw-indi-add {\n  margin-top: 8px;\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* A compare: its colour and symbol, then how it is compared, taking the room left before its button. */\n.tcw-tree-compare {\n  justify-content: flex-start;\n}\n.tcw-tree-compare .tcw-tree-name {\n  flex: 0 1 auto;\n}\n.tcw-tree-compare .tcw-tree-del {\n  flex: none;\n  margin-inline-start: auto;\n}\n.tcw-tree-way {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n/* A drawing row's grip: dragged, it moves the drawing up or down the order. */\n.tcw-tree-btn.tcw-tree-grip {\n  flex: none;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-tree-row:not(:hover) .tcw-tree-grip:not(:focus-visible) {\n  opacity: 0.45;\n}\n/* The row a dragged drawing would take the place of. */\n.tcw-tree-row.tcw-tree-drop {\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n/* A drawing's name selects it on the chart. */\n.tcw-tree-name.tcw-tree-pick {\n  flex: 1 1 auto;\n  cursor: pointer;\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-group .tcw-tree-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-tree-group .tcw-tree-name svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-member {\n  margin-left: 14px;\n  padding-left: 10px;\n  border-inline-start: 1px solid var(--tcw-border-strong);\n  border-radius: 0 var(--tcw-radius-sm) var(--tcw-radius-sm) 0;\n}\n.tcw-tree-rename {\n  flex: 1;\n  min-width: 0;\n  padding: 3px 6px;\n  border: 1px solid var(--tcw-accent-line);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-tree-rename:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n    max-height: 30dvh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  /* Except the loader's slow glow (opacity only): without it a long wait\n     looks frozen. */\n  .tcw-root .tcw-loading-candle {\n    animation-duration: 2.4s !important;\n    animation-iteration-count: infinite !important;\n    animation-delay: var(--tcw-delay, 0ms) !important;\n  }\n}\n\n/* --- Drawing settings dialog --- */\n.tcw-drawing-text {\n  min-height: 56px;\n  resize: vertical;\n  font-family: inherit;\n}\n/* The text a drawing writes takes the dialog's width, under its name. */\n.tcw-text-row {\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--tcw-space-3);\n}\n.tcw-text-row .tcw-drawing-text { box-sizing: border-box; width: 100%; }\n.tcw-levels-editor { display: grid; gap: var(--tcw-space-3); }\n/* Two columns of levels on a desktop, as a Fibonacci tool has a dozen. */\n.tcw-levels-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-3) var(--tcw-space-6);\n  max-height: 260px;\n  overflow-y: auto;\n  padding-inline-end: var(--tcw-space-1);\n}\n@media (max-width: 640px) {\n  .tcw-levels-grid { grid-template-columns: minmax(0, 1fr); }\n}\n.tcw-level-row {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--tcw-space-3);\n}\n.tcw-level-row .tcw-indi-input { box-sizing: border-box; width: 100%; min-width: 0; }\n.tcw-level-row input[type='checkbox'] { accent-color: var(--tcw-accent); }\n.tcw-level-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-radius-sm, 4px);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-level-remove:hover { color: var(--tcw-text); background: var(--tcw-bg-elevated); }\n.tcw-level-remove:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-level-add { justify-self: start; }\n\n/* --- Context menu (right-click on a drawing) --- */\n.tcw-context-menu {\n  position: absolute;\n  z-index: 70;\n  min-width: 200px;\n  /* Taller than the room (many templates, say), it scrolls. */\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-menu-pad);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  /* Frosted with the other menus (`ui.blur` above 0): the chart under it blurred, not sharp behind its words. */\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n}\n.tcw-context-item {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  width: 100%;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-menu-row-pad);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-context-item svg, .tcw-context-icon { flex: none; width: 14px; height: 14px; color: var(--tcw-text-muted); }\n.tcw-context-item:hover, .tcw-context-item:focus-visible { background: var(--tcw-hover-bg); outline: none; }\n.tcw-context-item:focus-visible { box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-context-danger, .tcw-context-danger svg { color: var(--tcw-red); }\n.tcw-context-sep { height: 1px; margin: var(--tcw-space-2) var(--tcw-space-4); background: var(--tcw-divider); }\n.tcw-context-label { flex: 1; min-width: 0; }\n/* A shortcut, a count, and the mark of a submenu, at the row's end. */\n.tcw-context-key, .tcw-context-count {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-context-item svg.tcw-context-more { width: 12px; height: 12px; }\n/* Right to left, a submenu opens to the left: its marks point there. */\n[dir='rtl'] .tcw-context-more, [dir='rtl'] .tcw-context-back > svg { transform: scaleX(-1); }\n/* No keyboard under a finger: the keys stay named to a screen reader only. */\n@media (hover: none) { .tcw-context-key { display: none; } }\n.tcw-context-item[aria-expanded='true'] { background: var(--tcw-hover-bg); }\n/* The choice made among radios: a dot where a switch has its tick. */\n.tcw-context-dot { display: grid; place-items: center; }\n.tcw-context-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tcw-text); }\n/* An entry that can be removed: its x on the row in hand, always on a touch screen. */\n.tcw-context-row { display: flex; align-items: center; border-radius: var(--tcw-menu-item-radius); }\n.tcw-context-row .tcw-context-item { flex: 1; min-width: 0; }\n.tcw-context-row:hover { background: var(--tcw-hover-bg); }\n.tcw-context-row:hover .tcw-context-item { background: transparent; }\n.tcw-context-remove {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  margin-inline-end: var(--tcw-space-1);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-context-row:hover .tcw-context-remove, .tcw-context-row:focus-within .tcw-context-remove { opacity: 1; }\n.tcw-context-remove:hover { color: var(--tcw-red); background: var(--tcw-hover-bg); }\n@media (hover: none) { .tcw-context-remove { opacity: 1; } }\n/* --- Toolbar over a selected drawing --- */\n.tcw-sel-toolbar {\n  position: absolute;\n  z-index: 65;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n  white-space: nowrap;\n  animation: tcw-sel-in var(--tcw-dur-fast) var(--tcw-ease-out);\n}\n@keyframes tcw-sel-in { from { opacity: 0; transform: translateY(3px); } }\n.tcw-sel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--tcw-space-3);\n  min-width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-btn svg { flex: none; }\n.tcw-sel-btn:hover, .tcw-sel-btn[aria-expanded=\"true\"] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-sel-btn:focus-visible, .tcw-sel-swatch:focus-visible, .tcw-sel-option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-sel-btn.tcw-sel-on { color: var(--tcw-accent); background: var(--tcw-accent-soft); }\n.tcw-sel-danger:hover { color: var(--tcw-red); background: var(--tcw-red-soft); }\n.tcw-sel-color {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 25%, transparent);\n}\n/* The fill picker: a square, where the line colour is a dot. */\n.tcw-sel-fill { border-radius: 3px; }\n/* The text colour picker: a letter over a bar in the text's colour. */\n.tcw-sel-text {\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1;\n  padding-bottom: 1px;\n  border-bottom: 3px solid var(--c, currentColor);\n}\n.tcw-sel-width {\n  display: inline-block;\n  width: 16px;\n  height: var(--w, 1px);\n  max-height: 6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n.tcw-sel-sep { flex: none; width: 1px; height: 18px; margin: 0 var(--tcw-space-2); background: var(--tcw-divider); }\n.tcw-sel-pop {\n  position: absolute;\n  z-index: 66;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n  padding: 4px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n}\n.tcw-sel-pop--color {\n  display: grid;\n  grid-template-columns: repeat(4, 24px);\n  gap: 6px;\n  min-width: 0;\n  padding: 8px;\n}\n.tcw-sel-swatch {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 20%, transparent);\n  cursor: pointer;\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-swatch:hover { transform: scale(1.1); }\n.tcw-sel-swatch.tcw-sel-on { box-shadow: 0 0 0 2px var(--tcw-bg-elevated), 0 0 0 4px var(--tcw-accent); }\n.tcw-sel-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: var(--tcw-menu-item-h);\n  padding: 4px 10px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-sel-option:hover { background: var(--tcw-bg-surface); }\n.tcw-sel-option.tcw-sel-on { color: var(--tcw-accent); }\n@media (prefers-reduced-motion: reduce) {\n  .tcw-sel-toolbar { animation: none; }\n  .tcw-sel-swatch { transition: none; }\n}\n\n/* --- The account: a panel under the chart; its head the tabs, the totals, a new order and its close. --- */\n.tcw-account-dock {\n  flex: none;\n}\n.tcw-account {\n  display: flex;\n  flex-direction: column;\n  /* 233, on the widget's φ ladder. */\n  height: 233px;\n  border-top: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n.tcw-account-head {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  padding-inline: var(--tcw-space-4) var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-account-tabs {\n  display: flex;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-account-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  border: 0;\n  border-radius: var(--tcw-tab-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.tcw-account-tab:hover { color: var(--tcw-text); background: var(--tcw-tab-hover); }\n.tcw-account-tab[aria-selected='true'] {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: inset 0 calc(-1 * var(--tcw-tab-line)) 0 var(--tcw-accent);\n}\n/* A tab's count: a figure in a soft pill. */\n.tcw-account-count {\n  min-width: 1.6em;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 999px;\n  background: var(--tcw-hover-bg);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n/* The open and realised P&L, on every tab, in the mono figures. Short of room, they keep their start: the open P&L's words stay whole. */\n.tcw-account-totals {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  justify-content: safe flex-end;\n  gap: var(--tcw-space-5);\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tcw-account-new {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  cursor: pointer;\n}\n.tcw-account-new:hover { background: var(--tcw-hover-bg); }\n.tcw-account-tab:focus-visible,\n.tcw-account-new:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-account-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n/* The rows: headings in the label case, figures set right in the mono type. */\n.tcw-account-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-account-table th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-align: start;\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  white-space: nowrap;\n}\n.tcw-account-table td {\n  height: calc(var(--tcw-control-h) + var(--tcw-space-2));\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  color: var(--tcw-text);\n  white-space: nowrap;\n}\n.tcw-account-table :is(th, td).tcw-num {\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n.tcw-account-table tbody tr:hover td { background: var(--tcw-hover-bg); }\n.tcw-account-side { font-weight: var(--tcw-weight-strong); }\n.tcw-account-buy, .tcw-account-up { color: var(--tcw-green); }\n.tcw-account-sell, .tcw-account-down { color: var(--tcw-red); }\n.tcw-account-actions { display: flex; justify-content: flex-end; gap: var(--tcw-space-1); }\n.tcw-account-empty {\n  margin: 0;\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/*\n * A narrow widget (a phone, a narrow column): the totals go under the tabs,\n * and each row is a card of named figures. The headings stay for a screen\n * reader, unseen: the cells name themselves on screen. The panel is a step\n * of phi taller (377) for two cards and more, at most 45% of a phone's screen.\n */\n.tcw-root[data-tcw-narrow] .tcw-account {\n  height: 377px;\n  max-height: 45vh;\n  max-height: 45dvh;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-head { flex-wrap: wrap; padding-block: var(--tcw-space-2); }\n/* The tabs give way (they scroll): New order and the close keep the first line. */\n.tcw-root[data-tcw-narrow] .tcw-account-tabs { flex: 1 1 0; }\n.tcw-root[data-tcw-narrow] .tcw-account-totals { order: 3; flex-basis: 100%; justify-content: flex-start; padding-inline: var(--tcw-space-3); }\n.tcw-root[data-tcw-narrow] .tcw-account-table thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table,\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody { display: block; }\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody tr {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-2) var(--tcw-space-5);\n  padding: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-3);\n  height: auto;\n  padding: 0;\n  border: 0;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td::before {\n  content: attr(data-label);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td:first-child,\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] { grid-column: 1 / -1; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label='']::before { content: none; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] .tcw-account-actions { width: 100%; }\n.tcw-root[data-tcw-narrow] .tcw-account-table .tcw-tree-btn { width: 34px; height: 34px; }\n\n@media (forced-colors: active) {\n  .tcw-account-tab[aria-selected='true'] { outline: 2px solid Highlight; }\n  .tcw-account-tab:focus-visible,\n  .tcw-account-new:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* --- Named layouts --- */\n.tcw-layouts-btn { max-width: 190px; }\n.tcw-layouts-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.tcw-layouts-dirty {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n}\n.tcw-name-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-dim); }\n.tcw-name-field .tcw-indi-input { width: 100%; height: 34px; font-size: var(--tcw-font-size); }\n\n/* --- Chart grid --- */\n.tcw-grid { background: var(--tcw-bg); }\n.tcw-grid-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: calc(var(--tcw-control-h) + 8px);\n  padding: 0 8px;\n  border-bottom: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-grid-bar::-webkit-scrollbar { display: none; }\n.tcw-grid-group { display: flex; align-items: center; gap: 2px; flex: none; }\n.tcw-grid-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: var(--tcw-label-tracking);\n  text-transform: var(--tcw-label-case);\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-sync[aria-pressed=\"true\"] { color: var(--tcw-accent); }\n.tcw-grid-cells {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  gap: 1px;\n  background: var(--tcw-border);\n}\n.tcw-grid-cell {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n.tcw-grid-cell-active::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--tcw-accent);\n  pointer-events: none;\n  z-index: 5;\n}\n/* The arrangement button: the one in use, and the picker it opens. */\n.tcw-grid-layout-btn {\n  gap: var(--tcw-space-2);\n  padding: 0 var(--tcw-space-3);\n}\n.tcw-grid-layout-btn > svg:first-child { color: var(--tcw-text); }\n.tcw-grid-layout-btn[aria-expanded='true'] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n/* A row for each chart count: the count, then its arrangements. */\n.tcw-grid-picker { min-width: 0; }\n.tcw-grid-picker-group {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--tcw-space-3);\n  padding: 1px var(--tcw-space-2);\n}\n.tcw-grid-picker-group + .tcw-grid-picker-group { border-top: 1px solid var(--tcw-divider); }\n.tcw-grid-picker-count {\n  flex: none;\n  min-width: 1.5em;\n  line-height: var(--tcw-control-h);\n  text-align: end;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-picker-row { display: flex; flex-wrap: wrap; gap: 2px; }\n.tcw-grid-picker-item[aria-checked='true'] {\n  background: var(--tcw-on-icon-bg);\n  color: var(--tcw-on-icon-fg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n/* --- Host toolbar buttons --- */\n.tcw-toolbar-host { display: inline-flex; align-items: center; gap: 2px; }\n.tcw-toolbar-host:empty { display: none; }\n.tcw-host-btn { display: inline-flex; align-items: center; gap: 4px; }\n\n/* --- Host sidebar buttons, status bar items, and the layer over the chart --- */\n.tcw-sidebar-host { display: flex; flex-direction: column; align-items: center; }\n.tcw-sidebar-host:empty { display: none; }\n/* Your items keep their width (the range presets fold for them), and on the left a gap\n   before the right group, whose auto margin closes up when the bar is full. */\n.tcw-status-host { display: flex; align-items: center; gap: 10px; flex: none; }\n.tcw-statusbar > .tcw-status-host { margin-inline-end: var(--tcw-space-5); }\n.tcw-status-host:empty { display: none; }\n.tcw-status-host-item { white-space: nowrap; }\n.tcw-status-host-btn {\n  margin: -4px -6px;\n  padding: 4px 6px;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-host-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-status-host-btn:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: -2px; }\n/* Over the plot and under the widget's own overlays; the pointer reaches the chart unless an element of yours takes it. */\n.tcw-host-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }\n\n/* --- Pane buttons (move, fold, maximise) --- */\n.tcw-pane-controls {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  gap: 1px;\n  transform: translateX(-100%);\n  padding: 1px;\n  border-radius: var(--tcw-radius-sm);\n  background: color-mix(in srgb, var(--tcw-bg) 80%, transparent);\n  opacity: 0.55;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-pane-controls:hover,\n.tcw-pane-controls:focus-within { opacity: 1; }\n.tcw-pane-btn {\n  display: inline-grid;\n  place-items: center;\n  width: 18px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-pane-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-pane-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tcw-accent-soft); }\n\n/* --- Typed interval --- */\n.tcw-interval-input {\n  position: absolute;\n  z-index: 20;\n  left: 50%;\n  top: 40%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg, 10px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-interval-field {\n  width: 150px;\n  height: 36px;\n  padding: 0 10px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xl);\n  font-weight: var(--tcw-weight-strong);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-interval-field[aria-invalid] { border-color: var(--tcw-red); }\n.tcw-interval-hint { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); max-width: 170px; }\n\n/* --- Alerts: lines, moves, bar close, expiry --- */\n.tcw-alerts-source { grid-column: auto; }\n.tcw-alerts-row-fields {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.tcw-alerts-row-fields[hidden] { display: none; }\n.tcw-alerts-row-fields > input[hidden] { display: none; }\n.tcw-alerts-row-fields:has(> input[hidden]) { grid-template-columns: 1fr; }\n.tcw-alerts-options { align-items: center; }\n.tcw-alerts-form .tcw-alerts-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-alerts-form .tcw-alerts-check input { width: auto; height: auto; }\n.tcw-alerts-form input[aria-invalid=\"true\"] { border-color: var(--tcw-red); }\n.tcw-alerts-row-meta { margin-top: 2px; font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); }\n.tcw-alerts-expired { opacity: 0.6; }\n\n/* --- Signal marker note --- */\n.tcw-marker-tip {\n  position: absolute;\n  z-index: 12;\n  pointer-events: none;\n  padding: 6px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.45;\n  font-variant-numeric: tabular-nums;\n  box-shadow: var(--tcw-menu-shadow);\n  max-width: 240px;\n}\n.tcw-marker-tip strong { display: block; font-size: var(--tcw-font-size-sm); }\n\n/* === Navigation over the chart ===\n * Centred on the plot's bottom edge, shown while a mouse is over the chart. */\n.tcw-nav {\n  position: absolute;\n  z-index: 15;\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, calc(-100% - 12px));\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-nav.tcw-nav-shown {\n  opacity: 1;\n  pointer-events: auto;\n}\n.tcw-nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  touch-action: none;\n}\n.tcw-nav-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-nav-btn:active {\n  background: var(--tcw-active-bg);\n}\n.tcw-nav-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-nav-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n@media (hover: none) {\n  .tcw-nav { display: none; }\n}\n\n/* === Symbol info ===\n * Top left, beside the drawing tools: the panels on the right stay clear. */\n.tcw-syminfo {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 38;\n  width: 288px;\n  max-height: calc(100% - var(--tcw-panel-top) - 12px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-syminfo-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-syminfo-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-syminfo-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-syminfo-body,\n.tcw-syminfo-news {\n  padding: 12px 14px;\n  overflow-y: auto;\n}\n.tcw-syminfo-body {\n  display: grid;\n  gap: 10px;\n}\n.tcw-syminfo-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-desc {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-meta {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-syminfo-quote {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-syminfo-price {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-change { font-size: var(--tcw-font-size-sm); }\n.tcw-syminfo-change.tcw-up { color: var(--tcw-green); }\n.tcw-syminfo-change.tcw-down { color: var(--tcw-red); }\n.tcw-syminfo-status {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--tcw-space-4) - var(--tcw-odd));\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-status::before,\n.tcw-status-market::before {\n  content: '';\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n}\n.tcw-syminfo-status[data-state='open']::before,\n.tcw-syminfo-status[data-state='always']::before,\n.tcw-status-market[data-state='open']::before {\n  background: var(--tcw-green);\n}\n.tcw-syminfo-stats {\n  display: grid;\n  gap: 4px;\n  margin: 0;\n  padding-top: 10px;\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-stat {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-syminfo-stat dt { color: var(--tcw-text-muted); }\n.tcw-syminfo-stat dd {\n  margin: 0;\n  color: var(--tcw-text);\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.tcw-syminfo-news {\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-news-title {\n  margin-bottom: 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-syminfo-news-list {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.tcw-syminfo-news-item {\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n  color: var(--tcw-text);\n}\n.tcw-syminfo-news-item a {\n  color: var(--tcw-text);\n  text-decoration: none;\n}\n.tcw-syminfo-news-item a:hover { color: var(--tcw-accent); text-decoration: underline; }\n.tcw-syminfo-news-item a:focus-visible { outline: none; box-shadow: var(--tcw-ring); border-radius: var(--tcw-radius-xs); }\n.tcw-syminfo-news-meta,\n.tcw-syminfo-news-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n/* Numbers keep their sign on the left, and mixed text its own order, in a right-to-left widget too. */\n.tcw-watchlist-price,\n.tcw-watchlist-move,\n.tcw-watchlist-change,\n.tcw-syminfo-price,\n.tcw-syminfo-change {\n  unicode-bidi: isolate;\n  direction: ltr;\n}\n.tcw-syminfo-desc,\n.tcw-syminfo-meta,\n.tcw-syminfo-status,\n.tcw-syminfo-stat dd,\n.tcw-syminfo-news-meta {\n  unicode-bidi: plaintext;\n}\n\n/* The market's status in the status bar. */\n.tcw-status-market {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-syminfo {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-height: 70%;\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  }\n}\n\n/* === The look: how chosen controls show, floating bars, segmented intervals ===\n * Each switch sets variables on its own root, which its parts read: a grid's\n * look never reaches into a chart that has one of its own. */\n\n/* The icons' lines (`ui.iconStroke`): one width at every icon size, on the widget and in its\n * portal, when the look sets one; otherwise as the icon set draws them. */\n[data-tcw-icon-stroke='set'] .tc-icon {\n  stroke-width: var(--tcw-icon-stroke);\n}\n[data-tcw-icon-stroke='set'] .tc-icon > * {\n  vector-effect: non-scaling-stroke;\n}\n/* Its filled dots (a drawing tool's anchors) were sized for the drawn line: smaller with the fine\n   one, so they don't outweigh it. */\n[data-tcw-icon-stroke='set'] .tc-icon > circle[stroke='none'] {\n  transform-box: fill-box;\n  transform-origin: center;\n  transform: scale(0.7);\n}\n/* A small icon (the legend's, a pin, 10 to 13 px) at most 1 px, so it isn't heavier than the\n   rest: drawn as it is, its line was under 1 px. */\n[data-tcw-icon-stroke='set'] .tc-icon:is([width='10'], [width='11'], [width='12'], [width='13']) {\n  stroke-width: min(var(--tcw-icon-stroke), 1px);\n}\n\n/* A chosen button (`ui.active`): a tinted fill (default), a solid pill, or an underline.\n * Dialog tabs are chips, or underlined in the underline look. Panels sit below the\n * toolbar and beside the drawing tools. */\n.tcw-root {\n  --tcw-on-bg: var(--tcw-accent-soft);\n  --tcw-on-fg: var(--tcw-accent);\n  --tcw-on-ring: none;\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: none;\n  --tcw-tabs-pad-block: var(--tcw-space-4);\n  --tcw-tab-h: var(--tcw-control-h);\n  --tcw-tab-pad: 0 var(--tcw-space-5);\n  --tcw-tab-line: 0px;\n  --tcw-tab-radius: var(--tcw-control-radius);\n  --tcw-tab-hover: var(--tcw-hover-bg);\n  --tcw-tab-on-bg: var(--tcw-on-bg);\n  --tcw-tab-on-fg: var(--tcw-on-fg);\n  /* A menu's rows sit inside its padding with corners that follow its own: the menu's\n   * corner less the padding between, so the two curves run parallel (Print: 5 - 3 = 2). */\n  --tcw-menu-pad: var(--tcw-space-2);\n  --tcw-menu-item-radius: max(0px, calc(var(--tcw-menu-radius) - var(--tcw-menu-pad)));\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + var(--tcw-space-3));\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + var(--tcw-space-5));\n}\n.tcw-root[data-tcw-active='solid'] {\n  --tcw-on-bg: var(--tcw-text);\n  --tcw-on-fg: var(--tcw-bg);\n  --tcw-on-icon-bg: var(--tcw-text);\n  --tcw-on-icon-fg: var(--tcw-bg);\n}\n/* Print picks a tool in ink blue on a tint: a solid square would outweigh the chart beside it. */\n.tcw-root[data-tcw-ui='print'][data-tcw-active='solid'] {\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-active='underline'] {\n  --tcw-on-bg: var(--tcw-active-bg);\n  --tcw-on-fg: var(--tcw-text);\n  --tcw-on-ring: inset 0 -2px 0 var(--tcw-accent);\n  --tcw-on-icon-bg: var(--tcw-active-bg);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: inset 2px 0 0 var(--tcw-accent);\n  --tcw-tabs-pad-block: 0px;\n  --tcw-tab-h: auto;\n  --tcw-tab-pad: 11px 14px;\n  --tcw-tab-line: 2px;\n  --tcw-tab-radius: 0px;\n  --tcw-tab-hover: transparent;\n  --tcw-tab-on-bg: transparent;\n  --tcw-tab-on-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-toolbar='floating'] {\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + 2 * var(--tcw-border-w) + 14px);\n}\n.tcw-root[data-tcw-sidebar='floating'] {\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + 2 * var(--tcw-border-w) + 22px);\n}\n\n/* The toolbar as an island (`ui.toolbar: 'floating'`). */\n.tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n  margin: 8px 10px 0;\n  padding-inline: calc(min(var(--tcw-toolbar-radius), var(--tcw-toolbar-h) / 2) / 2 + 8px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-toolbar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* The drawing tools as an island (`ui.sidebar: 'floating'`). */\n.tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n  align-self: flex-start;\n  max-height: calc(100% - 20px);\n  margin: 10px 6px 10px 10px;\n  padding-block: calc(min(var(--tcw-sidebar-radius), var(--tcw-sidebar-w) / 2) / 2 + 6px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-sidebar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* Frosted menus (`ui.blur` above 0): the chart shows through, blurred. */\n@supports (background: color-mix(in srgb, red 50%, transparent)) {\n  .tcw-dropdown,\n  .tcw-flyout,\n  .tcw-context-menu {\n    background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity), transparent);\n  }\n}\n\n/* The interval buttons in one track (`ui.intervals: 'segmented'`). */\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group {\n  gap: 2px;\n  margin: 0 4px;\n  padding: 3px;\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n  height: calc(var(--tcw-control-h) - 6px);\n  padding: 0 9px;\n}\n\n/* Phones: the variants keep comfortable tap targets and room for the bar. */\n@media (max-width: 768px) {\n  .tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n    height: max(34px, calc(var(--tcw-control-h) - 6px));\n    padding: 0 10px;\n  }\n  .tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n    margin: 6px 6px 0;\n    padding-inline: 4px;\n  }\n  .tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n    margin: 6px 4px 6px 6px;\n  }\n}\n\n/* --- Phones and tablets --- */\n\n/* Taps without the grey flash or the double-tap zoom's wait. The chart area\n   sets its own touch-action for its gestures. */\n.tcw-root {\n  -webkit-tap-highlight-color: transparent;\n  touch-action: manipulation;\n}\n\n/* iOS zooms the page into an input under 16 px when it takes focus. */\n@media (pointer: coarse) {\n  .tcw-root input:not([type='color']):not([type='range']):not([type='checkbox']):not([type='radio']),\n  .tcw-root select,\n  .tcw-root textarea {\n    font-size: max(16px, 1em);\n  }\n}\n\n/* Sheets and lists scroll on their own, without dragging the page behind them. */\n.tcw-modal {\n  overscroll-behavior: contain;\n}\n\n/* === The bars' newer parts ===\n * Interval sections and the chart type's icon, the Trade menu's button, undo\n * and redo off while idle, the tool menus' shortcuts and stars, the status\n * bar's clock and scale switches, and the grip of the selection toolbar. */\n\n/* The interval menu: each unit under its heading, a hairline between them. */\n.tcw-tf-section + .tcw-tf-section {\n  margin-top: var(--tcw-space-2);\n  padding-top: var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* The chart type: its icon alone, square. */\n.tcw-dropdown-trigger[data-role='charttype'] {\n  justify-content: center;\n  width: var(--tcw-control-h);\n  padding: 0;\n}\n.tcw-dropdown-trigger[data-role='charttype'] svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n/* Undo and redo with nothing to do: there, quiet, not pressable. */\n.tcw-btn-icon:disabled {\n  opacity: 0.35;\n  cursor: default;\n  background: transparent;\n  color: var(--tcw-text-muted);\n}\n\n/* A tool menu's row: the tool, its shortcut, and a star beside it. */\n.tcw-flyout-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n}\n.tcw-flyout-row > .tcw-flyout-item {\n  flex: 1;\n  min-width: 0;\n}\n.tcw-flyout-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-flyout-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-flyout-pin {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n/* Shown on the row in hand; always for a pinned tool, filled in ink blue; always on a touch screen. */\n.tcw-flyout-row:hover .tcw-flyout-pin,\n.tcw-flyout-row:focus-within .tcw-flyout-pin,\n.tcw-flyout-pin[aria-pressed='true'],\n.tcw-root[data-tcw-narrow] .tcw-flyout-pin {\n  opacity: 1;\n}\n@media (hover: none) {\n  .tcw-flyout-pin {\n    opacity: 1;\n  }\n}\n.tcw-flyout-pin:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-flyout-pin[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n.tcw-flyout-pin[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n/* The clock: the time in figures, the zone beside it; it opens the zones. */\n.tcw-status-clock,\n.tcw-status-scale-btn {\n  height: var(--tcw-control-h-sm);\n  padding: 0 var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-clock {\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-status-clock:hover,\n.tcw-status-scale-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-status-clock:focus-visible,\n.tcw-status-scale-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* The scale switches: %, log, auto, in ink blue while on. */\n.tcw-status-scale {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding-inline-start: var(--tcw-space-3);\n  border-inline-start: var(--tcw-sep-w) solid var(--tcw-border);\n}\n.tcw-status-scale-btn[aria-pressed='true'] {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A narrow widget keeps the range presets and the clock: the scale switches (also in the\n   settings and the scale's menu) give them the room, and the connection's word is left to\n   screen readers beside its dot. */\n.tcw-root[data-tcw-narrow] .tcw-status-scale {\n  display: none;\n}\n/* The market's status in a word (\"Closed\"), when even with everything folded under \"more\"\n   the bar has no room: the full words are left to screen readers and the tooltip. */\n.tcw-status-market-short {\n  display: none;\n}\n.tcw-statusbar--short-market .tcw-status-market-short {\n  display: inline;\n}\n.tcw-root[data-tcw-narrow] .tcw-status-indicator > span:not(.tcw-status-dot),\n.tcw-statusbar--short-market .tcw-status-market-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* The selection toolbar's grip: dots to take it by. */\n.tcw-sel-grip {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-control-h-sm);\n  margin-inline: var(--tcw-space-1) var(--tcw-space-2);\n  background-image: radial-gradient(circle, var(--tcw-text-muted) 1px, transparent 1.4px);\n  background-size: 4px 4px;\n  background-position: center;\n  opacity: 0.7;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-sel-grip:active {\n  cursor: grabbing;\n}\n\n/* --- A narrow widget (a phone, or a narrow column): data-tcw-narrow ---\n   Set from the widget's own width, below 641px. The toolbar keeps the\n   chart's own controls (symbol, interval, type, indicators) and puts the\n   rest under \"more\"; the drawing tools wait behind a button over the chart;\n   a grid shows one chart at a time, picked by its tab. */\n\n.tcw-toolbar-more,\n.tcw-sidebar-fab,\n.tcw-tf-current,\n.tcw-grid-tabs {\n  display: none;\n}\n\n/* The toolbar fits itself too (on a tablet, a window half a screen wide):\n   the right-hand buttons that don't fit fold under \"more\" (`--collapsed`\n   shows it), a host's left-hand ones last, and `--icons` drops the menus'\n   labels and the interval buttons. Narrow folds them all. */\n.tcw-toolbar [data-tcw-folded],\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-toolbar-overflow {\n  display: none;\n}\n.tcw-toolbar--collapsed > .tcw-toolbar-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar > .tcw-toolbar-more {\n  display: inline-flex;\n  margin-inline-start: auto;\n}\n.tcw-toolbar--icons.tcw-toolbar--tf-menu > .tcw-tf-group,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar.tcw-toolbar--tf-menu > .tcw-tf-group {\n  display: none;\n}\n/* A bar with no room for its labels has none to spare beside its icons either: the padding a step down. */\n.tcw-toolbar--icons {\n  --tcw-control-pad: var(--tcw-space-4);\n  --tcw-bar-pad: var(--tcw-space-4);\n}\n.tcw-toolbar--icons .tcw-tf-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n}\n.tcw-toolbar--icons .tcw-tf-current,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-current {\n  display: inline;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n}\n.tcw-toolbar--icons .tcw-trigger-label,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-trigger-label {\n  display: none;\n}\n\n/* The drawing tools lie over the chart when opened, from its edge. */\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  /* Under the toolbar (20), whose menus open over it. */\n  z-index: 18;\n  box-shadow: var(--tcw-menu-shadow);\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s linear var(--tcw-dur-normal);\n}\n.tcw-root[data-tcw-narrow][dir='rtl'] > .tcw-body > .tcw-sidebar {\n  transform: translateX(100%);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n  transform: none;\n  visibility: visible;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-flyout {\n  z-index: 19;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  /* Over the plot, in from its left edge (the widget sets where it starts): the\n     price axis stays on the chart's right in either direction, so a\n     right-to-left widget keeps the button on the left too, off the axis. */\n  left: calc(var(--tcw-fab-plot-left, 0px) + 10px);\n  /* Clear of the time axis. */\n  bottom: 44px;\n  z-index: 17;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: 999px;\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n  box-shadow: var(--tcw-menu-shadow);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), color var(--tcw-dur-fast), border-color var(--tcw-dur-fast);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab.tcw-active {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab[aria-expanded='true'] {\n  visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar,\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n    transition: none;\n  }\n}\n\n/* A narrow grid: one chart at a time, a tab for each. */\n.tcw-grid[data-tcw-narrow] > .tcw-grid-bar > .tcw-grid-tabs {\n  display: flex;\n}\n.tcw-grid-tab {\n  white-space: nowrap;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells {\n  display: flex;\n  flex-direction: column;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell {\n  flex: 1;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell:not(.tcw-grid-cell-current) {\n  display: none;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell-active::after {\n  display: none;\n}\n\n/* Phones: menus open as sheets from the bottom, in reach of a thumb and\n   never off screen (a menu's own place may be off the side of a phone). */\n@media (max-width: 640px) {\n  .tcw-dropdown,\n  .tcw-context-menu {\n    position: fixed !important;\n    /* Above the on-screen keyboard (the indicators' search). */\n    inset: auto 0 var(--tcw-keyboard-inset, 0px) 0 !important;\n    margin: 0 !important;\n    width: auto;\n    max-width: none;\n    max-height: 70vh !important;\n    max-height: 70dvh !important;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    z-index: 80;\n    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n  }\n  .tcw-dropdown-item,\n  .tcw-context-item {\n    min-height: 44px;\n  }\n}\n", nn = "/* === Base controls: fields, selects, checks, sliders, calendar, scrollbars ===\n *\n * One look for every form control in the widget, from tokens. Fields are\n * quiet until used: a faint fill and hairline, a firmer line on hover, and\n * on focus the line turns accent (no ring). Selects and date fields open\n * the widget's own list and calendar (formControls.ts).\n */\n\n.tcw-root {\n  color-scheme: dark;\n\n  --tcw-field-bg: rgba(230, 227, 220, 0.04);\n  --tcw-field-bg-hover: rgba(230, 227, 220, 0.06);\n  --tcw-field-bg-focus: rgba(230, 227, 220, 0.03);\n  --tcw-field-line: rgba(230, 227, 220, 0.12);\n  --tcw-field-line-hover: rgba(230, 227, 220, 0.22);\n  --tcw-field-line-focus: var(--tcw-accent-line);\n  --tcw-field-placeholder: var(--tcw-text-muted);\n  --tcw-check-line: rgba(230, 227, 220, 0.3);\n  --tcw-scroll-thumb: rgba(230, 227, 220, 0.14);\n  --tcw-scroll-thumb-hover: rgba(230, 227, 220, 0.26);\n  /* Glyphs drawn in a field's background (a background image takes no currentColor). */\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%23918f8a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23918f8a' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color-scheme: light;\n\n  /* Fields are white boxes on the paper, ruled in ink, as on a printed form. */\n  --tcw-field-bg: #ffffff;\n  --tcw-field-bg-hover: #ffffff;\n  --tcw-field-bg-focus: #ffffff;\n  --tcw-field-line: rgba(27, 29, 33, 0.16);\n  --tcw-field-line-hover: rgba(27, 29, 33, 0.3);\n  --tcw-check-line: rgba(27, 29, 33, 0.34);\n  --tcw-scroll-thumb: rgba(27, 29, 33, 0.16);\n  --tcw-scroll-thumb-hover: rgba(27, 29, 33, 0.3);\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%236a6e75' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236a6e75' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* --- Text, number, date and time fields, and selects --- */\n\n/* Fields speak the widget's type, not the browser's (a part's own font still wins).\n * The browser's control font resets the OpenType features, so --tcw-font-features\n * set on .tcw-root reaches every button and field only through this. */\n:where(.tcw-root) :where(input, select, textarea, button) {\n  font-family: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  font-feature-settings: inherit;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n) {\n  border: 1px solid var(--tcw-field-line);\n  border-radius: var(--tcw-input-radius);\n  background-color: var(--tcw-field-bg);\n  color: var(--tcw-text);\n  outline: none;\n  box-shadow: none;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):hover:not(:disabled, :focus) {\n  border-color: var(--tcw-field-line-hover);\n  background-color: var(--tcw-field-bg-hover);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):is(:focus, :focus-visible, [aria-expanded='true']) {\n  border-color: var(--tcw-field-line-focus);\n  background-color: var(--tcw-field-bg-focus);\n  outline: none;\n  box-shadow: none;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-indi-input,\n  .tcw-watchlist-input,\n  .tcw-goto-input,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-settings-number\n):is([aria-invalid='true']):is(*, :hover, :focus) {\n  /* As specific as the hover rule (its list holds the same :not) and later, so a wrong value stays red\n     under the pointer and in focus. */\n  border-color: var(--tcw-red);\n  box-shadow: none;\n}\n\n.tcw-root :is(input, textarea)::placeholder {\n  color: var(--tcw-field-placeholder);\n  opacity: 1;\n}\n\n.tcw-root :is(input, select, textarea):disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Selects: the browser's arrow gives way to a fine chevron. */\n.tcw-root select:not([multiple]):not([size]) {\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: var(--tcw-field-chevron);\n  background-repeat: no-repeat;\n  background-size: 12px 12px;\n  background-position: right 8px center;\n  padding-inline-end: 26px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.tcw-root[dir='rtl'] select:not([multiple]):not([size]),\n.tcw-root [dir='rtl'] select:not([multiple]):not([size]) {\n  background-position: left 8px center;\n}\n\n/* A select laid out left to right inside a right-to-left widget (the chart's\n * own area is LTR, the replay's figures too) keeps its chevron on the right,\n * where its padding is. */\n.tcw-root[dir='rtl'] [dir='ltr'] select:not([multiple]):not([size]),\n.tcw-root[dir='rtl'] select[dir='ltr']:not([multiple]):not([size]) {\n  background-position: right 8px center;\n}\n\n/* Number fields: the steppers show only on a field in use. */\n.tcw-root input[type='number']::-webkit-inner-spin-button,\n.tcw-root input[type='number']::-webkit-outer-spin-button {\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='number']:is(:hover, :focus)::-webkit-inner-spin-button {\n  opacity: 0.55;\n}\n\n/* Date and time: the widget's calendar icon where the browser's own can be hidden. */\n@supports selector(::-webkit-calendar-picker-indicator) {\n  .tcw-root input[type='date'] {\n    background-image: var(--tcw-field-calendar);\n    background-repeat: no-repeat;\n    background-size: 15px 15px;\n    background-position: right 8px center;\n    padding-inline-end: 30px;\n    cursor: text;\n  }\n\n  .tcw-root[dir='rtl'] input[type='date'],\n  .tcw-root [dir='rtl'] input[type='date'] {\n    background-position: left 8px center;\n  }\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n/* --- Checkboxes and radios --- */\n\n.tcw-root input:is([type='checkbox'], [type='radio']) {\n  appearance: none;\n  -webkit-appearance: none;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--tcw-check-line);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent center / 14px 14px no-repeat;\n  cursor: pointer;\n  vertical-align: middle;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='radio'] {\n  border-radius: 50%;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):hover:not(:disabled) {\n  border-color: var(--tcw-text-dim);\n}\n\n.tcw-root input[type='checkbox']:checked {\n  border-color: var(--tcw-accent);\n  background-color: var(--tcw-accent);\n  background-image: var(--tcw-check-mark);\n}\n\n.tcw-root input[type='radio']:checked {\n  border-color: var(--tcw-accent);\n  background-image: radial-gradient(circle, var(--tcw-accent) 0 3.5px, transparent 4px);\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus {\n  outline: none;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus-visible {\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* --- Sliders --- */\n\n.tcw-root input[type='range'] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: 4px;\n  border-radius: 999px;\n  background: var(--tcw-field-line-hover);\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-root input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='range']::-moz-range-thumb {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n}\n\n.tcw-root input[type='range']:hover::-webkit-slider-thumb {\n  transform: scale(1.12);\n}\n\n.tcw-root input[type='range']:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 0 4px var(--tcw-accent-soft);\n}\n\n/* --- The select list --- */\n\n.tcw-select-menu {\n  z-index: 120;\n  padding: var(--tcw-menu-pad);\n  max-width: min(360px, calc(100vw - 16px));\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-select-group {\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-select-option {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  min-height: var(--tcw-menu-item-h);\n  padding-block: 0;\n  padding-inline: var(--tcw-space-3) var(--tcw-space-5);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.tcw-select-option-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-select-check {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n\n.tcw-select-option.tcw-active {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-select-option[aria-selected='true'] {\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-select-option[aria-selected='true'] .tcw-select-check {\n  background: var(--tcw-accent);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n.tcw-select-option[aria-disabled='true'] {\n  opacity: 0.4;\n  cursor: default;\n  background: none;\n}\n\n/* --- The calendar --- */\n\n.tcw-calendar {\n  z-index: 120;\n  width: 268px;\n  padding: 10px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-calendar-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.tcw-calendar-title {\n  flex: 1;\n  text-align: center;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: -0.01em;\n}\n\n.tcw-calendar-nav {\n  display: inline-grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-nav svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.tcw-calendar[dir='rtl'] .tcw-calendar-nav svg,\n[dir='rtl'] .tcw-calendar-nav svg {\n  transform: scaleX(-1);\n}\n\n.tcw-calendar-nav:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-calendar-weekdays,\n.tcw-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.tcw-calendar-weekdays {\n  margin-bottom: 4px;\n  padding: 3px 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-weekday {\n  text-align: center;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  line-height: 20px;\n}\n\n.tcw-calendar-grid {\n  row-gap: 2px;\n}\n\n.tcw-calendar-week {\n  display: contents;\n}\n\n.tcw-calendar-day {\n  position: relative;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-day:hover:not(:disabled) {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-day.tcw-outside {\n  color: var(--tcw-text-muted);\n  opacity: 0.55;\n}\n\n/* Today: accent figures over a short line. */\n.tcw-calendar-day.tcw-today {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-calendar-day.tcw-today::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: 5px;\n  width: 12px;\n  height: 2px;\n  margin-left: -6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n\n.tcw-calendar-day[aria-selected='true'] {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  font-weight: var(--tcw-weight-strong);\n  opacity: 1;\n}\n\n.tcw-calendar-day:disabled {\n  opacity: 0.28;\n  cursor: not-allowed;\n}\n\n.tcw-calendar-day:focus {\n  outline: none;\n}\n\n.tcw-calendar-day:focus-visible {\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n.tcw-calendar-foot {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-calendar-today {\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-accent);\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-calendar-today:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-calendar-today:focus-visible,\n.tcw-calendar-nav:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n/* --- Scrollbars: thin and rounded, a thumb on no track. Low specificity:\n   a part that hides its bar keeps it hidden. --- */\n\n:where(.tcw-root) ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-track,\n:where(.tcw-root) ::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb {\n  background: var(--tcw-scroll-thumb);\n  background-clip: padding-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-scroll-thumb-hover);\n  background-clip: padding-box;\n  border: 2.5px solid transparent;\n}\n\n/* Engines without the pseudo-elements take the standard properties. */\n@supports not selector(::-webkit-scrollbar) {\n  :where(.tcw-root, .tcw-root *) {\n    scrollbar-width: thin;\n    scrollbar-color: var(--tcw-scroll-thumb) transparent;\n  }\n}\n\n/* --- Switches: flat, no glow --- */\n\n.tcw-root .tcw-toggle.tcw-on {\n  box-shadow: none;\n}\n\n.tcw-root .tcw-toggle::after {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n}\n\n.tcw-root .tcw-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* One choice of a few in a row (a radio group): the chosen one as the look shows a chosen button. */\n.tcw-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  gap: 2px;\n  padding: 2px;\n  border-radius: calc(var(--tcw-control-radius) + 2px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-segment {\n  height: calc(var(--tcw-control-h) - 4px);\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-segment:hover { color: var(--tcw-text); }\n.tcw-segment[aria-checked='true'] {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n.tcw-segment:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A number between a − and a +: one field, the figure right-aligned in the chart's mono type. */\n.tcw-stepper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--tcw-control-h);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg);\n  overflow: hidden;\n}\n.tcw-stepper:focus-within { box-shadow: var(--tcw-ring); }\n.tcw-stepper .tcw-indi-input {\n  width: 110px;\n  height: auto;\n  padding-inline: var(--tcw-space-3);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.tcw-stepper .tcw-indi-input::-webkit-inner-spin-button,\n.tcw-stepper .tcw-indi-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }\n.tcw-stepper .tcw-indi-input:focus { outline: none; box-shadow: none; }\n.tcw-stepper-btn {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n.tcw-stepper-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-stepper-btn:focus-visible { outline: none; background: var(--tcw-hover-bg); color: var(--tcw-text); }\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen choice. */\n@media (forced-colors: active) {\n  .tcw-segment[aria-checked='true'] { outline: 2px solid Highlight; }\n  .tcw-segment:focus-visible,\n  .tcw-stepper-btn:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-stepper:focus-within { outline: 2px solid Highlight; }\n}\n", rn = "/* === The indicators dialog === */\n\n/* 610 wide, a Fibonacci number: the groups take 233 and the list 377 beside them (377 : 233 = phi).\n   A fixed height, so the dialog keeps still while a search shortens the list. */\n.tcw-modal.tcw-ip {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* A dialog's search is a band across it, under its title, with a rule beneath: no box, no ring when\n   focused. The caret and the dialog itself say where typing goes; a lit box around the one field a\n   search dialog has only shouted it. As tall as the field and its margins were, set in as the title. */\n.tcw-ip-search,\n.tcw-ss-search {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  height: calc(var(--tcw-control-h) + 2 * var(--tcw-space-4));\n  margin: 0;\n  padding: 0 var(--tcw-space-6);\n  border: none;\n  border-bottom: 1px solid var(--tcw-divider);\n  border-radius: 0;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Focused, only the magnifier takes the text's colour. */\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n  color: var(--tcw-text);\n}\n\n/* The magnifier root phi of the typed text (19 at 15), as the close is of the title. */\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n  flex: none;\n  width: calc(var(--tcw-font-size-lg) * 1.272);\n  height: calc(var(--tcw-font-size-lg) * 1.272);\n}\n\n.tcw-ip-search input,\n.tcw-ss-search input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n}\n\n/* In forced colours the muted and the text's colour may be one: the band keeps an outline there,\n   so the field is still found. */\n@media (forced-colors: active) {\n  .tcw-ip-search:focus-within,\n  .tcw-ss-search:focus-within {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n}\n\n/* The browser's clear button for a search field (bold, and blue in Chrome's light scheme) as the\n   icon set's close, in the muted text, the text's on hover. A mask, so it takes the colour. */\n.tcw-ip-search input::-webkit-search-cancel-button,\n.tcw-ss-search input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n  width: calc(var(--tcw-font-size-lg) * 1.272);\n  height: calc(var(--tcw-font-size-lg) * 1.272);\n  background: var(--tcw-text-muted);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  cursor: pointer;\n}\n\n.tcw-ip-search input::-webkit-search-cancel-button:hover,\n.tcw-ss-search input::-webkit-search-cancel-button:hover {\n  background: var(--tcw-text);\n}\n\n.tcw-ip-search input::placeholder,\n.tcw-ss-search input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-ip-nav,\n.tcw-set-nav {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: var(--tcw-space-4) var(--tcw-space-3);\n  /* Logical sides: in Arabic, Hebrew or Persian the tabs sit on the right. */\n  border-inline-end: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  overflow-y: auto;\n  border-end-start-radius: var(--tcw-dialog-radius);\n}\n\n.tcw-ip-tab,\n.tcw-set-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-tab svg,\n.tcw-set-tab svg {\n  flex: none;\n}\n\n/* The kinds start below a gap: favourites and templates are yours, the rest the library's. */\n.tcw-ip-tab[data-view='all'] {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-tab:hover,\n.tcw-set-tab:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ip-tab.tcw-active,\n.tcw-set-tab.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-nav--searching .tcw-ip-tab.tcw-active {\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-ip-list {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Each kind's name stays at the top while its indicators scroll under it. */\n.tcw-ip-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ip-list > :first-child:not(.tcw-ip-heading) {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-add {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-ip-add:focus-visible,\n.tcw-ip-aside:focus-visible,\n.tcw-ip-tab:focus-visible,\n.tcw-set-tab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-add svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ip-short {\n  flex: none;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* Where it draws, quietly at the row's end. */\n.tcw-ip-kind {\n  flex: none;\n  margin-inline-start: auto;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* How many are on the chart: ink on its wash, the figures in a column. */\n.tcw-ip-count {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  min-width: var(--tcw-space-6);\n  height: var(--tcw-space-6);\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-ip-aside {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Shown on the row in hand; always for a starred one, filled in ink; always on a touch screen. */\n.tcw-ip-row:hover .tcw-ip-aside,\n.tcw-ip-row:focus-within .tcw-ip-aside,\n.tcw-ip-star[aria-pressed='true'] {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-ip-aside {\n    opacity: 1;\n  }\n}\n\n.tcw-ip-aside:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-star[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n\n.tcw-ip-star[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n.tcw-ip-remove:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ip-save {\n  flex: none;\n  width: 100%;\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-save svg {\n  color: currentColor;\n}\n\n.tcw-ip-save:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-ip-empty {\n  max-width: 34ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Heard by a screen reader, not seen. */\n.tcw-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A phone: the dialog is the widget's sheet, as tall as a sheet goes, and the groups a row of chips. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ip {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ip-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .tcw-ip-nav,\n  .tcw-set-nav {\n    flex-direction: row;\n    gap: var(--tcw-space-2);\n    padding: var(--tcw-space-3) var(--tcw-space-4);\n    border-inline-end: none;\n    border-bottom: 1px solid var(--tcw-divider);\n    border-radius: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .tcw-ip-tab[data-view='all'] {\n    margin-top: 0;\n    margin-inline-start: var(--tcw-space-4);\n  }\n\n  .tcw-ip-tab,\n  .tcw-set-tab {\n    /* A finger's size, as the dialogs' other tabs on a phone. */\n    min-height: 40px;\n    border: var(--tcw-border-w) solid var(--tcw-border);\n  }\n\n\n  .tcw-ip-list {\n    padding-inline: var(--tcw-space-3);\n  }\n}\n\n/* === The indicator settings, and a drawing's === */\n\n/* One half step of phi under the indicators dialog: 610 / sqrt(phi) = 480. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-modal-narrow.tcw-indi,\n  .tcw-modal.tcw-modal-narrow.tcw-drawing-settings {\n    width: 480px;\n    max-width: 92vw;\n  }\n}\n\n/* A line, or a kind of interval: ticked where it shows, its name, then what sets it. */\n.tcw-indi-plot-name {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.tcw-indi-plot-name .tcw-settings-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Unticked, its name steps back. */\n.tcw-indi-plot-name:has(input:not(:checked)) .tcw-settings-label {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-plot-controls,\n.tcw-indi-range {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n\n/* A box ticked beside other controls in a row (bold, italics, a text box's background). */\n.tcw-inline-check {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.tcw-indi-plot-controls .tcw-indi-select {\n  width: 104px;\n}\n\n.tcw-indi-range {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-range .tcw-indi-input {\n  width: 68px;\n  text-align: end;\n}\n\n.tcw-indi-range .tcw-indi-input:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* Defaults on the left; Cancel and Ok on the right, one height for all three. */\n.tcw-indi .tcw-modal-footer,\n.tcw-set .tcw-modal-footer,\n.tcw-drawing-settings .tcw-modal-footer {\n  gap: var(--tcw-space-4);\n}\n\n.tcw-footer-end {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-indi .tcw-modal-footer button,\n.tcw-set .tcw-modal-footer button,\n.tcw-drawing-settings .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-footer-menu,\n.tcw-footer-cancel {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline: var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-footer-cancel {\n  border-color: var(--tcw-border-strong);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:hover,\n.tcw-footer-menu[aria-expanded='true'],\n.tcw-footer-cancel:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:focus-visible,\n.tcw-footer-cancel:focus-visible,\n.tcw-indi .tcw-done-btn:focus-visible,\n.tcw-set .tcw-done-btn:focus-visible,\n.tcw-drawing-settings .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A drawing's switches: the box, then its name, a list without rules between. */\n.tcw-check-row {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  cursor: pointer;\n}\n\n.tcw-settings-row + .tcw-check-row,\n.tcw-check-row + .tcw-settings-row {\n  border-top: 0;\n}\n\n/* A point: its name, then its price, date and time in columns; on a phone the price over the date and time. */\n.tcw-draw-point {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n  gap: var(--tcw-space-4);\n}\n\n.tcw-draw-point > .tcw-settings-label {\n  white-space: nowrap;\n}\n\n.tcw-draw-point .tcw-indi-plot-controls {\n  display: contents;\n}\n\n.tcw-draw-point input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n\n.tcw-draw-point input[type='number'] {\n  text-align: end;\n}\n\n@media (max-width: 640px) {\n  .tcw-draw-point {\n    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);\n  }\n\n  .tcw-draw-point > .tcw-settings-label {\n    grid-row: span 2;\n  }\n\n  .tcw-draw-point input[type='number'] {\n    grid-column: span 2;\n  }\n}\n\n.tcw-drawing-settings .tcw-indi-plot-controls input[type='number']:not(.tcw-draw-point *) {\n  width: 68px;\n  text-align: end;\n}\n\n/* The unit after a number (the fill's opacity in %). */\n.tcw-unit {\n  margin-inline-start: calc(-1 * var(--tcw-space-2));\n  color: var(--tcw-text-muted);\n}\n\n/* === The chart settings === */\n\n/* 776 x 610: half a step of phi wider than the indicators dialog (610 x sqrt(phi) = 776), as tall as it,\n   so the dialog is a sqrt(phi) rectangle. The tabs take 233 down the side, as the indicator groups do. */\n.tcw-modal.tcw-set {\n  width: 776px;\n  max-width: 94vw;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-set-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-set-panel {\n  min-width: 0;\n}\n\n/* A phone: the widget's sheet across the screen, the tabs a row of chips over the settings. After the rules above, which it overrides. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-set {\n    width: 100vw;\n    max-width: 100vw;\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-set-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n}\n\n/* === The symbol search, and the same dialog comparing === */\n\n/* As still as the indicators dialog: a fixed height while a search shortens the list. As wide as it,\n   610, up to a screen 1597 wide; past that a phi share of the screen (1 / phi^2), up to 987, the next\n   Fibonacci number: about 733 at 1920, 978 at 2560, room for ids with a venue before the ticker. */\n.tcw-modal.tcw-ss {\n  width: min(987px, max(610px, 38.2vw));\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* Comparing: how the next symbol goes on the chart, under the search. */\n.tcw-ss-way {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-ss-way > span {\n  flex: none;\n}\n\n.tcw-root .tcw-ss-way-select {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  padding-block: 0;\n}\n\n/* The heads' height, which the rows scroll in below; the room after a symbol before its name. */\n.tcw-modal.tcw-ss {\n  --tcw-ss-head-h: var(--tcw-control-h);\n  --tcw-ss-name-gap: var(--tcw-space-4);\n}\n\n[dir='rtl'] .tcw-ss-symbol {\n  padding-right: 0;\n  padding-left: var(--tcw-ss-name-gap);\n}\n\n/* Over the list: the kinds the rows come in, and their exchanges once there are two. The exchanges sit\n   on the tabs' first line when the tabs wrap, not between their lines. */\n.tcw-ss-filters {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The row right under the search's band (the filters, or the compare's way) stands off its rule as\n   it stands off the list: the tabs' and the exchanges' borders never sit on the rule. */\n.tcw-ss-search + .tcw-ss-filters,\n.tcw-ss-search + .tcw-ss-way {\n  margin-top: var(--tcw-space-4);\n}\n\n/* The kinds as tabs (All, stock, crypto…), showing the one picked as the look shows a choice. */\n.tcw-ss-kinds {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n  min-width: 0;\n  gap: var(--tcw-space-2);\n}\n\n/* Where they scroll in one line, the tabs fade out at an end with more past it, so a tab cut there\n   reads as more to scroll to. A mask: only its alpha counts, so what shows is drawn in the text's\n   colour, which is opaque, and what fades goes to transparent. */\n.tcw-ss-kinds[data-more] {\n  --tcw-ss-shown: currentColor;\n  --tcw-ss-fade-start: var(--tcw-ss-shown);\n  --tcw-ss-fade-end: var(--tcw-ss-shown);\n  -webkit-mask-image: linear-gradient(to right, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n  mask-image: linear-gradient(to right, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n}\n\n[dir='rtl'] .tcw-ss-kinds[data-more] {\n  -webkit-mask-image: linear-gradient(to left, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n  mask-image: linear-gradient(to left, var(--tcw-ss-fade-start), var(--tcw-ss-shown) var(--tcw-space-6), var(--tcw-ss-shown) calc(100% - var(--tcw-space-6)), var(--tcw-ss-fade-end));\n}\n\n.tcw-ss-kinds[data-more~='start'] {\n  --tcw-ss-fade-start: transparent;\n}\n\n.tcw-ss-kinds[data-more~='end'] {\n  --tcw-ss-fade-end: transparent;\n}\n\n.tcw-ss-type {\n  flex: none;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-5);\n  border: none;\n  border-radius: var(--tcw-tab-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* A feed's words as it wrote them (\"Cổ phiếu\" stays so), only the first letter raised. */\n.tcw-ss-type::first-letter {\n  text-transform: uppercase;\n}\n\n.tcw-ss-type:hover {\n  background: var(--tcw-tab-hover);\n  color: var(--tcw-text);\n}\n\n.tcw-ss-type[aria-pressed='true'] {\n  background: var(--tcw-tab-on-bg);\n  color: var(--tcw-tab-on-fg);\n  box-shadow: inset 0 calc(-1 * var(--tcw-tab-line)) 0 var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ss-type:focus-visible,\n.tcw-ss-remove:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The exchanges at the end of the row, as wide as the longest up to 144. */\n.tcw-root .tcw-ss-exchange-filter {\n  flex: none;\n  width: auto;\n  max-width: 144px;\n  height: var(--tcw-control-h);\n  margin-inline-start: auto;\n  padding-block: 0;\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* What scrolls is one grid, and the heads, the list and each row are its subgrids, so a column is\n   as wide in every row: the badge, the symbol up to a quarter of the list (144 at 610, 233 in a wide\n   dialog, the next Fibonacci number), the name the rest, the kind up to 89, the exchange up to 144\n   ('XYZ · HYPERLIQUID' whole), the check. An empty cell keeps its column. */\n.tcw-ss-results {\n  display: grid;\n  grid-template-columns: max-content fit-content(clamp(144px, 25%, 233px)) minmax(0, 1fr) fit-content(89px) fit-content(144px) auto;\n  align-content: start;\n  column-gap: var(--tcw-space-4);\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below the heads, not under them. */\n  scroll-padding-block-start: calc(var(--tcw-ss-head-h) + var(--tcw-space-2));\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Comparing, under a heading of its own as well. */\n.tcw-ss--compare .tcw-ss-results {\n  scroll-padding-block-start: calc(var(--tcw-ss-head-h) + var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n}\n\n.tcw-ss-results > * {\n  grid-column: 1 / -1;\n}\n\n.tcw-ss-columns,\n.tcw-ss-list,\n.tcw-ss-added,\n.tcw-ss-row,\n.tcw-ss-added-row {\n  display: grid;\n  grid-column: 1 / -1;\n  /* Where subgrids aren't drawn: fixed columns, the rest sized row by row. */\n  grid-template-columns: var(--tcw-control-h-sm) 89px minmax(0, 1fr) auto auto auto;\n  grid-template-columns: subgrid;\n  align-items: center;\n  column-gap: inherit;\n}\n\n/* The heads stay at the top while the rows scroll under them. */\n.tcw-ss-columns {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  height: var(--tcw-ss-head-h);\n  margin-bottom: var(--tcw-space-2);\n  padding: 0 var(--tcw-space-4);\n  background: var(--tcw-bg-elevated);\n  box-shadow: 0 1px 0 var(--tcw-divider);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  white-space: nowrap;\n}\n\n.tcw-ss-head {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ss-head:nth-child(1) { grid-column: 1; }\n.tcw-ss-head:nth-child(2) { grid-column: 2; }\n.tcw-ss-head:nth-child(3) { grid-column: 3; }\n.tcw-ss-head:nth-child(4) { grid-column: 4; justify-self: end; }\n.tcw-ss-head:nth-child(5) { grid-column: 5; justify-self: end; }\n\n.tcw-ss-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n/* The logo, or the ticker's first letter on a tint of its kind's colour, cornered as the look's tags. */\n.tcw-ss-badge {\n  --tcw-ss-kind: var(--tcw-text-dim);\n  grid-column: 1;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  overflow: hidden;\n  border-radius: var(--tcw-tag-radius);\n  background: color-mix(in srgb, var(--tcw-ss-kind) 16%, transparent);\n  color: var(--tcw-ss-kind);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  line-height: 1;\n}\n\n.tcw-ss-badge[data-kind='1'] { --tcw-ss-kind: var(--tcw-kind-1); }\n.tcw-ss-badge[data-kind='2'] { --tcw-ss-kind: var(--tcw-kind-2); }\n.tcw-ss-badge[data-kind='3'] { --tcw-ss-kind: var(--tcw-kind-3); }\n.tcw-ss-badge[data-kind='4'] { --tcw-ss-kind: var(--tcw-kind-4); }\n.tcw-ss-badge[data-kind='5'] { --tcw-ss-kind: var(--tcw-kind-5); }\n\nimg.tcw-ss-badge {\n  background: transparent;\n  object-fit: cover;\n}\n\n/* The figures of a ticker, in the mono face, left to right in any widget, at the start of its column;\n   the chart's own in ink. Padding on the name's side, counted in the column, keeps the longest id a\n   gap twice the columns' from the name (\"BINANCE:BTCUSDT\" ran into \"BTC perpetual\"). The cell is\n   left to right itself, so the side is named, not its end. */\n.tcw-ss-symbol {\n  grid-column: 2;\n  display: flex;\n  justify-self: start;\n  max-width: 100%;\n  min-width: 0;\n  padding-right: var(--tcw-ss-name-gap);\n  overflow: hidden;\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n}\n\n/* The ticker alone (a venue before it is the exchange column's): cut only when it is wider than its column. */\n.tcw-ss-ticker {\n  flex: none;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-ss-row.tcw-current .tcw-ss-symbol {\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-symbol mark {\n  background: transparent;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-desc-cell {\n  grid-column: 3;\n  min-width: 0;\n}\n\n/* As wide as its words, at the start of the column, whichever way they run. */\n.tcw-ss-desc {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The kind as the feed wrote it, and the exchange, each at the end of its column. */\n.tcw-ss-kind,\n.tcw-ss-exchange {\n  justify-self: end;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  font-size: var(--tcw-font-size-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-kind {\n  grid-column: 4;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ss-exchange {\n  grid-column: 5;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* The chart's symbol, or one on it already: a check in the last column. */\n.tcw-ss-check {\n  grid-column: 6;\n  display: inline-grid;\n  place-items: center;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-heading[hidden] {\n  display: none;\n}\n\n/* \"On the chart\" and \"Symbols\", under the heads while their rows scroll. */\n.tcw-ss-heading {\n  position: sticky;\n  top: var(--tcw-ss-head-h);\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ss-added-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-ss-added-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* How it is compared, across the name, kind and exchange; the line's colour, where it has one of its own, where the badges are. */\n.tcw-ss-way-cell {\n  grid-column: 3 / 6;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n\n.tcw-ss-swatch {\n  grid-column: 1;\n  justify-self: center;\n  width: var(--tcw-space-4);\n  height: var(--tcw-space-4);\n  border-radius: var(--tcw-radius-sm);\n}\n\n.tcw-ss-way-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-remove {\n  grid-column: 6;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ss-remove:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-red);\n}\n\n.tcw-ss-empty {\n  max-width: 44ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Under a list cut short: how many more match, for typing to narrow. */\n.tcw-ss-more {\n  padding: var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.5;\n}\n\n/* The way the dialog opens too: a letter typed on the chart. */\n.tcw-ss-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-align: center;\n}\n\n/* === Go to === */\n\n/* 377: the step of phi under the search dialogs. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-goto {\n    width: 377px;\n  }\n}\n\n.tcw-goto-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.tcw-goto-fields {\n  display: grid;\n  gap: var(--tcw-space-5);\n  padding: var(--tcw-space-6) var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The date takes the room; the time 144 beside it; a range's end named above its two. */\n.tcw-goto-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 144px;\n  gap: var(--tcw-space-3) var(--tcw-space-4);\n  align-items: center;\n}\n\n.tcw-goto-label {\n  grid-column: 1 / -1;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-root .tcw-goto-input {\n  width: 100%;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  box-sizing: border-box;\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-variant-numeric: tabular-nums;\n}\n\n/* No time on daily bars: the date across the row. */\n.tcw-goto-input[type='date']:last-child {\n  grid-column: 1 / -1;\n}\n\n/* The month under the fields, part of the dialog: no card of its own. */\n.tcw-calendar.tcw-goto-calendar {\n  position: static;\n  width: auto;\n  padding: var(--tcw-space-4) var(--tcw-space-6) var(--tcw-space-5);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  animation: none;\n}\n\n.tcw-goto-calendar .tcw-calendar-day {\n  height: 34px;\n}\n\n/* In a viewport too short for the month, the form scrolls: its parts keep their height, and\n   the buttons stay at its foot, over what scrolls under them. */\n.tcw-goto-form > * {\n  flex-shrink: 0;\n}\n\n.tcw-goto .tcw-modal-footer {\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: auto;\n  justify-content: flex-end;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-goto .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-goto .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: both are the widget's sheet; the search as tall as a sheet goes, its symbols up to 89\n   wide. The kind's column goes (the badge's colour still tells it), the tabs scroll in one line, and\n   a row is a finger's height. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ss {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    /* The column's room goes to the ticker; the columns' own gap is enough here. */\n    --tcw-ss-name-gap: 0px;\n  }\n\n  .tcw-ss-way,\n  .tcw-ss-filters {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ss-kinds {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tcw-ss-kinds::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tcw-root .tcw-ss-exchange-filter {\n    max-width: 110px;\n  }\n\n  /* The ticker is the row's key: its column as wide as the widest ticker, up to 144 or 38.2% of the\n     row, and the name gives way first. The exchange's up to 55, each cut in its own row. */\n  .tcw-ss-results {\n    grid-template-columns: max-content fit-content(min(144px, 38.2%)) minmax(0, 1fr) fit-content(55px) auto;\n  }\n\n  /* The head over the exchanges reads whole, over the gap before it if it must. */\n  .tcw-ss-head:nth-child(5) {\n    overflow: visible;\n  }\n\n  .tcw-ss-columns,\n  .tcw-ss-list,\n  .tcw-ss-added,\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    grid-template-columns: var(--tcw-control-h-sm) 89px minmax(0, 1fr) auto auto;\n    grid-template-columns: subgrid;\n  }\n\n  .tcw-ss-kind,\n  .tcw-ss-head:nth-child(4) {\n    display: none;\n  }\n\n  .tcw-ss-exchange,\n  .tcw-ss-head:nth-child(5) {\n    grid-column: 4;\n  }\n\n  .tcw-ss-check,\n  .tcw-ss-remove {\n    grid-column: 5;\n  }\n\n  .tcw-ss-way-cell {\n    grid-column: 3 / 5;\n  }\n\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    min-height: 44px;\n  }\n}\n\n/* Without a keyboard there are no letters to type on the chart. */\n@media (hover: none) and (pointer: coarse) {\n  .tcw-ss-foot {\n    display: none;\n  }\n}\n\n/* === The shortcut sheet === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-hotkey-sheet {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-hotkey-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-6) var(--tcw-space-5);\n}\n\n/* Two columns as tall as their groups, inside the box that scrolls: on the box itself, of a fixed\n   height, the groups past its foot went into columns to the side, out of reach. */\n.tcw-hotkey-columns {\n  columns: 2;\n  column-gap: var(--tcw-space-7);\n}\n\n/* A group keeps together in its column, its name above its rows. */\n.tcw-hotkey-group {\n  break-inside: avoid;\n  padding-top: var(--tcw-space-5);\n}\n\n.tcw-hotkey-heading {\n  padding-bottom: var(--tcw-space-3);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What it does on the left, its keys on the right, the keys in a column of their own. */\n.tcw-hotkey-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-3));\n  padding: var(--tcw-space-2) 0;\n}\n\n.tcw-hotkey-label {\n  min-width: 0;\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n}\n\n.tcw-hotkey-keys {\n  display: inline-flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--tcw-space-2);\n  flex: none;\n  max-width: 55%;\n}\n\n/* A key: its name in the mono face on a key's face. */\n.tcw-hotkey-key,\n.tcw-cp-key {\n  display: inline-block;\n  min-width: calc(var(--tcw-space-6) - var(--tcw-space-2));\n  padding: 0 var(--tcw-space-3);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-bottom-width: 2px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.6;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* A gesture is not a key: its words, quieter. */\n.tcw-hotkey-gesture {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  white-space: nowrap;\n}\n\n.tcw-hotkey-sep {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-hotkey-empty {\n  padding: var(--tcw-space-6) 0;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* How to open it again, at its foot. */\n.tcw-hotkey-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* === The command palette === */\n\n/* 610 wide, a third of the way down: a launcher, not a form; its search is the dialogs' search row. */\n.tcw-modal.tcw-cp {\n  top: 19.1%;\n  transform: translate(-50%, 0);\n  width: 610px;\n  max-height: min(610px, 76.4vh);\n  max-height: min(610px, 76.4dvh);\n  animation: none;\n}\n\n.tcw-cp-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its group's heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n  padding: 0 var(--tcw-space-4) var(--tcw-space-4);\n}\n\n.tcw-cp-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-cp-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n}\n\n.tcw-cp-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-cp-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* What is on now: its name in ink, a check at the end. */\n.tcw-cp-row.tcw-on .tcw-cp-label {\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-check {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-empty {\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* === Layouts === */\n\n/* 480, as the settings of an indicator: a list of names and when they were saved. On a phone, the sheet's width. */\n.tcw-modal.tcw-layouts-dialog {\n  max-height: min(610px, 86vh);\n  max-height: min(610px, 86dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-layouts-dialog { width: 480px; }\n}\n\n.tcw-layouts-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n}\n\n.tcw-layouts-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n}\n\n.tcw-layouts-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline-end: var(--tcw-space-3);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-layouts-row:hover,\n.tcw-layouts-row:focus-within {\n  background: var(--tcw-hover-bg);\n}\n\n/* A column for the check of the one open, so every name starts at the same place. */\n.tcw-layouts-open {\n  display: grid;\n  grid-template-columns: var(--tcw-space-5) minmax(0, 1fr);\n  column-gap: var(--tcw-space-3);\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-layouts-open:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-layouts-name,\n.tcw-layouts-meta {\n  grid-column: 2;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-layouts-name {\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-layouts-meta {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-layouts-check {\n  display: inline-grid;\n  place-items: center;\n  grid-column: 1;\n  grid-row: 1 / span 2;\n  color: var(--tcw-accent);\n}\n\n.tcw-layouts-open[aria-current='true'] .tcw-layouts-name {\n  color: var(--tcw-accent);\n}\n\n/* Rename and delete show on the row in hand; always on a touch screen. */\n.tcw-layouts-row .tcw-account-actions {\n  display: flex;\n  gap: var(--tcw-space-1);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-layouts-row:is(:hover, :focus-within) .tcw-account-actions,\n.tcw-layouts-row .tcw-account-actions:has(.tcw-layouts-confirm) {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-layouts-row .tcw-account-actions {\n    opacity: 1;\n  }\n}\n\n.tcw-layouts-confirm {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-red);\n  /* The accent fill's ink reads on the red too: dark on the dark theme's, white on the light's. */\n  color: var(--tcw-accent-ink);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-layouts-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: the sheets as tall as they go, the shortcuts in one column. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-hotkey-sheet {\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-hotkey-body {\n    padding-inline: var(--tcw-space-4);\n  }\n\n  .tcw-hotkey-columns {\n    columns: 1;\n  }\n\n  /* Their own heights outrank the sheet's: give them back its height, less the keyboard, and the palette its slide up. */\n  .tcw-modal.tcw-cp,\n  .tcw-modal.tcw-layouts-dialog {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-modal.tcw-cp {\n    top: auto;\n    transform: none;\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  .tcw-cp-row {\n    min-height: 44px;\n  }\n}\n\n/* === The order ticket === */\n\n/* 480, as a drawing's settings: the side, the order, its stop and target, then the receipt. On a phone, the sheet's width. */\n.tcw-modal.tcw-order-ticket {\n  max-height: min(610px, 92vh);\n  max-height: min(610px, 92dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-order-ticket { width: 480px; }\n}\n.tcw-order-ticket[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-order-ticket[data-side='sell'] { --tcw-side: var(--tcw-red); }\n\n.tcw-ticket-heading {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n.tcw-ticket-symbol {\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.tcw-ticket-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n/* Buy and Sell: the chosen one filled with its colour, the ground's own colour on it. */\n.tcw-ticket-side {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--tcw-space-3);\n  margin-bottom: var(--tcw-space-4);\n}\n.tcw-ticket-side-btn {\n  height: 34px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-ticket-side-btn:hover { color: var(--tcw-text); }\n.tcw-ticket-buy[aria-pressed='true'] { border-color: var(--tcw-green); background: var(--tcw-green); color: var(--tcw-bg); }\n.tcw-ticket-sell[aria-pressed='true'] { border-color: var(--tcw-red); background: var(--tcw-red); color: var(--tcw-bg); }\n.tcw-ticket-side-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A row's control goes under its name when they don't fit side by side (a long choice at 320 px). */\n.tcw-ticket-row {\n  flex-wrap: wrap;\n  gap: var(--tcw-space-3) var(--tcw-space-5);\n}\n.tcw-ticket-market {\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* A stop or a target: its switch, its name with how far it is under it, then its price. */\n.tcw-ticket-optional {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n.tcw-ticket-optional-name {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n}\n.tcw-ticket-away {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  /* Left to right inside, but at the name's start in either direction (the column's, not its own). */\n  align-self: flex-start;\n}\n\n/* The receipt: under a torn-paper rule, each sum a label and a figure in the mono type. */\n.tcw-ticket-summary:not(:empty) {\n  display: grid;\n  gap: var(--tcw-space-2);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  padding-top: var(--tcw-space-4);\n  border-top: var(--tcw-border-w) dashed var(--tcw-border-strong);\n}\n.tcw-ticket-summary-row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-5);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-figure {\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ticket-figure.tcw-ticket-up { color: var(--tcw-green); }\n.tcw-ticket-figure.tcw-ticket-down { color: var(--tcw-red); }\n\n.tcw-ticket-problems {\n  padding: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-problems p { margin: var(--tcw-space-1) 0; }\n\n/* Cancel and Place alone, at the end, as tall as each other. */\n.tcw-order-ticket .tcw-modal-footer { justify-content: flex-end; }\n.tcw-order-ticket .tcw-modal-footer button { height: var(--tcw-menu-item-h); padding-block: 0; }\n.tcw-ticket-place {\n  height: var(--tcw-menu-item-h);\n  padding-inline: var(--tcw-space-6);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n.tcw-ticket-place:hover:not(:disabled) { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-ticket-place:disabled { opacity: 0.45; cursor: not-allowed; }\n.tcw-ticket-place:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A phone: the ticket is a sheet above the keyboard, its controls a finger's size. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-order-ticket {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n  .tcw-stepper .tcw-indi-input { width: 96px; }\n  .tcw-stepper-btn, .tcw-segment { min-width: 34px; }\n  .tcw-segment { height: 34px; }\n  .tcw-stepper { height: 38px; }\n}\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen side. */\n@media (forced-colors: active) {\n  .tcw-ticket-side-btn[aria-pressed='true'] { outline: 2px solid Highlight; }\n  .tcw-ticket-place { border: 1px solid ButtonText; }\n  .tcw-ticket-side-btn:focus-visible,\n  .tcw-ticket-place:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n", an = "/* === The dock: the panels by the chart, and their rail === */\n\n/* In the body's row after the chart: the panel of the page open beside the chart, the rail at the outer edge\n   (both mirror in a right-to-left widget). */\n.tcw-dock {\n  position: relative;\n  display: flex;\n  flex: none;\n  min-height: 0;\n}\n\n/* The rail: as wide as the drawing tools on the other side, its buttons as theirs. */\n.tcw-dock-rail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  width: var(--tcw-sidebar-w);\n  padding: var(--tcw-space-3) 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n.tcw-dock-btn {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-tool-size);\n  height: var(--tcw-tool-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-btn svg {\n  width: var(--tcw-tool-icon-size);\n  height: var(--tcw-tool-icon-size);\n}\n\n.tcw-dock-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The page open: in ink on its wash, as a tool in use on the other side. */\n.tcw-dock-btn[aria-pressed='true'] {\n  background: var(--tcw-on-icon-bg, var(--tcw-accent-soft));\n  color: var(--tcw-on-icon-fg, var(--tcw-accent));\n}\n\n.tcw-dock-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The edge in focus shows as its line, in ink: a ring round a strip this thin reads as two lines. */\n.tcw-dock-resize:focus-visible {\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .tcw-dock-resize:is(:hover, :active, :focus-visible)::after {\n    background: Highlight;\n  }\n}\n\n/* The panel: 262 wide to start (233 x phi^(1/4)), from 233 to 377. */\n.tcw-dock-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: var(--tcw-dock-w, 262px);\n  min-height: 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n/* Its edge by the chart: a strip to drag, a line in ink while in hand. */\n.tcw-dock-resize {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) * -1);\n  z-index: 3;\n  width: calc(var(--tcw-space-3) * 2);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.tcw-dock-resize::after {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) - 1px);\n  width: 2px;\n  background: transparent;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-resize:hover::after,\n.tcw-dock-resize:active::after,\n.tcw-dock-resize:focus-visible::after {\n  background: var(--tcw-accent);\n}\n\n/* A page's header: 34 tall (21 + 13), or a control's height where that is more, and the rule under\n   it. Its height and the page's scroll padding are both these, so they never part. */\n.tcw-dock-page {\n  --tcw-dock-head-h: max(calc(var(--tcw-space-6) + var(--tcw-space-5)), var(--tcw-control-h));\n  --tcw-dock-head-rule: 1px;\n}\n\n/* A page fills the panel and scrolls under its header; the floating panels it was lose their card. */\n.tcw-dock-panel > .tcw-dock-page {\n  position: static;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: auto;\n  max-width: none;\n  max-height: none;\n  min-height: 0;\n  margin: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the keyboard moves to scrolls in below the header and its rule, not under them. */\n  scroll-padding-block-start: calc(var(--tcw-dock-head-h) + var(--tcw-dock-head-rule));\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  animation: none;\n}\n\n/* One header for every page: its title, its own buttons, and the close at the end. */\n.tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  flex: none;\n  min-height: var(--tcw-dock-head-h);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  border-bottom: var(--tcw-dock-head-rule) solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dock-page > :is(.tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) > span:first-child {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close) {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* What scrolled in a box of its own on a floating panel scrolls with the page here (a phone's caps too). */\n.tcw-dock-page :is(.tcw-alerts-list, .tcw-datawin-body, .tcw-watchlist-list, .tcw-tree-list) {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.tcw-dock-page .tcw-watchlist-list {\n  flex: 1;\n}\n\n/* The watchlist was a bar of its own: its width and shadow are the panel's now. It scrolls as a page\n   (no overflow of its own here: this rule, as specific as the page's and later, would win). */\n.tcw-dock-panel > .tcw-watchlist {\n  width: auto;\n  border-inline-start: none;\n  box-shadow: none;\n}\n\n/* The symbol info's own padding sits under the header. */\n.tcw-dock-page.tcw-syminfo > .tcw-syminfo-body {\n  padding: var(--tcw-space-5);\n}\n\n/* Narrow (a phone, a narrow column): no rail; the panel rises from the bottom over the chart, 61.8% tall. */\n.tcw-root[data-tcw-narrow] .tcw-dock-rail,\n.tcw-root[data-tcw-narrow] .tcw-dock-resize {\n  display: none;\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock {\n  position: static;\n}\n\n/* Above the chart's lines and tags, under its toasts; above the on-screen keyboard. */\n.tcw-root[data-tcw-narrow] .tcw-dock-panel {\n  position: absolute;\n  inset-inline: 0;\n  bottom: var(--tcw-keyboard-inset, 0px);\n  z-index: 38;\n  width: auto;\n  height: 61.8%;\n  max-height: calc(100% - var(--tcw-keyboard-inset, 0px));\n  border-inline-start: none;\n  border-top: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-dialog-shadow);\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  background: var(--tcw-bg-elevated);\n}\n\n/* The small buttons in a panel's rows: the browser's padding left their icons 8 px wide in a 20 px button. */\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) {\n  padding: 0;\n}\n\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) svg {\n  flex: none;\n}\n\n/* A page's title as the others': the watchlist's is its list's name, a menu. */\n.tcw-dock-page .tcw-watchlist-name {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-3);\n  margin-inline-start: calc(var(--tcw-space-3) * -1);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: none;\n  letter-spacing: normal;\n  flex: 0 1 auto;\n}\n\n/* Its caret beside the name, the add and close buttons at the end. */\n.tcw-dock-page .tcw-watchlist-name::after {\n  margin-inline-start: var(--tcw-space-3);\n}\n\n.tcw-dock-page .tcw-watchlist-add {\n  margin-inline-start: auto;\n}\n\n/* === The depth ladder, a page of the dock === */\n\n.tcw-ladder-title {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  font: inherit;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/*\n * Bid, price, ask: under the header, in the label case. The heading and each\n * row are grids of their own, so their columns are fixed shares: a row's\n * content (a mark of your orders) never moves its column off the others'.\n */\n.tcw-ladder-cols,\n.tcw-ladder-row {\n  --tcw-ladder-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n}\n.tcw-ladder-cols {\n  position: sticky;\n  top: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  z-index: 1;\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  align-items: center;\n  height: var(--tcw-space-6);\n  padding-inline: var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-ladder-cols span:first-child { text-align: end; padding-inline-end: var(--tcw-space-4); }\n.tcw-ladder-cols span:nth-child(2) { text-align: center; }\n.tcw-ladder-cols span:last-child { padding-inline-start: var(--tcw-space-4); }\n\n.tcw-ladder-body { flex: 1; padding-inline: var(--tcw-space-3); }\n\n/* A row 21 tall: the bid's size, the price, the ask's size, in the mono figures. */\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  height: var(--tcw-space-6);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n/* A side's size over a bar grown from the price outward, as long as its share of the largest. */\n.tcw-ladder-cell {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  cursor: pointer;\n}\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  inset-block: 2px;\n  z-index: -1;\n  width: var(--w, 0%);\n  border-radius: 1px;\n}\n.tcw-ladder-bid { justify-content: flex-end; }\n.tcw-ladder-bid::before { inset-inline-end: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-ask { justify-content: flex-start; }\n.tcw-ladder-ask::before { inset-inline-start: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover { background: var(--tcw-hover-bg); }\n.tcw-ladder-cell:disabled { cursor: default; }\n.tcw-ladder-cell:focus-visible { outline: none; box-shadow: inset var(--tcw-ring); }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--tcw-space-2);\n  min-width: 0;\n  overflow: hidden;\n  padding-inline: var(--tcw-space-3);\n  border-inline: 1px solid var(--tcw-divider);\n  white-space: nowrap;\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n/* Your orders at a price: their quantity, stamped in the side's colour. */\n.tcw-ladder-own {\n  flex: none;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 2px;\n  color: var(--tcw-bg);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-ladder-own[data-side='buy'] { background: var(--tcw-green); }\n.tcw-ladder-own[data-side='sell'] { background: var(--tcw-red); }\n/* The spread, between the asks and the bids, on a torn-paper rule. */\n.tcw-ladder-spread {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-space-6);\n  border-block: 1px dashed var(--tcw-border-strong);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-empty {\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/* Narrow (a finger, not a pointer): rows a control tall, 26 not 21. */\n.tcw-root[data-tcw-narrow] .tcw-ladder-row {\n  height: var(--tcw-control-h);\n}\n\n/* Forced colours drop the bars' and the marks' fills: the bars show in the system's highlight, the marks framed. */\n@media (forced-colors: active) {\n  .tcw-ladder-cell::before { forced-color-adjust: none; background: Highlight; opacity: 0.3; }\n  .tcw-ladder-cell:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-ladder-own { border: 1px solid CanvasText; }\n}\n", on = 0, sn = "tcw-styles";
 function cn() {
 	if (on++, on > 1 || document.getElementById(sn)) return;
 	let e = document.createElement("style");
@@ -1654,7 +1654,7 @@ var Or = class {
 		return (e.dataset.tcwPart ?? "").split(/\s+/).some((e) => t.includes(e));
 	}
 	update(e) {
-		this.dotEl.className = "tcw-status-dot", e.connectionState === "connected" ? this.dotEl.classList.add("tcw-connected") : e.connectionState === "error" && this.dotEl.classList.add("tcw-error"), this.messageEl.textContent = e.message;
+		this.dotEl.className = "tcw-status-dot", e.connectionState === "connected" ? this.dotEl.classList.add(e.delayed ? "tcw-delayed" : "tcw-connected") : e.connectionState === "error" && this.dotEl.classList.add("tcw-error"), this.messageEl.textContent = e.message;
 	}
 	tick() {
 		if (!this.clockBtn || !this.extras.clock) return;
@@ -6254,14 +6254,14 @@ var Bs = class {
 		this.gone = !0, this.part && this.dispose(this.part), this.part = null;
 	}
 }, Y = {
-	settings: J(() => import("../WidgetSettings-BsjEg-Dj.js")),
-	indicatorSettings: J(() => import("../WidgetIndicatorSettings-D3W40Nud.js")),
-	drawingSettings: J(() => import("../WidgetDrawingSettings-Cwds8CdJ.js")),
+	settings: J(() => import("../WidgetSettings-Dv0kLVtb.js")),
+	indicatorSettings: J(() => import("../WidgetIndicatorSettings-DRex0IML.js")),
+	drawingSettings: J(() => import("../WidgetDrawingSettings-yGBoDk96.js")),
 	goToDate: J(() => import("../WidgetGoToDate-hcDtezRm.js")),
 	hotkeySheet: J(() => import("../WidgetHotkeySheet-1lRFSdvt.js")),
-	indicatorPicker: J(() => import("../WidgetIndicatorPicker-DsFCT2xZ.js")),
-	commandPalette: J(() => import("../WidgetCommandPalette-DpP-lG1A.js")),
-	symbolSearch: J(() => import("../WidgetSymbolSearch-Cxxq4SrK.js"))
+	indicatorPicker: J(() => import("../WidgetIndicatorPicker-CRT8UrQM.js")),
+	commandPalette: J(() => import("../WidgetCommandPalette-BVctM_8J.js")),
+	symbolSearch: J(() => import("../WidgetSymbolSearch-Bc5hW4Aa.js"))
 };
 async function Vs() {
 	await Promise.all(Object.values(Y).map((e) => e.load().catch(() => null)));
@@ -7163,7 +7163,19 @@ function jc(e) {
 function Mc(e) {
 	return e >= 1e9 ? (e / 1e9).toFixed(2) + "B" : e >= 1e6 ? (e / 1e6).toFixed(2) + "M" : e >= 1e3 ? (e / 1e3).toFixed(2) + "K" : e.toFixed(0);
 }
-var Nc = [
+//#endregion
+//#region src/widget/connectionStatus.ts
+function Nc(e, t, n, r) {
+	let i = n?.delayMinutes;
+	return e !== "connected" || i === void 0 || !Number.isFinite(i) || i <= 0 ? {
+		message: t,
+		delayed: !1
+	} : {
+		message: w(r("status.delayed"), { minutes: Math.ceil(i) }),
+		delayed: !0
+	};
+}
+var Pc = [
 	[
 		34,
 		16,
@@ -7220,7 +7232,7 @@ var Nc = [
 		30,
 		!0
 	]
-], Pc = class {
+], Fc = class {
 	el;
 	label;
 	showTimer = null;
@@ -7228,7 +7240,7 @@ var Nc = [
 	constructor(e, t) {
 		this.loadingText = t, this.el = document.createElement("div"), this.el.className = "tcw-loading-overlay", this.el.setAttribute("role", "status"), this.el.setAttribute("aria-live", "polite");
 		let n = document.createElement("div");
-		n.className = "tcw-loading-candles", n.setAttribute("aria-hidden", "true"), Nc.forEach(([e, t, r, i, a], o) => {
+		n.className = "tcw-loading-candles", n.setAttribute("aria-hidden", "true"), Pc.forEach(([e, t, r, i, a], o) => {
 			let s = document.createElement("span");
 			s.className = a ? "tcw-loading-candle tcw-loading-candle--up" : "tcw-loading-candle", s.style.setProperty("--tcw-body-top", `${e}px`), s.style.setProperty("--tcw-body-h", `${t}px`), s.style.setProperty("--tcw-wick-top", `${r}px`), s.style.setProperty("--tcw-wick-h", `${i}px`), s.style.setProperty("--tcw-delay", `${o * 110}ms`), n.appendChild(s);
 		}), this.el.appendChild(n), this.label = document.createElement("div"), this.label.className = "tcw-loading-label", this.label.textContent = t, this.el.appendChild(this.label), e.appendChild(this.el);
@@ -7263,7 +7275,7 @@ var Nc = [
 	clearTimer() {
 		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
 	}
-}, Fc = 4e3, Ic = class {
+}, Ic = 4e3, Lc = class {
 	el;
 	text;
 	hideTimer = null;
@@ -7273,7 +7285,7 @@ var Nc = [
 		n.className = "tcw-history-spinner", n.setAttribute("aria-hidden", "true"), this.text = document.createElement("span"), this.el.append(n, this.text), e.appendChild(this.el);
 	}
 	update(e) {
-		this.clearTimer(), e.state === "loading" ? this.show(this.texts.loading, !1) : e.state === "error" ? (this.show(this.texts.failed, !0), this.hideTimer = setTimeout(() => this.hide(), Fc)) : this.hide();
+		this.clearTimer(), e.state === "loading" ? this.show(this.texts.loading, !1) : e.state === "error" ? (this.show(this.texts.failed, !0), this.hideTimer = setTimeout(() => this.hide(), Ic)) : this.hide();
 	}
 	destroy() {
 		this.clearTimer(), this.el.remove();
@@ -7287,13 +7299,13 @@ var Nc = [
 	clearTimer() {
 		this.hideTimer !== null && clearTimeout(this.hideTimer), this.hideTimer = null;
 	}
-}, Lc = "host:";
-function Rc(e, t) {
+}, Rc = "host:";
+function zc(e, t) {
 	return [
 		...e,
 		...e.length > 0 && t.length > 0 ? ["separator"] : [],
 		...t.map((e, t) => ({
-			id: `${Lc}${t}`,
+			id: `${Rc}${t}`,
 			label: e.label,
 			icon: e.icon,
 			danger: e.danger,
@@ -7301,12 +7313,12 @@ function Rc(e, t) {
 		}))
 	];
 }
-function zc(e, t) {
-	return e.startsWith(Lc) ? (t[Number(e.slice(5))]?.onSelect(), !0) : !1;
+function Bc(e, t) {
+	return e.startsWith(Rc) ? (t[Number(e.slice(5))]?.onSelect(), !0) : !1;
 }
 //#endregion
 //#region src/widget/hostHotkeys.ts
-var Bc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent), Vc = {
+var Vc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent), Hc = {
 	ctrl: "ctrl",
 	control: "ctrl",
 	cmd: "ctrl",
@@ -7317,7 +7329,7 @@ var Bc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfo
 	option: "alt",
 	opt: "alt",
 	shift: "shift"
-}, Hc = {
+}, Uc = {
 	esc: "escape",
 	space: " ",
 	spacebar: " ",
@@ -7329,7 +7341,7 @@ var Bc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfo
 	return: "enter",
 	plus: "+"
 };
-function Uc(e) {
+function Wc(e) {
 	let t = e.split("+").map((e) => e.trim()), n = t.pop();
 	if (!n) return null;
 	let r = {
@@ -7339,23 +7351,23 @@ function Uc(e) {
 		display: []
 	};
 	for (let e of t) {
-		let t = Vc[e.toLowerCase()];
+		let t = Hc[e.toLowerCase()];
 		if (!t) return null;
 		r[t] = !0;
 	}
 	let i = n.toLowerCase();
-	if (Vc[i]) return null;
+	if (Hc[i]) return null;
 	if (/^[a-z]$/.test(i)) r.code = `Key${i.toUpperCase()}`, r.char = i;
 	else if (/^[0-9]$/.test(i)) r.code = `Digit${i}`, r.char = i;
-	else if (r.key = Hc[i] ?? i, r.shift && r.key.length === 1) return null;
+	else if (r.key = Uc[i] ?? i, r.shift && r.key.length === 1) return null;
 	return r.display = [
-		...r.ctrl ? [Bc ? "⌘" : "Ctrl"] : [],
+		...r.ctrl ? [Vc ? "⌘" : "Ctrl"] : [],
 		...r.alt ? ["Alt"] : [],
 		...r.shift ? ["Shift"] : [],
 		r.key === " " ? "Space" : n.length === 1 ? n.toUpperCase() : n
 	], r;
 }
-function Wc(e, t) {
+function Gc(e, t) {
 	if ((e.ctrlKey || e.metaKey) !== t.ctrl || e.altKey !== t.alt) return !1;
 	if (t.code !== void 0) {
 		if (e.shiftKey !== t.shift) return !1;
@@ -7365,25 +7377,25 @@ function Wc(e, t) {
 	}
 	return t.shift && !e.shiftKey ? !1 : e.key.toLowerCase() === t.key;
 }
-var Gc = new Set(/* @__PURE__ */ "escape(enter(delete(backspace(arrowleft(arrowright(arrowup(arrowdown(home(end(+(-(=( (,(.(ctrl+z(ctrl+shift+z(ctrl+y(ctrl+c(ctrl+v(ctrl+d(ctrl+g(ctrl+shift+g(ctrl+[(ctrl+]".split("("));
-function Kc(e) {
+var Kc = new Set(/* @__PURE__ */ "escape(enter(delete(backspace(arrowleft(arrowright(arrowup(arrowdown(home(end(+(-(=( (,(.(ctrl+z(ctrl+shift+z(ctrl+y(ctrl+c(ctrl+v(ctrl+d(ctrl+g(ctrl+shift+g(ctrl+[(ctrl+]".split("("));
+function qc(e) {
 	let t = `${e.ctrl ? "ctrl+" : ""}${e.alt ? "alt+" : ""}${e.shift ? "shift+" : ""}${e.char ?? e.key}`;
-	return Gc.has(t);
+	return Kc.has(t);
 }
-function qc(e) {
+function Jc(e) {
 	let t = typeof e.composedPath == "function" ? e.composedPath()[0] : e.target;
 	return t instanceof HTMLElement ? t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) : !1;
 }
 //#endregion
 //#region src/widget/WidgetCompares.ts
-var Jc = [
+var Yc = [
 	"#b552c9",
 	"#1398a8",
 	"#d4622b",
 	"#e25592",
 	"#6f7a8c",
 	"#3e9a4f"
-], Yc = class {
+], Xc = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -7437,7 +7449,7 @@ var Jc = [
 		try {
 			let t = await this.fetchCompareBars(this.host.adapter, e);
 			if (!t || this.compares.some((t) => t.symbol === e)) return;
-			let r = this.host.state.timeframe, i = Jc[this.compares.length % Jc.length];
+			let r = this.host.state.timeframe, i = Yc[this.compares.length % Yc.length];
 			this.compares.length === 0 && this.host.chart.setCompareMode("percent"), this.host.chart.addCompareSymbol(n, O(e), t, i), this.compares = [...this.compares, {
 				id: n,
 				symbol: e,
@@ -7609,7 +7621,7 @@ var Jc = [
 			failedAt: t
 		} : n);
 	}
-}, Xc = class {
+}, Zc = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -7754,7 +7766,7 @@ var Jc = [
 			sparkline: r.slice()
 		});
 	}
-}, Zc = class {
+}, Qc = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -7820,7 +7832,7 @@ var Jc = [
 		let r = e.slice(0, n), i = e.slice(n + 1), a = vc(this.host.chart.getIndicatorOutput(r)?.series, null)?.[i];
 		return typeof a == "number" && Number.isFinite(a) ? a : null;
 	}
-}, Qc = class {
+}, $c = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -7897,7 +7909,7 @@ var Jc = [
 };
 //#endregion
 //#region src/widget/drawingMenu.ts
-function $c(e, t) {
+function el(e, t) {
 	let { selected: n } = e, r = n.length === 1, i = new Set(n.map((e) => e.groupId)), a = i.size === 1 && !i.has(null), o = [];
 	e.canConfigure && r && o.push({
 		id: "settings",
@@ -7954,7 +7966,7 @@ function $c(e, t) {
 }
 //#endregion
 //#region src/widget/WidgetMenus.ts
-var el = class {
+var tl = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -7973,7 +7985,7 @@ var el = class {
 			}] : [];
 		});
 		if (i.length === 0) return;
-		let a = ce($c({
+		let a = ce(el({
 			selected: i,
 			canConfigure: !0,
 			canAlert: this.host.chart.canAddDrawingAlert(e)
@@ -7981,11 +7993,11 @@ var el = class {
 			id: e,
 			type: s.type,
 			selected: o
-		}) ?? [] : [], l = Rc(a, c);
+		}) ?? [] : [], l = zc(a, c);
 		if (l.length === 0) return;
 		let u = this.host.chartContainer.getBoundingClientRect(), d = this.host.root.getBoundingClientRect();
 		this.drawingMenu.open(l, u.left - d.left + t, u.top - d.top + n, (t) => {
-			zc(t, c) || this.runDrawingMenuAction(e, o, t);
+			Bc(t, c) || this.runDrawingMenuAction(e, o, t);
 		});
 	}
 	runDrawingMenuAction(e, t, n) {
@@ -8083,11 +8095,11 @@ var el = class {
 	}
 	openChartMenu(e, t, n, r) {
 		if (!this.chartMenu) return;
-		let i = this.host.options.chartMenuItems?.(r) ?? [], a = Rc(e, i);
+		let i = this.host.options.chartMenuItems?.(r) ?? [], a = zc(e, i);
 		if (a.length === 0) return;
 		let o = this.host.chartContainer.getBoundingClientRect(), s = this.host.root.getBoundingClientRect();
 		this.chartMenu.open(a, o.left - s.left + t, o.top - s.top + n, (e) => {
-			zc(e, i) || (e.startsWith("tz:") ? this.host.changeSettings({ timezone: e.slice(3) }) : this.runChartMenuAction(e, r));
+			Bc(e, i) || (e.startsWith("tz:") ? this.host.changeSettings({ timezone: e.slice(3) }) : this.runChartMenuAction(e, r));
 		});
 	}
 	runChartMenuAction(e, t) {
@@ -8212,46 +8224,46 @@ var el = class {
 			activeTool: null
 		}, this.host.updateUI(), this.host.refreshDrawingsState(), this.host.refreshObjects();
 	}
-}, tl = 2, nl = 2;
-function rl(e, t = "en-US") {
-	return et(e, Math.max(tl, Pt(e)), t);
-}
+}, nl = 2, rl = 2;
 function il(e, t = "en-US") {
-	return `${Yo(et(Math.abs(e), nl, t), e, et(0, nl, t))}%`;
+	return et(e, Math.max(nl, Pt(e)), t);
+}
+function al(e, t = "en-US") {
+	return `${Yo(et(Math.abs(e), rl, t), e, et(0, rl, t))}%`;
 }
-function al(e, t = "en-US", n = !0) {
+function ol(e, t = "en-US", n = !0) {
 	return e.map((e) => ({
 		instanceId: e.id,
 		kind: "compare",
 		label: e.label,
 		swatch: e.color,
 		visible: e.visible,
-		...n ? { values: ol(e, t) } : {
+		...n ? { values: sl(e, t) } : {
 			values: [],
 			offChartType: !0
 		},
 		pane: null
 	}));
 }
-function ol(e, t) {
+function sl(e, t) {
 	return [...e.close === null ? [] : [{
-		text: rl(e.close, t),
+		text: il(e.close, t),
 		color: null
 	}], ...e.change === null ? [] : [{
-		text: il(e.change, t),
+		text: al(e.change, t),
 		color: null
 	}]];
 }
 //#endregion
 //#region src/widget/WidgetLegendView.ts
-var sl = 7, cl = 17, ll = 3, ul = 4;
-function dl(e) {
-	return Ge[e.getDensity?.() ?? "comfortable"].legendInset - ul;
-}
+var cl = 7, ll = 17, ul = 3, dl = 4;
 function fl(e) {
+	return Ge[e.getDensity?.() ?? "comfortable"].legendInset - dl;
+}
+function pl(e) {
 	return !jt.has(e.id) && e.scale !== "left";
 }
-var pl = class {
+var ml = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -8264,12 +8276,12 @@ var pl = class {
 	}
 	renderLegend() {
 		if (!this.host.indicatorLegend || this.host.destroyed) return;
-		let e = this.host.chart.getData().length - 1, t = this.host.chart.isTimeAligned(), n = this.host.legendHoverIndex, r = dl(this.host.chart), i = n === null ? e : Math.min(Math.max(n, 0), e), a = /* @__PURE__ */ new Map();
+		let e = this.host.chart.getData().length - 1, t = this.host.chart.isTimeAligned(), n = this.host.legendHoverIndex, r = fl(this.host.chart), i = n === null ? e : Math.min(Math.max(n, 0), e), a = /* @__PURE__ */ new Map();
 		for (let e of this.host.chart.getIndicatorPanes()) (e.instanceIds ?? [e.instanceId]).forEach((t, n) => a.set(t, {
 			...e.rect,
 			row: n
 		}));
-		let o = this.host.settingsState.numberLocale || "en-US", s = al(i >= 0 ? this.host.chart.getCompareValues?.(n === null || !t ? void 0 : i) ?? [] : [], o, t), c = this.host.chart.getActiveIndicators().map((e) => {
+		let o = this.host.settingsState.numberLocale || "en-US", s = ol(i >= 0 ? this.host.chart.getCompareValues?.(n === null || !t ? void 0 : i) ?? [] : [], o, t), c = this.host.chart.getActiveIndicators().map((e) => {
 			let t = a.get(e.instanceId) ?? null, i = vc(this.host.chart.getIndicatorOutput(e.instanceId, { drawn: !0 })?.series, n), s = this.host.chart.getIndicatorStyle(e.instanceId), c = e.visible && e.offChartType === !0, l = e.visible && e.shown === !1 && !c, u = l || c ? [] : yc(e.descriptor, i, s?.colors ?? [], s?.plots);
 			return {
 				instanceId: e.instanceId,
@@ -8278,19 +8290,19 @@ var pl = class {
 				offInterval: l,
 				offChartType: c,
 				values: u.map((n) => ({
-					text: this.host.indicatorValueText(n.value, t === null && fl(e), o),
+					text: this.host.indicatorValueText(n.value, t === null && pl(e), o),
 					color: n.color
 				})),
 				pane: t ? {
 					x: t.x + r,
-					y: t.y + Math.min(sl + t.row * cl, Math.max(sl, t.height - cl)),
+					y: t.y + Math.min(cl + t.row * ll, Math.max(cl, t.height - ll)),
 					width: t.width - 2 * r
 				} : null
 			};
 		}), l = [...s, ...c], u = this.host.chart.getPlotRect(), d = this.host.chart.getMaximizedPane(), f = (e) => l.find((t) => t.instanceId === e)?.label ?? "", p = this.host.chart.getIndicatorPanes().map((e) => ({
 			instanceId: e.instanceId,
 			x: e.rect.x + e.rect.width - r,
-			y: e.rect.y + ll,
+			y: e.rect.y + ul,
 			label: f(e.instanceId),
 			collapsed: this.host.chart.isPaneCollapsed(e.instanceId),
 			maximized: d === e.instanceId,
@@ -8344,14 +8356,14 @@ var pl = class {
 		let u = this.host.chart.getActiveIndicators().find((t) => t.instanceId === e)?.id ?? "", d = this.host.options.indicatorMenuItems?.({
 			instanceId: e,
 			indicatorId: u
-		}) ?? [], f = Rc(c, d);
+		}) ?? [], f = zc(c, d);
 		if (f.length === 0) return;
 		let p = t.getBoundingClientRect(), m = this.host.root.getBoundingClientRect();
 		n.open(f, p.left - m.left, p.bottom - m.top + 2, (t) => {
-			zc(t, d) || (t === "settings" ? this.host.openIndicatorSettings(e) : t === "remove" ? this.host.handleRemoveIndicator(e) : t.startsWith("move:") && this.host.chart.moveIndicatorToPane(e, t.slice(5)), this.scheduleLegend());
+			Bc(t, d) || (t === "settings" ? this.host.openIndicatorSettings(e) : t === "remove" ? this.host.handleRemoveIndicator(e) : t.startsWith("move:") && this.host.chart.moveIndicatorToPane(e, t.slice(5)), this.scheduleLegend());
 		}, t);
 	}
-}, ml = class {
+}, hl = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -8556,7 +8568,7 @@ var pl = class {
 				break;
 		}
 	}
-}, hl = 0, gl = class {
+}, gl = 0, _l = class {
 	backdrop;
 	search;
 	listEl;
@@ -8564,7 +8576,7 @@ var pl = class {
 	confirming = null;
 	returnFocus = null;
 	loadSeq = 0;
-	uid = ++hl;
+	uid = ++gl;
 	constructor(e, t, n = T) {
 		this.callbacks = t, this.t = n, this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.hidden = !0;
 		let r = !1;
@@ -8670,7 +8682,7 @@ var pl = class {
 			this.confirming = null, await this.refresh(), this.isOpen() && this.search.focus();
 		}
 	}
-}, _l = 5, vl = class {
+}, vl = 5, yl = class {
 	menu;
 	prompt;
 	dialog;
@@ -8678,7 +8690,7 @@ var pl = class {
 	constructor(e, t) {
 		this.session = e, this.host = t;
 		let { root: n, t: r } = t;
-		this.menu = new C(n, r("toolbar.layouts")), this.prompt = new Ds(n, r), this.dialog = new gl(n, {
+		this.menu = new C(n, r("toolbar.layouts")), this.prompt = new Ds(n, r), this.dialog = new _l(n, {
 			list: () => e.list(),
 			currentId: () => e.current()?.id ?? null,
 			onOpen: (e) => void this.open(e),
@@ -8756,7 +8768,7 @@ var pl = class {
 		}
 		let { session: t } = this, { t: n } = this.host, r = [];
 		try {
-			r = (await t.list()).slice(0, _l);
+			r = (await t.list()).slice(0, vl);
 		} catch {}
 		if (this.destroyed) return;
 		let i = t.current(), a = [{
@@ -8792,33 +8804,33 @@ var pl = class {
 	destroy() {
 		this.destroyed = !0, this.menu.destroy(), this.prompt.destroy(), this.dialog.destroy();
 	}
-}, yl = (e) => typeof e == "object" && !!e && !Array.isArray(e), bl = globalThis.Buffer;
-function xl(e) {
-	if (bl) return bl.from(e, "utf8").toString("base64");
+}, bl = (e) => typeof e == "object" && !!e && !Array.isArray(e), xl = globalThis.Buffer;
+function Sl(e) {
+	if (xl) return xl.from(e, "utf8").toString("base64");
 	let t = new TextEncoder().encode(e), n = "";
 	for (let e of t) n += String.fromCharCode(e);
 	return btoa(n);
 }
-function Sl(e) {
-	if (bl) return bl.from(e, "base64").toString("utf8");
+function Cl(e) {
+	if (xl) return xl.from(e, "base64").toString("utf8");
 	let t = atob(e), n = new Uint8Array(t.length);
 	for (let e = 0; e < t.length; e++) n[e] = t.charCodeAt(e);
 	return new TextDecoder().decode(n);
 }
-function Cl(e) {
+function wl(e) {
 	return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-function wl(e) {
+function Tl(e) {
 	let t = e.replace(/-/g, "+").replace(/_/g, "/");
 	return t + (t.length % 4 == 0 ? "" : "=".repeat(4 - t.length % 4));
 }
-function Tl(e) {
-	return Cl(xl(JSON.stringify(e)));
-}
 function El(e) {
+	return wl(Sl(JSON.stringify(e)));
+}
+function Dl(e) {
 	if (!e) return null;
 	try {
-		let t = Sl(wl(e)), n = JSON.parse(t);
+		let t = Cl(Tl(e)), n = JSON.parse(t);
 		return !n || n.v !== 1 || typeof n.symbol != "string" ? null : {
 			v: 1,
 			symbol: n.symbol,
@@ -8827,18 +8839,18 @@ function El(e) {
 			scaleMode: js.find((e) => e === n.scaleMode) ?? "regular",
 			indicators: Array.isArray(n.indicators) ? n.indicators : [],
 			drawings: Array.isArray(n.drawings) ? n.drawings : [],
-			...yl(n.settings) ? { settings: W(n.settings, La) } : {}
+			...bl(n.settings) ? { settings: W(n.settings, La) } : {}
 		};
 	} catch {
 		return null;
 	}
 }
-var Dl = "tcw";
-function Ol(e) {
+var Ol = "tcw";
+function kl(e) {
 	let t = e.startsWith("#") ? e.slice(1) : e;
 	for (let e of t.split("&")) {
 		let t = e.indexOf("=");
-		if (!(t <= 0 || e.slice(0, t) !== Dl)) try {
+		if (!(t <= 0 || e.slice(0, t) !== Ol)) try {
 			return decodeURIComponent(e.slice(t + 1));
 		} catch {
 			return null;
@@ -8846,19 +8858,19 @@ function Ol(e) {
 	}
 	return null;
 }
-function kl(e, t) {
+function Al(e, t) {
 	let [n] = e.split("#");
-	return `${n}#${Dl}=${t}`;
+	return `${n}#${Ol}=${t}`;
 }
 //#endregion
 //#region src/widget/WidgetLayouts.ts
-var Al = [
+var jl = [
 	"legendVisible",
 	"volumeVisible",
 	"barCountdown",
 	"indicatorValueLabels",
 	"alignAxisLabels"
-], jl = class {
+], Ml = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -8869,7 +8881,7 @@ var Al = [
 	activeLayoutKey = null;
 	restoreSharedView() {
 		if (!this.host.options.shareUrl || typeof location > "u") return;
-		let e = Ol(location.hash);
+		let e = kl(location.hash);
 		e && this.importState(e);
 	}
 	exportState() {
@@ -8878,9 +8890,9 @@ var Al = [
 			params: e.params
 		})), t = this.host.getSettings(), n = Za(t, {
 			..._,
-			...Object.fromEntries(Al.map((e) => [e, this.host.settingsDefaults[e]]))
+			...Object.fromEntries(jl.map((e) => [e, this.host.settingsDefaults[e]]))
 		});
-		return Tl({
+		return El({
 			v: 1,
 			symbol: this.host.state.symbol,
 			timeframe: this.host.state.timeframe,
@@ -8892,7 +8904,7 @@ var Al = [
 		});
 	}
 	async importState(e) {
-		let t = El(e);
+		let t = Dl(e);
 		if (!t) return !1;
 		t.symbol && t.symbol !== this.host.state.symbol && await this.host.setSymbol(t.symbol), t.timeframe && t.timeframe !== this.host.state.timeframe && await this.host.setTimeframe(t.timeframe), t.chartType && this.host.applyChartType(t.chartType);
 		let { chartTypeOptions: n, ...r } = this.host.allowedSettings({
@@ -8909,7 +8921,7 @@ var Al = [
 		}))), this.host.chart.setDrawings(t.drawings), this.host.updateUI(), !0;
 	}
 	async copyShareLink() {
-		let e = kl(typeof location < "u" ? location.href : "", this.exportState());
+		let e = Al(typeof location < "u" ? location.href : "", this.exportState());
 		try {
 			await navigator.clipboard.writeText(e), this.host.say(this.host.t("toast.linkCopied"));
 		} catch {
@@ -8971,7 +8983,7 @@ var Al = [
 			onChange: () => this.host.toolbar?.setLayout(t.current()?.name ?? null, t.isDirty()),
 			onError: () => this.host.say(this.host.t("layouts.saveFailed"), "error")
 		});
-		this.layoutSession = t, this.layoutsUI = new vl(t, {
+		this.layoutSession = t, this.layoutsUI = new yl(t, {
 			root: this.host.root,
 			t: this.host.t,
 			saveKeys: () => this.host.keysShown("hotkeys.save", `${We}+S`),
@@ -9012,19 +9024,19 @@ var Al = [
 			this.host.chart.disableAutoSave(), this.activeLayoutKey = null;
 		}
 	}
-}, Ml = {
+}, Nl = {
 	alerts: "alerts",
 	objectTree: "objectTree",
 	dataWindow: "dataWindow",
 	symbolInfo: "symbolInfo",
 	depthLadder: "depthLadder"
-}, Nl = {
+}, Pl = {
 	watchlist: "watchlist",
 	alerts: "alerts",
 	objectTree: "objects",
 	symbolInfo: "symbolInfo",
 	depthLadder: "trade"
-}, Pl = class {
+}, Fl = class {
 	dataWindowFrame = 0;
 	constructor(e) {
 		this.host = e;
@@ -9041,7 +9053,7 @@ var Al = [
 		return !this.hasPanel(e) || !this.dock ? !1 : (this.dock.open(e), this.dock.current() === e);
 	}
 	hasPanel(e) {
-		return e === "watchlist" ? this.host.watching.watchlist !== null : e === "depthLadder" && this.host.trading.depthLadder === null ? !1 : this.host.featureState[Ml[e]];
+		return e === "watchlist" ? this.host.watching.watchlist !== null : e === "depthLadder" && this.host.trading.depthLadder === null ? !1 : this.host.featureState[Nl[e]];
 	}
 	closePanel() {
 		this.dock?.close();
@@ -9074,7 +9086,7 @@ var Al = [
 			indicators: []
 		};
 		let { bar: n, prevClose: r } = t, i = n.close - r, a = r === 0 ? 0 : i / r * 100, o = new Set(this.host.chart.getIndicatorPanes().flatMap((e) => e.instanceIds ?? [e.instanceId])), s = this.host.settingsState.numberLocale || "en-US", c = this.host.chart.getActiveIndicators().map((t) => {
-			let n = this.host.chart.getIndicatorOutput(t.instanceId, { drawn: !0 })?.series?.[e] ?? null, r = !o.has(t.instanceId) && fl(t), i = t.descriptor.plots?.map((e) => [e.key, e.title]) ?? Object.keys(n ?? {}).map((e) => [e, e]), a = n ? i.filter(([e]) => typeof n[e] == "number" && Number.isFinite(n[e])).map(([e, t]) => {
+			let n = this.host.chart.getIndicatorOutput(t.instanceId, { drawn: !0 })?.series?.[e] ?? null, r = !o.has(t.instanceId) && pl(t), i = t.descriptor.plots?.map((e) => [e.key, e.title]) ?? Object.keys(n ?? {}).map((e) => [e, e]), a = n ? i.filter(([e]) => typeof n[e] == "number" && Number.isFinite(n[e])).map(([e, t]) => {
 				let i = n[e];
 				return {
 					key: t,
@@ -9203,7 +9215,7 @@ var Al = [
 		this.host.toolbar?.setRailed("watchlist", e && this.host.featureState["dock.watchlist"]), this.host.toolbar?.setRailed("alerts", e && this.host.featureState["dock.alerts"]), this.host.toolbar?.setRailed("objects", e && this.host.featureState["dock.objectTree"]), this.host.toolbar?.fit();
 	}
 	panelFocusTarget(e) {
-		let t = Nl[e], n = t ? this.host.root.querySelector(`.tcw-toolbar [data-role="${t}"]`) : null, r = this.host.root.hasAttribute("data-tcw-narrow");
+		let t = Pl[e], n = t ? this.host.root.querySelector(`.tcw-toolbar [data-role="${t}"]`) : null, r = this.host.root.hasAttribute("data-tcw-narrow");
 		return n && !n.hidden && !(r && n.classList.contains("tcw-toolbar-overflow")) ? n : this.host.root.querySelector(".tcw-toolbar-more") ?? this.host.chartContainer;
 	}
 	closePanelByHand(e) {
@@ -9231,29 +9243,29 @@ var Al = [
 		}));
 		this.host.objectTree.setObjects(e, t, n);
 	}
-}, Fl = new Set([
+}, Il = new Set([
 	"timezone",
 	"numberLocale",
 	"chartTypeOptions",
 	"logScale",
 	"autoScale"
-]), Il = 80, Ll = (e) => typeof e == "object" && !!e && !Array.isArray(e);
-function Rl(e) {
-	return W(e, Fl);
-}
+]), Ll = 80, Rl = (e) => typeof e == "object" && !!e && !Array.isArray(e);
 function zl(e) {
+	return W(e, Il);
+}
+function Bl(e) {
 	let { overrides: t } = ut(e);
 	return Object.fromEntries(Object.entries(t).filter(([e, t]) => t !== null && v.includes(e)));
 }
-function Bl() {
+function Vl() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var Vl = class {
-	constructor(e = "tcw:chart-templates", t = Bl()) {
+var Hl = class {
+	constructor(e = "tcw:chart-templates", t = Vl()) {
 		this.key = e, this.storage = t;
 	}
 	list() {
@@ -9265,10 +9277,10 @@ var Vl = class {
 		}
 		if (!Array.isArray(e)) return [];
 		let t = [];
-		for (let n of e) !Ll(n) || typeof n.name != "string" || !n.name.trim() || t.push({
-			name: n.name.slice(0, Il).trim(),
-			settings: Rl(n.settings),
-			style: zl(n.style)
+		for (let n of e) !Rl(n) || typeof n.name != "string" || !n.name.trim() || t.push({
+			name: n.name.slice(0, Ll).trim(),
+			settings: zl(n.settings),
+			style: Bl(n.style)
 		});
 		return t.sort((e, t) => e.name.localeCompare(t.name));
 	}
@@ -9276,12 +9288,12 @@ var Vl = class {
 		return this.list().find((t) => t.name === e) ?? null;
 	}
 	save(e, t, n) {
-		let r = e.replace(/\s+/g, " ").slice(0, Il).trim();
+		let r = e.replace(/\s+/g, " ").slice(0, Ll).trim();
 		if (!r || !this.storage) return !1;
 		let i = [...this.list().filter((e) => e.name !== r), {
 			name: r,
-			settings: Rl(t),
-			style: zl(n)
+			settings: zl(t),
+			style: Bl(n)
 		}];
 		try {
 			return this.storage.setItem(this.key, JSON.stringify(i)), !0;
@@ -9294,11 +9306,11 @@ var Vl = class {
 			this.storage?.setItem(this.key, JSON.stringify(this.list().filter((t) => t.name !== e)));
 		} catch {}
 	}
-}, Hl = new Set([...Pa, "autoScale"]), Ul = class {
+}, Ul = new Set([...Pa, "autoScale"]), Wl = class {
 	constructor(e) {
 		this.host = e;
 	}
-	chartTemplates = new Vl();
+	chartTemplates = new Hl();
 	chartTemplatePrompt = null;
 	settingsEdit = null;
 	state = er(_);
@@ -9528,7 +9540,7 @@ var Vl = class {
 		this.settingsState = {
 			...this.settingsState,
 			...e
-		}, Object.keys(e).some((e) => !Hl.has(e)) && this.host.layouts.layoutSession?.changed(), this.host.legend.scheduleLegend(), e.gridVisible !== void 0 && this.host.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.host.chart.setVolumeVisible(e.volumeVisible), e.volumeProfileVisible !== void 0 && this.host.chart.setVolumeProfileVisible(e.volumeProfileVisible), e.marketProfileVisible !== void 0 && this.host.chart.setMarketProfileVisible(e.marketProfileVisible), e.marketProfileSplit !== void 0 && this.host.chart.setMarketProfileConfig({ splitBySession: e.marketProfileSplit }), e.marketProfileLetters !== void 0 && this.host.chart.setMarketProfileConfig({ letters: e.marketProfileLetters }), e.marketProfileBuckets !== void 0 && this.host.chart.setMarketProfileConfig({ buckets: e.marketProfileBuckets }), e.marketProfileOpacity !== void 0 && this.host.chart.setMarketProfileConfig({ opacity: e.marketProfileOpacity }), e.depthHeatmapVisible !== void 0 && this.host.chart.setDepthHeatmapVisible(e.depthHeatmapVisible), e.depthHeatmapOpacity !== void 0 && this.host.chart.setDepthHeatmapConfig({ opacity: e.depthHeatmapOpacity }), e.sessionShadingVisible !== void 0 && this.host.chart.setSessionShadingVisible(e.sessionShadingVisible), e.pivotMarkersVisible !== void 0 && this.host.chart.setPivotMarkersVisible(e.pivotMarkersVisible), e.pivotStrength !== void 0 && this.host.chart.setPivotMarkersConfig({
+		}, Object.keys(e).some((e) => !Ul.has(e)) && this.host.layouts.layoutSession?.changed(), this.host.legend.scheduleLegend(), e.gridVisible !== void 0 && this.host.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.host.chart.setVolumeVisible(e.volumeVisible), e.volumeProfileVisible !== void 0 && this.host.chart.setVolumeProfileVisible(e.volumeProfileVisible), e.marketProfileVisible !== void 0 && this.host.chart.setMarketProfileVisible(e.marketProfileVisible), e.marketProfileSplit !== void 0 && this.host.chart.setMarketProfileConfig({ splitBySession: e.marketProfileSplit }), e.marketProfileLetters !== void 0 && this.host.chart.setMarketProfileConfig({ letters: e.marketProfileLetters }), e.marketProfileBuckets !== void 0 && this.host.chart.setMarketProfileConfig({ buckets: e.marketProfileBuckets }), e.marketProfileOpacity !== void 0 && this.host.chart.setMarketProfileConfig({ opacity: e.marketProfileOpacity }), e.depthHeatmapVisible !== void 0 && this.host.chart.setDepthHeatmapVisible(e.depthHeatmapVisible), e.depthHeatmapOpacity !== void 0 && this.host.chart.setDepthHeatmapConfig({ opacity: e.depthHeatmapOpacity }), e.sessionShadingVisible !== void 0 && this.host.chart.setSessionShadingVisible(e.sessionShadingVisible), e.pivotMarkersVisible !== void 0 && this.host.chart.setPivotMarkersVisible(e.pivotMarkersVisible), e.pivotStrength !== void 0 && this.host.chart.setPivotMarkersConfig({
 			left: e.pivotStrength,
 			right: e.pivotStrength
 		}), e.pivotStructureLabels !== void 0 && this.host.chart.setPivotMarkersConfig({ structureLabels: e.pivotStructureLabels }), e.periodLevelsVisible !== void 0 && this.host.chart.setPeriodLevelsVisible(e.periodLevelsVisible), e.periodLevelsPeriod !== void 0 && this.host.chart.setPeriodLevelsPeriod(e.periodLevelsPeriod), e.legendVisible !== void 0 && this.host.chart.setLegend({ visible: e.legendVisible }), e.barCountdown !== void 0 && this.host.chart.setBarCountdownVisible(e.barCountdown), e.indicatorValueLabels !== void 0 && this.host.chart.setIndicatorValueLabelsVisible(e.indicatorValueLabels), e.alignAxisLabels !== void 0 && this.host.chart.setAxisLabelsAligned(e.alignAxisLabels), e.crosshairMode !== void 0 && this.host.chart.setCrosshairMode(e.crosshairMode), e.crosshairCursor !== void 0 && this.host.chart.setCrosshairCursor(e.crosshairCursor), e.autoScale !== void 0 && this.host.chart.setAutoScale(e.autoScale), e.invertScale !== void 0 && this.host.chart.setInvertScale(e.invertScale), e.leftPriceScale !== void 0 && (this.host.chart.setLeftPriceScaleVisible(e.leftPriceScale), this.host.placeDrawingButton()), (e.scaleMode !== void 0 || e.autoScale !== void 0) && queueMicrotask(() => this.refreshScaleSwitches()), e.timezone !== void 0 && queueMicrotask(() => this.host.statusBar?.tick()), e.scaleMode === void 0 ? e.logScale !== void 0 && (this.settingsState = {
@@ -9590,8 +9602,8 @@ var Vl = class {
 	restoreSettings(e, t = null, n) {
 		n !== void 0 && (this.host.comparing.compareScaleHeld = n && this.host.comparing.compares.length > 0), this.applySettings(e), t && t.theme === (this.host.chart.getTheme()?.name ?? "") && this.host.chart.applyOverrides(t.overrides, { layer: "user" }), this.host.settings?.refresh(this.shownSettings());
 	}
-}, Wl = 13;
-function Gl(e) {
+}, Gl = 13;
+function Kl(e) {
 	let t = e.filter((e) => e !== null);
 	if (t.length === 0) return null;
 	let n = Math.min(...t.map((e) => e.x)), r = Math.min(...t.map((e) => e.y)), i = Math.max(...t.map((e) => e.x + e.width)), a = Math.max(...t.map((e) => e.y + e.height));
@@ -9602,7 +9614,7 @@ function Gl(e) {
 		height: a - r
 	};
 }
-var Kl = class {
+var ql = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -9633,7 +9645,7 @@ var Kl = class {
 			e.hide();
 			return;
 		}
-		let i = this.host.chartOffset(), a = r[0], o = (a.paneId === void 0 ? void 0 : this.host.chart.getIndicatorPanes().find((e) => e.instanceId === a.paneId)?.rect) ?? this.host.chart.getPlotRect(), s = this.host.chart.getPlotRect(), c = Gl(r.flatMap((e) => [this.host.chart.getDrawingRect(e.id), this.host.chart.getDrawingTextRect?.(e.id) ?? null])) ?? {
+		let i = this.host.chartOffset(), a = r[0], o = (a.paneId === void 0 ? void 0 : this.host.chart.getIndicatorPanes().find((e) => e.instanceId === a.paneId)?.rect) ?? this.host.chart.getPlotRect(), s = this.host.chart.getPlotRect(), c = Kl(r.flatMap((e) => [this.host.chart.getDrawingRect(e.id), this.host.chart.getDrawingTextRect?.(e.id) ?? null])) ?? {
 			x: o.x + o.width / 2,
 			y: o.y,
 			width: 0,
@@ -9682,7 +9694,7 @@ var Kl = class {
 			},
 			text: o,
 			font: {
-				size: a.fontSize || i?.fontSize || Wl,
+				size: a.fontSize || i?.fontSize || Gl,
 				bold: a.bold === !0,
 				italic: a.italic === !0,
 				family: this.host.chart.getFont?.()?.family ?? this.host.ui.font.family
@@ -9734,7 +9746,7 @@ var Kl = class {
 			}
 		});
 	}
-}, ql = 200, Jl = class {
+}, Jl = 200, Yl = class {
 	constructor(e) {
 		this.host = e;
 	}
@@ -9763,7 +9775,7 @@ var Kl = class {
 		for (; o > 0 && n[o - 1].time * r >= a;) o--;
 		let s = this.host.displayTimezone();
 		return On({
-			dayShare: n.slice(-ql).some((e) => {
+			dayShare: n.slice(-Jl).some((e) => {
 				let t = e.time * r, n = new Date(t + ot(s, t) * 6e4).getUTCDay();
 				return n === 0 || n === 6;
 			}) ? 1 : 5 / 7,
@@ -9808,7 +9820,7 @@ var Kl = class {
 	handleToggleTimeframeFavorite(e) {
 		this.host.timeframeFavorites.toggle(e), this.host.toolbar?.setTimeframeFavorites(this.pinnedTimeframes()), this.host.updateUI();
 	}
-}, Yl = 600, Xl = 24, Zl = [
+}, Xl = 600, Zl = 24, Ql = [
 	"--tcw-toolbar-h",
 	"--tcw-control-h",
 	"--tcw-control-h-sm",
@@ -9826,33 +9838,33 @@ var Kl = class {
 	"--tcw-line-height",
 	"--tcw-line-xs",
 	"--tcw-label-size"
-], Ql = 48, $l = 5e4, eu = 100;
-function tu() {
+], $l = 48, eu = 5e4, tu = 100;
+function nu() {
 	return new Promise((e) => {
 		if (typeof requestAnimationFrame != "function" || document.hidden) {
 			setTimeout(e, 0);
 			return;
 		}
-		let t = setTimeout(e, eu);
+		let t = setTimeout(e, tu);
 		requestAnimationFrame(() => setTimeout(() => {
 			clearTimeout(t), e();
 		}, 0));
 	});
 }
-var nu = 864e5, ru = 5e3, iu = 2e3, au = 48, ou = "rgba(255,255,255,0.03)", su = "rgba(0,0,0,0.03)", cu = 2;
-function lu(e) {
+var ru = 864e5, iu = 5e3, au = 2e3, ou = 48, su = "rgba(255,255,255,0.03)", cu = "rgba(0,0,0,0.03)", lu = 2;
+function uu(e) {
 	if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === 229 || e.getModifierState?.("AltGraph")) return null;
 	if (/^[a-z]$/i.test(e.key)) return e.key;
 	let t = /^Key([A-Z])$/.exec(e.code ?? "");
 	return t && [...e.key].length === 1 && !/[\s\d]/.test(e.key) ? t[1].toLowerCase() : null;
 }
-var uu = 1e3, du = [
+var du = 1e3, fu = [
 	["barCountdown", "barCountdown"],
 	["logScale", "logScale"],
 	["legendVisible", "legend"],
 	["volumeVisible", "volume"]
-], fu = v.filter((e) => Ke[e] !== "color");
-function pu(e) {
+], pu = v.filter((e) => Ke[e] !== "color");
+function mu(e) {
 	if (!e.feed) return e;
 	if (e.adapter) throw TypeError("A widget takes an adapter or a feed, not both");
 	return {
@@ -9861,19 +9873,19 @@ function pu(e) {
 		feed: void 0
 	};
 }
-var mu = class {
-	intervals = new Jl(this.intervalsHost());
-	drawingEdit = new Kl(this.drawingEditHost());
-	chartSettings = new Ul(this.chartSettingsHost());
-	docking = new Pl(this.dockingHost());
-	layouts = new jl(this.layoutsHost());
-	commands = new ml(this.commandsHost());
-	legend = new pl(this.legendHost());
-	menus = new el(this.menusHost());
-	trading = new Qc(this.tradingHost());
-	alerting = new Zc(this.alertingHost());
-	watching = new Xc(this.watchingHost());
-	comparing = new Yc(this.comparingHost());
+var hu = class {
+	intervals = new Yl(this.intervalsHost());
+	drawingEdit = new ql(this.drawingEditHost());
+	chartSettings = new Wl(this.chartSettingsHost());
+	docking = new Fl(this.dockingHost());
+	layouts = new Ml(this.layoutsHost());
+	commands = new hl(this.commandsHost());
+	legend = new ml(this.legendHost());
+	menus = new tl(this.menusHost());
+	trading = new $c(this.tradingHost());
+	alerting = new Qc(this.alertingHost());
+	watching = new Zc(this.watchingHost());
+	comparing = new Xc(this.comparingHost());
 	chart;
 	state;
 	themeOf = {
@@ -9994,7 +10006,7 @@ var mu = class {
 	hostLayer = null;
 	priceAxisAddDefault = !1;
 	constructor(e, t = {}) {
-		let n = pu(t);
+		let n = mu(t);
 		this.options = n;
 		let { isDark: r, resolvedTheme: i, features: a, chartFeatures: o } = this.readOptions(n);
 		this.buildRoot(e, n, r, i), this.buildToolbar(n, a);
@@ -10055,7 +10067,7 @@ var mu = class {
 			...o,
 			priceAxisAddButton: this.priceAxisAddDefault && this.featureState["menu.priceAxisAdd"]
 		};
-		if (this.canExport = o.dataExport !== !1, this.chartSettings.settingsLocked = new Set(du.filter(([, e]) => o[e] === !1).map(([e]) => e)), this.chartSettings.settingsDefaults = {
+		if (this.canExport = o.dataExport !== !1, this.chartSettings.settingsLocked = new Set(fu.filter(([, e]) => o[e] === !1).map(([e]) => e)), this.chartSettings.settingsDefaults = {
 			...this.chartSettings.settingsState,
 			legendVisible: o.legend !== !1,
 			volumeVisible: o.volume !== !1,
@@ -10090,7 +10102,7 @@ var mu = class {
 	}
 	buildRoot(e, t, n, r) {
 		cn(), this.root = document.createElement("div"), this.root.className = "tcw-root";
-		let i = t.dir === "ltr" || t.dir === "rtl" ? t.dir : Cu(t.locale) ? "rtl" : "ltr";
+		let i = t.dir === "ltr" || t.dir === "rtl" ? t.dir : wu(t.locale) ? "rtl" : "ltr";
 		this.root.dir = i, this.portal.dir = i, e.appendChild(this.root), this.tooltip = new ac(this.root), this.portal.className = "tcw-root tcw-portal", this.look = er({
 			dark: n,
 			theme: r
@@ -10176,7 +10188,7 @@ var mu = class {
 		}, this.t), this.scope.run(() => tr(() => {
 			let e = this.chartSettings.followCrosshairCursor();
 			this.sidebar?.showCrosshairCursor(e);
-		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", this.chartContainer.dir = "ltr", n.appendChild(this.chartContainer), this.loading = new Pc(this.chartContainer, this.t("status.loading")), this.historyPill = new Ic(this.chartContainer, {
+		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", this.chartContainer.dir = "ltr", n.appendChild(this.chartContainer), this.loading = new Fc(this.chartContainer, this.t("status.loading")), this.historyPill = new Lc(this.chartContainer, {
 			loading: this.t("history.loading"),
 			failed: this.t("history.failed")
 		}), this.docking.dock = new qs(n, {
@@ -10184,8 +10196,8 @@ var mu = class {
 				rail: this.t("dock.rail"),
 				resize: this.t("dock.resize")
 			},
-			savedWidth: () => xu(),
-			saveWidth: (e) => Su(e),
+			savedWidth: () => Su(),
+			saveWidth: (e) => Cu(e),
 			railShown: () => this.docking.railShown(),
 			focusAfterClose: (e) => this.docking.panelFocusTarget(e),
 			room: () => n.clientWidth
@@ -10288,7 +10300,7 @@ var mu = class {
 			}
 		}), this.clockTimer = setInterval(() => {
 			!Jr() && this.featureState.statusBar && this.featureState["statusBar.clock"] && this.statusBar?.tick();
-		}, uu), this.chart.on("priceRangeChange", () => this.chartSettings.refreshScaleSwitches()), this.chartSettings.refreshScaleSwitches(), this.goToDatePart = this.lazyPart(Y.goToDate, ({ WidgetGoToDate: e }) => new e(this.overlayHost, () => ({
+		}, du), this.chart.on("priceRangeChange", () => this.chartSettings.refreshScaleSwitches()), this.chartSettings.refreshScaleSwitches(), this.goToDatePart = this.lazyPart(Y.goToDate, ({ WidgetGoToDate: e }) => new e(this.overlayHost, () => ({
 			title: this.t("goTo.title"),
 			date: this.t("range.date"),
 			range: this.t("goTo.range"),
@@ -10360,7 +10372,7 @@ var mu = class {
 			onMore: (e, t) => this.legend.openLegendMenu(e, t),
 			onPaneAction: (e, t) => this.legend.runPaneAction(e, t),
 			onStackResize: (e) => this.chart.setLegendStack?.(e ? {
-				width: dl(this.chart) + e.width,
+				width: fl(this.chart) + e.width,
 				height: 1 + e.height
 			} : null)
 		}, {
@@ -10465,7 +10477,7 @@ var mu = class {
 					justDrawn: !0
 				}));
 			}, s = () => setTimeout(o, 0);
-			window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), i = window.setTimeout(o, Yl), this.drawingEdit.cancelTextPrompt = a;
+			window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), i = window.setTimeout(o, Xl), this.drawingEdit.cancelTextPrompt = a;
 		}), this.drawingStyle = new uo(this.root, {
 			onStyleChange: (e) => {
 				this.chart.setDrawingStyle(e), this.chart.setSelectedDrawingStyle(e);
@@ -10745,8 +10757,8 @@ var mu = class {
 			onAction: (e) => this.commands.handleAction(e),
 			onClose: () => {}
 		}, this.overlayHost, this.t, {
-			list: () => vu(),
-			add: (e) => yu([e, ...vu().filter((t) => t !== e)])
+			list: () => yu(),
+			add: (e) => bu([e, ...yu().filter((t) => t !== e)])
 		})), this.boundGlobalKeydown = (e) => {
 			if (this.handleHostHotkey(e) || this.featureState.hotkeys && this.replay.isOpen() && this.replay.handleReplayKey(e)) return;
 			let t = L(this.root), n = (e) => this.featureState.hotkeys && this.featureState[e];
@@ -10767,11 +10779,11 @@ var mu = class {
 				let t = document.activeElement;
 				if (t && t !== document.body && !this.root.contains(t)) return;
 				e.preventDefault(), this.intervals.intervalInput.open(e.key);
-			} else if (lu(e) !== null) {
+			} else if (uu(e) !== null) {
 				if (e.defaultPrevented || !n("symbolTyping") || !this.featureState.symbolSearch || R() || Mr() || !L(this.root, !0)) return;
 				let t = document.activeElement;
 				if (t && t !== document.body && !this.root.contains(t)) return;
-				e.preventDefault(), this.openSymbolSearch(lu(e));
+				e.preventDefault(), this.openSymbolSearch(uu(e));
 			} else if (e.altKey && !e.ctrlKey && !e.metaKey && (e.code === "KeyI" || e.code === "KeyG" || e.code === "KeyR")) {
 				if (R() || !t) return;
 				if (e.code === "KeyI") {
@@ -10803,10 +10815,10 @@ var mu = class {
 			this.destroyed || Vs();
 		}, t = globalThis;
 		if (t.requestIdleCallback && t.cancelIdleCallback) {
-			let n = t.requestIdleCallback(e, { timeout: ru }), r = t.cancelIdleCallback;
+			let n = t.requestIdleCallback(e, { timeout: iu }), r = t.cancelIdleCallback;
 			this.stopPreload = () => r(n);
 		} else {
-			let t = setTimeout(e, iu);
+			let t = setTimeout(e, au);
 			this.stopPreload = () => clearTimeout(t);
 		}
 	}
@@ -10877,7 +10889,7 @@ var mu = class {
 	refreshMarket() {
 		if (Jr()) return;
 		let e = at(this.chart.getSymbolInfo(), Date.now()), t = e.state === "open";
-		this.statusBar?.setMarket(e.state, this.t(t ? "symbolInfo.open" : "symbolInfo.closed"), this.t(t ? "statusBar.marketOpen" : "statusBar.marketClosed")), this.refreshSymbolInfo();
+		this.statusBar?.setMarket(e.state, this.t(t ? "symbolInfo.open" : "symbolInfo.closed"), this.t(t ? "statusBar.marketOpen" : "statusBar.marketClosed")), this.showConnection(), this.refreshSymbolInfo();
 	}
 	refreshSymbolInfo() {
 		let e = this.symbolInfoPanel;
@@ -10968,7 +10980,7 @@ var mu = class {
 		for (let t of [this.root, this.portal]) {
 			if (Sa(t, e, { variables: this.uiVariables }), this.uiVariables) continue;
 			let n = xa(e);
-			for (let e of Zl) this.uiScale === 1 ? t.style.removeProperty(e) : t.style.setProperty(e, n[e]);
+			for (let e of Ql) this.uiScale === 1 ? t.style.removeProperty(e) : t.style.setProperty(e, n[e]);
 		}
 	}
 	fitScale() {
@@ -10977,7 +10989,7 @@ var mu = class {
 		if (e !== this.uiScale) {
 			if (this.ui.scale === "auto") {
 				let t = this.root.clientWidth;
-				if ((e > this.uiScale ? ra(t - Xl) : ra(t + Xl)) === this.uiScale) return;
+				if ((e > this.uiScale ? ra(t - Zl) : ra(t + Zl)) === this.uiScale) return;
 			}
 			this.uiScale = e, this.applyLookTokens(), this.applyLegendFont(), this.applyChartLook(), this.toolbar?.fit();
 		}
@@ -11130,9 +11142,9 @@ var mu = class {
 		for (let [n, r] of t) e(n) && r();
 	}
 	addHotkey(e) {
-		let t = Uc(e.keys);
+		let t = Wc(e.keys);
 		if (!t) return console.warn(`[ChartWidget] Can't read the shortcut "${e.keys}": modifiers (Ctrl, Alt, Shift) and a key, joined by +.`), null;
-		Kc(t) && console.warn(`[ChartWidget] The chart answers ${e.keys} itself (drawings, scrolling or zoom): both will run.`);
+		qc(t) && console.warn(`[ChartWidget] The chart answers ${e.keys} itself (drawings, scrolling or zoom): both will run.`);
 		let n = {
 			spec: e,
 			parsed: t
@@ -11142,8 +11154,8 @@ var mu = class {
 		} };
 	}
 	handleHostHotkey(e) {
-		if (this.hostHotkeys.length === 0 || !this.featureState.hotkeys || e.isComposing || e.keyCode === 229 || e.getModifierState?.("AltGraph") || e.defaultPrevented || R() || qc(e) || Mr()) return !1;
-		let t = this.hostHotkeys.find((t) => Wc(e, t.parsed));
+		if (this.hostHotkeys.length === 0 || !this.featureState.hotkeys || e.isComposing || e.keyCode === 229 || e.getModifierState?.("AltGraph") || e.defaultPrevented || R() || Jc(e) || Mr()) return !1;
+		let t = this.hostHotkeys.find((t) => Gc(e, t.parsed));
 		if (!t) return !1;
 		let n = !t.parsed.ctrl && !t.parsed.alt;
 		if (!L(this.root, n)) return !1;
@@ -11152,13 +11164,13 @@ var mu = class {
 	}
 	paintWatermark() {
 		this.chart.setWatermark(De(this.state.symbol).ticker.replace("USDT", " / USDT"), {
-			fontSize: au,
-			color: this.state.isDark ? ou : su
+			fontSize: ou,
+			color: this.state.isDark ? su : cu
 		});
 	}
 	keepingLook(e) {
 		this.chartSettings.settingsEdit && this.settings?.close();
-		let t = this.chart.getOverrides?.({ layer: "user" }) ?? {}, n = Object.fromEntries(fu.filter((e) => t[e] !== void 0).map((e) => [e, t[e]]));
+		let t = this.chart.getOverrides?.({ layer: "user" }) ?? {}, n = Object.fromEntries(pu.filter((e) => t[e] !== void 0).map((e) => [e, t[e]]));
 		e(), Object.keys(n).length > 0 && this.chart.applyOverrides(n, { layer: "user" });
 	}
 	sheetKeyOn(e) {
@@ -11211,7 +11223,7 @@ var mu = class {
 				let i = e.items();
 				if (i.length === 0) return;
 				let a = t.menuAnchor(r);
-				n.openUnder(Rc([], i), a, (e) => zc(e, i));
+				n.openUnder(zc([], i), a, (e) => Bc(e, i));
 			}
 		});
 		return r.setAttribute("aria-haspopup", "menu"), r.setAttribute("aria-expanded", "false"), t.tidy(), {
@@ -11297,7 +11309,7 @@ var mu = class {
 				from: i(o.from),
 				to: i(o.to)
 			},
-			withTime: !(k(this.state.timeframe) >= nu),
+			withTime: !(k(this.state.timeframe) >= ru),
 			max: s,
 			today: s
 		});
@@ -11362,9 +11374,9 @@ var mu = class {
 	}
 	async switchLocalTimeframe() {
 		if (!this.baseSeries) return;
-		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= Ql || this.baseSeries.length >= $l;
+		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= $l || this.baseSeries.length >= eu;
 		try {
-			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await tu(), e !== this.localSeq || this.destroyed)) return;
+			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await nu(), e !== this.localSeq || this.destroyed)) return;
 			this.applyTimeframeData();
 		} finally {
 			e === this.localSeq && this.loading.end();
@@ -11478,7 +11490,7 @@ var mu = class {
 			defaults: r.descriptor.defaultConfig,
 			params: r.params,
 			inputs: r.descriptor.inputs,
-			lineSources: hu(t, n, this.t),
+			lineSources: gu(t, n, this.t),
 			plots: r.descriptor.plots,
 			colors: i?.colors,
 			lineWidth: i?.lineWidths[0],
@@ -11497,7 +11509,7 @@ var mu = class {
 		this.alerting.refreshAlerts(), this.trading.refreshAccountSoon(), this.dataWindow?.isOpen() && this.dataWindow.render(this.docking.buildDataWindowModel());
 	}
 	formatMoney(e) {
-		return this.formatNumber(e, Math.min(vt(this.chart.getPriceStep()), cu));
+		return this.formatNumber(e, Math.min(vt(this.chart.getPriceStep()), lu));
 	}
 	formatVolume(e) {
 		return tt(e, this.chartSettings.settingsState.numberLocale || "en-US");
@@ -11801,9 +11813,14 @@ var mu = class {
 		this.updateUI();
 	}
 	updateUI() {
-		this.refreshDrawingsState(), this.legend.scheduleLegend(), this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.statusBar?.update({
+		this.refreshDrawingsState(), this.legend.scheduleLegend(), this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.showConnection();
+	}
+	showConnection() {
+		let e = Nc(this.state.connectionState, this.state.connectionMessage, this.chart.getSymbolInfo?.(), this.t);
+		this.statusBar?.update({
 			connectionState: this.state.connectionState,
-			message: this.state.connectionMessage,
+			message: e.message,
+			delayed: e.delayed,
 			symbol: this.state.symbol,
 			timeframe: this.state.timeframe
 		});
@@ -12377,7 +12394,7 @@ var mu = class {
 		};
 	}
 };
-function hu(e, t, n) {
+function gu(e, t, n) {
 	let r = (e) => {
 		let t = Bt(e.descriptor);
 		return t && ct(e.params[t])?.instanceId || null;
@@ -12400,66 +12417,66 @@ function hu(e, t, n) {
 	}
 	return a;
 }
-var gu = "tcw:recentCommands", _u = 10;
-function vu() {
+var _u = "tcw:recentCommands", vu = 10;
+function yu() {
 	try {
-		let e = JSON.parse(Yr()?.getItem(gu) ?? "[]");
-		return Array.isArray(e) ? e.filter((e) => typeof e == "string").slice(0, _u) : [];
+		let e = JSON.parse(Yr()?.getItem(_u) ?? "[]");
+		return Array.isArray(e) ? e.filter((e) => typeof e == "string").slice(0, vu) : [];
 	} catch {
 		return [];
 	}
 }
-function yu(e) {
+function bu(e) {
 	try {
-		Yr()?.setItem(gu, JSON.stringify(e.slice(0, _u)));
+		Yr()?.setItem(_u, JSON.stringify(e.slice(0, vu)));
 	} catch {}
 }
-var bu = "tcw:dockWidth";
-function xu() {
+var xu = "tcw:dockWidth";
+function Su() {
 	try {
-		let e = Number(Yr()?.getItem(bu) ?? NaN);
+		let e = Number(Yr()?.getItem(xu) ?? NaN);
 		return Number.isFinite(e) && e > 0 ? e : null;
 	} catch {
 		return null;
 	}
 }
-function Su(e) {
+function Cu(e) {
 	try {
-		Yr()?.setItem(bu, String(e));
+		Yr()?.setItem(xu, String(e));
 	} catch {}
 }
-function Cu(e) {
+function wu(e) {
 	return !!e && /^(ar|he|iw|fa|ur|ps|yi|dv|ckb|sd|ug)(-|$)/i.test(e);
 }
 //#endregion
 //#region src/widget/GridLayoutPicker.ts
-var wu = 2, Tu = 20, Eu = 2, Du = 16, Ou = 2, ku = 4, Au = {
+var Tu = 2, Eu = 20, Du = 2, Ou = 16, ku = 2, Au = 4, ju = {
 	left: "grid.layoutBigLeft",
 	right: "grid.layoutBigRight",
 	top: "grid.layoutBigTop",
 	bottom: "grid.layoutBigBottom"
 };
-function ju(e, t, n) {
-	let r = (Tu - Eu * (n - 1)) / n;
-	return [wu + e * (r + Eu), t * r + (t - 1) * Eu];
+function Mu(e, t, n) {
+	let r = (Eu - Du * (n - 1)) / n;
+	return [Tu + e * (r + Du), t * r + (t - 1) * Du];
 }
-function Mu(e, t = Du) {
+function Nu(e, t = Ou) {
 	return `<svg width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">${n(e).map(([t, n, r, i]) => {
-		let [a, o] = ju(t, r, e.cols), [s, c] = ju(n, i, e.rows);
+		let [a, o] = Mu(t, r, e.cols), [s, c] = Mu(n, i, e.rows);
 		return `<rect x="${a}" y="${s}" width="${o}" height="${c}" rx="1"/>`;
 	}).join("")}</svg>`;
 }
-function Nu(e, t) {
+function Pu(e, t) {
 	let n = f[e], r = s(n);
 	if (r === 1) return t("grid.single");
 	let i = m(n);
-	return i ? w(t(Au[i]), { count: r }) : w(t("grid.layoutOption"), {
+	return i ? w(t(ju[i]), { count: r }) : w(t("grid.layoutOption"), {
 		count: r,
 		cols: n.cols,
 		rows: n.rows
 	});
 }
-var Pu = class {
+var Fu = class {
 	button;
 	panel = null;
 	choices;
@@ -12476,8 +12493,8 @@ var Pu = class {
 		}), this.render();
 	}
 	render() {
-		let { t: e, current: t } = this.options, n = t(), r = `${e("grid.layout")}: ${Nu(n, e)}`;
-		this.button.innerHTML = Mu(f[n]) + x("chevronDown", 12), this.button.title = r, this.button.setAttribute("aria-label", r);
+		let { t: e, current: t } = this.options, n = t(), r = `${e("grid.layout")}: ${Pu(n, e)}`;
+		this.button.innerHTML = Nu(f[n]) + x("chevronDown", 12), this.button.title = r, this.button.setAttribute("aria-label", r);
 		for (let e of this.items()) e.setAttribute("aria-checked", String(e.dataset.layout === n));
 	}
 	isOpen() {
@@ -12518,15 +12535,15 @@ var Pu = class {
 		return a.className = "tcw-grid-picker-row", a.append(...t.map((e) => this.item(e))), r.append(i, a), r;
 	}
 	item(e) {
-		let t = Nu(e, this.options.t), n = document.createElement("button");
-		return n.type = "button", n.className = "tcw-btn-icon tcw-grid-picker-item", n.setAttribute("role", "menuitemradio"), n.setAttribute("aria-checked", "false"), n.tabIndex = -1, n.dataset.layout = e, n.title = t, n.setAttribute("aria-label", t), n.innerHTML = Mu(f[e]), n.addEventListener("click", () => this.pick(e)), n;
+		let t = Pu(e, this.options.t), n = document.createElement("button");
+		return n.type = "button", n.className = "tcw-btn-icon tcw-grid-picker-item", n.setAttribute("role", "menuitemradio"), n.setAttribute("aria-checked", "false"), n.tabIndex = -1, n.dataset.layout = e, n.title = t, n.setAttribute("aria-label", t), n.innerHTML = Nu(f[e]), n.addEventListener("click", () => this.pick(e)), n;
 	}
 	pick(e) {
 		this.close(), this.options.onPick(e), this.render();
 	}
 	place(e) {
-		let { host: t } = this.options, n = this.button.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.closest("[dir]")?.getAttribute("dir") === "rtl", a = e.offsetWidth, o = i ? n.right - r.left - a : n.left - r.left, s = t.clientWidth - a - ku;
-		e.style.left = `${Math.max(0, Math.min(o, s))}px`, e.style.top = `${n.bottom - r.top + Ou}px`, e.style.maxHeight = `${Math.max(0, t.clientHeight - (n.bottom - r.top) - Ou - ku)}px`;
+		let { host: t } = this.options, n = this.button.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.closest("[dir]")?.getAttribute("dir") === "rtl", a = e.offsetWidth, o = i ? n.right - r.left - a : n.left - r.left, s = t.clientWidth - a - Au;
+		e.style.left = `${Math.max(0, Math.min(o, s))}px`, e.style.top = `${n.bottom - r.top + ku}px`, e.style.maxHeight = `${Math.max(0, t.clientHeight - (n.bottom - r.top) - ku - Au)}px`;
 	}
 	items() {
 		return this.panel ? [...this.panel.querySelectorAll("[role=\"menuitemradio\"]")] : [];
@@ -12557,32 +12574,32 @@ var Pu = class {
 		let o = this.rows(), s = o.findIndex((e) => e.includes(n[r])), c = o[s].indexOf(n[r]), l = o[(s + (t === "ArrowDown" ? 1 : -1) + o.length) % o.length];
 		return l[Math.min(c, l.length - 1)];
 	}
-}, Fu = {
+}, Iu = {
 	symbol: !1,
 	interval: !1,
 	crosshair: !0,
 	time: !1,
 	drawings: !1,
 	replay: !1
-}, Iu = [
+}, Lu = [
 	"symbol",
 	"interval",
 	"crosshair",
 	"time",
 	"drawings",
 	"replay"
-], Lu = f;
-function Ru(e) {
+], Ru = f;
+function zu(e) {
 	return JSON.parse(JSON.stringify(e));
 }
-function zu(e) {
+function Bu(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
 	if (t.v !== 1 || t.kind !== "grid" || !r(t.layout) || !Array.isArray(t.cells)) return null;
 	let n = t.cells.map(Ps);
 	if (n.some((e) => e === null)) return null;
-	let i = typeof t.sync == "object" && t.sync !== null ? t.sync : {}, a = { ...Fu };
-	for (let e of Iu) typeof i[e] == "boolean" && (a[e] = i[e]);
+	let i = typeof t.sync == "object" && t.sync !== null ? t.sync : {}, a = { ...Iu };
+	for (let e of Lu) typeof i[e] == "boolean" && (a[e] = i[e]);
 	let o = typeof t.active == "number" && Number.isInteger(t.active) ? t.active : 0;
 	return {
 		v: 1,
@@ -12593,7 +12610,7 @@ function zu(e) {
 		cells: n
 	};
 }
-var Bu = class {
+var Vu = class {
 	root;
 	cellsEl;
 	cells = [];
@@ -12623,7 +12640,7 @@ var Bu = class {
 	};
 	constructor(e, t = {}) {
 		this.options = t, this.layout = r(t.layout) ? t.layout : "1x2", this.sync = {
-			...Fu,
+			...Iu,
 			...t.sync
 		}, this.t = Be(Ve(t.widget?.locale, t.widget?.messages)), cn(), this.root = document.createElement("div"), this.root.className = "tcw-root tcw-grid", this.root.dataset.tcwTheme = t.widget?.theme === "light" ? "light" : "dark", Sa(this.root, U(t.widget?.ui), { variables: t.widget?.ui !== void 0 }), t.bar !== !1 && this.root.appendChild(this.buildBar()), this.cellsEl = document.createElement("div"), this.cellsEl.className = "tcw-grid-cells", this.root.appendChild(this.cellsEl), e.appendChild(this.root), this.stopNarrow = zs(this.root), this.applyShape();
 		for (let e = 0; e < this.shapeCount(); e++) this.cells.push(this.createCell(e));
@@ -12751,7 +12768,7 @@ var Bu = class {
 		return JSON.stringify(this.captureLayout());
 	}
 	async applyLayoutContent(e) {
-		let t = zu(Fs(e));
+		let t = Bu(Fs(e));
 		return t ? (await this.restoreLayout(t), !0) : !1;
 	}
 	destroy() {
@@ -12773,7 +12790,7 @@ var Bu = class {
 	createCell(e) {
 		let t = document.createElement("div");
 		t.className = "tcw-grid-cell", t.setAttribute("role", "region"), t.setAttribute("aria-label", w(this.t("grid.chart"), { n: e + 1 })), i(t, n(f[this.layout])[e]), this.cellsEl.appendChild(t);
-		let r = this.options.widget ?? {}, a = this.options.cells?.[e] ?? {}, o = this.cells[this.active]?.widget, s = {}, c = new mu(t, {
+		let r = this.options.widget ?? {}, a = this.options.cells?.[e] ?? {}, o = this.cells[this.active]?.widget, s = {}, c = new hu(t, {
 			...r,
 			...a,
 			...a.adapter ? { feed: void 0 } : {},
@@ -12830,7 +12847,7 @@ var Bu = class {
 					t.replaySeekToTime(n);
 					return;
 				}
-				let r = Vu(t.getData(), n);
+				let r = Hu(t.getData(), n);
 				r >= 0 && t.replayStart({
 					startIndex: r,
 					paused: !0
@@ -12875,7 +12892,7 @@ var Bu = class {
 	copyDrawings(e) {
 		let t = e.widget.getSymbol(), n = e.widget.getChart().getDrawings();
 		this.quietly(() => {
-			for (let r of this.cells) r !== e && r.widget.getSymbol() === t && r.widget.getChart().setDrawings(Ru(n));
+			for (let r of this.cells) r !== e && r.widget.getSymbol() === t && r.widget.getChart().setDrawings(zu(n));
 		});
 	}
 	mergeDrawings() {
@@ -12887,7 +12904,7 @@ var Bu = class {
 				let e = /* @__PURE__ */ new Map();
 				for (let n of t) for (let t of n.widget.getChart().getDrawings()) e.has(t.id) || e.set(t.id, t);
 				let n = [...e.values()];
-				for (let e of t) e.widget.getChart().setDrawings(Ru(n));
+				for (let e of t) e.widget.getChart().setDrawings(zu(n));
 			}
 		});
 	}
@@ -12924,7 +12941,7 @@ var Bu = class {
 		let t = document.createElement("div");
 		t.className = "tcw-grid-group", t.setAttribute("role", "group"), t.setAttribute("aria-label", this.t("grid.layout"));
 		let n = this.options.layoutChoices?.filter(r) ?? l;
-		n.length > 0 && (this.layoutPicker = new Pu({
+		n.length > 0 && (this.layoutPicker = new Fu({
 			host: this.root,
 			t: this.t,
 			choices: n,
@@ -12935,7 +12952,7 @@ var Bu = class {
 		i.className = "tcw-grid-group", i.setAttribute("role", "group"), i.setAttribute("aria-label", this.t("grid.sync"));
 		let a = document.createElement("span");
 		a.className = "tcw-grid-label", a.innerHTML = `${x("link", 13)}<span>${S(this.t("grid.sync"))}</span>`, i.appendChild(a);
-		for (let e of Iu) {
+		for (let e of Lu) {
 			let t = document.createElement("button");
 			t.type = "button", t.className = "tcw-btn tcw-grid-sync", t.textContent = this.t(`grid.sync.${e}`), t.title = this.t(`grid.sync.${e}.hint`), t.addEventListener("click", () => this.setSync({ [e]: !this.sync[e] })), this.syncButtons.set(e, t), i.appendChild(t);
 		}
@@ -12979,7 +12996,7 @@ var Bu = class {
 			onChange: () => this.renderLayoutsButton(),
 			onError: () => this.toast(this.t("layouts.saveFailed"), "error")
 		});
-		this.session = t, this.layoutsUI = new vl(t, {
+		this.session = t, this.layoutsUI = new yl(t, {
 			root: this.root,
 			t: this.t,
 			toast: (e, t) => this.toast(e, t),
@@ -12993,12 +13010,12 @@ var Bu = class {
 		this.cells[this.active]?.widget.toast(e, t);
 	}
 };
-function Vu(e, t) {
+function Hu(e, t) {
 	let n = -1;
 	for (let r = 0; r < e.length && e[r].time < t; r++) n = r;
 	return n;
 }
 //#endregion
-export { Se as CHART_TYPE_ICONS, mu as ChartWidget, Bu as ChartWidgetGrid, Fu as DEFAULT_GRID_SYNC, we as DRAWING_TOOL_ICONS, Re as EN_MESSAGES, Lu as GRID_SHAPES, p as LayoutSession, c as MAX_LAYOUT_NAME, ye as UI_ICONS, He as VI_MESSAGES, he as WIDGET_FEATURES, ma as WIDGET_UI_PRESETS, Sa as applyWidgetUI, d as cleanLayoutName, Ce as createChartTypeIcon, x as createIcon, b as createToolIcon, ze as findWidgetLocale, be as iconSvg, o as localStorageLayouts, t as memoryLayouts, zu as readGridLayout, ci as readWatchlists, Ps as readWidgetLayout, Le as registerWidgetLocale, U as resolveWidgetUI, xa as widgetUIVariables };
+export { Se as CHART_TYPE_ICONS, hu as ChartWidget, Vu as ChartWidgetGrid, Iu as DEFAULT_GRID_SYNC, we as DRAWING_TOOL_ICONS, Re as EN_MESSAGES, Ru as GRID_SHAPES, p as LayoutSession, c as MAX_LAYOUT_NAME, ye as UI_ICONS, He as VI_MESSAGES, he as WIDGET_FEATURES, ma as WIDGET_UI_PRESETS, Sa as applyWidgetUI, d as cleanLayoutName, Ce as createChartTypeIcon, x as createIcon, b as createToolIcon, ze as findWidgetLocale, be as iconSvg, o as localStorageLayouts, t as memoryLayouts, Bu as readGridLayout, ci as readWatchlists, Ps as readWidgetLayout, Le as registerWidgetLocale, U as resolveWidgetUI, xa as widgetUIVariables };
 
 //# sourceMappingURL=index.js.map