/* Mobile shell for /m: same DOM ids as /app, Bitget-shaped layout.
   Only loaded by m.html. Desktop style.css stays the base layer.
   Sizing model: horizontal metrics in vw/%, vertical in dvh; only fonts,
   hairline borders and radii stay px, and accessibility floors keep a
   px bound via max(). The page scrolls vertically like the desktop build;
   LWC handles chart gestures (long-tap crosshair, pinch zoom, axis-drag
   scale). */

html, body { min-height: 100dvh; }
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: #0c1013;
}
main { max-width: none; margin: 0; padding: 0; }

/* --- Header: one fixed row, order never jumps ---
   logo | symbol | conn dot | price + chg | agg stack | gear */
.market-header {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 2.6vw;
  padding: 0.95dvh 2.6vw; border-bottom: 1px solid var(--line); overflow: hidden;
}
.brand { order: 1; flex: none; padding: 0; }
.brand-mark { display: grid; width: 5.6vw; height: 5.6vw; font-size: 17px; margin-right: 0; }
.market-name { order: 2; flex: none; }
.symbol-line { gap: 1.5vw; }
h1 { font-size: 17px; }
.perp { font-size: 9px; padding: 0.25dvh 1vw; }
.connection { order: 3; flex: none; margin-left: 0; gap: 0; }
.connection > span:last-child { display: none; }
.last-price { order: 4; flex: none; border-left: none; padding-left: 0; gap: 0; }
.last-price strong { font-size: 13px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.last-price span { display: none; }
#m-chg { font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
#m-chg.buy { color: var(--green); }
#m-chg.sell { color: var(--red); }
.flow-live {
  order: 5; flex: none; flex-direction: column; gap: 0.25dvh;
  border-left: 1px solid var(--line); padding-left: 2.6vw;
}
.fl-cap { display: none; }
.fl { font-size: 10px; gap: 1vw; }
.fl b { font-size: 10px; min-width: 0; }
.extras-live { display: none; }
.ohlc { display: none; }
#settings-open { order: 6; flex: none; margin-left: auto; padding: 1dvh 2vw; min-width: max(36px, 9.5vw); min-height: max(38px, 4.5dvh); }
#settings-open .brand-gear { width: 5vw; height: 5vw; }

/* --- Instrument row: 3 tf chips + ▾ | draw | %pos | fit | lock | tools --- */
.workspace { border: none; border-radius: 0; }
.toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5vw;
  min-height: 0; padding: 0.5dvh 1.5vw;
}
.toolbar .tb-group { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.toolbar .tb-group::-webkit-scrollbar { display: none; }
.timeframes { flex-wrap: nowrap; scrollbar-width: none; }
.timeframes button, #tf-more { min-width: max(26px, 7vw); min-height: max(28px, 7.5vw); font-size: 11px; padding: 0.25dvh 1vw; }
/* The ▾ "other timeframes" button stays pinned at the row's right edge
   while the quick chips scroll beneath it. */
#tf-more-wrap { position: sticky; right: 0; flex: none; background: #11171b; padding-left: 1vw; z-index: 61; }
#draw-wrap, #pos-wrap { flex: none; position: relative; }
#draw-btn, #pos-toggle { min-width: max(28px, 7.5vw); min-height: max(28px, 7.5vw); padding: 0.25dvh 1vw; }
#draw-btn { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#pos-toggle { font: 600 11px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; display: inline-flex; align-items: center; }
#pos-mood.long { color: var(--green); }
#pos-mood.short { color: var(--red); }
/* The mood arrow used to share the digits' size and looked dropped - a
   smaller glyph on the shared baseline reads as one token. */
#pos-mood .pos-arrow { font-size: 8px; margin-left: 2px; }
/* Pane-reorder movers are a desktop affordance - on the narrow axis they
   stack into overlapping arrow pairs that read as broken glyphs. */
.pane-move { display: none !important; }
.toolbar > #fit, .toolbar > #free-btn { flex: none; min-width: max(28px, 7.5vw); min-height: max(28px, 7.5vw); padding: 0.25dvh 1vw; }
/* Reset view stays a plain button like its neighbors (the PC collapsed
   look) - only the arrow glyph is enlarged so it matches the row's visual
   weight. No background or border: a framed chip reads as always-pressed. */
.toolbar > #fit { font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: max(30px, 8vw); }
.toolbar > #fit .tl, .toolbar > #free-btn .tl { display: none; }
/* Drawer opener shares the chip height like every other control on the row. */
#m-tools-open {
  flex: none; min-width: max(30px, 8vw); min-height: max(28px, 7.5vw); font-size: 14px;
  padding: 0.25dvh 1.2vw; display: inline-flex; align-items: center; justify-content: center;
  background: #1b262c; border: 1px solid #2a343b; border-radius: 8px; color: #c3cdd3;
}
#m-tools-open[aria-expanded=true] { color: #7ce1bc; border-color: #51d3a566; }
/* Touch has no real hover: a tap leaves :hover latched on the last-touched
   control, so hover borders/lift linger after a menu closes or a button
   fires (the stuck resetview/positions highlight). Drop the hover skin on
   coarse pointers; pressed-on state still shows via aria-pressed. */
