/**
 * ChartDeck shell (round 2, 0.4.0) - loaded LAST.
 *
 * TradingView's STRUCTURE in ChartDeck's own Holo Glass look:
 *   top toolbar (one slim row) / [drawing bar | charts | panel | widget bar] / bottom bar
 * plus the pane legends' neighbours: menus, the symbol search, the user menu, the right-side
 * panels, the Sectors / Trend upgrade panel, toasts and the boot screen.
 *
 * Every colour is a token from /brand/theme.css, so dark and light both work; nothing here is a
 * literal colour except the dark ink on the holo gradient (the gradient is the same in both
 * themes, so its text is too). Controls are 28-32 px, lines are 1 px, focus is always visible.
 */

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */

body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.cd-top { flex: none; }
.cd-work { flex: 1; min-height: 0; display: flex; position: relative; background: var(--a-line-1); gap: 1px; }
.cd-work > .at-main { flex: 1; min-width: 0; }
.cd-bottom { flex: none; }

/* SVG icons: 16px strokes in currentColor, one weight everywhere. */
.cd-top svg, .cd-wbar svg, .cd-bottom svg, .cd-panel svg, .cd-menu svg, .cd-modal svg, .cd-um svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.cd-caret { width: 10px !important; height: 10px !important; margin-left: var(--a-sp-1); opacity: .7; }

/* -- boot: nothing of the terminal shows until the session and plan are known ------------- */
/* the page's inline guard hides everything while booting in case this file is missing; with it loaded, the boot look below decides.
   --cd-css tells cd-boot.js this file is in (it shows the terminal only then). */
:root { --cd-css: 1; }
body.cd-booting > * { visibility: inherit; }
body.cd-booting .cd-top .cd-tb > *:not(.cd-tb-logo),
body.cd-booting .cd-top .cd-tb-r,
body.cd-booting .cd-work,
body.cd-booting .cd-bottom > * { visibility: hidden; }
.cd-boot {
  position: fixed; inset: var(--at-top) 0 var(--at-status-h) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-sp-5);
  color: var(--a-fg-3); font: var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); z-index: var(--z-dialog);
  background: var(--a-bg); text-align: center; padding: var(--a-sp-6);
}
.cd-boot[hidden] { display: none !important; }
.cd-boot-mark { width: 40px; height: 40px; opacity: .9; animation: cd-pulse 1.6s ease-in-out infinite; }
.cd-boot-t { color: var(--a-fg-1); font-weight: var(--a-fw-semibold); font-size: var(--a-fs-md); }
.cd-boot-btn {
  height: var(--a-h-md); padding: 0 var(--a-sp-6); border-radius: var(--a-r-md); cursor: pointer;
  border: 1px solid var(--a-accent-t3); background: var(--a-glass); color: var(--a-accent);
  font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans);
}
.cd-boot-btn:hover { background: var(--a-accent-t2); color: var(--a-accent-hover); }
@keyframes cd-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ==========================================================================
   TOP TOOLBAR
   ========================================================================== */

.cd-top {
  height: var(--at-top); display: flex; align-items: center; gap: var(--a-sp-2);
  padding: 0 var(--a-sp-4); padding-left: max(var(--a-sp-4), env(safe-area-inset-left));
  padding-right: max(var(--a-sp-4), env(safe-area-inset-right));
  background: var(--a-panel); border-bottom: 1px solid var(--a-line-1);
  position: relative; z-index: var(--z-bars); min-width: 0;
}
.at-spacer { flex: 1; min-width: var(--a-sp-4); }
/* Workspace tabs (cd-shell.js paintTabs, 2026-10-14): the free space of the top bar; the tools keep theirs, the strip
   scrolls sideways when the tabs do not fit (wheel or drag). Hidden below 1200 px with the other mid-width items. */
.cd-ws-host { display: flex; align-items: center; justify-content: flex-end; min-width: var(--a-sp-4); padding: 0 var(--a-sp-2); }
/* With the tab bar on screen the tabs carry the layout's name: the name button becomes the layouts icon, and with two or
   more tabs the left tools drop their words (as below 1760 px) so the tabs get the room. */
.cd-lay-ico { display: none; width: 16px; height: 16px; }
@media (min-width: 1201px) {
  .cd-ws-on #cd-lay-name .cd-tb-t { display: none !important; }
  .cd-ws-on #cd-lay-name .cd-lay-ico { display: inline; }
  .cd-ws-many .cd-tb:not(.cd-tb-r) .cd-tb-text .cd-tb-t { display: none; }
  .cd-ws-many .cd-tb:not(.cd-tb-r) .cd-tb-text { padding: 0 var(--a-sp-4); }
  /* 0.9.74 (review): one tab with no room for its name (cd-shell.js fitTabs) - the tool labels go, as with two tabs */
  .cd-ws-tight .cd-tb:not(.cd-tb-r) .cd-tb-text .cd-tb-t { display: none; }
  .cd-ws-tight .cd-tb:not(.cd-tb-r) .cd-tb-text { padding: 0 var(--a-sp-4); }
}
.cd-ws { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-padding-inline-end: 34px; }
.cd-ws::-webkit-scrollbar { display: none; }
.cd-ws-tab { position: relative; display: inline-flex; align-items: center; gap: var(--a-sp-2); flex: 0 1 auto; min-width: 110px; max-width: 180px; height: 28px;
  padding: 0 var(--a-sp-2) 0 var(--a-sp-4); border: 1px solid transparent; border-radius: var(--a-r-md); color: var(--a-fg-3);
  font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--a-dur-1) ease, color var(--a-dur-1) ease; }
.cd-ws-tab:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-ws-tab.on { color: var(--a-fg-1); background: var(--a-sel-bg); border-color: var(--a-line-2); }
.cd-ws-tab:focus-visible, .cd-ws-add:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.cd-ws-t { overflow: hidden; text-overflow: ellipsis; padding-right: var(--a-sp-1); line-height: var(--a-lh-body); }   /* sweep 2026-10-19 S205: room for Devanagari vowel signs under overflow:hidden */
.cd-ws-work .cd-ws-t { font-style: normal; }   /* upright (review 0.9.52: italics are synthetic in ar / hi / ja / ko / zh) */
.cd-ws-ro .cd-ws-t { opacity: .7; }
/* 0.9.74 (review): the unsaved layout's dot after "Untitled layout" (cd-shell.js paintTabs) */
.cd-ws-dirty { flex: none; width: 6px; height: 6px; margin: 0 var(--a-sp-1) 0 calc(-1 * var(--a-sp-1)); border-radius: 50%; background: var(--a-warn); }
/* 0.9.72: the name typed in place (cd-shell.js startRename) - the tab's own font, an accent ring while it is a field */
.cd-ws-tab.cd-ws-edit { border-color: var(--a-accent-t4); box-shadow: 0 0 0 1px var(--a-accent-t3); cursor: text; }
.cd-ws-in { flex: 1 1 auto; min-width: 0; width: 100%; height: 22px; padding: 0 var(--a-sp-1); border: 0; border-radius: var(--a-r-sm); outline: none;
  background: var(--a-sunken); color: var(--a-fg-1); font: inherit; line-height: var(--a-lh-body); }
.cd-ws-in::placeholder { color: var(--a-fg-3); }
.cd-ws-shared { cursor: default; color: var(--a-accent); }
.cd-ws-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: var(--a-r-sm); color: var(--a-fg-3); opacity: 0; }
.cd-ws-x svg { width: 10px; height: 10px; }
.cd-ws-tab:hover .cd-ws-x, .cd-ws-tab.on .cd-ws-x, .cd-ws-tab:focus-within .cd-ws-x { opacity: 1; }
.cd-ws-x:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-ws-drop { box-shadow: inset 2px 0 0 var(--a-accent); }
.cd-ws-add { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin-left: 2px;
  border: 0; border-radius: var(--a-r-md); background: transparent; color: var(--a-fg-3); cursor: pointer; }
.cd-ws-add svg { width: 14px; height: 14px; }
.cd-ws-add:hover { background: var(--a-hover); color: var(--a-fg-1); }
/* Tabs keep a readable width (about 10 characters) and the strip scrolls; the + stays pinned at the strip's end so it never
   scrolls out of view behind the tabs (sweep 2026-10-19 S59). */
.cd-ws-add { position: sticky; inset-inline-end: 0; z-index: 1; background: var(--a-panel); box-shadow: -6px 0 6px var(--a-panel); }
[dir="rtl"] .cd-ws-add { box-shadow: 6px 0 6px var(--a-panel); }
.cd-ws-add:hover { background: linear-gradient(var(--a-hover), var(--a-hover)), var(--a-panel); }
.cd-lay-q { padding: var(--a-sp-2) var(--a-sp-2) var(--a-sp-1); }
.cd-lay-q .cd-input { width: 100%; }
@media (prefers-reduced-motion: reduce) { .cd-ws-tab { transition: none; } }
.cd-tb { display: flex; align-items: center; gap: var(--a-sp-1); min-width: 0; flex: 0 1 auto; overflow: hidden; }
.cd-tb-r { flex: none; }
.cd-tb-sep { width: 1px; height: 20px; margin: 0 var(--a-sp-2); background: var(--a-line-1); flex: none; }

.cd-tb-btn, .cd-tb-sym, .cd-tb-logo, .cd-tf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-4); flex: none;
  height: 30px; min-width: 30px; padding: 0 var(--a-sp-4);
  border: 1px solid transparent; border-radius: var(--a-r-md); background: transparent;
  color: var(--a-fg-2); font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--a-dur-1) ease, color var(--a-dur-1) ease;
}
.cd-tb-btn:hover, .cd-tb-sym:hover, .cd-tb-logo:hover, .cd-tf:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-tb-btn[aria-pressed="true"], .cd-tb-btn.on, .cd-tb-btn[aria-expanded="true"] { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-tb-btn:disabled, .cd-tb-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.cd-tb-btn:disabled:hover, .cd-tb-btn[aria-disabled="true"]:hover { background: transparent; color: var(--a-fg-2); }
.cd-tb-text { padding: 0 var(--a-sp-4) 0 var(--a-sp-4); }
.cd-tb-dd { gap: var(--a-sp-1); padding: 0 var(--a-sp-2) 0 var(--a-sp-4); }

/* Two buttons that read as one (Indicators + its list, layout name + save). */
.cd-split { display: inline-flex; align-items: center; flex: none; border-radius: var(--a-r-md); }
.cd-ind-wrap { display: inline-flex; align-items: center; flex: none; }
.cd-split > .cd-tb-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cd-split > .cd-tb-btn + .cd-tb-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 20px; padding: 0 var(--a-sp-2); }
.cd-split:hover > .cd-tb-btn { background: var(--a-glass); }
.cd-split > .cd-tb-btn:hover { background: var(--a-hover); }

.cd-tb-logo { padding: 0 var(--a-sp-4) 0 var(--a-sp-2); gap: var(--a-sp-4); }
/* .cd-tb clips its overflow, so the global outset ring of the first / edge buttons (the ChartDeck menu next to the
   window edge) was cut off (2026-10-08 UI review): toolbar buttons draw the ring inside their own box. */
.cd-tb .cd-tb-btn:focus-visible, .cd-tb .cd-tb-sym:focus-visible, .cd-tb .cd-tb-logo:focus-visible, .cd-tb .cd-tf:focus-visible {
  outline: var(--a-ring-w) solid var(--a-focus); outline-offset: calc(-1 * var(--a-ring-w)); }
.cd-mark { width: 22px; height: 22px; display: block; flex: none; }
.cd-word { font: var(--a-fw-semibold) var(--a-fs-md)/1 var(--a-sans); letter-spacing: -.01em;
  background: var(--a-holo-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cd-dev { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-mono); letter-spacing: var(--a-track-caps); color: var(--a-warn);
  border: 1px solid var(--a-warn-t3); background: var(--a-warn-t1); border-radius: var(--a-r-sm); padding: var(--a-sp-1) var(--a-sp-2); }

/* The market: bold symbol and its venue - one rule set, in the roomier top bar block below. */

/* Favourite timeframes. */
.cd-tf-favs { display: flex; align-items: center; gap: 0; flex: none; }
.cd-tf { min-width: 28px; padding: 0 var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); color: var(--a-fg-2); }
.cd-tf.on { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-tf-cur { font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); color: var(--a-fg-1); min-width: 18px; text-align: center; }
/* Beside the favourites the chip is just the caret while a lit favourite already names the timeframe, and shows the label
   only when the timeframe is not a favourite. (regfix4 m5 kept an invisible 3.6ch slot so the toolbar never shifted; the
   operator read that blank slot as "the dropdown is empty" on 10-05, so the rare 13 px shift is the better trade.) */
.cd-tf-favs:not(:empty) + .cd-tb-dd .cd-tf-cur { display: none; white-space: nowrap; }
.cd-tf-favs:not(:empty) + .cd-tb-dd.cd-cur-hidden .cd-tf-cur { display: inline-block; }
/* ...and the toolbar no longer shifts 13 px between the two (REGRESSION5 m7) WITHOUT a blank slot: the chip with its label
   is 56 px (any label up to "45m", centred), the caret-only chip stays compact and the 22 px it saves go to the gap around the
   separator after it, which reads as spacing, never as an empty dropdown. Below 1700 px the label always shows (no favourites
   row): the chip keeps its 56 px and the separator its normal gap. */
.cd-tf-favs:not(:empty) + .cd-tb-dd.cd-cur-hidden { min-width: 56px; justify-content: center; }
.cd-tf-favs:not(:empty) + .cd-tb-dd:not(.cd-cur-hidden) + .cd-tb-sep { margin-inline: calc(var(--a-sp-4) + 11px); }
@media (max-width: 1700px) {
  .cd-tf-favs:not(:empty) + .cd-tb-dd { min-width: 56px; justify-content: center; }
  .cd-tf-favs:not(:empty) + .cd-tb-dd:not(.cd-cur-hidden) + .cd-tb-sep { margin-inline: var(--a-sp-4); }
}

/* the current layout's picture (atlas.js paintLayoutBtn): the picker's mini drawing at icon size */
.at-layout-btn .at-lb-pic { width: 17px; height: 14px; gap: 1.5px; flex: none; }
.at-layout-btn .at-lb-pic i { border-width: 1.3px; }
.at-layout-btn .at-lb-pic.dense { gap: 1px; }
.at-layout-btn .at-lb-pic.dense i { border-width: 1px; }
.at-layout-btn .at-lb-n { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); font-variant-numeric: tabular-nums; min-width: 1ch; }

/* Trade: the primary action, and a stub for now. */
.cd-trade { height: 30px; padding: 0 var(--a-sp-6); margin: 0 var(--a-sp-2); border: 0; border-radius: var(--a-r-md);
  background: var(--cd-trade-bg); color: var(--cd-trade-fg); font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); cursor: not-allowed;
  box-shadow: 0 0 0 1px var(--cd-trade-ring), 0 4px 16px -4px var(--cd-trade-glow); flex: none;
  transition: box-shadow .15s ease, transform .15s ease; }
