/* ============================================================
   The Market Terminal — Charts (/chart)

   A full-viewport chart workspace laid out like TradingView's
   full-screen chart, in a neutral palette of its own (below):

     ┌ tabs ────────────────────────────────────────────────┐
     ├ toolbar ─────────────────────────────────────────────┤
     ├ tools ┬ chart ─────────────┬ panel (watchlist │ rail │
     │       ├ range bar ─────────┤  over details)   │      │
     └───────┴────────────────────┴──────────────────┴──────┘

   Every size is a --cw-* variable, measured from a TradingView
   desktop screenshot (October 2026). The panel width is set from
   the saved layout (240–520px).
   ============================================================ */

:root {
  --cw-toolbar-h: 40px;
  --cw-tabs-h: 34px;
  --cw-tools-w: 52px;
  --cw-rail-w: 45px;
  --cw-bottom-h: 36px;
  --cw-panel-w: 300px;
  --cw-split: 0.5;
  --cw-seam: 4px;
  --cw-btn-h: 32px;
  --cw-psec-head-h: 40px;
}

/* Charts' own palette, on this page only (the terminal's other pages keep
   src/shared/tokens.css as it is): TradingView's neutral greys for the
   panes, the seams between them and the text, its green and red for the
   candles and the volume, and its blue for the drawings and the accents.
   chart-theme.js reads these from <html>, so the canvas follows them too.
   The chart's background is a vertical gradient (--cw-chart-top to
   --cw-chart-bottom, behind each chart: .cw-cell), as TradingView's dark
   theme draws it. Measured from a TradingView desktop screenshot (October
   2026) and written in oklch: near-black panes, a slightly lighter seam and
   pressed button, light grey text, the chart a shade lighter at its top
   than its foot, TradingView's green and red candles, the volume at half
   their strength. */
html:has(> body.cw-body)[data-theme="light"] {
  --paper:       oklch(1 0 0);
  --paper-1:     oklch(0.975 0 0);
  --paper-2:     oklch(0.9551 0 0);
  --paper-3:     oklch(0.9158 0 0);
  --card:        oklch(1 0 0);
  --card-2:      oklch(0.965 0 0);
  --ink:         oklch(0.1684 0 0);
  --ink-1:       oklch(0.3211 0 0);
  --ink-2:       oklch(0.4748 0 0);
  --ink-3:       oklch(0.5278 0 0);
  --ink-4:       oklch(0.7155 0 0);
  --rule:        oklch(0.9158 0 0);
  --rule-soft:   oklch(0.9461 0 0);
  --rule-strong: oklch(0.7636 0 0);
  --up:          oklch(0.5655 0.1010 182.45);
  --up-soft:     oklch(0.5655 0.1010 182.45 / 0.12);
  --up-bg:       oklch(0.95 0.03 180);
  --down:        oklch(0.5680 0.2002 26.41);
  --down-soft:   oklch(0.5680 0.2002 26.41 / 0.12);
  --down-bg:     oklch(0.95 0.04 25);
  --candle-up:   oklch(0.6109 0.1128 176.15);
  --candle-down: oklch(0.6304 0.2216 22.69);
  --volume-up:   oklch(0.6109 0.1128 176.15 / 0.5);
  --volume-down: oklch(0.6304 0.2216 22.69 / 0.5);
  --cool:        oklch(0.5624 0.2404 264.40);
  --cool-soft:   oklch(0.5624 0.2404 264.40 / 0.12);
  --cool-bg:     oklch(0.95 0.03 264);
  --series-1:    oklch(0.5624 0.2404 264.40);
  --series-2:    oklch(0.7120 0.1795 53.54);
  --series-3:    oklch(0.5495 0.1615 297.66);
  --series-4:    oklch(0.6187 0.1063 207.97);
  --series-5:    oklch(0.5737 0.2178 7.85);
  --series-6:    oklch(0.6565 0.1343 86.40);
  --chart-grid:      oklch(0 0 0 / 0.08);
  --chart-grid-soft: oklch(0 0 0 / 0.05);
  --chart-crosshair: oklch(0.6401 0 0);
  --chart-tooltip-bg: oklch(0.26 0 0);
  --chart-tooltip-ink: oklch(1 0 0);
  --cw-chart-top:    oklch(1 0 0);
  --cw-chart-bottom: oklch(1 0 0);
  --cw-bg-seam:  oklch(0.9158 0 0);
  --cw-toggle-bg:  oklch(0.26 0 0);
  --cw-toggle-ink: oklch(1 0 0);
}
html:has(> body.cw-body)[data-theme="dark"] {
  --paper:       oklch(0.1776 0 0);
  --paper-1:     oklch(0.2134 0 0);
  --paper-2:     oklch(0.2809 0 0);
  --paper-3:     oklch(0.3290 0 0);
  --card:        oklch(0.2308 0 0);
  --card-2:      oklch(0.2686 0 0);
  --ink:         oklch(0.8914 0 0);
  --ink-1:       oklch(0.8607 0 0);
  --ink-2:       oklch(0.7155 0 0);
  --ink-3:       oklch(0.6401 0 0);
  --ink-4:       oklch(0.4748 0 0);
  --rule:        oklch(0.3211 0 0);
  --rule-soft:   oklch(0.2686 0 0);
  --rule-strong: oklch(0.4091 0 0);
  --up:          oklch(0.6666 0.1158 177.89);
  --up-soft:     oklch(0.6666 0.1158 177.89 / 0.15);
  --up-bg:       oklch(0.26 0.05 178);
  --down:        oklch(0.6304 0.2216 22.69);
  --down-soft:   oklch(0.6304 0.2216 22.69 / 0.15);
  --down-bg:     oklch(0.26 0.07 23);
  --candle-up:   oklch(0.6109 0.1128 176.15);
  --candle-down: oklch(0.6304 0.2216 22.69);
  --volume-up:   oklch(0.6109 0.1128 176.15 / 0.5);
  --volume-down: oklch(0.6304 0.2216 22.69 / 0.5);
  --cool:        oklch(0.6179 0.2060 262.64);
  --cool-soft:   oklch(0.6179 0.2060 262.64 / 0.15);
  --cool-bg:     oklch(0.25 0.06 263);
  --series-1:    oklch(0.5624 0.2404 264.40);
  --series-2:    oklch(0.7703 0.1741 64.05);
  --series-3:    oklch(0.5495 0.1615 297.66);
  --series-4:    oklch(0.7291 0.1265 210.82);
  --series-5:    oklch(0.6062 0.2298 9.63);
  --series-6:    oklch(0.8883 0.1697 95.26);
  --chart-grid:      oklch(1 0 0 / 0.08);
  --chart-grid-soft: oklch(1 0 0 / 0.045);
  --chart-crosshair: oklch(0.68 0 0);
  --chart-tooltip-bg: oklch(0.36 0 0);
  --chart-tooltip-ink: oklch(0.96 0 0);
  --cw-chart-top:    oklch(0.2308 0 0);
  --cw-chart-bottom: oklch(0.1776 0 0);
  --cw-bg-seam:  oklch(0.2809 0 0);
  --cw-toggle-bg:  oklch(0.9551 0 0);
  --cw-toggle-ink: oklch(0.1776 0 0);
}

/* The panes, the seams between them, a hovered and a pressed button, and a
   switch that is on (the magnet, lock all: TradingView inverts it). */
:root {
  --cw-bg-pane: var(--paper);
  --cw-bg-seam: var(--rule-soft);
  --cw-hover: var(--paper-2);
  --cw-pressed: var(--paper-3);
  --cw-toggle-bg: var(--ink);
  --cw-toggle-ink: var(--paper);
  --cw-chart-top: var(--paper);
  --cw-chart-bottom: var(--paper);
}

html:has(body.cw-body),
body.cw-body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.cw-body {
  background: var(--cw-bg-seam);
  color: var(--ink);
  font-size: 13px;
}

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

/* ---------- buttons ---------- */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  height: var(--cw-btn-h);
  min-width: 30px;
  padding: 0 7px;
  border-radius: var(--radius-md);
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cw-btn:hover:not(:disabled) { background: var(--cw-hover); color: var(--ink); }
.cw-btn:disabled { color: var(--ink-4); cursor: default; }
.cw-btn.is-active,
.cw-btn[aria-expanded="true"] { background: var(--cw-pressed); color: var(--ink); }
.cw-btn-primary { background: var(--brand); color: var(--paper); padding: 0 16px; height: 36px; font-size: 14px; }
.cw-btn-primary:hover:not(:disabled) { background: var(--brand); color: var(--paper); filter: brightness(1.08); }
.cw-btn-outline { border: 1px solid var(--rule); padding: 0 16px; height: 36px; font-size: 14px; }
.cw-btn-icon { min-width: 30px; padding: 0 6px; }
.cw-ic { flex: none; display: block; }

/* ---------- gate (signed out / not available / retrying) ---------- */
/* A card taller than the window (the Desk plan card in a short popup or a
   phone on its side) scrolls from its top: auto margins centre it only
   while it fits, so its buttons are never out of reach. */
.cw-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px;
  background: var(--paper);
}
.cw-gate[hidden] { display: none; }
.cw-gate-card { max-width: 420px; margin: auto; text-align: center; }
.cw-gate-brand {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.cw-gate-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.cw-gate-text { margin: 0 0 20px; min-height: 1.5em; color: var(--ink-2); font-size: var(--fs-body); }
.cw-gate-text:empty { min-height: 0; margin-bottom: 16px; }
.cw-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* The Desk plan card's bullets (the capability's preview, from the server) */
.cw-gate-list {
  margin: -8px 0 24px;
  padding-left: 20px;
  text-align: left;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.cw-gate-list[hidden] { display: none; }
.cw-gate-list li + li { margin-top: 6px; }
.cw-gate[data-state="checking"] .cw-gate-title { color: var(--ink-2); }

/* ---------- the workspace grid ---------- */
.cw-app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--cw-tools-w) minmax(0, 1fr) var(--cw-panel-w) var(--cw-rail-w);
  grid-template-rows: var(--cw-tabs-h) var(--cw-toolbar-h) minmax(0, 1fr) var(--cw-bottom-h);
  grid-template-areas:
    "tabs    tabs    tabs    tabs"
    "toolbar toolbar toolbar toolbar"
    "tools   chart   panel   rail"
    "tools   bottom  panel   rail";
  gap: var(--cw-seam);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--cw-bg-seam);
}
.cw-app[hidden] { display: none; }
.cw-app[data-panel="closed"] {
  grid-template-columns: var(--cw-tools-w) minmax(0, 1fr) var(--cw-rail-w);
  grid-template-areas:
    "tabs    tabs    tabs"
    "toolbar toolbar toolbar"
    "tools   chart   rail"
    "tools   bottom  rail";
}
.cw-app[data-panel="closed"] .cw-panel { display: none; }
.cw-app.is-resizing { cursor: col-resize; user-select: none; }
.cw-app.is-resizing .cw-chart { pointer-events: none; }

/* No page zoom (docs/MOBILE.md §6): a pinch or a double tap anywhere but on
   a chart would zoom the fixed workspace and leave it zoomed. Pans stay,
   for the scrolling lists and strips; the chart's own canvas takes every
   touch (touch-action none, below). Menus, sheets and dialogs sit outside
   .cw-app, on the body. workspace.js refuses iOS Safari's gesture events. */
.cw-app,
.cw-menu,
.cw-menu-scrim,
.cw-dlg-scrim { touch-action: pan-x pan-y; }
.cw-body { -webkit-tap-highlight-color: transparent; }

/* Focus mode (⛶ where the browser has no full screen, an iPhone): the chart
   alone, the chrome hidden, and one button back (workspace.js). */
.cw-app.is-focus,
.cw-app.is-focus[data-panel="closed"],
.cw-app.is-focus[data-tabs] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "chart";
}
.cw-app.is-focus > :not(.cw-chart):not(.cw-focus-exit) { display: none; }
.cw-focus-exit {
  position: fixed;
  z-index: var(--z-menu);
  top: calc(env(safe-area-inset-top) + 8px);
  right: calc(env(safe-area-inset-right) + 8px);
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--card) 90%, transparent);
  box-shadow: var(--shadow-floating);
  color: var(--ink);
}
.cw-focus-exit[hidden] { display: none; }

.cw-toolbar,
.cw-tabs,
.cw-tools,
.cw-chart,
.cw-panel,
.cw-rail,
.cw-bottom {
  min-width: 0;
  min-height: 0;
  background: var(--cw-bg-pane);
}

/* ---------- toolbar ---------- */
.cw-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  overflow: hidden;
}
.cw-tb-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--rule); }
.cw-tb-spacer { flex: 1 1 auto; min-width: 4px; }
/* The account's round mark (TradingView's avatar), which opens The Market
   Terminal's menu; the TMT mark until the account is known. */
