/**
 * ChartDeck panes: the pane legend (the slim row above each chart, round 2), the size tiers,
 * the active outline, the seams between panes, the layout picker and the command palette.
 *
 * The pane DOM, seams and layout picker are BUILT by atlas.js and only styled here; the class
 * names are the contract (ENGINE_API section 11), so a rename on either side shows up as an
 * unstyled row rather than a broken chart. The page chrome around the charts is chartdeck.css.
 *
 * Flat and calm: one hairline between regions, no gradients on furniture, colour kept for price
 * direction, the selected thing and the one live warning.
 */

/* ==========================================================================
   PANES + LEGEND (DOM built by atlas.js)
   ========================================================================== */

/* Legend row height per size tier. The glow reads --at-bar to start below it. */
.at-pane { --at-bar: 26px; }
.at-pane[data-tier="M"] { --at-bar: 24px; }
.at-pane[data-tier="S"] { --at-bar: 20px; }
.at-pane[data-tier="XS"] { --at-bar: 0px; }

/* The active outline lives on ::after, drawn ABOVE the chart. A thin line, multi-pane only. */
.at-pane::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: var(--z-pane-chrome);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--a-dur-1) ease;
}
.at-charts:not(.lay-1):not(.at-max) .at-pane.active::after { box-shadow: inset 0 0 0 1px var(--a-accent-t4); }

.at-pane-bar {
  flex: none; height: var(--at-bar); position: relative; z-index: calc(var(--z-pane-chrome) - 1);
  display: flex; align-items: center; gap: var(--a-sp-1);
  padding: 0 var(--a-sp-2) 0 var(--a-sp-4);
  background: var(--a-panel);
  font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-fg-2);
  min-width: 0; overflow: hidden; white-space: nowrap;
}

/* Every button on the row shares one reset. */
.at-pane-bar button, .at-pb-xs {
  display: inline-flex; align-items: center; gap: var(--a-sp-2); flex: none;
  height: max(18px, calc(var(--at-bar) - 6px)); padding: 0 var(--a-sp-2);
  border: 1px solid transparent; border-radius: var(--a-r-sm); background: transparent;
  color: inherit; font: inherit; cursor: pointer; white-space: nowrap; position: relative;
}
.at-pane-bar button:hover { background: var(--a-hover); color: var(--a-fg-1); }

.at-pane-bar .at-pb-id { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-mono); letter-spacing: .04em; color: var(--a-fg-3); padding: 0 var(--a-sp-2); font-variant-numeric: tabular-nums; }
.at-pane.active .at-pane-bar .at-pb-id { color: var(--a-accent); }
.at-charts.lay-1 .at-pb-id { display: none; }

.at-pane-bar .cd-lg-sym { font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); color: var(--a-fg-1); letter-spacing: .005em; padding-left: var(--a-sp-2); }
/* The exchange's round mark in front of the symbol (operator 2026-10-21; atlas.js paintLogo): the market list's mark
   (cdLogos.venueEl) clipped to a circle, centred on the symbol; an aggregate's / a spread's exchanges overlap as a stack. */
.at-pane-bar .cd-lg-vlogo { display: inline-flex; align-items: center; flex: none; direction: ltr; }
.at-pane-bar .cd-lg-vlogo[hidden] { display: none; }
.at-pane-bar .cd-lg-vlogo .cd-vic { width: 15px !important; height: 15px !important; border-radius: 50%; font-size: var(--a-fs-2xs); }
.at-pane-bar .cd-lg-vstack .cd-vic + .cd-vic { margin-inline-start: -5px; box-shadow: 0 0 0 1.5px var(--a-panel); }
.at-pane[data-tier="S"] .at-pane-bar .cd-lg-vlogo .cd-vic { width: 13px !important; height: 13px !important; }
@media (forced-colors: active) { .at-pane-bar .cd-lg-vlogo .cd-vic { outline: 1px solid CanvasText; } }
.at-pane-bar .cd-lg-tf { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); color: var(--a-fg-1); padding: 0 var(--a-sp-2); }
.cd-lg-dot { color: var(--a-fg-4); padding: 0 1px; }
.cd-lg-venue { color: var(--a-fg-2); font-weight: var(--a-fw-medium); padding: 0 var(--a-sp-2) 0 var(--a-sp-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Live dot: green = streaming, gold = quiet, red = reconnecting, hollow = history only. */
.cd-lg-live { width: 6px; height: 6px; border-radius: var(--a-r-pill); background: var(--a-fg-4); flex: none; margin: 0 var(--a-sp-4) 0 1px; }
.cd-lg-live[data-st="live"] { background: var(--a-up); box-shadow: 0 0 0 2.5px var(--a-up-t2); }
.cd-lg-live[data-st="quiet"] { background: var(--a-warn); }
.cd-lg-live[data-st="down"] { background: var(--a-down); }
.cd-lg-live[data-st="down"]:not([data-label=""])[data-label] { width: auto; height: auto; display: inline-flex; align-items: center; padding: 1px var(--a-sp-2); box-shadow: none; }
.cd-lg-live[data-st="down"]::after { content: attr(data-label); font: var(--a-fw-semibold) var(--a-fs-2xs)/1.2 var(--a-sans); color: var(--a-bg); white-space: nowrap;
  /* 1.0.3 (operator): one width while the age counts up - tabular figures, and room for a three-digit age (atlas.js pillMin) */
  font-variant-numeric: tabular-nums; display: inline-block; min-width: var(--cd-pill-min, 0); }
.cd-lg-live[data-st="paused"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--a-fg-3); }
.cd-lg-live[data-st="lock"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--a-warn); }

