/*
 * Pro terminal layout (connected mode): the application shell (top bar, survival rail, grid, status bar), the
 * resizable separators, the order book / trades column and its tabs, the account menu, dialogs. Desk (>= 1280 px):
 * a fixed screen-high grid; tablet (760-1279 px): chart on top, book | trades | ticket below; phone (< 760 px): one
 * column. Tokens and components: style.css; panels of the terminal: terminal.css; data panels: pro-*.css.
 */

/* ---------- application shell ---------- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
body[data-mode="live"] .layout { flex: 1 1 auto; min-height: 0; min-width: 0; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 32px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.panel-tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pane-msg { padding: 18px 12px; color: var(--dim); font-size: 12px; text-align: center; }

/* ---------- top bar: tools, language, account menu ---------- */
.top-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.page-terminal .lang-menu { display: none; }
.page-terminal .menu-btn { margin-left: 0; }
body[data-mode="live"].page-terminal .menu-btn {
  display: inline-flex; align-items: center; gap: 8px; width: auto; height: 34px; padding: 0 10px 0 4px;
  font: 600 12.5px var(--font-sans); color: var(--text);
}
.menu-ico { display: none; }
.menu-avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; color: var(--acc-ink); background: var(--acc);
}
.menu-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-caret { color: var(--dim); transition: transform var(--t-fast); }
.menu-btn[aria-expanded="true"] .menu-caret { transform: rotate(180deg); }
body[data-mode="live"].page-terminal .userbar {
  position: absolute; right: 12px; top: calc(100% + 4px); z-index: 140; display: none;
  flex-direction: column; align-items: stretch; gap: 6px; min-width: 230px; padding: 8px; margin: 0;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-pop);
}
body[data-mode="live"].page-terminal .userbar.open { display: flex; }
.page-terminal .userbar .btn { justify-content: flex-start; }
#settingsBtn[aria-expanded="true"] { color: var(--text); background: var(--surface-3); }

/* ---------- resizable separators ---------- */
.splitter { position: relative; z-index: 3; touch-action: none; outline: none; }
.sp-v { cursor: col-resize; }
.sp-h { cursor: row-resize; }
.splitter::after {
  content: ""; position: absolute; border-radius: 2px; background: var(--acc); opacity: 0;
  transition: opacity var(--t-fast);
}
.sp-v::after { top: 6px; bottom: 6px; left: 2px; width: 2px; }
.sp-h::after { left: 6px; right: 6px; top: 2px; height: 2px; }
.splitter:focus-visible::after, .splitter.dragging::after { opacity: 1; }
body.resizing { user-select: none; }
body.resizing.resize-v, body.resizing.resize-v * { cursor: col-resize !important; }
body.resizing.resize-h, body.resizing.resize-h * { cursor: row-resize !important; }
@media (hover: hover) {
  .splitter:hover::after { opacity: 0.55; }
}

/* ---------- order book and trades column ---------- */
.bookcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.col-tabs { display: none; gap: 2px; padding: 2px; margin-bottom: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; }
.col-tab {
  appearance: none; flex: 1; min-height: 28px; cursor: pointer; border: 0; border-radius: 7px;
  font: 600 12px var(--font-sans); color: var(--mute); background: transparent;
}
.col-tab[aria-selected="true"] { color: var(--text); background: var(--surface-4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
@media (hover: hover) {
  .col-tab:hover { color: var(--text); }
}
.ob-panel, .tt-panel { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.ob-panel { flex: 1 1 0; }
.tt-panel { flex: 0 0 calc(var(--trades-frac, 0.42) * 100% - 3px); }
#spTrades { flex: 0 0 6px; }
.layout[data-arr="tabs"] .col-tabs { display: flex; }
.layout[data-arr="tabs"] #spTrades { display: none; }
.layout[data-arr="tabs"] .tt-panel { flex: 1 1 0; }
.layout[data-arr="tabs"] .bookcol[data-tab="book"] .tt-panel,
.layout[data-arr="tabs"] .bookcol[data-tab="trades"] .ob-panel { display: none; }
.layout[data-arr="side"] .bookcol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.layout[data-arr="side"] #spTrades { display: none; }

/* ---------- chart toolbar: compact on the pro desk, indicators in a dropdown ---------- */
.ind-group { position: relative; }
.ind-btn { display: none; align-items: center; gap: 6px; }
.ind-count:not(:empty) {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; color: var(--acc-ink); background: var(--acc);
}
#fullscreenBtn .fs-close, #fullscreenBtn[aria-pressed="true"] .fs-open { display: none; }
#fullscreenBtn[aria-pressed="true"] .fs-close { display: inline; }
body[data-mode="live"] .ind-btn { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); }
body[data-mode="live"] #inds {
  position: fixed; z-index: 160; display: none; flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 150px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
body[data-mode="live"] .ind-group.open #inds { display: flex; }
body[data-mode="live"] #inds .chip { justify-content: flex-start; text-align: left; }
body[data-mode="live"] .toolbar { gap: 6px; padding: 6px 8px; }
body[data-mode="live"] .toolbar .chip { padding: 0 9px; }
body[data-mode="live"] .toolbar .icon-chip { width: 30px; padding: 0; }
body[data-mode="live"] .ind-group.open .ind-btn { color: var(--text); border-color: var(--line-strong); }

/* ---------- status bar ---------- */
.statusbar {
  display: flex; align-items: center; gap: 16px; flex: 0 0 auto; height: 26px; padding: 0 12px; margin-top: 6px;
  overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--dim);
  background: var(--bg-2); border-top: 1px solid var(--line);
}
.sb-conn, .sb-item { display: inline-flex; align-items: center; gap: 6px; }
.sb-conn { --tone-c: var(--warn); color: var(--mute); font-weight: 600; }
.sb-conn[data-tone="ok"] { --tone-c: var(--up); }
.sb-conn[data-tone="down"] { --tone-c: var(--down); }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-c); box-shadow: 0 0 8px var(--tone-c); }
.sb-lat { color: var(--dim); font-weight: 500; }
.sb-item .mono { color: var(--mute); }
#sbMarket[data-tone="warn"] { color: var(--warn); font-weight: 600; }
#sbSource { gap: 8px; }
#sbTick { color: var(--mute); }
#sbSourceText:not(:empty) + #sbTick:not(:empty)::before { content: "\00B7"; margin-right: 8px; color: var(--dim); }
#sbSource[data-tone="warn"] #sbTick { color: var(--warn); }
#sbSource[data-tone="down"] #sbTick { color: var(--down); }
.sb-fill { flex: 1 1 auto; }
.sb-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 0; cursor: pointer;
  font: inherit; color: var(--dim); background: none; border: 0;
}
.sb-armed { color: var(--warn); font-weight: 650; }
.sb-armed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.keys-list { display: grid; gap: 6px; margin: 0; }
.keys-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; }
.keys-row dt { display: flex; flex-wrap: wrap; gap: 4px; }
.keys-row dd { margin: 0; font-size: 12.5px; color: var(--mute); }
kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 5px;
  font: 600 10px var(--font-mono); color: var(--mute); background: var(--surface-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px;
}
@media (hover: hover) {
  .sb-btn:hover { color: var(--text); }
}