.cd-trade:hover { box-shadow: 0 0 0 1px var(--cd-trade-ring-hover), 0 6px 22px -4px var(--cd-trade-glow-hover); }
.cd-trade:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
/* Light theme: the aqua needs an edge to hold on a white bar. */
:root[data-theme="light"] .cd-trade { box-shadow: 0 0 0 1px var(--cd-trade-edge-light), 0 4px 14px -6px var(--cd-trade-glow-light); }

/* Sun in dark (switch to light), moon in light. */
.cd-i-moon { display: none; }
:root[data-theme="light"] .cd-i-sun { display: none; }
:root[data-theme="light"] .cd-i-moon { display: block; }

/* Account chip. */
.at-avatar {
  flex: none; width: 30px; height: 30px; padding: 0; margin-left: var(--a-sp-2); border-radius: var(--a-r-pill);
  border: 1px solid var(--a-line-2); background: var(--a-raised); cursor: pointer;
  overflow: hidden; display: grid; place-items: center; line-height: 0;
}
.at-avatar:hover, .at-avatar[aria-expanded="true"] { border-color: var(--a-accent); }
.at-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-avatar-i { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-accent); letter-spacing: .02em; }

/* -- Top bar, roomier (operator 2026-09-30): 48 px bar, 34 px controls, 18 px icons, 13 px labels,
      the market as a filled pill (TradingView-like proportions, ChartDeck look). --------------------- */
.cd-top { gap: var(--a-sp-4); padding-left: max(var(--a-sp-4), env(safe-area-inset-left)); padding-right: max(var(--a-sp-4), env(safe-area-inset-right));
  box-shadow: 0 1px 0 var(--a-line-1), var(--a-sh-bar, none); }
.cd-top svg { width: 18px; height: 18px; }
.cd-top .cd-caret { width: 10px !important; height: 10px !important; }
.cd-tb { gap: var(--a-sp-2); }
.cd-tb-sep { height: 24px; margin: 0 var(--a-sp-4); }
.cd-tb-btn, .cd-tb-sym, .cd-tb-logo, .cd-tf { height: 34px; min-width: 34px; font-size: var(--a-fs-md); border-radius: var(--a-r-md); }
.cd-tf { min-width: 32px; padding: 0 var(--a-sp-4); font-size: var(--a-fs-md); }
.cd-mark { width: 26px; height: 26px; }
.cd-word { font-size: var(--a-fs-lg); }
/* The market chip has a FIXED width (UI tidy-up, review item 2): switching from "BTCUSDT Binance" to "XYZTSLAUSD Hyperliquid"
   no longer pushes the timeframes, Indicators and Alert sideways. The venue gives way first (ellipsis), then the symbol. */
.cd-tb-sym { height: 34px; width: 216px; justify-content: flex-start; padding: 0 var(--a-sp-5) 0 var(--a-sp-4); gap: var(--a-sp-4);
  color: var(--a-fg-1); background: var(--a-glass-2); border-color: var(--a-line-2); border-radius: var(--a-r-pill); }
.cd-tb-sym:hover { background: var(--a-hover); border-color: var(--a-line-3); }
.cd-tb-sym svg { color: var(--a-fg-3); }
.cd-tb-sym b { flex: 0 1 auto; min-width: 0; font: var(--a-fw-semibold) var(--a-fs-md)/1 var(--a-sans); letter-spacing: .005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-sym-v { flex: 0 100 auto; min-width: 0; font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); color: var(--a-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-split > .cd-tb-btn + .cd-tb-btn { min-width: 22px; }
.cd-trade { height: 34px; padding: 0 var(--a-sp-7, 18px); border-radius: var(--a-r-md); font-size: var(--a-fs-md); }
.at-avatar { width: 34px; height: 34px; }
.at-avatar-i { font-size: var(--a-fs-sm); }

/* ==========================================================================
   LEFT DRAWING BAR (#cd-drawbar) - the container only; the drawing module fills it.
   ========================================================================== */

.cd-drawbar {
  flex: none; width: var(--a-rail-w); min-height: 0; background: var(--a-panel);
  display: flex; flex-direction: column; align-items: center; gap: var(--a-sp-1); padding: var(--a-sp-2) 0;
  overflow: hidden auto; scrollbar-width: none; position: relative; z-index: var(--z-bars);
}
.cd-drawbar::-webkit-scrollbar { display: none; }
/* The fallback rail (atlas-rail.js) inside it. */
.cd-drawbar .at-rail-btn { width: 32px; height: 32px; border-radius: var(--a-r-md); }
.cd-drawbar .at-rail-sep { width: 20px; background: var(--a-line-1); }

/* ==========================================================================
   RIGHT WIDGET BAR + PANEL
   ========================================================================== */

/* Rail redesign (operator 2026-10-15: "larger, more detailed, some nice colour, clean"): each button is an icon on a
   tinted tile with a short word under it (cd-panels.js labelRail). The tile colour says the group: blue = your workspace
   (watchlist, alerts, data), teal = market data (flow + book, tools + ETF flows), amber = news + calendar, pink = music,
   violet = the full views (sectors, trend, strata, screener, tapes, script screen, liquidations), slate = inbox and help. The hues are theme tokens (brand/theme.css --cd-wb-*). */
.cd-wbar {
  flex: none; width: var(--a-wbar-w); background: var(--a-panel);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--a-sp-4) 0;
  position: relative; z-index: calc(var(--z-view) + 2);
  overflow: hidden auto; scrollbar-width: none;
}
.cd-wbar::-webkit-scrollbar { display: none; }
.cd-wb { --wb-hue: var(--cd-wb-slate);
  position: relative; flex: none; width: calc(var(--a-wbar-w) - 6px); min-height: 44px; padding: 2px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  border: 0; border-radius: var(--a-r-lg); background: transparent; color: color-mix(in oklab, var(--wb-hue) 78%, var(--a-fg-1));
  transition: background var(--a-dur-1) ease, color var(--a-dur-1) ease; }
.cd-wb svg { flex: none; width: 29px; height: 29px; padding: 5.5px; box-sizing: border-box; border-radius: var(--a-r-md);
  background: color-mix(in oklab, var(--wb-hue) var(--cd-wb-tile), transparent);
  transition: background var(--a-dur-1) ease, color var(--a-dur-1) ease, transform var(--a-dur-1) ease; }
.cd-wb-l { display: block; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 12px; font: var(--a-fw-semibold) var(--a-fs-2xs)/12px var(--a-sans); letter-spacing: .01em; color: var(--a-fg-3); }
.cd-wb:hover { background: var(--a-hover); }
.cd-wb:hover svg { background: color-mix(in oklab, var(--wb-hue) var(--cd-wb-tile-hover), transparent); }
.cd-wb:hover .cd-wb-l { color: var(--a-fg-1); }
.cd-wb[aria-pressed="true"] { background: color-mix(in oklab, var(--wb-hue) 9%, transparent); box-shadow: none; }
.cd-wb[aria-pressed="true"] svg { background: var(--wb-hue); color: var(--a-on-accent); }
.cd-wb[aria-pressed="true"] .cd-wb-l { color: var(--a-fg-1); }
.cd-wb[aria-pressed="true"]::before { content: ''; position: absolute; inset-inline-end: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: var(--a-r-sm); background: var(--wb-hue); }
.cd-wb:focus-visible { outline: 2px solid var(--wb-hue); outline-offset: -2px; }
.cd-wb[data-panel="watchlist"], .cd-wb[data-panel="alerts"], .cd-wb[data-panel="data"] { --wb-hue: var(--cd-wb-blue); }
.cd-wb[data-panel="orderflow"], .cd-wb[data-panel="tools"] { --wb-hue: var(--cd-wb-teal); }
.cd-wb[data-panel="news"] { --wb-hue: var(--cd-wb-amber); }
.cd-wb[data-panel="music"] { --wb-hue: var(--cd-wb-pink); }
.cd-wb.at-view-b { --wb-hue: var(--cd-wb-violet); }
.cd-wb-sep { flex: none; width: 28px; height: 1px; margin: var(--a-sp-2) 0; background: var(--a-line-1); }
.cd-wb-fill { flex: 1 0 var(--a-sp-2); }
.cd-wb-n { position: absolute; top: 1px; right: 4px; min-width: 15px; height: 15px; padding: 0 var(--a-sp-2); border-radius: var(--a-r-pill);
  background: var(--a-accent-strong); color: var(--a-on-accent); font: var(--a-fw-semibold) var(--a-fs-2xs)/15px var(--a-sans); text-align: center;
  box-shadow: 0 0 0 2px var(--a-panel); }
/* a merged panel's tabs (cd-panels.js paintTabs) */
.cd-panel-tabs { flex: none; display: flex; gap: var(--a-sp-1); padding: 0 var(--a-sp-4) var(--a-sp-4); border-bottom: 1px solid var(--a-line-1); }
.cd-panel-tabs[hidden] { display: none; }
.cd-panel-tab { flex: 1; min-width: 0; height: 28px; padding: 0 var(--a-sp-4); border: 0; border-radius: var(--a-r-md); cursor: pointer;
  background: transparent; color: var(--a-fg-3); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-panel-tab:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-panel-tab[aria-selected="true"] { background: var(--a-sel-bg); color: var(--a-sel-fg); }
@media (prefers-reduced-motion: reduce) { .cd-wb, .cd-wb svg { transition: none; } }
/* the buttons do not fit (a short window, or more view buttons on a plan): icons only, so Help stays on screen; the title
   still names each button (cd-panels.js fitRail sets the class) */
/* the rail word is the panel's one name (cd-panels.js GLOSSARY): two short lines at most ("Data / window"), a long single
   word one size smaller (.cd-wb-l-s) */
.cd-wb-l { height: auto; max-height: 24px; white-space: normal; text-align: center; line-height: 12px; overflow-wrap: normal;
  word-break: keep-all; line-break: strict; hyphens: manual;   /* a katakana word is never split between two kana (review 0.9.60 L#118) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cd-wb-l.cd-wb-l-s { font-size: calc(var(--a-fs-2xs) * .95); letter-spacing: 0; }   /* 9.5 px: no rail word smaller (picture review 0.9.57) */
.cd-wbar.cd-wbar-nolabels .cd-wb-l { display: none; }
.cd-wbar.cd-wbar-nolabels .cd-wb { min-height: 36px; }
.cd-wbar.cd-wbar-tight .cd-wb-l { display: none; }
.cd-wbar.cd-wbar-tight .cd-wb { min-height: 36px; }
/* compact (cd-panels.js fitRail, before it gives up the words): smaller tiles, 11 px lines, the words stay */
.cd-wbar.cd-wbar-compact .cd-wb { min-height: 0; padding: 1px 0; gap: 1px; }
.cd-wbar.cd-wbar-compact .cd-wb svg { width: 25px; height: 25px; padding: 4.5px; }
.cd-wbar.cd-wbar-compact .cd-wb-l { line-height: 11px; max-height: 22px; }
.cd-wbar.cd-wbar-compact .cd-wb-sep { margin: 1px 0; }

.cd-panel {
  flex: none; width: var(--a-panel-w); max-width: 86vw; min-height: 0; background: var(--a-panel);
  display: flex; flex-direction: column; position: relative; z-index: calc(var(--z-view) + 1);
}
.cd-panel-head { flex: none; height: 40px; display: flex; align-items: center; gap: var(--a-sp-4); padding: 0 var(--a-sp-2) 0 var(--a-sp-5);
  border-bottom: 1px solid var(--a-line-1); }
.cd-panel-t { margin: 0; flex: 1; font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); letter-spacing: .01em; color: var(--a-fg-1); }
.cd-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* ONE bottom fade for every vertical scroll area (review 0.9.53: the Data window ended in a heading cut at the edge; review 0.9.68
   T1: the 20 px strip was too faint to read as "more below" on the data window, Top markets, the ETF fund list, Music, Help and
   the Language list). A sticky strip after the content: while more is below it lies over the last visible rows; at the end of
   the list it sits below the last row, so nothing is covered. Any scroll box joins with the class cd-fadefoot; --cd-fade-bg is
   the colour the strip fades into (the box's own background). */
.cd-panel-body::after, .cd-fadefoot::after, .cd-help-main::after, .cd-help-cols > .cd-help-keyl::after, .cdl-list::after, .at-pal-list::after {
  content: ''; position: sticky; bottom: 0; display: block; flex: none; height: 48px; pointer-events: none; list-style: none;
  /* 0.9.74 (review: still read as a cut - the Top markets row after XRP, the ETF fund list, Music "RECENT", Help "Plans &
     billing", the phone Seasonals): taller (32 -> 48 px), opaque over its lower third, and above the rows' own layers (a chip,
     a cover, a canvas made a stacking layer over it). No scroll-driven animation: it must hold with reduced motion too. */
  z-index: 3;
  background:
    radial-gradient(farthest-side at 50% 100%, color-mix(in oklab, var(--a-fg-1) calc(var(--cd-sh) * var(--cd-fade-sh, 28%)), transparent), transparent) center bottom / 100% 16px no-repeat,
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--cd-fade-bg, var(--a-panel)) 72%, transparent) 45%, var(--cd-fade-bg, var(--a-panel)) 72%); }
/* 0.9.74 (review): ...and while more is below, a shade at the very edge (the menus' cue, chartdeck.css .cd-scrollfade): the fade alone
   lay over the empty gap between two blocks and read as a cut. Driven by the scroll position (scroll-driven animation): full
   until the last 48 px of the scroll, gone at the end, none when nothing scrolls (an inactive timeline leaves --cd-sh at 0).
   A scroll-linked shade is not motion: it holds under reduced motion (atlas.css stops every animation there, hence !important). */
@property --cd-sh { syntax: '<number>'; inherits: false; initial-value: 0; }
/* 1.0.2 (review 0974 B3, tools-quadrant-light / -phone-light: "a dark grey shadow blob" at the bottom of the light panel): on a
   light panel the shade is ink (--a-fg-1 is near black there), so 28 % of it read as a grey smudge; light themes use a third of it,
   a cue as faint as the dark theme's light shade */
:root[data-theme="light"] { --cd-fade-sh: 9%; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --cd-fade-sh: 9%; } }
@keyframes cd-sh { from { --cd-sh: 1; } to { --cd-sh: 0; } }
@supports (animation-timeline: scroll()) {
  .cd-panel-body::after, .cd-fadefoot::after, .cd-help-main::after, .cd-help-cols > .cd-help-keyl::after, .cdl-list::after, .at-pal-list::after {
    animation: cd-sh linear both !important; animation-timeline: scroll(nearest block) !important; animation-range: calc(100% - 48px) 100% !important; }
}
.cd-help-main, .cd-help-cols > .cd-help-keyl, .cdl-list, .at-pal-list, .cd-dialog .cd-fadefoot, .cd-menu.cd-fadefoot { --cd-fade-bg: var(--a-raised); }
/* a row the keyboard moves to stops above the fade, not under it */
.at-pal-list, .cdl-list { scroll-padding-bottom: 48px; }
.cd-panel-body::-webkit-scrollbar { width: 6px; }
.cd-panel-body::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.cd-pn { padding: var(--a-sp-4) 0 var(--a-sp-6); }
.cd-pn-h { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4);
  padding: var(--a-sp-5) var(--a-sp-5) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans);
  letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }
