/* StoxCredit perps trade layout v8: laptop fit (perps.html, #tradeView).
   Layout architecture only. Colors and type are the existing tokens; nothing is shrunk to illegibility.
   Height is viewport-aware: --sc-trade-top (set by the script) is the workspace's offset from the top of the page,
   so the workspace fills the rest of the browser window with 100dvh.
   Selectors reuse the same strings as the older override layers, so this file wins the cascade. */

/* ---------- Compact the stack above the workspace ---------- */
html body #tradeView .tk-strip {
  height: 42px !important;
  min-height: 0 !important;
}
html body #tradeView .tk-strip .tk-item,
html body #tradeView .tk-strip .tk-add {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
html body #tradeView #back {
  margin: 2px 0 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body #tradeView .tk-bar {
  padding: 8px 12px !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
html body #tradeView .tk-bar .trade-head {
  padding: 4px 0 !important;
}

/* ---------- Trade workspace: fills the browser viewport ---------- */
html body #tradeView .trade {
  display: grid !important;
  /* Order column: 360px on laptops, growing to 420px on large screens. */
  grid-template-columns: minmax(0, 1fr) clamp(330px, 24vw, 420px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  height: calc(100dvh - var(--sc-trade-top, 300px) - 10px) !important;
  min-height: 360px !important;
  max-height: none !important;
  margin-top: 6px !important;
  overflow: hidden !important;
}
html body #tradeView .trade-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Chart fills the remaining height of its column. No fixed height and no forced minimum. */
html body #tradeView .trade-left > .panel:first-child {
  flex: 0 0 auto !important;
  height: clamp(420px, calc(100% - 64px), 980px) !important;
  min-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 6px !important;
}
html body #tradeView .trade-left > .panel:first-child #chart.chart {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 160px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
html body #tradeView .trade-left > .panel:first-child #tv.tv,
html body #tradeView .trade-left > .panel:first-child #draw {
  height: 100% !important;
  min-height: 0 !important;
}
/* The chart's size comes only from the layout. Its drawing layers are absolutely positioned,
   so a redraw (live candles, auto-scale) cannot change the chart's height and cause the chart to jump. */
html body #tradeView .trade-left > .panel:first-child #chart.chart {
  position: relative !important;
  flex: 1 1 0 !important;
}
html body #tradeView .trade-left > .panel:first-child #tv.tv,
html body #tradeView .trade-left > .panel:first-child #draw {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
html body #tradeView .trade-left > .panel:first-child .chart-head {
  margin-bottom: 4px !important;
}
html body #tradeView .trade-left > .panel:first-child .pl-bar,
html body #tradeView .trade-left > .panel:first-child .bar {
  margin-bottom: 4px !important;
}
html body #tradeView .trade-left > .panel:first-child .chart-foot {
  margin-top: 2px !important;
}

/* Activity below the chart keeps its own scroll, so it never pushes the chart or order panel away. */
html body #tradeView .trade-left > section.discover {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-top: 8px !important;
}

/* ---------- Order panel: fixed column, internal scroll body, pinned action footer ---------- */
html body #tradeView .trade .panel.op {
  position: static !important;
  top: auto !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body #tradeView section.panel.op > .op-head {
  flex: 0 0 auto !important;
  padding: 12px 14px 8px !important;
  margin: 0 !important;
}
html body #tradeView section.panel.op > .sc-op-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0 14px 8px !important;
  scrollbar-width: thin;
}
html body #tradeView section.panel.op .sc-op-foot {
  flex: 0 0 auto !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px 14px 12px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important;
  background: var(--p, #fff) !important;
}
html body #tradeView section.panel.op .sc-op-foot #submitOrder {
  width: 100% !important;
  margin: 0 !important;
}
html body #tradeView section.panel.op .sc-op-foot #orderWhy {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Compact the form fields without shrinking the text */
html body #tradeView section.panel.op .op-seg {
  margin-top: 6px !important;
}
html body #tradeView section.panel.op .op-field {
  margin-top: 8px !important;
}
html body #tradeView section.panel.op .op-field-head {
  margin-bottom: 4px !important;
}
html body #tradeView section.panel.op .op-input-wrap {
  height: 48px !important;
}
html body #tradeView section.panel.op .op-pct,
html body #tradeView section.panel.op .op-quick {
  margin-top: 6px !important;
}
html body #tradeView section.panel.op .op-hint {
  margin: 4px 0 0 !important;
}

