/* Mobile fit layer (Nov 2026). Loaded after every legacy workspace stylesheet; overrides only.
   Scoped to body[data-app] so public pages are untouched. */

/* ---------- T1: charts must never widen the page ---------- */
/* Plotly falls back to 700px when a plot is created in a panel that has not laid out yet
   (terminal.js fitPlots() re-measures). This guard keeps any late plot inside its card. */
body[data-app] .native-visual{min-width:0;max-width:100%;overflow:hidden}
body[data-app] :is(.native-visual,.native-advanced,.terminal-content,.chart-workspace) .js-plotly-plot{max-width:100%}
body[data-app] :is(.native-visual-grid,.terminal-content,.chart-workspace,.native-panel){min-width:0}
/* clip (not hidden) does not create a scroll container, so the sticky topbar keeps working. */
@supports (overflow:clip){body[data-app] .workspace{overflow-x:clip}}

/* ---------- T2: tab rows that can overflow get an edge fade (tf-ui.js sets data-overflow) ---------- */
body[data-app] :is(.desk-tabs,.dream-section-nav,.category-strip){display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:16px;--fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%)}
body[data-app] :is(.desk-tabs,.dream-section-nav,.category-strip)::-webkit-scrollbar{display:none}
body[data-app] :is(.desk-tabs,.dream-section-nav,.category-strip)[data-overflow~=start]{--fade-l:32px}
body[data-app] :is(.desk-tabs,.dream-section-nav,.category-strip)[data-overflow~=end]{--fade-r:32px}
body[data-app] :is(.desk-tabs,.dream-section-nav,.category-strip)>*{flex:none;scroll-snap-align:start}

/* Market desk tabs: underline tabs; short labels on phones so all four fit at 360px. */
body[data-app] .desk-tabs{gap:24px;border-bottom:1px solid var(--tf-line)}
body[data-app] .desk-tabs button{position:relative;min-height:46px;min-width:44px;padding:0 1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;
  color:var(--tf-muted);font:500 13px/1 var(--tf-font-ui);white-space:nowrap;transition:color var(--tf-d1),border-color var(--tf-d2)}
body[data-app] .desk-tabs button:hover{color:var(--tf-text)}
body[data-app] .desk-tabs button[aria-pressed=true]{color:var(--tf-accent);border-bottom-color:var(--tf-accent)}
body[data-app] .desk-tabs button:focus-visible{outline-offset:-2px;border-radius:6px}
body[data-app] .desk-tabs .label-short{display:none}
@media(max-width:480px){
  body[data-app] .desk-tabs{gap:20px}
  body[data-app] .desk-tabs .label-full{display:none}
  body[data-app] .desk-tabs .label-short{display:inline}
  body[data-app] .desk-tabs button{min-height:44px}
}

/* Crypto section nav: jump links, scroll-spy sets aria-current (no permanently "active" first item). */
body[data-app] .dream-section-nav{gap:22px}
body[data-app] .dream-section-nav>button,body[data-app] .dream-section-nav>button:first-child{min-width:44px;min-height:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;
  color:var(--tf-muted);font:500 13px/1 var(--tf-font-ui)}
body[data-app] .dream-section-nav>button:hover{color:var(--tf-text)}
body[data-app] .dream-section-nav>button[aria-current=true]{color:var(--tf-accent);border-bottom-color:var(--tf-accent)}

/* News digestion category chips */
@media(max-width:768px){body[data-app] .category-strip{margin-inline:-16px;padding-inline:16px}}
body[data-app] .category-strip button{min-height:40px;font-size:12px}
@media(pointer:coarse){body[data-app] .category-strip button{min-height:44px}}

/* ---------- Page intro: stack the market picker under the headline on phones ---------- */
@media(max-width:480px){
  body[data-app] .market-view>.page-intro{flex-direction:column;align-items:stretch;gap:16px}
  body[data-app] .market-choice{max-width:none;justify-items:start;padding-bottom:0}
  body[data-app] .market-choice select{width:100%;max-width:none;min-height:44px;font-size:16px;padding:9px 34px 9px 12px}
  body[data-app] .market-choice>span{max-width:none;text-align:left}
}
body[data-app] .market-choice label{font-size:10px;letter-spacing:1.2px}
body[data-app] .market-choice>span{font-size:11px}

/* ---------- Topbar on phones ---------- */
@media(max-width:680px){
  body[data-app] .topbar .account-menu{margin-left:auto}
  body[data-app] .search-box{min-width:0}
  body[data-app] .search-box input{min-width:0;min-height:40px;text-overflow:ellipsis}
}

