/* ==========================================================================
   fit.css : screen-fit layer (phones, landscape phones, iPads, wide desktop).
   Loaded after app.css. Layout only: no colors, no theme look changes.
   Kept in its own file so parallel edits to app.css never collide with it.
   ========================================================================== */

/* ---------- Theme Studio grid: 3 cards per row on every screen ---------- */
#st-themes.ts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
#st-themes .ts-card2{min-width:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;border-radius:clamp(12px,3.2vw,18px)}
#st-themes .ts-card2>.ts-vis3,#st-themes .ts-card2>.ts-meta{container-type:inline-size;min-width:0}
#st-themes .ts-vis3.ts-vis-hero{height:auto!important;min-height:min(28vw,142px);flex:none;align-self:stretch;padding:clamp(6px,1.6vw,10px) clamp(6px,1.8vw,14px)!important}
#st-themes .ts-vhead{flex-wrap:wrap;gap:3px}
#st-themes .ts-vtag{font-size:clamp(7px,4.6cqw,9.5px);padding:2px clamp(4px,3cqw,8px);letter-spacing:.04em;white-space:normal;line-height:1.2}
#st-themes .ts-price-tag{font-size:clamp(8px,5cqw,11px);padding:2px clamp(5px,3.5cqw,9px)}
#st-themes .ts-free-tag{font-size:clamp(7px,4.6cqw,9.5px);padding:2px clamp(4px,3cqw,8px)}
#st-themes .ts-hero-art{gap:clamp(2px,3cqw,10px);padding-top:2px;min-width:0}
#st-themes .tsh-left{gap:clamp(2px,1.6cqw,4px)}
#st-themes .tsh-sub{font-size:clamp(6.5px,4.2cqw,9px);white-space:normal;line-height:1.15}
#st-themes .tsh-r{font-size:clamp(13px,12cqw,26px)}
#st-themes .ts-vh-fxp .tsh-r{font-size:clamp(14px,13.5cqw,29px)}
#st-themes .tsh-bar{max-width:100%}
#st-themes .tsh-curve{width:100%;max-width:118px;height:clamp(10px,9cqw,22px)}
#st-themes .tsh-pills{gap:3px;flex-wrap:wrap}
#st-themes .tsh-pills span{font-size:clamp(6.5px,4cqw,8.5px);padding:1px clamp(2px,2cqw,6px);white-space:nowrap}
#st-themes .tsh-right{width:clamp(34px,34cqw,82px);height:clamp(34px,34cqw,82px)}
#st-themes .tsh-right svg.th-mascot{width:clamp(32px,32cqw,78px)!important;height:clamp(32px,32cqw,78px)!important}
#st-themes .tsh-wh-emblem{width:clamp(28px,28cqw,64px);height:clamp(28px,28cqw,64px)}
#st-themes .tsh-wh-emblem svg{width:100%;height:auto}
@container (max-width:170px){
  #st-themes .ts-hero-art{position:static}
  #st-themes .tsh-right{position:absolute;right:clamp(4px,4cqw,10px);bottom:clamp(4px,4cqw,10px);z-index:0}
  #st-themes .tsh-left{position:relative;z-index:1}
  #st-themes .tsh-bar,#st-themes .tsh-curve{max-width:62cqw}
  #st-themes .tsh-right{width:38cqw;height:38cqw}
  #st-themes .tsh-right svg.th-mascot{width:36cqw!important;height:36cqw!important}
}
#st-themes .ts-meta{flex-direction:column;align-items:stretch;gap:6px;padding:clamp(6px,6cqw,12px);flex:1}
#st-themes .ts-mtxt b{font-size:clamp(11.5px,9.5cqw,14px);line-height:1.2;overflow-wrap:anywhere}
#st-themes .ts-cta{display:flex;align-items:center;justify-content:center;text-align:center;min-height:36px;width:100%;margin-top:auto;white-space:normal;line-height:1.15;font-size:clamp(10.5px,8.6cqw,11.5px);padding:4px 6px;border-radius:12px}
@media (max-width:480px){#st-themes.ts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}

/* ---------- Account chip: may shrink instead of pushing the header off screen ---------- */
.acchip{min-width:0}
.acchip span{min-width:0}
.acchip em{white-space:nowrap}

/* ---------- Brain header: wraps when there is no room (never on wide screens) ---------- */
.br-page>.hdr{flex-wrap:wrap;row-gap:10px}
@media (max-width:640px){
  .br-page>.hdr h1{flex:1 1 0;min-width:0;width:auto}
  .br-page>.hdr>.sp{flex:0 0 100%;order:2;height:0}
  .br-page>.hdr>.br-th-sig{order:1}
  .br-page>.hdr>.seg{order:3;flex:1 1 auto;min-width:0}
  .br-page>.hdr>.seg button{min-height:44px;height:auto;flex:1 1 0}
  .br-page>.hdr>.br-share-btn{order:4;min-height:44px!important;height:auto;flex:none;width:auto}
}

/* ---------- Calendar: 7 columns always fit the screen ---------- */
@media (max-width:759px){
  .cal{gap:3px}
  .cal-grid-pep{padding:6px!important;gap:4px!important}
  .cal .c.c-day{container-type:inline-size;aspect-ratio:auto;min-height:clamp(50px,14.5vw,72px);padding:4px 3px!important;min-width:0}
  .cal-grid-fxp .c.c-day{padding-left:6px!important}
  .cal-grid-fxp .c-kerb{width:3px!important}
  .cal .c.c-day .c-top{gap:1px;min-width:0;flex-wrap:wrap}
  .cal .c.c-day .d{font-size:min(12px,24cqw)}
  .cal-grid-pep .c.c-day .d{padding:1px 3px}
  .cal .c-tcnt{font-size:min(8.5px,18cqw);padding:1px 2px;min-width:0;overflow:hidden}
  .cal .c-live-dot{font-size:min(8.5px,17cqw);white-space:nowrap;overflow:hidden;min-width:0}
  .cal .c.c-day .c-mid{gap:2px;margin:1px 0;min-width:0}
  .cal .c.c-day .c-r{font-size:min(15px,26cqw)!important;max-width:100%;overflow:hidden;white-space:nowrap}
  .cal .c.c-day .c-pl-pill{font-size:min(11px,21cqw)!important;padding:1px 3px!important;max-width:100%;overflow:hidden;white-space:nowrap}
  .cal .c.c-day .c-pl-pill[data-s]{font-size:0!important}
  .cal .c.c-day .c-pl-pill[data-s]::after{content:attr(data-s);font-size:min(11px,21cqw)}
  .cal .c.c-day .c-live-tag{font-size:min(9px,18cqw);white-space:normal;text-align:center;line-height:1.1}
}

/* calendar month hero: the big total gets its own row on narrow phones */
@media (max-width:480px){
  .ch-stats-row>.ch-stat:first-child{grid-column:1/-1}
  .ch-val.big{font-size:clamp(26px,8.6vw,34px)!important}
}

/* ---------- Practice: the device mock fits the screen ---------- */
@media (max-width:840px){
  .p3-split-stage{grid-template-columns:minmax(0,1fr)}
  .p3-split-stage>*{min-width:0}
}
@media (max-width:480px){
  .psteps .pstep-btn{flex-direction:column;gap:2px;padding:5px 3px;min-width:0;min-height:44px;font-size:11px;line-height:1.1}
  .psteps .pstep-btn span{white-space:normal!important;text-align:center;overflow-wrap:anywhere}
  .psteps .pstep-btn i{width:18px;height:18px;flex:none}
}

/* ---------- Settings: level row, the badges button gets its own line on phones ---------- */
@media (max-width:480px){
  .st-btop{flex-wrap:wrap}
  .st-btop>a.btn{flex:1 1 100%;min-height:40px;justify-content:center}
}

/* ---------- Home: live trades bar, the button drops under the trades on narrow phones ---------- */
.ltb-chip{max-width:100%;min-width:0}
@media (max-width:420px){
  .live-top-bar{flex-wrap:wrap}
  .live-top-bar .ltb-left{flex:1 1 100%}
  .live-top-bar .ltb-cta{flex:1 1 100%;min-height:40px}
}

/* ---------- Hornet Quest bar: actions get their own row on narrow phones ---------- */
@media (max-width:480px){
  .hq-bar{flex-wrap:wrap;row-gap:8px}
  .hq-bar>.hq-bar-l{flex:1 1 100%;min-width:0}
  .hq-bar>.hq-bar-r{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start}
  .hq-bar>.hq-bar-r>button:not(.hq-x-btn){min-height:40px}
  .hq-bar>.hq-bar-l{padding-right:44px}
  .hq-bar>.hq-bar-r>.hq-x-btn{position:absolute;top:9px;right:10px;width:36px;height:36px}
}

/* ---------- Home header: account chip moves under the greeting on narrow phones ---------- */
@media (max-width:400px){
  #view .hdr:has(>.acchip){flex-wrap:wrap;row-gap:8px}
  #view .hdr>.acchip{order:5;flex:0 1 auto;max-width:100%}
}

/* ---------- Terminal home: big total scales down on narrow phones ---------- */
@media (max-width:420px){
  .ic-hmain b{font-size:clamp(34px,11.6vw,52px)}
}

/* ---------- Stop-loss / exit mode buttons: labels wrap instead of spilling ---------- */
@media (max-width:420px){
  .mg-modes button{min-width:0;white-space:normal;line-height:1.15;padding:6px 4px;text-align:center}
}

/* ---------- Touch screens: invisible 40px+ tap areas on small controls (no visual change) ---------- */
@media (pointer:coarse){
  .seg button,.chips>.chip,.sh-head>button.txt,.yn button,button.tl-undo,.hq-bar-r>button:not(.hq-x-btn),.pe-add,.jf-mbtn,.dots button,.unit button,#view button.link,.tagx button,.skipb,.ltb-cta,
  .ic-seg button,.pp-seg button,.fx-seg button,.ex-seg button,.mg-modes button,.psteps .pstep-btn,.tog,.chip.sh-th-pill,.fx-go{position:relative}
  .seg button::before,.chips>.chip::before,.sh-head>button.txt::before,.yn button::before,button.tl-undo::before,.hq-bar-r>button:not(.hq-x-btn)::before,.pe-add::before,.jf-mbtn::before,.dots button::before,.unit button::before,#view button.link::before,.skipb::before,.ltb-cta::before,
  .ic-seg button::before,.pp-seg button::before,.fx-seg button::before,.ex-seg button::before,.mg-modes button::before,.psteps .pstep-btn::before,.chip.sh-th-pill::before,.fx-go::before{content:"";position:absolute;top:-10px;bottom:-10px;left:-2px;right:-2px}
  .yn button::before,.dots button::before,.unit button::before{left:-4px;right:-4px}
  .seg button::before,.chips>.chip::before,.ic-seg button::before,.pp-seg button::before,.ex-seg button::before,.fx-seg button::before{left:-3px;right:-3px}
  button.tl-undo::before{top:-12px;bottom:-12px}
  .br-share-btn{position:relative}
  .br-share-btn::before{content:"";position:absolute;top:-5px;bottom:-5px;left:0;right:0}
  .tagx button::before{content:"";position:absolute;inset:-10px}
  .tog::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-4px;right:-4px}
}

/* ---------- Sheets: respect the notch in landscape, keep more room for content on short screens ---------- */
.sh-head{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.sh-foot{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (max-height:500px) and (orientation:landscape){
  .sh-head{padding-top:6px;padding-bottom:6px}
  .sh-foot{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}