/* Summary rows: tighter, still legible */
html body #tradeView section.panel.op .op-sum {
  margin: 8px 0 0 !important;
}
html body #tradeView section.panel.op .op-sum > div {
  padding: 5px 0 !important;
}

/* Order details disclosure */
html body #tradeView section.panel.op .sc-op-details {
  margin-top: 6px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
html body #tradeView section.panel.op .sc-op-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
html body #tradeView section.panel.op .sc-op-details > summary::-webkit-details-marker { display: none; }
html body #tradeView section.panel.op .sc-op-details > summary::after {
  content: "+";
  font-family: var(--mono);
  opacity: .6;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
html body #tradeView section.panel.op .sc-op-details[open] > summary::after { transform: rotate(45deg); }
html body #tradeView section.panel.op .sc-op-details > summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
html body #tradeView section.panel.op .sc-op-sum-more { margin-top: 0 !important; }

/* Short laptop screens: a tighter form without smaller tap targets or text */
@media (max-height: 820px) and (min-width: 1024px) {
  html body #tradeView .trade {
    gap: 10px !important;
  }
  html body #tradeView section.panel.op .op-input-wrap {
    height: 44px !important;
  }
  html body #tradeView section.panel.op .op-field {
    margin-top: 6px !important;
  }
  html body #tradeView section.panel.op .op-sum > div {
    padding: 4px 0 !important;
  }
  html body #tradeView section.panel.op .sc-op-foot {
    padding: 8px 14px 10px !important;
  }
}

/* ---------- Trade mode (desktop width, trade tab showing): one height source ----------
   The page is a column that exactly fills its window or embedding frame. The tab bar keeps its size,
   the trade area takes the rest. Nothing measures a position or uses a calc() offset, so it cannot go stale. */
html.sc-trade-mode,
html.sc-trade-mode body {
  height: 100% !important;
  overflow: hidden !important;
}
html.sc-trade-mode body {
  display: flex !important;
  flex-direction: column !important;
}
html.sc-trade-mode body > footer.site-foot {
  display: none !important;
}
html.sc-trade-mode body > nav.tabnav {
  flex: none !important;
}
html.sc-trade-mode body > main#tradeView:not([hidden]) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html.sc-trade-mode #tradeView .trade {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Page-scroll layout (desktop): the chart is tall, Portfolio sits below it, and the order column
   stretches to the same height, so Review order is at the bottom of the trade area. The page scrolls. */
html body #tradeView .trade {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-rows: auto !important;
}
html body #tradeView .trade-left {
  height: auto !important;
  overflow: visible !important;
}
html body #tradeView .trade-left > .panel:first-child {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
html body #tradeView .trade-left > .panel:first-child #chart.chart {
  height: 620px !important;
  min-height: 620px !important;
  flex: none !important;
}
html body #tradeView .trade-left > .panel:first-child.tv-fallback #tvWidget {
  height: 620px !important;
  min-height: 620px !important;
}
html body #tradeView .trade .panel.op {
  height: auto !important;
  align-self: start !important;
  overflow: visible !important;
}
/* The order form is only as tall as its content, so Review order sits right under the details.
   No inner scroll: the page scrolls. */
html body #tradeView section.panel.op > .sc-op-body {
  flex: none !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* Side-by-side placement, pinned explicitly. An older rule for widths up to 1100px stacked the order panel
   under the chart and left the second column empty, so the two columns are set here. */
html body #tradeView .trade > .trade-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html body #tradeView .trade > .panel.op {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Pinned layout: the chart takes the remaining height, and Portfolio & activity sits at the bottom
   at its natural size. The left column does not scroll. Only the positions table scrolls, and only
   when it has more rows than its capped height. */
