/**
 * chart-polish.css: the chart page, polished (batch CHARTPOLISH, 24 Oct 2026). Loaded after css/chart-desk-sharp.css,
 * on /chart only. The owner, 24 Oct, 9 AM, looking at the chart: "you got rid of the chart types... you need to fix the
 * alerts box and make it a bit better... a lot of little inconsistencies... I hate that you don't center things... a lot
 * of mismatched fonts, different colors. Look at the watch list: Last isn't centered... and you have a very horrible
 * border up here, look at Last, normal charts don't have that."
 *
 *   1 the watchlist's column names are a plain table header (the way TradingView and Yahoo draw one): text, no borders,
 *     each name over its own figures (Symbol left, the numbers right), the arrow only on the sorted column; the row's
 *     remove x takes the % figure's place while the row is under the pointer, so it never covers it;
 *   2 the chart type list: nine types, each with its picture, the chosen one outlined in the accent;
 *   3 the alert dialog: one dialog in the middle of the screen, built like the Layout dialog;
 *   4 one font, one muted grey, one control edge, a chosen option outlined in the accent: what the measuring pass found.
 *
 * Square controls (2px), teal for chosen, no orange except Pro, light and dark, 44px taps and phone rules only inside
 * (max-width: 767px). Selectors start with `html body.cdp`, as css/chart-desk-sharp.css's do, so they outrank it and
 * css/chart-desk-page.css without !important; the few !important marks restate one that file already carries.
 */

/* ══ 1 · THE WATCHLIST HEADER ═══════════════════════════════════════════════════════════════════════════════════ */
/* The header row: one hairline under it, the names in the muted grey at the label size (--jag-label, 10.5px). The cells
   let the sort arrow stand in the gap beside its name (a 1280 screen gives "% Change" 56px, the name takes 53). */
html body.cdp .cdp-wl thead tr { min-height: 28px; border-bottom: 1px solid var(--cdp-hairline); }
html body.cdp .cdp-wl th { font-size: 10.5px; overflow: visible; }
/* owner-ok: the owner, 24 Oct 2026: a plain table header, text only, no borders (a column name is not a button to look
   at; the whole cell still sorts on a press and shows the focus ring from the keyboard). */
html body.cdp .cdp-wl .cdp-wl-sort {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  width: 100%; min-height: 28px; padding: 0; margin: 0; gap: 1px;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  color: var(--cdp-muted); justify-content: flex-end; text-align: right; overflow: visible;
}
html body.cdp .cdp-wl th:first-child .cdp-wl-sort { justify-content: flex-start; text-align: left; }
html body.cdp .cdp-wl .cdp-wl-sort:hover { color: var(--cdp-text); background: transparent; border: 0; }
/* the sorted column: the name in ink and its arrow; nothing outlined */
html body.cdp .cdp-wl .cdp-wl-sort.on { color: var(--cdp-text); border: 0; box-shadow: none; background: transparent; }
html body.cdp .cdp-wl .cdp-wl-sort:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: -2px; }
/* The arrow shows only on the sorted column (its text is empty on the others) and never moves the name: on Symbol it
   follows the name; on a number column it stands before the name, in the column's own free space, 8px so that "% Change"
   and its arrow fit the 56px a 1280 screen gives the column (measured: name 52px, arrow 5px, 1px between). Past the
   column's right edge it was cut by the panel's edge. */
html body.cdp .cdp-wl .cdp-wl-sort-ar { flex: 0 0 auto; font-size: 8px; line-height: 1; color: var(--cds-accent); order: -1; }
html body.cdp .cdp-wl th:first-child .cdp-wl-sort-ar { order: 0; }
html body.cdp .cdp-wl .cdp-wl-sort { letter-spacing: -.01em; }
html body.cdp .cdp-wl .cdp-wl-sort-ar:empty { display: none; }
/* EVERY CELL IS ITS COLUMN'S WIDTH. chart-desk-page.css still gives the price cell 70px from the table it was before
   batch CHART-A made each row a grid, so the price ran 4.7px past its column, past the Last name over it and into the
   gap before Change (measured at 1280: column 89 to 145, price 89 to 150). The grid sets the width now. */
