/**
 * Cockpit + chart resize tiers, min-size contracts, selective shell transitions, compact chrome.
 * Viewport tier: pitstrike-viewport-layout-owner.js (hysteresis) → data-pitstrike-viewport-tier
 * Pane tier: same owner + chart flush → data-pitstrike-chart-pane-tier
 */

:root {
  --pitstrike-chart-min-h: min(260px, 40vh);
  --pitstrike-grid-center-min: 320px;
}

html[data-pitstrike-viewport-tier='compact'] {
  --pitstrike-chart-min-h: min(220px, 36vh);
  --pitstrike-grid-center-min: 280px;
}

html[data-pitstrike-viewport-tier='standard'] {
  --pitstrike-chart-min-h: min(240px, 38vh);
}

html[data-pitstrike-viewport-tier='wide'],
html[data-pitstrike-viewport-tier='ultra-wide'] {
  --pitstrike-chart-min-h: min(280px, 42vh);
}

/* Chart column: center min tracks viewport tier; right/left still from JS variables */
#layer2-cockpit.layer2 {
  grid-template-columns:
    minmax(0, var(--pitstrike-layout-left-px, 0px))
    minmax(var(--pitstrike-grid-center-min, 320px), 1fr)
    minmax(0, var(--pitstrike-layout-right-px, min(680px, 42vw)));
  min-height: 0;
  min-width: 0;
}

/* Do not set large min-heights on dock price pane / main chart: they raise the 1fr row's minimum
   and push MACD + volume strip below #chart-dock-root (overflow:hidden). Tier vars still apply in popout. */
#chart-dock-root .pitstrike-price-pane #lightweight-chart {
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

/* Smooth shell chrome only when not actively dragging dock grips (no syrup on live drag). */
#layer2-cockpit.layer2:not(.pitstrike-cockpit--resizing) {
  transition: gap 0.16s ease;
}

#layer2-cockpit:not(.pitstrike-cockpit--resizing) .cockpit-left-dock__surface,
#layer2-cockpit:not(.pitstrike-cockpit--resizing) .cockpit-right-dock__surface {
  transition: opacity 0.14s ease;
}

/* Popout / standalone chart host */
.chart-popout-main .layer2__chart,
.chart-popout-main #lightweight-chart {
  min-height: var(--pitstrike-chart-min-h);
  min-width: 0;
}

/* Compact / narrow pane: tighter toolbar, icon-first friendly (labels shrink; avoid chart canvas transitions). */
html[data-pitstrike-viewport-tier='compact'] #chart-toolbar,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar {
  row-gap: 6px;
}

html[data-pitstrike-viewport-tier='compact'] #chart-toolbar .chart-toolbar__cluster-label,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__cluster-label {
  font-size: 8px;
  letter-spacing: 0.06em;
}

html[data-pitstrike-viewport-tier='compact'] #chart-toolbar .chart-toolbar__btn,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__btn {
  font-size: 10px;
  padding: 5px 8px;
}

html[data-pitstrike-viewport-tier='compact'] #chart-toolbar .chart-toolbar__ghost-btn,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__ghost-btn {
  font-size: 10px;
  padding: 5px 8px;
}

html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__title--command {
  font-size: clamp(12px, 2.8vw, 15px);
  min-width: 0;
}

html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__title-symbol,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__title-meta {
  display: inline-block;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

html[data-pitstrike-viewport-tier='compact'] #chart-toolbar .chart-toolbar__cluster-actions,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__cluster-actions {
  flex-wrap: wrap;
  row-gap: 4px;
}

html[data-pitstrike-viewport-tier='compact'] #chart-toolbar .chart-toolbar__field-label,
html[data-pitstrike-chart-pane-tier='narrow'] #chart-toolbar .chart-toolbar__field-label {
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header KPI strip: cap height growth on compact viewport */
html[data-pitstrike-viewport-tier='compact'] .kpi-rail__body {
  max-height: min(120px, 28vh);
  overflow: auto;
}

/* Market + Utility: inline when details open (wide / medium pane); collapsible “More” when compact or narrow pane. */
.chart-toolbar__cluster-row > .chart-toolbar__more-panels[open] {
  display: contents;
}

.chart-toolbar__cluster-row > .chart-toolbar__more-panels[open] > .chart-toolbar__more-panels-summary {
  display: none;
}

.chart-toolbar__cluster-row > .chart-toolbar__more-panels[open] > .chart-toolbar__more-panels-inner {
  display: contents;
}