/* ---------- Bottom nav: More is active when the current desk lives in the sheet ---------- */
body[data-app] #next-app .tf-bottom-nav.mobile-nav>.tf-nav-item.in-more{color:var(--tf-accent)}
body[data-app] #next-app .tf-bottom-nav .tf-nav-item.in-more .tf-nav-icon{background:var(--tf-wash-strong);box-shadow:inset 0 0 0 1px var(--tf-edge)}
/* Room for the fixed bar so the last card is never hidden behind it */
@media(max-width:680px){body[data-app] .workspace main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- Long strings, cards and tables ---------- */
body[data-app] .native-headlines article :is(h3,p){overflow-wrap:anywhere}
body[data-app] :is(.page-intro h1,.research-intro h1,.section-heading h2,.digest-row h3,.signal-card h3,.week-card h2,.native-section-title h2){overflow-wrap:break-word}
body[data-app] :is(.desk-rich-copy,[data-week-rich]) table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap;overscroll-behavior-x:contain}
@media(max-width:430px){body[data-app] .dream-factor-grid{grid-template-columns:minmax(0,1fr)}}

/* Watchlist rows: fluid columns instead of 410px of fixed tracks (desktop/tablet; phones keep their 2-column layout). */
@media(min-width:681px){
  body[data-app] :is(.watch-row,.watch-column-head){grid-template-columns:minmax(0,1.7fr) minmax(76px,.6fr) minmax(104px,.8fr) minmax(104px,.75fr)}
}
@media(min-width:681px) and (max-width:1200px){
  body[data-app] :is(.watch-row,.watch-column-head){grid-template-columns:minmax(0,1.7fr) minmax(76px,.6fr) minmax(104px,.8fr)}
}

/* Mobile chat sheet: 100% (not 100vw, which includes a desktop scrollbar) */
@media(max-width:680px){body[data-app] .conversation{width:100%;left:0;right:0}}

/* ---------- Touch targets (≥44px on phones) ---------- */
body[data-app] .terminal-breadcrumb{font-size:11px}
body[data-app] .terminal-breadcrumb>button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 4px;font-size:12px;color:var(--tf-muted)}
@media(max-width:680px){body[data-app] .terminal-breadcrumb{margin-bottom:6px}}
body[data-app] .native-headlines article>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12px}
@media(max-width:680px){
  body[data-app] #market-strip>.mover{min-height:48px;justify-content:center}
  body[data-app] .signal-card-head>.signal-company{min-height:44px}
  body[data-app] .digest-row>.digest-company,body[data-app] .digest-score>button{min-width:44px}
  body[data-app] #watch-toggle{min-height:44px}
  body[data-app] .chart-targets-close{min-width:44px}
}

/* ---------- Type floor: no text below 11px (sans) / 10px (mono labels) ---------- */
body[data-app] .instrument-metrics small{font-size:11px}
body[data-app] .watch-column-head{font-size:10px}
body[data-app] .watch-row small{font-size:11px}
body[data-app] .engine-switch button{font-size:12px}
body[data-app] .native-headlines article>div{font-size:11px}
body[data-app] .native-svg .gauge-row .gauge-range{font-size:10px;color:var(--tf-quiet)}
body[data-app] .native-chart-asof{font-size:11px;color:var(--tf-quiet)}
body[data-app] .wordmark small{font-size:10px}
body[data-app] .research-link small{font-size:11px}
body[data-app] .eyebrow{font-size:10px}