.cd-lg-ohlc { display: inline-flex; align-items: baseline; gap: var(--a-sp-2); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-mono); font-variant-numeric: tabular-nums; }
.cd-lg-ohlc i, .cd-lg-vol i { font-style: normal; color: var(--a-fg-3); margin-left: var(--a-sp-2); }
.cd-lg-ohlc i:first-child { margin-left: 0; }
.cd-lg-ohlc b, .cd-lg-vol b { font-weight: var(--a-fw-medium); }
.cd-lg-chg { font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-mono); margin-left: var(--a-sp-4); font-variant-numeric: tabular-nums; }
.cd-lg-vol { display: inline-flex; align-items: baseline; gap: var(--a-sp-2); margin-left: var(--a-sp-2); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-mono); color: var(--a-fg-2); font-variant-numeric: tabular-nums; }
.cd-lg-vol b:empty, .cd-lg-vol:has(b:empty) { display: none; }
.at-pb-spacer { flex: 1; min-width: var(--a-sp-2); }

/* 0.9.73: the price series' eye opens the row, like the indicator rows' eyes below it (cd-study-legend.js .cd-slg-eye: same
   size, colour and icons); hiding the series dims the row's title. Always shown, as theirs are. */
.at-pane-bar .cd-lg-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-right: calc(-1 * var(--a-sp-1, 2px)); padding: 0; border: 0; border-radius: var(--a-r-sm); background: transparent;
  color: var(--a-fg-4); cursor: pointer; }
.at-pane-bar .cd-lg-eye svg { width: 14px; height: 14px; }
.at-pane-bar .cd-lg-eye:hover, .at-pane-bar .cd-lg-eye[aria-pressed="true"] { color: var(--a-fg-2); }
.at-pane-bar.cd-lg-hid .cd-lg-sym, .at-pane-bar.cd-lg-hid .cd-lg-tf, .at-pane-bar.cd-lg-hid .cd-lg-ohlc { opacity: .45; }

/* Hover tools (hide / settings / remove), max and More: quiet until the pane is hovered or
   something in the row has keyboard focus. */
.cd-lg-acts { display: inline-flex; align-items: center; gap: 1px; }
.at-pane-bar .at-pb-icon { width: max(18px, calc(var(--at-bar) - 6px)); padding: 0; justify-content: center; color: var(--a-fg-3); }
.at-pane-bar .at-pb-icon:hover { color: var(--a-fg-1); }
.at-pane-bar .at-pb-icon[aria-pressed="true"] { color: var(--a-accent); }
.at-pb-icon svg { width: 14px; height: 14px; }
.at-pane-bar .at-pb-icon::before { content: ''; position: absolute; inset: -2px; }
@media (hover: hover) {
  .cd-lg-acts, .at-pane-bar .at-pb-icon[data-act="max"], .at-pane-bar .at-pb-icon[data-act="more"] { opacity: 0; transition: opacity var(--a-dur-1) ease; }
  .at-pane:hover .cd-lg-acts, .at-pane:hover .at-pb-icon, .at-pane-bar:focus-within .cd-lg-acts,
  .at-pane-bar:focus-within .at-pb-icon, .cd-lg-acts:has([aria-pressed="true"]) { opacity: 1; }
}
.at-charts.lay-1 .at-pb-icon[data-act="remove"], .at-charts.lay-1 .at-pb-icon[data-act="max"] { display: none; }

.at-pb-xs { display: none; }

/* M: no volume, no absolute change. S: symbol, timeframe and close only. */
.at-pane[data-tier="M"] .cd-lg-vol, .at-pane[data-tier="M"] .cd-lg-venue, .at-pane[data-tier="M"] .cd-lg-dot2 { display: none; }
.at-pane[data-tier="M"] .cd-lg-ohlc i:nth-of-type(-n+3), .at-pane[data-tier="M"] .cd-lg-ohlc b:nth-of-type(-n+3) { display: none; }
.at-pane[data-tier="S"] .cd-lg-ohlc i, .at-pane[data-tier="S"] .cd-lg-ohlc b:not(.cd-lg-c),
.at-pane[data-tier="S"] .cd-lg-vol, .at-pane[data-tier="S"] .cd-lg-venue, .at-pane[data-tier="S"] .cd-lg-dot2,
.at-pane[data-tier="S"] .cd-lg-chg, .at-pane[data-tier="S"] .cd-lg-acts .at-pb-icon:not([data-act="remove"]) { display: none; }
.at-pane[data-tier="S"] .at-pane-bar, .at-pane[data-tier="S"] .cd-lg-main { gap: 0; }
.at-pane[data-tier="S"] .at-pane-bar { padding: 0 var(--a-sp-1); }
/* A medium pane with room for it keeps the venue and the full O H L C line, like the larger panes beside it (a chart
   added by growing a layout read as a thin header: regression 2026-10-04, live pass). The pane's own width decides. */