.cd-pn-note { padding: var(--a-sp-2) var(--a-sp-5); font: var(--a-fs-xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); margin: 0; }
.cd-pn.cd-st-host, .cd-pn-st { min-height: 240px; }
/* Help window (cd-panels.js fillHelp / openHelp, operator 2026-10-20: a centred dialog, no longer the side panel): the search on
   top, then two columns - links on the left, the shortcuts grouped by section with the shared keycaps on the right, each scrolling
   on its own. One column, full screen, on a phone (the @media (max-width: 700px) block at the end of this file). */
.cd-modal:has(> .cd-help-dlg) { align-items: center; padding: var(--a-sp-6); }
.cd-dialog.cd-help-dlg { width: min(1040px, calc(100vw - 48px)); height: min(88vh, 820px); max-height: 88vh; }
.cd-help-dlg .cd-dlg-head { padding-inline-end: var(--a-sp-4); }
.cd-help-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cd-help-dlg .cd-help-q { flex: none; margin: var(--a-sp-2) var(--a-sp-6) var(--a-sp-4); }
.cd-help-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--a-line-1); }
.cd-help-cols.is-one { grid-template-columns: minmax(0, 1fr); }
.cd-help-main, .cd-help-cols > .cd-help-keyl { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--a-sp-2) 0 var(--a-sp-6); }
.cd-help-cols > .cd-help-keyl { border-inline-start: 1px solid var(--a-line-1); }
.cd-help-main .cd-row-s { white-space: normal; }
.cd-help-main::-webkit-scrollbar, .cd-help-cols > .cd-help-keyl::-webkit-scrollbar { width: 6px; }
.cd-help-main::-webkit-scrollbar-thumb, .cd-help-cols > .cd-help-keyl::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.cd-help-q { display: flex; align-items: center; gap: var(--a-sp-4); margin: var(--a-sp-4) var(--a-sp-5); padding: 0 var(--a-sp-4); height: 34px;
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); background: var(--a-sunken); }
.cd-help-q:focus-within { border-color: var(--a-accent-t4); outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.cd-help-q svg { flex: none; color: var(--a-fg-3); }
.cd-help-in { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); outline: none; }
.cd-help-kg { margin: 0 var(--a-sp-5) var(--a-sp-2); border: 1px solid var(--a-line-1); border-radius: var(--a-r-md); }
.cd-help-kg > summary { display: flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-4); cursor: pointer; list-style: none;
  font: var(--a-fw-semibold) var(--a-fs-sm)/1.2 var(--a-sans); color: var(--a-fg-1); }
.cd-help-kg > summary::-webkit-details-marker { display: none; }
.cd-help-kg > summary::after { content: ''; margin-inline-start: auto; width: 6px; height: 6px; border: solid var(--a-fg-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cd-help-kg[open] > summary::after { transform: rotate(225deg); }
.cd-help-kn { font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
.cd-help-kr { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-4); border-top: 1px solid var(--a-line-1); }
.cd-help-kt { min-width: 0; font: var(--a-fw-medium) var(--a-fs-xs)/1.3 var(--a-sans); color: var(--a-fg-2); }
/* The Help window (operator 2026-10-20: it read "skinny small": the side panel's 34 px rows and 10-11 px type in a wide window).
   Cards with an icon tile, larger type, a wider window; the shortcut list a step larger too. Only inside .cd-help-dlg. */
.cd-help-dlg .cd-help-q { height: 42px; }
.cd-help-dlg .cd-help-in { font-size: var(--a-fs-md); }
.cd-help-dlg .cd-help-main { padding: var(--a-sp-2) var(--a-sp-6) var(--a-sp-7); }
.cd-help-dlg .cd-help-main .cd-pn-h { padding: var(--a-sp-6) var(--a-sp-1) var(--a-sp-4); }
.cd-help-dlg .cd-help-main .cd-row { display: flex; align-items: center; gap: var(--a-sp-5); min-height: 60px; margin: 0 0 var(--a-sp-4);
  padding: var(--a-sp-5) var(--a-sp-6); border: 1px solid var(--a-line-1); border-radius: var(--a-r-md); background: var(--a-raised);
  color: var(--a-fg-1); text-decoration: none; text-align: start; width: 100%; }
.cd-help-dlg .cd-help-main .cd-row:hover { background: var(--a-hover); border-color: var(--a-line-2); }
.cd-help-dlg .cd-help-main .cd-row:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: 1px; }
.cd-help-dlg .cd-help-main .cd-row-t { font-size: var(--a-fs-lg); white-space: normal; }
.cd-help-dlg .cd-help-main .cd-row-s { font-size: var(--a-fs-sm); line-height: var(--a-lh-body); white-space: normal; }
.cd-help-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--a-r-md);
  background: var(--a-accent-t1); color: var(--a-accent); }
.cd-help-ic svg { width: 18px; height: 18px; }
.cd-help-dlg .cd-help-main .cd-pn-note { padding: var(--a-sp-4) var(--a-sp-1) 0; }
.cd-help-dlg .cd-help-cols > .cd-help-keyl .cd-pn-h { padding-block: var(--a-sp-6) var(--a-sp-4); }
.cd-help-dlg .cd-help-kg > summary { font-size: var(--a-fs-md); padding: var(--a-sp-5) var(--a-sp-6); }
.cd-help-dlg .cd-help-kr { padding: var(--a-sp-4) var(--a-sp-6); }
.cd-help-dlg .cd-help-kt { font-size: var(--a-fs-md); }
.cd-pn-st { position: relative; }
.cd-pn-check { display: flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-5); font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-1); cursor: pointer; }
.cd-pn-check input { accent-color: var(--a-accent); margin: 0; }
.cd-pn-note b { color: var(--a-fg-1); font-weight: var(--a-fw-semibold); }
.cd-pn-empty { margin: var(--a-sp-5); padding: var(--a-sp-6) var(--a-sp-5); border: 1px dashed var(--a-line-2); border-radius: var(--a-r-md);
  text-align: center; font: var(--a-fs-xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }
.cd-pn-empty svg { width: 22px; height: 22px; color: var(--a-fg-4); display: block; margin: 0 auto var(--a-sp-4); }
.cd-link { color: var(--a-accent); background: none; border: 0; padding: 0; font: inherit; font-weight: var(--a-fw-semibold); cursor: pointer; text-decoration: none; }
.cd-link:hover { text-decoration: underline; }

/* A row in a panel list (watchlist, studies, notifications). */
.cd-row { display: flex; align-items: center; gap: var(--a-sp-4); min-height: 34px; padding: 0 var(--a-sp-4) 0 var(--a-sp-5);
  border: 0; background: transparent; width: 100%; text-align: left; color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-tight) var(--a-sans); cursor: pointer; }
/* a row that is a link reads like the rows that are buttons (Help: "Plans & billing" and "Your account" were underlined beside a
   plain "What's new": screenshot review 2026-10-13) */
a.cd-row, a.cd-row:hover { text-decoration: none; color: var(--a-fg-1); }
.cd-row:hover { background: var(--a-hover); }
.cd-row.on { background: var(--a-accent-t1); }
.cd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--a-sp-1); }
.cd-row-t { font-weight: var(--a-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-s { font: var(--a-fw-medium) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-v { font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-mono); color: var(--a-fg-2); font-variant-numeric: tabular-nums; text-align: right; }
.cd-row-x { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--a-r-sm);
  color: var(--a-fg-3); cursor: pointer; opacity: 0; }
.cd-row:hover .cd-row-x, .cd-row-x:focus-visible { opacity: 1; }
.cd-row-x:hover { color: var(--a-fg-1); background: var(--a-line-1); }
.cd-row-x svg { width: 13px; height: 13px; }

/* Data window: the selected market's numbers as a quiet two-column list. */
.cd-dw-stats { display: grid; grid-template-columns: 1fr auto; gap: 0; padding: 0 0 var(--a-sp-4); }
.cd-dw-stats .cd-dw-k, .cd-dw-stats .cd-dw-v { padding: var(--a-sp-4) var(--a-sp-5); border-bottom: 1px solid var(--a-line-1); }
.cd-dw-k { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); }
.cd-dw-v { font: var(--a-fw-semibold) var(--a-fs-xs)/var(--a-lh-tight) var(--a-mono); color: var(--a-fg-1); text-align: right; font-variant-numeric: tabular-nums; }
.cd-dw-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--a-sp-4); padding: var(--a-sp-5) var(--a-sp-5) var(--a-sp-4); }
.cd-dw-head b { font: var(--a-fw-semibold) var(--a-fs-lg)/1 var(--a-sans); color: var(--a-fg-1); }
.cd-dw-head span { font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-fg-3); }
.cd-dw-px { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--a-sp-4); padding: 0 var(--a-sp-5) var(--a-sp-5); border-bottom: 1px solid var(--a-line-1); }
.cd-dw-px .at-sx-last { font: var(--a-fw-semibold) var(--a-fs-xl)/1 var(--a-mono); color: var(--a-fg-1); font-variant-numeric: tabular-nums; transition: color .9s ease-out; }
.cd-dw-px .at-sx-last.up { color: var(--a-up); transition: color .05s; }
.cd-dw-px .at-sx-last.down { color: var(--a-down); transition: color .05s; }
.cd-dw-px .at-sx-chg { font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-mono); font-variant-numeric: tabular-nums; }
.at-sx-cd { margin-left: var(--a-sp-4); color: var(--a-fg-3); font-weight: var(--a-fw-medium); }
.at-sx-range { position: relative; width: 96px; height: 3px; margin: var(--a-sp-2) 0 0 auto; border-radius: var(--a-r-pill);
  background: linear-gradient(90deg, var(--a-down-t3), var(--a-line-2), var(--a-up-t3)); }
.at-sx-range i { position: absolute; top: -3px; width: 2px; height: 9px; margin-left: -1px; border-radius: var(--a-r-sm); background: var(--a-fg-1); }
.at-sx-src { grid-column: 1 / -1; margin: var(--a-sp-4) var(--a-sp-5) 0; font: var(--a-fs-2xs)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }

/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.cd-bottom { position: relative; z-index: var(--z-bars); height: var(--at-status-h);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--a-sp-4);
  padding: 0 var(--a-sp-4); padding-left: max(var(--a-sp-4), env(safe-area-inset-left));
  padding-right: max(var(--a-sp-4), env(safe-area-inset-right));
  border-top: 1px solid var(--a-line-1); background: var(--a-panel);
  font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-bb-l, .cd-bb-m, .cd-bb-r { display: flex; align-items: center; gap: var(--a-sp-4); min-width: 0; }
.cd-bb-m { gap: var(--a-sp-5); overflow: hidden; }
.cd-bb-r { gap: var(--a-sp-4); }
.cd-ranges { display: flex; align-items: center; gap: 0; }
.cd-rg, .cd-bb-btn { height: 24px; min-width: 24px; padding: 0 var(--a-sp-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-2);
  border: 0; border-radius: var(--a-r-sm); background: transparent; color: var(--a-fg-2); cursor: pointer;
  font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); font-variant-numeric: tabular-nums; }
.cd-rg:hover, .cd-bb-btn:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-rg.on { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-bb-btn[aria-pressed="true"] { color: var(--a-accent); }
.cd-bb-btn svg { width: 14px; height: 14px; }
.cd-bottom .cd-tb-sep { height: 14px; }
.at-sb-lat.ok { color: var(--a-up); } .at-sb-lat.warn { color: var(--a-warn); } .at-sb-lat.bad { color: var(--a-down); }
.at-strip { display: flex; align-items: center; gap: var(--a-sp-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--a-fg-3); }
.at-strip b { color: var(--a-fg-2); font-weight: var(--a-fw-semibold); }
.at-strip .flag { color: var(--a-warn); }
.at-sb-sessions { display: flex; align-items: center; gap: var(--a-sp-4); }
.at-sb-sess { color: var(--a-fg-3); }
.at-sb-sess.open { color: var(--a-fg-2); }
.at-sb-sess.open::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: var(--a-sp-2); vertical-align: 1px;
  border-radius: var(--a-r-pill); background: var(--a-up); }
.at-sb-sess.soon { color: var(--a-warn-soft); }
.at-sb-clock { color: var(--a-fg-1); font-weight: var(--a-fw-semibold); }
.at-sb-ver { color: var(--a-fg-4); }

/* ==========================================================================
   VIEWS (Sectors / Trend) sit over the chart area, beside the widget bar.
   ========================================================================== */

.at-sec { right: calc(var(--a-wbar-w) + 1px) !important; }
body.cd-zen .at-sec { right: 0 !important; }
/* A way back that is always on screen (cd-shell.js viewBar, regression 2026-10-03 L2): one slim bar above every
   full view, also when the side bar that holds the view switch is hidden (maximised mode, phones). */
.cd-viewbar { display: none; position: fixed; top: var(--at-top); left: 0; right: calc(var(--a-wbar-w) + 1px); height: var(--cd-viewbar-h, 36px);
  z-index: calc(var(--z-view) + 1); align-items: center; gap: var(--a-sp-5); padding: 0 var(--a-sp-5); box-sizing: border-box;
  background: var(--a-raised); border-bottom: 1px solid var(--a-line-2); }
