/* Pane legends (design/41 Phase 4; panes-legend.js) — TradingView-style legends + pane buttons.
   Theme through chart.css's variables only, so dark and light come for free. Every legend root is
   pointer-transparent and only its ROW (and the pane toolbar) catch the pointer, so a drag that starts
   beside a legend still pans the chart. z 6 = above #draw-overlay (5), below #toolrail (15). */

/* ---- a sub-pane's legend: top-left of the pane's own <td> ---- */
.plg {
  position: absolute;
  /* the row pads 4 px, so the root sits 4 px left of where the TEXT starts (--plg-left) */
  left: calc(var(--plg-left, 8px) - 4px);
  top: 4px;
  z-index: 6;
  max-width: calc(100% - var(--plg-left, 8px) - 120px);
  pointer-events: none;
  color: var(--fg);
  font: 500 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.plg-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: auto;
  /* A PERMANENT backplate (review P1-5): a halo alone lost the text over a zero line, a histogram slab or
     a SuperTrend band. 70% of the page background dims what is under a row, never hides it. */
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  text-shadow: 0 0 2px var(--bg);
}
.plg-row:hover,
.plg.open .plg-row,
#ind-chips.lg0 .plg-row.open {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  text-shadow: none;
}
.plg-name { font-weight: 600; color: var(--fg); cursor: default; }
.plg-params { color: var(--muted); }
.plg-params[hidden] { display: none; }
.plg-vals { display: inline-flex; gap: 6px; min-width: 0; overflow: hidden; }
.plg-v { color: var(--fg); }
.plg-v:empty { display: none; }

/* buttons: only on hover (row) / focus / a tap-opened row — never taking room until then */
.plg-btns { display: none; align-items: center; gap: 1px; margin-left: 2px; }
.plg-row:hover > .plg-btns,
.plg-row:focus-within > .plg-btns,
.plg.open .plg-btns,
.plg-row.open > .plg-btns { display: inline-flex; }
.plg-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-shadow: none;
}
.plg-b:hover { color: var(--fg); background: var(--hover); }
.plg-b[data-act="x"]:hover, .plg-b[data-act="x-all"]:hover { color: var(--neg); }
.plg-b svg { width: 13px; height: 13px; display: block; pointer-events: none; }
.plg-b:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

/* A COLLAPSED pane's row (review P2-15): led by ▸ and tinted, so it never reads as an ordinary legend;
   ▸ expands a pane the user collapsed and maximizes one folded for room. */
.plg-exp { display: none; font-size: 11px; line-height: 1; }
.plg[data-state="collapsed"] .plg-exp { display: inline-flex; color: var(--fg); margin: 0 -2px 0 -3px; }
.plg[data-state="collapsed"] .plg-row {
  background: color-mix(in srgb, var(--accent) 14%, color-mix(in srgb, var(--bg) 80%, transparent));
}
.plg[data-state="collapsed"] .plg-name { color: var(--muted); }

/* the GHOST of an eye-hidden indicator: its name struck through, the eye always offered */
.plg[data-state="hidden"] .plg-name,
#ind-chips.lg0 .lg0-ind.is-hidden .plg-name { color: var(--muted); text-decoration: line-through; }
.plg[data-state="hidden"] .plg-btns { display: inline-flex; }
.plg[data-state="hidden"] .plg-b[data-act="eye"] { color: var(--fg); }

/* ---- the pane toolbar: top-right of the pane, only while the pointer is on the legend row or the pane's
   top 24 px (td.plg-top, panes-legend.js) — never on every hover of the pane (review P2-15) ---- */