@media (min-width: 821px) {
  .at-pane { container: at-pane / inline-size; }
  @container at-pane (min-width: 460px) {
    .at-pane[data-tier="M"] .cd-lg-venue, .at-pane[data-tier="M"] .cd-lg-dot2,
    .at-pane[data-tier="M"] .cd-lg-ohlc i:nth-of-type(-n+3), .at-pane[data-tier="M"] .cd-lg-ohlc b:nth-of-type(-n+3) { display: revert; }
  }
}
.at-pane[data-tier="S"] .cd-lg-sym { font-size: var(--a-fs-xs); }
/* XS: no row at all; one floating chip names the market and opens the search. */
.at-pane[data-tier="XS"] .at-pane-bar { display: none; }
.at-pane[data-tier="XS"] .at-pb-xs {
  display: flex; position: absolute; top: var(--a-sp-2); left: var(--a-sp-2); z-index: var(--z-pane-chrome);
  height: var(--a-h-xs); padding: 0 var(--a-sp-4); opacity: .75;
  background: var(--a-raised); border-color: var(--a-line-2); border-radius: var(--a-r-sm);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-mono); color: var(--a-fg-1); font-variant-numeric: tabular-nums;
}
.at-pane[data-tier="XS"] .at-pb-xs:hover, .at-pane[data-tier="XS"].active .at-pb-xs { opacity: 1; }
/* 0.9.74 (review: the "BTC 5m" chip sat on the Big trades row in the 16w-20w cells): the small tiers show no indicator legend
   (cd-study-legend.js), so the Big trades row cd-flow.js puts in its own box there (.cd-big-host) goes too, as in the S cells */
.at-pane[data-tier="S"] .cd-big-host, .at-pane[data-tier="XS"] .cd-big-host { display: none; }

/* Maximised: only that pane, spanning every track. */
.at-charts.at-max > .at-pane:not(.at-maxed),
.at-charts.at-max > .at-split { display: none; }
.at-charts.at-max > .at-pane.at-maxed { grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; }

/* Plan-limit card over a pane (history stays visible behind it). */
.cd-pane-lock { position: absolute; left: 0; right: 0; top: var(--at-bar); bottom: 0; z-index: calc(var(--z-pane-chrome) - 1);
  display: flex; align-items: center; justify-content: center; padding: var(--a-sp-5);
  background: var(--a-veil); pointer-events: none; }
.cd-lock-card { pointer-events: auto; position: relative; max-width: 320px; padding: var(--a-sp-5) var(--a-sp-6);
  background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-md);
  box-shadow: var(--a-sh-1); text-align: center; display: grid; gap: var(--a-sp-2); }
.cd-lock-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
  background: var(--a-holo-h); opacity: .85; border-radius: var(--a-r-sm); }
.cd-lock-t { font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-1); }
.cd-lock-n { font: var(--a-fs-xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }
.cd-lock-a { justify-self: center; display: inline-flex; align-items: center; height: var(--a-h-md);
  padding: 0 var(--a-sp-6); border-radius: var(--a-r-md); background: var(--a-holo); color: var(--cd-on-holo);
  font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); text-decoration: none; margin-top: var(--a-sp-2); }
.cd-lock-a:hover { filter: brightness(1.05) saturate(1.05); }
.at-pane[data-tier="XS"] .cd-lock-n, .at-pane[data-tier="S"] .cd-lock-n + .cd-lock-n { display: none; }
.at-pane[data-tier="XS"] .cd-pane-lock { top: 0; }

/* -- seams ----------------------------------------------------------------- *
 * A 6px hit area around a 1px line that only lights on hover or drag. */
.at-split { position: absolute; z-index: var(--z-seam); background: transparent; touch-action: none; }
.at-split[data-axis="c"] { top: 0; bottom: 0; width: 6px; margin-left: -3px; cursor: col-resize; }
.at-split[data-axis="r"] { left: 0; right: 0; height: 6px; margin-top: -3px; cursor: row-resize; }
.at-split::after { content: ''; position: absolute; background: transparent; transition: background var(--a-dur-1) ease; }
.at-split[data-axis="c"]::after { top: 0; bottom: 0; left: 2px; width: 2px; }
.at-split[data-axis="r"]::after { left: 0; right: 0; top: 2px; height: 2px; }
.at-split:hover::after, .at-split:focus-visible::after { background: var(--a-accent-t3); }
.at-split.dragging::after, body.at-dragging .at-split.dragging::after { background: var(--a-accent); }
.at-charts.lay-1 .at-split { display: none; }

/* ==========================================================================
   LAYOUT PICKER (built by atlas.js, layout-menu v2: splits by count, custom grid, sync switches)
   ========================================================================== */

/* Framed when it is its own popover; inside #at-menu (the shell's choice) the menu is the frame. */
body > .at-lay-pop { position: fixed; z-index: var(--z-menu); background: var(--a-raised);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); box-shadow: var(--a-sh-2); }
.at-lay-pop { display: grid; gap: var(--a-sp-4); width: 372px; max-width: calc(100vw - 16px);
  max-height: min(78vh, 720px); overflow: auto; padding: var(--a-sp-2); color: var(--a-fg-2); }