.cw-tb-brand { min-width: 34px; padding: 0 3px; border-radius: var(--radius-pill); }
.cw-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cat-1);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.cw-avatar.is-brand {
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand);
}
.cw-tab-mark[data-tone="2"], .cw-avatar[data-tone="2"] { background: var(--cat-2); }
.cw-tab-mark[data-tone="3"], .cw-avatar[data-tone="3"] { background: var(--cat-3); }
.cw-tab-mark[data-tone="4"], .cw-avatar[data-tone="4"] { background: var(--cat-4); }
.cw-tab-mark[data-tone="5"], .cw-avatar[data-tone="5"] { background: var(--cat-5); }
.cw-tab-mark[data-tone="6"], .cw-avatar[data-tone="6"] { background: var(--cat-6); }
/* The symbol: a pill holding its name, a search glass at its end. */
.cw-tb-sym {
  justify-content: space-between;
  gap: 10px;
  min-width: 132px;
  padding: 0 10px 0 14px;
  border-radius: var(--radius-pill);
  background: var(--cw-hover);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cw-tb-sym:hover:not(:disabled) { background: var(--cw-pressed); }
.cw-tb-sym .cw-ic { color: var(--ink-3); }
.cw-tb-sym-text { overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.cw-tb-favs { display: flex; align-items: center; gap: 1px; }
/* Below 1024px, a grid's chart on screen: "Chart 2/4 ▾" ("2/4 ▾" on a phone) */
.cw-tb-cells { flex: none; gap: 2px; margin-left: 2px; padding: 0 4px 0 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-tb-cells[hidden] { display: none; }
.cw-tb-cells-word { font-weight: 500; color: var(--ink-2); white-space: pre; }
.cw-tb-int { min-width: 28px; padding: 0 6px; }
.cw-tb-intmenu { padding: 0 4px; min-width: 26px; }
.cw-tb-int-cur { display: none; padding-left: 3px; }
.cw-tb-intmenu.has-current .cw-tb-int-cur { display: inline; }
.cw-tb-type { gap: 2px; padding: 0 4px 0 6px; }
.cw-fx { font-family: var(--font-serif); font-size: 17px; font-style: italic; font-weight: 500; }
.cw-tb-fx,
.cw-tb-alert { gap: 6px; }
.cw-tb-undo:disabled,
.cw-tb-redo:disabled { color: var(--ink-4); }
.cw-tb-label { font-size: 14px; }
.cw-tb-icon { padding: 0 6px; }
.cw-tb-compare { padding: 0 4px; }     /* ⊕, beside the symbol it compares with */
.cw-tb-follow[aria-pressed="true"] { color: var(--cool); }   /* on, as the rail's tools */
/* Layout ▾: the saved layout on screen by name (layout-menu.js) */
/* It gives way first when the toolbar is short of room: the name shortens. */
.cw-tb-layout { flex: 0 1 auto; gap: 2px; min-width: 56px; max-width: 200px; padding: 0 4px 0 8px; font-size: 13.5px; font-weight: 600; }
.cw-tb-layout-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-tb-layout.is-unsaved { color: var(--ink-2); font-weight: 500; }
.cw-tb-panel,
.cw-tb-more,
.cw-tb-step,
.cw-tb-draw { display: none; }

/* ---------- tab strip ---------- */
/* The tabs open in this window (layout-tabs.js), on the window's frame above
   the toolbar, as TradingView's desktop app has them: the tab on screen is
   the toolbar's colour and joins it (the strip reaches down over the seam
   between them), the others sit on the frame with a hairline between them.
   Each shrinks to a least width and then the strip scrolls sideways rather
   than hiding one; + and the saved layouts' ▾ stay in view beside it. A tab
   reads its chart's symbol on a mark, ▲ or ▼, the last price and the day's
   change, then "/ name" for a saved layout; words that do not fit fade out
   before the ×. A dot says a saved tab has changes it does not have yet
   (Autosave off). A touch screen has no hover, so the × shows on the tab on
   screen alone there. */
.cw-tabs {
  grid-area: tabs;
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: calc(-1 * var(--cw-seam));
  padding: 5px 6px 0;
  overflow: hidden;
  background: var(--cw-bg-seam);
}
.cw-tab-scroll {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cw-tab-scroll::-webkit-scrollbar { display: none; }
/* A definite width, not only a flex-basis: the strip is sized from its tabs'
   widths, and a flex-basis alone is not counted, so the tabs would share only
   what their words need. They start at 210px and give way evenly, down to 96px. */
.cw-tab-item {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: stretch;
  width: 210px;
  min-width: 96px;
  max-width: 240px;
  border-radius: 8px 8px 0 0;
  color: var(--ink-2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
/* The hairline between two tabs neither of which is on screen. */
.cw-tab-item:not(.is-active) + .cw-tab-item:not(.is-active) {
  background-image: linear-gradient(var(--rule-strong), var(--rule-strong));
  background-position: left center;
  background-size: 1px 16px;
  background-repeat: no-repeat;
}
.cw-tab-item:hover:not(.is-active) { background-color: var(--cw-hover); background-image: none; color: var(--ink); }
.cw-tab-item:hover + .cw-tab-item { background-image: none; }
.cw-tab-item.is-active { background: var(--cw-bg-pane); color: var(--ink); }
.cw-tab-item.is-active + .cw-tab-item { background-image: none; }
.cw-tab {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 0 0 10px;
  border-radius: inherit;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
/* The symbol's mark: its first letter on a colour of its own (core/tabs.js tabMark). */
.cw-tab-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cat-1);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.cw-tab-mark[hidden] { display: none; }
/* (Its other colours are the avatar's: the toolbar's rules above.) */
.cw-tab-words {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
}
.cw-tab-sym,
.cw-tab-item.is-unsaved .cw-tab-name { color: var(--ink); font-weight: 600; }
.cw-tab-sym[hidden] { display: none; }
/* A saved layout's name after the quote: "/ Momentum". */
.cw-tab-item:not(.is-unsaved) .cw-tab-name { order: 10; color: var(--ink-3); font-weight: 400; }
.cw-tab-item:not(.is-unsaved) .cw-tab-name::before { content: '/ '; }
.cw-tab-arrow {
  flex: none;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.cw-tab-item[data-dir="up"] .cw-tab-arrow { border-bottom: 6px solid var(--up); }
.cw-tab-item[data-dir="down"] .cw-tab-arrow { border-top: 6px solid var(--down); }
.cw-tab-item:not([data-dir="up"]):not([data-dir="down"]) .cw-tab-arrow { display: none; }
.cw-tab-price { color: var(--ink-2); }
.cw-tab-price:empty,
.cw-tab-pct:empty { display: none; }
.cw-tab-pct { color: var(--ink-3); }
.cw-tab-item[data-dir="up"] .cw-tab-pct { color: var(--up); }
.cw-tab-item[data-dir="down"] .cw-tab-pct { color: var(--down); }
.cw-tab-dot { display: none; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--series-6); }
.cw-tab-item.is-dirty .cw-tab-dot { display: inline-block; }
.cw-tab-close {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cw-tab-close[hidden] { display: none; }
.cw-tab-close:hover { background: var(--cw-pressed); color: var(--ink); }
.cw-tab-item.is-dragging { opacity: 0.45; }
.cw-tab-item.is-drop-before::before,
.cw-tab-item.is-drop-after::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--cool);
}
.cw-tab-item.is-drop-before::before { left: 0; }
.cw-tab-item.is-drop-after::after { right: 0; }
.cw-tab-ctrls { display: flex; flex: none; align-items: center; padding-left: 4px; }
.cw-tab-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--radius-md);
  color: var(--ink-2);
}
.cw-tab-ctl:hover,
.cw-tab-ctl[aria-expanded="true"] { background: var(--cw-hover); color: var(--ink); }
.cw-tab-add.is-full { opacity: 0.5; }
.cw-tab-list { min-width: 24px; padding: 0 4px; }
@media (hover: none) {
  .cw-tab-item:not(.is-active) .cw-tab-close { display: none; }
  .cw-tab-close { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-tab-item,
  .cw-tab-close { transition: none; }
}

/* ---------- side rails ---------- */
.cw-tools,
.cw-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  overflow: hidden;
}
.cw-tools {
  grid-area: tools;
  overflow-y: auto;                    /* a short window scrolls the drawing tools */
  scrollbar-width: none;
}
.cw-tools::-webkit-scrollbar { display: none; }
.cw-rail { grid-area: rail; gap: 4px; }
.cw-rail-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--ink-1);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cw-rail-btn[hidden] { display: none; }   /* a tool the account's API does not keep */
.cw-rail-btn:hover:not(:disabled) { background: var(--cw-hover); color: var(--ink); }
.cw-rail-btn:disabled { color: var(--ink-3); opacity: 0.5; cursor: default; }
.cw-rail-btn.is-active,
.cw-rail-btn.is-active:hover:not(:disabled) { background: var(--cw-pressed); color: var(--cool); }
/* On the drawing rail, the tool in hand is a grey square, as TradingView
   marks it, and a switch that is on (the magnet, stay in drawing mode, lock
   all, hide all, the favourites' bar) is drawn inverted. */
.cw-tools .cw-rail-btn.is-active,
.cw-tools .cw-rail-btn.is-active:hover:not(:disabled) { color: var(--ink); }
.cw-tools .cw-rail-btn[data-action].is-active,
.cw-tools .cw-rail-btn[data-action].is-active:hover:not(:disabled) { background: var(--cw-toggle-bg); color: var(--cw-toggle-ink); }
/* The favourites' star sits at the foot of the rail. */
.cw-rail-btn[data-action="favorites"] { margin-top: auto; }
.cw-rail-sep { flex: none; width: 28px; height: 1px; margin: 4px 0; background: var(--rule-soft); }
.cw-rail-btn .cw-ic { width: 22px; height: 22px; }
.cw-rail-btn[data-action="zoomOut"][hidden] { display: none; }

/* A group of drawing tools (app/tool-rail.js): its button shows the tool last
   picked from it, and the chevron at its edge (shown on hover) opens the
   whole group beside the rail. */
.cw-rail-group { position: relative; flex: none; display: flex; }
.cw-rail-group[hidden] { display: none; }
.cw-rail-more {
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 10px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.cw-rail-more .cw-ic { width: 10px; height: 10px; }
.cw-rail-group:hover .cw-rail-more,
.cw-rail-more:focus-visible,
.cw-rail-more[aria-expanded="true"] { opacity: 1; }
.cw-rail-more:hover,
.cw-rail-more[aria-expanded="true"] { background: var(--cw-hover); color: var(--ink); }
@media (hover: none) {
  .cw-rail-more { opacity: 0.7; }
}

/* The group's flyout: its sections, a row per tool (its icon, name and key,
   and a star that makes it a favourite). Fixed, beside the rail. */
.cw-rail-fly {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  overflow-y: auto;
  padding: 6px 0;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  font-size: 13.5px;
}
.cw-rail-fly[hidden] { display: none; }
.cw-fly-head {
  margin: 0;
  padding: 8px 12px 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.cw-fly-head[hidden] { display: none; }
.cw-fly-row { display: flex; align-items: center; }
.cw-fly-row[hidden] { display: none; }
.cw-fly-tool {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  padding: 0 4px 0 12px;
  color: var(--ink);
  text-align: left;
}
.cw-fly-tool .cw-ic { flex: none; width: 22px; height: 22px; color: var(--ink-1); }
.cw-fly-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-fly-key { flex: none; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cw-fly-tool:disabled { color: var(--ink-4); cursor: default; }
.cw-fly-tool.is-active { color: var(--cool); }
.cw-fly-tool.is-active .cw-ic { color: var(--cool); }
.cw-fly-row:hover { background: var(--cw-hover); }
.cw-fly-tool:focus-visible { box-shadow: inset 0 0 0 2px var(--cool); border-radius: var(--radius-sm); }
.cw-fly-star {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  opacity: 0;
}
.cw-fly-row:hover .cw-fly-star,
.cw-fly-star:focus-visible,
.cw-fly-star.is-on { opacity: 1; }
.cw-fly-star.is-on { color: var(--series-6); }
.cw-fly-star:hover { color: var(--ink); }
@media (hover: none) {
  .cw-fly-star { opacity: 0.6; }
}

/* The favourite tools' floating bar over the chart, dragged by its grip:
   at first low in the middle, clear of the legend. */
.cw-favbar {
  position: absolute;
  z-index: 6;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 2px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
}
.cw-favbar[hidden] { display: none; }
.cw-favbar-grip {
  align-self: stretch;
  width: 10px;
  margin-right: 2px;
  border-radius: var(--radius-sm);
  background-image: radial-gradient(circle, var(--ink-3) 1px, transparent 1.4px);
  background-size: 4px 4px;
  background-position: center;
  cursor: grab;
  touch-action: none;
}
.cw-favbar-grip:active { cursor: grabbing; }
.cw-favbar-tools { display: flex; gap: 2px; }
.cw-favbar-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--ink-1);
}
.cw-favbar-btn[hidden] { display: none; }
.cw-favbar-btn:hover:not(:disabled) { background: var(--cw-hover); color: var(--ink); }
.cw-favbar-btn:disabled { opacity: 0.45; cursor: default; }
.cw-favbar-btn.is-active { background: var(--cw-pressed); color: var(--cool); }

/* The Icon tool's emoji and symbols (drawings/glyphs.js). */
.cw-menu-glyphs { width: 300px; padding: 4px 0 8px; }
.cw-glyph-title {
  margin: 0;
  padding: 8px 12px 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.cw-glyph-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 0 8px; }
.cw-menu-item.cw-glyph {
  justify-content: center;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
}
.cw-menu-item.cw-glyph.is-checked { background: var(--cool-soft); box-shadow: inset 0 0 0 1px var(--cool); }
.cw-menu.is-sheet .cw-glyph-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 0 16px; }
.cw-menu.is-sheet .cw-menu-item.cw-glyph { min-height: 44px; font-size: 22px; }

/* ---------- chart ---------- */
.cw-chart { grid-area: chart; position: relative; overflow: hidden; }
/* The charts in the chart area (workspace.js views): one, or a grid of up to
   four (data-grid), a seam between them. Each is a positioned box its legend,
   status, drawings and alert lines sit in. */
.cw-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--cw-seam);
  background: var(--cw-bg-seam);
}
.cw-grid[data-grid="2v"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-grid[data-grid="2h"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cw-grid[data-grid="3"],
.cw-grid[data-grid="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
/* Three charts: the first large on the left, two stacked on the right */
.cw-grid[data-grid="3"] > .cw-cell:first-child { grid-row: 1 / span 2; }
/* Behind each chart's clear canvases: TradingView's dark pane, a vertical
   gradient (one colour in the light theme). */
.cw-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--cw-chart-top), var(--cw-chart-bottom)), var(--cw-bg-pane);
}
.cw-cell:focus { outline: none; }
/* The active chart of several: a ring inside its edge, over the chart */
.cw-grid:not([data-cells="1"]) > .cw-cell.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 1px solid var(--cool);
  pointer-events: none;
}
.cw-grid:not([data-cells="1"]) > .cw-cell.is-active:focus-visible::after { border-width: 2px; }
.cw-grid > .cw-cell[hidden] { display: none; }
/* Maximize one chart (and back): at the top of its price scale, on hover,
   while the grid has more than one chart; always with one maximized */
