/**
 * ChartDeck terminal - base, chart area and the shared dropdown.
 *
 * A screen somebody stares at for hours, so: no pure black (it makes every edge vibrate), no
 * saturated accent on large areas, and numbers with tabular figures so a price does not jitter
 * sideways as its digits change.
 *
 * Colours come from /brand/theme.css (dark Holo Glass or light, per html[data-theme]); sizes,
 * type and layers from atlas-tokens.css. The page chrome (top toolbar, drawing bar, widget bar,
 * panels, bottom bar, legends) is chartdeck.css; panes, seams, the layout picker and the palette
 * are atlas-chrome.css.
 *
 * Round 2 removed what ChartDeck never loads: the Atlas trade panel, order ticket, quick-trade
 * panel, tape, news drawer, ticker, target-mode badge and the DOM depth overlay.
 */

:root {
  --at-top:      var(--a-topbar-h);
  --at-status-h: var(--a-status-h);
  --at-bar:      var(--a-h-md);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--a-bg);
  color: var(--a-fg-1);
  font: var(--a-fs-md)/var(--a-lh-snug) var(--a-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* A phone must not bounce the whole terminal when a list hits its end. */
  overscroll-behavior: none;
}

.at-up { color: var(--a-up); } .at-down { color: var(--a-down); }
.at-dim { color: var(--a-fg-4); }
[hidden] { display: none !important; }
button { font-family: inherit; }

/* A plain square icon button (screenshot preview, dialogs). */
.at-icon {
  width: var(--a-h-md); height: var(--a-h-md); display: grid; place-items: center; flex: none;
  border: 1px solid transparent; border-radius: var(--a-r-md);
  background: transparent; color: var(--a-fg-2); cursor: pointer; padding: 0;
}
.at-icon:hover { color: var(--a-fg-1); background: var(--a-hover); border-color: var(--a-line-1); }
.at-icon svg { width: 15px; height: 15px; }
.at-icon[aria-pressed="true"] { color: var(--a-accent); }

/* Feed lamp. atlas.js writes the class ('' | live | quiet/stale | down). */
.at-conn { display: flex; align-items: center; gap: var(--a-sp-4); font-size: var(--a-fs-2xs); color: var(--a-fg-2); white-space: nowrap; }
.at-lamp { width: 7px; height: 7px; border-radius: var(--a-r-pill); background: var(--a-fg-4); flex: none; }
.at-conn.live .at-lamp { background: var(--a-up); box-shadow: 0 0 0 3px var(--a-up-t2); }
.at-conn.stale .at-lamp, .at-conn.quiet .at-lamp { background: var(--a-warn); box-shadow: 0 0 0 3px var(--a-warn-t2); }
.at-conn.down .at-lamp { background: var(--a-down); box-shadow: 0 0 0 3px var(--a-down-t2); }
/* Every chart on screen is a paused market (its underlying market is closed): neither live nor a fault. */
.at-conn.paused .at-lamp { background: transparent; box-shadow: inset 0 0 0 1.5px var(--a-fg-3); }
.at-conn.nodata .at-lamp { background: var(--a-fg-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-fg-3) 25%, transparent); }
.at-conn.down .at-conn-t { color: var(--a-down-soft); }

/* -- chart area ------------------------------------------------------------ */

.at-main { position: relative; min-width: 0; min-height: 0; display: flex; background: var(--a-line-1); }
.at-charts { flex: 1; background: var(--a-line-1); display: grid; gap: 1px; min-width: 0; min-height: 0; position: relative; }
/* No rule per layout: the shell writes the tracks inline from its layout table. */

.at-pane { position: relative; background: var(--a-panel); min-width: 0; min-height: 0;
           overflow: hidden; display: flex; flex-direction: column; }
.at-pane-host { position: relative; flex: 1; min-height: 0; }

/* A chart that could not be drawn says so in its own box, not in a console. */
.at-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--a-sp-2); padding: var(--a-sp-6); text-align: center;
  background: var(--a-panel); color: var(--a-fg-3); }
.at-empty-icon { font-size: var(--a-fs-xl); line-height: 1; color: var(--a-warn); }
.at-empty-title { font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-snug) var(--a-sans); color: var(--a-fg-1); }
.at-empty-note { max-width: 42ch; font: var(--a-fs-xs)/var(--a-lh-body) var(--a-mono); color: var(--a-fg-3); word-break: break-word; font-variant-numeric: tabular-nums; }

.at-shield { position: absolute; inset: 0; z-index: calc(var(--z-seam) - 1); }
.at-shield-full { position: fixed; inset: 0; z-index: var(--z-shield); }
body.at-dragging { user-select: none; }

/* Price-axis glow: sell side above, buy side below, strongest at the right edge where the price
   scale lives and fading out before it reaches the candles. Ambience, not data.
   (atlas-ux.js repaints the same recipe into screenshots; keep the two in step.) */