/* Sections: Splits, Custom, Sync - a caps title, then the controls. */
.at-lay-sec { display: grid; gap: var(--a-sp-2); }
.at-lay-sec + .at-lay-sec { padding-top: var(--a-sp-4); border-top: 1px solid var(--a-line-1); }
.at-lay-sh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-sp-4); min-height: 12px; }
.at-lay-ct { font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3); }

/* Splits: one row per chart count, every arrangement of it as a diagram drawn from its grid. */
.at-lay-rows { display: grid; gap: var(--a-sp-1); }
.at-lay-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--a-sp-2); }   /* 0.9.74 (review): minmax(0, …) lets the tiles shrink */
.at-lay-n { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-mono); font-variant-numeric: tabular-nums; color: var(--a-fg-3); text-align: right; }
.at-lay-row.locked .at-lay-n { color: var(--a-fg-4); }
/* 0.9.74 (review): one line per count. A locked row's plan badge took the room of the 7th shape (rows 4 and 5), which
   wrapped onto an orphan line; the tiles now give up a few pixels each instead (never below the 30 px glyph + border). */
.at-lay-tiles { display: flex; flex-wrap: nowrap; min-width: 0; gap: var(--a-sp-1); }
.at-lay-tiles > .at-lay-tile { flex: 0 1 auto; min-width: 32px; }
.at-lay-tile { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--a-r-md);
  background: transparent; cursor: pointer; color: var(--a-fg-3); }
.at-lay-tile:hover { background: var(--a-hover); color: var(--a-fg-1); }
.at-lay-tile:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.at-lay-tile.active { border-color: var(--a-accent-t3); background: var(--a-accent-t1); color: var(--a-accent); }
.at-lay-tile.tight { cursor: not-allowed; opacity: .4; }
.at-lay-tile.tight:hover { background: transparent; color: var(--a-fg-3); }
.at-lay-row.locked .at-lay-tile { color: var(--a-fg-2); }
.at-lay-row.locked .at-lay-tile:hover { color: var(--a-fg-2); }
/* Layout glyphs (review item 14): whole-pixel gaps and full-ink strokes, so the miniature panes are crisp at 1x; 1.5 px
   strokes where the screen has the pixels for them; the chosen layout is filled. */
.at-lay-box { display: grid; gap: var(--a-sp-1); width: 30px; height: 20px; }
.at-lay-box i { min-width: 0; min-height: 0; border: 1px solid currentColor; border-radius: 1px; }
@media (min-resolution: 2dppx) { .at-lay-box i { border-width: 1.5px; } }
.at-lay-tile.active .at-lay-box i { background: color-mix(in srgb, currentColor 30%, transparent); }
.at-lay-row.locked .at-lay-tile { opacity: .5; }
/* The plan that unlocks a locked size, on the tile itself. */
.at-lay-badge { padding: var(--a-sp-1) var(--a-sp-2); border-radius: var(--a-r-sm);
  background: var(--a-raised); border: 1px solid var(--a-line-2); color: var(--a-fg-3);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .02em; text-transform: uppercase; pointer-events: none; }
/* "Fill from watchlist" in the Splits title row: a quiet text button. */
.at-lay-fill { padding: var(--a-sp-1) var(--a-sp-2); border: 0; border-radius: var(--a-r-sm); background: transparent; cursor: pointer;
  color: var(--a-accent); font: var(--a-fw-medium) var(--a-fs-2xs)/1 var(--a-sans); white-space: nowrap; }
.at-lay-fill:hover { background: var(--a-hover); }
.at-lay-fill:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.at-lay-fill.off { color: var(--a-fg-4); cursor: not-allowed; }
.at-lay-fill.off:hover { background: transparent; }
/* Every shape of a count too small for this window (cells under 220 px, review 2026-10-19): the reason on the row. */
.at-lay-row.tight .at-lay-n { color: var(--a-fg-4); }
.at-lay-why { font: var(--a-fw-medium) var(--a-fs-2xs)/1.2 var(--a-sans); color: var(--a-fg-3); white-space: nowrap; pointer-events: none; }

/* Custom grid: hover or drag across a 5 x 4 field to choose cols x rows. */
.at-lay-clabel { font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-mono); color: var(--a-fg-1); font-variant-numeric: tabular-nums; }
.at-lay-clabel.bad { color: var(--a-warn-soft); }
.at-lay-cgrid { width: 170px; height: 100px; gap: var(--a-sp-2); touch-action: none; }
.at-lay-cell { min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm);
  background: transparent; cursor: pointer; }
.at-lay-cell:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.at-lay-cell.on { border-color: var(--a-accent-t4); background: var(--a-accent-t3); }
.at-lay-cell.bad { border-style: dashed; }
.at-lay-cell.bad.on { border-color: var(--a-warn-t3); background: var(--a-warn-t1); }

