@tradecanvas/chart 1.55.0 → 1.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{LayoutSession-35QS4WN1.cjs → LayoutSession-CeCJsq_4.cjs} +2 -2
- package/dist/{LayoutSession-35QS4WN1.cjs.map → LayoutSession-CeCJsq_4.cjs.map} +1 -1
- package/dist/{LayoutSession-CMY8AjJV.js → LayoutSession-CmxR_iG8.js} +2 -2
- package/dist/{LayoutSession-CMY8AjJV.js.map → LayoutSession-CmxR_iG8.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/widget/index.cjs +4 -1
- package/dist/widget/index.cjs.map +1 -1
- package/dist/widget/index.js +2 -2
- package/dist/widget/index.js.map +1 -1
- package/package.json +3 -3
package/dist/widget/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { O as e, a as t, c as n, d as r, f as i, i as a, n as o, o as s, r as c, t as l } from "../LayoutSession-
|
|
1
|
+
import { O as e, a as t, c as n, d as r, f as i, i as a, n as o, o as s, r as c, t as l } from "../LayoutSession-CmxR_iG8.js";
|
|
2
2
|
import { a as u, c as d, i as f, n as p, o as m, r as h, s as ee, t as g } from "../i18n-BaJ3lo-i.js";
|
|
3
3
|
import { CHART_STYLE_KEYS as _, CHART_TYPE_ICONS as v, DARK_THEME as y, DEFAULT_SIGNAL_STYLE as b, DEFAULT_TRADE_ZONE_STYLE as x, DEFAULT_TRADING_CONFIG as S, DRAWING_TOOL_ICONS as te, LIGHT_THEME as ne, PHI as re, PRICE_SOURCES as ie, SANS_FONT_FAMILY as ae, UI_ICONS as oe, barTimeUnit as se, formatPrice as ce, iconSvg as le, indicatorSource as ue, isTimeFrame as de, isValidTimeZone as fe, marketStatus as pe, offsetAt as me, parseIndicatorSource as he, phiStep as ge, readChartStyleOverrides as _e, readChartTypeOptions as ve, readIndicatorPlotStyles as ye, readNews as be, readQuote as xe, resampleBars as Se, sanitizeDrawingOptions as Ce, sanitizeDrawingStyle as we, stepDecimals as Te, symbolTimeZone as Ee, tickBarCount as De, timeParts as Oe, timeframeFollowsDays as ke, timeframeToMs as C, tzLabel as Ae, wallToUtc as je, zoneOffsetMinutes as Me, zonedDateFormatter as Ne } from "@tradecanvas/commons";
|
|
4
4
|
import { ChartStateManager as Pe, INDICATOR_CATEGORIES as Fe, INTERVAL_LIMITS as Ie, INTERVAL_UNITS as Le, MAX_ALERT_BARS as Re, MIN_ALERT_BARS as ze, RANGE_PRESETS as Be, ResamplingAdapter as Ve, SYMBOL_INDICATOR_IDS as He, indicatorCategory as Ue, indicatorValuePrecision as We, isSeriesPalette as Ge, plotColor as Ke, plotShown as qe, rangePresetStart as Je, servesTimeframe as Ye, sourceParam as Xe, withResampling as Ze } from "@tradecanvas/core";
|
|
@@ -1209,7 +1209,7 @@ var O = [...new Set([
|
|
|
1209
1209
|
...Ht
|
|
1210
1210
|
].flatMap((e) => e.rows.flatMap((e) => e.keys)),
|
|
1211
1211
|
...[...zt, ...Bt].flatMap((e) => e.keys)
|
|
1212
|
-
])], Kt = "/* === 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: 1.4;\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, so each step is near φ times the one before. */\n --tcw-space-1: 2px;\n --tcw-space-2: 3px;\n --tcw-space-3: 5px;\n --tcw-space-4: 8px;\n --tcw-space-5: 13px;\n --tcw-space-6: 21px;\n --tcw-space-7: 34px;\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: 26px;\n --tcw-control-h-sm: 20px;\n --tcw-icon: 16px;\n --tcw-sidebar-w: 42px;\n --tcw-menu-item-h: 33px;\n --tcw-font: -apple-system, BlinkMacSystemFont, '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: 600;\n --tcw-label-case: uppercase;\n --tcw-label-tracking: 0.06em;\n --tcw-border-w: 1px;\n --tcw-sep-w: 1px;\n --tcw-menu-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-md);\n --tcw-dialog-shadow: 0 0 0 1px var(--tcw-border), 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: 'Cascadia Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;\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/* 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-space-4);\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-space-4);\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 symbol on a phone), the symbol gives way so\n \"more\" stays on the bar, a step at a time (`data-tcw-squeeze`). First its venue\n (\"HYPERLIQUID:xyz:\") is cut short before anything else shrinks, down to its first letter and an\n ellipsis, a gap keeping it off the ticker. That is 2em: a line's first letter is cut, never\n swapped for the ellipsis, so less shows a letter and a sliver (\"H.\"). The venue's column counts\n only those 2em in the button's smallest width, so the ticker stays whole and the buttons beside it\n give the rest. With room, the symbol shows as it always has. */\n.tcw-toolbar[data-tcw-squeeze='venue'] > .tcw-toolbar-symbol--venue {\n display: inline-grid;\n grid-template-columns: minmax(2em, max-content) auto;\n column-gap: var(--tcw-space-1);\n align-items: center;\n /* Shrinking is shared by width times this: the symbol takes it all until it is at its smallest. */\n flex-shrink: 1000;\n}\n\n.tcw-toolbar[data-tcw-squeeze='venue'] .tcw-toolbar-venue {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Then, with no room even for the ellipsis (a 320 phone in the Capsule look), the venue goes, the\n ticker whole; and last of all, the ticker is cut short. */\n.tcw-toolbar[data-tcw-squeeze='ticker'] .tcw-toolbar-venue,\n.tcw-toolbar[data-tcw-squeeze='cut'] .tcw-toolbar-venue {\n display: none;\n}\n\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-space-4);\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-space-4);\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.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-space-4);\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 5px;\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-font-size-xs);\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.tcw-loading-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n padding: 22px 26px 20px;\n border: 1px solid transparent;\n border-radius: var(--tcw-panel-radius);\n}\n\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\n click visibly registered without blanking the screen. */\n.tcw-loading-overlay--veil {\n background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\n}\n\n.tcw-loading-overlay--veil .tcw-loading-card {\n background: var(--tcw-bg-elevated);\n border-color: var(--tcw-border);\n box-shadow: var(--tcw-menu-shadow);\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.tcw-loading-track {\n position: relative;\n width: 100%;\n min-width: 88px;\n height: 2px;\n border-radius: 1px;\n background: var(--tcw-border);\n overflow: hidden;\n}\n\n.tcw-loading-track > span {\n position: absolute;\n inset: 0;\n width: 40%;\n border-radius: 1px;\n background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\n animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\n}\n\n@keyframes tcw-loading-sweep {\n from { transform: translateX(-100%); }\n to { transform: translateX(250%); }\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.tcw-loading-overlay--error .tcw-loading-track {\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/* Reduced motion: nothing slides or lifts, but the candles still glow in\n turn and the track breathes, 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 .tcw-loading-track > span {\n width: 100%;\n background: var(--tcw-accent);\n animation: tcw-loading-breathe 2.4s ease-in-out infinite;\n }\n}\n\n@keyframes tcw-candle-glow {\n 0%, 60%, 100% { opacity: 0.28; }\n 25% { opacity: 0.9; }\n}\n\n@keyframes tcw-loading-breathe {\n 0%, 100% { opacity: 0.15; }\n 50% { opacity: 0.7; }\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: 19px;\n white-space: nowrap;\n color: var(--tcw-text-dim);\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: 15px;\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: 3px;\n margin-top: 1px;\n padding: 1px 5px;\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.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}\n\n.tcw-sidebar-btn {\n width: var(--tcw-control-h);\n height: var(--tcw-control-h);\n margin: 1px 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 width: var(--tcw-icon);\n height: var(--tcw-icon);\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.tcw-multi-dot {\n position: absolute;\n bottom: 3px;\n right: 3px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--tcw-text-muted);\n opacity: 0.7;\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: 20px;\n height: max(1px, var(--tcw-sep-w));\n background: var(--tcw-divider);\n margin: 5px 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 margin-inline-start: 6px;\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-font-size-xs);\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.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-space-4);\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.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.tcw-modal-close {\n width: var(--tcw-control-h-sm);\n height: var(--tcw-control-h-sm);\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.tcw-modal-close:hover {\n background: var(--tcw-hover-bg);\n color: var(--tcw-text);\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-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 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 font-family: var(--tcw-font-mono);\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 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: 7px 16px;\n border-top: 1px solid var(--tcw-border);\n background: var(--tcw-bg-surface);\n font-size: var(--tcw-font-size-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 7px;\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: 7px;\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 width: 220px;\n flex-shrink: 0;\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 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.tcw-watchlist-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n --tcw-watchlist-remove: 20px;\n position: relative;\n display: grid;\n grid-template-columns: 1fr auto auto;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background var(--tcw-dur-fast) var(--tcw-ease);\n border-inline-start: 2px solid transparent;\n outline: none;\n}\n\n.tcw-watchlist-row.tcw-watchlist-removable {\n grid-template-columns: 1fr auto auto var(--tcw-watchlist-remove);\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 border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n background: var(--tcw-accent-soft);\n border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\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.tcw-watchlist-spark {\n width: 56px;\n height: 22px;\n align-self: center;\n}\n\n.tcw-watchlist-stats {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 1px;\n font-variant-numeric: tabular-nums;\n font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n font-size: var(--tcw-font-size-sm);\n color: var(--tcw-text);\n font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change {\n font-size: var(--tcw-font-size-xs);\n color: var(--tcw-text-muted);\n font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change.tcw-up {\n color: var(--tcw-green);\n}\n\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-control-h));\n height: max(40px, var(--tcw-control-h));\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: 3px 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.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 .tcw-root .tcw-loading-track > span {\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-space-4);\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, and the mark of a submenu, at the row's end. */\n.tcw-context-key {\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: 3px;\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: 5px;\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.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 3px; 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\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: 7px;\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-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/* 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\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.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", qt = "/* === 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", Jt = "/* === 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.tcw-ip-search,\n.tcw-ss-search {\n display: flex;\n align-items: center;\n gap: var(--tcw-space-3);\n flex: none;\n height: var(--tcw-control-h);\n margin: var(--tcw-space-4) var(--tcw-space-6);\n padding: 0 var(--tcw-space-4);\n border: var(--tcw-border-w) solid var(--tcw-border);\n border-radius: var(--tcw-input-radius);\n background: var(--tcw-bg);\n color: var(--tcw-text-muted);\n transition: border-color var(--tcw-dur-fast) var(--tcw-ease), box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n border-color: var(--tcw-accent);\n box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n flex: none;\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);\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 border-top: 1px solid var(--tcw-divider);\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-search,\n .tcw-ss-search {\n margin-inline: var(--tcw-space-4);\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.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 wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-ss {\n width: 610px;\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. */\n.tcw-modal.tcw-ss {\n --tcw-ss-head-h: var(--tcw-control-h);\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 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 144 (89 x phi), the name the rest, the kind and\n the exchange up to 89 each, the check. An empty cell keeps its column. */\n.tcw-ss-results {\n display: grid;\n grid-template-columns: max-content fit-content(144px) minmax(0, 1fr) fit-content(89px) fit-content(89px) 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. */\n.tcw-ss-symbol {\n grid-column: 2;\n display: flex;\n justify-self: start;\n max-width: 100%;\n min-width: 0;\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/* A venue before the ticker (\"BINANCE:\"), dim, is what a narrow column shortens; the ticker never\n shrinks (a share of a pixel would end it in an ellipsis), and is cut only when it alone is wider.\n A gap keeps the venue's ellipsis off the ticker (\"HYPERLIQ… GOLD\"). */\n.tcw-ss-venue {\n flex: 0 1 auto;\n min-width: 0;\n margin-inline-end: var(--tcw-space-1);\n overflow: hidden;\n color: var(--tcw-text-muted);\n font-weight: var(--tcw-weight);\n text-overflow: ellipsis;\n}\n\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.tcw-goto .tcw-modal-footer {\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 }\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 /* A venue counts for nothing in that width (its own is 0): it shows, dim and shortened, in what\n its ticker leaves, if that is 2em, a letter and an ellipsis as on the toolbar. With less, it\n wraps to a second line the cell clips, never a sliver (\"H.GOLD\"). The ticker comes first in the\n line, laid from the end, so it is the one that stays, at the column's start when alone. */\n .tcw-ss-symbol {\n justify-self: stretch;\n flex-direction: row-reverse;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-content: flex-start;\n height: 1lh;\n }\n\n .tcw-ss-ticker {\n order: -1;\n }\n\n .tcw-ss-venue {\n flex: 1 1 2em;\n width: 0;\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 border-top: 1px solid var(--tcw-divider);\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 .tcw-cp-search {\n margin-top: var(--tcw-space-5);\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 border-top: 1px solid var(--tcw-divider);\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 border-top: 1px solid var(--tcw-divider);\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 .tcw-cp-search {\n margin-top: var(--tcw-space-3);\n }\n\n :is(.tcw-hotkey-search, .tcw-cp-search, .tcw-layouts-search-row) {\n margin-inline: var(--tcw-space-4);\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", Yt = "/* === 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-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 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-icon);\n height: var(--tcw-icon);\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: 296 wide to start (377 / sqrt(phi)), from 233 to 377. */\n.tcw-dock-panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: var(--tcw-dock-w, 296px);\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", Xt = /* @__PURE__ */ "toolbar,sidebar,statusBar,dock,alerts,objectTree,symbolInfo,symbolSearch,settings,indicatorSettings,drawingSettings,dataWindow,commandPalette,hotkeySheet,goToDate,replay,screenshot,copyImage,shareView,autoFib,themeToggle,fullscreen,accountPanel,orderTicket,bracketOrders,depthLadder,layouts,indicatorTemplates,compare,indicatorLegend,navigation,customTimeframes,intervalTyping,symbolTyping,dragDropImport,hotkeys,toasts,toolbar.symbol,toolbar.symbolInfo,toolbar.timeframes,toolbar.timeframeMenu,toolbar.chartType,toolbar.indicators,toolbar.layouts,toolbar.replay,toolbar.bracketOrders,toolbar.depthLadder,toolbar.accountPanel,toolbar.objectTree,toolbar.alerts,toolbar.screenshot,toolbar.settings,toolbar.themeToggle,toolbar.fullscreen,toolbar.compare,toolbar.undo,toolbar.redo,toolbar.trade,sidebar.cursor,sidebar.favorites,sidebar.lines,sidebar.fibonacci,sidebar.patterns,sidebar.forecasting,sidebar.annotation,sidebar.style,sidebar.magnet,sidebar.eraser,sidebar.zoomArea,sidebar.stayInDrawing,sidebar.undo,sidebar.redo,sidebar.clear,sidebar.lockAll,sidebar.hideAll,dock.watchlist,dock.alerts,dock.objectTree,dock.dataWindow,dock.symbolInfo,dock.depthLadder,statusBar.range,statusBar.goToDate,statusBar.market,statusBar.connection,statusBar.symbol,statusBar.clock,statusBar.scale,statusBar.rangeTimeframe,indicatorLegend.values,indicatorLegend.visibility,indicatorLegend.settings,indicatorLegend.remove,indicatorLegend.more,pane.move,pane.collapse,pane.maximize,navigation.zoom,navigation.scroll,navigation.reset,menu.chart,menu.chart.alert,menu.chart.order,menu.chart.orderTicket,menu.chart.horizontalLine,menu.chart.resetView,menu.chart.drawings,menu.chart.exportData,menu.chart.settings,menu.chart.scale,menu.chart.goToDate,menu.chart.paneScale,menu.priceAxisAdd,menu.chart.indicators,menu.chart.timezone,menu.drawing,menu.drawing.settings,menu.drawing.alert,menu.drawing.order,menu.drawing.group,menu.drawing.lock,menu.drawing.hide,menu.drawing.duplicate,menu.drawing.delete,selectionToolbar,hotkeys.commandPalette,hotkeys.symbolSearch,hotkeys.save,hotkeys.tools,hotkeys.invertScale,hotkeys.goToDate,hotkeys.help,hotkeys.resetView".split(","), Zt = new Set(Xt), Qt = {
|
|
1212
|
+
])], Kt = "/* === 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: 1.4;\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, so each step is near φ times the one before. */\n --tcw-space-1: 2px;\n --tcw-space-2: 3px;\n --tcw-space-3: 5px;\n --tcw-space-4: 8px;\n --tcw-space-5: 13px;\n --tcw-space-6: 21px;\n --tcw-space-7: 34px;\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: 26px;\n --tcw-control-h-sm: 20px;\n --tcw-icon: 16px;\n --tcw-sidebar-w: 42px;\n --tcw-menu-item-h: 33px;\n --tcw-font: -apple-system, BlinkMacSystemFont, '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: 600;\n --tcw-label-case: uppercase;\n --tcw-label-tracking: 0.06em;\n --tcw-border-w: 1px;\n --tcw-sep-w: 1px;\n --tcw-menu-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-md);\n --tcw-dialog-shadow: 0 0 0 1px var(--tcw-border), 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: 'Cascadia Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;\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/* 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-space-4);\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-space-4);\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 symbol on a phone), the symbol gives way so\n \"more\" stays on the bar, a step at a time (`data-tcw-squeeze`). First its venue\n (\"HYPERLIQUID:xyz:\") is cut short before anything else shrinks, down to its first letter and an\n ellipsis, a gap keeping it off the ticker. That is 2em: a line's first letter is cut, never\n swapped for the ellipsis, so less shows a letter and a sliver (\"H.\"). The venue's column counts\n only those 2em in the button's smallest width, so the ticker stays whole and the buttons beside it\n give the rest. With room, the symbol shows as it always has. */\n.tcw-toolbar[data-tcw-squeeze='venue'] > .tcw-toolbar-symbol--venue {\n display: inline-grid;\n grid-template-columns: minmax(2em, max-content) auto;\n column-gap: var(--tcw-space-1);\n align-items: center;\n /* Shrinking is shared by width times this: the symbol takes it all until it is at its smallest. */\n flex-shrink: 1000;\n}\n\n.tcw-toolbar[data-tcw-squeeze='venue'] .tcw-toolbar-venue {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Then, with no room even for the ellipsis (a 320 phone in the Capsule look), the venue goes, the\n ticker whole; and last of all, the ticker is cut short. */\n.tcw-toolbar[data-tcw-squeeze='ticker'] .tcw-toolbar-venue,\n.tcw-toolbar[data-tcw-squeeze='cut'] .tcw-toolbar-venue {\n display: none;\n}\n\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-space-4);\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-space-4);\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.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-space-4);\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 5px;\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-font-size-xs);\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.tcw-loading-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n padding: 22px 26px 20px;\n border: 1px solid transparent;\n border-radius: var(--tcw-panel-radius);\n}\n\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\n click visibly registered without blanking the screen. */\n.tcw-loading-overlay--veil {\n background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\n}\n\n.tcw-loading-overlay--veil .tcw-loading-card {\n background: var(--tcw-bg-elevated);\n border-color: var(--tcw-border);\n box-shadow: var(--tcw-menu-shadow);\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.tcw-loading-track {\n position: relative;\n width: 100%;\n min-width: 88px;\n height: 2px;\n border-radius: 1px;\n background: var(--tcw-border);\n overflow: hidden;\n}\n\n.tcw-loading-track > span {\n position: absolute;\n inset: 0;\n width: 40%;\n border-radius: 1px;\n background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\n animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\n}\n\n@keyframes tcw-loading-sweep {\n from { transform: translateX(-100%); }\n to { transform: translateX(250%); }\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.tcw-loading-overlay--error .tcw-loading-track {\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/* Reduced motion: nothing slides or lifts, but the candles still glow in\n turn and the track breathes, 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 .tcw-loading-track > span {\n width: 100%;\n background: var(--tcw-accent);\n animation: tcw-loading-breathe 2.4s ease-in-out infinite;\n }\n}\n\n@keyframes tcw-candle-glow {\n 0%, 60%, 100% { opacity: 0.28; }\n 25% { opacity: 0.9; }\n}\n\n@keyframes tcw-loading-breathe {\n 0%, 100% { opacity: 0.15; }\n 50% { opacity: 0.7; }\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: 19px;\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: 15px;\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: 3px;\n margin-top: 1px;\n padding: 1px 5px;\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.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}\n\n.tcw-sidebar-btn {\n width: var(--tcw-control-h);\n height: var(--tcw-control-h);\n margin: 1px 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 width: var(--tcw-icon);\n height: var(--tcw-icon);\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.tcw-multi-dot {\n position: absolute;\n bottom: 3px;\n right: 3px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--tcw-text-muted);\n opacity: 0.7;\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: 20px;\n height: max(1px, var(--tcw-sep-w));\n background: var(--tcw-divider);\n margin: 5px 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 margin-inline-start: 6px;\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-font-size-xs);\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.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-space-4);\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.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.tcw-modal-close {\n width: var(--tcw-control-h-sm);\n height: var(--tcw-control-h-sm);\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.tcw-modal-close:hover {\n background: var(--tcw-hover-bg);\n color: var(--tcw-text);\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-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 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 font-family: var(--tcw-font-mono);\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 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: 7px 16px;\n border-top: 1px solid var(--tcw-border);\n background: var(--tcw-bg-surface);\n font-size: var(--tcw-font-size-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 7px;\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: 7px;\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 width: 220px;\n flex-shrink: 0;\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 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.tcw-watchlist-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n --tcw-watchlist-remove: 20px;\n position: relative;\n display: grid;\n grid-template-columns: 1fr auto auto;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background var(--tcw-dur-fast) var(--tcw-ease);\n border-inline-start: 2px solid transparent;\n outline: none;\n}\n\n.tcw-watchlist-row.tcw-watchlist-removable {\n grid-template-columns: 1fr auto auto var(--tcw-watchlist-remove);\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 border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n background: var(--tcw-accent-soft);\n border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\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.tcw-watchlist-spark {\n width: 56px;\n height: 22px;\n align-self: center;\n}\n\n.tcw-watchlist-stats {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 1px;\n font-variant-numeric: tabular-nums;\n font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n font-size: var(--tcw-font-size-sm);\n color: var(--tcw-text);\n font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change {\n font-size: var(--tcw-font-size-xs);\n color: var(--tcw-text-muted);\n font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change.tcw-up {\n color: var(--tcw-green);\n}\n\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-control-h));\n height: max(40px, var(--tcw-control-h));\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: 3px 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.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 .tcw-root .tcw-loading-track > span {\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-space-4);\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, and the mark of a submenu, at the row's end. */\n.tcw-context-key {\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: 3px;\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: 5px;\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.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 3px; 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\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: 7px;\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-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/* 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\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.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", qt = "/* === 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", Jt = "/* === 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.tcw-ip-search,\n.tcw-ss-search {\n display: flex;\n align-items: center;\n gap: var(--tcw-space-3);\n flex: none;\n height: var(--tcw-control-h);\n margin: var(--tcw-space-4) var(--tcw-space-6);\n padding: 0 var(--tcw-space-4);\n border: var(--tcw-border-w) solid var(--tcw-border);\n border-radius: var(--tcw-input-radius);\n background: var(--tcw-bg);\n color: var(--tcw-text-muted);\n transition: border-color var(--tcw-dur-fast) var(--tcw-ease), box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n border-color: var(--tcw-accent);\n box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n flex: none;\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);\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 border-top: 1px solid var(--tcw-divider);\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-search,\n .tcw-ss-search {\n margin-inline: var(--tcw-space-4);\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.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 wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-ss {\n width: 610px;\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. */\n.tcw-modal.tcw-ss {\n --tcw-ss-head-h: var(--tcw-control-h);\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 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 144 (89 x phi), the name the rest, the kind and\n the exchange up to 89 each, the check. An empty cell keeps its column. */\n.tcw-ss-results {\n display: grid;\n grid-template-columns: max-content fit-content(144px) minmax(0, 1fr) fit-content(89px) fit-content(89px) 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. */\n.tcw-ss-symbol {\n grid-column: 2;\n display: flex;\n justify-self: start;\n max-width: 100%;\n min-width: 0;\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/* A venue before the ticker (\"BINANCE:\"), dim, is what a narrow column shortens; the ticker never\n shrinks (a share of a pixel would end it in an ellipsis), and is cut only when it alone is wider.\n A gap keeps the venue's ellipsis off the ticker (\"HYPERLIQ… GOLD\"). */\n.tcw-ss-venue {\n flex: 0 1 auto;\n min-width: 0;\n margin-inline-end: var(--tcw-space-1);\n overflow: hidden;\n color: var(--tcw-text-muted);\n font-weight: var(--tcw-weight);\n text-overflow: ellipsis;\n}\n\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.tcw-goto .tcw-modal-footer {\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 }\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 /* A venue counts for nothing in that width (its own is 0): it shows, dim and shortened, in what\n its ticker leaves, if that is 2em, a letter and an ellipsis as on the toolbar. With less, it\n wraps to a second line the cell clips, never a sliver (\"H.GOLD\"). The ticker comes first in the\n line, laid from the end, so it is the one that stays, at the column's start when alone. */\n .tcw-ss-symbol {\n justify-self: stretch;\n flex-direction: row-reverse;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-content: flex-start;\n height: 1lh;\n }\n\n .tcw-ss-ticker {\n order: -1;\n }\n\n .tcw-ss-venue {\n flex: 1 1 2em;\n width: 0;\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 border-top: 1px solid var(--tcw-divider);\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 .tcw-cp-search {\n margin-top: var(--tcw-space-5);\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 border-top: 1px solid var(--tcw-divider);\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 border-top: 1px solid var(--tcw-divider);\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 .tcw-cp-search {\n margin-top: var(--tcw-space-3);\n }\n\n :is(.tcw-hotkey-search, .tcw-cp-search, .tcw-layouts-search-row) {\n margin-inline: var(--tcw-space-4);\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", Yt = "/* === 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-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 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-icon);\n height: var(--tcw-icon);\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: 296 wide to start (377 / sqrt(phi)), from 233 to 377. */\n.tcw-dock-panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: var(--tcw-dock-w, 296px);\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", Xt = /* @__PURE__ */ "toolbar,sidebar,statusBar,dock,alerts,objectTree,symbolInfo,symbolSearch,settings,indicatorSettings,drawingSettings,dataWindow,commandPalette,hotkeySheet,goToDate,replay,screenshot,copyImage,shareView,autoFib,themeToggle,fullscreen,accountPanel,orderTicket,bracketOrders,depthLadder,layouts,indicatorTemplates,compare,indicatorLegend,navigation,customTimeframes,intervalTyping,symbolTyping,dragDropImport,hotkeys,toasts,toolbar.symbol,toolbar.symbolInfo,toolbar.timeframes,toolbar.timeframeMenu,toolbar.chartType,toolbar.indicators,toolbar.layouts,toolbar.replay,toolbar.bracketOrders,toolbar.depthLadder,toolbar.accountPanel,toolbar.objectTree,toolbar.alerts,toolbar.screenshot,toolbar.settings,toolbar.themeToggle,toolbar.fullscreen,toolbar.compare,toolbar.undo,toolbar.redo,toolbar.trade,sidebar.cursor,sidebar.favorites,sidebar.lines,sidebar.fibonacci,sidebar.patterns,sidebar.forecasting,sidebar.annotation,sidebar.style,sidebar.magnet,sidebar.eraser,sidebar.zoomArea,sidebar.stayInDrawing,sidebar.undo,sidebar.redo,sidebar.clear,sidebar.lockAll,sidebar.hideAll,dock.watchlist,dock.alerts,dock.objectTree,dock.dataWindow,dock.symbolInfo,dock.depthLadder,statusBar.range,statusBar.goToDate,statusBar.market,statusBar.connection,statusBar.symbol,statusBar.clock,statusBar.scale,statusBar.rangeTimeframe,indicatorLegend.values,indicatorLegend.visibility,indicatorLegend.settings,indicatorLegend.remove,indicatorLegend.more,pane.move,pane.collapse,pane.maximize,navigation.zoom,navigation.scroll,navigation.reset,menu.chart,menu.chart.alert,menu.chart.order,menu.chart.orderTicket,menu.chart.horizontalLine,menu.chart.resetView,menu.chart.drawings,menu.chart.exportData,menu.chart.settings,menu.chart.scale,menu.chart.goToDate,menu.chart.paneScale,menu.priceAxisAdd,menu.chart.indicators,menu.chart.timezone,menu.drawing,menu.drawing.settings,menu.drawing.alert,menu.drawing.order,menu.drawing.group,menu.drawing.lock,menu.drawing.hide,menu.drawing.duplicate,menu.drawing.delete,selectionToolbar,hotkeys.commandPalette,hotkeys.symbolSearch,hotkeys.save,hotkeys.tools,hotkeys.invertScale,hotkeys.goToDate,hotkeys.help,hotkeys.resetView".split(","), Zt = new Set(Xt), Qt = {
|
|
1213
1213
|
toolbar: ["toolbar"],
|
|
1214
1214
|
drawingTools: [
|
|
1215
1215
|
"sidebar",
|