/* Compact presentation for phones, narrow windows and browser zoom.
   See docs/guides/mobile-adaptation.md. Business calculations stay unchanged. */
@media (max-width:1023px) {
  html[data-mobile-surface]{min-width:0!important;width:100%;scroll-behavior:auto}
  html[data-mobile-surface] body{min-width:0!important;width:100%;margin:0;overflow-x:clip}
  html[data-mobile-surface] *,html[data-mobile-surface] *::before,html[data-mobile-surface] *::after{box-sizing:border-box}
  html[data-mobile-surface] input:not([type=checkbox]):not([type=radio]),html[data-mobile-surface] select,html[data-mobile-surface] textarea{font-size:16px!important;max-width:100%}
  html[data-mobile-surface] button,html[data-mobile-surface] .btn{min-height:44px;touch-action:manipulation}
  html[data-mobile-surface] dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);overflow:auto}
  html[data-mobile-surface] [hidden]{display:none!important}

  
  html[data-mobile-surface=dashboard]{--desktop-header:0px}
  [data-mobile-surface=dashboard] #topWrap{position:relative;height:auto}
  [data-mobile-surface=dashboard] #topWrap header{height:auto;padding:12px;gap:10px;flex-wrap:wrap}
  [data-mobile-surface=dashboard] #topWrap h1{flex-basis:44px;width:44px;height:44px}
  [data-mobile-surface=dashboard] #topWrap h1 img{width:44px;height:44px;transform:none}
  [data-mobile-surface=dashboard] #pageBar{flex:1 1 calc(100% - 60px);min-width:0;flex-wrap:wrap;gap:6px}
  [data-mobile-surface=dashboard] #pageBar .ptab{height:auto;min-height:44px;font-size:13px;padding:8px 10px;gap:5px}
  [data-mobile-surface=dashboard] #loginArea{flex:1 1 100%;width:100%;margin:0;gap:6px;justify-content:flex-start;flex-wrap:wrap}
  [data-mobile-surface=dashboard] #helloTag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  [data-mobile-surface=dashboard] #loginArea>button,[data-mobile-surface=dashboard] #adminTag{padding:8px 10px;height:auto;min-height:44px}
  [data-mobile-surface=dashboard] #helloMenu,[data-mobile-surface=dashboard] #trashPop{position:absolute;left:0!important;right:auto!important;top:100%!important;width:min(360px,calc(100vw - 24px));max-width:100%;max-height:65dvh;overflow:auto}
  [data-mobile-surface=dashboard] #board{display:flex;flex-direction:column;width:100%;min-height:0;padding:12px 12px 88px!important;gap:12px;white-space:normal}
  [data-mobile-surface=dashboard] #board>.column{width:100%!important;min-width:0!important;max-width:100%!important;flex-basis:auto!important;margin:0;max-height:none}
  [data-mobile-surface=dashboard] #board .file-list{max-height:none}
  [data-mobile-surface=dashboard] #board>#featureBlocks.home-feature-blocks{width:100%;min-width:0;max-width:100%;height:calc(100dvh - 24px);min-height:560px;max-height:none;margin:0}
  [data-mobile-surface=dashboard] .home-art{display:none!important}
  [data-mobile-surface=dashboard] body[data-page] #board{padding:12px 12px 88px!important}
  [data-mobile-surface=dashboard] #board .tools-wrap,[data-mobile-surface=dashboard] #board .tools-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%;max-width:100%!important;margin:0;gap:12px!important;padding:8px 0}
  [data-mobile-surface=dashboard] #board .tool-card{width:100%!important;min-width:0;min-height:0;margin:0;padding:0;transform:none!important}
  [data-mobile-surface=dashboard] #board .tool-tx b{font-size:15px;white-space:normal}
  [data-mobile-surface=dashboard] body[data-page=daily-review] #board iframe{height:calc(100dvh - 24px)!important;min-height:560px!important;width:100%}

  

  [data-mobile-surface=dashboard] :is(#overlay,#mgmOv,#rewOv,#recOv,#recLogOv,#myPerfOv,#fundAuditOv,#coinInfoOv,#recPermOv,#rewEditOv,#rewExtraOv,#layOv){padding:8px;align-items:center;overflow:auto}
  [data-mobile-surface=dashboard] :is(#modalBox,#mgmBox,#rewBox,#recBox,#recLogBox,#myPerfBox,#fundAuditBox,#coinInfoBox,#recPermBox,#rewEditBox,#rewExtraBox,#layBox){width:100%!important;min-width:0!important;max-width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:16px;overflow:auto}
  [data-mobile-surface=dashboard] :is(#mHead,.rewHead,.mgm-head,.profile-head){position:sticky;top:0;z-index:5;min-height:60px;height:auto!important;flex-wrap:wrap;gap:8px;padding:12px!important;flex-shrink:0}
  [data-mobile-surface=dashboard] :is(#mHead,.rewHead,.profile-head)>div{max-width:100%;flex-wrap:wrap}
  [data-mobile-surface=dashboard] #mTitle{white-space:normal;overflow-wrap:anywhere}
  [data-mobile-surface=dashboard] :is(#rewBody,#recBody,#recLogBody,#myPerfBody,#fundAuditBody,#rewEditBody,#rewExtraBody,#mBody){padding:12px;min-height:0;overflow:auto;max-width:100%}
  [data-mobile-surface=dashboard] #mSplit{flex-direction:column;min-height:0}
  [data-mobile-surface=dashboard] #mBody>iframe{width:100%!important;height:75dvh!important;min-height:420px}
  [data-mobile-surface=dashboard] #modalBox.k2-calculator-mode{height:calc(100dvh - 16px);overflow:hidden}
  [data-mobile-surface=dashboard] .k2-calculator-mode #mSplit{flex:1;overflow:hidden}
  [data-mobile-surface=dashboard] .k2-calculator-mode #mBody{padding:0!important;overflow:hidden;display:flex}
  [data-mobile-surface=dashboard] .k2-calculator-mode #mBody>iframe{height:100%!important;min-height:0!important;flex:1}
  [data-mobile-surface=dashboard] #mgmBox .mgm-head>div{max-width:calc(100% - 76px);padding-left:0}
  [data-mobile-surface=dashboard] #mgmBox .mgm-head>div::before{display:none}
  [data-mobile-surface=dashboard] #mgmBox .mgm-head h2{font-size:20px}
  [data-mobile-surface=dashboard] #mgmBox .mgm-body{display:flex;flex-direction:column;overflow:visible;padding:10px}
  [data-mobile-surface=dashboard] #mgmBox .mgm-col{min-width:0;padding:12px;overflow:auto;flex-shrink:0}
  [data-mobile-surface=dashboard] #mgmBox .setRow{flex-wrap:wrap}
  [data-mobile-surface=dashboard] #mgmBox .mgm-foot{display:none}
  [data-mobile-surface=dashboard] #mgmBox :is(input[type=text],input[type=password],select){width:100%;max-width:100%}
  [data-mobile-surface=dashboard] .usTable{min-width:600px}
  [data-mobile-surface=dashboard] :is(.rwCardHead,.rwTop,.rwTopItem,.rwRuleInput,.rweRow,.rweDyn,.rweTierRow,.rwePenCond,.perf-audit-toolbar,.perf-remark-actions,.profile-grid){flex-wrap:wrap;min-width:0}
  [data-mobile-surface=dashboard] .rwePenTargets{min-width:0;grid-template-columns:1fr}
  [data-mobile-surface=dashboard] .rwCardHead :is(.rwPool,.rwPeriod){min-width:0;text-align:left}
  [data-mobile-surface=dashboard] :is(.profile-grid,.stat-grid){grid-template-columns:1fr}
  [data-mobile-surface=dashboard] #dlgBox{left:8px!important;top:50%!important;transform:translateY(-50%);width:calc(100vw - 16px);max-height:90dvh;overflow:auto}
  [data-mobile-surface=dashboard] #toast,[data-mobile-surface=dashboard] #accountingSyncNotice{max-width:calc(100vw - 24px)!important;width:max-content;bottom:max(12px,env(safe-area-inset-bottom))!important;overflow-wrap:anywhere}

  
  [data-mobile-surface=review] .container{width:100%;padding:8px}
  [data-mobile-surface=review] .container>header{height:auto;flex-wrap:wrap;padding:12px}
  [data-mobile-surface=review] .tabs{flex-wrap:wrap;gap:6px}
  [data-mobile-surface=review] .tab{flex:1 1 40%;padding:10px}
  [data-mobile-surface=review] .panel.active,[data-mobile-surface=review] #panel-review.active{display:flex;flex-direction:column;gap:12px}
  [data-mobile-surface=review] .panel>.card{width:100%;display:block!important;padding:12px}
  [data-mobile-surface=review] .panel>.card>*{min-width:0;max-width:100%}
  [data-mobile-surface=review] :is(.cmp-dates,.cmp-toolbar,.chart-toolbar,.btn-row){flex-wrap:wrap!important;gap:8px}
  [data-mobile-surface=review] .cmp-side{width:100%}
  [data-mobile-surface=review] .picker-col{min-width:0;width:75px}
  [data-mobile-surface=review] .table-wrap{overflow:auto}
  [data-mobile-surface=review] #cmpTable{overflow:auto;max-width:100%}
  [data-mobile-surface=review] table{min-width:560px;font-size:14px}
  [data-mobile-surface=review] th,[data-mobile-surface=review] td{font-size:13px;padding:8px}
  [data-mobile-surface=review] :is(#monthlyInvitation,.pool-list,.pool-records){grid-template-columns:1fr}
  [data-mobile-surface=review] .monthly-toggle{margin:6px 0}
  [data-mobile-surface=review] .chart-box{height:240px}

  
  [data-mobile-surface=knowledge] .app{height:auto;min-height:100dvh}
  [data-mobile-surface=knowledge] .main{flex-direction:column;min-height:0}
  [data-mobile-surface=knowledge] .topbar{height:auto;min-height:54px;padding:12px;flex-wrap:wrap;gap:8px}
  [data-mobile-surface=knowledge] body{overflow-y:auto}
  [data-mobile-surface=knowledge] .sidebar{width:100%!important;min-width:0;max-width:none;max-height:none;flex:none}
  [data-mobile-surface=knowledge] .tree{max-height:220px;min-height:80px;flex:auto;overflow:auto}
  [data-mobile-surface=knowledge] .content{min-height:500px}
  [data-mobile-surface=knowledge] :is(.doc-view,.editor,.search-results){padding:16px;overflow:auto;overflow-wrap:anywhere}
  [data-mobile-surface=knowledge] :is(.doc-toolbar,.editor-toolbar,.editor-footer-inner,.sa-row){padding:8px;flex-wrap:wrap;gap:6px}
  [data-mobile-surface=knowledge] .editor{min-height:340px}
  [data-mobile-surface=knowledge] .editor-footer{position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom);z-index:5}
  [data-mobile-surface=knowledge] .modal-box{width:calc(100vw - 24px);max-width:100%;max-height:90dvh;overflow:auto}

  
  [data-mobile-surface=k2] .k2-nav{padding:6px}
  [data-mobile-surface=k2] .k2-tabs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  [data-mobile-surface=k2] .k2-tab{min-width:0;padding:8px;font-size:14px}
  [data-mobile-surface=k2] .k2-stage{width:100%;margin:0;height:calc(100dvh - 105px)}
  [data-mobile-surface=k2] .k2-frame{min-height:0;height:100%}
  [data-mobile-surface=k2] .shell{width:100%;padding:12px}
  [data-mobile-surface=k2] :is(.layout,.setup,.overview,.targets,.target-grid,.special-grid,.formula-grid,.grid-2,.market-grid,.metric-grid,.scope,.extra-grid,.hero-grid,.specials,.formula-strip){display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px}
  [data-mobile-surface=k2] .target-value{overflow-wrap:anywhere;white-space:normal}
  [data-mobile-surface=k2] :is(.score-map,.target-strip,.market-map,.weight-flow){grid-template-columns:minmax(0,1fr);gap:12px}
  [data-mobile-surface=k2] :is(.topbar,.section-head,.metric-top,.metric-head,.controls){flex-wrap:wrap;gap:8px;min-width:0}
  [data-mobile-surface=k2] .topbar{padding:14px}
  [data-mobile-surface=k2] .topbar h1{font-size:25px}
  [data-mobile-surface=k2] .status{white-space:normal}
  [data-mobile-surface=k2] .summary-panel{position:static}
  [data-mobile-surface=k2] .metric summary{flex-wrap:wrap}
  [data-mobile-surface=k2] .metric summary:has(input){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  [data-mobile-surface=k2] .metric summary:has(input)>:first-child,[data-mobile-surface=k2] .metric summary .input-unit{grid-column:1 / -1;min-width:0}
  [data-mobile-surface=k2] .metric-body,[data-mobile-surface=k2] .metric .body{margin:0;padding:12px}
  [data-mobile-surface=k2] .route{display:flex;flex-direction:column}
  [data-mobile-surface=k2] :is(.formula,.notice,.sub){overflow-wrap:anywhere}
  [data-mobile-surface=k2] .table-wrap{overflow:auto}
  [data-mobile-surface=k2] table{min-width:520px}

  
  [data-mobile-surface=dashboard] #pageBar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:4px 0;touch-action:pan-x pan-y}
  [data-mobile-surface=dashboard] #pageBar .ptab{flex:0 0 auto;font-size:12px;padding:8px;white-space:nowrap;transform:none!important}
  [data-mobile-surface=dashboard] #pageBar .nav-icon{width:17px;height:17px}
  html[data-mobile-surface=dashboard]{height:auto!important}
  [data-mobile-surface=dashboard] body[data-page]{height:auto!important;min-height:100dvh}[data-mobile-surface=dashboard] body[data-page=home]{background:#b9dcfa url('../assets/optimized/calendar-sky.webp') center top / cover no-repeat scroll!important}
  [data-mobile-surface=dashboard] body[data-page] #board::before{display:none!important}
  [data-mobile-surface=dashboard] #board>#featureBlocks.home-feature-blocks{height:auto;min-height:0}
  [data-mobile-surface=dashboard] .feature-block,[data-mobile-surface=dashboard] .feature-block-body{height:auto}
  [data-mobile-surface=dashboard] body[data-page] #board iframe[data-mobile-flow]{height:var(--mobile-frame-height,900px)!important;min-height:0!important;max-height:none!important;touch-action:pan-y}
  html[data-mobile-surface=review],html[data-mobile-surface=review] body,html[data-mobile-surface=knowledge],html[data-mobile-surface=knowledge] body{height:auto!important;min-height:0!important;overflow-y:visible!important}
  [data-mobile-surface=knowledge] .app{height:auto;min-height:0}
  [data-mobile-surface=knowledge] :is(.main,.sidebar,.content,.doc-view,.search-results,.editor-wrap,.editor){overflow:visible;height:auto;max-height:none;flex:none}
  [data-mobile-surface=knowledge] .tree{max-height:none;overflow:visible}
  [data-mobile-surface=knowledge] .welcome{padding:16px 8px}
  [data-mobile-surface=knowledge] .welcome-card{padding:24px 12px;width:100%}
  [data-mobile-surface=knowledge] .welcome-actions{flex-wrap:wrap;gap:8px}
  [data-mobile-surface=knowledge] :is(button,.btn,.sa-btn){white-space:nowrap;font-size:12px;flex-shrink:0}
  [data-mobile-surface=knowledge] .welcome-actions .btn{padding:10px 12px;gap:5px}
  [data-mobile-surface=review] .picker.mobile-native-picker{gap:8px;padding:12px 8px;backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-mobile-surface=review] .mobile-native-picker .picker-col{display:none!important}
  [data-mobile-surface=review] .mobile-date-select{flex:1;min-width:0;width:0;height:48px;padding:8px 4px;border:1px solid #b9cdf4;border-radius:12px;background:#f4f8ff;color:#2456a1;text-align:center}
  [data-mobile-surface=review] .picker-labels span{flex:1;min-width:0;width:auto}
}


#topWrap h1{flex:0 0 120px;width:120px;height:60px;margin:0}
#topWrap h1 img{width:120px;height:40px;max-width:100%;max-height:100%;object-fit:contain;transform:none;border-radius:0}

@media(max-width:760px){[data-mobile-surface=dashboard] #topWrap h1{flex-basis:88px;width:88px;height:44px}[data-mobile-surface=dashboard] #topWrap h1 img{width:88px;height:30px}}
/* Medium-width zoom keeps parameter controls compact without squeezing labels. */
@media(min-width:600px) and (max-width:1023px){
 [data-mobile-surface=k2] .setup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}