body.at-sec-open .cd-viewbar { display: flex; }
body.at-sec-open .at-sec { top: calc(var(--at-top) + var(--cd-viewbar-h, 36px)); }
body.cd-zen .cd-viewbar { right: 0; }
.cd-viewbar-back { display: inline-flex; align-items: center; gap: var(--a-sp-4); height: 26px; }
.cd-viewbar-back svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-viewbar-k { color: var(--a-fg-3); font-size: var(--a-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[dir="rtl"] .cd-viewbar { right: 0; left: calc(var(--a-wbar-w) + 1px); }
html[dir="rtl"] body.cd-zen .cd-viewbar { left: 0; }
/* An open side panel sits beside a full view, never over it (regression 2026-10-04, S2): the view and its bar leave
   the panel's width free as well (cd-panels.js sets body.cd-panel-on). Phones keep the panel as a sheet over the view. */
@media (min-width: 821px) {
  body.cd-panel-on .at-sec, body.cd-panel-on .cd-viewbar { right: calc(var(--a-wbar-w) + 1px + min(var(--a-panel-w), 86vw)) !important; }
  body.cd-zen.cd-panel-on .at-sec, body.cd-zen.cd-panel-on .cd-viewbar { right: 0 !important; }
  html[dir="rtl"] body.cd-panel-on .at-sec, html[dir="rtl"] body.cd-panel-on .cd-viewbar { right: 0 !important; left: calc(var(--a-wbar-w) + 1px + min(var(--a-panel-w), 86vw)); }
  html[dir="rtl"] body.cd-zen.cd-panel-on .at-sec, html[dir="rtl"] body.cd-zen.cd-panel-on .cd-viewbar { left: 0; }
}
@media (max-width: 820px) { .cd-viewbar, html[dir="rtl"] .cd-viewbar { left: 0; right: 0; } .cd-viewbar-k { display: none; } }
.at-sec.cd-locked .at-sec-ctl, .at-sec.cd-locked .at-sec-top, .at-sec.cd-locked .at-tr-cards,
.at-sec.cd-locked .at-tr-req, .at-sec.cd-locked .at-sec-note { display: none !important; }
.at-sec.cd-locked .at-sec-tw { background: transparent; border: 0; padding: 0; }

/* ==========================================================================
   EMPTY / LOADING / ERROR STATE (CdUI.state, review 0.9.55 X1): one look for every panel and pane
   ========================================================================== */

.cd-st-host { position: relative; }
/* the last data the panel drew stays, dimmed, under the message */
.cd-st-dim > :not(.cd-st) { opacity: .38; filter: saturate(.6); pointer-events: none; transition: opacity .2s; }
.cd-st { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--a-sp-2); padding: var(--a-sp-6); text-align: center; pointer-events: none;
  font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug, 1.35) var(--a-sans); color: var(--a-fg-2); }
.cd-st > * { pointer-events: auto; max-width: 34ch; }
.cd-st-t { font-weight: var(--a-fw-semibold); color: var(--a-fg-1); }
.cd-st-r { color: var(--a-fg-2); }
.cd-st-t, .cd-st-r { text-wrap: balance; }   /* no lone "one." on the last line (review 0.9.60 #214) */
.cd-st-cd { font: var(--a-fw-medium) var(--a-fs-xs)/1.2 var(--a-mono, var(--a-sans)); color: var(--a-fg-3); font-variant-numeric: tabular-nums; }
.cd-st-a { display: flex; gap: var(--a-sp-4); margin-top: var(--a-sp-2); }
.cd-st-error .cd-st-t { color: var(--a-fg-1); }
.cd-st-dim > .cd-st { background: radial-gradient(closest-side, var(--a-bg) 40%, transparent); }
.cd-st-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--a-line-2); border-top-color: var(--a-accent); animation: cd-st-rot .8s linear infinite; }
@keyframes cd-st-rot { to { transform: rotate(360deg); } }
/* compact: one line for a short strip (a pane under 90 px, a table row) */
.cd-st-compact { flex-direction: row; flex-wrap: wrap; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-4); font-size: var(--a-fs-xs); }
.cd-st-compact > * { max-width: none; }
.cd-st-compact .cd-st-a { margin: 0; }
.cd-st-compact .cd-btn { height: 22px; padding: 0 var(--a-sp-4); font-size: var(--a-fs-xs); }
@media (prefers-reduced-motion: reduce) { .cd-st-spin { animation: none; } .cd-st-dim > :not(.cd-st) { transition: none; } }

/* ==========================================================================
   MENUS (toolbar dropdowns, user menu, main menu)
   ========================================================================== */

.cd-menu { position: fixed; z-index: var(--z-menu); min-width: 200px; max-width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 640px); overflow-y: auto; padding: var(--a-sp-2);
  background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); box-shadow: var(--a-sh-2);
  font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); }
/* ONE scroll rule for every menu, popover, sheet and chip row (review 0.9.55 #4 and cross-cutting #6): a max-height that
   CdUI.place sets to the room between the anchor and the screen edge, and a scroll fade (a shade at the edge that has more
   below or above; drawn by the background, so nothing listens to scroll). The phone keeps clear of the home indicator. */
:root { --cd-sab: env(safe-area-inset-bottom, 0px); }
.cd-menu, .cdm, .cd-scrollfade {
  --sf-bg: var(--a-raised); --sf-shade: color-mix(in oklab, var(--a-fg-1) 20%, transparent);
  background:
    linear-gradient(var(--sf-bg) 30%, transparent) center top / 100% 26px no-repeat local,
    linear-gradient(transparent, var(--sf-bg) 70%) center bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--sf-shade), transparent) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--sf-shade), transparent) center bottom / 100% 12px no-repeat scroll,
    var(--sf-bg);
  overscroll-behavior: contain; }
.cd-panel .cd-scrollfade { --sf-bg: var(--a-panel); }
/* a horizontal chip row / tab strip: the same cue at the left and right ends */
.cd-scrollfade-x { --sf-bg: var(--a-panel); --sf-shade: color-mix(in oklab, var(--a-fg-1) 20%, transparent);
  overflow-x: auto; scrollbar-width: none;
  background:
    linear-gradient(to right, var(--sf-bg) 30%, transparent) left center / 26px 100% no-repeat local,
    linear-gradient(to left, var(--sf-bg) 30%, transparent) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--sf-shade), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--sf-shade), transparent) right center / 12px 100% no-repeat scroll,
    var(--sf-bg); }
.cd-scrollfade-x::-webkit-scrollbar { display: none; }
@media (max-width: 820px) {
  .cd-menu, .cdm { max-height: calc(100dvh - 16px - var(--cd-sab)); padding-bottom: calc(var(--a-sp-2) + var(--cd-sab) * .5); }
}
.cd-menu::-webkit-scrollbar { width: 6px; }
.cd-menu::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.cd-mh { padding: var(--a-sp-4) var(--a-sp-4) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps);
  text-transform: uppercase; color: var(--a-fg-3); }
.cd-ms { height: 1px; margin: var(--a-sp-2) var(--a-sp-2); background: var(--a-line-1); }
.cd-mi { display: flex; align-items: center; gap: var(--a-sp-4); width: 100%; min-height: 30px; padding: 0 var(--a-sp-4);
  border: 0; border-radius: var(--a-r-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: none; }
.cd-mi:hover, .cd-mi:focus-visible { background: var(--a-hover); }
.cd-mi.on { color: var(--a-accent); }
.cd-mi[aria-disabled="true"], .cd-mi:disabled { color: var(--a-fg-3); cursor: not-allowed; }
.cd-mi[aria-disabled="true"]:hover { background: transparent; }
.cd-mi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mi-k { flex: none; font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
/* a menu item with a description line (0.9.64 chart types: what the type shows) */
.cd-mi.cd-mi-2 { padding-block: var(--a-sp-2); }
.cd-mi-2 .cd-mi-t { white-space: normal; }
.cd-mi-l { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mi-d { display: block; margin-top: var(--a-sp-1); font: var(--a-fw-regular) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); text-align: start; }
.cd-mi.on .cd-mi-d { color: var(--a-fg-3); }
.cd-mi-k kbd, .cd-kbd { display: inline-block; padding: var(--a-sp-1) var(--a-sp-2); border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm);
  background: var(--a-sunken); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-2); }
/* the keycap component (CdUI.kbd): one pill per key, the same everywhere */
.cd-keycap { display: inline-flex; align-items: center; gap: 2px; flex: none; direction: ltr; }
/* the app face draws the arrow keys as tiny dashes: arrows take the system face, a size up (review 0.9.60 #231) */
.cd-keycap kbd.cd-kc-arrow, .cdk-kbd.cd-kc-arrow { font-family: system-ui, -apple-system, 'Segoe UI Symbol', 'Segoe UI', sans-serif; font-size: var(--a-fs-sm); line-height: .85; }
.cd-keycap kbd { display: inline-block; min-width: 18px; padding: 3px 5px; border: 1px solid var(--a-line-2); border-bottom-width: 2px; border-radius: var(--a-r-sm);
  background: var(--a-sunken); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-2); text-align: center; white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .cd-keycap:not(.cd-keycap-always) { display: none; } }
.cd-mi svg { color: var(--a-fg-3); }
.cd-mi.on svg { color: var(--a-accent); }
.cd-mi-check { width: 16px; flex: none; color: var(--a-accent); text-align: center; }
.cd-star { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: var(--a-r-sm); padding: 0;
  background: transparent; color: var(--a-fg-4); cursor: pointer; }
.cd-star:hover { color: var(--a-warn); background: var(--a-line-1); }
.cd-star[aria-pressed="true"] { color: var(--a-warn); }
.cd-star[aria-pressed="true"] svg { fill: currentColor; }
.cd-star svg { width: 14px !important; height: 14px !important; }

/* Timeframe menu: three columns of groups on a wide screen. */
.cd-tfm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 var(--a-sp-2); width: 1020px; max-width: calc(100vw - 32px); }   /* six columns: seconds, minutes, hours, days + weeks + months stacked, then ticks and ranges (REGRESSION6 o6); no taller than the 13 range rows */
.cd-menu:has(.cd-tfm) { max-width: calc(100vw - 16px); overflow-x: hidden; }
.cd-tfm > .cd-pop-n:empty { display: none; }
.cd-tfm > .cd-pop-n { grid-column: 1 / -1; padding: 0 var(--a-sp-2) var(--a-sp-2); }
.cd-tfm .cd-mi { padding: 0 var(--a-sp-2) 0 var(--a-sp-4); min-height: 26px; }   /* 51 timeframes: compact rows keep the custom box in view at 900 px */
.cd-tfm .cd-mi { gap: var(--a-sp-2); }   /* a fifth of 900 px: the check, label, Pro badge and star need the room ("0.25% range" + Pro was cut) */
.cd-tfm .cd-mi-t { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: var(--a-lh-tight); }   /* a long translation wraps instead of ending in an ellipsis */
.cd-tfm-g { min-width: 0; padding-bottom: var(--a-sp-2); }   /* eight groups in six columns: the time scale left to right, then ticks / ranges */
.cd-tfm-stack { min-width: 0; display: grid; align-content: start; }
.cd-tfm-g-trades { border-inline-start: 1px solid var(--a-line-1); padding-inline-start: var(--a-sp-2); }   /* bars that ignore time start here */
.cd-tfm .cd-mi.is-locked .cd-mi-t { color: var(--a-fg-3); }
.cd-tfm .cd-mi.is-locked .cd-mi-k { font-size: var(--a-fs-2xs); font-weight: var(--a-fw-semibold); color: var(--a-accent); border: 1px solid currentColor; border-radius: var(--a-r-sm); padding: 0 var(--a-sp-1); line-height: 15px; }
.cd-tfm-custom { grid-column: 1 / -1; display: flex; gap: var(--a-sp-4); padding: var(--a-sp-4) var(--a-sp-2) var(--a-sp-2); border-top: 1px solid var(--a-line-1); margin-top: var(--a-sp-2); }
.cd-tfm-custom .cd-input { flex: 1; min-width: 0; }

/* Segmented control (theme switch). */
.cd-seg { display: flex; gap: var(--a-sp-1); padding: var(--a-sp-1); border-radius: var(--a-r-md); background: var(--a-sunken); border: 1px solid var(--a-line-1); }
.cd-seg button { flex: 1; height: 26px; padding: 0 var(--a-sp-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-2);
  border: 0; border-radius: calc(var(--a-r-md) - 2px); background: transparent; color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); cursor: pointer; }
.cd-seg button:hover { color: var(--a-fg-1); }
/* A segment label never breaks inside a word or into two lines ("Local time" wrapped in ja): regression 2026-10-04. */
.cd-seg button { white-space: nowrap; }
.cd-seg button[aria-pressed="true"] { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-seg svg { width: 13px !important; height: 13px !important; }

.cd-input { height: 30px; min-width: 0; padding: 0 var(--a-sp-4); border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm);
  background: var(--a-sunken); color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); }
/* custom dropdowns (CdUI enhanceSelect): the native <select> stays as the hidden source of truth */
select.cd-dd-src { display: none !important; }
.cd-dd { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4); min-width: 0; height: 30px;
  padding: 0 var(--a-sp-2) 0 var(--a-sp-4); border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm); background: var(--a-sunken);
  color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); text-align: start; cursor: pointer;
  -webkit-appearance: none; appearance: none; background-image: none; }
.cd-dd:hover { border-color: var(--a-line-3); }
.cd-dd:focus-visible, .cd-dd[aria-expanded="true"] { border-color: var(--a-accent-t4); outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.cd-dd:disabled { opacity: .5; cursor: not-allowed; }
.cd-dd-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-dd-c { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--a-fg-3); }
.cd-dd[aria-expanded="true"] .cd-dd-c { transform: rotate(180deg); }
.cd-menu.cd-dd-menu { z-index: calc(var(--z-dialog, 80) + 6); }   /* above the dialog that holds the select */
.cd-dd-f { width: 100%; margin-bottom: var(--a-sp-2); position: sticky; top: 0; z-index: 1; }
.cd-input:focus { border-color: var(--a-accent-t4); outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.cd-btn { height: 30px; padding: 0 var(--a-sp-5); border-radius: var(--a-r-md); border: 1px solid var(--a-line-2); background: var(--a-raised);
  color: var(--a-fg-1); font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-4); text-decoration: none; }
.cd-btn:hover { border-color: var(--a-line-3); background: var(--a-hover); }
.cd-btn.primary { background: var(--a-accent-strong); border-color: transparent; color: var(--a-on-accent); }
.cd-btn.primary:hover { background: var(--a-accent-strong-hover); }
.cd-btn.danger { color: var(--a-down); border-color: var(--a-down-t1); }
.cd-btn.danger:hover { background: var(--a-down-t1); }
.cd-btn.holo { background: var(--a-holo); border-color: transparent; color: var(--cd-on-holo); }
.cd-btn.holo:hover { filter: brightness(1.04) saturate(1.05); }
/* a disabled button reads as disabled, with no hover change (sweep 2026-10-19 S175: the locked "Post thesis" looked clickable) */
.cd-btn:disabled { opacity: .45; cursor: not-allowed; }
.cd-btn:disabled:hover { border-color: var(--a-line-2); background: var(--a-raised); }
.cd-btn.primary:disabled:hover { border-color: transparent; background: var(--a-accent-strong); }
.cd-btn.danger:disabled:hover { border-color: var(--a-down-t1); }
.cd-btn.holo:disabled:hover { border-color: transparent; background: var(--a-holo); filter: none; }