/* Sync: Symbol / Interval / Crosshair / Time as on/off switches. */
.at-lay-switches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-sp-1) var(--a-sp-4); }
.at-lay-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--a-sp-4);
  min-height: var(--a-h-sm); padding: var(--a-sp-1) var(--a-sp-2); border: 0; border-radius: var(--a-r-md);
  background: transparent; cursor: pointer; color: var(--a-fg-2); font: var(--a-fw-medium) var(--a-fs-xs)/1 var(--a-sans); text-align: left; }
.at-lay-switch:hover { background: var(--a-hover); color: var(--a-fg-1); }
.at-lay-switch:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }
.at-lay-sw-k { position: relative; flex: none; width: 28px; height: 16px; border-radius: var(--a-r-md);
  background: var(--a-line-2); transition: background-color 120ms ease-out; }
.at-lay-sw-k::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--a-fg-1); box-shadow: var(--a-sh-1); transition: transform 120ms ease-out; }
.at-lay-switch[aria-checked="true"] { color: var(--a-fg-1); }
.at-lay-switch[aria-checked="true"] .at-lay-sw-k { background: var(--a-accent); }
.at-lay-switch[aria-checked="true"] .at-lay-sw-k::after { transform: translateX(12px); background: var(--a-on-accent); }
@media (prefers-reduced-motion: reduce) { .at-lay-sw-k, .at-lay-sw-k::after { transition: none; } }
/* 0.9.72 Indicators: the live switch and the one-time copy, a row of their own under the five (a hairline sets it apart). */
.at-lay-switches.at-lay-ind { margin-top: var(--a-sp-1); padding-top: var(--a-sp-2); border-top: 1px solid var(--a-line-1); align-items: center; }
.at-lay-copy { min-height: var(--a-h-sm); padding: var(--a-sp-1) var(--a-sp-2); border: 0; border-radius: var(--a-r-md); background: transparent;
  cursor: pointer; color: var(--a-accent); font: var(--a-fw-medium) var(--a-fs-xs)/1.2 var(--a-sans); text-align: left; }
.at-lay-copy:hover { background: var(--a-hover); }
.at-lay-copy:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; }

/* The plan line under the picker. */
.cd-lay-plan { padding-top: var(--a-sp-2); border-top: 1px solid var(--a-line-1); font: var(--a-fs-2xs)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-3); }
.cd-lay-plan-a { color: var(--a-accent); text-decoration: none; font-weight: var(--a-fw-semibold); }
.cd-lay-plan-a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .at-lay-tile { width: 38px; height: 30px; }
  .at-lay-box { width: 26px; height: 18px; }
  .at-lay-switches { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COMMAND PALETTE (atlas-palette.js)
   ========================================================================== */

.at-pal-scrim { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; justify-content: center;
  align-items: flex-start; padding: 12vh var(--a-sp-6) var(--a-sp-6); background: var(--a-scrim); }
.at-pal { width: 620px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg); box-shadow: var(--a-sh-3); }
.at-pal-head { display: flex; align-items: center; gap: var(--a-sp-4); padding: 0 var(--a-sp-5); border-bottom: 1px solid var(--a-line-1); }
.at-pal-head svg { width: 16px; height: 16px; flex: none; color: var(--a-fg-3); }
.at-pal-in { flex: 1; min-width: 0; height: var(--a-h-xl); border: 0; background: transparent; color: var(--a-fg-1);
  font: var(--a-fw-medium) var(--a-fs-lg)/1 var(--a-sans); }
.at-pal-in::placeholder { color: var(--a-fg-3); }
/* the focus ring goes round the whole search row, the icon inside it (review 0.9.60 #243: the input's own ring left the icon out) */
.at-pal-in:focus, .at-pal-in:focus-visible { outline: none; }
.at-pal-head:focus-within { box-shadow: inset 0 0 0 var(--a-ring-w) var(--a-focus); border-radius: var(--a-r-lg) var(--a-r-lg) 0 0; }
.at-pal-kbd .cd-keycap { display: inline-flex; gap: 2px; }
.at-pal-scopes { display: flex; flex-wrap: wrap; gap: var(--a-sp-2); padding: var(--a-sp-2) var(--a-sp-5); border-bottom: 1px solid var(--a-line-1); }
.at-pal-scope { height: var(--a-h-sm); padding: 0 var(--a-sp-4); cursor: pointer; border: 1px solid var(--a-line-1);
  border-radius: var(--a-r-pill); background: transparent; color: var(--a-fg-2); font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); }
.at-pal-scope:hover { color: var(--a-fg-1); }
.at-pal-scope[aria-pressed="true"] { color: var(--a-accent); border-color: var(--a-accent-t3); background: var(--a-accent-t1); }
.at-pal-list { list-style: none; margin: 0; padding: var(--a-sp-2); overflow-y: auto; flex: 1; min-height: 60px; }
.at-pal-head2 { padding: var(--a-sp-4) var(--a-sp-4) var(--a-sp-2); font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans);
  letter-spacing: .13em; text-transform: uppercase; color: var(--a-fg-3); list-style: none; }
.at-pal-row { display: flex; align-items: center; gap: var(--a-sp-4); min-height: 30px; padding: var(--a-sp-2) var(--a-sp-4);
  border-radius: var(--a-r-md); cursor: pointer; color: var(--a-fg-1); font: var(--a-fw-medium) var(--a-fs-md)/var(--a-lh-tight) var(--a-sans); }