.plg-pbar {
  position: absolute;
  right: 8px;
  top: 3px;
  z-index: 6;
  display: flex;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.plg-pbar[hidden] { display: none; }
.plg-pbar .plg-b { width: 16px; height: 16px; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.plg-pbar .plg-b svg { width: 12px; height: 12px; }
.plg-pbar .plg-b:hover { color: var(--fg); }
td.plg-top > .plg-pbar,
.plg:hover ~ .plg-pbar,
.plg-pbar:hover,
.plg-pbar:focus-within,
.plg-pbar.open { opacity: 1; pointer-events: auto; }

/* a collapsed pane is its legend row: its canvases (series, axis) are not drawn */
#chart tr.plg-collapsed canvas { visibility: hidden; }

/* ---- the price-pane legend: #ind-chips (chart.css positions it; this turns the chips into rows) ---- */
#ind-chips.lg0 {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  max-width: calc(100% - 96px);
  color: var(--fg);
  font: 500 11px/17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
#ind-chips.lg0 { margin-left: -4px; } /* the rows pad 4 px: the text starts at the chips' old left */
/* Never past pane 0 (review P0-2): panes-legend.js sets max-height = pane 0 - its top - 8 px and renders
   only the rows that fit, then "+N ▸"; a click on it opens every row, the list scrolling inside that cap
   (--lg0-list-max) above the corner panels until the pointer leaves the legend. */
#ind-chips.lg0 { overflow: hidden; }
#ind-chips.lg0.lg0-open { z-index: 8; }
#ind-chips.lg0.lg0-open .lg0-list {
  max-height: var(--lg0-list-max, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.lg0-ohlc { font-size: 12px; line-height: 18px; }
.lg0-ohlc .lg0-sym { font-weight: 700; margin-right: 2px; }
.lg0-vals { gap: 7px; }
.lg0-vals[hidden] { display: none; }
.lg0-part { display: inline-flex; gap: 2px; }
.lg0-part[hidden] { display: none; }
.lg0-lab { color: var(--muted); }
.lg0-fold { width: 16px; height: 16px; margin-right: -2px; }
.lg0-fold[hidden] { display: none; }
.lg0-fold svg { transition: transform 0.12s ease; }
.lg0-fold.is-folded svg { transform: rotate(-90deg); }
.lg0-list { display: flex; flex-direction: column; align-items: flex-start; }
.lg0-more { color: var(--muted); cursor: pointer; font-size: 10.5px; }
.lg0-more[hidden] { display: none; }
.lg0-more:hover { color: var(--fg); }
.lg0-acts { display: inline-flex; gap: 2px; }
.lg0-acts[hidden] { display: none; }
.lg0-acts .ind-chip-act { margin: 0; padding: 0 6px; font-size: 10px; line-height: 15px; }
.lg0-popped .plg-name { color: var(--muted); }
.lg0-eye { color: var(--fg); }

/* a sub-pane is maximized: pane 0 is one legend row, and the price-pane chrome steps aside */
#stage.lg-price-collapsed #ind-chips.lg0 { top: 3px; }
#stage.lg-price-collapsed #ind-chips.lg0 .lg0-list,
#stage.lg-price-collapsed #ind-chips.lg0 .lg0-more,
#stage.lg-price-collapsed #setup-ribbon,
#stage.lg-price-collapsed #msbias-panel,
#stage.lg-price-collapsed #onebox-panel,
#stage.lg-price-collapsed .jfx-stats-toggle { display: none !important; }

/* ---- MAXIMIZE (review2 #12): every other row FOLDS to 2 px (panes.js) and ONE carries the chip strip ---- */
/* a folded row shows nothing of its own — no legend, no toolbar (its canvases are hidden as a collapsed row's) */
#chart tr.plg-folded .plg,
#chart tr.plg-folded .plg-pbar { display: none !important; }
/* the separator between two folded rows: no line (a stack of them read as hatching) and no drag handle */
#chart tr.plg-sep-folded > td { background: transparent !important; }
#chart tr.plg-sep-folded > td > div { display: none !important; }
/* the candles folded too (a sub-pane is maximized): the price legend steps aside — they are a chip */
#stage.lg-price-folded #ind-chips { display: none !important; }
.plg-strip {
  position: absolute;
  left: calc(var(--plg-left, 8px) - 4px);
  right: 8px;
  top: 0;
  height: 22px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--fg);
  font: 500 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.plg-strip-list { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.plg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}
.plg-chip:hover { background: var(--hover); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.plg-chip:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.plg-chip-name { font-weight: 600; flex: none; }
.plg-chip-v { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.plg-chip-v:empty { display: none; }
.plg-strip-restore { flex: none; margin-left: auto; }
html[data-embed="1"] .plg-strip { font-size: 10.5px; }

/* Bookmap mode paints a full-colour heatmap under the price legend: the halo alone does not carry it. */
body.bookmap #ind-chips.lg0 .plg-row { background: color-mix(in srgb, var(--bg) 72%, transparent); text-shadow: none; }

/* ---- touch (?mobile=1): a tap reveals a row's buttons; 32 px targets ---- */
body.mobile .plg { font-size: 11.5px; }
body.mobile .plg-b { width: 32px; height: 32px; }
body.mobile .plg-b svg { width: 16px; height: 16px; }
body.mobile .plg-pbar { top: 26px; } /* under the tapped row, never over its own eye · gear · ✕ */
body.mobile .plg-row:hover > .plg-btns { display: none; } /* a tap's sticky :hover must not open it */
body.mobile .plg.open .plg-btns,
body.mobile .plg-row.open > .plg-btns { display: inline-flex; }
body.mobile td.plg-top > .plg-pbar,
body.mobile .plg:hover ~ .plg-pbar { opacity: 0; pointer-events: none; } /* a tap opens it (.open), a sticky :hover never */
body.mobile .plg-pbar.open { opacity: 1; pointer-events: auto; }
body.mobile .plg { max-width: calc(100% - var(--plg-left, 8px) - 8px); }
body.mobile #ind-chips.lg0 { max-width: calc(100% - 70px); }
/* a phone has room for the close and the change on one line: O / H / L stay a desktop read */
body.mobile .lg0-o, body.mobile .lg0-h, body.mobile .lg0-l { display: none; }
body.mobile .lg0-ohlc { flex-wrap: wrap; white-space: normal; }
body.mobile .lg0-vals { flex-wrap: wrap; row-gap: 0; }

/* ---- a /grid pane (?embed=1): small but a mouse surface ---- */
html[data-embed="1"] .plg,
html[data-embed="1"] #ind-chips.lg0 { font-size: 10.5px; line-height: 15px; }
html[data-embed="1"] .lg0-ohlc { font-size: 10.5px; line-height: 16px; }
html[data-embed="1"] .plg-b { width: 20px; height: 20px; }