html.sc-trade-mode #tradeView .trade-left {
  overflow: hidden !important;
  height: 100% !important;
}
html.sc-trade-mode #tradeView .trade-left > .panel:first-child {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
html.sc-trade-mode #tradeView .trade-left > .panel:first-child #chart.chart {
  min-height: 140px !important;
}
/* TradingView fallback chart: fills the panel's remaining height instead of its fixed 400px. */
html.sc-trade-mode #tradeView .trade-left > .panel:first-child #tvWidget {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
html.sc-trade-mode #tradeView .trade-left > section.discover {
  flex: 0 0 auto !important;
  padding-bottom: 0 !important;
}
html.sc-trade-mode #tradeView .trade-left > section.discover .table-wrap {
  max-height: clamp(64px, 12dvh, 120px) !important;
  overflow-y: auto !important;
}
/* More height for the chart: the "← All markets" link duplicates the Perps sub-navigation,
   and the wallet label above Portfolio repeats its title. The market ticker strip stays. */
html.sc-trade-mode #tradeView #back {
  display: none !important;
}
html.sc-trade-mode #tradeView .trade-left > section.discover > .label {
  display: none !important;
}

/* Order column fills its grid row, so the body scroll area has real height. */
html body #tradeView .trade > :not(.trade-left) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}

/* Short viewports at 125% zoom (about 614px tall CSS): compact header stack, lower minimums.
   The workspace still fills the viewport; the order body scrolls, and the footer stays pinned. */
@media (max-height: 720px) and (min-width: 1024px) {
  html body #tradeView .tk-bar {
    padding: 6px 12px !important;
  }
  html body #tradeView .tk-bar .trade-head {
    padding: 0 !important;
  }
  html body #tradeView #back {
    margin: 0 0 2px !important;
  }
  html body #tradeView .trade {
    min-height: 250px !important;
    margin-top: 4px !important;
  }
  html body #tradeView .trade-left > .panel:first-child {
    min-height: 380px !important;
    height: clamp(380px, calc(100% - 64px), 980px) !important;
  }
  html body #tradeView .trade-left > .panel:first-child #chart.chart {
    min-height: 120px !important;
  }
  html body #tradeView section.panel.op > .op-head {
    padding: 8px 14px 6px !important;
  }
  html body #tradeView section.panel.op .sc-op-foot {
    padding: 6px 14px 8px !important;
    gap: 4px !important;
  }
  html body #tradeView section.panel.op .sc-op-foot #orderWhy {
    font-size: 11px !important;
  }
}

/* Phones: the trade price must sit inside its card */
@media (max-width: 480px) {
  html body #tradeView .trade-head #tMark.mark {
    font-size: 22px !important;
  }
}

/* Tablet and phone: normal document flow, no nested scrolling */
@media (max-width: 960px) {
  html body #tradeView .trade {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body #tradeView .trade-left {
    height: auto !important;
    overflow: visible !important;
  }
  html body #tradeView .trade-left > .panel:first-child {
    overflow: visible !important;
  }
  html body #tradeView .trade-left > .panel:first-child #chart.chart {
    height: clamp(340px, 62vh, 480px) !important;
    flex: none !important;
  }
  html body #tradeView .trade-left > section.discover {
    max-height: none !important;
  }
  html body #tradeView .trade .panel.op {
    height: auto !important;
    overflow: visible !important;
  }
  html body #tradeView section.panel.op > .sc-op-body {
    overflow: visible !important;
  }
  /* Stacked layout: chart, then the order ticket, then Portfolio & activity.
     The left column's children are laid out directly in the stack so the ticket can sit between them. */
  html body #tradeView .trade-left {
    display: contents !important;
  }
  html body #tradeView .trade > .trade-left,
  html body #tradeView .trade > .panel.op {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html body #tradeView .trade-left > .panel:first-child {
    order: 0 !important;
  }
  html body #tradeView .trade .panel.op {
    order: 1 !important;
  }
  html body #tradeView .trade-left > section.discover {
    order: 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #tradeView section.panel.op .sc-op-details > summary::after { transition: none !important; }
}