html body.cdp #cdpWlPanel .cdp-wl :is(th, td) { width: auto; min-width: 0; max-width: none; }
/* The rows' figures sit flush with the column's right edge, the same edge as their names. */
html body.cdp .cdp-wl tbody td:nth-child(2), html body.cdp .cdp-wl td .cdp-wl-move > :is(.cdp-wl-usd, .cdp-wl-chg) { padding: 0; }
/* "After" / "Pre" under the price: the same right edge, the muted grey. */
/* THE REMOVE x TAKES THE % FIGURE'S PLACE (laptop and wider). It showed over the row's right end and covered the %
   change while the row was under the pointer. Now the figure steps aside while the x is up, so the two never share a
   pixel; with % Change turned off it is the dollar change that steps aside, and with both off, the price. */
@media (min-width: 768px) {
  html body.cdp .cdp-wl .cdp-wl-x { right: 2px; width: 24px; height: 24px; font-size: 14px; }
  html body.cdp .cdp-wl tbody tr:is(:hover, :has(.cdp-wl-x:focus-visible)) .cdp-wl-chg { visibility: hidden; }
  html body.cdp .cdp-wl.cdp-wl-hide-pct tbody tr:is(:hover, :has(.cdp-wl-x:focus-visible)) .cdp-wl-usd { visibility: hidden; }
  html body.cdp .cdp-wl.cdp-wl-hide-pct.cdp-wl-hide-usd tbody tr:is(:hover, :has(.cdp-wl-x:focus-visible)) td:nth-child(2) { visibility: hidden; }
}
@media (max-width: 767px) {
  /* 44px taps: the whole header cell sorts */
  html body.cdp .cdp-wl .cdp-wl-sort { min-height: 44px; font-size: 10.5px; }
  html body.cdp .cdp-wl thead tr { min-height: 44px; }
  /* chart-desk-page.css's phone block still pads each name 5 to 8px and centres it, and pads the price 10px off its
     column's edge (both from the table this was before the grid): measured at 390, Last sat 15px left of its figures. */
  html body.cdp.cdp-phone-layout #cdpWlPanel .cdp-wl :is(th, td):nth-child(n) { padding-left: 0; padding-right: 0; width: auto; border-bottom: 0; }
  html body.cdp.cdp-phone-layout #cdpWlPanel .cdp-wl .cdp-wl-sort,
  html body.cdp.cdp-phone-layout #cdpWlPanel .cdp-wl .cdp-wl-sort.on { padding: 0; min-width: 0; justify-content: flex-end; font-size: 10.5px; }
  html body.cdp.cdp-phone-layout #cdpWlPanel .cdp-wl th:first-child .cdp-wl-sort { justify-content: flex-start; }
}

/* ══ 2 · THE CHART TYPE LIST ════════════════════════════════════════════════════════════════════════════════════ */
/* One bordered column of nine rows joined by 1px lines, each with its picture; the chosen one outlined in the accent
   and drawn above its neighbours. Built by js/app/chart-desk-boot.js (CTYPES). */