.at-pal-row[aria-selected="true"] { background: var(--a-accent-t2); }
.at-pal-row[aria-disabled="true"] { color: var(--a-fg-3); cursor: not-allowed; }
.at-pal-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pal-row.mono .at-pal-main { font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-tight) var(--a-mono); font-variant-numeric: tabular-nums; }
.at-pal-meta { margin-left: auto; flex: none; font: var(--a-fs-2xs)/1 var(--a-mono); color: var(--a-fg-3); font-variant-numeric: tabular-nums; }
.at-pal-note { flex: none; font: var(--a-fs-2xs)/var(--a-lh-tight) var(--a-sans); color: var(--a-warn-soft); }
.at-pal-recent { flex: none; width: 6px; height: 6px; border-radius: var(--a-r-pill); background: var(--a-fg-4); }
.at-pal-empty { padding: var(--a-sp-6); text-align: center; color: var(--a-fg-3); font: var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); list-style: none; }
.at-pal-foot { display: flex; flex-wrap: wrap; gap: var(--a-sp-2) var(--a-sp-5); padding: var(--a-sp-2) var(--a-sp-5);
  border-top: 1px solid var(--a-line-1); font: var(--a-fs-2xs)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }

/* ==========================================================================
   PHONE: pane dots under the one visible chart (tap to pick, swipe to step)
   ========================================================================== */

.at-dots { display: none; }

@media (max-width: 820px) {
  /* The pill sits above the lowest pane's time axis (axis + news strip measured 40 px at 820x1000), not on it: at
     bottom 8 px it hid the axis labels in layouts 2h and 4 (sweep 2026-10-19 S62). */
  .at-dots { display: flex; position: absolute; left: 50%; bottom: calc(var(--at-dots-axis, 40px) + var(--a-sp-2)); transform: translateX(-50%);
    z-index: var(--z-pane-chrome); gap: 0; padding: 0 var(--a-sp-2);
    border-radius: var(--a-r-pill); background: var(--a-raised); box-shadow: var(--a-sh-1); touch-action: pan-y; }
  .at-dots[hidden] { display: none !important; }
  .at-dot { width: var(--a-h-lg); height: var(--a-h-lg); padding: 0; border: 0; background: transparent; cursor: pointer;
    display: grid; place-items: center; }
  .at-dot::before { content: ''; width: 7px; height: 7px; border-radius: var(--a-r-pill); background: var(--a-fg-4); }
  .at-dot.on::before { background: var(--a-accent); width: 16px; }

  /* 36 px row: 30 px buttons whose ::before pad makes the finger target 36 px (regression 2026-10-03, M3). */
  .at-charts > .at-pane[data-tier] { --at-bar: 36px; }
  .at-pane-bar button::before, .at-pane-bar .at-pb-icon::before { content: ''; position: absolute; inset: -3px 0; }
  .at-charts > .at-pane[data-tier="XS"] .at-pane-bar { display: flex; }
  .at-charts > .at-pane[data-tier="XS"] .at-pb-xs { display: none; }
  .at-pane .cd-lg-ohlc i:nth-of-type(-n+3), .at-pane .cd-lg-ohlc b:nth-of-type(-n+3), .at-pane .cd-lg-vol { display: none; }
}
/* Phone: the row keeps Hide and More; reset view, copy image and settings are items of the More menu already. The
   numbers give way (clipped at the row's own edge) before any button can leave the screen. */
@media (max-width: 520px) {
  .at-pane-bar .at-pb-icon[data-act="resetview"], .at-pane-bar .at-pb-icon[data-act="copyimg"], .at-pane-bar .at-pb-icon[data-act="settings"] { display: none; }
  /* The close price never gives way (KI-4, 0.9.24: clipping it read "8408" for 84082.9, the change drawn beside it).
     The change is never cut inside a number either (review 2026-10-19): the fit drops its absolute part, then all of it. */
  .at-pane-bar .cd-lg-ohlc { flex: 0 0 auto; }
  .at-pane-bar .cd-lg-chg { margin-left: var(--a-sp-2); }
  .at-pane-bar .cd-lg-live { margin-right: var(--a-sp-2); }
}

@media (pointer: coarse) {
  .at-pane-bar .at-pb-icon { width: var(--a-h-lg); }
  .at-lay-switch, .at-pal-scope { min-height: var(--a-h-lg); }
  .at-lay-tile { width: 44px; height: 36px; }
  .at-pal-row { min-height: var(--a-h-lg); }
}

/* Spot / Perp quick switch (2026-10-06): a segmented pair beside the venue on a roomy legend; one chip that toggles on a
   phone or a narrow pane; nothing on the smallest tier. Hidden (the [hidden] attribute) when the exchange has one kind only. */