.cw-cell-max {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: 4px;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--cw-bg-pane);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.cw-grid:not([data-cells="1"]) .cw-cell-max,
.cw-grid[data-max] .cw-cell-max { display: grid; }
.cw-grid .cw-cell:hover .cw-cell-max,
.cw-grid[data-max] .cw-cell-max,
.cw-cell-max:focus-visible { opacity: 1; }
.cw-cell-max:hover { background: var(--cw-hover); color: var(--ink); }
@media (hover: none) {
  .cw-grid .cw-cell-max { opacity: 1; }
}
/* A half-width chart: the selected drawing's bar sits over the foot of the
   chart, clear of the legend, and wraps inside it (as on a phone) */
.cw-grid:is([data-grid="2v"], [data-grid="3"], [data-grid="4"]) .cw-dw-bar { top: auto; bottom: 36px; flex-wrap: wrap; max-width: calc(100% - 84px); }
.cw-cell-canvas { position: absolute; inset: 0; touch-action: none; }
/* » Scroll to the most recent bar (chart-cell.js): TradingView's round
   button in the corner of the price and time scales, placed from them in
   JS, while the latest bar is out of view */
.cw-latest {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cw-hover);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: pointer;
}
.cw-latest[hidden] { display: none; }
.cw-latest:hover { background: var(--cw-pressed); }
.cw-latest:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
@media (pointer: coarse) {
  .cw-latest::before { content: ''; position: absolute; inset: -8px; }
}

.cw-legend {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 10px;
  right: 72px;
  pointer-events: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 20px;
}
.cw-lg-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.cw-lg-title { display: inline-flex; align-items: baseline; gap: 5px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cw-lg-sym { font-weight: 700; }
/* The company's name in the ticker's place once it is known (a phone keeps
   the ticker: below). */
.cw-lg-name { display: none; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cw-legend.has-name .cw-lg-name { display: inline; }
.cw-legend.has-name .cw-lg-sym { display: none; }
.cw-lg-sep { color: var(--ink-3); }
.cw-legend.no-exch .cw-lg-exch-sep { display: none; }
.cw-lg-dot { align-self: center; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: transparent; }
.cw-lg-dot.is-open { background: var(--up); }
.cw-lg-dot.is-closed { background: var(--series-6); }
.cw-lg-dot.is-stale { background: var(--ink-3); }
/* A phone's legend only (below): the bar the crosshair reads, and the one
   line (last price, the day's change, the quote's time) with it off. */
.cw-lg-when-sep,
.cw-lg-when,
.cw-lg-quick { display: none; }
/* The figures in the chart's own font, as TradingView writes them, each in
   the bar's colour (its label in ink): O44.50 H45.38 L43.43 C43.61. */
.cw-lg-values { display: inline-flex; flex-wrap: wrap; column-gap: 9px; font-size: 13px; }
.cw-lg-pair { white-space: nowrap; }
.cw-lg-k { margin-right: 3px; color: var(--ink-1); font-size: 13px; }
.cw-lg-v { color: var(--up); font-variant-numeric: tabular-nums; }
.cw-lg-values.is-down .cw-lg-v { color: var(--down); }
.cw-lg-values .cw-lg-chg { color: var(--up); }
.cw-lg-values .cw-lg-chg.is-down { color: var(--down); }
.cw-lg-values.is-empty .cw-lg-v { color: var(--ink-2); }
/* The volume's row: "Vol 39.00M" in the bar's colour. It takes the pointer
   (its buttons, a double-click), so it is only as wide as what it shows, as
   a study's row is: the rest of its line is the chart's. */
.cw-lg-volrow { width: fit-content; font-size: 13px; pointer-events: auto; cursor: default; border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; }
.cw-lg-volrow[hidden] { display: none; }
.cw-lg-volrow .cw-lg-v { color: var(--up); }
.cw-lg-volrow.is-down .cw-lg-v { color: var(--down); }
.cw-lg-volrow.is-hidden .cw-lg-k { color: var(--ink-3); }
.cw-lg-volrow:hover,
.cw-lg-volrow:focus-within { background: var(--cw-hover); }
.cw-lg-volrow:not(:hover):not(:focus-within):not(.is-open) .cw-lg-acts {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* ⌃ / ⌄ under the rows: folds them away (the main row stays). */
.cw-lg-fold {
  display: grid;
  place-items: center;
  width: 26px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--cw-bg-pane) 80%, transparent);
  color: var(--ink-2);
  pointer-events: auto;
}
.cw-lg-fold[hidden] { display: none; }
.cw-lg-fold:hover { background: var(--cw-hover); color: var(--ink); }
.cw-legend.is-folded .cw-lg-volrow,
.cw-legend.is-folded .cw-lg-cmps,
.cw-legend.is-folded .cw-lg-studies { display: none; }
.cw-lg-study { font-size: 13px; }
/* Why a study draws nothing here ("No volume", "Intraday only"). */
.cw-lg-study .cw-lg-v.cw-lg-note { color: var(--ink-3); font-family: var(--font-sans); font-style: italic; }
/* Studies (and the volume figure) take a double-click for their settings;
   the rest of the legend lets the pointer through to the chart. */
.cw-lg-studies { display: flex; flex-direction: column; align-items: flex-start; }
.cw-lg-study { pointer-events: auto; cursor: default; }
.cw-lg-study { border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; }
.cw-lg-study:hover { background: var(--cw-hover); }
/* A pane study's row sits at the top of its own pane (legend.js placePanes). */
.cw-lg-panes .cw-lg-study { position: absolute; left: 0; white-space: nowrap; }
.cw-lg-panes .cw-lg-study[hidden] { display: none; }
/* A study row: its label, its values, then hide / settings / remove. The
   buttons show while the row is hovered or has focus (or, on a touch
   screen, after a tap); out of sight they stay in reach of Tab. */
.cw-lg-vals { display: inline-flex; flex-wrap: wrap; column-gap: 10px; }
.cw-lg-vals:empty { display: none; }
.cw-lg-study:focus-within { background: var(--cw-hover); }
.cw-lg-acts { display: inline-flex; align-self: center; gap: 1px; }
.cw-lg-act {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}
.cw-lg-act:hover { background: var(--cw-pressed); color: var(--ink); }
.cw-lg-act:focus-visible { outline: 2px solid var(--cool); outline-offset: -2px; }
.cw-lg-study:not(:hover):not(:focus-within):not(.is-open) .cw-lg-acts {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cw-lg-study.is-hidden .cw-lg-k { color: var(--ink-3); }
/* A compare symbol's row (legend.js fillCompares): its symbol and change in
   its line's colour (set inline from the theme's series colours), and a
   remove button that shows as a study row's do. */
.cw-lg-cmps { display: flex; flex-direction: column; align-items: flex-start; }
.cw-lg-cmp { font-size: 13px; pointer-events: auto; cursor: default; border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; }
.cw-lg-cmp .cw-lg-k { font-weight: 600; }
.cw-lg-cmp .cw-lg-v.cw-lg-note { color: var(--ink-3); font-family: var(--font-sans); font-style: italic; }
.cw-lg-cmp:hover,
.cw-lg-cmp:focus-within { background: var(--cw-hover); }
.cw-lg-cmp:not(:hover):not(:focus-within):not(.is-open) .cw-lg-acts {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cw-cell-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  pointer-events: none;
  text-align: center;
}
.cw-cell-status[hidden] { display: none; }
.cw-cell-status[data-kind="error"] { pointer-events: auto; background: var(--cw-bg-pane); }
.cw-cell-status-text { margin: 0; max-width: 36ch; color: var(--ink-2); font-size: var(--fs-body); }
.cw-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--rule);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: cw-spin 0.8s linear infinite;
}
@keyframes cw-spin { to { transform: rotate(360deg); } }

/* ---------- right panel ---------- */
.cw-panel {
  grid-area: panel;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cw-bg-seam);
}
.cw-splitter {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--cw-seam) - 2px);
  width: calc(var(--cw-seam) + 4px);
  cursor: col-resize;
  touch-action: none;
}
.cw-splitter:hover,
.cw-splitter:focus-visible,
.is-resizing .cw-splitter { background: var(--cool-soft); box-shadow: none; }
.cw-psec {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cw-bg-pane);
}
.cw-psec-watch { flex: 0 0 calc((100% - var(--cw-seam)) * var(--cw-split)); }
.cw-psec-details { flex: 1 1 0; }
.cw-hsplit { flex: 0 0 var(--cw-seam); cursor: row-resize; touch-action: none; }
.cw-hsplit:hover,
.cw-hsplit:focus-visible { background: var(--cool-soft); box-shadow: none; }
.cw-app[data-view="details"] .cw-psec-watch,
.cw-app[data-view="details"] .cw-hsplit { display: none; }
/* The Alerts view has the panel to itself. */
.cw-psec-alerts { display: none; flex: 1 1 0; }
.cw-app[data-view="alerts"] .cw-psec-watch,
.cw-app[data-view="alerts"] .cw-hsplit,
.cw-app[data-view="alerts"] .cw-psec-details { display: none; }
.cw-app[data-view="alerts"] .cw-psec-alerts { display: flex; }
.cw-psec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--cw-psec-head-h);
  padding: 0 6px 0 12px;
}
.cw-psec-title { font-size: 14px; font-weight: 600; }
.cw-psec-tools { display: flex; gap: 2px; }
.cw-psec-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* A phone's sheet head (shell.js: its grab bar and tabs), and the chip that
   says a drawing tool is in hand (a wider window has the rail for that) */
.cw-psheet-head,
.cw-dw-mode { display: none; }
.cw-scrim { position: fixed; z-index: 90; inset: 0; background: oklch(0 0 0 / 0.32); }
.cw-scrim[hidden] { display: none; }