/* -- user menu --------------------------------------------------------------------------- */
/* The popover's max-height scrolls (phone landscape cut the menu off before Sign out: sweep 2026-10-19 S197). */
.cd-um { min-width: 272px; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.cd-um-head { display: flex; align-items: center; gap: var(--a-sp-5); padding: var(--a-sp-6) var(--a-sp-5) var(--a-sp-5); position: relative; }
.cd-um-head::after { content: ''; position: absolute; left: var(--a-sp-5); right: var(--a-sp-5); bottom: 0; height: 1px; background: var(--a-holo-h); opacity: .6; }
.cd-um-av { width: 44px; height: 44px; border-radius: var(--a-r-pill); flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--a-accent-t2); color: var(--a-accent); font: var(--a-fw-semibold) var(--a-fs-lg)/1 var(--a-sans); box-shadow: 0 0 0 1px var(--a-line-2); }
.cd-um-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-um-who { min-width: 0; display: grid; gap: var(--a-sp-2); }
.cd-um-name { font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-um-mail { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-badge { justify-self: start; display: inline-flex; align-items: center; height: 18px; padding: 0 var(--a-sp-4); border-radius: var(--a-r-pill);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase;
  color: var(--a-fg-2); border: 1px solid var(--a-line-2); }
.cd-badge.pro { color: var(--a-accent); border-color: var(--a-accent-t3); background: var(--a-accent-t1); }
.cd-badge.plus { color: var(--a-accent); border-color: var(--a-accent-t3); }
.cd-badge.elite { color: var(--cd-on-holo); background: var(--a-holo); border-color: transparent; }
.cd-um-body { padding: var(--a-sp-2) var(--a-sp-2); }
.cd-um-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-5); padding: var(--a-sp-2) var(--a-sp-4); }
.cd-um-theme .cd-seg button { flex: 1 1 calc(50% - var(--a-sp-1)); }   /* two by two: "High contrast" alone on a second row read as broken (review 0.9.60 #238) */
.cd-um-theme > span { font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); color: var(--a-fg-2); }

/* ==========================================================================
   MODALS: symbol search, go to date, timeframe box, save layout
   ========================================================================== */

.cd-modal { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; justify-content: center; align-items: flex-start;
  padding: 9vh var(--a-sp-6) var(--a-sp-6); background: var(--a-scrim); }
.cd-dialog { width: 680px; max-width: 100%; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; position: relative;
  background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg); box-shadow: var(--a-sh-3); }
.cd-dialog::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: var(--a-holo-h); opacity: .7; }
.cd-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4); padding: var(--a-sp-5) var(--a-sp-5) var(--a-sp-2) var(--a-sp-6); }
.cd-dlg-t { margin: 0; font: var(--a-fw-semibold) var(--a-fs-lg)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); }
.cd-dlg-body { padding: var(--a-sp-2) var(--a-sp-6) var(--a-sp-6); display: grid; gap: var(--a-sp-5); }
.cd-dlg-foot { display: flex; justify-content: flex-end; gap: var(--a-sp-4); }

/* -- symbol search --------------------------------------------------------------------------- */
.cd-ss { width: 980px; height: min(84vh, 780px); max-height: 84vh; }
.cd-ss-q { display: flex; align-items: center; gap: var(--a-sp-4); margin: 0 var(--a-sp-5); padding: 0 var(--a-sp-5);
  height: 44px; border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); background: var(--a-sunken); }
.cd-ss-q:focus-within { border-color: var(--a-accent-t4); outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.cd-ss-q svg { color: var(--a-fg-3); width: 18px !important; height: 18px !important; }
.cd-ss-q input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--a-fg-1); font: var(--a-fw-semibold) var(--a-fs-lg)/1 var(--a-sans); outline: none; }
.cd-ss-q input::placeholder { color: var(--a-fg-3); font-weight: var(--a-fw-medium); }
.cd-ss-clear { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--a-r-pill);
  background: transparent; color: var(--a-fg-3); cursor: pointer; padding: 0; }
.cd-ss-clear:hover { color: var(--a-fg-1); background: var(--a-line-1); }
.cd-ss-clear svg { width: 12px !important; height: 12px !important; }
/* Row 1: asset-class tabs (a TradFi tab without data is tagged Soon and cannot be picked). */
.cd-ss-tabs { display: flex; gap: var(--a-sp-1); padding: var(--a-sp-4) var(--a-sp-5) 0; border-bottom: 1px solid var(--a-line-1);
  overflow-x: auto; scrollbar-width: none; }
.cd-ss-tabs::-webkit-scrollbar { display: none; }
.cd-ss-tab { flex: none; display: inline-flex; align-items: center; gap: var(--a-sp-2); height: 34px; padding: 0 var(--a-sp-5); border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; }
.cd-ss-tab:hover { color: var(--a-fg-1); }
.cd-ss-tab[aria-selected="true"] { color: var(--a-sel-fg); background: var(--a-sel-bg); border-bottom-color: var(--a-sel-fg); border-radius: var(--a-r-md) var(--a-r-md) 0 0; }
.cd-ss-tab[aria-disabled="true"] { color: var(--a-fg-4); cursor: default; }
.cd-ss-soon { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .06em; text-transform: uppercase; padding: var(--a-sp-1) var(--a-sp-2); border-radius: var(--a-r-sm);
  background: var(--a-line-1); color: var(--a-fg-3); }
.cd-ss-fgrp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sp-4); min-width: 0; }
.cd-ss-fgrp[hidden] { display: none; }
.cd-ss-note { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }
.cd-ss-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-4) var(--a-sp-5) var(--a-sp-2); }
.cd-chip { height: 26px; padding: 0 var(--a-sp-5); border-radius: var(--a-r-pill); border: 1px solid var(--a-line-2); background: transparent;
  color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); cursor: pointer; display: inline-flex; align-items: center; gap: var(--a-sp-4); }
.cd-chip:hover { color: var(--a-fg-1); border-color: var(--a-line-3); }
.cd-chip[aria-pressed="true"] { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-chip .cd-caret { margin-left: 0; }
/* Exchange dropdown: a listbox inside the dialog (see cd-symbols.js for why not CdUI.menu). */
.cd-ss-vwrap { position: relative; display: inline-flex; }
.cd-ss-vdot { width: 8px; height: 8px; border-radius: var(--a-r-pill); flex: none; }
.cd-ss-vmenu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 2; width: 264px; max-width: calc(100vw - 32px); overflow-y: auto;
  padding: var(--a-sp-2); background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); box-shadow: var(--a-sh-2);
  font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); outline: none; }
.cd-ss-vmenu:focus-visible { box-shadow: var(--a-sh-2); outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.cd-ss-vmenu::-webkit-scrollbar { width: 6px; }
.cd-ss-vmenu::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.cd-ss-vh { padding: var(--a-sp-4) var(--a-sp-4) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps);
  text-transform: uppercase; color: var(--a-fg-3); }
.cd-ss-vopt { display: flex; align-items: center; gap: var(--a-sp-4); min-height: 30px; padding: 0 var(--a-sp-4) 0 var(--a-sp-2);
  border-radius: var(--a-r-md); cursor: pointer; }
.cd-ss-vopt.act { background: var(--a-hover); }
.cd-ss-vopt[aria-selected="true"] { color: var(--a-accent); }
.cd-ss-vopt[aria-disabled="true"] { color: var(--a-fg-4); cursor: default; }
.cd-ss-vopt[aria-disabled="true"] .cd-vp-b, .cd-ss-vopt[aria-disabled="true"] .cd-vic { opacity: .45; }
.cd-ss-vck { width: 16px; flex: none; display: grid; place-items: center; color: var(--a-accent); }
.cd-ss-vck svg { width: 14px !important; height: 14px !important; }
.cd-ss-vn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ss-vc { flex: none; font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-mono); color: var(--a-fg-3); font-variant-numeric: tabular-nums; }
.cd-ss-count { margin-left: auto; font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
/* Body: the rail (saved views + refine) and the result list. */
.cd-ss-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 184px minmax(0, 1fr); border-top: 1px solid var(--a-line-1); }
.cd-ss-rail { min-height: 0; overflow-y: auto; padding: var(--a-sp-2) var(--a-sp-4) var(--a-sp-5); border-right: 1px solid var(--a-line-1);
  display: flex; flex-direction: column; gap: var(--a-sp-1); }
.cd-ss-rh { padding: var(--a-sp-5) var(--a-sp-4) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps);
  text-transform: uppercase; color: var(--a-fg-3); }
.cd-ss-rh:first-child { padding-top: var(--a-sp-2); }
.cd-ss-rv { display: flex; align-items: center; gap: var(--a-sp-4); min-height: 28px; padding: 0 var(--a-sp-4); border: 0; border-radius: var(--a-r-md);
  background: transparent; color: var(--a-fg-2); font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-tight) var(--a-sans); text-align: left; cursor: pointer; }
.cd-ss-rv:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-ss-rv[aria-pressed="true"] { background: var(--a-accent-t1); color: var(--a-accent); }
.cd-ss-rv:disabled { color: var(--a-fg-4); cursor: default; background: transparent; }
.cd-ss-rvn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ss-rsel { display: grid; gap: var(--a-sp-2); padding: var(--a-sp-2) var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
.cd-ss-rsel select { height: 28px; padding: 0 var(--a-sp-4); border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm); background: var(--a-sunken);
  color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-sans); min-width: 0; }
.cd-ss-rsel select:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-ss-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cd-ss-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-5); flex-wrap: wrap; }
.cd-ss-seg { display: inline-flex; align-items: center; gap: var(--a-sp-1); padding: var(--a-sp-1); border: 1px solid var(--a-line-2); border-radius: var(--a-r-pill); }
.cd-ss-seglbl { padding: 0 var(--a-sp-4) 0 var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
.cd-ss-segb { height: 22px; padding: 0 var(--a-sp-4); border: 0; border-radius: var(--a-r-pill); background: transparent; color: var(--a-fg-2);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); cursor: pointer; white-space: nowrap; }
.cd-ss-segb:hover { color: var(--a-fg-1); }
.cd-ss-segb[aria-pressed="true"] { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.cd-ss-cols { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 108px 74px 70px; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-6) var(--a-sp-2) var(--a-sp-5);
  border-bottom: 1px solid var(--a-line-1); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }
.cd-ss-cols .cd-ss-c-r { text-align: right; }
/* A column title stays on one line ("PRICE / CHANCE" wrapped in the 92 px column: review item 5). */
.cd-ss-cols > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ss-cols .cd-ss-c-sp { text-align: center; }
.cd-ss-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--a-sp-2) var(--a-sp-4) var(--a-sp-4); list-style: none; margin: 0; }
.cd-ss-list::-webkit-scrollbar { width: 6px; }
.cd-ss-list::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.cd-ss-head { padding: var(--a-sp-5) var(--a-sp-4) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }
.cd-ss-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 108px 74px 70px; align-items: center; gap: var(--a-sp-4);
  min-height: 44px; padding: var(--a-sp-2) var(--a-sp-4) var(--a-sp-2) var(--a-sp-2); border-radius: var(--a-r-md); cursor: pointer; }
.cd-ss-row:hover { background: var(--a-hover); }
.cd-ss-row[aria-selected="true"] { background: var(--a-accent-t1); box-shadow: inset 0 0 0 1px var(--a-accent-t3); }
.cd-ss-coin { display: flex; align-items: center; gap: var(--a-sp-4); min-width: 0; }
.cd-ss-logo { width: 28px; height: 28px; flex: none; border-radius: var(--a-r-pill); display: grid; place-items: center;
  font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-fg-1); background: var(--a-glass-2); box-shadow: inset 0 0 0 1px var(--a-line-2); }
.cd-ss-name { min-width: 0; display: grid; gap: var(--a-sp-2); }
.cd-ss-l1 { display: flex; align-items: baseline; gap: var(--a-sp-4); min-width: 0; }
.cd-ss-name b { flex: none; font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cd-ss-full { min-width: 0; font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ss-src { flex: none; font: var(--a-fw-semibold) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-2); white-space: nowrap; }
.cd-ss-sub { flex: none; max-width: 100%; font: var(--a-fw-medium) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ss-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-4); min-width: 0; }
.cd-ss-ptitle { font-size: var(--a-fs-sm) !important; font-weight: var(--a-fw-semibold) !important; }
.cd-ss-plogo { width: 28px; height: 28px; flex: none; border-radius: var(--a-r-md); display: grid; place-items: center;
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .02em; color: var(--a-accent); background: var(--a-accent-t2); box-shadow: inset 0 0 0 1px var(--a-accent-t3); }
.cd-ss-plogo.kalshi { color: var(--a-cyan); background: var(--a-cyan-t2); box-shadow: inset 0 0 0 1px var(--a-line-2); }
/* TradFi rows (asset-class tags, src/feed/assetclass.ts): class glyph, "Market hours" / "Daily" badges, honesty notes. */
.cd-ss-plogo.tf { color: var(--a-fg-1); background: var(--a-cyan-t2); box-shadow: inset 0 0 0 1px var(--a-line-2); font-size: var(--a-fs-2xs); }
.cd-ss-plogo.tf.metals, .cd-ss-plogo.tf.energy { color: var(--a-warn); background: var(--a-warn-t1); box-shadow: inset 0 0 0 1px var(--a-warn-t3); }
.cd-ss-plogo.tf.forex { color: var(--a-up); }
.cd-ss-badge { flex: none; font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .06em; text-transform: uppercase; padding: var(--a-sp-1) var(--a-sp-2); border-radius: var(--a-r-sm);
  color: var(--a-warn); background: var(--a-warn-t1); box-shadow: inset 0 0 0 1px var(--a-warn-t3); white-space: nowrap; }
.cd-ss-badge.daily { color: var(--a-cyan); background: var(--a-cyan-t2); box-shadow: inset 0 0 0 1px var(--a-line-2); }
.cd-ss-note2 { min-width: 0; max-width: 100%; font: var(--a-fw-medium) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-3); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ss-head.cd-ss-aliasnote { text-transform: none; letter-spacing: 0; font-weight: var(--a-fw-medium); color: var(--a-warn); white-space: normal; line-height: var(--a-lh-snug); }
.cd-ss-spark { display: grid; place-items: center; height: 22px; }
.cd-ss-spark svg { display: block; overflow: visible; width: 64px !important; height: 22px !important; }
.cd-ss-spark path { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke: var(--a-fg-3); }
.cd-ss-spark svg.up path { stroke: var(--a-up); }
.cd-ss-spark svg.down path { stroke: var(--a-down); }
.cd-ss-spark.wait::after { content: ''; width: 40px; height: 1px; background: var(--a-line-2); }
.cd-ss-px { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-mono); text-align: right; color: var(--a-fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ss-row.pred .cd-ss-px { font-size: var(--a-fs-sm); }
.cd-ss-vol { font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-mono); text-align: right; color: var(--a-fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Outcome chips on a prediction row (like the venue pills on a coin row). */
.cd-oc { height: 20px; max-width: 180px; padding: 0 var(--a-sp-4); display: inline-flex; align-items: center; gap: var(--a-sp-2); border-radius: var(--a-r-pill);
  border: 1px solid var(--a-line-2); background: transparent; color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); cursor: pointer; white-space: nowrap; }
.cd-oc:hover { color: var(--a-fg-1); border-color: var(--a-line-3); background: var(--a-glass); }
.cd-oc[aria-pressed="true"] { color: var(--a-fg-1); border-color: var(--a-accent-t4); background: var(--a-accent-t2); }
.cd-oc-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cd-oc-p { flex: none; font-family: var(--a-mono); color: var(--a-fg-3); }
.cd-oc[aria-pressed="true"] .cd-oc-p { color: var(--a-accent); }
.cd-ss-coin .cd-coin { width: 28px; height: 28px; }
.cd-ss-coin .cd-logo { width: 28px; height: 28px; border-radius: var(--a-r-md); }   /* stock / ETF logos (cdLogos) */
.cd-ss-name mark { background: none; color: var(--a-accent); }
.cd-ss-venues { display: inline-flex; flex-wrap: wrap; gap: var(--a-sp-2); min-width: 0; }
.cd-vp.sm { height: 18px; padding: 0 var(--a-sp-2) 0 var(--a-sp-1); gap: var(--a-sp-2); font-size: var(--a-fs-2xs); }
.cd-vp.sm .cd-vp-b { width: 13px; height: 13px; font-size: var(--a-fs-2xs); }
.cd-vp { height: 24px; padding: 0 var(--a-sp-4) 0 var(--a-sp-2); display: inline-flex; align-items: center; gap: var(--a-sp-2); border-radius: var(--a-r-pill);
  border: 1px solid var(--a-line-2); background: transparent; color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); cursor: pointer; white-space: nowrap; }