@media (hover: none) {
  button:hover:not([aria-pressed="true"]), .sym-tab:hover:not([aria-pressed="true"]) {
    color: #9ca9b2; transform: none; border-top-color: transparent; border-bottom-color: transparent;
  }
}
/* Tool pickers open as compact dropdowns right under the instrument row.
   m.js sets top to the live toolbar bottom so the panel tracks it. */
.tf-menu, .pos-menu { position: fixed; top: 14dvh; bottom: auto; left: 2vw; right: 2vw; width: auto; max-height: 45dvh; overflow-y: auto; z-index: 60; }
.tf-menu { grid-template-columns: repeat(4, 1fr); }
/* The timeframe picker reads as a compact dropdown about half the generic
   full-bleed sheet - anchored right under the ▾ button. */
#tf-menu { left: auto; right: 2vw; width: min(56vw, 220px); max-height: 24dvh; }
#tf-menu button { min-height: 30px; font-size: 11px; padding: 3px 5px; }
/* Draw tools hug their content - a lone column of short labels does not need
   the full screen width. Anchored to the right edge under the ✎ button. */
.draw-menu { grid-template-columns: 1fr; left: auto; right: 2vw; width: max-content; min-width: 0; max-width: 70vw; }
.draw-menu .draw-row { text-align: left; justify-content: flex-start; min-height: 30px; padding: 4px 10px; }
/* Positions panel: compact card, roughly half the width and text of the old
   full-bleed sheet. */
.pos-menu { left: auto; right: 2vw; width: min(58vw, 240px); padding: 6px 8px; gap: 4px; max-height: 26dvh; }
.pos-menu .pos-row { font-size: 9px; gap: 5px; }
.pos-menu .pos-row > span { flex-basis: 52px; }
.pos-menu .pos-row small { font-size: 8px; }
.pos-menu .pos-bar { height: 5px; }
.pos-menu .pos-note { font-size: 8px; }
.tf-menu button { min-width: 0; min-height: max(40px, 5dvh); font-size: 13px; }

/* --- Chart area: shell heights come from app.js; the page scrolls --- */
.chart-row { position: relative; --depth-width: 14%; }
/* Without an explicit touch-action the browser claims horizontal drags as its
   own scroll/overscroll and fires pointercancel ~2 moves in, killing the
   chart's pan stream. pan-y keeps vertical page scroll but hands horizontal
   drags (and pinch, since browser zoom stays disallowed) to the chart. */
/* Gesture split is scoped per chart cell (tagged in moveAxisRow), not on the
   whole shell: a shell-level pan-y would also claim vertical drags that START
   on the price axis, killing its drag-rescale while locked. Pane cells get
   pan-y locked (vertical = page scroll, horizontal = chart pan) and none when
   .free; the price-axis column keeps none in both modes so its drag always
   rescales. overscroll-behavior-x still stops a horizontal edge drag from
   becoming browser back/forward navigation mid-pan. */
.chart-shell { overscroll-behavior-x: none; }
#chart .lwc-axis-cell { touch-action: none; }
#chart .lwc-pane-cell { touch-action: none; }
.chart-shell:not(.free) #chart .lwc-pane-cell { touch-action: pan-y; }
/* The native price axis is hidden on mobile (its fixed padding wasted ~20px);
   drawMobileAxis paints labels in this strip and the strip re-creates the
   vertical drag-rescale. z-index sits under #drawings (4) so an armed draw
   tool still wins at the right edge. */
/* Height is set from pane 0's height in drawAxis - the strip must never
   extend over the lower panes or their scales could be grabbed there. */
#axis-strip { position: absolute; top: 0; right: 0; width: 32px; z-index: 3; touch-action: none; }
/* Drawings stay visible mid-gesture: the range-change hook repaints
   drawOverlay during pans, so hiding the layer only produced a flicker
   users could see on every tap. */