/* ---------- range bar ---------- */
.cw-bottom {
  grid-area: bottom;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  overflow: hidden;
}
.cw-rb-ranges {
  display: flex;
  flex: 0 1 auto;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cw-rb-ranges::-webkit-scrollbar { display: none; }
.cw-rb-btn,
.cw-rb-toggle { height: 28px; min-width: 30px; padding: 0 6px; font-size: 13px; }
.cw-rb-spacer { flex: 1 1 auto; min-width: 8px; }
.cw-rb-asof {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cw-rb-asof.is-stale { color: var(--series-6); }
.cw-rb-scale { display: flex; flex: none; gap: 1px; }
/* Go to date's popover: a date field and its button on one line. */
.cw-rb-goto { flex: none; height: 28px; min-width: 30px; padding: 0 5px; color: var(--ink-2); }
.cw-rb-gotoform { display: flex; gap: 8px; align-items: center; }
.cw-rb-date {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  color-scheme: light dark;
}
.cw-rb-date:focus { outline: none; border-color: var(--cool); box-shadow: var(--ring); }
.cw-rb-go { height: 36px; }
/* The exchange's clock: "16:02:41 UTC-4". */
.cw-rb-clock { flex: none; padding: 0 6px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-rb-clock[hidden] { display: none; }
.cw-rb-toggle.is-active { background: transparent; color: var(--cool); font-weight: 600; }
.cw-rb-toggle.is-active:hover { background: var(--cw-hover); color: var(--cool); }

/* ---------- menus and popovers ---------- */
.cw-menu {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 6px 0;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  font-size: 13.5px;
}
.cw-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.cw-menu-item:hover,
.cw-menu-item:focus-visible { background: var(--cw-hover); box-shadow: none; }
.cw-menu-item[aria-disabled="true"] { color: var(--ink-4); cursor: default; }
.cw-menu-item[aria-disabled="true"]:hover { background: transparent; }
.cw-menu-item .cw-ic { color: var(--ink-2); }
.cw-menu-item.is-checked { font-weight: 600; }
.cw-menu-label { flex: 1 1 auto; }
.cw-menu-hint { color: var(--ink-3); font-size: 11.5px; }
kbd.cw-menu-hint {
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
/* A switch in a menu (Layout ▾ › Autosave) */
.cw-menu-item.is-switch.is-checked { font-weight: inherit; }
.cw-menu-switch {
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background var(--dur-fast);
}
.cw-menu-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--ink-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cw-menu-item.is-checked .cw-menu-switch { background: var(--cool); box-shadow: none; }
.cw-menu-item.is-checked .cw-menu-switch::after { background: var(--card); transform: translateX(12px); }
.cw-menu-mark { display: inline-flex; width: 16px; }
.cw-menu-mark .cw-ic { color: var(--cool); }
.cw-menu-head {
  padding: 8px 12px 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.cw-menu-sep { height: 1px; margin: 6px 0; background: var(--rule-soft); }
.cw-menu-note { margin: 4px 12px 6px; color: var(--ink-2); font-size: 11.5px; line-height: 1.45; }
.cw-menu-cells { width: 260px; }
.cw-menu-settings { width: 280px; }
.cw-menu-layout { width: 280px; }
/* Its first line is the layout's own name, written as it was typed (after
   the grab bar where the menu is a phone's bottom sheet: menu.js) */
.cw-menu-layout > .cw-menu-head:first-child,
.cw-menu-layout > .cw-sheet-grab:first-child + .cw-menu-head { color: var(--ink-1); font-size: 13px; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.cw-menu-layout .cw-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-menu-wl { width: 240px; }

/* A row (or a grid) of chips in a menu (menu.js): the phone's chart types
   as seven icons, the intervals four to a row, the price scale's switches. */
.cw-menu-chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 4px 12px 8px;
}
.cw-menu-chips.has-cols {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--cw-chip-cols, 4), minmax(0, 1fr));
}
.cw-menu-chip {
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cw-menu-chip .cw-menu-label { flex: none; }
.cw-menu-chip .cw-ic { color: var(--ink-1); }
.cw-menu-chip.is-checked { border-color: var(--cool); background: var(--cool-soft); color: var(--ink); font-weight: 600; }
.cw-menu-chip.is-checked .cw-ic { color: var(--cool); }
.cw-menu-chip[aria-disabled="true"] { border-style: dashed; }
.cw-menu-chips.is-icons .cw-menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Tiles: an icon over its name (the phone's Draw sheet) */
.cw-menu-chips.is-tiles .cw-menu-chip {
  flex-direction: column;
  gap: 5px;
  min-height: 68px;
  padding: 8px 4px 6px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}
.cw-menu-chips.is-tiles .cw-menu-chip .cw-ic { width: 22px; height: 22px; }
.cw-menu.is-sheet .cw-menu-chips.is-tiles .cw-menu-chip { min-height: 68px; font-size: 12.5px; }
.cw-menu-chips.is-tiles .cw-menu-chip.is-checked { color: var(--cool); }

/* A menu as a bottom sheet on a phone (menu.js sheet): the width of the
   screen (520px at most, a phone on its side), a scrim, a grab bar, rows
   a finger can take. */
.cw-menu-scrim {
  position: fixed;
  z-index: var(--z-menu);
  inset: 0;
  background: oklch(0 0 0 / 0.36);
  animation: cw-fade-in var(--dur-slow) var(--ease-out);
}
/* It sits on an on-screen keyboard (phone.js --cw-kb), never under it. */
.cw-menu.is-sheet {
  top: auto;
  right: 0;
  bottom: var(--cw-kb, 0px);
  left: 0;
  width: auto;
  min-width: 0;
  max-width: 520px;
  max-height: calc(var(--cw-vvh, 100dvh) - env(safe-area-inset-top) - 24px);
  margin: 0 auto;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  border-width: 1px 1px 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-size: 15px;
  animation: cw-sheet-in var(--dur-slow) var(--ease-out);
}
.cw-kb-open .cw-menu.is-sheet { padding-bottom: 8px; }
.cw-menu.is-sheet .cw-menu-item:not(.cw-menu-chip) { min-height: 44px; gap: 14px; padding: 0 16px; }
.cw-menu.is-sheet .cw-menu-head { padding: 12px 16px 6px; }
.cw-menu.is-sheet .cw-menu-note { margin: 4px 16px 8px; font-size: 12px; }
.cw-menu.is-sheet .cw-menu-chips { padding: 2px 16px 8px; }
.cw-menu.is-sheet .cw-menu-chip { min-height: 44px; font-size: 14px; }
.cw-sheet-grab {
  position: sticky;
  z-index: 1;
  top: 0;
  display: grid;
  place-items: center;
  height: 24px;
  background: var(--card);
  cursor: grab;
  touch-action: none;
}
.cw-sheet-grab::before {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--rule);
}
@keyframes cw-sheet-in { from { transform: translateY(100%); } }
@keyframes cw-fade-in { from { opacity: 0; } }

/* The phone's Draw sheet (app/draw-sheet.js): the tool groups as a row of
   tabs that scrolls sideways (kept in sight under the grab bar while the
   sheet scrolls), a group's tools as tiles under its sections' names, a star
   on a favourite, then the drawing switches. */
.cw-menu-draw:not(.is-sheet) { width: 320px; }
.cw-draw-tabs {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  gap: 6px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--card);
}
.cw-menu.is-sheet .cw-draw-tabs { top: 24px; padding: 4px 16px 10px; }
.cw-draw-tabs::-webkit-scrollbar { display: none; }
.cw-draw-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.cw-draw-tab .cw-ic { color: var(--ink-3); }
.cw-draw-tab:hover { background: var(--cw-hover); color: var(--ink); }
.cw-draw-tab.is-on { border-color: var(--cool); background: var(--cool-soft); color: var(--ink); font-weight: 600; }
.cw-draw-tab.is-on .cw-ic { color: var(--cool); }
.cw-draw-tab:focus-visible { outline: 2px solid var(--cool); outline-offset: -2px; }
.cw-draw-head {
  margin: 0;
  padding: 6px 16px 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.cw-draw-panel { padding-top: 2px; }
.cw-menu-draw .cw-menu-chips.is-tiles .cw-menu-chip { position: relative; }
/* A favourite's star, in the tile's corner */
.cw-draw-fav { position: absolute; top: 4px; right: 4px; display: flex; }
.cw-menu-chip .cw-draw-fav .cw-ic { color: var(--series-6); }
/* The Icon tool's emoji and symbols: as many to a row as keep a finger's
   width each */
.cw-menu.cw-menu-draw .cw-glyph-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 2px; padding: 0 16px 6px; }
.cw-menu.cw-menu-draw .cw-menu-item.cw-glyph { min-height: 44px; padding: 0; font-size: 22px; }
.cw-draw-rows { padding-top: 2px; }

/* ---------- watchlist ---------- */
.cw-psec-body[data-mount="watchlist"] { display: flex; flex-direction: column; overflow: hidden; }
.cw-wl { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.cw-wl-cols,
.cw-wl-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.85fr);
  column-gap: 6px;
  align-items: center;
  padding: 0 12px;
}
.cw-wl-cols {
  flex: none;
  height: 26px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: 12px;
  text-align: right;
}
.cw-wl-cols[hidden],
.cw-wl-list[hidden] { display: none; }
.cw-wl-col-sym { text-align: left; }
.cw-wl-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 6px;
  outline: none;
  overscroll-behavior: contain;
}
.cw-wl-sec-head {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 26px;
  padding: 0 12px 0 8px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: left;
}
.cw-wl-sec-head:hover { color: var(--ink-1); }
.cw-wl-sec-head .cw-ic { transform: rotate(90deg); transition: transform var(--dur-fast); }
.cw-wl-sec.is-collapsed .cw-wl-sec-head .cw-ic { transform: none; }
.cw-wl-sec-count { margin-left: auto; font-weight: 500; letter-spacing: 0; }
.cw-wl-row {
  position: relative;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.cw-wl-row:hover { background: var(--cw-hover); }
.cw-wl-row.is-active { background: var(--cw-hover); }
.cw-wl-row.is-selected { background: var(--cool-soft); }
/* Keyboard focus shows on the selected row, not as a ring round the list. */
.cw-wl-list:focus-visible { box-shadow: none; }
.cw-wl-list:focus-visible .cw-wl-row.is-selected { box-shadow: inset 0 0 0 1px var(--cool); }
.cw-wl-row[data-flag]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
/* The sidebar's flag palette (watchlist-sidebar.css), so a flag reads the same on both. */
.cw-wl-row[data-flag="red"]::before    { background: #ef4444; }
.cw-wl-row[data-flag="orange"]::before { background: #f59e0b; }
.cw-wl-row[data-flag="yellow"]::before { background: #eab308; }
.cw-wl-row[data-flag="green"]::before  { background: #10b981; }
.cw-wl-row[data-flag="blue"]::before   { background: #3b82f6; }
.cw-wl-row[data-flag="purple"]::before { background: #8b5cf6; }
.cw-wl-symcell { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* The symbol's line (its dot and bell); a phone adds the name under it and
   a Remove a finger swipes into view */
.cw-wl-symline { display: contents; }
.cw-wl-name,
.cw-wl-swipe-del { display: none; }
.cw-wl-sym { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cw-wl-dot,
.cw-dt-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.cw-wl-dot.is-open,
.cw-dt-dot.is-open { background: var(--up); }
.cw-wl-dot.is-closed,
.cw-dt-dot.is-closed { background: var(--series-6); }
.cw-wl-dot.is-stale,
.cw-dt-dot.is-stale { background: var(--ink-3); }
.cw-wl-num {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}
.cw-wl-chg,
.cw-wl-pct { color: var(--ink-2); }
.cw-wl-num.is-up { color: var(--up); }
.cw-wl-num.is-down { color: var(--down); }
.cw-wl-del {
  position: absolute;
  top: 3px;
  right: 6px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--cw-bg-pane);
  color: var(--ink-2);
}
.cw-wl-del:hover { background: var(--cw-pressed); color: var(--down); }
.cw-wl-row:hover .cw-wl-del:not([hidden]) { display: grid; }
@media (hover: none) {
  .cw-wl-row { height: 36px; }
  .cw-wl-row.is-selected .cw-wl-del:not([hidden]) { display: grid; top: 7px; }
}
/* The symbol's active price alerts: opens the Alerts panel. */
.cw-wl-bell {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--cool);
}
.cw-wl-bell[hidden] { display: none; }
.cw-wl-bell:hover { background: var(--cw-pressed); }

/* The list switcher: the watchlist's title once the desk's lists answer. */
.cw-psec-title:has(.cw-wl-switch) { min-width: 0; margin-left: -6px; }
.cw-wl-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-md);
  color: var(--ink);
  font: inherit;
}
.cw-wl-switch:hover,
.cw-wl-switch[aria-expanded="true"] { background: var(--cw-hover); }
.cw-wl-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-wl-switch-role {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--cw-hover);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
}
.cw-wl-switch-role[hidden] { display: none; }
.cw-wl-switch .cw-ic { flex: none; color: var(--ink-3); transform: rotate(90deg); }
.cw-menu-lists { width: 260px; }
/* A shared list's standing: read-only, who last edited it, a stale copy. */
.cw-wl-meta {
  flex: none;
  padding: 0 12px 6px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}
.cw-wl-meta[hidden] { display: none; }
.cw-wl-meta p { margin: 0; overflow-wrap: anywhere; }
.cw-wl-meta p[hidden] { display: none; }
.cw-wl-ro { color: var(--ink-2); }
.cw-wl-stale { color: var(--down); }
.cw-wl-loading { flex: none; margin: 0; padding: 20px 12px; color: var(--ink-2); text-align: center; }
.cw-wl-loading[hidden] { display: none; }
.cw-wl-empty-add[hidden] { display: none; }
.cw-wl-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--ink-2);
  text-align: center;
}
.cw-wl-empty[hidden] { display: none; }
.cw-wl-empty p { margin: 0; }
.cw-wl-empty-sub { color: var(--ink-3); font-size: 12px; }
.cw-wl-empty-add { height: 32px; margin-top: 8px; padding: 0 12px; font-size: 13px; }
.cw-wl-msg {
  flex: none;
  margin: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-1);
  font-size: 12px;
}
.cw-wl-msg[hidden] { display: none; }

/* ---------- category drag (personal watchlist only, watchlist-groups.js) ----------
   Resting state is untouched: a grab cursor only on hover, and .is-dragging /
   .cw-wl-drop only exist while a press has crossed DRAG_THRESHOLD
   (watchlist.js), so the panel looks exactly as it did before this shipped
   until it is actually used. Scoped to .cw-wl-draggable, set only for the
   personal list, so a desk list's rows (which cannot be reordered) never
   show a cursor promising otherwise. */
.cw-wl-draggable .cw-wl-row:hover,
.cw-wl-draggable .cw-wl-sec-head:hover { cursor: grab; }
.cw-wl-row.is-dragging { opacity: 0.4; }
.cw-wl-sec.is-dragging { opacity: 0.5; }
.cw-wl-drop {
  height: 2px;
  margin: -1px 12px;
  border-radius: 1px;
  background: var(--cool);
  pointer-events: none;
}
.cw-wl-drop-sec { margin: -1px 0; }

/* ---------- alerts panel ---------- */
.cw-psec-body[data-mount="alerts"] { display: flex; flex-direction: column; overflow: hidden; }
.cw-al { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; font-size: 13px; }
.cw-al-tabs {
  display: flex;
  flex: none;
  gap: 16px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.cw-al-tab {
  height: 32px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.cw-al-tab:hover { color: var(--ink); }
.cw-al-tab.is-active { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.cw-al-pane { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.cw-al-pane[hidden] { display: none; }
.cw-al-meter {
  display: grid;
  flex: none;
  grid-template-columns: 1fr auto;
  row-gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-size: 12px;
}
.cw-al-meter-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-al-meter-bar {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rule-soft);
}
.cw-al-meter-fill { display: block; width: 0; height: 100%; background: var(--cool); }
.cw-al-meter.is-full .cw-al-meter-fill { background: var(--down); }
.cw-al-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cw-al-row {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.cw-al-row:hover { background: var(--cw-hover); }
.cw-al-row.is-flash { background: var(--cool-soft); }
.cw-al-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.cw-al-sym { overflow: hidden; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.cw-al-state { flex: none; color: var(--ink-2); font-size: 12px; }
.cw-al-state.is-active { color: var(--up); }
.cw-al-state.is-triggered { color: var(--series-6); }
.cw-al-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 12px; }
.cw-al-target { font-variant-numeric: tabular-nums; }
.cw-al-when { flex: none; color: var(--ink-3); font-size: 11.5px; }
.cw-al-row[data-state="stopped"] .cw-al-target,
.cw-al-row[data-state="triggered"] .cw-al-target { color: var(--ink-3); }
.cw-al-acts {
  position: absolute;
  top: 6px;
  right: 8px;
  display: none;
  gap: 2px;
  padding-left: 8px;
  background: var(--cw-hover);
}
.cw-al-row:hover .cw-al-acts,
.cw-al-row:focus-within .cw-al-acts { display: flex; }
.cw-al-act { min-width: 26px; height: 26px; padding: 0 4px; color: var(--ink-2); }
.cw-al-del:hover:not(:disabled) { color: var(--down); }
.cw-al-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--cool);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.cw-al-input[aria-invalid="true"] { border-color: var(--down); }
@media (hover: none) {
  .cw-al-acts { position: static; display: flex; justify-content: flex-end; padding: 0; background: none; }
}
.cw-al-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; color: var(--ink-2); text-align: center; }
.cw-al-empty p { margin: 0; }
.cw-al-empty-sub { color: var(--ink-3); font-size: 12px; }
.cw-al-msg,
.cw-al-note { flex: none; margin: 0; padding: 8px 12px; border-top: 1px solid var(--rule-soft); font-size: 12px; }
.cw-al-msg { color: var(--ink-1); }
.cw-al-msg[hidden] { display: none; }
.cw-al-note { color: var(--ink-3); line-height: 1.45; }

/* The point the price-scale menus open from (placed by alert-lines.js). */
.cw-al-anchor { position: fixed; width: 21px; height: 21px; pointer-events: none; }
/* The point a right-click menu hangs from (chart-menu.js) */
.cw-ctx-anchor { position: fixed; width: 0; height: 0; pointer-events: none; }
.cw-menu-ctx { min-width: 260px; }
.cw-menu-al { min-width: 220px; }

/* The toolbar's alert form */
.cw-menu-ab { width: 260px; padding: 12px; }
.cw-ab { display: grid; gap: 8px; }
.cw-ab-title { margin: 0; color: var(--ink-2); font-size: 12px; }
.cw-ab-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cool);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.cw-ab-hint { min-height: 1.4em; margin: 0; color: var(--ink-2); font-size: 12px; }
.cw-ab.is-error .cw-ab-input { border-color: var(--down); }
.cw-ab.is-error .cw-ab-hint { color: var(--down); }
.cw-ab-add { width: 100%; height: 34px; }
.cw-ab-note { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
/* On a phone, a bottom sheet (menu.js): the form the sheet's width */
.cw-menu-ab.is-sheet { width: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.cw-kb-open .cw-menu-ab.is-sheet { padding-bottom: 12px; }
.cw-menu-ab.is-sheet .cw-ab { gap: 10px; }
.cw-menu-ab.is-sheet .cw-ab-title { color: var(--ink); font-size: 15px; font-weight: 600; }
.cw-menu-ab.is-sheet .cw-ab-hint { font-size: 13px; }
.cw-menu-ab.is-sheet .cw-ab-note { font-size: 12px; }

/* A short status line over the bottom of the chart */
.cw-toast {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 40px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-floating);
  color: var(--ink);
  font-size: 12.5px;
  pointer-events: none;                /* text only: the chart under it stays usable */
}
.cw-toast[hidden] { display: none; }
/* A toast with an action (Undo) takes the pointer, for its button */
.cw-toast[data-action] { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 12px; pointer-events: auto; }
.cw-toast[data-action][hidden] { display: none; }
.cw-toast-action {
  flex: none;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--cool);
  font-size: 12.5px;
  font-weight: 600;
}
.cw-toast-action:hover { background: var(--cw-hover); }

/* A dividend, split or earnings marker's hover text (app/markers.js), beside
   the pointer over the chart */
.cw-ev-tip {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 8px);
  padding: 5px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-floating);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.cw-ev-tip[hidden] { display: none; }
.cw-ev-tip-line { overflow: hidden; text-overflow: ellipsis; }

/* ---------- drawings (src/chart/drawings/engine.js, toolbar.js) ---------- */
/* The selected drawing's floating bar: top right of the pane, clear of the scale */
.cw-dw-bar {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 76px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-floating);
}
.cw-dw-bar[hidden] { display: none; }
.cw-dw-bar-label {
  padding: 0 8px 0 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cw-dw-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-1);
  cursor: pointer;
}
.cw-dw-btn:hover:not(:disabled) { background: var(--cw-hover); color: var(--ink); }
.cw-dw-btn:disabled { opacity: 0.45; cursor: default; }
.cw-dw-btn[aria-pressed="true"] { color: var(--chart-threshold, var(--series-6)); }
.cw-dw-btn:focus-visible { outline: 2px solid var(--cool); outline-offset: -2px; }
.cw-dw-btn[hidden] { display: none; }
.cw-dw-bar .cw-dw-btn[aria-label="Unlock"] { color: var(--cool); }
.cw-dw-sep { flex: none; width: 1px; height: 20px; margin: 0 3px; background: var(--rule); }
/* Colour buttons: the pen (or the fill box) over a bar in the current colour */
.cw-dw-color { position: relative; }
.cw-dw-color .cw-ic { margin-top: -4px; }
.cw-dw-swatch {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 5px;
  height: 3px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 12%, transparent);
}
/* Width: a line as thick as the drawing's, and its size */
.cw-dw-width { display: inline-flex; gap: 5px; width: auto; padding: 0 7px; }
.cw-dw-wline { width: 14px; min-height: 1px; border-radius: 1px; background: currentColor; }
.cw-dw-wtext { font-size: 12px; font-variant-numeric: tabular-nums; }
/* A pitchfork's kind (its name and a chevron), an icon's emoji */
.cw-dw-variant { display: inline-flex; gap: 4px; width: auto; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.cw-dw-variant .cw-ic { color: var(--ink-3); }
.cw-dw-glyphbtn { font-size: 17px; line-height: 1; }
.cw-menu-dwopt { min-width: 170px; }
.cw-menu-rail { min-width: 250px; }

/* The colour popover: palette swatches, Default, and a hex field */
.cw-menu-cp { min-width: 0; width: 218px; padding: 10px 12px 12px; }
.cw-cp-title { margin: 0 0 8px; color: var(--ink-2); font-size: 12px; }
.cw-cp-grid { display: grid; grid-template-columns: repeat(5, 30px); gap: 8px 10px; }
.cw-cp-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cw-cp-swatch:hover { transform: scale(1.08); }
.cw-cp-swatch[aria-pressed="true"] { outline: 2px solid var(--cool); outline-offset: 2px; }
.cw-cp-swatch:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
/* Default: the theme's colour, split by a stroke; No fill: crossed out */
.cw-cp-default { background: linear-gradient(135deg, var(--cool) 0 50%, var(--card) 50% 100%); }
.cw-cp-none { background: linear-gradient(135deg, transparent 0 46%, var(--down) 46% 54%, transparent 54% 100%); }
.cw-cp-form { display: flex; gap: 6px; margin-top: 12px; }
.cw-cp-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  color: var(--ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  text-transform: uppercase;
}
.cw-cp-input:focus { border-color: var(--cool); outline: none; }
.cw-cp-apply { height: 30px; padding: 0 10px; }
.cw-cp-hint { margin: 6px 0 0; color: var(--down); font-size: 12px; }
.cw-cp-hint:empty { display: none; }
/* Before the drawings table exists on the API (a 501): lines stay here */
.cw-dw-banner {
  position: absolute;
  z-index: 4;
  left: 10px;
  bottom: 38px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 12px;
  pointer-events: none;
}
.cw-dw-banner[hidden] { display: none; }
.cw-menu-dw { min-width: 230px; }
/* A note's words being typed, over its place on the chart (engine.js sets
   its place, font and colour; its border and padding are in step there) */
.cw-dw-textbox {
  position: absolute;
  z-index: 5;
  box-sizing: content-box;
  min-width: 6ch;
  margin: 0;
  padding: 3px 4px;
  border: 1px dashed var(--cool);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--card) 88%, transparent);
  box-shadow: var(--shadow-floating);
  resize: none;
  overflow: auto hidden;
  scrollbar-width: none;
  white-space: pre;
  outline: none;
}
.cw-dw-textbox::placeholder { color: var(--ink-3); }
/* The Demonstration cursor's trail (drawings/demonstration.js), over the
   chart and never in the pointer's way. */