.cd-lg-kind { display: inline-flex; align-items: center; flex: none; padding: 1px; margin-inline-end: var(--a-sp-2);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-pill); background: var(--a-glass); }
.cd-lg-kind[hidden], .at-pane-bar .cd-lg-kchip[hidden] { display: none; }
.at-pane-bar .cd-lg-kb { height: 16px; padding: 0 calc(var(--a-sp-2) + var(--a-sp-1)); border: 0; border-radius: var(--a-r-pill);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .02em; color: var(--a-fg-3); }
.at-pane-bar .cd-lg-kb:hover { color: var(--a-fg-1); background: var(--a-hover); }
.at-pane-bar .cd-lg-kb[aria-pressed="true"] { color: var(--a-accent); background: var(--a-accent-t2); cursor: default; }
/* "S" / "P" (operator 2026-10-21): one letter each, a square-ish target; the pressed half stays tinted, and on the
   high-contrast palette it is outlined too, so the two states never read alike. */
.at-pane-bar .cd-lg-kb { min-width: 18px; justify-content: center; }
.at-pane-bar .cd-lg-kchip .cd-lg-kchip-t { min-width: 7px; text-align: center; }
:root[data-contrast="high"] .at-pane-bar .cd-lg-kb[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--a-accent); }
.at-pane-bar .cd-lg-kchip { display: none; height: 18px; padding: 0 calc(var(--a-sp-2) + var(--a-sp-1)); margin-inline-end: var(--a-sp-2);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-pill); background: var(--a-glass); color: var(--a-fg-2);
  font: var(--a-fw-semibold) var(--a-fs-2xs)/1 var(--a-sans); letter-spacing: .02em; }