html body.cdp .cdp-ctypemenu { min-width: 232px; padding: 6px; gap: 0; border-radius: var(--cds-r-panel); }
html body.cdp .cdp-ctypemenu > button {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; padding: 5px 10px; margin: -1px 0 0;
  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: 600; line-height: 1.2; text-align: left;
}
html body.cdp .cdp-ctypemenu > button:first-child { margin-top: 0; border-radius: var(--cds-r-ctl) var(--cds-r-ctl) 0 0; }
html body.cdp .cdp-ctypemenu > button:last-child { border-radius: 0 0 var(--cds-r-ctl) var(--cds-r-ctl); }
html body.cdp .cdp-ctypemenu > button + button { margin-top: -1px; }
html body.cdp .cdp-ctypemenu > button:hover { background: var(--cdp-panel-2); border-color: var(--cdp-border); }
html body.cdp .cdp-ctypemenu > button.on {
  z-index: 1; padding: 5px 10px; border: 1px solid var(--cds-accent); box-shadow: inset 0 0 0 1px var(--cds-accent);
  background: var(--cdp-panel); color: var(--cds-accent); font-weight: 800;
}
html body.cdp .cdp-ctypemenu > button:focus-visible { z-index: 2; outline: 2px solid var(--cds-accent); outline-offset: -3px; }
html body.cdp .cdp-ctypemenu .cdp-ct-ico { flex: 0 0 18px; width: 18px; height: 18px; color: var(--cdp-muted); }
html body.cdp .cdp-ctypemenu > button.on .cdp-ct-ico { color: var(--cds-accent); }
html body.cdp .cdp-ctypemenu .cdp-ct-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html body.cdp .cdp-ctypemenu .cdp-ct-name small { font-size: 11px; font-weight: 600; color: var(--cdp-muted); }
html[data-chart-theme="dark"] body.cdp .cdp-ctypemenu > button { background: var(--cdp-panel) !important; color: var(--cdp-text) !important; }
html[data-chart-theme="dark"] body.cdp .cdp-ctypemenu > button:hover { background: var(--cdp-panel-2) !important; }
html[data-chart-theme="dark"] body.cdp .cdp-ctypemenu > button.on { background: var(--cdp-panel) !important; color: var(--cds-accent) !important; }
/* The toolbar button wears the chosen type's picture; its name keeps the button's own font. */
html body.cdp .cdp-tbtn[data-tool="ctype"] :is(b, i, .cdp-caret) { font-family: inherit; }
@media (max-width: 767px) {
  html body.cdp .cdp-ctypemenu > button { min-height: 44px; }
}
/* ══ 3 · THE ALERT DIALOG ═══════════════════════════════════════════════════════════════════════════════════════ */
/* The dimmed page and the card, as the Layout dialog (css/chart-desk-sharp.css, .cdp-vm-center / .cdp-vm-card). */
.cdp-adlg { position: fixed; inset: 0; z-index: 12060; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; background: rgba(10, 22, 20, .42); overflow: auto; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.cdp-adlg[hidden] { display: none !important; }
html[data-chart-theme="dark"] .cdp-adlg { background: rgba(2, 8, 10, .62); }
.cdp-adlg-card { box-sizing: border-box; width: min(640px, 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(--jag-radius-panel, 4px); box-shadow: var(--jag-shadow-float, 0 10px 28px rgba(15, 23, 42, .14)); font-size: 13px; }
.cdp-adlg-hd { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cdp-hairline); background: var(--cdp-panel); }
.cdp-adlg-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--cdp-text); }
.cdp-adlg-sub { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--cdp-muted); }
.cdp-adlg-x { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--cdp-border); border-radius: var(--jag-radius, 2px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.cdp-adlg-x:hover { border-color: var(--cdp-text); }
.cdp-adlg-sec { display: block; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--cdp-hairline); }
.cdp-adlg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-muted); }
.cdp-adlg-limit { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--cdp-text); font-variant-numeric: tabular-nums; }
/* the form: Symbol | Condition | Price, one row on a laptop */
.cdp-adlg-fields { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px; gap: 12px; align-items: end; }
.cdp-adlg-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.cdp-adlg-k { font-size: 11px; font-weight: 700; color: var(--cdp-muted); }
.cdp-adlg-in { box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--cdp-border); border-radius: var(--jag-radius, 2px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.cdp-adlg-f-sym .cdp-adlg-in { text-transform: uppercase; }
.cdp-adlg-in:focus { border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); box-shadow: 0 0 0 1px var(--cds-accent, var(--jag-accent, #0F6E76)); }
.cdp-adlg-box { position: relative; display: block; }
.cdp-adlg-unit { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; font-weight: 700; color: var(--cdp-muted); pointer-events: none; }
.cdp-adlg-unit[hidden] { display: none; }
.cdp-adlg-unit[data-adlg-pre] { left: 10px; }
.cdp-adlg-unit[data-adlg-post] { right: 10px; }
.cdp-adlg-box .cdp-adlg-in { padding-left: 22px; text-align: right; }
.cdp-adlg-box:has([data-adlg-pre][hidden]) .cdp-adlg-in { padding-left: 10px; padding-right: 26px; }
/* the condition: one joined control, the chosen part outlined in the accent */
.cdp-adlg-seg { display: flex; }
.cdp-adlg-seg > button { position: relative; flex: 1 1 0; min-width: 0; min-height: 36px; margin: 0 0 0 -1px; padding: 0 8px; 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: 600; line-height: 1.1; text-align: center; cursor: pointer; white-space: nowrap; }
.cdp-adlg-seg > button:first-child { margin-left: 0; border-radius: var(--jag-radius, 2px) 0 0 var(--jag-radius, 2px); }
.cdp-adlg-seg > button:last-child { border-radius: 0 var(--jag-radius, 2px) var(--jag-radius, 2px) 0; }
.cdp-adlg-seg > button:hover { z-index: 1; border-color: var(--cdp-text); }
.cdp-adlg-seg > button.on { z-index: 2; border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); box-shadow: inset 0 0 0 1px var(--cds-accent, var(--jag-accent, #0F6E76)); color: var(--cds-accent, var(--jag-accent, #0F6E76)); font-weight: 800; }
.cdp-adlg-seg > button:focus-visible, .cdp-adlg-act button:focus-visible, .cdp-adlg-x:focus-visible, .cdp-adlg-done:focus-visible, .cdp-adlg-save:focus-visible, .cdp-adlg-btn:focus-visible { outline: 2px solid var(--cds-accent, var(--jag-accent, #0F6E76)); outline-offset: 1px; z-index: 3; }
.cdp-adlg-hint { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--cdp-muted); font-variant-numeric: tabular-nums; }
.cdp-adlg-err { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--cdp-red); }
.cdp-adlg-err[hidden], .cdp-adlg-plan[hidden] { display: none !important; }
/* "Also email me when it goes off" (batch ALERTMAIL3): one drawn box (no browser-drawn control), its 3:1 edge in both
   themes; ticked is outlined in the accent with an accent tick, never filled (the one chosen look, section 4). The
   whole line is the target; 44px tall on a phone. Shown only when the server says an e-mail could go. */
.cdp-adlg-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 8px 0 0; padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--cdp-text); cursor: pointer; user-select: none; }
.cdp-adlg-mail[hidden] { display: none !important; }
.cdp-adlg-mail input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--cdp-border); border-radius: 4px; background: var(--cdp-panel); cursor: pointer; }
.cdp-adlg-mail input[type="checkbox"]::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--cds-accent, var(--jag-accent, #0F6E76)); border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; }
.cdp-adlg-mail input[type="checkbox"]:checked { border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); box-shadow: inset 0 0 0 1px var(--cds-accent, var(--jag-accent, #0F6E76)); }
.cdp-adlg-mail input[type="checkbox"]:checked::after { display: block; }
.cdp-adlg-mail input[type="checkbox"]:focus-visible { outline: 2px solid var(--cds-accent, var(--jag-accent, #0F6E76)); outline-offset: 2px; }
.cdp-adlg-mail:hover input[type="checkbox"]:not(:checked) { border-color: var(--cdp-text); }
/* "Emailed": a small outlined tag on an alert that went off and was e-mailed */
.cdp-adlg-tag { display: inline-block; margin: 0 6px 0 0; padding: 1px 6px; border: 1px solid var(--cds-accent, var(--jag-accent, #0F6E76)); border-radius: var(--jag-radius, 2px); color: var(--cds-accent, var(--jag-accent, #0F6E76)); font-size: 10.5px; font-weight: 700; line-height: 15px; vertical-align: 1px; white-space: nowrap; }
.cdp-adlg-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--cdp-hairline); border-radius: var(--jag-radius, 2px); background: var(--cdp-panel-2); font-size: 12.5px; }
html.is-pro .cdp-adlg .cdp-adlg-plan, html.is-pro-hint .cdp-adlg .cdp-adlg-plan { display: none !important; }
.cdp-adlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; }
.cdp-adlg-btn, .cdp-adlg-save, .cdp-adlg-done { min-height: 36px; padding: 0 16px; border: 1px solid var(--cdp-border); border-radius: var(--jag-radius, 2px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; text-align: center; cursor: pointer; white-space: nowrap; }
.cdp-adlg-btn[hidden] { display: none; }
.cdp-adlg-btn:hover { border-color: var(--cdp-text); }
/* the one filled control in the dialog, as the Layout dialog's Done and Save current */
.cdp-adlg-save, .cdp-adlg-done { border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); background: var(--cds-accent, var(--jag-accent, #0F6E76)); color: var(--jag-accent-on, #fff); font-weight: 800; }
.cdp-adlg-save[aria-busy="true"] { opacity: .7; cursor: progress; }
/* the list: Symbol | Condition | Level (right edge) | Edit, Delete */
.cdp-adlg-list { display: block; }
.cdp-adlg-row { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(90px, 1.2fr) minmax(84px, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 4px 0 4px 10px; margin: 0 -10px 0 -10px; padding-right: 10px; border-top: 1px solid var(--cdp-hairline); }
.cdp-adlg-row:first-child { border-top: 0; }
.cdp-adlg-row.is-editing { box-shadow: inset 3px 0 0 var(--cds-accent, var(--jag-accent, #0F6E76)); background: var(--cdp-panel-2); }
.cdp-adlg-sym { font-size: 13px; font-weight: 800; color: var(--cdp-text); }
.cdp-adlg-cond { font-size: 12.5px; font-weight: 600; color: var(--cdp-muted); }
.cdp-adlg-val { font-size: 13px; font-weight: 700; color: var(--cdp-text); text-align: right; font-variant-numeric: tabular-nums; }
.cdp-adlg-act { display: flex; }
.cdp-adlg-act button { position: relative; min-height: 32px; min-width: 64px; 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: 600; line-height: 1; text-align: center; cursor: pointer; }
.cdp-adlg-act button:first-child { margin-left: 0; border-radius: var(--jag-radius, 2px) 0 0 var(--jag-radius, 2px); }
.cdp-adlg-act button:last-child { border-radius: 0 var(--jag-radius, 2px) var(--jag-radius, 2px) 0; }
.cdp-adlg-act button:hover { z-index: 1; border-color: var(--cdp-text); }
.cdp-adlg-act button.on { z-index: 1; border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); box-shadow: inset 0 0 0 1px var(--cds-accent, var(--jag-accent, #0F6E76)); color: var(--cds-accent, var(--jag-accent, #0F6E76)); font-weight: 800; }
.cdp-adlg-row.is-confirming [data-adlg-del] { z-index: 1; border-color: var(--cdp-red); color: var(--cdp-red); font-weight: 800; }
.cdp-adlg-empty { margin: 0; padding: 6px 0 2px; font-size: 13px; color: var(--cdp-muted); }
/* what went off: the same columns, the last one the price it fired at and when */
.cdp-adlg-row-fired .cdp-adlg-when { min-width: 129px; font-size: 12px; font-weight: 600; color: var(--cdp-muted); text-align: right; font-variant-numeric: tabular-nums; }
.cdp-adlg-h .cdp-adlg-clear { min-height: 28px; padding: 0 10px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.cdp-adlg-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--cdp-panel); }
.cdp-adlg-foot p { margin: 0; font-size: 12px; color: var(--cdp-muted); }
/* ALERTS ON LINES AND INDICATORS (batch ALERTS2): "Alert on" above the form, the average under it, the value field
   gone where there is nothing to type (a line, an average), and the one-line menu on a drawn line. */
.cdp-adlg-f-kind { margin: 0 0 12px; }
.cdp-adlg-f-kind[hidden], .cdp-adlg-f-ma[hidden], .cdp-adlg-f-val[hidden], .cdp-adlg-seg > button[hidden] { display: none !important; }
.cdp-adlg-kinds > button { flex: 1 1 auto; }
.cdp-adlg-fields.is-noval { grid-template-columns: 112px minmax(0, 1fr); }
.cdp-adlg-f-ma { margin: 12px 0 0; }
.cdp-adlg-in[readonly] { background: var(--cdp-panel-2); }
.cdp-linemenu { position: absolute; z-index: 40; display: block; min-width: 0; padding: 4px; border: 1px solid var(--cdp-border); border-radius: var(--jag-radius-panel, 4px); background: var(--cdp-panel); box-shadow: var(--jag-shadow-float, 0 10px 28px rgba(15, 23, 42, .14)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.cdp-linemenu[hidden] { display: none !important; }
.cdp-linemenu > button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--cdp-border); border-radius: var(--jag-radius, 2px); background: var(--cdp-panel); color: var(--cdp-text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap; cursor: pointer; }
.cdp-linemenu > button:hover { border-color: var(--cds-accent, var(--jag-accent, #0F6E76)); color: var(--cds-accent, var(--jag-accent, #0F6E76)); }
.cdp-linemenu > button:focus-visible { outline: 2px solid var(--cds-accent, var(--jag-accent, #0F6E76)); outline-offset: 1px; }
.cdp-linemenu svg { flex: 0 0 auto; color: var(--cds-accent, var(--jag-accent, #0F6E76)); }
@media (max-width: 767px) {
  /* a bottom sheet on a phone, above everything on the page (the Buy and Sell bar included) */
  .cdp-adlg { align-items: flex-end; padding: 0; z-index: 12100; }
  .cdp-adlg-card { width: 100%; max-height: 92vh; max-height: 92svh; border-radius: var(--jag-radius-panel, 4px) var(--jag-radius-panel, 4px) 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .cdp-adlg-hd { padding: 12px 14px; }
  .cdp-adlg-sec { padding: 12px 14px; }
  .cdp-adlg-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cdp-adlg-f-cond { grid-column: 1 / -1; grid-row: 2; }
  .cdp-adlg-x { width: 44px; height: 44px; }
  .cdp-adlg-in, .cdp-adlg-seg > button, .cdp-adlg-btn, .cdp-adlg-save, .cdp-adlg-done, .cdp-adlg-act button { min-height: 44px; }
  .cdp-adlg-in { font-size: 16px; }   /* 16px: iOS does not zoom */
  .cdp-adlg-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sym val" "cond act"; gap: 2px 12px; padding: 8px 10px; }
  .cdp-adlg-sym { grid-area: sym; } .cdp-adlg-cond { grid-area: cond; } .cdp-adlg-val { grid-area: val; } .cdp-adlg-act { grid-area: act; }
  .cdp-adlg-row-fired .cdp-adlg-when { grid-area: act; min-width: 0; }
  .cdp-adlg-h .cdp-adlg-clear { min-height: 44px; }
  .cdp-adlg-mail { display: flex; min-height: 44px; margin-top: 6px; font-size: 13.5px; }
  .cdp-adlg-mail input[type="checkbox"] { width: 22px; height: 22px; }
  .cdp-adlg-mail input[type="checkbox"]::after { left: 7px; top: 2px; width: 6px; height: 12px; }
  .cdp-adlg-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cdp-adlg-foot p { font-size: 11.5px; }
  /* batch ALERTS2: the four kinds two by two, the averages in one row of four, the line menu a full tap */
  .cdp-adlg-kinds { flex-wrap: wrap; }
  .cdp-adlg-kinds > button { flex: 1 1 45%; margin-top: -1px; }
  .cdp-adlg-fields.is-noval { grid-template-columns: minmax(0, 1fr); }
  .cdp-adlg-fields.is-noval .cdp-adlg-f-cond { grid-row: auto; }
  .cdp-linemenu > button { min-height: 44px; font-size: 14px; white-space: normal; text-align: left; max-width: calc(100vw - 48px); }
}

/* ══ 4 · ONE FONT, ONE GREY, ONE EDGE, ONE CHOSEN LOOK (the consistency pass, measured in the DOM at 1280 and 390,
   light and dark; each line names what was measured before). The Indicators and drawing-tools panels, the drawing
   rail, Layout and Replay are another batch's and are not touched here. ══════════════════════════════════════════ */
/* FONT. Seven controls drew in the browser's own Arial, not the page's Inter (a button does not inherit the page font
   unless told to): the Chart type value and its caret, the Alert button's name, the watchlist row x, the positions'
   Sell, the open orders' Cancel, the phone's tabs and positions strip. */
html body.cdp :is(.cdp-app, .cdp-adlg, .cdp-ctypemenu) :is(button, input, select, textarea) { font-family: inherit; }
/* WEIGHT. 900 is not a weight the page loads (Inter comes in 400 to 800), so the symbol, the Buy button and the
   positions' symbols were drawn in a faked heavier face beside true 800s. */
html body.cdp :is(#cdpSym, .cdp-cell-sym, #cdpCta, .pos-symbol, .pos-symbol-name, .trade-flash) { font-weight: 800; }
@media (max-width: 767px) {
  html body.cdp.cdp-phone-layout .cdp-symswitch { font-weight: 800; }   /* the phone's symbol switcher, 900 too */
}
/* SIZE. The header's "On watchlist" and "Research" were 11.5px beside the 12px controls of the same header; the
   positions' symbols and figures were 15px in a frame whose every other row is 12.5 to 13px. */
html body.cdp :is(.cdp-chip-wl, .cdp-chip-research) { font-size: 12px; }
html body.cdp #cdpPosPanel :is(.pos-symbol-name, .pos-symbol) { font-size: 13px; letter-spacing: 0; }
html body.cdp #cdpPosPanel .pos-pnl-val { font-size: 13px; font-variant-numeric: tabular-nums; }
html body.cdp #cdpPosPanel :is(.pos-pnl-pct, .pos-qty, .pos-avg) { font-size: 12px; }
/* ONE MUTED GREY. The positions' second and third lines were three other greys (#334155, #64748B, #475569); in dark
   the order box's "Order type" and "Quantity" and the positions' average were #737F90, 4.2:1, under the page's own
   floor. All of them are the page's muted grey now, which clears 4.5:1 on both grounds. */
html body.cdp #cdpPosPanel :is(.pos-qty, .pos-avg, .panel-title),
html[data-chart-theme="dark"] body.cdp #cdpPosPanel :is(.pos-qty, .pos-avg, .panel-title),
html body.cdp #cdpTicketPanel .cdp-flabel,
html[data-chart-theme="dark"] body.cdp #cdpTicketPanel .cdp-flabel { color: var(--cdp-muted) !important; }
html[data-chart-theme="dark"] body.cdp #cdpTicketPanel .cdp-preset:not(.on) { color: var(--cdp-text) !important; }
/* ONE LABEL STYLE above a value (--jag-label: 10.5px, 800, .08em, capitals): the order box's "Order type" and
   "Quantity" were 11px at .04em beside the toolbar's 10.5px "Candles" and "Range". */
html body.cdp #cdpTicketPanel .cdp-flabel { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cdp-adlg-h { font-size: 10.5px; letter-spacing: .08em; }
/* ONE CHOSEN LOOK: outlined in the accent (teal), never filled, never ink. The chosen candle size, range, order type,
   positions tab and quantity preset were a 2px INK edge (a !important block in chart-desk-page.css), the chosen
   layout and the phone's tabs were teal, and "On watchlist" was FILLED ink. Same !important, a higher selector. */
html body.cdp :is(.cdp-chip.active:not(.pending), .cdp-chip.on, .cdp-chip[aria-pressed="true"], .cdp-lay.on, .cdp-tbtn.on, .cdp-tbtn.latched, .cdp-htab.on, .cdp-preset.on, .cdp-seg-btn.on:not([data-side]), .cdp-seg-btn.active:not([data-side]), .cdp-chip-wl.on) {
  background: var(--cdp-panel) !important; color: var(--cds-accent) !important;
  border: 1px solid var(--cds-accent) !important; box-shadow: inset 0 0 0 1px var(--cds-accent) !important; font-weight: 800 !important;
}
html body.cdp .cdp-htab.on .cdp-htab-n { background: transparent; color: inherit; border-color: currentColor; }
/* The Alerts box's "+ Alert": its count was a GREEN filled dot (green is Buy and a rise only, and every other count on
   the page is the outlined pill); its hover turned it green. Now the same pill as the tabs', and ink on hover. */
html body.cdp #chartAlertBtn .ca-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
html body.cdp #chartAlertBtn:hover { border-color: var(--cdp-text); color: var(--cdp-text); }
/* ONE PRIMARY. The watchlist's Add was filled INK while every other "do it" button on the page (the dialogs' Done,
   Save current, Set alert) is filled teal. */
html body.cdp .cdp-wl-add-go { background: var(--cds-accent); border-color: var(--cds-accent); color: var(--jag-accent-on, #fff); font-weight: 800; }
html body.cdp .cdp-wl-add-go:hover { background: var(--cds-accent); border-color: var(--cds-accent); color: var(--jag-accent-on, #fff); opacity: .9; }
/* ONE CONTROL EDGE: the order box's MAX carried an ink edge beside four presets on the control edge (light). */
html body.cdp #cdpTicketPanel .cdp-preset.cdp-preset-max:not(.on) { border-color: var(--cdp-border); }