.cw-dw-demo { position: absolute; z-index: 4; pointer-events: none; }

/* ---------- symbol details ---------- */
.cw-dt { padding: 0 12px 18px; font-size: 13px; }
.cw-dt p { margin: 0; }
.cw-dt-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.cw-dt-name { font-weight: 500; }
.cw-dt-exch { color: var(--ink-2); font-size: 12px; }
.cw-dt-exch::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
.cw-dt-sector { margin-top: 2px; color: var(--ink-2); font-size: 12px; }
.cw-dt-quote { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin-top: 10px; }
.cw-dt-price { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.15; }
.cw-dt-cur { color: var(--ink-2); font-size: 12px; font-weight: 500; }
.cw-dt-chg { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cw-dt-chg.is-up { color: var(--up); }
.cw-dt-chg.is-down { color: var(--down); }
.cw-dt-status { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin-top: 4px; font-size: 12px; }
.cw-dt-sess { color: var(--ink-1); }
.cw-dt-asof { color: var(--ink-3); }
.cw-dt-asof:not(:empty)::before { content: "·"; margin-right: 6px; }
.cw-dt-ranges { display: grid; gap: 12px; margin-top: 14px; }
.cw-dt-range-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.cw-dt-range-label {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-align: center;
  text-transform: uppercase;
}
.cw-dt-track { position: relative; height: 4px; margin: 5px 0 6px; border-radius: 2px; background: var(--rule-soft); }
.cw-dt-track[hidden] { display: block; visibility: hidden; }
.cw-dt-fill { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 2px; background: var(--up); }
.cw-dt-fill.is-down { background: var(--down); }
.cw-dt-fill[hidden] { display: none; }
.cw-dt-mark {
  position: absolute;
  top: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--ink);
  transform: translateX(-50%);
}
.cw-dt-sec { margin-top: 16px; }
.cw-dt-sec[hidden] { display: none; }
.cw-dt-h { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.cw-dt-stats { margin: 0; }
.cw-dt-stat { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; }
.cw-dt-stat[hidden] { display: none; }
.cw-dt-stat dt { color: var(--ink-2); }
.cw-dt-stat dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.cw-dt-stats.is-loading dd { color: var(--ink-3); }
.cw-dt-perf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cw-dt-tile {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  background: var(--cw-hover);
}
.cw-dt-tile.is-up { background: color-mix(in oklch, var(--up) 14%, transparent); }
.cw-dt-tile.is-down { background: color-mix(in oklch, var(--down) 14%, transparent); }
.cw-dt-tile-v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-dt-tile.is-up .cw-dt-tile-v { color: var(--up); }
.cw-dt-tile.is-down .cw-dt-tile-v { color: var(--down); }
.cw-dt-tile-k { color: var(--ink-2); font-size: 11px; }
.cw-dt-news { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cw-dt-news-a {
  display: grid;
  gap: 2px;
  margin: 0 -6px;
  padding: 5px 6px;
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
}
.cw-dt-news-a:hover { background: var(--cw-hover); }
.cw-dt-news-t {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.cw-dt-news-m { color: var(--ink-3); font-size: 11px; }
.cw-dt-note { color: var(--ink-3); font-size: 12px; }
.cw-dt-note[hidden] { display: none; }
.cw-dt-profile {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-1);
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.cw-dt-profile.is-open { display: block; }
.cw-dt-more { margin-top: 2px; color: var(--cool); font-size: 12px; font-weight: 500; }
.cw-dt-more[hidden] { display: none; }
.cw-dt-profile-meta { margin-top: 6px !important; color: var(--ink-2); font-size: 12px; }
.cw-dt-profile-meta[hidden] { display: none; }
.cw-dt-profile-meta a { color: var(--cool); text-decoration: none; }
.cw-dt-research {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: var(--cool);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.cw-dt-research:hover { text-decoration: underline; }

/* ---------- dialogs (symbol search, indicators) ---------- */
.cw-dlg-scrim {
  position: fixed;
  z-index: var(--z-cmd);
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(10vh, env(safe-area-inset-top)) 16px 16px;
  background: oklch(0 0 0 / 0.36);
}
.cw-dlg {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(640px, calc(100dvh - 12vh - 16px));
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
}
.cw-dlg-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.cw-dlg-title { margin: 0; font-size: 16px; font-weight: 600; }
.cw-dlg-title:focus { outline: none; }  /* focused on a touch screen (dialog.js), not a control */
.cw-dlg-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }

.cw-search-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.cw-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  outline: none;
}
.cw-search-input:focus,
.cw-search-input:focus-visible { outline: none; box-shadow: none; }
.cw-search-field:focus-within { box-shadow: inset 0 -2px 0 var(--cool); }
.cw-search-input::placeholder { color: var(--ink-3); font-weight: 400; text-transform: none; }
.cw-search-section { flex: none; margin: 0; padding: 8px 16px 4px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cw-search-section:empty { display: none; }
.cw-search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cw-search-list:empty { display: none; }
.cw-search-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.cw-search-row:hover { background: var(--cw-hover); }
.cw-search-row.is-active { background: var(--cool-soft); }
.cw-search-sym { font-weight: 700; white-space: nowrap; }
.cw-search-name { overflow: hidden; color: var(--ink-1); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cw-search-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cw-search-type { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-2); font-size: 11px; }
.cw-search-add { min-width: 28px; height: 28px; padding: 0; color: var(--ink-2); }
.cw-search-add.is-owned { color: var(--up); }
.cw-search-status { flex: none; margin: 0; padding: 10px 16px 0; color: var(--ink-2); font-size: 12.5px; }
.cw-search-status:empty { display: none; }
.cw-search-status[data-kind="error"] { color: var(--down); }
.cw-search-status[data-kind="ok"] { color: var(--up); }
.cw-search-hints { flex: none; margin: 0; padding: 10px 16px 12px; color: var(--ink-3); font-size: 11.5px; }
.cw-search-hints kbd,
.cw-int kbd {
  display: inline-block;
  min-width: 18px;
  margin: 0 2px;
  padding: 0 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
}

/* ---------- indicators: the ƒx picker (indicators.js) ---------- */
.cw-ind { width: min(560px, 100%); }
/* When the list at its least, the chart's own rows and the note are still
   taller than the dialog (a phone with five studies or more, a short
   window), the body scrolls instead of the dialog clipping the bottom. */
.cw-ind .cw-dlg-body { overflow-y: auto; overscroll-behavior: contain; }
.cw-ind-top { display: flex; flex: none; flex-direction: column; gap: 10px; padding: 12px 16px 10px; }
.cw-ind-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink-2);
}
.cw-ind-field:focus-within { border-color: var(--cool); box-shadow: var(--ring); }
.cw-ind-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
.cw-ind-search:focus,
.cw-ind-search:focus-visible { outline: none; box-shadow: none; }
.cw-ind-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-ind-cat {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-1);
  font-size: 12.5px;
  white-space: nowrap;
}
.cw-ind-cat:hover { background: var(--cw-hover); color: var(--ink); }
.cw-ind-cat[aria-pressed="true"] { border-color: var(--cool); background: var(--cool-soft); color: var(--ink); }
.cw-ind-cat:focus-visible { outline: 2px solid var(--cool); outline-offset: 1px; }
/* The list scrolls on its own; the arrow keys move the highlight in it. */
.cw-ind-pick {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: min(180px, 24vh);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cw-ind-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 6px; }
.cw-ind-list:empty { display: none; }
.cw-ind-list:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cool-soft); }
.cw-ind-group-k { padding: 8px 16px 4px; color: var(--ink-3); font-size: 11.5px; }
.cw-ind-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}
.cw-ind-add:hover { background: var(--cw-hover); }
.cw-ind-add.is-active { background: var(--cool-soft); }
.cw-ind-add[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.cw-ind-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-ind-opt-where { flex: none; color: var(--ink-3); font-size: 11.5px; }
.cw-ind-none { margin: 0; padding: 14px 16px; color: var(--ink-3); font-size: 12.5px; }
.cw-ind-none[hidden] { display: none; }
.cw-ind-status { flex: none; margin: 0; padding: 8px 16px 0; color: var(--ink-2); font-size: 12.5px; }
.cw-ind-status:empty { display: none; }
.cw-ind-status[data-kind="error"] { color: var(--down); }
.cw-ind-status[data-kind="ok"] { color: var(--up); }
/* The chart's own studies, under the list. They keep their room (their rows
   scroll past min(220px, 26vh)); the list above gives way instead, so a long
   list of offered studies never pushes a row under the note. */
.cw-ind-on { display: flex; flex: none; flex-direction: column; }
.cw-ind-on-head { display: flex; flex: none; align-items: baseline; justify-content: space-between; padding: 10px 16px 2px 18px; }
.cw-ind-on-k { margin: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.cw-ind-count { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cw-ind-rows { display: flex; flex: 0 1 auto; flex-direction: column; max-height: min(220px, 26vh); min-height: 44px; overflow-y: auto; }
.cw-ind-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 10px;
  min-height: 44px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.cw-ind-name { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font-size: 13.5px; cursor: pointer; }
.cw-ind-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-ind-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.cw-ind-check { flex: none; width: 16px; height: 16px; accent-color: var(--cool); }
.cw-ind-ctl { display: flex; flex: none; align-items: center; gap: 2px; }
.cw-ind-color {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  cursor: pointer;
}
.cw-ind-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 16px 14px 18px; }
.cw-ind-note { flex: 1 1 auto; margin: 0; color: var(--ink-3); font-size: 12px; }
.cw-ind-all { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }

/* ---------- a study's settings (study-settings.js) ---------- */
.cw-set { width: min(420px, 100%); }
.cw-set-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.cw-set-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 18px 10px; }
.cw-set-sec { padding: 10px 0 4px; }
.cw-set-sec + .cw-set-sec { border-top: 1px solid var(--rule-soft); }
.cw-set-sec-k { margin: 0 0 4px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.cw-set-field { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; column-gap: 12px; min-height: 40px; }
.cw-set-field.is-check { grid-template-columns: minmax(0, 1fr) auto; }
.cw-set-k { color: var(--ink-1); font-size: 13px; }
.cw-set-num,
.cw-set-sel {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cw-set-num:focus,
.cw-set-sel:focus { border-color: var(--cool); box-shadow: var(--ring); outline: none; }
.cw-set-num[aria-invalid="true"] { border-color: var(--down); }
.cw-set-err { grid-column: 1 / -1; margin: 2px 0 6px; color: var(--down); font-size: 12px; }
.cw-set-err[hidden] { display: none; }
.cw-set-check { flex: none; width: 16px; height: 16px; accent-color: var(--cool); }
.cw-set-plot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.cw-set-plot-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; cursor: pointer; }
.cw-set-plot-ctl { display: flex; flex: none; align-items: center; gap: 8px; }
.cw-set-width { width: 72px; }
.cw-set-foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--rule-soft);
}
.cw-set-gap { flex: 1 1 auto; }
.cw-set-reset { height: 36px; color: var(--ink-2); font-size: 13px; }