.cd-vp:hover { color: var(--a-fg-1); border-color: var(--a-line-3); background: var(--a-glass); }
.cd-vp[aria-pressed="true"] { color: var(--a-fg-1); border-color: var(--a-accent-t4); background: var(--a-accent-t2); }
.cd-vp-b { width: 18px; height: 18px; border-radius: var(--a-r-pill); display: grid; place-items: center; font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans);
  color: var(--cd-on-holo); flex: none; }
.cd-vp-t { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .06em; padding: var(--a-sp-1) var(--a-sp-2); border-radius: var(--a-r-sm); background: var(--a-line-1); color: var(--a-fg-3); }
.cd-vp-t.spot { background: var(--a-cyan-t2); color: var(--a-cyan); }
.cd-ss-chg { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-mono); text-align: right; color: var(--a-fg-3); font-variant-numeric: tabular-nums; }
.cd-ss-foot { display: flex; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-5); padding: var(--a-sp-4) var(--a-sp-6); border-top: 1px solid var(--a-line-1);
  font: var(--a-fs-2xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }
.cd-ss-foot span:last-child { margin-left: auto; }
.cd-ss-empty { padding: var(--a-sp-8) var(--a-sp-6); text-align: center; color: var(--a-fg-3); font: var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); }
/* Prediction panes: the legend's outcome switch. */
.cd-lg-oc { display: inline-flex; align-items: center; gap: var(--a-sp-2); height: 20px; padding: 0 var(--a-sp-4); margin-left: var(--a-sp-2);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-pill); background: var(--a-glass); color: var(--a-fg-2);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); cursor: pointer; }
.cd-lg-oc:hover { color: var(--a-fg-1); border-color: var(--a-accent-t3); }
.cd-lg-oc[hidden] { display: none; }
/* Prediction-market attribution in the pane legend ("Data: Polymarket" / "Data: Kalshi"). */
.cd-lg-src { margin-left: var(--a-sp-2); font-size: var(--a-fs-2xs); color: var(--a-fg-3); text-decoration: none; white-space: nowrap; }
.cd-lg-src:hover { color: var(--a-fg-1); text-decoration: underline; }
.cd-lg-src[hidden] { display: none; }
/* Parallel chart connections: the paused tab's reminder (the dialog was dismissed). */
.cd-moved-pill { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 60; height: 32px; padding: 0 var(--a-sp-4);
  border-radius: var(--a-r-pill); border: 1px solid var(--a-line-2); background: var(--a-raised); color: var(--a-fg-1);
  font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); box-shadow: var(--a-sh-3); cursor: pointer; }
.cd-moved-pill:hover { border-color: var(--a-accent-t3); }
.cd-moved-pill:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-lg-oc .cd-caret { width: 9px; height: 9px; }
/* Narrow screens: no rail, no sparkline / volume columns, the dialog fills the screen. */
@media (max-width: 760px) {
  .cd-modal:has(.cd-ss) { padding: 0; }
  .cd-ss { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .cd-ss-body { grid-template-columns: minmax(0, 1fr); }
  .cd-ss-rail { display: none; }
  .cd-ss-cols, .cd-ss-row { grid-template-columns: 22px minmax(0, 1fr) 76px 62px; }
  .cd-ss-cols .cd-ss-c-sp, .cd-ss-cols .cd-ss-c-vol, .cd-ss-spark, .cd-ss-vol { display: none; }
  .cd-ss-foot { display: none; }
  .cd-ss-q { margin: 0 var(--a-sp-4); }
  /* One scrolling row of filters; a row keeps only its chosen venue / outcome (the chart legend switches outcomes). */
  .cd-ss-filters { flex-wrap: nowrap; }
  .cd-ss-fgrp { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cd-ss-fgrp::-webkit-scrollbar { display: none; }
  .cd-ss-fgrp .cd-chip { flex: none; }
  .cd-ss-count { display: none; }
  .cd-ss-row .cd-oc:not([aria-pressed="true"]), .cd-ss-row .cd-vp.sm { display: none; }
}

/* -- small popovers: timeframe box, go to date --------------------------------------------- */
.cd-pop { position: fixed; z-index: var(--z-dialog); padding: var(--a-sp-5); background: var(--a-raised); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-md); box-shadow: var(--a-sh-2); display: grid; gap: var(--a-sp-4); min-width: 240px; }
.cd-pop-t { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }
.cd-pop-in { height: 40px; font: var(--a-fw-semibold) var(--a-fs-xl)/1 var(--a-sans); text-align: center; }
.cd-pop-n { font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }
.cd-pop-n.bad { color: var(--a-warn); }
.cd-pop-row { display: flex; gap: var(--a-sp-4); }
.cd-pop-row .cd-input { flex: 1; }

/* -- toast ------------------------------------------------------------------------------------ */
/* 44 px above the status bar: clear of the chart's time axis (a toast 16 px up sat on its labels, and a two-line one hid three
   of them: screenshot review 2026-10-13) */
.cd-toast { position: fixed; left: 50%; bottom: calc(var(--at-status-h) + 44px); transform: translateX(-50%) translateY(6px); z-index: var(--z-toast);
  max-width: min(520px, calc(100vw - 32px)); padding: var(--a-sp-4) var(--a-sp-6); border-radius: var(--a-r-md);
  background: var(--a-raised); border: 1px solid var(--a-line-2); box-shadow: var(--a-sh-2); color: var(--a-fg-1);
  font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug) var(--a-sans); opacity: 0; transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.cd-toast.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.cd-toast a, .cd-toast button { color: var(--a-accent); font-weight: var(--a-fw-semibold); }
/* "Ref: <request id>" after a failed API call (cd-errlog.js): small, monospace, click to copy. */
.cd-toast .cd-toast-ref { display: block; margin: var(--a-sp-2) 0 0; padding: 0; border: 0; background: none; cursor: copy; color: var(--a-fg-3);
  font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; }
.cd-toast .cd-toast-ref:hover { color: var(--a-fg-1); }
/* An action on a toast (cd-ui.js toast(text, ms, action)): "See plans" on the plan-clamp notice. */
.cd-toast .cd-toast-act { display: inline-block; margin-inline-start: var(--a-sp-5); padding: var(--a-sp-1) var(--a-sp-5); border: 1px solid var(--a-line); border-radius: var(--a-r-pill); background: none; cursor: pointer; font: inherit; font-weight: var(--a-fw-semibold); }
.cd-toast .cd-toast-act:hover { border-color: var(--a-accent); }
/* A one-time tip with an action (cd-chart-settings.js, "Large layout"): a chip IN the status bar's middle group (review
   2026-10-19: as a toast it covered the bottom-right chart), 18 px tall to fit the 22 px row; it goes by itself after 8 s. */
.cd-sb-tip { display: inline-flex; align-items: center; gap: var(--a-sp-2); height: 18px; padding: 0 var(--a-sp-1) 0 var(--a-sp-4);
  border: 1px solid var(--a-accent-t3); border-radius: var(--a-r-pill); background: var(--a-accent-t1); color: var(--a-fg-1);
  font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); white-space: nowrap; }
.cd-sb-tip .cd-tip-t { overflow: hidden; text-overflow: ellipsis; }
.cd-tip .cd-tip-act { flex: none; height: 16px; padding: 0 var(--a-sp-3, 6px); border-radius: var(--a-r-pill); border: 1px solid var(--a-line-2);
  background: transparent; color: var(--a-accent); font: inherit; font-weight: var(--a-fw-semibold); cursor: pointer; white-space: nowrap; }
.cd-tip .cd-tip-act:hover { background: var(--a-hover); border-color: var(--a-line-3); }
.cd-tip .cd-tip-x { flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: var(--a-r-pill); background: transparent;
  color: var(--a-fg-3); font: var(--a-fw-regular) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; }
.cd-tip .cd-tip-x:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-tip button:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }

/* ==========================================================================
   SECTORS / TREND UPGRADE PANEL (cd-upgrade.js)
   ========================================================================== */

.cd-up-x { position: sticky; top: 0; justify-self: end; margin-bottom: calc(-1 * var(--a-sp-7)); z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--a-r-pill); cursor: pointer;
  border: 1px solid var(--a-line-2); background: var(--a-panel); color: var(--a-fg-2); box-shadow: var(--a-sh-1); }
.cd-up-x:hover { color: var(--a-fg-1); border-color: var(--a-line-3); background: var(--a-hover); }
.cd-up-x:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-up-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cd-up { max-width: 1040px; margin: var(--a-sp-4) auto var(--a-sp-8); display: grid; gap: var(--a-sp-7); color: var(--a-fg-2); }
.cd-up-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--a-sp-7); align-items: center; }
.cd-up-kicker { display: inline-flex; align-items: center; gap: var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps);
  text-transform: uppercase; color: var(--a-accent); }
.cd-up-kicker i { width: 18px; height: 1px; background: var(--a-holo-h); }
.cd-up-h { margin: var(--a-sp-4) 0 var(--a-sp-4); font: var(--a-fw-semibold) var(--a-fs-2xl)/var(--a-lh-tight) var(--a-sans); letter-spacing: -.015em; color: var(--a-fg-1); text-wrap: balance; }
.cd-up-lead { margin: 0 0 var(--a-sp-6); font: var(--a-fw-regular) var(--a-fs-lg)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-2); max-width: 46ch; }
.cd-up-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-4); margin-bottom: var(--a-sp-5); }
.cd-up-price b { font: var(--a-fw-semibold) var(--a-fs-xl)/1 var(--a-sans); color: var(--a-fg-1); }
.cd-up-price span { font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }
.cd-up-tax { color: var(--a-fg-3); font-size: var(--a-fs-xs, 11px); }
.cd-up-save { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--a-sp-4); border-radius: var(--a-r-pill); background: var(--a-up-t2);
  color: var(--a-up); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); }
.cd-up-cta { display: flex; flex-wrap: wrap; gap: var(--a-sp-4); }
.cd-up-cta .cd-btn { height: 40px; padding: 0 var(--a-sp-7); font-size: var(--a-fs-md); }
.cd-up-fine { margin: var(--a-sp-4) 0 0; font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }

.cd-up-sample { position: relative; border-radius: var(--a-r-lg); overflow: hidden; border: 1px solid var(--a-line-2); background: var(--a-panel);
  box-shadow: var(--a-sh-1); aspect-ratio: 16 / 11; }
.cd-up-sample-in { position: absolute; inset: 0; padding: var(--a-sp-5); filter: blur(1.4px) saturate(.9); opacity: .78; pointer-events: none; user-select: none; }
.cd-up-sample::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--a-panel) 100%); pointer-events: none; }
.cd-up-tag { position: absolute; top: var(--a-sp-4); right: var(--a-sp-4); z-index: 1; height: 22px; padding: 0 var(--a-sp-4); display: inline-flex; align-items: center;
  border-radius: var(--a-r-pill); background: var(--a-raised); border: 1px solid var(--a-line-2); color: var(--a-fg-2);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; }
.cd-up-sample svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cd-up-sample .sx-t { font: var(--a-fw-semibold) var(--a-fs-xs) var(--a-sans); fill: var(--a-fg-2); }
.cd-up-sample .sx-m { font: var(--a-fw-medium) var(--a-fs-2xs) var(--a-sans); fill: var(--a-fg-3); }
.cd-up-sample .sx-g { stroke: var(--a-line-1); stroke-width: 1; }
.cd-up-sample .sx-up { fill: var(--a-up); } .cd-up-sample .sx-dn { fill: var(--a-down); } .cd-up-sample .sx-ac { fill: var(--a-accent); }
.cd-up-sample .sx-wn { fill: var(--a-warn); } .cd-up-sample .sx-mu { fill: var(--a-fg-4); }
.cd-up-sample .sx-pill { fill: var(--a-glass-2); stroke: var(--a-line-2); }

.cd-up-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-sp-5); }
.cd-up-b { padding: var(--a-sp-5); border: 1px solid var(--a-line-1); border-radius: var(--a-r-md); background: var(--a-panel); }
.cd-up-b-i { width: 32px; height: 32px; border-radius: var(--a-r-md); display: grid; place-items: center; background: var(--a-accent-t2); color: var(--a-accent); margin-bottom: var(--a-sp-4); }
.cd-up-b-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cd-up-b h3 { margin: 0 0 var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-1); }
.cd-up-b p { margin: 0; font: var(--a-fw-regular) var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }

.cd-up-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--a-sp-7); align-items: start; }
.cd-up-sub { margin: 0 0 var(--a-sp-5); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }
.cd-up-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-sp-5); counter-reset: u; }
.cd-up-uses li { position: relative; padding-left: 36px; font: var(--a-fw-regular) var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-2); counter-increment: u; }
.cd-up-uses li::before { content: counter(u); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: var(--a-r-pill);
  display: grid; place-items: center; font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-accent); background: var(--a-accent-t2); }
.cd-up-uses b { color: var(--a-fg-1); font-weight: var(--a-fw-semibold); }

