/* signals-chart.css — the chart card: its toolbar, the vertical drawing-tool
   rail, the canvas chrome candles.js creates for sub-panes, and the replay bar.
   Loaded after signals.css, so the few rules here that restate a selector from
   that file are deliberate refinements of it rather than accidents.

   The canvas itself is painted by candles.js, which resolves every colour with
   getComputedStyle on each frame. That is why the two chart-only colours live
   here as tokens rather than as hexes in the JS: a theme flip repaints the
   chart on the next frame with no reload and no JS change. */

/* ── Tokens ────────────────────────────────────────────────────────────
   Dark is the base here as it is everywhere else since UI 5.0, so :root
   carries the dark values and light is the override — declared twice, once
   behind the media query for "follow the OS" and once behind the explicit
   attribute, because a pinned light theme has to beat a dark OS. */
:root {
  --cc-guide: #333945;   /* in-pane reference lines (RSI 30/70, MACD zero) */
  --cc-grip:  #434A58;   /* the pane resize handle's bar */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cc-guide: #D2D7DE;
    --cc-grip:  #C4CAD3;
  }
}
:root[data-theme="light"] {
  --cc-guide: #D2D7DE;
  --cc-grip:  #C4CAD3;
}

/* ── Chart card ────────────────────────────────────────────────────────
   The card is a column: toolbar, chart row, replay bar, foot. Only the chart
   row flexes, so arming replay or wrapping the toolbar steals height from the
   canvas rather than pushing the card past the fold. */
.sg-chart-card { min-width: 0; }
.sg-chart-card > #sgChartBar { flex: 0 0 auto; row-gap: 8px; }
.sg-chart-card > .sg-chart-row { flex: 1 1 auto; min-height: 0; }
.sg-chart-card > .sg-replay-bar, .sg-chart-card > .sg-chart-foot { flex: 0 0 auto; }

/* A menu inside the toolbar must escape the card, and the card is a flex column
   whose children are otherwise happy to clip. */
#sgChartBar .sg-menu-wrap { position: relative; }
#sgChartBar .popover { z-index: 42; }

/* The provenance sentence is the reason the foot exists: it says whether the
   last price on screen is a forming bar, a 5s quote or a stale close. It gets
   the room, and the keyboard hint gets whatever is left. */
#sgSourceNote { color: var(--text-2); }
#sgSourceNote.stale { color: var(--warn); }
#sgSourceNote.dead { color: var(--neg); font-weight: 550; }
#sgParity { border-left: 1px solid var(--border); padding-left: 14px; }

/* ── Drawing tool rail ─────────────────────────────────────────────────
   40px of vertical buttons down the left of the canvas. It is a roving
   toolbar: exactly one tool is pressed at a time, and the pressed state is the
   only thing that tells the operator why their next click will draw a line
   instead of panning. */
.sg-tools-rail {
  flex: 0 0 40px; width: 40px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0; border-right: 1px solid var(--border); background: var(--surface-2);
}
.sg-tools-rail button {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), transform var(--dur) var(--spring);
}
/* The rail sits on surface-2, one step below the page, so its hover wash is
   the next step up rather than --surface-hover (which would vanish here). */
.sg-tools-rail button:hover { background: var(--surface-3); color: var(--text); }
.sg-tools-rail button:active:not([disabled]) { transform: scale(.94); }
.sg-tools-rail button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.sg-tools-rail button.active,
.sg-tools-rail button[aria-pressed="true"] {
  background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent);
}
.sg-tools-rail button[disabled] { opacity: .4; cursor: not-allowed; }
.sg-tools-rail button svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sg-tools-rail .sep { width: 20px; height: 1px; background: var(--border); margin: 4px 0; flex: 0 0 auto; }

/* Magnet and lock are modifiers, not tools — they stay on across tool changes,
   so they read as toggles rather than as a third selected tool. */
.sg-tools-rail button.mod.active,
.sg-tools-rail button.mod[aria-pressed="true"] { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }

/* ── Canvas chrome for sub-panes (candles.js owns the markup) ──────────
   candles.js creates .cc-overlay lazily, only once a sub-pane exists, so a
   chart with price alone has exactly the DOM it has always had. */
.cc { position: relative; }
.cc .cc-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* The grip is the full width of the pane's top edge so it is findable, but it
   only paints its little bar on hover — a permanent handle on every pane would
   read as four more horizontal lines on a chart that already has grid lines. */
.cc .cc-pane-grip {
  position: absolute; left: 0; right: 0; height: 7px; pointer-events: auto;
  cursor: row-resize; touch-action: none;
}
.cc .cc-pane-grip { transition: background var(--dur) var(--spring); }
.cc .cc-pane-grip:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cc .cc-pane-grip::after {
  content: ""; position: absolute; left: 50%; top: 2px; width: 30px; height: 3px; margin-left: -15px;
  border-radius: 2px; background: var(--cc-grip); opacity: 0; transition: opacity var(--dur), background var(--dur);
}
.cc .cc-pane-grip:hover::after, .cc .cc-pane-grip.dragging::after { opacity: 1; }
.cc .cc-pane-grip.dragging { cursor: row-resize; background: var(--accent-bg); }
.cc .cc-pane-grip.dragging::after { background: var(--accent); }

/* One legend line per sub-pane, positioned by candles.js at that pane's top
   edge. It mirrors the price legend deliberately: same type, same tabular
   numbers, same halo, so a glance down the chart reads as one instrument. */