.at-pane-bar .cd-lg-kchip:hover { color: var(--a-fg-1); border-color: var(--a-accent-t3); }
.cd-lg-kchip-i { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.at-pane-bar .cd-lg-kb:focus-visible, .at-pane-bar .cd-lg-kchip:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
/* M (no venue): the chip. S: neither. A medium pane with room for the venue keeps the pair (same container rule as the venue). */
.at-pane[data-tier="M"] .cd-lg-kind { display: none; }
.at-pane[data-tier="M"] .cd-lg-kchip:not([hidden]) { display: inline-flex; }
.at-pane[data-tier="S"] .cd-lg-kind, .at-pane[data-tier="S"] .cd-lg-kchip:not([hidden]) { display: none; }
@media (min-width: 821px) {
  /* 640, not 460: from 460 to 639 px this rule showed the pair while the rule below showed the chip, and the header read
     "Spot Perp  Perp ⇄" (review 0.9.60, item 253) */
  @container at-pane (min-width: 640px) {
    .at-pane[data-tier="M"] .cd-lg-kind:not([hidden]) { display: inline-flex; }
    .at-pane[data-tier="M"] .cd-lg-kchip:not([hidden]) { display: none; }
  }
  /* A pane under 640 px keeps its numbers: the chip (about 34 px with "S" / "P") stands in for the pair (about 44 px). */
  @container at-pane (max-width: 639px) {
    .at-pane .cd-lg-kind:not([hidden]) { display: none; }
    .at-pane:not([data-tier="S"]) .cd-lg-kchip:not([hidden]) { display: inline-flex; }
  }
}
/* The venue next to the switch is the exchange's short name: it keeps its width (it used to shrink first). */
.at-pane-bar:has(.cd-lg-kind:not([hidden])) .cd-lg-venue { flex-shrink: 0; }
/* Phone: the chip only (a finger-sized target: the row's ::before pad adds the rest). */
@media (max-width: 520px) {
  .at-pane .cd-lg-kind:not([hidden]) { display: none; }
  .at-pane:not([data-tier="S"]) .cd-lg-kchip:not([hidden]) { display: inline-flex; height: var(--a-h-sm); }
}
@media (forced-colors: active) {
  .cd-lg-kind, .at-pane-bar .cd-lg-kchip { border-color: ButtonText; }
  .at-pane-bar .cd-lg-kb[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* -- pane header fit (operator 2026-10-07) -----------------------------------------------------------------------------
   A 4h pane in a multi-chart layout (~1490 px window) clipped close, maximize and More: the O H L C + Vol text pushed
   them out of the row. Two slots now: the legend (.cd-lg-main) gives way, the buttons (.cd-lg-tools) never shrink.
   cd-pane-head.js measures each row and writes data-fit on the bar, the steps in order (review 2026-10-19: the exchange and
   the absolute change go first, the % stays): venue (the exchange name, its dot and source link), abs (the absolute change
   and its brackets), ohlc (drop O/H/L, keep C and the change), vol (drop Vol and the HA line), badges (the Spot / Perp
   pair becomes the chip), tools (reset view, copy image, hide and settings fold into More), tight (the chip goes), pct (the
   % change goes whole). Whatever still does not fit is clipped inside the legend slot, never over the buttons. */
.cd-lg-main { display: flex; align-items: center; gap: var(--a-sp-1); flex: 0 1 auto; min-width: 0; overflow: hidden; align-self: stretch; }
.cd-lg-tools { display: inline-flex; align-items: center; gap: var(--a-sp-1); flex: none; }
.at-pane-bar[data-fit-measure] .cd-lg-main { flex: none; overflow: visible; }
.at-pane-bar[data-fit-measure] .cd-lg-main > * { flex-shrink: 0; }
.at-pane-bar[data-fit~="ohlc"] .cd-lg-ohlc i:nth-of-type(-n+3), .at-pane-bar[data-fit~="ohlc"] .cd-lg-ohlc b:nth-of-type(-n+3) { display: none; }
.at-pane-bar[data-fit~="vol"] .cd-lg-vol, .at-pane-bar[data-fit~="vol"] .cd-lg-ha-v { display: none !important; }
.cd-lg-ha-l { font: inherit; color: var(--a-fg-2, inherit); }
.at-pane-bar[data-fit~="venue"] .cd-lg-venue, .at-pane-bar[data-fit~="venue"] .cd-lg-dot2, .at-pane-bar[data-fit~="venue"] .cd-lg-src { display: none; }
/* 0.9.74 (review): the change's period ("+0.03% 5m") stays with the % - the phone header read "+0.03%" with no period */
.at-pane-bar[data-fit~="abs"] .cd-lg-abs, .at-pane-bar[data-fit~="abs"] .cd-lg-par:not(.cd-lg-per) { display: none; }
/* 0.9.74 (review): the compact name ("BTC" for BTCUSDT, atlas.js .at-pb-sym-b) stands in for the symbol on a narrow row (step
   "sym", after the %), so the close still fits: "C1 BTC 5m ● 84,082.9". Measured beside the symbol without taking room. */
.at-pane-bar .at-pb-sym-b { display: none; }
.at-pane-bar[data-fit-measure] .at-pb-sym-b { display: inline; position: absolute; visibility: hidden; }
.at-pane-bar[data-fit~="sym"] .at-pb-sym-t, .at-pane-bar[data-fit~="sym"] .cd-lg-vlogo,
.at-pane-bar[data-fit~="sym"] .cd-lg-sym ~ .cd-lg-dot:not(.cd-lg-dot2) { display: none; }
.at-pane-bar[data-fit~="sym"] .at-pb-sym-b { display: inline; position: static; visibility: visible; }
.at-pane-bar[data-fit~="sym"] .at-pb-id, .at-pane-bar[data-fit~="sym"] .cd-lg-sym,
.at-pane-bar[data-fit~="sym"] .cd-lg-tf { padding-left: var(--a-sp-1); padding-right: var(--a-sp-1); }
.at-pane-bar[data-fit~="sym"] .cd-lg-live { margin-inline-end: var(--a-sp-2); }
.at-pane-bar[data-fit~="pct"] .cd-lg-chg { display: none; }
/* 0.9.72 (review 2026-10-26): the close is never cut mid-number ("84,07" in a 14-pane layout): it keeps its width and goes whole
   with its letter as the last fit step (cd-pane-head.js "close"; the row's tooltip keeps it) */
.at-pane-bar .cd-lg-c { flex: none; white-space: nowrap; }
.at-pane-bar[data-fit~="close"] .cd-lg-c, .at-pane-bar[data-fit~="close"] .cd-lg-ohlc i:nth-of-type(4) { display: none; }
.at-pane-bar[data-fit~="badges"] .cd-lg-kind:not([hidden]) { display: none; }
.at-pane:not([data-tier="S"]) .at-pane-bar[data-fit~="badges"] .cd-lg-kchip:not([hidden]) { display: inline-flex; }
.at-pane-bar[data-fit~="tools"] .cd-lg-acts .at-pb-icon:not([data-act="remove"]) { display: none; }
.at-pane-bar[data-fit~="tight"] .cd-lg-kind:not([hidden]),
.at-pane:not([data-tier="S"]) .at-pane-bar[data-fit~="tight"] .cd-lg-kchip:not([hidden]) { display: none; }
/* The change and the symbol never shorten inside a word or a number: they keep their width, and the steps above drop parts whole. */
.at-pane-bar .cd-lg-chg { flex: none; white-space: nowrap; }
/* the compact XS chip has no room for the status pill: a coloured edge says stalled / quiet (review 0.9.52: it showed nothing) */
html[data-feed="down"] .at-pane[data-tier="XS"] .at-pb-xs { box-shadow: inset 3px 0 0 var(--a-down); }
html[data-feed="stale"] .at-pane[data-tier="XS"] .at-pb-xs { box-shadow: inset 3px 0 0 var(--a-warn); }
/* The close is never the part that clips (review 0.9.52 T7: "84,(" in a 14-chart layout): the price block keeps its width
   and the change gives way first. On the S tier the stalled pill shrinks back to a red dot - the row has no room for the
   word, and the footer and the dot's tooltip still say it. */
.cd-lg-ohlc, .at-pane-bar .cd-lg-sym { flex: none; }
.at-pane[data-tier="S"] .cd-lg-live[data-st="down"][data-label] { width: 6px; height: 6px; padding: 0; display: block; }
.at-pane[data-tier="S"] .cd-lg-live[data-st="down"]::after { content: none; }
.cd-lg-live[data-st="down"] { cursor: pointer; }
.cd-lg-live[data-st="nodata"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--a-down); }
/* 1.0.2 (review 0974 T2): a market the server has not confirmed yet is "connecting": amber, as the footer's "· 1 connecting" */
.cd-lg-live[data-st="connecting"] { background: var(--a-warn); box-shadow: 0 0 0 2.5px var(--a-warn-t2, transparent); }