/* The plan table is the whole price list (35 rows in 5 sections): it scrolls inside its own box and the plan names stay in view. */
.cd-up-tblwrap { overflow: visible; border: 1px solid var(--a-line-1); border-radius: var(--a-r-md); background: var(--a-panel); }   /* full height: the page scrolls, not a box (operator 2026-10-04) */
.cd-up-tblwrap:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-up-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-snug) var(--a-sans); background: var(--a-panel); }
.cd-up-tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--a-raised); }
.cd-up-tbl thead th.cur { background: linear-gradient(var(--a-accent-t1), var(--a-accent-t1)), var(--a-raised); }
.cd-up-tbl tr.grp th { padding: var(--a-sp-6) var(--a-sp-5) var(--a-sp-2); text-align: left; background: var(--a-sunken); color: var(--a-fg-3);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; }
.cd-up-tbl tbody tr:not(.grp):hover td { background-image: linear-gradient(var(--a-glass-2), var(--a-glass-2)); }
.cd-up-tbl th, .cd-up-tbl td { padding: var(--a-sp-4) var(--a-sp-5); text-align: center; border-bottom: 1px solid var(--a-line-1); font-variant-numeric: tabular-nums; }
.cd-up-tbl tr:last-child td { border-bottom: 0; }
.cd-up-tbl th { font: var(--a-fw-semibold) var(--a-fs-xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-fg-1); }
.cd-up-tbl th small { display: block; margin-top: var(--a-sp-2); font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); color: var(--a-fg-3); }
.cd-up-tbl td:first-child, .cd-up-tbl th:first-child { text-align: left; color: var(--a-fg-3); }
.cd-up-tbl em.soon { font-style: normal; font-size: var(--a-fs-2xs); font-weight: var(--a-fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--a-fg-3); border: 1px solid var(--a-line-2); border-radius: var(--a-r-pill); padding: 0 var(--a-sp-4); margin-left: var(--a-sp-2); }
.cd-up-tbl .cur { background: var(--a-accent-t1); }
.cd-up-tbl .yes { color: var(--a-up); font-weight: var(--a-fw-semibold); }
.cd-up-tbl .no { color: var(--a-fg-4); }
/* "Get more streams": the small button next to the live-stream limit sentence (order book, trades tape) */
.cd-stream-more { height: 22px; padding: 0 var(--a-sp-4); margin-left: var(--a-sp-4); font-size: var(--a-fs-xs); vertical-align: middle; }
.cd-up-tbl .you { display: inline-block; margin-left: var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--a-fg-3); }

/* -- Locked-feature views (Sectors, Trend, Strata; operator 2026-10-04): use the width. One container up to 1520 px with
      comfortable sides; wide screens get two zones (hero | a larger sample), the four feature cards across the full width,
      then "How traders use it" (kept in view while the long plan list scrolls) beside the plan table at full height. The
      view's own title bar steps aside: the hero's eyebrow already names the view. */
.at-sec.cd-locked .at-sec-bar { display: none; }
.cd-up { width: 100%; max-width: 1520px; box-sizing: border-box; padding-inline: clamp(0px, 2.5vw, 40px); }
.cd-up-sample-in { filter: none; opacity: 1; }
.cd-up-sample::after { background: linear-gradient(180deg, transparent 72%, var(--a-panel) 100%); }
.cd-up-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-up-tbl tr.hl td { background: var(--a-sel-bg); color: var(--a-fg-1); }
.cd-up-tbl tr.hl td:first-child { color: var(--a-sel-fg); font-weight: var(--a-fw-semibold); box-shadow: inset 2px 0 0 var(--a-sel-fg); }
@media (min-width: 1180px) {
  .cd-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--a-sp-8); row-gap: var(--a-sp-7); align-items: start; }
  .cd-up-x { grid-column: 1 / -1; }
  .cd-up-hero, .cd-up-two { display: contents; }
  .cd-up-hero > div:first-child { grid-column: 1; align-self: center; }
  .cd-up-h { font-size: var(--a-fs-3xl); }
  .cd-up-sample { grid-column: 2; aspect-ratio: 16 / 10; }
  .cd-up-grid { grid-column: 1 / -1; }
  .cd-up-two > div:first-child { grid-column: 1; position: sticky; top: var(--a-sp-6); }
  .cd-up-two > div:last-child { grid-column: 2; }
}
@media (min-width: 761px) and (max-width: 1179px) { .cd-up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cd-up-grid { grid-template-columns: minmax(0, 1fr); } .cd-up { padding-inline: 0; } }

/* ==========================================================================
   ZEN (bottom-right maximise): the side bars step away, the charts get the room.
   ========================================================================== */

body.cd-zen .cd-drawbar, body.cd-zen .cd-wbar, body.cd-zen .cd-panel { display: none; }

/* 0.9.74 (review, operator): each side on its own (cd-shell.js sideTabs). A tab on the chart area's inner edge, a quarter up
   from the bottom: the start one hides the drawing bar, the end one the widget bar and its panel. A hidden side keeps its tab
   at the window edge, the arrow pointing in (aria-pressed="true" = hidden). Mirrored in a right-to-left language by the
   logical properties. Phones (820 px and less) have no tabs and hide no side.
   0.9.74 (review, picture review P2 + gate R2): a tab on the chart's edge covered chart content (the low label's first digit,
   the leftmost candle, ▼ edge tags and price-axis labels). Each tab now lives in its own gutter: #at-main keeps a
   --cd-sidegut strip on both inline edges (padding, painted like the bars), the charts sit between them, and the tab fills its
   strip, so it never covers a canvas or a price axis and is always painted. The strips stay whether a side shows or not, so
   hiding / showing a side changes the chart width by that bar alone (no jump). */
:root { --cd-sidegut: 12px; }
.cd-sidetab {
  position: absolute; top: 75%; z-index: var(--z-bars); transform: translateY(-50%);
  width: var(--cd-sidegut); height: 44px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--a-raised); color: var(--a-fg-2); border: 1px solid var(--a-line-2);
  transition: color var(--a-dur-1) ease, background var(--a-dur-1) ease;
}
@media (min-width: 821px) { .cd-work > .at-main { padding-inline: var(--cd-sidegut); background: var(--a-panel); } }
.cd-sidetab svg { width: 8px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cd-sidetab-l { inset-inline-start: 0; border-inline-start: 0; border-start-end-radius: var(--a-r-md); border-end-end-radius: var(--a-r-md); }
.cd-sidetab-r { inset-inline-end: 0; border-inline-end: 0; border-start-start-radius: var(--a-r-md); border-end-start-radius: var(--a-r-md); }
.cd-sidetab:hover { color: var(--a-accent); }
.cd-sidetab:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-sidetab[aria-pressed="true"] { color: var(--a-accent); }
/* the arrow: out while the side shows, in while it is hidden (the drawn chevron points to the left) */
.cd-sidetab-l[aria-pressed="true"] svg, .cd-sidetab-r[aria-pressed="false"] svg { transform: scaleX(-1); }
html[dir="rtl"] .cd-sidetab-l[aria-pressed="false"] svg, html[dir="rtl"] .cd-sidetab-r[aria-pressed="true"] svg { transform: scaleX(-1); }
html[dir="rtl"] .cd-sidetab-l[aria-pressed="true"] svg, html[dir="rtl"] .cd-sidetab-r[aria-pressed="false"] svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .cd-sidetab { transition: none; } }
@media (max-width: 820px) { .cd-sidetab { display: none; } }
@media (min-width: 821px) {
  body.cd-hide-l .cd-drawbar, body.cd-hide-r .cd-wbar, body.cd-hide-r .cd-panel { display: none; }
  body.cd-hide-r .at-sec, body.cd-hide-r .cd-viewbar, body.cd-hide-r.cd-panel-on .at-sec, body.cd-hide-r.cd-panel-on .cd-viewbar { right: 0 !important; }
  html[dir="rtl"] body.cd-hide-r .at-sec, html[dir="rtl"] body.cd-hide-r .cd-viewbar,
  html[dir="rtl"] body.cd-hide-r.cd-panel-on .at-sec, html[dir="rtl"] body.cd-hide-r.cd-panel-on .cd-viewbar { left: 0; }
}

/* ==========================================================================
   RESPONSIVE: labels go first, then the favourites, then tools move into overflow menus.
   ========================================================================== */

.cd-narrow-only, .cd-more-only, .cd-phone-only, .cd-rg-menu { display: none; }
.cd-rg-menu.on { color: var(--a-accent); }
.cd-rg-menu .cd-rg-cur, .cd-bb-t { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); }

@media (max-width: 1760px) { .cd-tb-text .cd-tb-t { display: none; } .cd-tb-text { padding: 0 var(--a-sp-4); } #cd-lay-name .cd-tb-t { display: inline; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1700px) { .cd-wide-only { display: none !important; } .cd-tf-favs:not(:empty) + .cd-tb-dd .cd-tf-cur { display: inline; visibility: visible; min-width: 18px; } .cd-word { display: none; } }
/* favourites hidden: the timeframe button always just shows the current timeframe, one look whether or not it is a favourite
   (picture review 0.9.60: framed on 1m / 5m / 1W / 1M, plain on 15m / 1h / 4h / 1D) */
@media (max-width: 1700px) { #cd-tf-btn.on:not([aria-expanded="true"]):not(:hover) { color: var(--a-fg-1); background: transparent; box-shadow: none; } }
@media (max-width: 1200px) {
  .cd-mid-hide { display: none !important; }
  .cd-more-only { display: inline-flex; }
  .at-sb-sessions, .at-sb-ver, .at-strip, .at-sb-streams { display: none; }
}
@media (max-width: 820px) {
  :root { --a-topbar-h: 44px; }
  .cd-tb-btn, .cd-tb-sym { height: 34px; min-width: 34px; }
  .cd-tb-sym { width: auto; max-width: 44vw; }
  .cd-sym-v { display: none; }
  .cd-trade { display: none; }
  .cd-tb-sep { margin: 0 var(--a-sp-1); }
  /* The parked drawing bar sits past the left edge; in a right-to-left language that side scrolls, and the whole page
     could slide 44 px sideways. Nothing in the work area may widen the page. */
  .cd-work { overflow: hidden; overflow: clip; }
  /* The widget bar's jobs move into the main menu; a panel becomes a sheet over the charts. */
  .cd-wbar { display: none; }
  .at-sec { right: 0 !important; }
  .cd-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 100vw); max-width: none; box-shadow: var(--a-sh-2); }
  /* Phone bars (regression 2026-10-03, M3 / M4): every control is at least 36 px for a finger; the bottom bar grows to
     hold them. The Panels button (bottom right) stands in for the hidden widget bar; "maximise" has nothing left to hide
     here, so it steps away, and a maximised state carried over from a desktop must not swallow the panel sheet. */
  :root { --a-status-h: 40px; }
  .cd-top .cd-tb-btn, .cd-top .cd-tb-sym, .cd-top .cd-tb-logo { height: 36px; min-width: 36px; }
  .cd-top .at-avatar { width: 36px; height: 36px; }
  .cd-bottom .cd-rg, .cd-bottom .cd-bb-btn { height: 36px; min-width: 36px; }
  .cd-phone-only { display: inline-flex; }
  #cd-zen-btn { display: none; }
  body.cd-zen .cd-panel:not([hidden]) { display: flex; }
  .cd-panel-head { height: 44px; }
  .cd-panel-head .cd-panel-x { height: 36px; min-width: 36px; }
  .cd-bottom { grid-template-columns: minmax(0, 1fr) auto; }
  .cd-bb-l { overflow-x: auto; scrollbar-width: none; }
  .cd-bb-l::-webkit-scrollbar { display: none; }
  .cd-bb-m { display: none; }
  .cd-tfm { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
  .cd-ss { height: 100%; max-height: none; border-radius: 0; }
  .cd-modal { padding: 0; align-items: stretch; }
  .cd-modal > .cd-dialog:not(.cd-ss) { margin: auto var(--a-sp-5); align-self: center; }
  .cd-ss-cols { display: none; }
  .cd-ss-q input { font-size: var(--a-fs-ios); }
  .cd-up-hero, .cd-up-two { grid-template-columns: minmax(0, 1fr); }
  .cd-up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-up-h { font-size: var(--a-fs-xl); }
}
/* A tablet (521-1200 px, review 0.9.55: an 820 px iPad lost the drawing bar, the alert and the indicators buttons): the
   Indicators and Alert buttons stay in the top bar (icons), and above 760 px the drawing bar stays docked on the left. */
@media (min-width: 521px) and (max-width: 1200px) {
  .cd-ind-wrap.cd-mid-hide { display: inline-flex !important; }
  #cd-alert-btn.cd-mid-hide { display: inline-flex !important; }
  #cd-alert-btn .cd-tb-t, .cd-ind-wrap .cd-tb-t { display: none; }
}
/* A phone (760 px and less): the drawing bar hides behind the pencil and slides over the chart when asked for. */
@media (max-width: 760px) {
  .cd-narrow-only { display: inline-flex; }
  .cd-drawbar { position: absolute; left: 0; top: 0; bottom: 0; z-index: calc(var(--z-view) + 3); box-shadow: var(--a-sh-2);
    transform: translateX(-102%); transition: transform var(--a-dur-2) ease, visibility 0s linear var(--a-dur-2); }
  body.cd-drawbar-open .cd-drawbar { transform: none; }
  /* Parked, it is hidden too, not just moved: its tools left the Tab order and screen readers (sweep 2026-10-19 S220).
     It hides once the slide-out ends and shows at once when it opens. */
  body:not(.cd-drawbar-open) .cd-drawbar { visibility: hidden; }
  body.cd-drawbar-open .cd-drawbar { transition-delay: 0s; }
}
@media (max-width: 520px) {
  #cd-add-btn, .cd-tb-sep { display: none; }
  .cd-tb-logo { padding: 0 var(--a-sp-2); }
  /* Top bar (M3): the market is the one thing that gives way (ellipsis), so nothing slides under the right-hand group.
     Quick search and the theme switch are in the More menu (cd-shell.js); a guest cannot draw or change the layout,
     so those two buttons make room for "Get started". */
  #at-palette-btn, #cd-theme-btn { display: none; }
  .cd-top .cd-tb-sym { flex: 0 1 auto; width: auto; min-width: 56px; max-width: none; padding: 0 var(--a-sp-4); }
  .cd-tb-sym svg { display: none; }
  .cd-tb-sym b { min-width: 0; }
  .cd-top:has(.cd-guest-cta) #cd-drawbar-btn, .cd-top:has(.cd-guest-cta) #at-layout-btn { display: none; }
  /* Bottom bar (M3): the nine range presets fold into one button and its menu (cd-shell.js rangeMenu). */
  .cd-ranges .cd-rg { display: none; }
  .cd-rg-menu { display: inline-flex; }
  .cd-bb-l { overflow: visible; }
  .cd-bottom .cd-tb-sep { display: none; }
  /* A panel is a full-width sheet with its close button in the head (M4). */
  .cd-panel { left: 0; width: auto; }
  .cd-up-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The smallest phones: the layout picker moves into the More menu as well ("Chart layout..."). */
@media (max-width: 400px) { #at-layout-btn { display: none; } }
@media (pointer: coarse) {
  .cd-wb { min-height: 52px; }
  .cd-mi, .cd-tfm .cd-mi { min-height: 40px; }
  .cd-rg, .cd-bb-btn { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-boot-mark { animation: none; }
  .cd-toast, .cd-drawbar { transition: none; }
}

/* Trade only says "coming soon": not shown until it does something (operator 2026-10-13). Replay is back since 0.9.72 (bar
   replay, cd-replay.js; operator 2026-10-26). */
#cd-trade-btn { display: none !important; }

/* The feed is down: the ping reading is muted, and each chart is dimmed (candles, price tag, countdown) under its header's
   red dot. The first version (v0.9.45) put the footer's sentence on .at-pane::after, which is the pane's OUTLINE layer
   (atlas-chrome.css: inset 0): it became an opaque card over half of every chart (screenshot review 2026-10-13). No
   text on the chart now: the footer says the sentence, the header dot says which panes. */
/* 2026-10-14 (screenshot review): set on <html data-feed>, so a pane made after the stall began (a layout change) is dimmed
   too (the per-pane stamp missed the last panes), and only the PLOTS dim: in the chart's DOM each pane row holds its plot
   and its price axis, the time-axis row one child; the price and time axes keep full contrast. */
html[data-feed="down"] .at-pane-host > div > div > div > div:first-child:not(:only-child) canvas { opacity: .7; transition: opacity var(--a-dur-2, .2s) ease; }
html[data-feed="down"] #at-sb-lat, html[data-feed="stale"] #at-sb-lat { color: var(--a-fg-3) !important; }

/* The middle of the bottom bar never cuts a segment mid-word (screenshot review 2026-10-13: "Binance Futu", "-Ke",
   "mumla" in the longer languages). A segment that does not fit drops out WHOLE: the line wraps into a box one line high
   that clips the rest, so the last segments (candle source, then the calendar chip, then streams, then ping) go first and
   the feed status always stays. */
/* Review 0.9.68 T1: in ja / uk / vi that dropped the economic-event chip whole. Now a fixed priority, each segment ending in
   "…" rather than vanishing: the feed status, ping and streams (short) never shrink; the candle source line gives way first,
   all of it, and only then the calendar chip (down to a few words: its full text is in its title). */
.cd-bb-m { flex-wrap: nowrap; }
.cd-bb-m > * { flex: none; min-width: 0; }
/* 0.9.74 (review: "300...", ru "3..." cut inside the bar count): the strip never cuts inside a segment. Each segment (.at-sq, atlas.js) is one
   unbreakable piece in a one-line wrapping row whose second line is clipped: a piece that does not fit drops out whole. */
.cd-bb-m > .at-strip { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--a-sp-2); row-gap: 4px; flex: 0 100000 auto;
  height: 1.5em; line-height: 1.5em; overflow: hidden; white-space: nowrap; }
.at-strip > .at-sq { flex: none; white-space: nowrap; }
/* 0.9.74 (review: the pill cut in ja / uk / vi / zh-TW lost its countdown): the event name gives way, the countdown never */
.cd-bb-m > .at-sb-cal { flex: 0 1 auto; min-width: min-content; max-width: 26em; overflow: hidden; display: inline-flex; align-items: center; white-space: pre; }
.at-sb-cal > .at-sb-cal-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.at-sb-cal > .at-sb-cal-t { flex: none; }
/* 1.0.2 (review 0.9.74 L: ja / uk / vi showed "· 1時間 5" with no name and a cut countdown; de / fr / ru / uk / zh-TW drew the
   dot as a "|"): the pill is never narrower than dot + a few letters of the name + the whole countdown; a name of up to
   6 letters never shrinks, a longer one keeps about 6 before its "…" (cd-calendar.js tickChip: .cd-cal-nlong). The status
   dot keeps its 6 px. */
.at-sb-cal::before { flex: none; }
.at-sb-cal > .at-sb-cal-n:not(.cd-cal-nlong) { flex: none; }
.at-sb-cal > .at-sb-cal-n.cd-cal-nlong { min-width: 4.5em; }
@media (max-width: 1200px) { .cd-bb-m > .at-strip, .cd-bb-m > .at-sb-streams { display: none; } }   /* as the narrow-screen rule above */
.at-conn.replay .at-lamp { display: none; }
.at-conn.replay .at-conn-t { display: inline; color: var(--a-warn); font-weight: var(--a-fw-semibold); }

/* ---- Live Liq summary box (cd-liqlive.js, operator 2026-10-16): the 24 h split, the streak now, the biggest of the hour.
   Drag the header to move it, the corner to resize it. Longs liquidated = the down colour, shorts = the up colour. */
.cd-llb { position: absolute; z-index: 8; display: flex; flex-direction: column; min-width: 200px; min-height: 0; box-sizing: border-box;
  resize: both; overflow: hidden; background: color-mix(in srgb, var(--a-raised) 92%, transparent); color: var(--a-fg-1);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); box-shadow: var(--a-sh-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) var(--a-sans); }
.cd-llb[hidden] { display: none; }
/* footprint on a timeframe without footprints (cd-footprint.js): what is shown and a one-click way to bars that have them;
   top centre, below the calendar's event lane */
.cd-fp-note { position: absolute; z-index: 7; top: 40px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); box-sizing: border-box;
  display: flex; align-items: center; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-2) var(--a-sp-2) var(--a-sp-4);
  background: color-mix(in srgb, var(--a-raised) 94%, transparent); color: var(--a-fg-1); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-md); font: var(--a-fw-medium) var(--a-fs-xs)/var(--a-lh-snug) var(--a-sans);
  /* 1.0.2 (e2e candle-every-bar): no shadow - the soft --a-sh-2 one reached ~20 px below the note and dimmed the highest candles in
     the band kept free for it (cd-footprint.js topBand); the border separates it, and a literal colour is not allowed here (ui-shell) */
  box-shadow: none; }