/* ---------- T7 polish: type floor (sans >= 11px, mono labels >= 10px) ---------- */
body[data-app] #next-app .wordmark small{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:1.4px}
body[data-app] #next-app .search-box kbd{font:500 10px/1 'IBM Plex Mono',monospace}
body[data-app] #next-app :is(.eyebrow,.market-choice label,#market-date,.terminal-asof,.mover-label,.move,.watch-toolbar label,.workspace-footer span,.desk-direction,.week-edition-label,.watch-overview span,.watch-overview small){font-size:11px}
body[data-app] #next-app #instrument-sector{font-size:12px}
body[data-app] #next-app .watchlist-view .page-intro .primary-button{font-size:12px}
@media(max-width:680px){body[data-app] #next-app .watchlist-view .page-intro.compact .primary-button{font-size:0}}
body[data-app] #next-app .company-logo>span{font-size:10px}
body[data-app] #next-app #events-view :is(time,small){font-size:11px}
body[data-app] #next-app [data-dream-quote-status]{font-size:11px}

/* ---------- T7 polish: legacy orange (#ff9f1c) -> champagne accent ---------- */
body[data-app]{--green:var(--atelier-accent);--lime:var(--atelier-accent)}
body[data-app] #next-app .native-live-dot{background:var(--tf-accent)}
body[data-app] #next-app .native-text-button{color:var(--tf-accent)}
body[data-app] #next-app .native-action{background:var(--tf-accent-grad);color:var(--tf-accent-ink);border:1px solid var(--tf-accent-border)}
body[data-app] #next-app .native-svg .chartist-stage :is(button.active,.chart-tf-btn.active,.chart-lens-choice.price.active){background:var(--tf-wash-strong);color:var(--tf-accent);border-color:var(--tf-edge)}
body[data-app] #next-app .native-svg .chart-range-btn.active{background:var(--tf-wash-strong)!important;color:var(--tf-accent)!important}
body[data-app] #next-app .native-charts .chart-tf-btn.active{background:var(--tf-wash-strong);color:var(--tf-accent);border-color:var(--tf-edge)}

/* ---------- T7 polish: calmer hover (no lift on dense lists) ---------- */
body[data-app] :is(.digest-row,.watch-row,.wn-row,.signal-card):hover{transform:none}
body[data-app] #next-app :is(.native-section-title>p,.native-chart-header>span,.quiet-label,.news-meta span,.news-meta .news-type,.signal-card-foot>span,.signal-score small,.terminal-footnote span,.watch-toolbar span,.watch-toolbar button,.outline-button>span,.research-kicker span,.research-stat small,.research-stat span,.crypto-move span,.research-footnote,.events-desk-meta span,.event-time small,.event-period,.digest-company small,.digest-company strong,.native-visual small,.native-decision>summary,.indicator-menu>summary,.native-timeframes>button,.chart-tf-btn,.chartist-target,.chartist-eyebrow,.native-stat-grid small,.native-ledger :is(dt,dd),.native-table-scroll th,.mover small,.search-result small,.desk-panel small,summary small,summary span){font-size:11px}
body[data-app] #next-app :is(.watch-column-head span,.dream-factor small,.dream-chart-controls label,.research-heading span,.native-export>summary,.native-risk>summary,.native-drawing-tools button,.chart-window-bar button,.chart-tool-tabs button,.chart-lens-choice small,.chart-lens-choice span,.chart-targets-close,.native-ledger dt,.dream-factor dt){font-size:11px}

/* ---------- T7 polish: movers strip shows a quiet skeleton instead of two stray hairlines while loading ---------- */
body[data-app] .market-strip:empty{min-height:74px;background:
  linear-gradient(var(--tf-skeleton),var(--tf-skeleton)) 0% 50%/22% 16px no-repeat,
  linear-gradient(var(--tf-skeleton),var(--tf-skeleton)) 33.3% 50%/22% 16px no-repeat,
  linear-gradient(var(--tf-skeleton),var(--tf-skeleton)) 66.6% 50%/22% 16px no-repeat,
  linear-gradient(var(--tf-skeleton),var(--tf-skeleton)) 100% 50%/22% 16px no-repeat}

/* ---------- Round 2 ---------- */
/* Quote timestamp: never break inside the date (the hyphen was a break point at 390px) */
body[data-app] #next-app .terminal-asof{white-space:nowrap;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
/* Terminal Headlines were #d6d6d6 on white in the light theme (1.45:1) */
html[data-theme=light] body[data-app] #next-app .native-headlines article h3{color:var(--atelier-text)}
html[data-theme=light] body[data-app] #next-app .native-headlines article p{color:var(--atelier-muted)}
html[data-theme=light] body[data-app] #next-app .native-headlines article>div{color:var(--atelier-quiet)}
html[data-theme=light] body[data-app] #next-app .native-headlines article>a{color:var(--atelier-accent)}
html[data-theme=light] body[data-app] #next-app .native-headlines article{border-color:var(--atelier-line)}
@media(max-width:480px){body[data-app] #next-app .terminal-breadcrumb{flex-wrap:wrap;row-gap:0}body[data-app] #next-app .terminal-asof{flex-basis:100%;margin-left:0;margin-top:-8px}}
/* Light theme: legacy greys under 4.5:1 found by the tester's overflow_audit (engine switch 4.34, AI score '/100' 3.96) */
html[data-theme=light] body[data-app] #next-app .engine-switch>button:not(.active){color:#5f6065}
html[data-theme=light] body[data-app] #next-app .signal-score small{color:var(--atelier-muted)}