#book-depth i { font-size: 10px; padding-left: 1vw; }
#depth-imb { font-size: 10px; }
#depth-handle { display: none !important; }
.depth-handle { display: none !important; }
/* Range-select button sits inside the profile rail's top-right corner. */
#profile-range { width: 6.7vw; height: 6.7vw; min-width: 6.7vw; min-height: 6.7vw; font-size: 12px; top: 0.5dvh; left: calc(var(--profile-width, 10%) - 7.2vw); }

/* On-chart resize strip is desktop-only; mobile sets rail width in Settings. */
#profile-handle { display: none !important; }
.flow-summary { padding: 0; }
/* Keep the legal nav reachable on mobile - compact stacked footer. */
.app-footer { display: flex; margin: 0 3vw; padding: 1.5dvh 0 calc(1.5dvh + env(safe-area-inset-bottom)); font-size: 10px; }
.app-footer nav { gap: 4vw; }

/* --- Scrim behind the tools drawer --- */
#m-scrim {
  position: fixed; inset: 0; z-index: 30; background: #06090bb8;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#m-scrim.on { opacity: 1; pointer-events: auto; }

/* --- Tools drawer: bottom sheet holding every control group --- */
#m-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-direction: column; max-height: 78dvh;
  background: #11171b; border-top: 1px solid #2a343b; border-radius: 14px 14px 0 0;
  transform: translateY(105%); transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
#m-drawer.open { transform: none; }
.m-drawer-grab { width: 10vw; height: 0.5dvh; border-radius: 2px; background: #37424a; margin: 1dvh auto 0; flex: none; }
.m-drawer-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 1dvh 4vw; border-bottom: 1px solid #222b32;
  font-size: 14px; font-weight: 600; color: #e6edf0;
}
#m-tools-close { min-width: max(40px, 11vw); min-height: max(36px, 4.6dvh); font-size: 15px; }
.m-drawer-body { overflow-y: auto; padding: 0.5dvh 3vw 1.4dvh; -webkit-overflow-scrolling: touch; }
.m-sec { padding: 1.2dvh 0; border-bottom: 1px solid #1b2228; }
.m-sec h4 { margin: 0 0 1dvh; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); }
/* Flat blocks, no dropdowns: the menu contents render as button grids and
   the parent dropdown buttons are hidden. */
#m-drawer #vol-btn, #m-drawer #ind-btn, #m-drawer #layers-btn { display: none; }
#m-drawer .tf-menu {
  position: static !important; display: grid !important;
  grid-template-columns: 1fr 1fr; gap: 0.7dvh 1.5vw; width: 100%;
  margin: 0; padding: 0; box-shadow: none; border: none; background: none;
  max-height: none; overflow: visible;
}
#m-drawer .layers-menu { display: contents !important; }
#m-drawer .tf-menu button, #m-drawer .layers-wrap > button, #m-drawer #layers-group > button {
  min-height: max(40px, 5dvh); padding: 1.2dvh 3vw; font-size: 13px; text-align: left;
  background: #1b262c; border: 1px solid #2a343b; border-radius: 8px;
}
#m-drawer .tf-menu button[aria-pressed=true], #m-drawer #layers-group > button[aria-pressed=true] {
  color: #7ce1bc; border-color: #51d3a566;
}
#m-drawer #layers-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7dvh 1.5vw; }
#m-drawer .layers-wrap { display: contents; }
#m-drawer .ind-menu { grid-template-columns: 1fr; }
#m-drawer .ind-menu .ind-row {
  display: flex; align-items: center; justify-content: space-between; gap: 2vw;
  min-height: max(36px, 4.6dvh); padding: 1dvh 2.5vw; font-size: 13px;
  background: #1b262c; border: 1px solid #2a343b; border-radius: 8px;
}
#m-drawer .ind-menu .ind-row label { display: flex; align-items: center; gap: 2vw; }
#m-drawer .ind-menu .ind-row input { width: max(16px, 4.6vw); height: max(16px, 4.6vw); }
#m-drawer .ind-menu .ind-params, #m-drawer .ind-menu .draw-hint { font-size: 11px; color: var(--dim); }
#m-drawer .ind-menu .draw-hint { grid-column: 1 / -1; padding: 0.5dvh 0.5vw; }
.m-sec .tl { display: inline; }
/* The desktop tools-overflow wrap is redundant unless the collapse plumbing
   has actually reparented wraps into its menu. */
