/* Trading price chart: the toolbar (interval and chart style menus), the chart surface
   drawn by scripts/chart/engine.js, and the footer (layer toggles, then a second toolbar
   with the time zone, price scales, theater mode and Maximize). The surface is one canvas,
   which draws its own legends and buttons, over transparent hit regions for the plot, the
   price and time axes and the volume divider; nothing is layered above the canvas except
   the empty state. Theater mode gives the chart its own row on the Trading grid, and
   Minimize folds it to a single Show chart row. Loads after board.css. */

.trade-chart-panel { display: flex; flex-direction: column; }
.trade-chart-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 44px; margin-bottom: 8px; border-bottom: 1px solid var(--terminal-rule); }

/* Toolbars (scripts/chart/toolbar.js): rows of 32px ghost tools with hairlines between groups.
   Menus show their current setting (the interval as mono text, the chart style as an icon) beside
   a caret; a choice shows its current option, as wide as its longest; a toggle reads in mint while
   pressed. The first tool lines up with the chart edge and its text with the legend. */
.chart-toolbar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.chart-toolbar-rule { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--rule-strong); }
.chart-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 7px 0 8px;
  border: 0; border-radius: 4px; background: transparent; color: var(--text-soft); cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out;
}
.chart-tool:hover, .chart-tool[aria-expanded="true"] { background: var(--terminal-raised); color: var(--text); }
.chart-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chart-tool:not([aria-haspopup]) { padding: 0 8px; }
.chart-tool.chart-tool--icon { width: 32px; padding: 0; }
.chart-tool[aria-pressed="true"] { color: var(--positive); }
.chart-tool[hidden] { display: none; }
.chart-tool-value { min-width: calc(var(--tool-ch, 3) * 1ch); font: 500 .8125rem/1 var(--fontfam-term); text-align: center; }
.chart-tool svg, .chart-menu svg { flex: none; }
.chart-tool-caret { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-tool:hover .chart-tool-caret, .chart-tool[aria-expanded="true"] .chart-tool-caret { stroke: currentColor; }
.chart-tool[aria-expanded="true"] .chart-tool-caret { transform: rotate(180deg); }
/* Chart-style icons: 18px line drawings at the shell's 1.5px stroke; solid bodies and the area wash fill. */
.chart-tool-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-tool-icon .is-filled { fill: currentColor; }
.chart-tool-icon .is-wash { fill: currentColor; fill-opacity: .22; stroke: none; }

/* Tool menus open in the top layer, placed under their tool by the script. Each choice has a mint
   check slot, an optional icon and its name; the current choice reads in full text colour. */
.chart-menu {
  position: fixed; inset: auto; box-sizing: border-box; min-width: 176px; max-width: calc(100vw - 16px); margin: 0; padding: 4px; overflow-y: auto;
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--terminal-control); color: var(--text-soft); box-shadow: 0 16px 40px rgb(0 0 0 / .55);
}
/* No backdrop: a transparent full-window layer would shade HiDPI screens while the menu is open. */
.chart-menu::backdrop { display: none; }
.chart-menu:popover-open { opacity: 1; transform: none; transition: opacity 120ms ease-out, transform 180ms cubic-bezier(.16, 1, .3, 1); }
@starting-style {
  .chart-menu:popover-open { opacity: 0; transform: translateY(-4px); }
  .chart-menu[data-side="top"]:popover-open { transform: translateY(4px); }
}
.chart-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 32px; padding: 0 16px 0 8px; border: 0; border-radius: 3px;
  background: transparent; color: inherit; font: inherit; font-size: .8125rem; line-height: 1.25; text-align: left; white-space: nowrap; cursor: pointer;
}
.chart-menu-item:hover { background: var(--terminal-raised); color: var(--text); }
.chart-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--terminal-raised); color: var(--text); }
.chart-menu-item[aria-checked="true"] { color: var(--text); }
.chart-menu-check { fill: none; stroke: var(--positive); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.chart-menu-item[aria-checked="true"] .chart-menu-check { visibility: visible; }
.chart-menu-rule { height: 1px; margin: 4px 0; background: var(--rule-strong); }

/* Layer toggles: the volume pane (bars), the wallet's order levels (a dash) and its fills (buy/sell triangles). */
.trade-chart-legend { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -8px; color: var(--text-muted); font-size: .75rem; }
.trade-chart-layer {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; transition: color 140ms ease-out, background-color 140ms ease-out;
}
.trade-chart-layer--levels::before { content: ''; width: 14px; border-top: 1px dashed currentColor; }
.trade-chart-layer svg { flex: none; fill: currentColor; }
.trade-chart-layer:hover { color: var(--text); background: var(--terminal-raised); }
.trade-chart-layer:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* A hidden layer reads as switched off: dimmed and struck through, its glyph faded. */
.trade-chart-layer[aria-pressed="false"] { color: var(--text-muted); opacity: .55; text-decoration: line-through; }
.trade-chart-layer[aria-pressed="false"]::before, .trade-chart-layer[aria-pressed="false"] svg { opacity: .5; }
.trade-chart-layer[aria-pressed="false"]:hover { opacity: .85; }

.trade-chart-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.trade-chart-controls { margin-left: auto; }

/* The chart surface. */
.trade-chart-body { position: relative; flex: none; height: clamp(300px, 42vh, 480px); overflow: clip; user-select: none; -webkit-user-select: none; }
.chart-host > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.chart-hit { position: absolute; touch-action: none; }
.chart-hit-plot { cursor: crosshair; touch-action: pan-y; }
.chart-hit-plot:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.chart-host.is-panning .chart-hit-plot { cursor: grabbing; }
.chart-hit-price { cursor: ns-resize; }
.chart-hit-time { cursor: ew-resize; }
.chart-divider { cursor: row-resize; }
.chart-divider[hidden] { display: none; }
.chart-divider:focus-visible { outline: none; background: linear-gradient(transparent 2px, var(--focus) 2px, var(--focus) 5px, transparent 5px); }

.trade-chart-empty { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; background: var(--ground-fill); color: var(--text-muted); font-size: .8125rem; }
.trade-chart-empty[hidden] { display: none; }

/* Theater (tablets and up): the chart leaves its column for its own full-width row under the
   ticker tape, and the book, orders and ticket move to the row below. The row is at least the
   screen left between the sticky header and the rail once the market bar and tape are placed, so
   they and the chart fill the first screen as the landing board does; --chart-theater-top is the
   market bar and tape's height, measured by tradeChart.js. The row keeps its size while the chart
   is maximized, so the page behind keeps its length and scroll position. The chart never gets
   shorter than its usual height. Phones already stack the chart under the tape at full width. */
@media (min-width: 761px) {
  .main-layout:not(.main-layout--page):has(> #trade-chart-panel.is-theater:not(.is-minimized)) {
    --chart-theater-height: calc(100svh - var(--aera-sticky-height, 54px) - var(--aera-trading-nav-height, 0px) - var(--status-h, 32px) - var(--chart-theater-top, 0px) - 1px);
    grid-template-rows: auto minmax(var(--chart-theater-height), auto) minmax(0, 1fr);
  }
  /* The footer clears the page's bottom scroll padding (the rail plus 16px for Recent activity), so
     focusing its tools does not nudge the page. */
  .main-layout:not(.main-layout--page):has(> #trade-chart-panel.is-theater:not(.is-minimized)) > .trade-chart-panel { grid-column: 1 / -1; grid-row: 2; padding-bottom: 16px; }
  .main-layout:not(.main-layout--page):has(> #trade-chart-panel.is-theater:not(.is-minimized)) > :is(.market-stack, .orders-panel, .trade-panel) { grid-row: 3; }
  #trade-chart-panel.is-theater .trade-chart-body { flex: 1 0 auto; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .main-layout:not(.main-layout--page):has(> #trade-chart-panel.is-theater:not(.is-minimized)) { grid-template-rows: auto minmax(var(--chart-theater-height), auto) auto auto; }
  .main-layout:not(.main-layout--page):has(> #trade-chart-panel.is-theater:not(.is-minimized)) > .orders-panel { grid-row: 4; }
}

/* Minimized: the chart folds to one 44px row in its place (above Your orders beside the book and
   ticket, under the tape on phones). The row is a single button in the column-head voice, like
   Daily stats: the chart's icon and name, then Show chart and a caret at the right. Theater mode
   waits while the chart is folded. */
.trade-chart-expand { display: none; }
#trade-chart-panel.is-minimized { padding: 0; }
#trade-chart-panel.is-minimized > :not(.trade-chart-expand) { display: none; }
#trade-chart-panel.is-minimized > .trade-chart-expand {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 20px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--text-soft); font: var(--colhead); letter-spacing: .06em; text-transform: uppercase;
  text-align: left; cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out;
}
.trade-chart-expand .chart-tool-icon { color: var(--text-muted); }
.trade-chart-expand-action { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-muted); }
.trade-chart-expand-action svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trade-chart-expand:hover { background: var(--terminal-raised); color: var(--text); }
.trade-chart-expand:hover :is(.chart-tool-icon, .trade-chart-expand-action) { color: var(--text); }
.trade-chart-expand:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Maximized: the panel covers the window (the screen, in browser full screen) above the page,
   header and rail and below dialogs (the modal backdrop is 50), and the page does not scroll
   behind it; the page's scroll padding (room for the header and Recent activity) is dropped so
   focusing a footer control does not scroll the page underneath. The chart takes the height
   the toolbar and footer leave. */
#trade-chart-panel.is-maximized {
  position: fixed; inset: 0; z-index: 45; box-sizing: border-box; margin: 0;
  padding: max(4px, env(safe-area-inset-top)) max(var(--pane-x, 20px), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(var(--pane-x, 20px), env(safe-area-inset-left));
}
#trade-chart-panel.is-maximized .trade-chart-body { flex: 1 1 auto; height: auto; min-height: 0; }
#trade-chart-panel.is-maximized .chart-hit-plot { touch-action: none; }
:root:has(#trade-chart-panel.is-maximized) { overflow: hidden; scroll-padding: 0; }

@media (max-width: 760px), (pointer: coarse) {
  .trade-chart-layer { min-height: 40px; min-width: 40px; }
  .chart-tool, .chart-tool.chart-tool--icon { min-width: 44px; height: 40px; }
  .chart-menu-item { min-height: 44px; }
}
@media (max-width: 760px) {
  #trade-chart-panel.is-minimized > .trade-chart-expand { padding-inline: var(--pane-x); }
}
@media (max-width: 640px) {
  .trade-chart-head { gap: 6px; padding-block: 2px; }
  .trade-chart-body { height: clamp(280px, 52vh, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .trade-chart-layer, .chart-tool, .chart-menu:popover-open, .trade-chart-expand { transition: none; }
}