.chart-toolbar__cluster-row > .chart-toolbar__more-panels:not([open]) {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.chart-toolbar__more-panels-summary {
  list-style: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #8b949e);
  user-select: none;
  margin: 0;
}

.chart-toolbar__more-panels-summary::-webkit-details-marker {
  display: none;
}

.chart-toolbar__more-panels-summary-glyph {
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}

html[data-pitstrike-viewport-tier='compact'] .chart-toolbar__more-panels-summary-label,
html[data-pitstrike-chart-pane-tier='narrow'] .chart-toolbar__more-panels-summary-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chart-toolbar__cluster-row > .chart-toolbar__more-panels:not([open]) > .chart-toolbar__more-panels-inner {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Phone / tablet: respect home indicator; chart pan remains usable (avoid double-scroll on body). */
html[data-pitstrike-shell='phone'] .app-shell,
html[data-pitstrike-shell='tablet'] .app-shell {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Touch shells: contain vertical overscroll on the cockpit grid so momentum does not chain to the page. */
html[data-pitstrike-shell='phone'] #layer2-cockpit.layer2,
html[data-pitstrike-shell='tablet'] #layer2-cockpit.layer2 {
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  #layer2-cockpit:not(.pitstrike-cockpit--resizing) {
    transition: none;
  }
}

/* —— Phone (≤880px): left analysis stack as fixed drawer + backdrop (see cockpit-split-layout.js) —— */
.pitstrike-phone-left-backdrop {
  position: fixed;
  inset: 0;
  z-index: 118;
  background: rgba(5, 8, 12, 0.52);
  touch-action: none;
}

html.pitstrike-phone-cockpit-overlay-open {
  overflow: hidden;
}

@media (max-width: 880px) {
  /* Restore FAB sits on chart edge; stay above canvas so closed-state affordance is tappable. */
  .cockpit-split-restore-fab {
    z-index: 125;
  }

  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='closed'] .layer2__left-sides {
    display: none !important;
  }

  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='expanded'] .layer2__left-sides,
  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='rail'] .layer2__left-sides {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    position: fixed;
    left: env(safe-area-inset-left, 0px);
    top: calc(env(safe-area-inset-top, 0px) + var(--header-height, 56px));
    bottom: env(safe-area-inset-bottom, 0px);
    width: min(92vw, 340px);
    max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    z-index: 120;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='rail'] .layer2__left-sides {
    width: auto;
    max-width: none;
  }

  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='expanded'] .cockpit-left-dock__surface,
  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='rail'] .cockpit-left-dock__surface {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='expanded'] .layer2__left-sides,
  #layer2-cockpit.pitstrike-cockpit--mobile[data-pitstrike-left='rail'] .layer2__left-sides {
    transition: none;
  }
}

/* —— Phone (≤880px): right dock as bottom sheet + backdrop (see cockpit-split-layout.js) —— */
.pitstrike-phone-right-backdrop {
  position: fixed;
  inset: 0;
  z-index: 116;
  background: rgba(5, 8, 12, 0.42);
  touch-action: none;
}

@media (max-width: 880px) {
  #layer2-cockpit.layer2.pitstrike-cockpit--mobile.pitstrike-phone-right-sheet:not([data-pitstrike-right='closed']):not(
      .pitstrike-phone-left-overlay-active
    ) {
    grid-template-rows: minmax(200px, min(72vh, 1fr)) 0px !important;
  }

  #layer2-cockpit.pitstrike-cockpit--mobile:not(.pitstrike-phone-left-overlay-active)[data-pitstrike-right='expanded']
    .layer2__sides.cockpit-right-dock,
  #layer2-cockpit.pitstrike-cockpit--mobile:not(.pitstrike-phone-left-overlay-active)[data-pitstrike-right='rail']
    .layer2__sides.cockpit-right-dock {
    position: fixed;
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    max-height: min(88dvh, 640px);
    max-width: 100%;
    z-index: 130;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.42);
  }

  #layer2-cockpit.pitstrike-cockpit--mobile:not(.pitstrike-phone-left-overlay-active)[data-pitstrike-right='expanded']
    .cockpit-right-dock__surface,
  #layer2-cockpit.pitstrike-cockpit--mobile:not(.pitstrike-phone-left-overlay-active)[data-pitstrike-right='rail']
    .cockpit-right-dock__surface {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}