/* ---------- a layout's name, and the confirm before a delete (layout-menu.js) ---------- */
.cw-lo { width: min(400px, 100%); }
.cw-lo-form { display: flex; flex-direction: column; }
.cw-lo-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 10px; }
.cw-lo-k { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.cw-lo-input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font-size: 14px;
}
.cw-lo-input:focus { border-color: var(--cool); box-shadow: var(--ring); outline: none; }
.cw-lo-input[aria-invalid="true"] { border-color: var(--down); }
.cw-lo-err { margin: 0; color: var(--down); font-size: 12px; }
.cw-lo-err[hidden] { display: none; }
.cw-lo-text { margin: 0; color: var(--ink-1); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cw-lo-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--rule-soft); }
.cw-btn-danger { background: var(--down); }
.cw-btn-danger:hover:not(:disabled) { background: var(--down); }

/* ---------- Open layout… (open-layout.js) ---------- */
.cw-lopen { width: min(520px, 100%); }
.cw-lopen .cw-dlg-body { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.cw-lopen-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.cw-lopen-field:focus-within { box-shadow: inset 0 -2px 0 var(--cool); }
.cw-lopen-filter { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 14px; outline: none; }
.cw-lopen-filter:focus,
.cw-lopen-filter:focus-visible { outline: none; box-shadow: none; }
.cw-lopen-filter::placeholder { color: var(--ink-3); }
.cw-lopen-list { flex: 1 1 auto; min-height: 0; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.cw-lopen-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.cw-lopen-row.is-active { background: var(--cw-hover); }
.cw-lopen-row.is-current .cw-lopen-name { color: var(--cool); }
.cw-lopen-main { display: grid; gap: 2px; min-width: 0; }
.cw-lopen-name { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cw-lopen-sum { overflow: hidden; color: var(--ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cw-lopen-when { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cw-lopen-del { color: var(--ink-3); }
.cw-lopen-del:hover:not(:disabled) { color: var(--down); }
.cw-lopen-row.is-asking { grid-template-columns: minmax(0, 1fr) auto; cursor: default; background: var(--down-bg); }
.cw-lopen-ask { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cw-lopen-ask-actions { display: flex; gap: 6px; padding-right: 4px; }
.cw-lopen-small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.cw-lopen-empty { margin: 0; padding: 16px 18px; color: var(--ink-2); font-size: 13px; }
.cw-lopen-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rule-soft);
}
.cw-lopen-new { height: 32px; padding: 0 12px 0 8px; font-size: 13px; }
.cw-lopen-count { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- interval box ---------- */
.cw-int {
  position: absolute;
  z-index: 6;
  top: 40%;
  left: 50%;
  width: 200px;
  padding: 10px 12px 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  transform: translate(-50%, -50%);
}
.cw-int[hidden] { display: none; }
.cw-int-title { margin: 0 0 6px; color: var(--ink-2); font-size: 12px; }
.cw-int-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cool);
  border-radius: var(--radius-md);
  background: var(--paper-1);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  outline: none;
  box-shadow: var(--ring);
}
.cw-int-hint { min-height: 1.4em; margin: 6px 0 0; color: var(--ink-2); font-size: 12px; }
.cw-int.is-error .cw-int-input { border-color: var(--down); }
.cw-int.is-error .cw-int-hint { color: var(--down); }

/* ---------- below 1024px: one chart, the panel is a drawer ----------
   (and on a phone on its side whatever its width: phone.js NARROW) */
@media (max-width: 1023.98px), (pointer: coarse) and (max-height: 500px) {
  .cw-app,
  .cw-app[data-panel="closed"] {
    grid-template-columns: var(--cw-tools-w) minmax(0, 1fr) var(--cw-rail-w);
    grid-template-areas:
      "tabs    tabs    tabs"
      "toolbar toolbar toolbar"
      "tools   chart   rail"
      "tools   bottom  rail";
  }
  .cw-app .cw-panel,
  .cw-app[data-panel="closed"] .cw-panel {
    display: flex;
    position: fixed;
    z-index: 91;
    top: calc(env(safe-area-inset-top) + var(--cw-tabs-h) + var(--cw-toolbar-h) + var(--cw-seam));
    bottom: 0;
    right: calc(env(safe-area-inset-right) + var(--cw-rail-w) + var(--cw-seam));
    width: min(360px, calc(100vw - var(--cw-rail-w) - 24px));
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-floating);
    transform: translateX(calc(100% + var(--cw-rail-w) + 16px));
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .cw-app[data-drawer="open"] .cw-panel {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .cw-splitter { display: none; }
  /* Room for Layout ▾ and the icons after it: ƒx and the bell say it
     alone, and the toolbar packs a little closer */
  .cw-toolbar { gap: 1px; }
  .cw-tb-sep { margin: 0 2px; }
  .cw-tb-fx .cw-tb-label,
  .cw-tb-alert .cw-tb-label { display: none; }
  /* The symbol is as wide as its name, which makes room for ⊕ beside it. */
  .cw-tb-sym { min-width: 0; padding: 0 8px 0 6px; }
  .cw-tb-compare { padding: 0 3px; }
  /* The snapshot moves into the ⚙ menu (toolbar.js). */
  .cw-tb-camera { display: none; }
}

/* Under 1100px undo and redo (Ctrl+Z, Ctrl+Shift+Z) leave the toolbar, so
   Layout ▾, ⚙, ⛶ and the camera keep their room whatever the symbol and
   the layout's name */
@media (max-width: 1099.98px) {
  .cw-tb-undo,
  .cw-tb-redo,
  .cw-tb-sep-undo { display: none; }
}

/* 768-959px: the favourite intervals go into the interval menu, as on a
   phone, so ⊕, a grid's "Chart 2/4" chip, Layout ▾, ⚙ and ⛶ keep their
   room whatever the symbol */
@media (min-width: 768px) and (max-width: 959.98px) {
  .cw-tb-favs { display: none; }
  .cw-tb-intmenu .cw-tb-int-cur { display: inline; }
}

/* ---------- phones: below 768px, or a touch screen on its side ----------
   docs/MOBILE.md §6. The queries are phone.js PHONE, PHONE_PORTRAIT and
   PHONE_LANDSCAPE, repeated here (a media query cannot read a variable).
   Charts keeps its tablet layout from 768px (the terminal's phone query
   stops at 820px), so a desktop window from 768px wide is unchanged. */
@media (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
  :root { --cw-toolbar-h: 44px; --cw-tabs-h: 44px; --cw-bottom-h: 44px; --cw-btn-h: 32px; }
  .cw-tools,
  .cw-rail { display: none; }
  /* The favourite tools' bar (a tool touched and held in the Draw sheet):
     down the chart's left edge, clear of the legend and of the selected
     drawing's bar, its buttons a finger's size; dragged by its grip as on
     a wider screen, and a long list scrolls. */
  .cw-favbar {
    top: 50%;
    bottom: auto;
    left: 6px;
    flex-direction: column;
    max-height: calc(100% - 96px);
    padding: 0 3px 3px;
    transform: translateY(-50%);
  }
  .cw-favbar-grip {
    position: relative;
    flex: none;
    width: auto;
    height: 18px;
    margin: 0;
  }
  .cw-favbar-grip::before { content: ''; position: absolute; top: -10px; right: 0; bottom: -4px; left: 0; }
  .cw-favbar-tools {
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .cw-favbar-tools::-webkit-scrollbar { display: none; }
  .cw-favbar-btn { flex: none; width: 40px; height: 40px; }
  .cw-app .cw-panel,
  .cw-app[data-panel="closed"] .cw-panel {
    right: env(safe-area-inset-right);
    width: min(360px, 92vw);
  }
  .cw-toolbar { gap: 0; padding: 0 4px; }
  .cw-tb-sep { margin: 0 2px; }
  .cw-tb-favs,
  .cw-tb-type,
  .cw-tb-fx,
  .cw-tb-sep-fx,
  .cw-tb-gear,
  .cw-tb-fs,
  .cw-tb-layout,
  .cw-tb-grid,
  .cw-tb-follow,
  .cw-tb-cells-word,
  .cw-tb-compare,
  .cw-tb-camera,
  .cw-tb-undo,
  .cw-tb-redo,
  .cw-tb-sep-undo,
  .cw-tb-sep-end,
  .cw-tb-alert .cw-tb-label { display: none; }
  .cw-tb-cells { padding: 0 2px 0 6px; }
  .cw-tb-type + .cw-tb-sep { display: none; }
  .cw-tb-intmenu .cw-tb-int-cur { display: inline; }
  .cw-tb-panel,
  .cw-tb-more { display: inline-flex; }
  /* Short of room (a grid's chip beside a long symbol, a 320px screen),
     the symbol's name shortens, so ⋯ stays on screen */
  .cw-tb-sym { flex: 0 1 auto; min-width: 48px; }

  /* The range bar: all nine ranges as equal chips across the bar, each its
     full share of the width to tap. The as-of time is in the legend, and
     % / log / auto are in ⋯ under "Price scale" (toolbar.js). */
  .cw-bottom { gap: 0; padding: 0 2px; }
  .cw-rb-ranges { flex: 1 1 auto; gap: 0; overflow: visible; }
  .cw-rb-btn { flex: 1 1 0; min-width: 0; height: var(--cw-btn-h); padding: 0; font-size: 13.5px; font-weight: 500; }
  .cw-rb-btn.is-active { font-weight: 600; }
  .cw-rb-spacer,
  .cw-rb-asof,
  .cw-rb-goto,
  .cw-rb-clock,
  .cw-bottom .cw-tb-sep,
  .cw-rb-scale { display: none; }

  /* The legend: one line on a chip (the last price line and the top
     candles pass under it, not through its words): symbol, interval, the
     last price, the day's change and the quote's time. The crosshair on,
     it names the bar it reads and shows its O H L C, volume and studies. */
  .cw-legend {
    top: 6px;
    left: 6px;
    right: auto;
    max-width: calc(100% - 70px);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--cw-bg-pane) 86%, transparent);
    font-size: 12px;
  }
  .cw-lg-title { font-size: 13px; }
  .cw-lg-exch,
  .cw-lg-exch-sep { display: none; }
  /* A phone keeps the ticker, and its one line has no fold. */
  .cw-legend.has-name .cw-lg-name,
  .cw-lg-fold { display: none; }
  .cw-legend.has-name .cw-lg-sym { display: inline; }
  .cw-legend:not(.is-tracking) .cw-lg-volrow { display: none; }
  .cw-lg-main { flex-wrap: nowrap; column-gap: 8px; min-width: 0; }
  /* One line: what does not fit on it wraps out of sight, the as-of time
     first, then "Delayed" (never a time cut in half) */
  .cw-lg-quick {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    min-width: 0;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
  }
  .cw-lg-qv { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .cw-lg-last { color: var(--ink); font-weight: 600; }
  .cw-lg-pct { color: var(--up); }
  .cw-lg-pct.is-down { color: var(--down); }
  .cw-lg-pct.is-flat { color: var(--ink-2); }
  .cw-lg-asof { color: var(--ink-3); font-size: 12px; }
  .cw-lg-asof:empty { display: none; }
  .cw-lg-asof.is-stale { color: var(--series-6); }
  .cw-lg-values { column-gap: 6px; font-size: 12px; }
  .cw-lg-k { font-size: 12px; }
  .cw-legend:not(.is-tracking) .cw-lg-values,
  .cw-legend:not(.is-tracking) .cw-lg-study .cw-lg-vals,
  .cw-legend.is-tracking .cw-lg-quick { display: none; }
  /* With the crosshair off, the studies drawn over the price are named on
     one line (a tap on a name shows its buttons), their values left out */
  .cw-legend:not(.is-tracking) .cw-lg-studies {
    flex-direction: row;
    column-gap: 10px;
    overflow: hidden;
    white-space: nowrap;
  }
  .cw-legend:not(.is-tracking) .cw-lg-studies .cw-lg-study { flex: none; flex-wrap: nowrap; }
  .cw-legend.is-tracking .cw-lg-main { flex-wrap: wrap; }
  .cw-legend.is-tracking .cw-lg-when-sep,
  .cw-legend.is-tracking .cw-lg-when { display: inline; }
  .cw-lg-when { color: var(--cool); font-size: 13px; font-weight: 600; white-space: nowrap; }
  /* A pane study's label keeps a chip of its own at the top of its pane */
  .cw-lg-panes .cw-lg-study {
    margin-left: -8px;
    padding: 0 6px;
    background: color-mix(in oklch, var(--cw-bg-pane) 86%, transparent);
  }

  /* The selected line's bar moves under the chart, clear of the legend */
  .cw-dw-bar { top: auto; bottom: 36px; right: 64px; flex-wrap: wrap; max-width: calc(100% - 72px); }
  .cw-dw-bar-label,
  .cw-dw-sep { display: none; }
  .cw-dw-btn { width: 34px; height: 36px; }
  .cw-dw-width { width: auto; padding: 0 5px; }
  .cw-dw-wtext { display: none; }

  /* Dialogs are bottom sheets over what is visible of the screen (above an
     on-screen keyboard: phone.js watchViewport). Symbol search, ƒx and Open
     layout… take all of it; a layout's name or a study's settings as much
     as they need. */
  .cw-dlg-scrim.is-sheet {
    top: var(--cw-vvt, 0px);
    bottom: auto;
    height: var(--cw-vvh, 100dvh);
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top)) 0 0;
  }
  .cw-dlg.is-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 1px 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: cw-sheet-in var(--dur-slow) var(--ease-out);
  }
  .cw-kb-open .cw-dlg.is-sheet { padding-bottom: 0; }
  .cw-dlg.is-sheet:is(.cw-search, .cw-ind, .cw-lopen) { height: 100%; }
  .cw-dlg.is-sheet .cw-lopen-list { max-height: none; }
  /* A smaller one taller than what a keyboard leaves (a layout's name on a
     phone on its side) scrolls to its buttons rather than cutting them off */
  .cw-dlg.is-sheet .cw-dlg-body { overflow-y: auto; overscroll-behavior: contain; }

  /* The toolbar: ‹ symbol › (the watchlist's previous and next) and ✎ (the
     Draw sheet) come in; TMT ▾ goes into ⋯. A grid's chip takes the room
     of ‹ › and Alert (both still in reach: Space, the drawer, ⋯). */
  .cw-tb-brand,
  .cw-tb-brand + .cw-tb-sep { display: none; }
  .cw-tb-step,
  .cw-tb-draw { display: inline-flex; }
  .cw-tb-step[hidden],
  .cw-toolbar.has-cells .cw-tb-step,
  .cw-toolbar.has-cells .cw-tb-alert { display: none; }
  .cw-tb-sym { justify-content: center; padding: 0 8px; }
  .cw-tb-sym .cw-ic { display: none; }
  .cw-tb-draw.is-active,
  .cw-tb-draw.is-active:hover:not(:disabled) { background: var(--cool-soft); color: var(--cool); }

  /* A tool in hand: what a finger does next, and Done (workspace.js). A tap
     on its words is the chart's (where the next point goes); only Done
     takes a tap. */
  .cw-dw-mode:not([hidden]) {
    position: absolute;
    z-index: 6;
    top: 38px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    height: 36px;
    padding: 0 3px 0 12px;
    transform: translateX(-50%);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--card) 94%, transparent);
    box-shadow: var(--shadow-floating);
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
  }
  .cw-dw-mode .cw-ic { color: var(--cool); }
  .cw-dw-mode-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cw-dw-mode-done {
    pointer-events: auto;
    height: 28px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--cool-soft);
    color: var(--cool);
    font-size: 13px;
    font-weight: 600;
  }

  /* The panel is a bottom sheet (shell.js): about 45% of the screen, or
     90% dragged up; its grab bar and tabs, one view at a time. */
  :root {
    --cw-psheet-half: max(45dvh, min(240px, 90dvh));
    --cw-psheet-full: 90dvh;
  }
  .cw-app .cw-panel,
  .cw-app[data-panel="closed"] .cw-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 560px;
    height: var(--cw-psheet-half);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--cw-bg-pane);
    transform: translateY(calc(100% + 24px));
    transition: transform var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .cw-app[data-drawer="open"] .cw-panel { transition: transform var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out); }
  .cw-app[data-sheet="full"] .cw-panel { height: var(--cw-psheet-full); }
  .cw-app.is-sheet-dragging .cw-panel { transition: none; }
  .cw-psheet-head { display: block; flex: none; padding: 0 12px 8px; touch-action: none; }
  .cw-psheet-grab {
    display: grid;
    place-items: center;
    height: 22px;
    cursor: grab;
  }
  .cw-psheet-grab::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--rule);
  }
  .cw-psheet-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--cw-hover);
  }
  .cw-psheet-tab {
    flex: 1 1 0;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
  }
  .cw-psheet-tab[aria-selected="true"] {
    background: var(--cw-bg-pane);
    box-shadow: inset 0 0 0 1px var(--rule);
    color: var(--ink);
    font-weight: 600;
  }
  /* The watchlist alone; details are their own tab */
  .cw-app[data-view="watchlist"] .cw-hsplit,
  .cw-app[data-view="watchlist"] .cw-psec-details { display: none; }
  .cw-psec-watch { flex: 1 1 0; }
}