/* ---------- dialogs (settings, shortcuts, confirmations) ---------- */
.dlg {
  width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 48px)); padding: 0; overflow: auto;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.dlg::backdrop { background: rgb(2 4 8 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { font-size: 14px; font-weight: 650; }
.dlg-body { display: grid; gap: 14px; padding: 14px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; }
.opt { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; cursor: pointer; }
.opt input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; }
.opt-title { font-weight: 600; font-size: 12.5px; }
.opt-help { grid-column: 2; font-size: 11.5px; color: var(--mute); }
.opt-group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.opt-group legend { padding: 0; margin-bottom: 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.opt-group .seg { flex-wrap: wrap; }
.opt-num { grid-template-columns: 1fr 84px; align-items: center; cursor: default; }
.opt-num .text-input { min-height: 32px; padding: 0 8px; text-align: right; }
.opt-num .opt-help { grid-column: 1 / -1; }

/* ---------- phone market panels: Chart | Book | Trades | Info (shown below 760 px only) ---------- */
.ptabs, .info-panel { display: none; }
.ptab {
  appearance: none; flex: 1; min-height: 34px; cursor: pointer; border: 0; border-radius: 7px;
  font: 600 12.5px var(--font-sans); color: var(--mute); background: transparent;
}
.ptab[aria-selected="true"] { color: var(--text); background: var(--surface-4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
@media (hover: hover) {
  .ptab:hover { color: var(--text); }
}

/* ---------- top bar of the desk under 1440 px: short brand, language in the account menu ---------- */
@media (min-width: 760px) and (max-width: 1439px) {
  body[data-mode="live"].page-terminal .top .brand-name { display: none; }
  body[data-mode="live"].page-terminal .top .brand-short { display: inline; }
  body[data-mode="live"] .lang-top, body[data-mode="live"] .menu-name { display: none; }
  body[data-mode="live"].page-terminal .lang-menu { display: inline-flex; align-self: flex-start; }
}
/* tablet desk: the statistics need a whole row of their own (the one-row top bar needs about 1180 px with the longest
   French labels), under the market, price and tools; nothing is squeezed, hidden or covered */
@media (min-width: 760px) and (max-width: 1219px) {
  body[data-mode="live"].page-terminal .top { flex-wrap: wrap; row-gap: 4px; }
  body[data-mode="live"] .mstats { order: 9; flex: 1 0 100%; padding-bottom: 2px; }
}
body[data-mode="live"] .top-main.quote { margin-right: 6px; }

/* ---------- desk: one screen-high grid ---------- */
@media (min-width: 1280px) {
  body[data-mode="live"] .app { height: 100dvh; min-height: 600px; }
  body[data-mode="live"] .layout {
    display: grid; gap: 0; padding: 6px 8px 0; margin: 0; max-width: none;
    grid-template-columns: minmax(0, 1fr) 6px var(--book-w, 290px) 6px var(--ticket-w, 330px);
    grid-template-rows: minmax(0, 1fr) 6px var(--dock-h, 280px);
    grid-template-areas: "chart spb book spt rail" "spd spd spd spt rail" "dock dock dock spt rail";
  }
  body[data-mode="live"] .chart-panel { grid-area: chart; display: flex; flex-direction: column; min-height: 0; }
  body[data-mode="live"] .chart-body { flex: 1 1 auto; min-height: 0; }
  body[data-mode="live"] .chart-area { min-height: 0; }
  body[data-mode="live"] #chart { flex: 1 1 0; height: auto; min-height: 160px; }
  #spBook { grid-area: spb; }
  #bookCol { grid-area: book; }
  #spTicket { grid-area: spt; }
  body[data-mode="live"] .rail { grid-area: rail; min-height: 0; overflow-y: auto; gap: 6px; padding-bottom: 2px; }
  #spDock { grid-area: spd; }
  body[data-mode="live"] .dock { grid-area: dock; display: flex; flex-direction: column; min-height: 0; }
  body[data-mode="live"] .dock-pane { flex: 1 1 auto; max-height: none; min-height: 0; }
  body[data-mode="live"] .layout .panel { border-radius: var(--r); }
  body[data-mode="live"] .hud { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-2); }
  /* panels updated several times a second: their changes never re-lay out or repaint the rest of the page */
  body[data-mode="live"] .ob-body, body[data-mode="live"] .tt-body, .mstats, .statusbar { contain: layout paint; }
  .page-terminal .foot { padding-top: 10px; }
}

/* ---------- tablet: chart on top, book | trades | ticket, dock below ---------- */
@media (min-width: 760px) and (max-width: 1279px) {
  body[data-mode="live"] .layout {
    display: grid; gap: 8px; padding: 8px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 340px);
    grid-template-areas: "chart chart chart" "book trades rail" "dock dock dock";
  }
  body[data-mode="live"] .chart-panel { grid-area: chart; }
  body[data-mode="live"] #chart { height: clamp(360px, 52dvh, 560px); }
  body[data-mode="live"] .bookcol { display: contents; }
  /* the book and the trades are never taller than the window: both sides of the book fit on one screen */
  body[data-mode="live"] .ob-panel { grid-area: book; height: clamp(340px, calc(100dvh - 16px), 560px); }
  body[data-mode="live"] .tt-panel { grid-area: trades; height: clamp(340px, calc(100dvh - 16px), 560px); }
  body[data-mode="live"] .rail { grid-area: rail; }
  body[data-mode="live"] .dock { grid-area: dock; }
  body[data-mode="live"] .splitter, body[data-mode="live"] .col-tabs { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  .page-terminal .top { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand markets tools menu" "quote quote quote quote"; }
  body[data-mode="live"] .lang-top { display: none; }
  .page-terminal .lang-menu { display: inline-flex; align-self: flex-start; }
  body[data-mode="live"].page-terminal .menu-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .menu-ico { display: block; }
  .menu-avatar, .menu-name, .menu-caret { display: none; }
  .page-terminal .top-tools { grid-area: tools; }
  body[data-mode="live"] .layout { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 0; }
  body[data-mode="live"] .rail { display: contents; }
  body[data-mode="live"] .splitter, body[data-mode="live"] .col-tabs { display: none; }
  body[data-mode="live"] .chart-panel { order: 1; }
  /* compact top bar: logo, market, tools; the price with the live light and the spread; statistics on one line */
  body[data-mode="live"].page-terminal .top .brand-short { display: none; }
  body[data-mode="live"] .mstats { gap: 14px; padding-top: 2px; }
  .ms dd { font-size: 12px; }
  body[data-mode="live"] .quote { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  body[data-mode="live"] .quote .stamp { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body[data-mode="live"] #stampLabel, body[data-mode="live"] #lastTime { display: none; }
  body[data-mode="live"] .quote .live { margin-right: 0; }
  /* one market panel at a time under the tabs */
  body[data-mode="live"] .ptabs {
    display: flex; order: 0; gap: 2px; padding: 3px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  }
  body[data-mode="live"] .layout .bookcol { display: contents; }
  body[data-mode="live"] .layout .ob-panel, body[data-mode="live"] .layout .tt-panel {
    display: none; order: 1; flex: none; height: clamp(360px, 60dvh, 560px);
  }
  body[data-mode="live"] .layout .info-panel { order: 1; padding: 0; }
  body[data-mode="live"] .layout[data-ptab="book"] .ob-panel,
  body[data-mode="live"] .layout[data-ptab="trades"] .tt-panel,
  body[data-mode="live"] .layout[data-ptab="info"] .info-panel { display: flex; flex-direction: column; }
  /* the hidden chart keeps its size (a chart resized to nothing loses its scroll position): out of sight, inert */
  body[data-mode="live"] .layout { position: relative; }
  body[data-mode="live"] .layout[data-ptab]:not([data-ptab="chart"]) .chart-panel {
    position: absolute; top: 0; left: 8px; right: 8px; visibility: hidden; pointer-events: none;
  }
  body[data-mode="live"] .dock { order: 4; }
  body[data-mode="live"] .p-account { order: 5; }
  .statusbar { display: none; }
}