/* Shared small-screen rules: keep content in its column, preserve logo ratios,
   and let dense data scroll within its own surface instead of the whole page. */
main,main section,main article,main aside,fieldset{min-width:0}
img{max-width:100%;height:auto}
.ticker{transform:none}
input,select,textarea{max-width:100%;min-width:0}
button,.button,summary{min-height:44px;max-width:100%}
.button{white-space:normal;overflow-wrap:anywhere}
.text-link,.site-footer-links a{min-height:44px;align-content:center}
.market-board>*,.profile-grid>*,.market-detail>*,.create-grid>*,.rewards-columns>*,.token-intro>*,.token-details>*{min-width:0}
.market-title>div,.market-card-top>div,.chart-heading>div{min-width:0;overflow-wrap:anywhere}
.trades-scroll,.leaderboard-scroll,.stock-pairs-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.market-address,.contract-note,.account-card p,.data-note,.small-note{overflow-wrap:anywhere}
dialog,.account-dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain}
dialog .close,.account-dialog .close{width:44px;height:44px;line-height:1}
.site-header #account-control{min-width:0;flex-shrink:1}.site-header #account-control>.button{max-width:100%}
.mobile-menu{flex-shrink:0}.mobile-menu nav{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){
 input,select,textarea{font-size:16px!important}
 h1,h2,h3{overflow-wrap:anywhere;letter-spacing:-.04em}
 .button{gap:14px;padding:16px 20px}
 .button.small{min-height:44px;font-size:14px}
 .app-tabs{gap:8px;flex-wrap:wrap}.app-tabs>a{padding:14px 12px}
 .workspace-heading,.chart-heading{flex-wrap:wrap}
 .chart-tools{flex-wrap:wrap}.chart-tools button{min-height:44px}
 .chart-wrap,#price-chart{max-width:100%;min-width:0}
 .stage-panel,.milk-heading{align-items:flex-start}
 .milk-heading>img{width:100px;flex:0 0 100px;height:auto;object-fit:contain}
 .milk-heading>div{min-width:0}.milk-heading h1{font-size:clamp(36px,9vw,48px)}
 .token-trader,.form-panel,.account-card,.milk-card{max-width:100%}
 .create-grid aside{grid-row:auto}
 .trade-receipt div,.recipe-line,.preview-bottom{flex-wrap:wrap}
 .trade-receipt dd,.recipe-facts dd{overflow-wrap:anywhere;min-width:0}
 .docs-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-menu a{min-width:0;overflow-wrap:anywhere}
 .docs-content table{font-size:14px}.docs-content th,.docs-content td{padding:12px 6px}
 .rewards-intro h1{flex-wrap:wrap;gap:10px}.rewards-intro h1 img{flex:0 1 64%;height:auto;object-fit:contain}
 .points-bowl>strong{font-size:clamp(40px,10vw,68px);overflow-wrap:anywhere}
 .site-footer-links{gap:10px 20px}.site-footer-links a{padding:8px 0}
 .hero-bottom{gap:12px;flex-wrap:wrap}.ticker{transform:none}
 .token-banner{transform:none}.stock-selected small{font-size:14px}
}
@media(max-width:420px){
 header.site-header{margin-inline:4%;gap:8px}.site-header .brand{width:86px}
 .site-header .button.small{padding:10px 12px;gap:6px}.mobile-menu summary{padding:10px 12px}
 #live-facts,#quote-result,#launch-check-details{grid-template-columns:minmax(0,1fr);gap:5px}
 #live-facts dd,#quote-result dd,#launch-check-details dd{text-align:left;margin-bottom:12px}
 .milk-heading>img{width:75px;flex-basis:75px}.milk-heading{gap:10px}
 .milk-layout,.workspace,.account-layout,.rewards-layout,.token-home{padding-inline:5%}
 .milk-card,.account-card,.form-panel,.token-trader,.earn-panel,.leaderboard-panel{padding:20px}
 .milk-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
 .receipt-card dl>div,.recipe-facts dl>div{flex-wrap:wrap;gap:8px}.recipe-facts dd{max-width:100%;text-align:left}
 .chart-heading h2{font-size:30px}.bowl-tabs button{padding:12px 9px;font-size:16px}
 .bowl-tabs button span{font-size:14px}.market-title{padding:20px;gap:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker *{animation:none!important}}