/* Phone homepage deck (mobile_deck.js): the header and title stay on top; below the pinned search, one terminal
   per screen. Scrolling down tucks the header away and settles the deck to fill the screen under the search. */
html.mobile-deck { scroll-snap-type: y proximity; }
html.mobile-deck .terminal-container > .main-grid { display: none !important; }
html.mobile-deck .terminal-container { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* header, search, news tape, deck: in that order (some mobile styles reorder these boxes) */
html.mobile-deck .terminal-container > :is(.main-header, .pigment-terminal-strip, .deck-tape, .deck-tape-peek, .deck) { order: 0 !important; }
html.mobile-deck .terminal-container > .main-header { scroll-snap-align: start; }
html.mobile-deck .pigment-terminal-strip { --deck-strip: 52px; }

/* News tape: flush under the search, pinned with it */
html.mobile-deck .deck-tape { position: sticky; top: var(--deck-strip, 32px); z-index: 29999; margin: 0 !important; border-radius: 0; }

/* The deck: terminals side by side, one per screen, snapping sideways; it fills the screen below the pinned search */
.deck { display: flex; height: calc(100dvh - 32px); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-align: end; overscroll-behavior-x: contain; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.deck-page { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
/* Each widget fills its page; its own body scrolls inside it (the page is the whole screen, so nothing traps) */
html.mobile-deck .deck-page > .widget { order: 0 !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; width: auto !important; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
html.mobile-deck .deck-page > .widget > .widget-content { flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Any terminal fills its page, widget or not (the events log host is a plain box) */
html.mobile-deck .deck-page > :not(.deck-foot) { order: 0 !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; width: auto !important; box-sizing: border-box; overflow: auto; }
/* The events log is a stretching column: it keeps its own layout, minus the duplicate title bar above its ECO header */
html.mobile-deck .deck-page > #economic-calendar-widget-host { display: flex !important; flex-direction: column; overflow: hidden; }
html.mobile-deck #economic-calendar-widget-host > .economic-calendar-heading { display: none !important; }
/* Terminal pages (DEX, TV, CHAT) run inside the screen, loaded the first time it is reached */
html.mobile-deck .deck-page.is-frame > .deck-frame { display: block; width: 100%; border: 0; background: #000; overflow: hidden; }
/* MKT: the Fear Index at its natural height on top, the Market Map taking the rest of the screen */
html.mobile-deck .deck-page.is-stack > :first-child { flex: none !important; }
html.mobile-deck .deck-page.is-stack > :first-child > .widget-content { flex: none !important; overflow: visible !important; }
html.mobile-deck .deck-page.is-stack > .widget + .widget { margin-top: 6px !important; }
html.mobile-deck #sector-heatmap > .widget-content, html.mobile-deck #sector-heatmap .tradingview-widget-container { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; }
html.mobile-deck #sector-heatmap iframe { height: 100% !important; }

/* Bottom status line: where you are in the deck */
.deck-foot { order: 1; flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 0 2px; font: 11px "JetBrains Mono", ui-monospace, monospace; color: #6b7178; letter-spacing: .08em; }
.deck-foot button { min-width: 36px; min-height: 26px; padding: 0 8px; border: 0; background: none; color: #e0ac55; font: inherit; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.deck-foot button:disabled { color: #2c3036; }
/* News tape toggle: a bare caret after AUTO-SCROLL; hidden, a hairline NEWS line under the search brings it back */
.deck-tape-caret { margin-left: 6px; padding: 0 2px; border: 0; background: none; color: #6b7178; font: 10px "JetBrains Mono", monospace; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.deck-tape-caret::after { content: ""; position: absolute; inset: -10px -6px; }
.deck-tape-caret { position: relative; }
.deck-tape-peek { display: none; }
html.mobile-deck.deck-full-screen .deck-tape { display: none !important; }
html.mobile-deck.deck-full-screen .deck-tape-peek { display: block; position: sticky; top: var(--deck-strip, 32px); z-index: 29999; width: 100%; height: 16px; padding: 0 9px; border: 0; border-bottom: 1px solid #1d2126; background: #050607; color: #4b5057; font: 9px "JetBrains Mono", monospace; letter-spacing: .14em; text-align: left; cursor: pointer; order: 0 !important; -webkit-tap-highlight-color: transparent; }

/* Phone search: compact rows with the terminal's own code and name, a one-line hint, and two groups */
html.mobile-deck #pigment-terminal-results { max-height: 70dvh; }
html.mobile-deck #pigment-terminal-results .terminal-phone-group { padding: 7px 10px 4px; color: #4b5057; font-size: 9px; letter-spacing: .14em; border-bottom: 1px solid #12151a; background: #030405; }
html.mobile-deck #pigment-terminal-results button.terminal-phone-result { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 0; padding: 6px 10px; text-align: left; }
html.mobile-deck #pigment-terminal-results button.terminal-phone-result > span { grid-row: 1 / 3; align-self: center; }
html.mobile-deck #pigment-terminal-results button.terminal-phone-result strong { font-size: 12px; font-weight: 500; letter-spacing: .02em; }
html.mobile-deck #pigment-terminal-results button.terminal-phone-result small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7178; font-size: 10px; letter-spacing: .02em; }
html.mobile-deck #pigment-terminal-results button.terminal-phone-result.is-here strong::after { content: ' · ON SCREEN'; color: #60ad93; font-size: 9px; letter-spacing: .1em; }

/* Price Action header on the phone: two tight rows instead of three loose ones.
   Row 1: logo, ticker, price and change. Row 2: timeframes (sliding sideways when they don't fit) and the views. */
html.mobile-deck #live-price-action .price-action-chart-identity { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 30px 26px; column-gap: 10px; align-items: center; height: auto !important; min-height: 0 !important; padding: 2px 8px 2px !important; }
html.mobile-deck #live-price-action .price-action-chart-search { grid-column: 1; grid-row: 1; min-width: 0; margin: 0 !important; }
html.mobile-deck #live-price-action .price-action-chart-quote { grid-column: 2; grid-row: 1; margin: 0 !important; justify-self: end; }
html.mobile-deck #live-price-action .price-action-chart-tools { grid-column: 1; grid-row: 2; display: flex !important; align-items: center; min-width: 0; width: auto !important; margin: 0 !important; justify-content: flex-start !important; gap: 2px; }
html.mobile-deck #live-price-action .price-action-chart-ranges { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
html.mobile-deck #live-price-action .price-action-chart-ranges::-webkit-scrollbar { display: none; }
html.mobile-deck #live-price-action .price-action-chart-ranges button { flex: none; }
html.mobile-deck #live-price-action .price-action-chart-view-controls { grid-column: 2; grid-row: 2; width: auto !important; margin: 0 !important; justify-content: flex-end !important; }
/* the Hyperliquid view keeps its logo, without the word, so the row fits */
html.mobile-deck #live-price-action #price-action-view-perp { padding-inline: 4px !important; }
html.mobile-deck #live-price-action #price-action-view-perp > span:not(.tracer-hyperliquid-pixel-mark) { display: none !important; }