/* split.css — the /chart SPLIT VIEW (split.js, design/47): up to 4 cells of the window's coin inside one tab.
   ============================================================================================================
   TWO DOCUMENTS read this file, and every rule is gated so a page that is neither matches nothing:
     THE HOST (a tab document with a split layout): #split-area, which split.js creates only while the layout has
       >= 2 cells, and html[data-split-host] — set by split.js once cell 0's size is known — which shrinks #stage to
       the top-left cell. Cell 0 IS the tab's own chart, so its cell is a transparent placeholder that takes no
       pointer; the panes are opaque iframes; the gaps between cells are the dividers.
     A PANE (html[data-embed="1"][data-split="1"], stamped PRE-PAINT by index.html): the embed page minus its topbar
       — the tab's top bar is the one that acts on the selected cell — plus a hover ⤢ / × corner. The (1,2,x)
       specificity beats embed.css's (1,1,x) whatever the order, so embed.css is untouched.
   The look: one neutral ink (the page's --border / --muted / --fg tokens, so both themes follow), a 1 px --accent
   outline on the selected cell, no glow, no fills beyond the page ground. */

/* ---- the host: the area over the chart area ----
   top = #stage's top (the 48 px bar + the tab strip), left = the docked rail's gutter (+ a docked Volume Profile
   lane, 0 while split — volprofile.js undocks it), right = the right gutter (the dock, the L4 panel), bottom = the
   window. z 14: over #stage's own layers (so the selection outline draws over cell 0's chart), under the rail (15,
   whose tooltips open over the cells), the toasts (20), the topbar and its menus (30+), the Indicators dialog (55)
   and the tab frames (200). The area itself takes no pointer: cell 0's chart is reached THROUGH it. */
.split-area {
  position: fixed;
  top: calc(48px + var(--tabs-h, 0px));
  left: calc(var(--rail-gutter, 0px) + var(--vp-g, 0px));
  right: var(--right-gutter, 0px);
  bottom: 0;
  z-index: 14;
  display: grid;
  gap: 4px;
  pointer-events: none;
}
.split-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
  background: var(--bg);
}
/* Cell 0: #stage's box and nothing else — transparent, never in the pointer's way. */
.split-cell0 { background: transparent; pointer-events: none; overflow: visible; }
.split-cell.split-max { z-index: 2; }
.split-cell.split-off { visibility: hidden; }

/* A pane: its iframe hidden (VISIBILITY, so it lays out at its real size while it boots) behind a quiet label until
   it says ready. */
.split-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: var(--bg);
  visibility: hidden;
}
.split-cell.shown .split-frame { visibility: visible; }
.split-wait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.2px;
  pointer-events: none;
  user-select: none;
}
.split-cell.shown .split-wait { display: none; }
/* A divider drag crosses the iframes: they must not swallow the pointer on the way. */
.split-area.split-dragging .split-frame { pointer-events: none; }
.split-area.split-dragging { cursor: grabbing; }

/* The SELECTED cell: a 1 px accent outline drawn OVER its content (a pane's iframe, cell 0's chart). */
.split-cell.sel::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  pointer-events: none;
  z-index: 3;
}

/* ---- the dividers: 4 px grid items laid over the gap ----
   Placed in the track BEFORE the boundary (split.js: grid-column / grid-row line numbers from split-pure.js
   dividersFor), aligned to its end and shifted one width over it by a relative offset — so it covers exactly the
   4 px gap and spans the cells it separates. One quiet 1 px line in the middle; the ink lifts on hover / drag. */
.split-div {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
}
.split-div::before {
  content: '';
  position: absolute;
  background: var(--border);
  transition: background 0.12s;
}
.split-div-col { justify-self: end; width: 4px; left: 4px; cursor: col-resize; }
.split-div-col::before { top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; }
.split-div-row { align-self: end; height: 4px; top: 4px; cursor: row-resize; }
.split-div-row::before { left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; }
.split-div:hover::before,
.split-div.drag::before { background: var(--muted); }
.split-area[data-max] .split-div { display: none; }

/* ---- cell 0's ⤢ (a pane draws its own, inside its document) ----
   Shown while the pointer is over the tab's chart or the button itself: VISIBILITY, so a hidden button never takes
   a click meant for the price axis under it. */
.split-cbtns {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  z-index: 5;
  pointer-events: auto;
  visibility: hidden;
}
html:has(#stage:hover) .split-cbtns,
.split-cbtns:hover,
.split-cbtns:focus-within { visibility: visible; }
.split-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.split-btn:hover { color: var(--fg); border-color: var(--muted); }
.split-btn.on { color: var(--fg); }
.split-btn:focus-visible { outline: 1px solid var(--fg); outline-offset: -2px; }

/* ---- the host's own chart, sized to cell 0 ----
   !important over every #stage width / height rule (chart.css's base one, the Volume Profile lane's), none of which
   knows about the split. The vars are written BEFORE the attribute, so #stage never reads an unset one. */
html[data-split-host] #stage {
  width: var(--split-w) !important;
  height: var(--split-h) !important;
}
/* A pane maximized: the tab's chart is covered — hidden, but the docked rail inside it keeps acting on the pane. */
html[data-split-max="pane"] #stage { visibility: hidden; }
html[data-split-max="pane"] #toolrail { visibility: visible; }
/* The docked rail spans the whole split area, not just cell 0 (it acts on every cell). */
@media (min-width: 1280px) {
  html[data-split-host][data-rail="dock"] #toolrail {
    bottom: auto;
    height: calc(100vh - 48px - var(--tabs-h, 0px));
  }
}
/* The status toast belongs to cell 0: its bottom-left corner, not the window's. */
html[data-split-host] #status {
  position: fixed;
  left: calc(var(--rail-gutter, 0px) + var(--vp-g, 0px) + 12px);
  top: calc(48px + var(--tabs-h, 0px) + var(--split-h, 0px) - 12px);
  bottom: auto;
  transform: translateY(-100%);
}

/* ---- the ⊞ button + its menu (layout thumbnails, "Sync crosshair") ---- */
#tool-split.open { color: var(--fg); background: var(--panel-2); border-color: var(--border); }
#tool-split.open .tip { display: none; }
.split-menu {
  position: fixed;
  z-index: 60;
  width: 224px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  color: var(--fg);
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="light"] .split-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.split-menu-head { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 8px; }
.split-menu-title { font-weight: 700; }
.split-menu-note { color: var(--muted); font-size: 10.5px; }
.split-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.split-thumb {
  height: 34px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.split-thumb:hover { border-color: var(--muted); color: var(--fg); }
.split-thumb.on { border-color: var(--fg); color: var(--fg); }
.split-thumb:focus-visible { outline: 1px solid var(--fg); outline-offset: 1px; }
.split-mini { display: grid; width: 100%; height: 100%; gap: 2px; pointer-events: none; }
.split-mini > i { display: block; border: 1px solid currentColor; border-radius: 1.5px; opacity: 0.75; }
.split-mini > i.c0 { background: var(--hover); }
.split-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.split-sync input { margin: 0; accent-color: var(--accent); }

/* ---- a PANE (the embed page inside a split tab) ----
   No topbar to see: the tab's is the one that acts on this cell (the TF row, Indicators, the rail — split.js). The
   price legend's row 1 stays in the chart (panes-legend.js), so every cell reads "BTC · 15m O H L C". The bar is
   COLLAPSED rather than display:none, because the mid-draw hint (#tool-hint, a .tb-hint inside it) must still float
   over the pane while a tool the tab's rail armed here is drawing ("Click-drag to draw"): the whole bar is
   invisible chrome of 0 px (VISIBILITY, so nothing in it takes a pointer or the focus), the tool cluster laid out at
   0 px under it, and only the hint made visible again — embed.css already floats it 8 px under the cluster, centred.
   Nothing in the bar is reachable: #tool-bookmap and #tool-vbars would navigate the pane with location.href (a
   top-level history entry, the bearer in the iframe URL), so they are gone outright, and split.js swallows the D key. */
html[data-embed="1"][data-split="1"] #topbar {
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  gap: 0;
  overflow: visible;
  visibility: hidden;
}
html[data-embed="1"][data-split="1"] .tb-tools {
  display: flex;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
html[data-embed="1"][data-split="1"] .tb-hint { visibility: visible; }
html[data-embed="1"][data-split="1"] #tool-bookmap,
html[data-embed="1"][data-split="1"] #tool-vbars { display: none; }
html[data-embed="1"][data-split="1"] #stage { height: 100%; }
/* The corner ⤢ / ×, while the pointer is over the pane: VISIBILITY, never an invisible button over the axis. Under
   the Indicators dialog (55). */
.split-pbtns { display: none; }
html[data-embed="1"][data-split="1"] .split-pbtns {
  display: flex;
  position: fixed;
  top: 4px;
  right: 4px;
  gap: 4px;
  z-index: 50;
  visibility: hidden;
}
html[data-embed="1"][data-split="1"]:hover .split-pbtns { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .split-div::before { transition: none; }
}