#m-drawer #tools-wrap:has(#tools-menu:empty) { display: none !important; }
#m-drawer #tools-wrap:not(:has(#tools-menu:empty)) { display: flex; flex-direction: column; }
#m-drawer #tools-btn { display: none; }
.m-desktop {
  display: block; text-align: center; padding: 1.6dvh 4vw; margin-top: 1.2dvh;
  color: var(--dim); font-size: 12px; text-decoration: underline;
  text-decoration-color: #8a99a488; text-underline-offset: 3px;
}

/* --- Modals become bottom sheets --- */
.settings-modal { align-items: flex-end; justify-content: center; z-index: 60; }
#disclaimer-modal { z-index: 70; }
.settings-panel {
  width: 100%; max-width: none; height: 82dvh;
  border-radius: 14px 14px 0 0; border-bottom: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.settings-panel .sheet-grab { position: absolute; top: 0.8dvh; left: 50%; transform: translateX(-50%); width: 10vw; height: 0.5dvh; border-radius: 2px; background: #37424a; }
.sym-panel { height: 85dvh; }
/* Sheet drag-to-close + scroll containment: touch-action none on the grab
   strips keeps the gesture stream intact, and overscroll containment stops a
   downward drag on a scrolled-to-top body from chaining into pull-to-refresh
   (which used to reload the page instead of closing the sheet). */
.settings-panel .sheet-grab, .m-drawer-grab, .settings-head, .m-drawer-head { touch-action: none; }
.settings-body, .settings-tabs, .sym-list, .sym-filters, .m-drawer-body { overscroll-behavior-y: contain; }
/* Range sliders yield vertical pans to the settings scroller - edits only
   start on the thumb (see the touch guard in app.js). */
.settings-panel input[type=range] { touch-action: pan-y; }
/* Filters take over the sheet below the head+tabs: the panel is a row flex
   (list rail + side rail on desktop), so on mobile it must go columnar or the
   100%-wide rail overlays the still-rendered list and text bleeds through. */
.sym-panel.filters-open { width: 100%; flex-direction: column; }
.sym-panel.filters-open .sym-main { flex: 0 0 auto; }
.sym-panel.filters-open .sym-list { display: none; }
.sym-filters { width: 100%; border-left: none; border-top: 1px solid #2a343b; }
.sym-panel.filters-open .sym-filters { flex: 1; min-height: 0; }
.settings-tabs { min-width: 28vw; }
.settings-tab { min-height: max(40px, 5.2dvh); font-size: 13px; }
/* Inputs at 16px+ keep iOS Safari from zooming on focus. */
.settings-panel input, .settings-panel select, #sym-search { font-size: 16px; }

/* --- Symbol table at proportional density --- */
.sym-cols, .sym-row { grid-template-columns: 7% 1fr 17% 15% 19%; gap: 1.5vw; }
.sym-cols { font-size: 8px; padding: 0.5dvh 2.5vw; }
.sym-row { min-height: 0; padding: 0.5dvh 1.5vw; }
.sym-star { font-size: 12px; }
.sym-name { font-size: 12px; }
.sym-last, .sym-vol, .sym-chg { font-size: 10px; }
.sym-tab { padding: 1dvh 2.5vw; font-size: 12px; }
.sym-head { padding: 1dvh 3vw 0.5dvh; }

/* --- Touch floor: 44px targets where space allows, no text under 10px --- */
button { min-height: max(36px, 10vw); }
.tf-menu button { min-height: max(40px, 5dvh); }
.chart-tip { font-size: 11px; }
.event-cards { width: min(92%, 340px); max-height: 60dvh; }

/* Disclaimer sheet */
.disclaimer-panel { width: 100%; border-radius: 14px 14px 0 0; }

/* --- Narrow phones: keep the fixed header row inside the width --- */
@media (max-width: 360px) {
  h1 { font-size: 13px; }
  .last-price strong { font-size: 8.5px; letter-spacing: -0.5px; }
  #m-chg { font-size: 7.5px; }
  .market-header { gap: 1.4vw; padding: 0.8dvh 2.2vw; }
  .flow-live, .extras-live { padding-left: 1.6vw; gap: 0.15dvh; }
  .fl { font-size: 8px; }
  .fl b, .extras-live b { font-size: 8px; }
  .extras-live .ex-cap { font-size: 7px; }
  #settings-open { min-width: max(34px, 9vw); min-height: max(36px, 4.3dvh); padding: 0.8dvh 1.8vw; }
}

@media (prefers-reduced-motion: reduce) {
  #m-drawer, #m-scrim { transition: none; }
}