/*
 * Screen modes of the pro terminal (screen.js, focus-strip.js): the whole terminal full screen button, the chart
 * focus (the chart covers the window under the survival rail, the quick order strip below it, the order book and
 * trades sliding in from the right) and its phone form, the full-screen chart (safe areas of the screen respected,
 * the ticket drawer opening on top). State classes: body.chart-focus, body.focus-book, html.is-fullscreen.
 */

/* ---------- whole terminal full screen: button beside the settings ---------- */
.screen-btn .scr-close, .screen-btn[aria-pressed="true"] .scr-open { display: none; }
.screen-btn[aria-pressed="true"] .scr-close { display: inline; }
.screen-btn[aria-pressed="true"] { color: var(--acc); }

/* ---------- chart focus: a layer over the window ---------- */
.focus-strip, #fsClose { display: none; }
body.chart-focus { overflow: hidden; }
body.chart-focus #hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 151; background: var(--bg-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-top: env(safe-area-inset-top); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
}
body.chart-focus #chartPanel {
  position: fixed; z-index: 150; top: var(--focus-top, 0px); right: 0; bottom: 0; left: 0; margin: 0;
  display: flex; flex-direction: column; min-height: 0; visibility: visible; pointer-events: auto;
  border: 0; border-radius: 0; background: var(--surface);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
body.chart-focus #chartPanel .chart-body { display: flex; flex: 1 1 auto; min-height: 0; }
body.chart-focus #chartPanel .chart-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
body.chart-focus #chartPanel #chart { flex: 1 1 0; height: auto; min-height: 120px; }
body.chart-focus #chartPanel #histNote { display: none; }

/* ---------- quick order strip ---------- */
body.chart-focus .focus-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line);
}
.fs-sym {
  appearance: none; display: inline-flex; align-items: baseline; gap: 8px; margin-right: 6px; padding: 6px 8px; cursor: pointer;
  font: 600 12px var(--font-sans); color: var(--mute); background: none; border: 1px solid transparent; border-radius: var(--r-sm);
}
.fs-sym b { font-size: 13px; color: var(--text); }
@media (hover: hover) {
  .fs-sym:hover { border-color: var(--line-2); background: var(--surface-3); }
}
.fs-side { display: inline-flex; flex-direction: column; justify-content: center; min-width: 116px; min-height: 42px; padding: 3px 14px; line-height: 1.15; }
.fs-side small { font-size: 11.5px; font-weight: 600; opacity: 0.92; }
.fs-spread { min-width: 48px; text-align: center; font-size: 11px; color: var(--dim); }
.fs-field {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; cursor: text;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.fs-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.fs-field .text-input { width: 92px; min-height: 0; height: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
.fs-unit { font-size: 11px; color: var(--dim); }
.fs-type .chip { min-height: 34px; }
#focusStrip .icon-chip { width: 36px; height: 36px; }
body.chart-focus #fsClose { display: inline-grid; }
.fs-msg { flex-basis: 100%; margin: 0; min-height: 16px; text-align: center; font-size: 12px; color: var(--mute); }
.fs-msg:empty { display: none; }
.fs-msg[data-tone="down"] { color: var(--down); }
.fs-msg[data-tone="up"] { color: var(--up); }

/* ---------- order book and trades sliding in (desk and tablet) ---------- */
body.chart-focus.focus-book #chartPanel { right: var(--focus-book-w, 300px); }
body.chart-focus.focus-book #bookCol {
  position: fixed; z-index: 150; top: var(--focus-top, 0px); right: 0; bottom: 0; width: var(--focus-book-w, 300px);
  display: flex; flex-direction: column; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--bg); border-left: 1px solid var(--line); animation: focus-slide 220ms var(--ease);
}
body.chart-focus.focus-book #bookCol .ob-panel, body.chart-focus.focus-book #bookCol .tt-panel { height: auto; min-height: 0; }
@keyframes focus-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* the confirmation of the ticket shows above the layer (the ticket itself is under it) */
@media (min-width: 760px) {
  body.chart-focus #tkConfirm:not([hidden]) {
    position: fixed; z-index: 185; left: 50%; bottom: 112px; transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-pop);
  }
}

/* a phone on its side: one compact row */
@media (max-height: 500px) {
  body.chart-focus .fs-sym, body.chart-focus #fsBook { display: none; }
  body.chart-focus .focus-strip { flex-wrap: nowrap; gap: 6px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .fs-side { min-width: 92px; min-height: 38px; }
  .fs-field { height: 38px; }
  .fs-field .text-input { width: 76px; }
  body.chart-focus #chartPanel .legend, body.chart-focus #chartPanel #hint { display: none; }
}

/* ---------- phone held upright: the full-screen chart, Sell and Buy open the ticket drawer on top ---------- */
@media (max-width: 759px) {
  body.chart-focus .focus-strip { flex-wrap: nowrap; gap: 8px; padding-left: 10px; padding-right: 10px; }
  body.chart-focus .fs-sym, body.chart-focus .fs-qty, body.chart-focus .fs-type, body.chart-focus .fs-px,
  body.chart-focus #fsBook, body.chart-focus .fs-msg { display: none; }
  body.chart-focus .fs-side { flex: 1 1 0; min-width: 0; min-height: 50px; }
  body.chart-focus #fsClose { order: -1; width: 44px; height: 50px; }
  body.chart-focus .tradebar, body.chart-focus .ptabs { display: none; }
  body.chart-focus .sheet-backdrop { z-index: 170; }
  body.chart-focus .p-ticket { z-index: 175; }
  body.chart-focus .toast { z-index: 190; }
}

/* notched phones on their side: the panels stay clear of the notch and the rounded corners */
body[data-mode="live"] .layout { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }

@media (prefers-reduced-motion: reduce) {
  body.chart-focus.focus-book #bookCol { animation: none; }
}