/** * chart-desk-sharp.css: the trading screen, sharpened (batch CHART-A, 23 Oct 2026; the owner's option A). * * Loaded after css/chart-desk-page.css, on /chart only. What a member sees: * the frame the header, watchlist, chart, order box, positions and alerts butt together inside one 10px frame with * 1px dividers; no floating cards, no shadows, no gaps; nothing scrolls inside its own box, the page * scrolls as one (the chart keeps a height clamped to the window); * controls one 6px radius, every control bordered, a chosen option outlined in the accent (never filled), icons * centred in their boxes, the single / split / quad layout marks as square outline glyphs; * watchlist Symbol, Last, Change and % Change in their own columns; the settings box (columns and sort) in place; * order box tighter rows, the one quiet note at its foot, no rules button and no "Order answers" heading; * the panels the Indicators & tools dialog and Settings share one shell (.cdp-mpanel): a card on a laptop, a sheet * on a phone. The dialog (batch TOOLS1) is centred, 4px corners, 2px controls, the rows in bordered * boxes with a 1px line between each pair, teal for what is chosen, Pro orange only on the Pro tag; * locked pane the site's Pro card over a blurred picture of the live chart; * phones one fixed Buy and Sell bar; the order box is the sheet it opens; a symbol switcher in the header; one * tab row (Positions | Orders | Watchlist | Alerts); 44px taps; phone CSS only inside (max-width: 767px). * * House rules kept: teal #0F6E76 / #57CFD8 as the accent, green only for Buy and a rise, red only for Sell and a fall, * Pro orange only on Pro controls, every control bordered, light and dark. The selectors start with `html body.cdp` so * they outrank chart-desk-page.css's `body.cdp .x` rules without !important; the few !important marks are where that * file uses them too. */ /* A hidden control stays hidden: the rules below give classes an author display, which would otherwise beat the UA's [hidden]. (The Customise module hides rail tools that are not on the rail with the attribute.) */ html body.cdp [hidden] { display: none !important; } /* ── SHARED TOKENS ────────────────────────────────────────────────────────────────────────────────────────── */ html body.cdp { --cds-accent: var(--jag-accent, #0F6E76); --cds-accent-soft: #E3F3F4; --cds-pro: #A04F26; --cdp-shadow: none; --cdp-radius: var(--cds-r-panel); --cds-r-panel: var(--jag-radius-panel, 4px); /* SHARP1: follows css/tokens.css */ --cds-r-ctl: var(--jag-radius, 2px); --cds-chart-h: clamp(480px, calc(100vh - 318px), 720px); } html[data-chart-theme="dark"] body.cdp { --cds-accent: #57CFD8; --cds-accent-soft: #0E2B32; --cdp-shadow: none; } /* ── THE FRAME: ONE SURFACE, DIVIDED BY LINES, SCROLLING AS ONE PAGE ─────────────────────────────────────── */ /* The frame's rows size to their content at every width (chart-desk-page.css reserves a fixed dock row, --cdp-dock-h, at some widths and marks it !important elsewhere; measured at 768: the positions list was cut at 265px). */ html body.cdp .cdp-app { padding: 0 16px 16px; gap: 0; min-height: 0; height: auto !important; grid-template-rows: auto auto auto auto !important; } html body.cdp .cdp-bottom, html body.cdp .cdp-bottom .cdp-panel { height: auto !important; max-height: none !important; } /* THE POSITIONS AND ALERTS PANEL HAS ITS OWN SCROLL, AT ONE HEIGHT (batch CHARTFIX2, owner 24 Oct 2026, of 37 positions making the page feet tall: "What if they have 500 holdings?"). The panel is 320px on a laptop (its 44px tab row and a 276px list), whatever the count; the list scrolls inside it, the tab row stays above it, a table's column names stay at its top (.cdp-tbl thead th is sticky, chart-desk-page.css) and the totals line ("37 positions · $97,973.23") stays at its foot. The panel folds to its tab row with the button at the right of that row (body.cdp-dock-min). On a phone it is at most 60% of the screen (below). The lists inside take their full height in the scroller (the positions list carried a 200px cap at 768 wide; one scroller, not two). */ html body.cdp { --cds-dock-body: 276px; } html body.cdp .cdp-bottom .cdp-panel-body { height: var(--cds-dock-body) !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 0 !important; } html body.cdp .cdp-bottom :is(.poshist-wrap, .poshist-pane, .positions-panel, .trigger-orders-panel, .orders-panel, .canceled-orders-panel) { max-height: none !important; height: auto !important; } html body.cdp .cdp-bottom .pos-total { position: sticky; bottom: 0; z-index: 2; background: var(--cdp-panel); padding-bottom: 10px; } html body.cdp .cdp-dock-fold { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); } html body.cdp .cdp-dock-fold:hover { border-color: var(--cds-accent); color: var(--cds-accent); } html body.cdp .cdp-dock-fold svg { transition: transform .15s ease; } html body.cdp.cdp-dock-min .cdp-dock-fold svg { transform: rotate(180deg); } @media (min-width: 768px) { html body.cdp.cdp-dock-min .cdp-bottom .cdp-panel-body { display: none !important; } } @media (max-width: 767px) { html body.cdp .cdp-dock-fold { display: none !important; } html body.cdp.cdp-phone-layout :is(#cdpPosPanel, #cdpAlertsPanel) .cdp-panel-body { height: auto !important; max-height: 60vh !important; overflow-y: auto !important; overscroll-behavior: contain; } html body.cdp.cdp-phone-layout :is(#cdpPosPanel, #cdpAlertsPanel) :is(.poshist-wrap, .poshist-pane) { max-height: none !important; overflow: visible !important; } } html body.cdp .cdp-panel { border-radius: 0; box-shadow: none; border: 0; overflow: visible; min-height: 0; } html body.cdp .cdp-chrome { border: 1px solid var(--cdp-hairline); border-bottom: 0; border-radius: var(--cds-r-panel) var(--cds-r-panel) 0 0; overflow: hidden; } html body.cdp .cdp-main { gap: 0; min-height: 0; max-height: none; grid-template-columns: 276px minmax(0, 1fr) 300px; border: 1px solid var(--cdp-hairline); border-top: 1px solid var(--cdp-hairline); align-items: stretch; } html body.cdp #cdpWlPanel { border-right: 1px solid var(--cdp-hairline); } html body.cdp #cdpTicketPanel { border-left: 1px solid var(--cdp-hairline); } html body.cdp .cdp-chartpanel { overflow: hidden; } html body.cdp .cdp-chart-wrap { height: var(--cds-chart-h); grid-template-rows: auto minmax(0, 1fr); } html body.cdp .cdp-bottom { gap: 0; min-height: 0; grid-template-columns: 1.4fr 1fr; border: 1px solid var(--cdp-hairline); border-top: 0; border-radius: 0 0 var(--cds-r-panel) var(--cds-r-panel); overflow: hidden; } html body.cdp .cdp-bottom .cdp-panel { background: var(--cdp-panel); } html body.cdp #cdpAlertsPanel { border-left: 1px solid var(--cdp-hairline); } html body.cdp .cdp-bottom .cdp-panel-header { background: var(--cdp-panel-2); height: 44px; } html body.cdp .cdp-bottom .cdp-panel-body { min-height: 150px; padding: 8px 14px 12px; } /* The page scrolls; nothing scrolls inside its own box. */ html body.cdp .cdp-panel-body { height: auto; overflow: visible; padding: 10px 12px; } html body.cdp .cdp-wl-scroll { max-height: none; overflow: visible; } html body.cdp .cdp-panel-header { height: 44px; padding: 0 12px; font-size: 13px; background: var(--cdp-panel-2); border-bottom: 1px solid var(--cdp-hairline); } /* The phone's own controls (the symbol switcher, the order-box sheet's X and scrim, the positions strip) are not drawn on a laptop; the phone block at the end draws them. */ html body.cdp :is(.cdp-symswitch, .cdp-sheet-x, .cdp-sheet-scrim, .cdp-phonestrip) { display: none; } /* ── CONTROLS: ONE RADIUS, ONE BORDER, ICONS CENTRED ─────────────────────────────────────────────────────── */ html body.cdp :is(.cdp-chip, .cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn, .cdp-icon-btn, .cdp-input, .cdp-select, .cdp-seg-btn, .cdp-preset, .cdp-side, .cdp-btn, .cdp-wl-add-go, .cdp-info-btn, .cdp-keys-btn, #chartAlertBtn, .cdp-tier, .cdp-layout, #cdpTif, .cdp-pill, .cdp-symsearch) { border-radius: var(--cds-r-ctl); } html body.cdp :is(.cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn) { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } html body.cdp :is(.cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn) > svg { display: block; margin: 0; } /* A Pro member never sees a lock mark (23 Oct 2026: the rule above out-ranked chart-desk-page.css's "html.is-pro .cdp-lay-lock { display: none }", so goldenboy3, a Pro seat, saw locks on 2 and 4 charts). */ html:is(.is-pro, .is-pro-hint) body.cdp :is(.cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn) > svg:is(.cdp-lay-lock, [class*="lock"]) { display: none; } /* Reset zoom stays off the toolbar (batch PROAUDIT, 24 Oct 2026). chart-desk-page.css takes it off (CH-5 item 8: its place is the "..." menu, which lists it as a row of its own); the display above out-ranked that hide from release 116, so the bar carried a second Reset zoom beside Layout. */ html body.cdp .cdp-tierbar .cdp-tbtn[data-tool="reset"] { display: none; } /* Undo and Redo: the arrow sits in the lower two thirds of its own box; lifted so it reads centred. */ html body.cdp .cdp-tbtn[data-tool="undo"] > svg, html body.cdp .cdp-tbtn[data-tool="redo"] > svg { transform: translateY(-1.5px); } /* The site header's gear and the other glyph buttons: centred, not a few pixels low. Upgrade and the free try's chip are left out (batch PROAUDIT, 24 Oct 2026): each is hidden by css/app-header.css until the page knows who may see it, and this display out-ranked that hide, so a returning Pro member saw a bare "Upgrade" link on Chart until the server answered (html.is-pro-hint). Both already centre themselves when shown. :where() keeps the rule's weight as it was. */ html body.cdp .pt-auth-slot :is(button, a):not(:where(.pt-upgrade, .pt-trychip)) { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } html body.cdp .pt-auth-slot :is(button, a) > svg { display: block; } html body.cdp .cdp-mini-btn { width: 28px; height: 28px; } html body.cdp .cdp-mini-btn > svg { width: 15px; height: 15px; } /* The theme lives in Settings now, not as a moon in the header (owner). */ html body.cdp [data-jag-theme-btn], html body.cdp [data-intel-theme-btn] { display: none !important; } /* Chosen = outlined in the accent, never filled (house rule). */ html body.cdp .cdp-chip.active, html body.cdp .cdp-tbtn.on, html body.cdp .cdp-rtool.on, html body.cdp .cdp-lay.on, html body.cdp .cdp-seg-btn.on:not([data-side]), html body.cdp .cdp-preset.on { background: var(--cdp-panel); color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); font-weight: 800; } html body.cdp :is(.cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-chip, .cdp-mini-btn):hover { background: var(--cdp-panel-2); color: var(--cdp-text); border-color: var(--cdp-text); } html body.cdp .cdp-ctrl-sep { display: none; } /* ── LAYOUT BUTTONS: PROFESSIONAL SINGLE / SPLIT / QUAD MARKS ────────────────────────────────────────────── */ html body.cdp .cdp-lay > svg:not(.cdp-lay-lock) { display: none; } html body.cdp .cdp-lay::before { content: ""; display: block; width: 16px; height: 14px; background: currentColor; -webkit-mask: var(--cds-lay) center / contain no-repeat; mask: var(--cds-lay) center / contain no-repeat; } html body.cdp .cdp-lay[data-layout="single"] { --cds-lay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Crect x='1' y='1' width='14' height='12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); } html body.cdp .cdp-lay[data-layout="split"] { --cds-lay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Crect x='1' y='1' width='14' height='12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 1v12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); } html body.cdp .cdp-lay[data-layout="quad"] { --cds-lay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Crect x='1' y='1' width='14' height='12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 1v12M1 7h14' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); } /* The group keeps its own 1px border (chart-desk-page.css); the three buttons sit on it, so the eye reads one line. */ html body.cdp .cdp-layout { gap: 0; padding: 0; background: transparent; border-radius: var(--cds-r-ctl); overflow: visible; } html body.cdp .cdp-lay { width: 30px; height: 28px; border-radius: 0; margin: -1px 0 -1px -1px; } html body.cdp .cdp-lay:first-child { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: -1px; } html body.cdp .cdp-lay:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; margin-right: -1px; } html body.cdp .cdp-lay.on { position: relative; z-index: 1; } html body.cdp .cdp-lay-lock { right: 1px; bottom: 1px; width: 10px !important; height: 10px !important; color: var(--cds-pro); } html body.cdp .cdp-group-label { display: none; } /* ── THE TOOLBAR ROW ──────────────────────────────────────────────────────────────────────────────────────── */ html body.cdp .cdp-tierbar { background: var(--cdp-panel); padding: 6px 12px; gap: 10px; min-height: 42px; } html body.cdp .cdp-ctl-k { font-size: 10.5px; letter-spacing: .08em; color: var(--cdp-muted); } html body.cdp .cdp-chart-controls { gap: 4px; } html body.cdp .cdp-chip { padding: 0 9px; height: 28px; display: inline-flex; align-items: center; font-weight: 700; } html body.cdp .cdp-tbtn { width: 30px; height: 28px; } html body.cdp .cdp-tbgroup { display: inline-flex; gap: 0; } html body.cdp .cdp-tbgroup .cdp-tbtn { border-radius: 0; margin-left: -1px; } html body.cdp .cdp-tbgroup .cdp-tbtn:not([hidden]):first-of-type { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp .cdp-tbgroup .cdp-tbtn:last-of-type { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp .cdp-tbtn-named { width: auto; padding: 0 9px; gap: 6px; } html body.cdp .cdp-tbtn-named i { font-style: normal; color: var(--cdp-muted); font-size: 11px; } html body.cdp .cdp-tbtn-named b { font-size: 12px; } html body.cdp .cdp-tierchips { display: inline-flex; gap: 4px; align-items: center; } html body.cdp .cdp-gear { width: 30px; height: 28px; min-height: 28px; } /* measured 32 beside 28px neighbours: a min-height from the page sheet */ html body.cdp .cdp-morebtn { height: 28px; min-height: 0; padding: 0 9px; } /* the "..." sat 4px taller than its neighbours */ html body.cdp .cdp-gear > svg { width: 16px; height: 16px; } html body.cdp .cdp-gear[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } /* Rows of the "..." menu that moved: settings to the gear, the alert to the one Alert control. */ html body.cdp .cdp-menu { border-radius: var(--cds-r-ctl); border-color: var(--cdp-border); box-shadow: 0 10px 30px rgba(15, 23, 42, .14); } html body.cdp .cdp-menu button { border-radius: 4px; } /* ── THE HEADER (symbol, price, session figures) ─────────────────────────────────────────────────────────── */ html body.cdp .cdp-chart-toolbar { padding: 8px 12px; min-height: 0; } html body.cdp .cdp-sym-row { gap: 10px; align-items: center; } html body.cdp .cdp-symbol { font-size: 18px; } html body.cdp .cdp-last { font-size: 18px; } html body.cdp .cdp-pill { padding: 0 9px; height: 26px; font-size: 12px; font-weight: 700; } html body.cdp .cdp-sub-row { font-size: 12px; } html body.cdp .cdp-sm i { font-style: normal; color: var(--cdp-muted); } html body.cdp .cdp-mini { border: 0; background: transparent; padding: 0; border-radius: 0; display: inline-flex; gap: 6px; align-items: baseline; } html body.cdp .cdp-mini-label { margin: 0; font-size: 12px; } html body.cdp .cdp-mini-value { font-size: 12px; font-weight: 700; } html body.cdp .cdp-symsearch { height: 32px; } html body.cdp .cdp-icon-btn { height: 28px; } /* ── THE DRAWING RAIL: A SHORT STARRED SET AND A + ───────────────────────────────────────────────────────── */ html body.cdp .cdp-rail { background: var(--cdp-panel); padding: 8px 0; gap: 4px; position: relative; } html body.cdp .cdp-rtool { width: 30px; height: 30px; } html body.cdp .cdp-rail-plus { color: var(--cdp-muted); border-style: dashed; margin-top: 2px; } html body.cdp .cdp-rail-plus[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); border-style: solid; box-shadow: inset 0 0 0 1px var(--cds-accent); } html body.cdp .cdp-rail-sep { display: none; } /* The + opens the Indicators & tools dialog on Drawing tools (batch TOOLS1); its own list beside the rail is gone. */ /* ── THE WATCHLIST: SYMBOL · LAST · CHANGE · % CHANGE ────────────────────────────────────────────────────── */ html body.cdp .cdp-wl-add { margin: 0 0 8px; } html body.cdp .cdp-wl-add .cdp-input, html body.cdp .cdp-wl-add #cdpWlAddInput { height: 32px; min-height: 32px; padding: 0 10px; font-size: 12.5px; } /* the box measured 36 beside its 32px Add */ html body.cdp .cdp-wl-add-go { height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px; } html body.cdp .cdp-wl { display: block; font-size: 12.5px; } html body.cdp .cdp-wl :is(thead, tbody) { display: block; } html body.cdp .cdp-wl tr { display: grid; align-items: center; column-gap: 6px; position: relative; grid-template-columns: minmax(44px, .8fr) repeat(var(--cds-wl-n, 3), minmax(58px, 1fr)); border-bottom: 1px solid var(--cdp-hairline); min-height: 36px; padding: 0 2px; } html body.cdp .cdp-wl tbody tr { cursor: pointer; } html body.cdp .cdp-wl tbody tr:hover, html body.cdp .cdp-wl tbody tr.on { background: var(--cdp-panel-2); } html body.cdp .cdp-wl tbody tr.on { box-shadow: inset 2px 0 0 var(--cds-accent); } html body.cdp .cdp-wl :is(th, td) { display: block; padding: 0; border: 0; background: transparent !important; min-width: 0; } html body.cdp .cdp-wl td:nth-child(3) { display: contents !important; } /* its two figures and the remove control are the row's own items */ html body.cdp .cdp-wl td .cdp-wl-move { display: contents !important; } html body.cdp .cdp-wl .cdp-wl-th-x { display: none; } html body.cdp .cdp-wl-edit { display: none; } /* Edit is a phone control (batch AUDITFIX-A); a laptop removes from the row under the pointer */ html body.cdp .cdp-wl td:first-child { order: 1; display: flex; } html body.cdp .cdp-wl td:nth-child(2) { order: 2; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } html body.cdp .cdp-wl td .cdp-wl-move > .cdp-wl-usd { order: 3; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; display: block; font-size: inherit; margin: 0; overflow: visible; line-height: 1.2; } html body.cdp .cdp-wl td .cdp-wl-move > .cdp-wl-usd:empty { display: block; } html body.cdp .cdp-wl td .cdp-wl-move > .cdp-wl-chg { order: 4; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; display: block; overflow: visible; line-height: 1.2; } /* Remove: over the row's right end, only while the row is under the pointer (a list of eight is not eight x's). */ html body.cdp .cdp-wl .cdp-wl-x { order: 5 !important; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cds-r-ctl); border: 1px solid var(--cdp-border); background: var(--cdp-panel); color: var(--cdp-text); opacity: 0; pointer-events: none; font-size: 14px; } html body.cdp .cdp-wl tbody tr:hover .cdp-wl-x, html body.cdp .cdp-wl .cdp-wl-x:focus-visible { opacity: 1; pointer-events: auto; } html body.cdp .cdp-wl .cdp-wl-x:hover { color: var(--cdp-panel); background: var(--cdp-text); border-color: var(--cdp-text); } html body.cdp .cdp-wl th { font-size: 10.5px; color: var(--cdp-muted); text-align: right; min-width: 0 !important; width: auto !important; max-width: 100%; overflow: hidden; padding: 0 !important; } html body.cdp .cdp-wl th:first-child { text-align: left; } html body.cdp .cdp-wl thead tr { min-height: 30px; border-bottom: 1px solid var(--cdp-border); } html body.cdp .cdp-wl-sort { box-sizing: border-box; width: 100%; min-width: 0; justify-content: flex-end; padding: 0 4px; border: 1px solid var(--cdp-border); border-radius: 4px; background: var(--cdp-panel); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: -.01em; color: var(--cdp-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-height: 22px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html body.cdp .cdp-wl th:first-child .cdp-wl-sort { justify-content: flex-start; } html body.cdp .cdp-wl-sort:hover { color: var(--cdp-text); border-color: var(--cdp-text); } html body.cdp .cdp-wl-sort.on { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } html body.cdp .cdp-wl-sort-ar { font-size: 10px; } html body.cdp .cdp-wl-sym { font-weight: 800; font-size: 12.5px; padding: 0; border: 0; background: none; color: var(--cdp-text); } /* The one price pair in the wrong colour reads as a fact: up green, down red, flat ink (house rule). */ html body.cdp .cdp-wl .cdp-wl-chg.flat, html body.cdp .cdp-wl .cdp-wl-usd.flat { color: var(--cdp-muted); font-weight: 600; } /* Columns the member turned off */ html body.cdp .cdp-wl.cdp-wl-hide-last :is(td:nth-child(2), th:nth-child(2)), html body.cdp .cdp-wl.cdp-wl-hide-usd :is(.cdp-wl-usd, .cdp-wl-th-usd), html body.cdp .cdp-wl.cdp-wl-hide-pct :is(.cdp-wl-chg, th:nth-child(4)) { display: none !important; } html body.cdp .cdp-wl-actions { gap: 6px; } html body.cdp .cdp-state.loading, html body.cdp .cdp-state.empty { border-radius: var(--cds-r-ctl); } /* The page's own drawn checkbox (chart-desk-page.css: no browser-drawn control), for the watchlist settings and Settings > Trading */ html body.cdp :is(.cdp-wlset, .cdp-set-row) input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border-radius: 5px; cursor: pointer; border: 1.5px solid var(--cdp-border); background: var(--cdp-panel); } html body.cdp :is(.cdp-wlset, .cdp-set-row) input[type="checkbox"]::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--cdp-panel); border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } html body.cdp :is(.cdp-wlset, .cdp-set-row) input[type="checkbox"]:checked { background: var(--cdp-text); border-color: var(--cdp-text); } html body.cdp :is(.cdp-wlset, .cdp-set-row) input[type="checkbox"]:checked::after { display: block; } html body.cdp :is(.cdp-wlset, .cdp-set-row) input[type="checkbox"]:focus-visible { outline: 2px solid var(--cdp-text); outline-offset: 2px; } /* The watchlist settings box, in place under the add row */ .cdp-wlset { margin: 0 0 8px; padding: 10px 12px 12px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); display: grid; gap: 10px; } .cdp-wlset[hidden] { display: none !important; } .cdp-wlset-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cdp-wlset-h b { font-size: 12.5px; font-weight: 800; } .cdp-wlset-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } .cdp-wlset-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; margin: 0 0 4px; } .cdp-wlset label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; min-height: 28px; cursor: pointer; } /* The sort list is the page's own (js/app/chart-desk-boot.js): it sits in this box now, not as a floating menu. */ html body.cdp .cdp-wlset .cdp-wlsort { position: static !important; left: auto !important; right: auto !important; top: auto !important; z-index: auto; display: grid; gap: 2px; margin: 0; padding: 0; min-width: 0; max-width: none; max-height: none; overflow: visible; list-style: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; } html body.cdp .cdp-wlset .cdp-wlsort[hidden] { display: none; } /* ONE CLEAN LIST (batch FIX1, the owner 30 Oct 2026: "looks horrible"; picking a sort "glitched out"). One line per option, the label one span, left-aligned; every row has the same 2px edge, transparent until it is the chosen one, which is outlined in teal. The weight never changes between chosen and not, so nothing reflows on a pick, and the menu's old tick (chart-desk-page.css li.on::after) is not drawn here: the outline says which one is chosen. */ html body.cdp .cdp-wlset .cdp-wlsort li { font-size: 12.5px; font-weight: 600; color: var(--cdp-text); background: var(--cdp-panel); border: 2px solid transparent; border-radius: var(--cds-r-ctl, 4px); padding: 0 8px; min-height: 32px; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; white-space: nowrap; } html body.cdp .cdp-wlset .cdp-wlsort li + li { border-top: 2px solid transparent; } /* the menu's divider line is not drawn in the box */ html body.cdp .cdp-wlset .cdp-wlsort .cdp-wlsort-lab { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body.cdp .cdp-wlset .cdp-wlsort li:hover { background: var(--cdp-panel-2); } html body.cdp .cdp-wlset .cdp-wlsort li.on { color: var(--cdp-text); border-color: var(--cds-accent); font-weight: 600; } html body.cdp .cdp-wlset .cdp-wlsort li.on::after { content: none; } html body.cdp .cdp-wlset .cdp-wlsort li:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 1px; } html[data-chart-theme="dark"] body.cdp .cdp-wlset .cdp-wlsort li.on { color: var(--cdp-text) !important; } /* outlined, not recoloured, in both themes */ /* ── THE ORDER BOX: TIGHTER, NO RULES BUTTON, NO "ORDER ANSWERS" ─────────────────────────────────────────── */ html body.cdp .cdp-ticket-tabs { gap: 0; margin-bottom: 10px; } html body.cdp .cdp-side { height: 36px; padding: 0; font-size: 13px; letter-spacing: .04em; border-radius: 0; margin-left: -1px; display: inline-flex; align-items: center; justify-content: center; } html body.cdp .cdp-side:first-child { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp .cdp-side:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp .cdp-side.on { position: relative; z-index: 1; background: var(--cdp-panel); } html body.cdp .cdp-side.on.buy { box-shadow: inset 0 0 0 1px var(--cdp-green-text); } html body.cdp .cdp-side.on.sell { box-shadow: inset 0 0 0 1px var(--cdp-red); } html body.cdp .cdp-field { margin-bottom: 10px; } html body.cdp .cdp-flabel { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; } html body.cdp .cdp-seg { gap: 0; } html body.cdp .cdp-seg-btn { height: 32px; padding: 0; border-radius: 0; margin-left: -1px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; } html body.cdp .cdp-seg-btn:first-child { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp .cdp-seg-btn:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp .cdp-seg-btn.on { position: relative; z-index: 1; } html body.cdp .cdp-input, html body.cdp .cdp-select, html body.cdp #cdpTif { height: 36px; padding: 0 10px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } html body.cdp .cdp-input:focus { border-color: var(--cds-accent); box-shadow: 0 0 0 1px var(--cds-accent); } html body.cdp .cdp-presets { gap: 0; margin-top: 6px; } /* A size that would be refused is not offered (batch AUDITFIX-A, js/app/chart-desk-boot.js paintOffers): the sizes left share the row instead of leaving a gap. The same for the side: with nothing to sell, BUY is the whole row. */ html body.cdp #cdpQtyPresets.cdp-presets:has(> .cdp-preset[hidden]) { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } html body.cdp .cdp-side:first-child:has(+ .cdp-side[hidden]) { border-radius: var(--cds-r-ctl); } html body.cdp .cdp-preset { height: 28px; padding: 0; border-radius: 0; margin-left: -1px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } html body.cdp .cdp-preset:first-child { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp .cdp-preset:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp .cdp-preset.on { position: relative; z-index: 1; } html body.cdp .cdp-px-mkt { font-size: 12px; margin: 0 0 8px; } /* THE TWO FIGURES ARE TWO ROWS, LABEL LEFT AND FIGURE RIGHT, as in the replay's order ticket (batch CHARTFIX2, owner 24 Oct 2026): side by side, "Buying power $4,354.16" stacked on the right out of line with the cost. Each row is a hairline-ruled line of its own, the figure right-aligned in tabular numbers. */ html body.cdp .cdp-ticket-est { display: block; padding: 0; margin: 2px 0 10px; border-top: 1px solid var(--cdp-hairline); border-bottom: 0; } html body.cdp .cdp-ticket-est .cdp-kv { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 30px; padding: 6px 0; border-bottom: 1px solid var(--cdp-hairline); font-size: 12px; line-height: 1.25; } html body.cdp .cdp-ticket-est .cdp-kv span { display: inline; flex: 0 0 auto; color: var(--cdp-muted); font-size: 12px; font-weight: 600; } html body.cdp .cdp-ticket-est .cdp-kv b { flex: 0 1 auto; min-width: 0; text-align: right; font-size: 13px; font-weight: 700; } html body.cdp .cdp-kv { display: block; padding: 0; font-size: 12px; } html body.cdp .cdp-kv span { display: block; color: var(--cdp-muted); font-size: 11px; } html body.cdp .cdp-kv b { display: block; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } html body.cdp .cdp-cta-main { height: 42px; padding: 0; font-size: 14px; border-radius: var(--cds-r-ctl); } html body.cdp .cdp-cta-sub { font-size: 12px; margin: 8px 0 0; } html body.cdp .cdp-cta-sub:empty { margin: 0; } /* nothing to say: no gap under the button (batch AUDITFIX-A) */ html body.cdp .cdp-orderlog { margin-top: 10px; border-top: 1px solid var(--cdp-hairline); padding-top: 8px; } html body.cdp .cdp-orderlog-list { font-size: 11.5px; color: var(--cdp-muted); } /* ── POSITIONS: FLAT ROWS, NOT CARDS ─────────────────────────────────────────────────────────────────────── */ html body.cdp.invest-mode .pos-row, html[data-chart-theme="dark"] body.cdp.invest-mode .pos-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--cdp-hairline) !important; border-radius: 0 !important; padding: 8px 2px !important; margin: 0 !important; box-shadow: none !important; } html body.cdp.invest-mode .pos-row:hover, html[data-chart-theme="dark"] body.cdp.invest-mode .pos-row:hover { background: var(--cdp-panel-2) !important; } html body.cdp .pos-sell { border-radius: var(--cds-r-ctl); min-height: 32px; } html body.cdp .pos-total { border-top: 1px solid var(--cdp-border); padding-top: 8px; font-size: 12.5px; } /* ── ALERTS: ONE WAY TO SET ONE ──────────────────────────────────────────────────────────────────────────── */ html body.cdp #cdpAlertsEmpty { background: transparent; border: 0; padding: 8px 0; text-align: left; color: var(--cdp-muted); font-size: 12.5px; } html body.cdp #chartAlertBtn { height: 28px; padding: 0 10px; font-size: 12px; font-weight: 700; border-radius: var(--cds-r-ctl); display: inline-flex; align-items: center; gap: 6px; } html body.cdp #chartAlertBtn::before { content: "+"; font-weight: 800; } /* The tabs read as live controls: ink, not the muted grey that looked switched off (owner 23 Oct). The count is the shared pill (.cdp-htab-n, css/tokens.css), spaced from the label. */ html body.cdp .cdp-htab { border-radius: var(--cds-r-ctl); height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--cdp-text); } html body.cdp .cdp-htab.on .cdp-htab-n { background: var(--cdp-panel); color: var(--cdp-text); border-color: var(--cdp-text); } /* ── THE LOCKED PANE: THE SITE'S PAYWALL CARD OVER A BLURRED PICTURE OF THE CHART ────────────────────────── The page's own card (js/app/chart-desk-boot.js lockPane) keeps its words and its controls; this is how it is drawn: a card like the Pro offer everywhere else (the Pro orange top edge and kicker are the offer's own colour), centred over a blurred picture of the live chart that js/app/chart-desk-panels.js paints into --cds-ghost, and a Not now. */ html body.cdp .cdp-cell[data-locked] { position: relative; overflow: hidden; } html body.cdp .cdp-cell[data-locked]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--cds-ghost, var(--cdp-panel-2)) center / cover no-repeat; filter: blur(7px) saturate(.6); transform: scale(1.04); opacity: .9; } html body.cdp .cdp-cell[data-locked]::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(15, 23, 42, .28); } html[data-chart-theme="dark"] body.cdp .cdp-cell[data-locked]::after { background: rgba(0, 0, 0, .42); } html body.cdp .cdp-cell[data-locked] .cdp-cell-lock { position: absolute; z-index: 3; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: calc(100% - 32px); max-width: 420px; max-height: calc(100% - 24px); overflow: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left; padding: 14px 18px 16px; border: 1px solid var(--cdp-border); border-top: 5px solid var(--cds-pro); border-radius: 12px; background: var(--cdp-panel); color: var(--cdp-text); box-shadow: 0 24px 60px rgba(15, 23, 42, .35); } html[data-chart-theme="dark"] body.cdp .cdp-cell[data-locked] .cdp-cell-lock { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } html body.cdp .cdp-cell-lock .cdp-cell-lock-k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cds-pro); } html[data-chart-theme="dark"] body.cdp .cdp-cell-lock .cdp-cell-lock-k { color: #F0A27A; } html body.cdp .cdp-cell-lock .cdp-cell-lock-t { font-size: 16px; } html body.cdp .cdp-cell-lock .cdp-cell-lock-b { font-size: 13px; } html body.cdp .cdp-cell-lock .cdp-lock-tiers { justify-content: flex-start; text-align: left; } html body.cdp .cdp-cell-lock .cdp-cell-lock-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: 4px; } html body.cdp .cdp-cell-lock .cdp-cell-lock-go { margin-top: 0; } .cdp-lock-later { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 700; min-height: 34px; padding: 0 12px; cursor: pointer; border: 1px solid var(--cdp-border); border-radius: 8px; background: transparent; color: var(--cdp-text); } .cdp-lock-later:hover { border-color: var(--cdp-text); } html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell-lock { padding: 10px 14px 12px; max-width: 360px; gap: 4px; } html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell-lock .cdp-cell-lock-b { display: none; } /* four cells: the title, the Free / Pro line and the controls fit; the sentence shows in the split view */ html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell-lock .cdp-cell-lock-t { font-size: 14px; } html body.cdp .cdp-cell-lock.cdp-cell-lock--empty { display: none !important; } /* the other locked cells: no card, no words (batch AUDITFIX-A) */ /* FOUR CHARTS ON A LAPTOP: THE ONE CARD STANDS OVER THE RIGHT-HAND COLUMN. (batch AUDITFIX-A) With the free try in it the card is about 235px tall and a quad cell about 240px at 1280x800 (220 at 1024x768), so Upgrade to Pro and Not now were cut off at the cell's foot. The cell under it is one of the empty locked cells, so the card is centred on the line between the two and has both to stand in; nothing in that cell is a control. The offer cell's blurred picture is held to its own box (clip-path: the picture is drawn 4% large so its blurred edge is never seen). */ @media (min-width: 768px) { html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell[data-locked]:has(.cdp-cell-lock-go) { overflow: visible; z-index: 4; } html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell[data-locked]:has(.cdp-cell-lock-go)::before { clip-path: inset(2%); } html body.cdp .cdp-grid[data-layout="quad"] .cdp-cell[data-locked] .cdp-cell-lock:has(.cdp-cell-lock-go) { top: 100%; max-height: calc(200% - 24px); } } /* THE CHOICE FIRST ON A PHONE. (batch SANDBOX3, follow-up of SANDBOX2) Under 768px the locked chart's pane is short, so the card is about 190px tall and its words about 345px: Try Pro free, Upgrade to Pro and Not now all sat below the card's visible bottom and a member had to scroll inside the card to find them. On a phone the kicker ("Pro subscription required") stays on top, the buttons come straight under it, and the words follow (they scroll, the choice does not). The order a screen reader reads is the page's own; only the drawing order changes. */ @media (max-width: 767px) { html body.cdp .cdp-cell[data-locked] .cdp-cell-lock .cdp-cell-lock-k { order: -2; } html body.cdp .cdp-cell[data-locked] .cdp-cell-lock .cdp-cell-lock-foot { order: -1; margin-top: 0; margin-bottom: 4px; } html body.cdp .cdp-cell[data-locked] .cdp-cell-lock .cdp-lock-later { min-height: 44px; } /* a phone tap: 44px, as Upgrade beside it */ } /* ── THE SHARED PANEL SHELL: SETTINGS, AND INDICATORS + CUSTOMISE ────────────────────────────────────────── */ .cdp-mpanel { position: fixed; z-index: 260; width: 640px; max-width: calc(100vw - 24px); max-height: min(78vh, 640px); display: flex; flex-direction: column; background: var(--cdp-panel); color: var(--cdp-text); border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); box-shadow: 0 18px 48px rgba(15, 23, 42, .22); overflow: hidden; } .cdp-mpanel[hidden] { display: none !important; } .cdp-mpanel-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--cdp-hairline); background: var(--cdp-panel-2); } .cdp-mpanel-h b { font-size: 13px; font-weight: 800; flex: 1 1 auto; } .cdp-mpanel-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; } .cdp-mpanel-x:hover { border-color: var(--cdp-text); } .cdp-mpanel-split { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; } .cdp-mpanel-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--cdp-hairline); background: var(--cdp-panel-2); overflow-y: auto; } .cdp-mpanel-nav button { text-align: left; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cdp-text); background: var(--cdp-panel); border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); padding: 0 10px; min-height: 32px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; } .cdp-mpanel-nav button:hover { border-color: var(--cdp-text); } .cdp-mpanel-nav button.on { color: var(--cds-accent, #0F6E76); border-color: var(--cds-accent, #0F6E76); box-shadow: inset 0 0 0 1px var(--cds-accent, #0F6E76); font-weight: 800; } .cdp-mpanel-nav button small { font-size: 11px; color: var(--cdp-muted); font-variant-numeric: tabular-nums; } .cdp-mpanel-nav .cdp-mpanel-navsep { height: 1px; background: var(--cdp-hairline); margin: 6px 2px; } .cdp-mpanel-pane { min-height: 0; overflow-y: auto; padding: 12px 14px 14px; } .cdp-mpanel-pane > [hidden] { display: none !important; } .cdp-mpanel-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; margin: 0 0 8px; } .cdp-mpanel-note { font-size: 12px; color: var(--cdp-muted); margin: 6px 0 0; } /* Appearance: two outlined cards, the chosen one outlined in the accent */ /* The chart switches moved in: one row each, a line under */ .cdp-mpanel-pane .cdp-settings { position: static; display: grid; gap: 0; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; width: auto; max-width: none; } .cdp-mpanel-pane .cdp-settings label { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 2px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--cdp-hairline); } .cdp-mpanel-pane .cdp-settings .cdp-set-sub { margin: -4px 0 8px 28px; font-size: 11.5px; color: var(--cdp-muted); } .cdp-mpanel-pane .cdp-settings-close { display: none; } /* Trading: the quantity presets as four boxes */ .cdp-set-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; } .cdp-set-presets input { width: 100%; height: 36px; box-sizing: border-box; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); } .cdp-set-presets input:focus { outline: none; border-color: var(--cds-accent, #0F6E76); box-shadow: 0 0 0 1px var(--cds-accent, #0F6E76); } .cdp-set-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--cdp-hairline); cursor: pointer; } /* Hotkeys: the list moved in */ .cdp-mpanel-pane .cdp-keys-panel { position: static; display: block; border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; width: auto; max-width: none; } .cdp-mpanel-pane .cdp-keys-head { display: none; } .cdp-mpanel-pane .cdp-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 12.5px; } .cdp-mpanel-pane .cdp-keys dt { margin: 0; } .cdp-mpanel-pane .cdp-keys dd { margin: 0; align-self: center; } .cdp-mpanel-pane .cdp-keys kbd { display: inline-block; min-width: 22px; text-align: center; padding: 2px 6px; border: 1px solid var(--cdp-border); border-bottom-width: 2px; border-radius: 4px; font: inherit; font-size: 11.5px; font-weight: 800; background: var(--cdp-panel-2); } .cdp-mpanel-pane .cdp-keys-switch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; min-height: 32px; } .cdp-mpanel-pane .cdp-keys-foot { font-size: 11.5px; color: var(--cdp-muted); margin: 4px 0 0; } /* The Customise module's Toolbar category, moved into the dialog (its own head, categories and search box stay out: the dialog has one search box, on top) */ .cdp-mpanel-pane .cdp-customise { position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: none !important; max-height: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; } .cdp-mpanel-pane .cdp-customise .cx-head { display: none; } .cdp-mpanel-pane .cdp-customise .cx-nav-rail { display: none; } .cdp-mpanel-pane .cdp-customise .cx-split { display: block; } .cdp-mpanel-pane .cdp-customise .cx-search { display: none; } .cdp-mpanel-pane .cdp-customise { padding: 12px 14px 14px; } .cdp-mpanel-pane .cdp-customise .cx-pane { padding: 0; max-height: none; overflow: visible; } .cdp-mpanel-pane .cdp-customise .cx-foot { padding: 10px 0 0; } /* Inside the Indicators & tools dialog (batch TOOLS1) the Toolbar category's rows look like the dialog's own: one bordered box per list, a 1px line between rows, square 2px controls. Its stars are not drawn here: in this dialog a star means Favourites (an indicator) or the toolbar beside the chart (a drawing tool), and the dialog's Favourites does not list the buttons above the chart, so a star on one of them would promise something the dialog never shows. The stars a member set before are kept on the account (jag_desk_favs_v1), untouched. */ .cdp-mpanel--studio .cdp-customise .cx-rows { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); } .cdp-mpanel--studio .cdp-customise .cx-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; } .cdp-mpanel--studio .cdp-customise .cx-row + .cx-row { border-top: 1px solid var(--cdp-hairline); } .cdp-mpanel--studio .cdp-customise .cx-row:hover { background: var(--cdp-panel-2); } .cdp-mpanel--studio .cdp-customise .cx-row > .cx-row-main { flex: 1 1 0; min-width: 0; } .cdp-mpanel--studio .cdp-customise .cx-fav { display: none !important; } .cdp-mpanel--studio .cdp-customise :is(.cx-row-go, .cx-mv, .cx-ord, .cx-reset, .cx-tier, .cx-fold > summary) { border-radius: 2px; } .cdp-mpanel--studio .cdp-customise .cx-row-go { flex: 0 0 auto; } /* ── CUSTOMIZE TOOLBAR: THE ORDERED LIST (batch CHART1, the owner 6 Nov 2026: "it would be great if I could reorder") ── Each tool on the left toolbar is one row: the handle (six dots, dragged with a mouse, a finger or a pen), its place number, its name and line, the up and down arrows, Take off. The handle is a bordered square like every control here; touch-action: none on it, so a finger on the handle moves the row and never the page. The row being dragged is lifted: the panel's own ground, a teal outline and a shadow, over the rows it passes. */ .cdp-customise .cx-row-rail { position: relative; } .cdp-customise .cx-grip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 30px; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); color: var(--cdp-muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .cdp-customise .cx-grip svg { width: 8px; height: 12px; fill: currentColor; pointer-events: none; } .cdp-customise .cx-grip:hover { color: var(--cdp-text); border-color: var(--jag-accent, #0F6E76); } .cdp-customise .cx-grip-none { border-color: transparent; background: transparent; cursor: default; } .cdp-customise .cx-grip-none:hover { border-color: transparent; } .cdp-mpanel--studio .cdp-customise .cx-row.cx-lift, .cdp-customise .cx-row.cx-lift { z-index: 3; background: var(--cdp-panel); box-shadow: 0 8px 22px rgba(15, 23, 42, .2); outline: 1px solid var(--jag-accent, #0F6E76); outline-offset: -1px; will-change: transform; } .cdp-customise .cx-row.cx-lift .cx-grip { cursor: grabbing; color: var(--jag-accent-text, #0F6E76); border-color: var(--jag-accent, #0F6E76); } .cdp-customise .cx-sorting, .cdp-customise .cx-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; } .cdp-mpanel--studio .cdp-customise .cx-sorting .cx-row:not(.cx-lift):hover { background: transparent; } html[data-chart-theme="dark"] .cdp-customise .cx-row.cx-lift { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); } /* The tooltips (js/app/chart-desk-boot.js showTip) over the Indicators & tools dialog: it sits at 12061 (12100 on a phone), one layer over the tooltip's 12060, so the handle's, the arrows' and Customize toolbar's own lines were drawn under it. (batch CHART1) */ .cdp-tip { z-index: 12120; } html.cx-dragging-now .cdp-tip { display: none !important; } /* no tooltip under a row being dragged */ /* The two buttons that open it, outlined while it is up */ html body.cdp #cdpIndicators[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } /* ── INDICATORS & TOOLS: ONE DIALOG (batch TOOLS1, 24 Oct 2026) ───────────────────────────────────────────── Centred over the chart, 4px corners and 2px controls (the owner likes sharp, flat, square); a search box on top; the categories down the left in the shell's own nav; the rows on the right in bordered boxes, a 1px line between each pair, every row pressable end to end (the icon and the word both), its star in its own bordered square. Teal marks what is chosen; the only orange is the Pro tag, which a Pro member never sees. */ .cdp-mpanel--studio { --cds-r-ctl: 2px; z-index: 12061; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 760px; max-width: calc(100vw - 24px); height: min(78vh, 660px); max-height: calc(100vh - 24px); border-radius: 4px; box-shadow: var(--jag-shadow-float, 0 10px 28px rgba(15, 23, 42, .14)); } /* The dimmed page under it, the Layout dialog's (batch SHARP1): same tint, same layer; a press on it closes the dialog. */ .cdp-st-scrim { position: fixed; inset: 0; z-index: 12060; background: rgba(10, 22, 20, .42); } .cdp-st-scrim[hidden] { display: none !important; } html[data-chart-theme="dark"] .cdp-st-scrim { background: rgba(2, 8, 10, .62); } /* The title bar is the Layout dialog's: the panel's own colour, an 18px title, the site's round close button. */ .cdp-mpanel--studio .cdp-mpanel-h { padding: 12px 14px 12px 18px; background: var(--cdp-panel); } .cdp-mpanel--studio .cdp-mpanel-h b { font-size: 18px; letter-spacing: -.01em; } .cdp-mpanel--studio .cdp-mpanel-split { grid-template-columns: 176px minmax(0, 1fr); } .cdp-mpanel--studio .cdp-mpanel-nav button { min-height: 34px; } .cdp-mpanel--studio .cdp-mpanel-pane { padding: 0; } .cdp-st-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cdp-hairline); background: var(--cdp-panel); } .cdp-st-search > svg { width: 16px; height: 16px; color: var(--cdp-muted); flex: 0 0 auto; } .cdp-st-search input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13.5px; color: var(--cdp-text); background: var(--cdp-panel); border: 1px solid var(--cdp-border); border-radius: 2px; -webkit-appearance: none; appearance: none; } .cdp-st-search input::-webkit-search-cancel-button, .cdp-st-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; } .cdp-st-search input::placeholder { color: var(--cdp-muted); opacity: 1; } .cdp-st-search input:focus { outline: none; border-color: var(--cds-accent); box-shadow: 0 0 0 1px var(--cds-accent); } .cdp-st-clear { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .cdp-st-clear:hover { border-color: var(--cdp-text); } .cdp-st-clear[hidden] { display: none !important; } .cdp-st-list { padding: 4px 14px 14px; } .cdp-st-list[hidden] { display: none !important; } .cdp-st-grp { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; padding: 0 1px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; } .cdp-st-grp span { font-variant-numeric: tabular-nums; } .cdp-st-grp:first-child { margin-top: 10px; } .cdp-st-note-line { margin: 10px 1px 6px; } .cdp-st-box { border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); margin: 0 0 2px; } .cdp-st-grp + .cdp-st-box { margin-top: 0; } .cdp-st-note-line + .cdp-st-box, .cdp-st-cap + .cdp-st-box, .cdp-st-list > .cdp-st-box:first-child { margin-top: 8px; } .cdp-st-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; } .cdp-st-row + .cdp-st-row, .jag-cap-notice + .cdp-st-row { border-top: 1px solid var(--cdp-hairline); } .cdp-st-main { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px; min-width: 0; text-align: left; font: inherit; color: var(--cdp-text); background: transparent; border: 1px solid transparent; border-radius: 2px; cursor: pointer; } .cdp-st-main:hover { background: var(--cdp-panel-2); } .cdp-st-main:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: -3px; } .cdp-st-ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: 2px; color: var(--cdp-text); background: var(--cdp-panel); } .cdp-st-ico svg { width: 15px; height: 15px; display: block; } .cdp-st-row.on .cdp-st-ico { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } .cdp-st-txt { display: grid; gap: 1px; min-width: 0; } .cdp-st-name { font-size: 13px; font-weight: 700; line-height: 1.3; } .cdp-st-row.on .cdp-st-name { color: var(--cds-accent); } .cdp-st-note { font-size: 11.5px; color: var(--cdp-muted); line-height: 1.35; overflow-wrap: anywhere; } .cdp-st-tag { align-self: center; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--cdp-border); border-radius: 2px; color: var(--cdp-muted); white-space: nowrap; } .cdp-st-tag[data-st-tag="on"] { color: var(--cds-accent); border-color: var(--cds-accent); } .cdp-st-tag[data-st-tag="pro"] { color: #FFFFFF; background: var(--cds-pro, #A04F26); border-color: var(--cds-pro, #A04F26); } html[data-chart-theme="dark"] .cdp-st-tag[data-st-tag="pro"] { color: #1A1F29; background: #FF9440; border-color: #FF9440; } .cdp-st-star { width: 28px; height: 28px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); color: var(--cdp-muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .cdp-st-star:hover { border-color: var(--cdp-text); color: var(--cdp-text); } .cdp-st-star.on { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } .cdp-st-star--none { border-color: transparent; background: transparent; cursor: default; } /* The Free line over the indicators: the page's own Free / Pro line with the price, and the one Upgrade. It stands down while a lock card is open under a row (one bordered ask per surface), and a Pro member never sees it. */ .cdp-st-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel-2); } .cdp-st-cap .cdp-lock-tiers { flex: 1 1 260px; font-size: 12px; } .cdp-st-cap .jag-unlock-pro { flex: 0 0 auto; } .cdp-st-noask .cdp-st-cap .jag-unlock-pro { display: none !important; } html:is(.is-pro, .is-pro-hint) .cdp-st-cap, html:is(.is-pro, .is-pro-hint) .cdp-st-tag[data-st-tag="pro"] { display: none !important; } /* The lock card (js/research/cap-notice.js) opens under the row that was pressed, inside the row's box. */ .cdp-st-box .jag-cap-notice { width: auto; margin: 4px 8px 8px; border-radius: 2px; } /* The two openers, outlined while the dialog is up */ html body.cdp .cdp-rail-plus[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); border-style: solid; box-shadow: inset 0 0 0 1px var(--cds-accent); } html body.cdp #cdpWlSettings[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } /* ── THE RADII follow css/tokens.css (batch SHARP1): a 4px frame and 2px, nearly square, controls. ───────── */ html body.cdp { --cds-r-panel: var(--jag-radius-panel, 4px); --cds-r-ctl: var(--jag-radius, 2px); } html body.cdp .cdp-app { padding-top: 12px; } html body.cdp .cdp-wl tr { min-height: 38px; } /* ═══ WIDTHS BELOW 1440 ══════════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1300px) { /* four watchlist columns still fit: the list keeps 252px, the order box gives up 28px */ html body.cdp .cdp-main { grid-template-columns: 252px minmax(0, 1fr) 272px; } html body.cdp .cdp-wl tr { column-gap: 4px; grid-template-columns: minmax(58px, .9fr) repeat(var(--cds-wl-n, 3), minmax(50px, 1fr)); } html body.cdp .cdp-wl th, html body.cdp .cdp-wl-sort { font-size: 10px; } html body.cdp .cdp-wl { font-size: 12px; } } @media (min-width: 768px) and (max-width: 1240px) { html body.cdp .cdp-app { grid-template-rows: auto auto auto auto; } html body.cdp .cdp-main { grid-template-columns: 244px minmax(0, 1fr) 260px; } html body.cdp .cdp-chart-wrap { grid-template-rows: auto minmax(0, 1fr); height: var(--cds-chart-h); } html body.cdp .cdp-bottom { grid-template-columns: 1.4fr 1fr; } } /* 768 TO 1100 WIDE (a tablet, a small laptop window): ONE COLUMN, THE CHART FULL WIDTH (batch PROAUDIT, 24 Oct 2026). chart-desk-page.css puts the three panels in one column up to 1100px, in the order chart, order box, watchlist; the three-column templates above reached down to 768 and put the chart in the 244px column, so on an iPad the chart was 208px wide with the order box stretched across the middle (measured at 768, 900, 1024 and 1100). The dividing lines follow the panels: one line above each, none at their sides. 1101 and wider are as they were. */ @media (min-width: 768px) and (max-width: 1100px) { html body.cdp .cdp-main { grid-template-columns: minmax(0, 1fr); } html body.cdp #cdpWlPanel { border-right: 0; border-top: 1px solid var(--cdp-hairline); } html body.cdp #cdpTicketPanel { border-left: 0; border-top: 1px solid var(--cdp-hairline); } } /* ═══ PHONES: ONE BUY AND SELL BAR; THE ORDER BOX IS A SHEET ══════════════════════════════════════════════ */ @media (max-width: 767px) { html body.cdp { --cds-chart-h: 58vh; } html body.cdp .cdp-app { padding: 0; gap: 0; } html body.cdp .cdp-chrome, html body.cdp .cdp-main, html body.cdp .cdp-bottom { border-left: 0; border-right: 0; border-radius: 0; } html body.cdp .cdp-main { grid-template-columns: minmax(0, 1fr); } html body.cdp .cdp-bottom { grid-template-columns: minmax(0, 1fr); } html body.cdp #cdpWlPanel, html body.cdp #cdpAlertsPanel { border-left: 0; border-right: 0; border-top: 1px solid var(--cdp-hairline); } html body.cdp .cdp-chart-wrap { height: auto; grid-template-rows: auto minmax(0, 1fr); } html body.cdp .cdp-canvasrow { height: var(--cds-chart-h); } /* THE ORDER BOX IS NOT IN THE PAGE; it is the sheet the bar opens. */ html body.cdp #cdpTicketPanel { display: none; } html body.cdp.cdp-sheet-open #cdpTicketPanel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12100; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--cdp-panel); border: 1px solid var(--cdp-border); border-width: 1px 0 0; border-radius: 14px 14px 0 0; box-shadow: 0 -18px 48px rgba(15, 23, 42, .3); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-panel-header { height: 52px; border-radius: 14px 14px 0 0; position: sticky; top: 0; z-index: 2; } html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-panel-header::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--cdp-border); } html body.cdp .cdp-sheet-x { display: none; } html body.cdp.cdp-sheet-open .cdp-sheet-x { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; margin-left: 6px; } /* the scrim under a sheet (the order box's, or the symbol switcher's); [hidden] keeps it away otherwise */ html body.cdp .cdp-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 12090; background: rgba(15, 23, 42, .45); } html body.cdp.cdp-sheet-open #cdpPhoneDock { display: none !important; } html body.cdp.cdp-sheet-open #cdpTicketPanel :is(.cdp-side, .cdp-seg-btn, .cdp-preset, .cdp-input, .cdp-select, .cdp-cta-main) { min-height: 44px; } /* The box's own button shows in the sheet (chart-desk-page.css hides it on a phone, where the bar used to place the order). */ html body.cdp.cdp-has-phonedock.cdp-sheet-open #cdpTicketPanel .cdp-cta-main { display: block; height: 48px; } html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-cta-main { height: 48px; } /* THE ONE BAR: the symbol and its price, Buy, Sell. No quantity, no type: those are in the sheet. */ html body.cdp #cdpPhoneDock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cdp-border); border-radius: 0; background: var(--cdp-panel); } html body.cdp #cdpPhoneDock .cdp-pd-say { grid-column: 1 / -1; } html body.cdp #cdpPhoneDock .cdp-pd-meta { display: block; min-width: 0; margin: 0; } html body.cdp #cdpPhoneDock .cdp-pd-id { display: grid; gap: 2px; } html body.cdp #cdpPhoneDock .cdp-pd-sym { font-size: 14px; font-weight: 800; } html body.cdp #cdpPhoneDock .cdp-pd-px { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } html body.cdp #cdpPhoneDock .cdp-pd-bp { font-size: 11px; color: var(--cdp-muted); } html body.cdp #cdpPhoneDock .cdp-pd-bp:not(:empty)::before { content: none; } /* no stray dot at the start of its own line */ html body.cdp #cdpPhoneDock .cdp-pd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } html body.cdp #cdpPhoneDock .cdp-pd-acts:has(> .cdp-pd-sell[hidden]) { grid-template-columns: 1fr; } /* nothing to sell: Buy alone (batch AUDITFIX-A) */ html body.cdp #cdpPhoneDock :is(.cdp-pd-buy, .cdp-pd-sell) { min-width: 96px; height: 44px; border-radius: var(--cds-r-ctl); font-size: 14px; font-weight: 800; } /* The tabs and the toolbar controls at a thumb's size */ html body.cdp :is(.cdp-chip, .cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn, .cdp-icon-btn, .cdp-ptab, .cdp-htab, #chartAlertBtn, .cdp-wl-add-go, .cdp-gear) { min-height: 44px; } html body.cdp :is(.cdp-tbtn, .cdp-rtool, .cdp-lay, .cdp-mini-btn, .cdp-gear) { min-width: 44px; } html body.cdp .cdp-wl .cdp-wl-x { position: static; transform: none; opacity: 1; pointer-events: auto; width: 44px; height: 44px; order: 5 !important; justify-self: end; } html body.cdp .cdp-wl .cdp-wl-th-x { display: block; } html body.cdp .cdp-wl tr { grid-template-columns: minmax(58px, 1fr) repeat(var(--cds-wl-n, 3), minmax(60px, 1fr)) 44px; min-height: 44px; } /* ONE EDIT FOR THE REMOVES (batch AUDITFIX-A, owner audit 30 Oct, finding 26). The rows carry no remove until Edit is pressed: no column for it, no header cell. Edit reads Done while they show (js/app/chart-desk-boot.js, wlEdit). */ html body.cdp .cdp-wl-edit { display: inline-flex; width: auto; min-width: 44px; padding: 0 14px; font-size: 13px; font-weight: 700; } html body.cdp .cdp-wl-edit[aria-pressed="true"] { border-color: var(--cds-accent, #0F6E76); box-shadow: inset 0 0 0 1px var(--cds-accent, #0F6E76); color: var(--cdp-text); } html body.cdp #cdpWlPanel:not(:has(#cdpWatchlist tr[data-sym])) .cdp-wl-edit { display: none; } html body.cdp #cdpWlPanel:not(.cdp-wl-editing) .cdp-wl tr { grid-template-columns: minmax(58px, 1fr) repeat(var(--cds-wl-n, 3), minmax(60px, 1fr)); } html body.cdp #cdpWlPanel:not(.cdp-wl-editing) .cdp-wl .cdp-wl-th-x, html body.cdp #cdpWlPanel:not(.cdp-wl-editing) #cdpWatchlist .cdp-wl-x { display: none !important; } /* A tab under the chart scrolls its panel to the top of the screen: past the sticky header (61px at 390), so the panel's own title row, with Edit, is on screen and not under the header. */ html body.cdp :is(#cdpWlPanel, #cdpPosPanel, #cdpAlertsPanel) { scroll-margin-top: 70px; } html body.cdp .cdp-wl-sort { min-height: 44px; } html body.cdp .cdp-wl-add .cdp-input { height: 44px; } html body.cdp .cdp-wlset label, html body.cdp .cdp-wlset .cdp-wlsort li, html body.cdp .cdp-wlset-x { min-height: 44px; } html body.cdp #cdpRailPlus { display: none !important; } /* the Tools sheet lists every drawing tool on a phone */ /* ...and the + is the sheet's last drawing cell, named: it opens Customize toolbar now, which the sheet does not list (batch CHART1). Two presses from the chart (Tools, Customize toolbar), as the + is one beside it on a laptop. */ html body.cdp.cdp-phone-layout .cdp-ts-slot #cdpRailPlus { display: inline-flex !important; border-style: dashed !important; color: var(--cdp-text); margin: 0 !important; } html body.cdp.cdp-phone-layout .cdp-ts-slot #cdpRailPlus svg { color: var(--cdp-muted); } /* The shared panels are bottom sheets */ .cdp-mpanel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-width: none; max-height: 86vh; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0; } .cdp-mpanel-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .cdp-mpanel-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--cdp-hairline); padding: 8px; gap: 6px; } .cdp-mpanel-nav button { min-height: 44px; white-space: nowrap; flex: 0 0 auto; } .cdp-mpanel-nav .cdp-mpanel-navsep { display: none; } .cdp-mpanel-x { width: 44px; height: 44px; } .cdp-mpanel-pane .cdp-settings label, .cdp-set-row, .cdp-mpanel-pane .cdp-keys-switch { min-height: 44px; } .cdp-set-presets input { height: 44px; } /* The Indicators & tools dialog fills the screen on a phone: a sheet from the top, no corners, 44px rows and stars */ .cdp-mpanel--studio { top: 0 !important; bottom: 0 !important; height: auto; max-height: none; border-radius: 0; transform: none; border-top: 0; z-index: 12100; } /* over the site's own header bar, like the symbol switcher */ .cdp-mpanel--studio .cdp-mpanel-split { grid-template-columns: minmax(0, 1fr); } /* the categories are one scrolling row over the list, as in the shell */ .cdp-mpanel--studio .cdp-mpanel-nav button { min-height: 44px; } .cdp-st-search { padding: 8px 12px; } .cdp-st-search input { height: 44px; font-size: 16px; } /* 16px: iOS does not zoom */ .cdp-st-clear { width: 44px; height: 44px; } .cdp-st-list { padding: 4px 12px 16px; } .cdp-st-row { grid-template-columns: minmax(0, 1fr) 52px; } .cdp-st-main { min-height: 44px; } .cdp-st-star { width: 44px; height: 44px; } .cdp-st-cap .jag-unlock-pro { flex: 1 1 auto; justify-content: center; } .cdp-st-scrim { display: none !important; } .cdp-mpanel--studio .cdp-mpanel-h { padding: 8px 12px; } .cdp-mpanel--studio .cdp-customise { padding: 12px; } .cdp-mpanel--studio .cdp-customise .cx-row { flex-wrap: nowrap; } .cdp-mpanel--studio .cdp-customise .cx-row > .cx-row-main { flex: 1 1 0; } .cdp-mpanel--studio .cdp-customise .cx-row > .cx-row-go { margin-left: 0; } /* The ordered list on a phone (batch CHART1): the handle, the place number and the name on the first line; the up and down arrows under the name and Take off at the right on the second. Every one of them 44px. */ .cdp-customise .cx-grip { width: 44px; height: 44px; } .cdp-customise .cx-grip svg { width: 10px; height: 15px; } .cdp-mpanel--studio .cdp-customise .cx-row.cx-row-rail { flex-wrap: wrap; gap: 8px; row-gap: 6px; } .cdp-mpanel--studio .cdp-customise .cx-row-rail > .cx-row-main { flex: 1 1 calc(100% - 96px); } .cdp-mpanel--studio .cdp-customise .cx-row-rail > .cx-move { margin-left: 52px; gap: 6px; } .cdp-mpanel--studio .cdp-customise .cx-row-rail > .cx-row-go { margin-left: auto; } .cdp-mpanel--studio .cdp-customise .cx-row-rail > .cx-move:not(:has(> .cx-mv)) { display: none; } /* the crosshair: no arrows, no empty second line */ } /* ═══ PHONES, FIRST-CLASS (owner, 23 Oct: "set up for quick day trading") ═══════════════════════════════════ Reading order: the symbol bar (a tap opens the switcher: search, recent, watchlist, the day's figures), the chart full width, one scrollable row of candle sizes and ranges with the chart type and More at its end, a compact positions strip (count, value, P&L, buying power), the Positions | Watchlist | Alerts tabs, and the one fixed bar: symbol and last price, Buy, Sell. The order box is a sheet those two buttons open. */ @media (max-width: 767px) { html body.cdp.cdp-phone-layout .cdp-app { gap: 0; padding-bottom: 72px; } html body.cdp.cdp-phone-layout :is(#cdpChrome, .cdp-chartpanel, #cdpPhoneCtl, #cdpWlPanel, #cdpPosPanel, #cdpAlertsPanel) { border-radius: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; } /* 1 · the symbol bar */ html body.cdp.cdp-phone-layout #cdpChrome { border-top: 0; } html body.cdp.cdp-phone-layout #cdpChrome .cdp-chart-toolbar { padding: 6px 12px !important; } html body.cdp.cdp-phone-layout #cdpChrome .cdp-sym-row { flex-wrap: nowrap; gap: 8px; min-height: 44px; } html body.cdp.cdp-phone-layout #cdpChrome .cdp-search-desk { display: none !important; } /* the search lives in the switcher */ html body.cdp.cdp-phone-layout #cdpChrome .cdp-sym-row .cdp-hspacer { display: block; flex: 1 1 auto; } html body.cdp.cdp-phone-layout .cdp-symswitch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 8px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 17px; font-weight: 900; letter-spacing: -.01em; cursor: pointer; } html body.cdp.cdp-phone-layout .cdp-symswitch svg { width: 14px; height: 14px; color: var(--cdp-muted); } html body.cdp.cdp-phone-layout .cdp-symswitch[aria-expanded="true"] { color: var(--cds-accent); border-color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); } html body.cdp.cdp-phone-layout #cdpSym { display: none; } /* the switcher carries the name */ html body.cdp.cdp-phone-layout .cdp-last { font-size: 17px; } html body.cdp.cdp-phone-layout .cdp-chg { font-size: 12px; } /* the session pill is its dot (its words stay for a screen reader): the row has no room for "Market Open" beside the price */ html body.cdp.cdp-phone-layout #cdpMktStatus { height: 14px; width: 14px; min-width: 0; padding: 0; font-size: 0; line-height: 0; border-radius: 50%; gap: 0; justify-content: center; flex: 0 0 auto; overflow: hidden; } html body.cdp.cdp-phone-layout #cdpMktStatus::before { width: 8px; height: 8px; margin: 0; } html body.cdp.cdp-phone-layout .pos-sell { min-height: 44px; min-width: 64px; } /* 2 · the chart, full width, 50% of the screen (300px floor) */ html body.cdp.cdp-phone-layout .cdp-chartpanel { border-top: 1px solid var(--cdp-hairline); } html body.cdp.cdp-phone-layout .cdp-chart-wrap { height: auto; } html body.cdp.cdp-phone-layout .cdp-canvasrow { height: auto; } html body.cdp.cdp-phone-layout:not(.cdp-fs-on) .cdp-grid { min-height: max(300px, 50svh) !important; height: max(300px, 50svh) !important; } html body.cdp.cdp-phone-layout .cdp-canvasrow { grid-template-columns: minmax(0, 1fr); } /* 3 · one scrollable row: candle sizes, ranges, chart type, More */ html body.cdp.cdp-phone-layout #cdpPhoneCtl { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid var(--cdp-hairline); border-width: 0 0 1px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html body.cdp.cdp-phone-layout #cdpPhoneCtl::-webkit-scrollbar { display: none; } html body.cdp.cdp-phone-layout #cdpPhoneCtl > #cdpTf { display: flex !important; order: 1 !important; } html body.cdp.cdp-phone-layout #cdpPhoneCtl > #cdpRangeChips { order: 2 !important; } html body.cdp.cdp-phone-layout #cdpPhoneCtl > #cdpPhoneRow { order: 3 !important; flex: 0 0 auto !important; } html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-chart-controls { width: auto !important; flex: 0 0 auto !important; gap: 4px; } html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-chart-controls .cdp-ctl-k { display: inline-flex !important; font-size: 10px; margin: 0 2px 0 6px !important; } html body.cdp.cdp-phone-layout #cdpPhoneCtl #cdpRangeChips .cdp-ctl-k { display: inline-flex !important; } html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-chart-controls .cdp-chip { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 13px; } html body.cdp.cdp-phone-layout #cdpTfChip { display: none !important; } html body.cdp.cdp-phone-layout #cdpPhoneRow > .cdp-tbtn { flex: 0 0 auto; padding: 0 10px; } html body.cdp.cdp-phone-layout #cdpPhoneRow > .cdp-tbtn svg { display: block; width: 16px; height: 16px; } html body.cdp.cdp-phone-layout #cdpPhoneRow > .cdp-tbtn i, html body.cdp.cdp-phone-layout #cdpPhoneRow > .cdp-tbtn b, html body.cdp.cdp-phone-layout #cdpPhoneRow > .cdp-tbtn .cdp-caret { display: none; } html body.cdp.cdp-phone-layout #cdpToolsBtn { flex: 0 0 auto; min-width: 72px; } html body.cdp.cdp-phone-layout #cdpToolsBtn::after { content: none; } /* the armed-tool line floats above the bar instead of pushing the row */ html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-toolhint { display: none; } html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-toolhint.on { display: flex; position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 12080; } /* 4 · the positions strip */ html body.cdp.cdp-phone-layout .cdp-phonestrip { order: 4 !important; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--cdp-border); border-left: 0; border-right: 0; background: var(--cdp-panel); color: var(--cdp-text); font: inherit; text-align: left; cursor: pointer; } .cdp-phonestrip[hidden] { display: none !important; } .cdp-phonestrip-k { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; } .cdp-phonestrip-v { display: block; font-size: 11.5px; letter-spacing: -.01em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cdp-phonestrip-v.up { color: var(--cdp-green-text); } .cdp-phonestrip-v.down { color: var(--cdp-red); } .cdp-phonestrip > span { min-width: 0; } .cdp-phonestrip > span:not(:first-child) { text-align: right; } html body.cdp.cdp-phone-layout #cdpPhoneInfo { display: none !important; } /* its content opens in the switcher */ html body.cdp.cdp-phone-layout #cdpPhoneTabs { order: 5 !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 8px 12px; background: var(--cdp-panel); border-bottom: 1px solid var(--cdp-hairline); } html body.cdp.cdp-phone-layout #cdpPhoneTabs[hidden] { display: none !important; } html body.cdp.cdp-phone-layout .cdp-ptab { min-height: 44px; border-radius: 0; margin-left: -1px; font-size: 13px; } html body.cdp.cdp-phone-layout .cdp-ptab:first-child { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp.cdp-phone-layout .cdp-ptab:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp.cdp-phone-layout .cdp-ptab.on { position: relative; z-index: 1; border: 1px solid var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); color: var(--cds-accent); background: var(--cdp-panel); } html body.cdp.cdp-phone-layout :is(#cdpWlPanel, #cdpPosPanel, #cdpAlertsPanel) { border-top: 0 !important; margin: 0; } html body.cdp.cdp-phone-layout :is(#cdpWlPanel, #cdpPosPanel, #cdpAlertsPanel) .cdp-panel-header { height: 40px; } /* ONE TAB ROW (the book, 23 Oct: "remove the doubled tab row"). The strip's Positions and Orders tabs choose the Positions panel's pane, so the panel's own header, which began with a second "Positions", is hidden on a phone; under Orders it shows with Open orders, Filled and Canceled only (js/app/chart-desk-boot.js wirePhoneTabs). */ html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-panel-header { display: none; } html body.cdp.cdp-phone-layout.cdp-phone-orders #cdpPosPanel .cdp-panel-header { display: flex; height: auto; min-height: 44px; padding: 4px 12px; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-htab[data-pane="pos"] { display: none !important; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-hdr-tabs { flex-wrap: nowrap; gap: 0; width: 100%; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-htab { flex: 1 1 0; justify-content: center; border-radius: 0; margin-left: -1px; min-height: 44px; } /* the open orders list's Cancel, a thumb's size (it measured 28px) */ html body.cdp.cdp-phone-layout #openOrdersPanel .ob-cancel { min-height: 44px; min-width: 44px; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-htab[data-pane="ord"] { border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); margin-left: 0; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-htab:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp.cdp-phone-layout #cdpPosPanel .cdp-htab.on { position: relative; z-index: 1; } /* 5 · the one bar and its sheet: the box's own button shows in the sheet */ html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-panel-body { padding: 12px 14px 8px; } html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-presets { grid-template-columns: repeat(5, 1fr) !important; } html body.cdp.cdp-sheet-open #cdpTicketPanel .cdp-input { font-size: 16px; } /* 16px: iOS does not zoom */ /* 6 · the symbol switcher sheet */ .cdp-symsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12100; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--cdp-panel); color: var(--cdp-text); border-top: 1px solid var(--cdp-border); border-radius: 14px 14px 0 0; box-shadow: 0 -18px 48px rgba(15, 23, 42, .3); padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); } .cdp-symsheet[hidden] { display: none !important; } /* Always its full height (batch FIX1, the owner 30 Oct 2026: on a phone the search list covered the box). A short switcher put its search box just above where the keyboard comes up, with no room for the list under it; at its full height the box sits in the top part of the screen whatever the lists hold, so with the keyboard up the box shows and the list opens under it. Nothing moves when the box is pressed (a sheet that grew on the press moved the box out from under the finger). */ .cdp-symsheet { min-height: 86vh; } .cdp-symsheet-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 14px; background: var(--cdp-panel-2); border-bottom: 1px solid var(--cdp-hairline); border-radius: 14px 14px 0 0; } .cdp-symsheet-h::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--cdp-border); } .cdp-symsheet-h b { flex: 1 1 auto; font-size: 13px; font-weight: 800; } .cdp-symsheet-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; } .cdp-symsheet-search { padding: 12px 14px 4px; } .cdp-symsheet-search .cdp-search-desk { display: flex !important; gap: 8px; } .cdp-symsheet-search .cdp-symsearch { flex: 1 1 auto; height: 44px; } .cdp-symsheet-search .cdp-symsearch-input { font-size: 16px; } /* THE SEARCH IS A SHEET THE SIZE OF THE SCREEN (batch CHART2B, G3): while the box's list is open (js/symbol-panel.js body.ssp-sheet-open) the switcher stands at the top of the screen, so the box sits under its head and the list fills everything below it; it goes back to its own height when the list closes. */ body.ssp-sheet-open .cdp-symsheet { top: 0; max-height: none; min-height: 0; border-radius: 0; box-shadow: none; overflow: hidden; } body.ssp-sheet-open .cdp-symsheet-h { border-radius: 0; } body.ssp-sheet-open .cdp-symsheet-h::before { display: none; } .cdp-symsheet-k { margin: 12px 14px 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; } .cdp-symsheet-list { display: grid; gap: 6px; padding: 0 14px; } .cdp-symsheet-list button { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; min-height: 48px; padding: 0 12px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .cdp-symsheet-list button.on { border-color: var(--cds-accent, #0F6E76); box-shadow: inset 0 0 0 1px var(--cds-accent, #0F6E76); } .cdp-symsheet-list button b { font-weight: 800; } .cdp-symsheet-list button span { font-variant-numeric: tabular-nums; font-weight: 700; } .cdp-symsheet-list button .up { color: var(--cdp-green-text); } .cdp-symsheet-list button .down { color: var(--cdp-red); } .cdp-symsheet-list button.on b { color: var(--cds-accent, #0F6E76); } .cdp-symsheet-info { padding: 4px 14px 0; } /* (batch CHARTFIX2) Written as strongly as the rule above that hides #cdpPhoneInfo on the page: at the weaker weight it lost, and the switcher showed "AAPL today" over nothing (no Watchlist, no Research, no figures). */ html body.cdp.cdp-phone-layout .cdp-symsheet-info #cdpPhoneInfo { display: flex !important; flex-direction: column; gap: 10px; padding: 10px 0 0; border: 1px solid var(--cdp-hairline); border-width: 1px 0 0; background: transparent; box-shadow: none; } /* Replay in the switcher's head, beside its close (batch CHARTFIX2): not beside the search (js/app/chart-desk-panels.js) */ .cdp-symsheet-h > #cdpReplayBtn { flex: 0 0 auto; margin: 0; } .cdp-symsheet-info .cdp-sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .cdp-symsheet-info .cdp-submeta-stats { display: contents; } .cdp-symsheet-info .cdp-sm { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; } .cdp-symsheet-info .cdp-sm i { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); font-weight: 800; font-style: normal; } .cdp-symsheet-info .cdp-sm b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .cdp-symsheet-info .cdp-subfeed { display: none; } .cdp-symsheet-info .cdp-symbol-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cdp-symsheet-info .cdp-symbol-actions :is(.cdp-chip, .cdp-icon-btn) { min-height: 44px; flex: 1 1 auto; justify-content: center; } /* dark */ html[data-chart-theme="dark"] .cdp-symsheet, html[data-chart-theme="dark"] body.cdp.cdp-sheet-open #cdpTicketPanel { box-shadow: 0 -18px 48px rgba(0, 0, 0, .6); } } /* A short phone (batch FIX1): the switcher takes the whole screen, so its search box sits near the top and the results show under it with the keyboard up. */ @media (max-width: 767px) and (max-height: 700px) { .cdp-symsheet { min-height: 100%; } } /* ══ SHARP1 (batch SHARP1, 23 Oct 2026; the owner: "make the tabs appear a little bit more square... alleviate that AI look... sharper, cleaner, and nicer"; TradingSim and FX Replay as the reference). The radii come from css/tokens.css (--jag-radius 2px for a control, --jag-radius-panel 4px for a frame or a menu; the two --cds-r-* names above read them). This block is what the tokens alone did not reach, measured in the DOM at 1280 and 390: - the search box's INPUT (it carried its own 999px pill), the watchlist row's x, the Candles dropdown, the Layout menu's tiles and links, the Saved-layouts presets: the control radius; - the Candles and Range rows are each ONE joined control, 1px dividers, square ends (the way the header's tab row already is), the chosen option outlined in the accent and drawn above its neighbours; - the search sits in the MIDDLE of the header row between the price group and the symbol actions (laptop and desktop; the phone keeps its switcher), and the Replay control beside it looks like the feature it is: a play mark and its name in the house teal outline, the same height as the search. Specificity stays `html body.cdp ...`, as the rest of this file; no !important. ═══════════════════════════════ */ html body.cdp :is(.cdp-symsearch-input, .cdp-wl-x, .cdp-tbtn-named, .cdp-vm-preset, .cdp-vm-link, .cdp-lay-preset, .cdp-search, .cdp-tab-link) { border-radius: var(--cds-r-ctl); } html body.cdp .cdp-symsearch-input:focus { border-color: var(--cds-accent); box-shadow: 0 0 0 1px var(--cds-accent); } /* Candles 1m 5m 15m 30m 1h 1D and Range 1D 1W 1M 3M 6M 1Y: joined. The label ("Candles", "Range") keeps its gap. */ html body.cdp :is(#cdpTf, #cdpRangeChips) { gap: 0; } html body.cdp :is(#cdpTf, #cdpRangeChips) > .cdp-ctl-k { margin-right: 8px; } html body.cdp :is(#cdpTf, #cdpRangeChips) > .cdp-chip { position: relative; border-radius: 0; margin-left: -1px; } html body.cdp :is(#cdpTf, #cdpRangeChips) > .cdp-chip:nth-child(1 of .cdp-chip:not([hidden])) { margin-left: 0; border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); } html body.cdp :is(#cdpTf, #cdpRangeChips) > .cdp-chip:nth-last-child(1 of .cdp-chip:not([hidden])) { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp :is(#cdpTf, #cdpRangeChips) > .cdp-chip:is(.active, :hover, :focus-visible) { z-index: 1; } /* The search, centred between the price group and the symbol actions on one line (1101px and up: below that the row wraps and the search takes its own line, chart-desk-page.css). The spacer that pushed it left is not needed. */ @media (min-width: 1101px) { html body.cdp #cdpChrome .cdp-sym-row .cdp-search-desk { flex: 1 1 0; justify-content: center; max-width: none; margin: 0 12px; } html body.cdp #cdpChrome .cdp-sym-row .cdp-search-desk .cdp-symsearch { flex: 0 1 380px; max-width: 380px; } html body.cdp #cdpChrome .cdp-sym-row > .cdp-hspacer { display: none; } } /* Replay: a play mark and the word, teal outline, the search's height. It is drawn only when the market is shut (js/replay/replay-desk.js). */ html body.cdp #cdpReplayBtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--cds-accent); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cds-accent); font-weight: 800; font-size: 12.5px; line-height: 1; letter-spacing: .01em; } html body.cdp #cdpReplayBtn::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; } html body.cdp #cdpReplayBtn:hover { background: var(--cds-accent-soft); color: var(--cds-accent); border-color: var(--cds-accent); } html body.cdp #cdpReplayBtn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--cds-accent); } /* UNDER THE WATCHLIST AND RESEARCH PAIR, at the right end of the header's line two (batch CHARTFIX2, owner 24 Oct 2026: "Don't put replay right next to the search bar"). The line's own figures stay at its left; when Replay is shown the data line (Live and its time) sits just before it. */ html body.cdp #cdpChrome .cdp-sub-row { align-items: center; } html body.cdp #cdpChrome .cdp-sub-row > #cdpReplayBtn { margin: 4px 0 0 12px; flex: 0 0 auto; } /* the data line's auto margin puts both at the right end */ @media (max-width: 767px) { html body.cdp :is(.cdp-chip, .cdp-tbtn, .cdp-tbtn-named, .cdp-icon-btn, .cdp-symsearch-input) { border-radius: var(--cds-r-ctl); } html body.cdp #cdpToolsBtn { border-radius: var(--cds-r-ctl); } html body.cdp #cdpReplayBtn { min-height: 44px; } } /* ══ THE LAYOUT DIALOG (batch SHARP1, 23 Oct 2026). The owner: "why is the layout drop menu not styled like I requested? And why is it so tiny? Needs to appear in the middle of the screen so it's easier to see." #cdpViewMenu is the dimmed page; .cdp-vm-card is the dialog, 760px on a laptop, a bottom sheet on a phone: the four arrangements as tiles with a small picture of the panels each gives, what is on screen, and the saved layouts (name, Default, Rename, Load, Delete, Save current) moved in from their old overlay. Pro words and lock marks hide under html.is-pro and html.is-pro-hint. Same radii as the rest of the page: 4px frame, 2px controls, no card shadow but the floating one a dialog needs. ════════════════════════════════════════════════════════════════════════════════════════════════ */ html body.cdp .cdp-viewmenu.cdp-vm-center { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 12060; display: flex; flex-direction: row; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; gap: 0; min-width: 0; width: auto; max-height: none; background: rgba(10, 22, 20, .42); border: 0; border-radius: 0; box-shadow: none; overflow: auto; } html[data-chart-theme="dark"] body.cdp .cdp-viewmenu.cdp-vm-center { background: rgba(2, 8, 10, .62); } html body.cdp .cdp-vm-card { box-sizing: border-box; width: min(760px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--cdp-panel); color: var(--cdp-text); border: 1px solid var(--cdp-border); border-radius: var(--cds-r-panel); box-shadow: var(--jag-shadow-float, 0 10px 28px rgba(15, 23, 42, .14)); font-size: 13px; } html body.cdp .cdp-viewmenu .cdp-vm-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--cdp-hairline); position: sticky; top: 0; z-index: 2; background: var(--cdp-panel); } html body.cdp .cdp-viewmenu .cdp-vm-hd .cdp-menu-head { margin: 0; padding: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--cdp-text); } html body.cdp .cdp-vm-sub { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--cdp-muted); } html body.cdp .cdp-vm-sec { padding: 14px 18px; border-bottom: 1px solid var(--cdp-hairline); } html body.cdp .cdp-viewmenu .cdp-vm-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; padding: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); } html body.cdp .cdp-vm-count { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* the arrangement tiles */ html body.cdp .cdp-viewmenu .cdp-vm-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; } html body.cdp .cdp-viewmenu .cdp-vm-preset { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-height: 44px; padding: 10px 8px 8px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font-size: 12.5px; font-weight: 800; line-height: 1.2; text-align: center; } html body.cdp .cdp-viewmenu .cdp-vm-preset:hover { border-color: var(--cdp-text); } html body.cdp .cdp-viewmenu .cdp-vm-preset.on { border: 1px solid var(--cds-accent); color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); background: var(--cdp-panel); } html body.cdp .cdp-viewmenu .cdp-vm-preset small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--cdp-muted); white-space: normal; } html body.cdp .cdp-viewmenu .cdp-vm-preset.on small { color: inherit; opacity: .85; } html body.cdp .cdp-vm-diag { display: block; width: 72px; height: 44px; margin: 0 auto 8px; fill: none; stroke: currentColor; stroke-width: 1.5; } html body.cdp .cdp-vm-diag .d-side { opacity: .45; } html body.cdp .cdp-vm-lock { position: absolute; top: 7px; right: 6px; width: 12px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--cds-pro); border-radius: 2px; } html body.cdp .cdp-vm-lock::before { content: ""; position: absolute; left: 2px; right: 2px; top: -5px; height: 5px; border: 1.5px solid var(--cds-pro); border-bottom: 0; border-radius: 3px 3px 0 0; } html.is-pro body.cdp .cdp-vm-lock, html.is-pro-hint body.cdp .cdp-vm-lock, html.is-pro body.cdp .cdp-vm-protext, html.is-pro-hint body.cdp .cdp-vm-protext { display: none !important; } html body.cdp .cdp-viewmenu .cdp-vm-pro { margin: 12px 0 0; } /* on screen: three rows */ html body.cdp .cdp-viewmenu label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 2px; border-bottom: 1px solid var(--cdp-hairline); border-radius: 0; font-size: 13.5px; font-weight: 700; color: var(--cdp-text); } html body.cdp .cdp-viewmenu label:last-of-type { border-bottom: 0; } html body.cdp .cdp-viewmenu label:hover { background: transparent; } /* saved layouts, moved in from #cdpLayouts */ html body.cdp .cdp-vm-center .cdp-lay-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0 0 4px; } html body.cdp .cdp-vm-center .cdp-lay-new input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 600; } html body.cdp .cdp-vm-center .cdp-lay-new input:focus { outline: none; border-color: var(--cds-accent); box-shadow: 0 0 0 1px var(--cds-accent); } html body.cdp .cdp-vm-center .cdp-lay-save { min-height: 40px; padding: 0 16px; border: 1px solid var(--cds-accent); border-radius: var(--cds-r-ctl); background: var(--cds-accent); color: var(--jag-accent-on, #fff); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; } html body.cdp .cdp-vm-center .cdp-lay-list { display: block; margin-top: 8px; } html body.cdp .cdp-vm-center .cdp-lay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cdp-hairline); } html body.cdp .cdp-vm-center .cdp-lay-meta { display: block; min-width: 0; } html body.cdp .cdp-vm-center .cdp-lay-name { display: block; font-size: 14px; font-weight: 800; color: var(--cdp-text); } html body.cdp .cdp-vm-center .cdp-lay-row.is-default .cdp-lay-name::after { content: " · opens first"; font-size: 11.5px; font-weight: 700; color: var(--cds-accent); } html body.cdp .cdp-vm-center .cdp-lay-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--cdp-muted); font-variant-numeric: tabular-nums; } html body.cdp .cdp-vm-center .cdp-lay-rename-in { box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--cds-accent); border-radius: var(--cds-r-ctl); box-shadow: 0 0 0 1px var(--cds-accent); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 14px; font-weight: 800; outline: none; } html body.cdp .cdp-vm-center .cdp-lay-act { display: flex; gap: 0; flex: 0 0 auto; } html body.cdp .cdp-vm-center .cdp-lay-act button { position: relative; min-height: 32px; padding: 0 10px; margin: 0 0 0 -1px; border: 1px solid var(--cdp-border); border-radius: 0; background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } html body.cdp .cdp-vm-center .cdp-lay-act button:first-child { margin-left: 0; border-radius: var(--cds-r-ctl) 0 0 var(--cds-r-ctl); } html body.cdp .cdp-vm-center .cdp-lay-act button:last-child { border-radius: 0 var(--cds-r-ctl) var(--cds-r-ctl) 0; } html body.cdp .cdp-vm-center .cdp-lay-act button:hover { border-color: var(--cdp-text); z-index: 1; } html body.cdp .cdp-vm-center .cdp-lay-act button.on { border-color: var(--cds-accent); color: var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent); z-index: 1; font-weight: 800; } html body.cdp .cdp-vm-center .cdp-lay-row.confirming .cdp-lay-del { border-color: var(--cdp-red); color: var(--cdp-red); z-index: 1; } html body.cdp .cdp-vm-center .cdp-lay-empty { padding: 8px 0 4px; font-size: 13px; color: var(--cdp-muted); } html body.cdp .cdp-vm-center .cdp-lay-full { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--cdp-hairline); border-radius: var(--cds-r-ctl); background: var(--cdp-panel-2); font-size: 12.5px; color: var(--cdp-text); } html body.cdp .cdp-vm-center .cdp-lay-full .jag-unlock-pro { margin-top: 8px; } html body.cdp .cdp-vm-center .cdp-lay-presets { margin: 14px 0 0; } html body.cdp .cdp-vm-center .cdp-lay-presets-h { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); } html body.cdp .cdp-vm-center .cdp-lay-presets-row { display: flex; flex-wrap: wrap; gap: 6px; } html body.cdp .cdp-vm-center .cdp-lay-preset { min-height: 32px; padding: 0 12px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } html body.cdp .cdp-vm-center .cdp-lay-preset:hover { border-color: var(--cdp-text); } html body.cdp .cdp-vm-center .cdp-lay-note { margin: 12px 0 0; font-size: 12px; color: var(--cdp-muted); } /* the foot */ html body.cdp .cdp-viewmenu .cdp-vm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 18px; border-top: 0; position: sticky; bottom: 0; z-index: 2; background: var(--cdp-panel); } html body.cdp .cdp-viewmenu .cdp-vm-link { min-height: 36px; padding: 0 14px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; } html body.cdp .cdp-viewmenu .cdp-vm-link:hover { border-color: var(--cdp-text); } html body.cdp .cdp-viewmenu .cdp-vm-done { min-height: 36px; padding: 0 18px; border: 1px solid var(--cds-accent); border-radius: var(--cds-r-ctl); background: var(--cds-accent); color: var(--jag-accent-on, #fff); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } @media (max-width: 767px) { html body.cdp .cdp-viewmenu.cdp-vm-center { align-items: flex-end; padding: 0; } html body.cdp .cdp-vm-card { width: 100%; max-height: 94vh; border-radius: var(--cds-r-panel) var(--cds-r-panel) 0 0; border-bottom: 0; border-left: 0; border-right: 0; } html body.cdp .cdp-viewmenu .cdp-vm-presets { grid-template-columns: 1fr 1fr; } html body.cdp .cdp-vm-center .cdp-lay-row { grid-template-columns: minmax(0, 1fr); } html body.cdp .cdp-vm-center .cdp-lay-act button { min-height: 44px; flex: 1 1 auto; padding: 0 6px; } html body.cdp .cdp-vm-center .cdp-lay-new { grid-template-columns: minmax(0, 1fr); } html body.cdp .cdp-vm-center .cdp-lay-new input, html body.cdp .cdp-vm-center .cdp-lay-save, html body.cdp .cdp-viewmenu .cdp-vm-link, html body.cdp .cdp-viewmenu .cdp-vm-done, html body.cdp .cdp-vm-center .cdp-lay-preset { min-height: 44px; } html body.cdp .cdp-vm-center .cdp-lay-new input { font-size: 16px; } } /* the dialog's title is a title, not a menu caption; the Chart only tile is drawn like the other three until chosen */ html body.cdp .cdp-viewmenu .cdp-vm-hd .cdp-menu-head { text-transform: none; letter-spacing: -.01em; } html body.cdp .cdp-viewmenu .cdp-vm-preset[data-preset="chartonly"]:not(.on) { border: 1px solid var(--cdp-border); box-shadow: none; background: var(--cdp-panel); color: var(--cdp-text); } /* ── NARROW PHONES: NO MONEY FIGURE CUT (batch PROAUDIT, 24 Oct 2026) ───────────────────────────────────────────── Measured on the real page: under 390px the Buy/Sell bar ended its figures in "...": "AAPL $25..." and "Buying power..." at 320, "Buying power $100,0..." at 360, "$100,000..." at 375; the positions strip cut the unrealized gain to "(+28.38..." at 360 and 320. Buy and Sell keep a 44px tap at 76px wide, which gives the figures the room; where a line still does not fit it wraps at a space, never inside a figure. 390 and wider are as they were. */ @media (max-width: 389px) { html body.cdp #cdpPhoneDock :is(.cdp-pd-buy, .cdp-pd-sell) { min-width: 76px; } html body.cdp #cdpPhoneDock :is(.cdp-pd-symline, .cdp-pd-bp) { white-space: normal; overflow: visible; text-overflow: clip; } html body.cdp .cdp-phonestrip-v { white-space: normal; overflow: visible; text-overflow: clip; } } /* ── THE ORDER OF THE INDICATOR PANES (batch CHART2B, the Great Wall's G1b, 6 Nov 2026) ────────────────────────────── An up and a down arrow at the right end of each pane's legend row (the 22px band the pane keeps free of bars for its label), and the same two in Indicators & tools under "Panes under the chart". js/app/chart-desk-boot.js movePane. The layer passes every press through to the chart except on the arrows themselves. */ .cdp-panectl-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; } .cdp-panectl-layer[hidden] { display: none; } .cdp-panectl { position: absolute; display: flex; gap: 3px; transform: translateX(-100%); pointer-events: none; } .cdp-panectl-b { pointer-events: auto; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); color: var(--cdp-text); cursor: pointer; } .cdp-panectl-b svg { width: 12px; height: 12px; display: block; } .cdp-panectl-b:hover { border-color: var(--cds-accent); color: var(--cds-accent); } .cdp-panectl-b:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 1px; } .cdp-st-row.cdp-po-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; min-height: 42px; padding: 4px 8px 4px 10px; } .cdp-po-num { font-size: 12px; font-weight: 800; color: var(--cdp-muted); font-variant-numeric: tabular-nums; text-align: center; } .cdp-po-name { font-size: 13px; font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .cdp-po-mvs { display: inline-flex; gap: 6px; } .cdp-po-mv, .cdp-po-gap { width: 30px; height: 30px; flex: 0 0 auto; } .cdp-po-mv { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--cdp-border); border-radius: 2px; background: var(--cdp-panel); color: var(--cdp-text); cursor: pointer; } .cdp-po-mv svg { width: 14px; height: 14px; display: block; } .cdp-po-mv:hover { border-color: var(--cdp-text); } .cdp-po-mv:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 1px; } @media (max-width: 767px) { .cdp-panectl-layer { display: none !important; } /* a phone's pane is 48 to 70px: its arrows are in Indicators & tools */ .cdp-st-row.cdp-po-row { min-height: 52px; } .cdp-po-mv, .cdp-po-gap { width: 44px; height: 44px; } } /* ── CLOSE A HOLDING, CANCEL ALL, DUPLICATE AN ORDER (batch CHART3B, the Great Wall's G8, 6 Nov 2026) ───────────────── Close on a holding asks on one line under its row (js/features/positions-panel.js); Cancel all and Duplicate sit in the open orders list (js/features/open-orders.js). Every control has its edge; red is the sale's own color only. */ html body.cdp .pos-close-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 8px 10px; border: 1px solid var(--cdp-border); border-left: 3px solid var(--cdp-red); background: var(--cdp-panel-2); color: var(--cdp-text); font-size: 12.5px; line-height: 1.4; } html body.cdp .pos-close-line.is-sending, html body.cdp .pos-close-line:not(.is-error):has(.pos-close-msg:only-child) { border-left-color: var(--cds-accent); } html body.cdp .pos-close-line.is-error { border-left-color: var(--cdp-red); } html body.cdp .pos-close-msg { flex: 1 1 220px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; } html body.cdp .pos-close-acts { display: inline-flex; gap: 8px; flex: 0 0 auto; } html body.cdp :is(.pos-close-no, .pos-close-yes) { min-height: 32px; padding: 0 12px; border-radius: var(--cds-r-ctl); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; } html body.cdp .pos-close-no { border: 1px solid var(--cdp-border); background: var(--cdp-panel); color: var(--cdp-text); } html body.cdp .pos-close-no:hover { border-color: var(--cdp-text); } html body.cdp .pos-close-yes { border: 1px solid #A02C26; background: #C4372F; color: #fff; } /* the bar's Sell color: white on it reads in both themes */ html body.cdp :is(.pos-close-no, .pos-close-yes):focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 2px; } html body.cdp #openOrdersPanel .orders-blotter__head { flex-wrap: wrap; } html body.cdp .ob-cancel-all { margin-left: auto; min-height: 30px; padding: 0 12px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; } html body.cdp .ob-cancel-all:hover { border-color: var(--cdp-red); color: var(--cdp-red); } html body.cdp .ob-acts { display: inline-flex; gap: 6px; justify-content: flex-end; } html body.cdp .ob-dup { width: auto; min-width: 58px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--cdp-border); background: var(--cdp-panel); color: var(--cdp-muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; } html body.cdp .ob-dup:hover { border-color: var(--cds-accent); color: var(--cds-accent); } html body.cdp :is(.ob-dup, .ob-cancel-all):focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 2px; } /* the list's Cancel and its one confirm line in the dark theme (they were drawn white on the dark panel, beside Duplicate) */ html[data-chart-theme="dark"] body.cdp #openOrdersPanel .ob-cancel { background: var(--cdp-panel); color: var(--cdp-muted); border-color: var(--cdp-border); } html[data-chart-theme="dark"] body.cdp #openOrdersPanel .orders-blotter__confirm { background: var(--cdp-panel-2); border-color: var(--cdp-red); } html[data-chart-theme="dark"] body.cdp #openOrdersPanel .orders-blotter__confirm-msg { color: var(--cdp-text); } html[data-chart-theme="dark"] body.cdp #openOrdersPanel .orders-blotter__confirm-no { background: var(--cdp-panel); color: var(--cdp-text); border-color: var(--cdp-border); } @media (max-width: 767px) { html body.cdp :is(.pos-close-no, .pos-close-yes, .ob-cancel-all) { min-height: 44px; } html body.cdp .pos-close-line { padding: 10px 12px; } html body.cdp .pos-close-acts { width: 100%; } html body.cdp .pos-close-acts > button { flex: 1 1 0; } /* the order rows as two-line cards with the two buttons on the second line, beside the status */ html body.cdp #openOrdersPanel .order-blotter-row { grid-template-columns: minmax(0, 1.2fr) auto auto 1fr !important; grid-template-areas: "sym side qty est" "meta meta acts acts" !important; gap: 6px 8px; align-items: center; } html body.cdp #openOrdersPanel .order-blotter-row > .ob-symbol { grid-area: sym; } html body.cdp #openOrdersPanel .order-blotter-row > :is(.ob-side-buy, .ob-side-sell) { grid-area: side; } html body.cdp #openOrdersPanel .order-blotter-row > .ob-qty { grid-area: qty; } html body.cdp #openOrdersPanel .order-blotter-row > .ob-meta { grid-area: meta; } html body.cdp #openOrdersPanel .order-blotter-row > .ob-est { grid-area: est; text-align: right; } html body.cdp #openOrdersPanel .order-blotter-row > :is(.ob-acts, .ob-cancel) { grid-area: acts; justify-self: end; } html body.cdp #openOrdersPanel .ob-dup { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 12px; } } /* ── THE DEFAULT QUANTITY, IN CHART SETTINGS, TRADING (batch CHART3B, G8): stocks in shares, coins in dollars ── */ .cdp-set-defqty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 6px; } .cdp-set-def { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 700; } .cdp-set-def-k { flex: 0 0 auto; min-width: 46px; } .cdp-set-def-u { flex: 0 0 auto; color: var(--cdp-muted); font-weight: 700; } .cdp-set-def input { flex: 1 1 auto; min-width: 0; width: 100%; height: 36px; box-sizing: border-box; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 6px); background: var(--cdp-panel); color: var(--cdp-text); } .cdp-set-def input:focus { outline: none; border-color: var(--cds-accent, #0F6E76); box-shadow: 0 0 0 1px var(--cds-accent, #0F6E76); } @media (max-width: 767px) { .cdp-set-defqty { grid-template-columns: minmax(0, 1fr); } .cdp-set-def input { height: 44px; font-size: 16px; } } /* ── THE KEYBOARD SHORTCUTS, IN TWO GROUPS (batch CHART3B, G8): Orders (the order keys and their switch) and Chart ── */ .cdp-keys-panel .cdp-keys-k { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); } .cdp-keys-panel .cdp-keys-k:first-of-type { margin-top: 0; } .cdp-mpanel-pane .cdp-keys-panel .cdp-keys-switch { margin: 0 0 8px; } @media (max-width: 767px) { /* a phone has no keys: the Keyboard shortcuts tab of Chart settings is a laptop's */ #cdpSetPanel .cdp-mpanel-nav [data-mp-cat="keys"] { display: none; } } /* ── ONE-CLICK TRADING ON THE CHART (batch CHART3B, the Great Wall's G6) ─────────────────────────────────────────────── Sell and Buy at the top left of the chart in focus, when the member has turned it on (a laptop only), with the line that answers a press beside them. The candle readout moves down by the strip's height (chartStyles), so the strip covers no figure. Red is Sell's own color, green Buy's. */ .cdp-oneclick { position: absolute; left: 8px; top: 4px; z-index: 9; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; width: min(520px, calc(100% - 96px)); pointer-events: none; } .cdp-oneclick[hidden] { display: none; } .cdp-oc-btn { pointer-events: auto; flex: 0 0 auto; min-width: 72px; height: 26px; padding: 0 10px; border-radius: var(--cds-r-ctl, 2px); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .01em; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; } /* the phone bar's own Buy and Sell colors (white on them reads in both themes) */ .cdp-oc-sell { border: 1px solid #A02C26; background: #C4372F; color: #fff; } .cdp-oc-buy { border: 1px solid #126633; background: #15803D; color: #fff; } .cdp-oc-btn[data-sending] { opacity: 1; filter: none; } .cdp-oc-btn:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 2px; } .cdp-oc-btn.cdp-armed { outline: 2px solid var(--cdp-text); outline-offset: 2px; } /* the answer: beside the buttons when it fits, on its own line under them when it does not */ .cdp-oc-say { pointer-events: auto; flex: 0 1 auto; max-width: 100%; min-width: 0; min-height: 26px; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--cdp-border); border-left: 3px solid var(--cds-accent); background: var(--cdp-panel); color: var(--cdp-text); font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .cdp-oc-say:empty, .cdp-oc-say[hidden] { display: none; } .cdp-oc-say.is-error { border-left-color: var(--cdp-red); } body.rp-on .cdp-oneclick { display: none !important; } @media (max-width: 767px) { .cdp-oneclick { display: none !important; } } #cdpSetPanel .cdp-set-oneclick-told { margin: 6px 0 0 26px; } @media (max-width: 767px) { #cdpSetPanel .cdp-set-oneclick, #cdpSetPanel .cdp-set-oneclick-told { display: none !important; } } /* a visitor has no orders of their own to place in one click: the switch is a member's */ html:not(.is-signed-in) #cdpSetPanel :is(.cdp-set-oneclick, .cdp-set-oneclick-told) { display: none !important; } /* ── EVERY DRAWING AT ONCE: THE FOOT OF THE LEFT TOOLBAR (batch CHART4, the Great Wall's G5) ───────────────────────── Magnet, Lock all, Hide all and Remove all drawings, under the drawing tools and the +, behind one hairline: where TradingView keeps them. The three switches show their state outlined in the site's teal (a chosen option is outlined, never filled); Remove all asks once beside itself (.cdp-rail-ask). On a phone the group is cells in Tools, under Draw on the chart, each with its name. */ html body.cdp .cdp-rail-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--cdp-hairline); } html body.cdp .cdp-rail-foot .cdp-rtool.latched, html body.cdp .cdp-rail-foot .cdp-rtool[aria-pressed="true"] { background: var(--cdp-panel) !important; border: 2px solid var(--cds-accent) !important; color: var(--cds-accent) !important; } html body.cdp .cdp-rail-foot .cdp-rtool.latched svg { fill: none; color: inherit; } html body.cdp .cdp-rail-foot .cdp-rtool[aria-expanded="true"] { border-color: var(--cds-accent); color: var(--cds-accent); } .cdp-rail-ask { box-sizing: border-box; border: 1px solid var(--cdp-border); border-left: 3px solid var(--cds-accent, #0F6E76); background: var(--cdp-panel); color: var(--cdp-text); padding: 10px 12px; font-size: 13px; } .cdp-rail-ask--float { position: fixed; z-index: 12050; width: 264px; border-radius: var(--cds-r-ctl, 2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .18); } .cdp-rail-ask-q { margin: 0 0 8px; font-weight: 700; line-height: 1.35; } .cdp-rail-ask-row { display: flex; gap: 8px; } .cdp-rail-ask-row button { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--cdp-border); border-radius: var(--cds-r-ctl, 2px); background: var(--cdp-panel-2); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .cdp-rail-ask-row .cdp-rail-ask-yes { border: 2px solid var(--cdp-text); } .cdp-rail-ask-row button:hover { border-color: var(--cds-accent, #0F6E76); } .cdp-rail-ask-row button:focus-visible { outline: 2px solid var(--cds-accent, #0F6E76); outline-offset: 2px; } @media (max-width: 767px) { html body.cdp .cdp-ts-slot .cdp-rail-foot { display: contents !important; } html body.cdp .cdp-ts-slot .cdp-rail-ask { grid-column: 1 / -1; } html body.cdp .cdp-ts-slot .cdp-rtool.latched, html body.cdp .cdp-ts-slot .cdp-rtool[aria-pressed="true"] { border: 2px solid var(--cds-accent) !important; color: var(--cds-accent) !important; background: var(--cdp-panel-2) !important; padding: 0 11px !important; } .cdp-rail-ask-row button { height: 44px; } } /* ── READY-MADE LAYOUTS AND THE ONE IN USE (batch CHART4, the Great Wall's G4) ─────────────────────────────────────── Day trader, Swing trader and Beginner as three even tiles in their own section of the Layout dialog: the name over what it puts on the chart. The one in use is outlined in teal (never filled), and so is the saved layout in use, with " · in use" after its name, the way the default one says " · opens first". */ html body.cdp .cdp-vm-center #cdpVmReadySlot .cdp-lay-presets { margin: 0; padding: 0; border-top: 0; } html body.cdp .cdp-vm-center #cdpVmReadySlot .cdp-lay-presets-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } html body.cdp .cdp-vm-center .cdp-lay-preset { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 12px; text-align: left; } html body.cdp .cdp-vm-center .cdp-lay-preset b { font-size: 13.5px; font-weight: 800; color: var(--cdp-text); } html body.cdp .cdp-vm-center .cdp-lay-preset small { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--cdp-muted); } html body.cdp .cdp-vm-center .cdp-lay-preset.on, html body.cdp .cdp-vm-center .cdp-lay-preset[aria-pressed="true"] { border: 2px solid var(--cds-accent); padding: 7px 11px; background: var(--cdp-panel); } html body.cdp .cdp-vm-center .cdp-lay-preset.on b { color: var(--cds-accent); } html body.cdp .cdp-vm-center .cdp-lay-ready-said { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--cdp-text); } html body.cdp .cdp-vm-center .cdp-lay-row.is-inuse .cdp-lay-name { color: var(--cds-accent); } html body.cdp .cdp-vm-center .cdp-lay-row.is-inuse .cdp-lay-name::after { content: " · in use"; font-size: 11.5px; font-weight: 700; color: var(--cds-accent); } html body.cdp .cdp-vm-center .cdp-lay-row.is-inuse.is-default .cdp-lay-name::after { content: " · in use · opens first"; } @media (max-width: 767px) { html body.cdp .cdp-vm-center #cdpVmReadySlot .cdp-lay-presets-row { grid-template-columns: minmax(0, 1fr); } html body.cdp .cdp-vm-center .cdp-lay-preset { min-height: 52px; } } /* ═══ PHONES, batch PHONE1 (6 Nov 2026): what the walk at 390 and 320 found on Chart ═══════════════════════════════ 1. The Tools chip (the drawing tools on a phone) stood two screens to the right in the strip under the chart, after the interval chips and the range chips: a member never saw it. It is first in the strip now; the chips slide as before. (The chart's room is measured from the strip's top, which has not moved.) 2. The after-hours price beside the market badge was cut off at the right edge at 390 ("After hou") and gone at 320: the row could not wrap. With an after-hours price the row wraps and the price takes one short line of its own under the symbol row ("After hours $254.12 ▲ +$0.10 (+0.04%) as of 8:21 PM ET"); the chart's room is measured from where the chart starts, so nothing is covered. 3. The coin's name in the Coins list is a 15px button inside a 48px row: the press box now covers the row's height. 4. Nothing a member reads is under 12px on a phone: the strip's labels and figures, the order box's labels and presets, the bar's "After" tag and buying power, the Coins list. (The footer is batch FOOT1's.) */ @media (max-width: 767px) { html body.cdp.cdp-phone-layout #cdpPhoneCtl > #cdpPhoneRow { order: 0 !important; margin-right: 4px; } html body.cdp.cdp-phone-layout #cdpChrome .cdp-sym-row.cdp-has-offhrs { flex-wrap: wrap; row-gap: 2px; } html body.cdp.cdp-phone-layout #cdpChrome .cdp-sym-row.cdp-has-offhrs > .cdp-offhrs { order: 9; flex: 0 0 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; grid-template-areas: none; grid-template-columns: none; line-height: 1.3; } html body.cdp .cdp-coins .cdp-wl-sym { position: relative; } html body.cdp .cdp-coins .cdp-wl-sym::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -16px; } html body.cdp.cdp-phone-layout #cdpPhoneCtl .cdp-chart-controls .cdp-ctl-k, html body.cdp.cdp-phone-layout #cdpPhoneCtl #cdpRangeChips .cdp-ctl-k, html body.cdp .cdp-phonestrip-k, html body.cdp .cdp-phonestrip-v, html body.cdp #cdpPdEcho, html body.cdp .cdp-pd-tag, html body.cdp #cdpPhoneDock .cdp-pd-bp, html body.cdp .cdp-pd-bp, html body.cdp .cdp-sym-row .cdp-offhrs-label, html body.cdp .cdp-sym-row .cdp-offhrs-at, html body.cdp .cdp-flabel, html body.cdp #cdpQtyLabel, html body.cdp #cdpTypeLabel, html body.cdp .cdp-preset, html body.cdp .cdp-coins .cdp-wl-sort, html body.cdp .cdp-coins .cdp-coin-name, html body.cdp .cdp-coins .cdp-coin-pct { font-size: 12px; } html body.cdp .cdp-coins th, html body.cdp.cdp-phone-layout #cdpTicketPanel .cdp-flabel, html body.cdp #cdpTicketPanel #cdpTypeLabel, html body.cdp #cdpTicketPanel #cdpQtyLabel { font-size: 12px; } /* the chart-type button (Candles) stands in the strip's first screen now and was 38px wide */ html body.cdp.cdp-phone-layout #cdpPhoneRow .cdp-tbtn { min-width: 44px; } }