.cd-fp-note[hidden] { display: none; }
.cd-fp-go { flex: none; padding: var(--a-sp-1) var(--a-sp-4); border: 1px solid transparent; border-radius: var(--a-r-sm); cursor: pointer;
  background: var(--a-accent); color: var(--a-on-accent); font: inherit; font-weight: var(--a-fw-semibold); white-space: nowrap; }
.cd-fp-go:hover { filter: brightness(1.08); }
.cd-fp-go:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.cd-llb.min { resize: none; height: auto !important; }
.cd-llb.min .cd-llb-b { display: none; }
.cd-llb.drag { opacity: .85; }
.cd-llb-h { display: flex; align-items: center; gap: var(--a-sp-2); padding: var(--a-sp-2) var(--a-sp-2) var(--a-sp-2) var(--a-sp-4); cursor: move; user-select: none; touch-action: none;
  border-bottom: 1px solid var(--a-line-1); }
.cd-llb.min .cd-llb-h { border-bottom: 0; }
.cd-llb-n { font-weight: var(--a-fw-semibold); letter-spacing: .02em; }
.cd-llb-c { color: var(--a-fg-3); }
.cd-llb-sp { flex: 1; }
.cd-llb-x { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--a-r-sm); background: transparent;
  color: var(--a-fg-3); cursor: pointer; font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); }
.cd-llb-x:hover { background: var(--a-hover); color: var(--a-fg-1); }
.cd-llb-x:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-llb-b { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--a-sp-2); padding: var(--a-sp-4); }
.cd-llb-bar { display: flex; height: 4px; border-radius: var(--a-r-pill); overflow: hidden; background: var(--a-line-1); }
.cd-llb-bar i { display: block; height: 100%; transition: width var(--a-dur-2, .2s) ease; }
.cd-llb-bar i.l { background: var(--a-down); }
.cd-llb-bar i.s { background: var(--a-up); }
.cd-llb-st { color: var(--a-fg-2); font-variant-numeric: tabular-nums; }
/* the streak: a band in the side's colour, the tier in small capitals over the numbers */
.cd-llb-stk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--a-sp-2) var(--a-sp-4); text-align: center;
  border-top: 2px solid var(--a-up); border-bottom: 2px solid var(--a-up); background: color-mix(in srgb, var(--a-up) 10%, transparent); }
.cd-llb-stk[data-side="l"] { border-color: var(--a-down); background: color-mix(in srgb, var(--a-down) 10%, transparent); }
.cd-llb-stk[hidden] { display: none; }
.cd-llb-stk-k { font: var(--a-fw-semibold) var(--a-fs-2xs)/1.3 var(--a-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--a-up); }
.cd-llb-stk[data-side="l"] .cd-llb-stk-k { color: var(--a-down); }
.cd-llb-stk-v { font: var(--a-fw-semibold) var(--a-fs-sm)/1.3 var(--a-mono); font-variant-numeric: tabular-nums; }
.cd-llb-stk[data-tier="flush"] .cd-llb-stk-k, .cd-llb-stk[data-tier="wipeout"] .cd-llb-stk-k { font-size: var(--a-fs-xs); }
.cd-llb-stk.pop { animation: cd-llb-pop .45s ease-out; }
@keyframes cd-llb-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cd-llb-stk.pop { animation: none; } .cd-llb-bar i { transition: none; } }
.cd-llb-bh { color: var(--a-fg-3); font-size: var(--a-fs-2xs); letter-spacing: .06em; text-transform: uppercase; }
.cd-llb-bh[hidden] { display: none; }
.cd-llb-big { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cd-llb-big li { display: flex; align-items: baseline; gap: var(--a-sp-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.cd-llb-big li b { font-family: var(--a-mono); font-weight: var(--a-fw-semibold); }
.cd-llb-big li.l .cd-llb-a { color: var(--a-down); }
.cd-llb-big li.s .cd-llb-a { color: var(--a-up); }
.cd-llb-t { margin-inline-start: auto; color: var(--a-fg-3); font-family: var(--a-mono); }

/* The Indicators dialog on a short screen (a phone held sideways, 390 px tall): its rows left about 46 px for the content
   (sweep 2026-10-19 S198). Full-height sheet, the search on the header line, the source / view / category rows as one
   sideways-scrolling line, no footer (the header's counter says the same). Rules here beat cd-indicator-picker.css's by
   specificity (that sheet loads after this one). The symbol search's own rules are in cd-symbols.css. */
@media (max-height: 480px) {
  body .cd-modal.cip-scrim { padding: 0; align-items: stretch; }
  body .cd-modal.cip-scrim > .cd-dialog.cip-dlg { width: 100%; height: 100%; max-height: none; margin: 0; align-self: stretch; border-radius: 0; }
  .cd-dialog.cip-dlg .cip-head { flex-wrap: nowrap; gap: var(--a-sp-4); padding: var(--a-sp-2) var(--a-sp-5); }
  .cd-dialog.cip-dlg .cip-head .cip-search { order: 0; flex: 1 1 auto; height: 36px; }
  .cd-dialog.cip-dlg .cip-head .cip-head-r { flex: none; margin-inline-start: 0; }
  .cd-dialog.cip-dlg .cip-foot { display: none; }
}
@media (max-height: 480px) and (max-width: 860px) {
  .cd-dialog.cip-dlg .cip-side { flex-direction: row; align-items: center; gap: var(--a-sp-4); padding: 0 var(--a-sp-5) var(--a-sp-2); overflow-x: auto; scrollbar-width: none; }
  .cd-dialog.cip-dlg .cip-side::-webkit-scrollbar { display: none; }
  .cd-dialog.cip-dlg .cip-side > * { flex: none; }
  .cd-dialog.cip-dlg .cip-side .cip-tabs { min-height: 34px; padding: 0; border-bottom: 0; }
  .cd-dialog.cip-dlg .cip-side .cip-bar { padding: 0; }
  .cd-dialog.cip-dlg .cip-side .cip-chips { overflow: visible; padding-inline-end: 0; -webkit-mask-image: none; mask-image: none; }
  .cd-dialog.cip-dlg .cip-card { margin: 0; border-inline: 0; border-radius: 0; }
}

/* the Help window on a phone (cd-panels.js openHelp): the whole screen, one column (links, then the shortcuts) scrolling as one */
@media (max-width: 700px) {
  .cd-modal:has(> .cd-help-dlg) { padding: 0; align-items: stretch; }
  .cd-modal > .cd-dialog.cd-help-dlg { width: 100%; max-width: 100%; height: 100%; max-height: none; margin: 0; align-self: stretch; border: 0; border-radius: 0; }
  .cd-help-cols { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; }   /* rows never shrink under their content (the cards overlapped the shortcuts, 2026-10-20) */
  .cd-help-main, .cd-help-cols > .cd-help-keyl { overflow: visible; }
  .cd-help-cols > .cd-help-keyl { border-inline-start: 0; border-top: 1px solid var(--a-line-1); }
  .cd-help-dlg .cd-help-in { font-size: var(--a-fs-ios); }
}

/* A locked item in a chart menu (cd-axis-menu.js it.locked, review 0.9.68 T1: "Add thesis" for a Pro member): the label dimmed,
   a padlock and the plan as a badge in the accent colour, as the locked timeframes (.cd-tfm .cd-mi.is-locked). */
.cdm-i.is-locked .cdm-t { color: var(--a-fg-3); }
.cdm-i.is-locked .cdm-k { align-items: center; gap: var(--a-sp-2); color: var(--a-accent); }
.cdm-i.is-locked .cdm-lock { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cdm-plan { font-size: var(--a-fs-2xs); font-weight: var(--a-fw-semibold); color: var(--a-accent); border: 1px solid currentColor; border-radius: var(--a-r-sm);
  padding: 0 var(--a-sp-1); line-height: 15px; }
/* The chart-type menu marks the active type with the same tick the timeframe menu has (review 0.9.68 T1: "Candles" had the
   focus ring but no tick). Its rows carry an icon, so the tick goes at the end. The type menu is the one menu with two-line
   rows (.cd-mi-2: a description under the name). */
.cd-menu:has(.cd-mi-2) .cd-mi.on::after { content: ''; flex: none; width: 14px; height: 14px; margin-inline-start: var(--a-sp-2); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 1.0.2 (review 0974 B1 / T2): the feed states say it on screen, not in a tooltip. A visible Retry beside the feed words while the
   feed is stalled / reconnecting (and connecting after 5 s; atlas-statusbar.js paintRetry), shown on phones too where the words
   fold away. "Stalled: N of M markets" reads in the warning colour, "· 1 connecting" in amber; "last ping Ns ago" is muted. */
.at-conn-retry { flex: none; margin-inline-start: var(--a-sp-2); padding: 1px var(--a-sp-4); border: 1px solid var(--a-down); border-radius: var(--a-r-sm);
  background: transparent; color: var(--a-down-soft, var(--a-down)); font: var(--a-fw-semibold) var(--a-fs-2xs)/1.3 var(--a-sans); cursor: pointer; white-space: nowrap; }
.at-conn-retry:hover { background: var(--a-down-t2, transparent); }
.at-conn-retry:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.at-conn-retry[hidden] { display: none; }
.at-sb-streams.stalled { color: var(--a-down-soft, var(--a-down)); }
.at-sb-streams.connecting { color: var(--a-warn); }
.at-sb-lat.stale { color: var(--a-fg-3); }