/* A phone held upright: toolbar, the tab strip (only with two tabs or more:
   one tab has nothing to switch to, and ⋯ opens a new one), chart, ranges. */
@media (max-width: 767.98px) {
  .cw-app,
  .cw-app[data-panel="closed"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toolbar" "tabs" "chart" "bottom";
  }
  .cw-app[data-tabs="1"] {
    grid-template-rows: var(--cw-toolbar-h) minmax(0, 1fr) var(--cw-bottom-h);
    grid-template-areas: "toolbar" "chart" "bottom";
  }
  .cw-app[data-tabs="1"] .cw-tabs { display: none; }
  /* Under the toolbar here: the strip keeps to its own row (on a wider
     window it reaches over the seam into the toolbar under it). */
  .cw-tabs { margin-bottom: 0; }
  /* A tab in two lines, the width being short: its symbol (and a saved
     layout's name) over ▲ or ▼ and the day's change (the price is in the
     legend). The tab on screen is wider, for its ×. */
  .cw-tab-item { width: 100px; min-width: 100px; }
  .cw-tab-item.is-active { width: 148px; min-width: 148px; }
  .cw-tab { gap: 6px; padding-left: 8px; }
  .cw-tab-mark { width: 16px; height: 16px; font-size: 9px; }
  .cw-tab-words {
    flex-wrap: wrap;
    align-content: center;
    gap: 1px 4px;
    line-height: 1.2;
  }
  .cw-tab-words::after { content: ''; flex-basis: 100%; order: 3; }
  .cw-tab-sym { order: 1; }
  .cw-tab-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cw-tabs .cw-tab-item .cw-tab-name { order: 2; }
  .cw-tab-arrow { order: 4; }
  .cw-tab-price { display: none; }
  .cw-tab-pct { order: 5; font-size: 11.5px; }
}