.at-glow {
  position: absolute; top: var(--at-bar); right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: calc(var(--z-chart-overlay) - 1);
  background:
    linear-gradient(to bottom, var(--a-glow-down), transparent 46%),
    linear-gradient(to top,    var(--a-glow-up), transparent 46%);
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 100%);
          mask-image: linear-gradient(to right, transparent 50%, black 100%);
  display: none;
}
/* Opt-in since 0.9.56 (screenshot review 2026-10-19: it lowered contrast and repeated per cell): Chart settings turns it on
   through AtlasChart.setBackgroundGlow(), which sets this class on <html>. */
html.cd-glow .at-glow { display: block; }

/* -- dropdown (atlas.js buildMenu: markets fallback, timeframe, pane More) -- */

.at-menu {
  position: fixed; z-index: var(--z-menu); width: 258px; max-height: 58vh;
  display: none; flex-direction: column;
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-md);
  background: var(--a-raised); box-shadow: var(--a-sh-2); overflow: hidden;
}
.at-menu.open { display: flex; }
.at-menu.compact { width: 170px; }
/* The layout popout borrows this element; it sizes itself. */
.at-menu.grid { width: auto; padding: var(--a-sp-4); }
/* The layout picker is taller than a list menu (splits, custom, sync): the menu may use the window's
   height and the picker scrolls inside it rather than being clipped. */
.at-menu.grid { max-height: calc(100vh - 56px); }
.at-menu.grid > .at-lay-pop { min-height: 0; max-height: none; }
.at-menu-search { flex: none; padding: var(--a-sp-4); border-bottom: 1px solid var(--a-line-1); }
.at-menu-search input {
  width: 100%; height: var(--a-h-md); padding: 0 var(--a-sp-4);
  border: 1px solid var(--a-line-1); border-radius: var(--a-r-sm);
  background: var(--a-sunken); color: var(--a-fg-1);
  font: var(--a-fs-sm)/1 var(--a-mono); font-variant-numeric: tabular-nums;
}
.at-menu-search input:focus { border-color: var(--a-accent-t4); outline: none; }
.at-menu-list { overflow-y: auto; padding: var(--a-sp-2); -webkit-overflow-scrolling: touch; }
.at-menu-list::-webkit-scrollbar { width: 6px; }
.at-menu-list::-webkit-scrollbar-thumb { background: var(--a-scroll); border-radius: var(--a-r-sm); }
.at-opt { display: flex; align-items: center; gap: var(--a-sp-4); min-height: var(--a-h-md); padding: var(--a-sp-2) var(--a-sp-4);
          border-radius: var(--a-r-md); cursor: pointer; font-size: var(--a-fs-sm); color: var(--a-fg-1); }
.at-opt:hover, .at-opt.cursor { background: var(--a-hover); }
.at-opt.active { color: var(--a-sel-fg); background: var(--a-sel-bg); border-color: transparent; box-shadow: var(--a-sel-ring); }
.at-opt-name { font-family: var(--a-mono); font-weight: var(--a-fw-semibold); font-variant-numeric: tabular-nums; }
.at-opt-meta { margin-left: auto; font: var(--a-fs-2xs)/1 var(--a-mono); color: var(--a-fg-3); font-variant-numeric: tabular-nums; }
.at-opt-dot { width: 6px; height: 6px; border-radius: var(--a-r-pill); background: var(--a-fg-4); flex: none; }
.at-opt-dot.fresh { background: var(--a-up); }
.at-opt-dot.stale { background: var(--a-warn); }
.at-opt-head { 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); }

/* ==========================================================================
   COARSE POINTERS: fingers, not cursors - every control at least 36px.
   ========================================================================== */
@media (pointer: coarse) {
  .at-icon { min-width: var(--a-h-lg); min-height: var(--a-h-lg); }
  .at-opt { min-height: var(--a-h-lg); }
}

/* ==========================================================================
   PHONE: one chart at a time (the selected one), pane dots to switch.
   ========================================================================== */
@media (max-width: 820px) {
  :root { --at-bar: 30px; }
  .at-conn-t { display: none; }
  .at-conn { gap: 0; }

  .at-charts { grid-template: minmax(0,1fr) / minmax(0,1fr) !important; }
  .at-charts > .at-pane { display: none; grid-column: 1 !important; grid-row: 1 !important; }
  .at-charts > .at-pane.active { display: flex; }
  .at-split { display: none !important; }

  /* The picker becomes a bottom sheet: reachable, and big enough to hit. */
  .at-menu {
    position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: auto !important; max-height: 72vh; border-radius: var(--a-r-lg) var(--a-r-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .at-menu.compact { width: auto !important; }
  .at-menu.grid { max-height: 82vh; }
  .at-menu.grid > .at-lay-pop { width: auto; }
  .at-menu-search input { height: 40px; font-size: var(--a-fs-ios); }   /* 16px stops iOS zooming */
  .at-opt { padding: var(--a-sp-5) var(--a-sp-5); font-size: var(--a-fs-md); }
  .at-opt-name { font-size: var(--a-fs-md); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }