/* Orderflow evidence order: price, funding/liquidations, then participation and execution. */
#page-orderflow .of4-workspace.of4-layout-feedback .of4-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "price price price price price price price price price price price price"
    "fund fund fund fund liq liq liq liq liq liq liq liq"
    "cvd cvd cvd cvd cvd cvd oi oi oi oi oi oi"
    "pos pos pos pos pos pos vpin vpin vpin vpin vpin vpin"
    "book book book book book book book book book book book book";
  gap: 0;
}
#page-orderflow .of4-layout-feedback .of4-grid > [data-widget] { min-width: 0; }
#page-orderflow .of4-layout-feedback [data-widget="price"] { grid-area: price; }
#page-orderflow .of4-layout-feedback [data-widget="funding"] { grid-area: fund; min-height: 320px; border-right: 1px solid var(--of-line); }
#page-orderflow .of4-layout-feedback [data-widget="liquidations"] { grid-area: liq; min-height: 320px; }
#page-orderflow .of4-layout-feedback [data-widget="cvd"] { grid-area: cvd; border-right: 1px solid var(--of-line); }
#page-orderflow .of4-layout-feedback [data-widget="oi"] { grid-area: oi; border-right: 1px solid var(--of-line); }
#page-orderflow .of4-layout-feedback [data-widget="positioning"] { grid-area: pos; }
#page-orderflow .of4-layout-feedback [data-widget="book"] { grid-area: book; border-right: 1px solid var(--of-line); }
#page-orderflow .of4-layout-feedback [data-widget="vpin"] { grid-area: vpin; }
#page-orderflow .of4-layout-feedback .of4-market-stack,
#page-orderflow .of4-layout-feedback .of4-split-panes,
#page-orderflow .of4-layout-feedback .of4-monitor { display: contents; }
#page-orderflow .of4-layout-feedback [data-widget="funding"] .of4-chart-small { height: 240px; }
#page-orderflow .of4-layout-feedback [data-widget="liquidations"] .of4-chart-liq { height: 240px; }
#page-orderflow .of4-layout-feedback .of4-funding .of4-pane-head { display: flex; flex-wrap: wrap; gap: 6px; }
#page-orderflow .of4-layout-feedback .of4-funding .of4-title { flex-basis: 100%; }
#page-orderflow .of4-layout-feedback .of4-funding #of4-funding-context { white-space: normal; overflow: visible; text-overflow: clip; }
#page-orderflow .of4-layout-feedback .of4-funding .of4-metric { width: 100%; justify-content: flex-start; }
#page-orderflow .o4funding-key { font: 600 11px ui-monospace, monospace; }

/* A measured viewport tooltip is placed above/below the active plot by JS. */
#page-orderflow .of4-hover-tip[data-placement="outside-plot"] {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  overflow: auto;
  pointer-events: auto;
  transform: none;
}
#page-orderflow .of4-hover-tip[data-placement="outside-plot"] .of4-hover-row { gap: 16px; }
#page-orderflow .of4-hover-tip[data-placement="outside-plot"] .of4-hover-note { white-space: normal; }

#of4-deep-book { padding: 14px; border-bottom: 1px solid var(--of-line); }
.of4-depth-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 12px; }
.of4-depth-controls > span, .of4-depth-note, .of4-depth-status { color: var(--cf-ink-2); font-size: 11px; line-height: 1.5; }
.of4-depth-controls select { color: var(--cf-ink); background: var(--of-surface); border: 1px solid var(--of-line); padding: 5px 8px; border-radius: 4px; }
.of4-depth-markets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.of4-depth-market { padding: 0 0 12px; border-bottom: 1px solid var(--of-line); min-width: 0; }
.of4-depth-market:last-child { border-bottom: 0; padding-bottom: 0; }
.of4-depth-title, .of4-depth-amounts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.of4-depth-title b { font-size: 12px; }
.of4-depth-skew { font: 600 13px ui-monospace, monospace; }
.of4-depth-basis { color: var(--cf-ink-2); font-size: 11px; margin-bottom: 10px; line-height: 1.5; }
.of4-depth-amounts { font: 12px ui-monospace, monospace; }
.of4-depth-amounts em { font-style: normal; font-weight: 700; margin-right: 8px; }
.of4-depth-amounts b { font-weight: 400; }
#of4-deep-book .bid { color: var(--cf-ink-up); }
#of4-deep-book .ask { color: var(--cf-ink-dn); }
.of4-depth-meter { height: 16px; position: relative; background: var(--cf-red-2); margin: 7px 0 22px; }
.of4-depth-meter i { display: block; height: 100%; background: var(--cf-green-2); border-right: 1px solid var(--of-surface); box-sizing: border-box; }
.of4-depth-meter::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px dashed var(--cf-ink); }
.of4-depth-mid { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); color: var(--cf-ink-2); font: 10px ui-monospace, monospace; }
.of4-depth-note { margin-top: 10px; }
@media (max-width: 600px) { .of4-depth-markets { grid-template-columns: 1fr; } }

@media (max-width: 859px) {
  #page-orderflow .of4-workspace.of4-layout-feedback .of4-grid { display: flex; flex-direction: column; }
  #page-orderflow .of4-layout-feedback [data-widget] { min-height: 0; border-right: 0; border-bottom: 1px solid var(--of-line); }
  #page-orderflow .of4-layout-feedback [data-widget="price"] { order: 1; }
  #page-orderflow .of4-layout-feedback [data-widget="funding"] { order: 2; }
  #page-orderflow .of4-layout-feedback [data-widget="liquidations"] { order: 3; }
  #page-orderflow .of4-layout-feedback [data-widget="cvd"] { order: 4; }
  #page-orderflow .of4-layout-feedback [data-widget="oi"] { order: 5; }
  #page-orderflow .of4-layout-feedback [data-widget="positioning"] { order: 6; }
  #page-orderflow .of4-layout-feedback [data-widget="book"] { order: 7; }
  #page-orderflow .of4-layout-feedback [data-widget="vpin"] { order: 8; }
  #page-orderflow .of4-layout-feedback [data-widget="funding"] .of4-chart-small { height: 188px; }
  #page-orderflow .of4-layout-feedback [data-widget="liquidations"] .of4-chart-liq { height: 154px; }
  #page-orderflow .of4-layout-feedback [data-widget]:last-child { border-bottom: 0; }
}