/* A phone on its side: one 44px bar (the toolbar, then the ranges) over the
   chart, which takes the rest of the screen. No tab strip (⋯ lists the tabs
   open), no rails. */
@media (pointer: coarse) and (max-height: 500px) {
  /* The ranges keep at least 34px each (half the bar on a narrower phone);
     the toolbar gives way first (the symbol's name shortens), so a long
     symbol never squeezes the nine ranges into one another */
  .cw-app,
  .cw-app[data-panel="closed"],
  .cw-app[data-tabs] {
    grid-template-columns: minmax(0, auto) minmax(min(306px, 50%), 1fr);
    grid-template-rows: var(--cw-toolbar-h) minmax(0, 1fr);
    grid-template-areas: "toolbar bottom" "chart chart";
    column-gap: 0;
  }
  .cw-tabs { display: none; }
  .cw-toolbar { padding-right: 0; }
  .cw-bottom { padding: 0 4px 0 0; }
  .cw-rb-ranges { justify-content: flex-end; }
  .cw-rb-btn { max-width: 56px; }
  .cw-dlg-head { height: 44px; }
  /* A name's dialog keeps its field and buttons over a keyboard (the field's
     label is still read out; the title and the placeholder say it) */
  .cw-lo-body { padding: 8px 18px 6px; }
  .cw-lo-k {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cw-lo-foot { padding: 8px 18px 10px; }
  /* The screen is short: the intervals six to a row, a group on one line;
     ƒx's categories in one row that scrolls sideways (the next one peeks,
     and the edge fades), so its list keeps the room */
  .cw-menu-chips.has-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cw-menu-chips.is-tiles.has-cols { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cw-ind-cats {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent, oklch(0 0 0) 12px, oklch(0 0 0) calc(100% - 24px), transparent);
  }
  .cw-ind-cats::-webkit-scrollbar { display: none; }
  .cw-ind-cat { flex: none; }
  /* ...and while a keyboard is up (typing a search), no categories: the
     matches get what little room it leaves */
  .cw-kb-open .cw-ind-cats { display: none; }
  /* The Alert form: the price and Add alert on one row, so both stay in
     sight over an on-screen keyboard (it leaves 150-200px) */
  .cw-menu-ab.is-sheet .cw-ab {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title title" "input add" "hint hint" "note note";
  }
  .cw-menu-ab.is-sheet .cw-ab-title { grid-area: title; }
  .cw-menu-ab.is-sheet .cw-ab-input { grid-area: input; }
  .cw-menu-ab.is-sheet .cw-ab-add { grid-area: add; width: auto; padding: 0 20px; }
  .cw-menu-ab.is-sheet .cw-ab-hint { grid-area: hint; }
  .cw-menu-ab.is-sheet .cw-ab-note { grid-area: note; }
}
/* A shorter phone on its side (an iPhone SE's 667px, an Android's 640px):
   Alert leaves the bar for ⋯ (Add alert) and the separators go, so ‹ symbol ›,
   the interval, ✎, the panel and ⋯ keep their room beside the ranges; under
   640px the buttons are 36px drawn (their reach is still 44px). */
@media (pointer: coarse) and (max-height: 500px) and (max-width: 739.98px) {
  .cw-tb-alert,
  .cw-toolbar .cw-tb-sep { display: none; }
}

/* ---------- a finger (pointer: coarse) ----------
   docs/MOBILE.md §1 and §6: every control takes a tap on at least 44x44px.
   Most keep their size on screen (so the phone toolbar still fits 320px) and
   reach further with a ::before; a control narrower than 44px grows to it
   where two would otherwise take each other's taps (icon buttons side by
   side). Inputs are 16px, or iOS Safari zooms the page into them. A tablet
   (a wider touch screen, with the dense desktop toolbar) gets the reach up
   and down only, so no button takes its neighbour's taps; a phone gets it
   both ways (below). */
@media (pointer: coarse) {
  :where(.cw-btn, .cw-tab, .cw-tab-ctl, .cw-tab-close, .cw-wl-switch, .cw-toast-action, .cw-ind-cat, .cw-al-tab, .cw-lg-act, .cw-psheet-tab, .cw-draw-tab) { position: relative; }
  :where(.cw-btn, .cw-tab, .cw-tab-ctl, .cw-tab-close, .cw-wl-switch, .cw-toast-action, .cw-ind-cat, .cw-al-tab, .cw-lg-act, .cw-psheet-tab, .cw-draw-tab)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .cw-btn:active:not(:disabled),
  .cw-menu-item:active:not([aria-disabled="true"]) { background: var(--cw-pressed); }

  :root { --cw-psec-head-h: 44px; }
  .cw-menu-item { min-height: 44px; }
  .cw-wl-row { height: 44px; }
  .cw-wl-sec-head { height: 44px; }
  .cw-wl-switch { height: 36px; }
  /* The selected row's ×: 22px drawn, the row's height to tap, clear of
     the list's right edge (which would scroll sideways). The columns end
     short of it, so it never covers the row's change. */
  .cw-wl-cols,
  .cw-wl-row { padding-right: 34px; }
  .cw-wl-row.is-selected .cw-wl-del:not([hidden]) { top: 11px; }
  .cw-wl-del::before { content: ''; position: absolute; top: -11px; right: -6px; bottom: -11px; left: -16px; }
  /* The tab's full height takes the tap: its underline is drawn inside it */
  .cw-tab-item { border-bottom: 0; }
  .cw-tab-item.is-active { box-shadow: inset 0 -2px 0 var(--cool); }
  .cw-al-tab { height: 44px; }
  .cw-search-row { min-height: 48px; }
  .cw-ind-add { min-height: 44px; }
  .cw-ind-cat { height: 40px; padding: 0 14px; font-size: 13.5px; }
  .cw-ind-cats { gap: 6px 8px; }
  .cw-set-field,
  .cw-set-plot { min-height: 48px; }
  .cw-lg-act { width: 36px; height: 32px; }
  .cw-lg-acts { gap: 2px; }
  /* The watchlist / details splitter: a seam to see, a finger's width to
     drag (over the edges of what it divides) */
  .cw-hsplit { position: relative; z-index: 1; }
  .cw-hsplit::before { content: ''; position: absolute; top: -20px; right: 0; bottom: -20px; left: 0; }
  /* The toolbar's alert form */
  .cw-ab-input,
  .cw-ab-add { height: 44px; }

  /* 16px text in every field (iOS zooms the page into a smaller one) */
  .cw-ind-search,
  .cw-lopen-filter,
  .cw-lo-input,
  .cw-al-input,
  .cw-cp-input,
  .cw-set-num,
  .cw-set-sel { font-size: 16px; }
  .cw-al-input,
  .cw-cp-input,
  .cw-set-num,
  .cw-set-sel { height: 44px; }
  /* A study's line: its show box takes the row's height with its name, and
     its colour swatch is a finger's size */
  .cw-set-plot-name { align-self: stretch; }
  .cw-ind-color { width: 44px; height: 44px; padding: 7px; }
  .cw-ind-field,
  .cw-lo-input { height: 44px; }
}

/* A phone with a finger: the reach 44px across too, icon buttons 44px wide,
   and each of the toolbar's buttons (the symbol's name gives way first when
   a 320px screen is short of room). A tablet's wider toolbar keeps its
   sizes, and its reach up and down (above). */
@media (pointer: coarse) and (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
  :where(.cw-btn, .cw-tab, .cw-tab-ctl, .cw-tab-close, .cw-wl-switch, .cw-toast-action, .cw-ind-cat, .cw-al-tab, .cw-lg-act, .cw-psheet-tab, .cw-draw-tab)::before { width: max(100%, 44px); }
  .cw-btn-icon,
  .cw-tab-ctl,
  .cw-tb-intmenu,
  .cw-tb-alert,
  .cw-tb-draw,
  .cw-tb-panel,
  .cw-tb-more { min-width: 44px; }
  .cw-tab-close { width: 36px; height: 36px; margin: 0 2px 0 0; }
}
/* Under 360px (a grid's "4/4" chip beside a long symbol): 36px, and no
   separators, so ⋯ stays on screen; the reach is still 44px tall. */
@media (pointer: coarse) and (max-width: 359.98px) {
  .cw-tb-step,
  .cw-tb-intmenu,
  .cw-tb-alert,
  .cw-tb-draw,
  .cw-tb-panel,
  .cw-tb-more { min-width: 36px; }
  .cw-toolbar .cw-tb-sep { display: none; }
}
/* ...and so on a phone on its side under 640px wide (the landscape block
   above hides Alert and the separators there) */
@media (pointer: coarse) and (max-height: 500px) and (max-width: 639.98px) {
  .cw-tb-step,
  .cw-tb-intmenu,
  .cw-tb-draw,
  .cw-tb-panel,
  .cw-tb-more { min-width: 36px; }
}
/* Under 390px Alert leaves the toolbar for ⋯ (Add alert), so ‹ symbol ›,
   the interval, ✎, the panel and ⋯ keep their room. */
@media (max-width: 389.98px) {
  .cw-tb-alert { display: none; }
}

/* A touch screen has no keyboard to hint at, and a hover that sticks after
   a tap: no key hints, and no hover tint left on a toolbar button or a
   range once the finger lifts. */
@media (hover: none) {
  .cw-search-hints,
  kbd.cw-menu-hint,
  .cw-menu-hint.is-shortcut { display: none; }
  .cw-toolbar .cw-btn:hover:not(:disabled):not(.is-active):not([aria-expanded="true"]):not(.cw-tb-sym),
  .cw-bottom .cw-btn:hover:not(:disabled):not(.is-active) { background: transparent; }
}

/* The watchlist on a phone (after the finger's rules above): 56px rows, the
   name under the symbol, and no ×: a finger swipes a row left for Remove
   (watchlist.js), which slides into view past the row's right edge. */
@media (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
  .cw-wl-cols,
  .cw-wl-row { padding: 0 16px; }
  .cw-wl-cols { height: 30px; font-size: 12px; }
  .cw-wl-row { height: 56px; font-size: 14px; touch-action: pan-y; transform: translateX(calc(-1 * var(--cw-swipe, 0px))); transition: transform var(--dur-mid) var(--ease-out); }
  .cw-wl-row.is-swiping { transition: none; }
  .cw-wl-row.is-selected .cw-wl-del:not([hidden]) { display: none; }
  .cw-wl-list { overflow-x: hidden; }
  .cw-wl-symcell { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .cw-wl-symline { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
  .cw-wl-sym { font-size: 15px; }
  .cw-wl-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cw-wl-num { font-size: 14px; }
  .cw-wl-sec-head { height: 44px; padding: 0 16px 0 12px; }
  .cw-wl-swipe-del {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 96px;
    background: var(--down);
    color: var(--paper);
    font-size: 12px;
    font-weight: 600;
  }
  .cw-wl-row[hidden] .cw-wl-swipe-del { display: none; }
}
/* ...and no × left by a tap's sticky hover (a mouse in a narrow window
   keeps its × on hover). A row's bell says the name has alerts; a finger's
   tap on it is the row's (its chart), since an 18px bell is no finger's
   target and the sheet's Alerts tab is one tap away (a mouse keeps it). */
@media (hover: none) and (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .cw-wl-row:hover .cw-wl-del:not([hidden]) { display: none; }
  .cw-wl-bell { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-spinner { animation-duration: 2.4s; }
  .cw-app .cw-panel { transition: none; }
  .cw-wl-row { transition: none; }
  .cw-menu.is-sheet,
  .cw-menu-scrim,
  .cw-dlg.is-sheet { animation: none; }
}