/* ── signals-mobile.css — the Signals desk below 900px (UI 7.0) ──
   Chart-first, the way the TradingView app is: the canvas is the page and
   everything else is one tap away. #sgMobTabs (Chart · Watch · Signal ·
   Ticket · Engine) picks ONE pane at a time through [data-mpane]; the panes
   are the desk's own hosts, so signals.js renders into them exactly as it
   does on the desktop. Loaded last so it wins every tie. */
@media (min-width: 900px) { .sg-mobtabs { display: none; } }

@media (max-width: 899px) {
  /* ── the strip under the top bar ── */
  #sgMobTabs {
    position: sticky; top: var(--topnav); z-index: 32; display: grid; grid-template-columns: repeat(5, 1fr);
    height: 44px; margin: 0 calc(var(--gutter) * -1); background: var(--bg); border-bottom: 1px solid var(--border);
  }
  #sgMobTabs button {
    position: relative; border: 0; background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color var(--dur);
  }
  #sgMobTabs button::before { content: ""; position: absolute; inset: -2px 0; }
  #sgMobTabs button::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: 0; transform: scaleX(.4); transition: opacity var(--dur), transform var(--dur-2) var(--spring); }
  #sgMobTabs button.active { color: var(--text); }
  #sgMobTabs button.active::after { opacity: 1; transform: none; }
  body.sg-full #sgMobTabs { display: none; }

  /* ── one pane at a time ── */
  #page-signals { padding-top: 0; }
  #page-signals:not([data-mtab="engine"]) > .page-head { display: none; }
  #page-signals .sg-work { display: block; }
  #page-signals [data-mpane] { display: none; }
  #page-signals[data-mtab="chart"] [data-mpane~="chart"],
  #page-signals[data-mtab="watch"] [data-mpane~="watch"],
  #page-signals[data-mtab="signal"] [data-mpane~="signal"],
  #page-signals[data-mtab="ticket"] [data-mpane~="ticket"] { display: flex; flex-direction: column; }
  #page-signals[data-mtab="engine"] [data-mpane~="engine"]:not([hidden]) { display: block; }
  #page-signals:not([data-mtab="engine"]) #sgRail,
  #page-signals:not([data-mtab="engine"]) #sgSummary,
  #page-signals:not([data-mtab="engine"]) #sgBanner { display: none !important; }
  #page-signals:not([data-mtab="engine"]):not([data-mtab="watch"]) #sgStrats { display: none; }
  #page-signals #sgStrats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px calc(var(--gutter) * -1) 4px; padding: 0 var(--gutter); min-height: 0; }
  #page-signals #sgStrats::-webkit-scrollbar { display: none; }
  #page-signals #sgStrats > * { flex-shrink: 0; min-height: 40px; }

  /* ── Chart ── */
  #page-signals .sg-center { gap: 0; }
  #page-signals .sg-chart-card { margin: 0 calc(var(--gutter) * -1); border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  #page-signals .sg-toolbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px var(--gutter); border: 0; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  #page-signals .sg-toolbar::-webkit-scrollbar { display: none; }
  #page-signals .sg-toolbar > * { flex-shrink: 0; }
  #page-signals .sg-toolbar .sg-meta, #page-signals .sg-toolbar .sg-sub { display: none; }
  #page-signals .sg-toolbar .btn, #page-signals .sg-toolbar .icon-btn { height: 40px; min-width: 40px; }
  #page-signals #sgTf { height: 40px; padding: 2px; flex-wrap: nowrap; mask-image: none; -webkit-mask-image: none; overflow: visible; }
  #page-signals #sgTf { height: 46px; }
  #page-signals #sgTf .chip { height: 40px; min-width: 44px; padding: 0 11px; font-size: 12.5px; }
  #page-signals .sg-chart-row { flex-direction: column-reverse; }
  /* the row is a column here, so the desktop `flex: 1` would size the canvas
     off a zero basis — give it its own height instead */
  #page-signals .sg-chart-row > .sg-chart { flex: 0 0 auto; }
  #page-signals .sg-chart {
    height: calc(100vh - var(--topnav) - 44px - 58px - 44px - 30px - var(--tabbar-h));
    height: calc(100dvh - var(--topnav) - 44px - 58px - 44px - 30px - var(--tabbar-h));
    min-height: 320px;
  }
  #page-signals .sg-tools-rail {
    flex-direction: row; width: auto; height: 44px; padding: 0 var(--gutter); gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none;
    border: 0; border-top: 1px solid var(--border); scroll-snap-type: x proximity;
  }
  #page-signals .sg-tools-rail::-webkit-scrollbar { display: none; }
  #page-signals .sg-tools-rail button { width: 40px; height: 40px; flex-shrink: 0; scroll-snap-align: start; }
  #page-signals .sg-tools-rail button svg { width: 18px; height: 18px; }
  #page-signals .sg-tools-rail hr, #page-signals .sg-tools-rail .sep { width: 1px; height: 22px; margin: 0 4px; flex-shrink: 0; }
  #page-signals .sg-chart-foot { height: 30px; padding: 0 var(--gutter); gap: 10px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 11.5px; border-top: 1px solid var(--border); }
  #page-signals .sg-help, #page-signals #sgParity { display: none; }
  #page-signals .sg-replay-bar { flex-wrap: wrap; padding: 6px var(--gutter); gap: 6px; }
  #page-signals .sg-replay-bar button { min-height: 40px; min-width: 40px; }
  /* the toolbar's menus rise as sheets (the bar has no blur below 900) */
  #page-signals .sg-toolbar .popover, #page-signals .sg-menu-wrap .popover {
    position: fixed; inset: auto 0 0 0; top: auto; width: auto !important; max-height: 70vh; max-height: 70dvh; overflow: auto; z-index: 75;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-bottom: 0; padding: 14px 10px calc(var(--safe-b) + 10px); animation: sheet-up var(--dur-3) var(--sheet-ease);
  }
  #page-signals .sg-menu-wrap .popover .menu-item, #page-signals .sg-menu-wrap .popover button { min-height: 44px; }
  body.sg-full #page-signals .sg-chart { height: calc(100vh - 44px - 44px); height: calc(100dvh - 44px - 44px); }

  /* ── Watch ── */
  #page-signals #sgWatchCard {
    position: static; height: auto; max-height: none; min-height: calc(100vh - var(--topnav) - 40px - var(--tabbar-h) - 60px);
    margin: 0 calc(var(--gutter) * -1); border: 0; border-radius: 0; background: var(--bg); box-shadow: none;
  }
  #page-signals .sg-watch-head { position: static; background: var(--bg); padding: 4px var(--gutter) 8px; gap: 8px; }
  #page-signals .sg-watch-head input, #page-signals .sg-watch-head select { height: 40px; font-size: var(--fs-input); }
  #page-signals .sg-watch-tools { padding: 0 var(--gutter) 8px; }
  #page-signals .sg-watch-tools .chip { height: 40px; padding: 0 12px; font-size: 12.5px; }
  #page-signals .sg-insp { padding: 8px var(--gutter); }
  #page-signals .sg-insp-seg button { min-height: 44px; font-size: 11.5px; }
  #page-signals .sg-insp-acts a, #page-signals .sg-insp-tog { padding: 10px 4px; margin: -10px -4px; }
  #page-signals .sg-watch-body { max-height: none; overflow: visible; }
  #page-signals .wl-row { padding: 11px var(--gutter); min-height: 56px; }
  #page-signals .wl-act { opacity: 1; visibility: visible; }
  #page-signals .sg-stage, #page-signals .sg-watch-meta { position: sticky; bottom: calc(var(--tabbar-h)); background: var(--surface); padding-left: var(--gutter); padding-right: var(--gutter); z-index: 2; }

  /* ── Signal / Ticket (the inspector) ── */
  #page-signals #sgSide {
    position: static; max-height: none; margin: 0 calc(var(--gutter) * -1); border: 0; border-radius: 0; background: var(--bg); box-shadow: none;
    min-height: calc(100vh - var(--topnav) - 40px - var(--tabbar-h) - 40px);
  }
  #page-signals #sgSide > .subtabs { position: sticky; top: calc(var(--topnav) + 44px); z-index: 3; background: var(--bg); margin: 0; padding: 0 calc(var(--gutter) - 8px); }
  #page-signals[data-mtab="ticket"] #sgSide > .subtabs { display: none; }
  #page-signals[data-mtab="signal"] #sgSideTabs [data-s="ticket"] { display: none; }
  #page-signals .sg-side-body { max-height: none; overflow: visible; padding: 12px var(--gutter) 24px; }
  #page-signals .sg-side-body input, #page-signals .sg-side-body select { height: 44px; font-size: var(--fs-input); }
  #page-signals .tk-btns { position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0; background: linear-gradient(transparent, var(--bg) 30%); }
  #page-signals .tk-btns .btn { height: 52px; font-size: 14px; }

  /* ── Engine: status, strategy, blotter, scanner ── */
  /* the status rail is a 2-column grid here, not a strip you have to scroll */
  #page-signals[data-mtab="engine"] #sgRail { position: static; display: block; height: auto; max-height: none; overflow: visible; margin-top: var(--gap); }
  #page-signals[data-mtab="engine"] .rail-cells { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  #page-signals[data-mtab="engine"] .rail-cell { min-height: 64px; min-width: 0; border-left: none; border-top: 1px solid var(--border); }
  #page-signals[data-mtab="engine"] .rail-cell:nth-child(2n) { border-left: 1px solid var(--border); }
  #page-signals[data-mtab="engine"] .rail-cell:nth-child(-n+2) { border-top: none; }
  #page-signals[data-mtab="engine"] .rail-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #page-signals .sg-bottom { margin-top: var(--gap); }
  #page-signals .sg-bottom-head { flex-wrap: wrap; gap: 6px; }
  #page-signals .sg-stats { overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  #page-signals #sgBottom { max-height: none; }
  #page-signals .sg-scan-search { height: 40px; font-size: var(--fs-input); }
}

/* landscape phone on the chart: the bare canvas */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body.sg-full .topnav, body.sg-full #tabbar, body.sg-full #sgMobTabs { display: none !important; }
}