.cc .cc-panelegend {
  position: absolute; left: 14px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 4px 11px; flex-wrap: nowrap; overflow: hidden;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  max-width: calc(100% - 96px); white-space: nowrap;
  text-shadow: 0 0 1px var(--surface), 0 0 2px var(--surface), 0 1px 2px var(--surface), 0 -1px 2px var(--surface);
  -webkit-font-smoothing: antialiased;
}
.cc .cc-panelegend .cc-pane-name { font-weight: 600; color: var(--text-2); }
.cc .cc-panelegend b { color: var(--text); font-weight: 550; }
.cc .cc-panelegend .cc-ov { display: inline-flex; align-items: center; gap: 5px; }
.cc .cc-panelegend .cc-ov i { display: inline-block; width: 10px; height: 2px; border-radius: 2px; }

/* While a drawing tool is armed the canvas is not a pan surface, so the
   crosshair cursor would lie. candles.js asks the layer for the cursor and
   writes it inline; this is the resting state it falls back to. */
.cc[data-tool]:not([data-tool="cursor"]) .cc-canvas { cursor: crosshair; }
.cc[data-locked="1"] .cc-canvas { cursor: default; }

/* ── Replay bar ────────────────────────────────────────────────────────
   Replay holds the chart at a past bar, which is indistinguishable from a dead
   feed unless the page says so loudly. The bar is tinted and the card carries a
   ring, because "why is price not moving" at 09:30 is an expensive question. */
#sgReplayBar { flex-wrap: wrap; row-gap: 8px; }
.sg-chart-card.replaying { box-shadow: inset 0 0 0 1px var(--warn-bd); }
.sg-chart-card.replaying #sgReplayBar { background: var(--warn-bg); border-top-color: var(--warn-bd); }
#sgReplayBar .rp-btn {
  height: 26px; min-width: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border-2); border-radius: var(--r-xs); background: var(--surface);
  color: var(--text-2); font-size: 12px; font-weight: 550; cursor: pointer;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), transform var(--dur) var(--spring);
}
#sgReplayBar .rp-btn:hover { background: var(--surface-hover); color: var(--text); }
#sgReplayBar .rp-btn:active:not([disabled]) { transform: scale(.96); }
#sgReplayBar .rp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
#sgReplayBar .rp-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
#sgReplayBar .rp-btn[disabled] { opacity: .45; cursor: not-allowed; }
#sgReplayBar .rp-when { font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#sgReplayBar .rp-of { color: var(--muted); }
#sgReplayBar .rp-speed { display: inline-flex; gap: 2px; }
#sgReplayBar .rp-speed .rp-btn { min-width: 30px; padding: 0 6px; }
#sgReplayBar .rp-speed .rp-btn.active { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); }
#sgReplayBar .rp-note { margin-left: auto; color: var(--muted); font-size: 11.5px; }

/* The scrub is the only wide control, so it takes the slack. */
#sgReplayBar .rp-scrub { flex: 1 1 180px; min-width: 120px; accent-color: var(--accent); height: 18px; cursor: pointer; }

/* ── Indicator / type / scale menus ────────────────────────────────────
   An indicator INSTANCE is a row with its own settings and delete affordance,
   not a checkbox, because two EMAs at different lengths is the normal case. */
.sg-ind .ind-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); transition: background var(--dur) var(--spring); }
.sg-ind .ind-row:hover { background: var(--surface-hover); }
.sg-ind .ind-row i { width: 12px; height: 2px; border-radius: 2px; flex: 0 0 auto; }
.sg-ind .ind-row .ind-name { flex: 1 1 auto; font-size: 12.5px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ind .ind-row .ind-sub { font-size: 11px; color: var(--faint); }
.sg-ind .ind-row .icon-btn { width: 22px; height: 22px; flex: 0 0 auto; }
.sg-ind .ind-empty { padding: 10px 8px; font-size: 12px; color: var(--muted); }
.sg-ind .ind-pane { font-size: 10.5px; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.sg-ind .ind-preset { padding: 4px 8px 6px 30px; font-size: 11px; line-height: 1.4; color: var(--muted); }

/* A comparison symbol is a chip with its own series colour, so the legend on
   the canvas and the control that added it agree without a lookup. */
#sgChartBar .cmp-chip { display: inline-flex; align-items: center; gap: 6px; }
#sgChartBar .cmp-chip i { width: 10px; height: 2px; border-radius: 2px; }

/* ── Breakpoints ───────────────────────────────────────────────────────
   Under 900px the tool rail cannot be a column without eating a third of a
   phone's width, so it lies down and scrolls horizontally above the canvas. */
@media (max-width: 900px) {
  .sg-chart-row { flex-direction: column; }
  .sg-tools-rail {
    flex: 0 0 auto; width: 100%; flex-direction: row; gap: 4px; padding: 5px 8px;
    border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .sg-tools-rail::-webkit-scrollbar { display: none; }
  .sg-tools-rail .sep { width: 1px; height: 20px; margin: 0 2px; }
  #sgReplayBar .rp-note { margin-left: 0; flex: 1 1 100%; }
  .cc .cc-panelegend { left: 10px; font-size: 10.5px; max-width: calc(100% - 70px); }
}

/* Print / snapshot: the rail and the replay bar are controls, not chart. */
@media print {
  .sg-tools-rail, #sgReplayBar, #sgChartBar { display: none !important; }
}