/* Motal responsive repair, 2026-11-06. Presentation only; no access or routing changes. */
:root{--motal-gutter:clamp(18px,4vw,56px);--motal-header-height:76px}
html{scroll-padding-top:calc(var(--motal-header-height) + 16px)}
body{min-width:280px}
button,input,select,textarea{max-width:100%}
button{line-height:1.45}
button svg,a svg{flex-shrink:0}
.app>header{height:var(--motal-header-height);gap:20px;padding-inline:var(--motal-gutter)}
.app>header .brand{flex-shrink:0}
.app>header nav{min-width:0;gap:clamp(10px,1.7vw,26px)}
.app>header .profile{min-width:0;max-width:230px;gap:12px}
.app>header .profile>span{min-width:0}
.app>header .profile b{max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app>header .iconbtn,.app>header .hamb{flex-shrink:0}
#motal-vps-entry{position:static!important;inset:auto!important;z-index:auto!important;box-shadow:none!important;background:transparent!important;color:#627083!important;border-radius:0!important;padding:0 3px!important;font:inherit!important;font-size:14px!important;font-weight:500!important;display:inline-flex;align-items:center;min-height:48px;white-space:nowrap;text-decoration:none}
#motal-vps-entry:hover{color:var(--navy)!important}
:where(.quickbar,.appgrid-v2,.flow-heading,.home-flow-steps,.credential-zone,.credential-head,.credential-stats,.codex-zone,.stats,.audit-stats,.tabletools,.audit-heading,.windows-client-state,.support-v2)>*{min-width:0}
.command-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);padding-inline:var(--motal-gutter)}
.hero-copy{width:auto;min-width:0}
.hero-copy>p{max-width:620px;overflow-wrap:anywhere}
.hero-actions{flex-wrap:wrap}
.hero-actions button{height:auto;min-height:52px;padding:14px 20px}
.matrix-art{position:relative;inset:auto;width:100%;max-width:390px;justify-self:end;min-width:0;padding-left:clamp(18px,3vw,45px)}
.quickbar{width:min(calc(100% - 2*var(--motal-gutter)),1240px);margin-inline:auto;gap:16px}
.quickbar>div{min-width:0}
.quickbar>div:first-child>span:last-child{min-width:0}
.quickbar b{overflow-wrap:anywhere}
.quickbar .avatar{flex-shrink:0}
.download-zone,.support-v2{width:min(calc(100% - 2*var(--motal-gutter)),1240px);padding-inline:0}
.zone-head{gap:24px;flex-wrap:wrap}
.zone-head>div:first-child{flex:1 1 480px;min-width:0}
.zone-head h2{overflow-wrap:anywhere}
.device-detected{max-width:100%;flex-shrink:0;white-space:normal}
.appgrid-v2{grid-template-columns:repeat(4,minmax(0,1fr))}
.device-card{min-width:0}
.device-card>p,.device-meta{overflow-wrap:anywhere}
.device-meta{gap:8px;flex-wrap:wrap}
.flow-heading{grid-template-columns:auto minmax(0,1fr) auto}
.flow-heading h2{overflow-wrap:anywhere}
.flow-primary-actions{flex-wrap:wrap}
.flow-primary-actions button{height:auto;min-height:46px;padding-block:11px;white-space:normal}
.home-apple-note{grid-template-columns:auto minmax(0,1fr) auto auto}
.home-apple-note a{overflow-wrap:anywhere}
.home-flow-steps article>div{min-width:0;overflow-wrap:anywhere}
.home-flow-steps b{align-items:flex-start;line-height:1.65}
.flow-footer{gap:24px;flex-wrap:wrap}
.flow-footer>div:first-child{min-width:0;flex:1 1 240px}
.flow-footer-actions{max-width:100%;flex-wrap:wrap;gap:10px}
.flow-footer-actions>a,.flow-footer-actions .import-link,.flow-footer-actions .copy-sub{height:auto;min-height:46px;padding-block:12px;white-space:normal;text-align:center}
.credential-zone{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,7vw,100px)}
.credential-card{min-width:0}
.credential-head{flex-wrap:wrap}
.credential-head>span:nth-child(2){flex:1;min-width:120px;overflow-wrap:anywhere}
.credential-head .status{flex-shrink:0;margin-left:auto}
.credential-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.credential-stats b{overflow-wrap:anywhere}
.locked-url,.protected-import{height:auto;min-height:58px;min-width:0}
.locked-url>span,.protected-import>span{min-width:0;overflow-wrap:anywhere}
.copy-enabled .credential-copy-button{flex-shrink:0}
.codex-zone{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px)}
.codex-downloads>a{gap:16px;min-width:0}
.codex-downloads>a>span{min-width:0;grid-template-columns:28px minmax(0,1fr);gap:4px 10px}
.codex-downloads b,.codex-downloads small{overflow-wrap:anywhere}
.adminhead{gap:24px;flex-wrap:wrap}
.adminhead>div{min-width:0;flex:1 1 420px}
.adminhead>.primary{flex-shrink:0;min-height:44px;font-size:14px}
.tablecard{min-width:0;max-width:100%}
.tablewrap{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tabletools{gap:14px;flex-wrap:wrap}
.tabletools input{min-width:0;width:min(100%,360px);flex:0 1 360px}
.tabletools>span,.tabletools>small{overflow-wrap:anywhere;line-height:1.65}
.usage-table td:first-child{display:table-cell}
.usage-table td:first-child>b,.usage-table td:first-child>small{display:block;overflow-wrap:anywhere}
.usage-table td:last-child{white-space:normal;min-width:180px}
.usage-table .textbtn{white-space:nowrap}
.audit-heading{flex-wrap:wrap;align-items:flex-start}
.audit-heading>div:first-child{min-width:0;flex:1 1 520px}
.audit-heading>div:first-child>div{min-width:0}
.audit-filters{min-width:0;max-width:100%;flex:1 1 380px;flex-wrap:wrap}
.audit-filters input{width:auto;min-width:0;flex:1 1 210px}
.audit-filters input[type=date],.source-filters select{flex:0 1 160px;min-width:130px}
.stats,.audit-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats b,.audit-stats b{overflow-wrap:anywhere}
.guideTabs{flex-wrap:wrap}
.guidePanel{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,5vw,70px)}
.step>span{min-width:0;overflow-wrap:anywhere}
.journey>div{grid-template-columns:28px minmax(0,1fr)}
.journey small{overflow-wrap:anywhere}
.overlay{padding:24px;overflow-y:auto;overscroll-behavior:contain}
.overlay>:is(.modal,.it-modal,.import-modal){width:min(540px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
.modalhead{gap:16px;align-items:flex-start}
.modalhead h2{min-width:0;overflow-wrap:anywhere}
.modalhead>.iconbtn{flex-shrink:0}
.modal input,.modal select{width:100%;min-width:0}
.admin-secret{min-width:0}
.admin-secret code{min-width:0;overflow-wrap:anywhere}
.admin-secret button{flex-shrink:0}
.login-side,.login-form{min-width:0}
.login-form{min-height:100vh;min-height:100dvh;padding-block:clamp(28px,6vh,60px)}
.login-form form{min-width:0;max-width:100%}
.login-copy{max-width:100%}
.login-copy h1{overflow-wrap:anywhere}
.app>footer{gap:12px;flex-wrap:wrap;line-height:1.65;padding-inline:var(--motal-gutter)}

@media(max-width:1200px){
  .appgrid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-heading{grid-template-columns:auto minmax(0,1fr)}
  .flow-primary-actions{grid-column:1/-1;gap:10px}
  .home-apple-note{grid-template-columns:auto minmax(0,1fr)}
  .home-apple-note a{border-left:0;padding-left:0}
}
@media(max-width:1100px){
  .app>header nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px var(--motal-gutter);background:#fff;box-shadow:0 10px 20px #0001;max-height:calc(100dvh - var(--motal-header-height));overflow-y:auto}
  .app>header nav.open{display:flex;flex-direction:column;gap:0}
  .app>header nav button,.app>header nav #motal-vps-entry{height:auto;min-height:48px;justify-content:flex-start;text-align:left;width:100%}
  .app>header .hamb{display:grid}
  .app>header .profile{margin-left:auto;margin-right:0}
  .command-hero{grid-template-columns:minmax(0,1fr);min-height:560px;padding-block:64px}
  .matrix-art{display:none}
  .hero-copy{width:100%;max-width:760px}
  .quickbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quickbar button{grid-column:1/-1}
  .credential-zone,.codex-zone{grid-template-columns:minmax(0,1fr);gap:36px}
  .codex-content{border-left:0;padding-left:0}
  .guidePanel{grid-template-columns:minmax(0,1fr);gap:28px}
  .stats,.audit-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  :root{--motal-header-height:70px}
  .app>header{gap:12px}
  .app>header .profile>span{display:none}
  .app>header .profile{gap:0}
  .hero-copy h1{font-size:clamp(36px,12vw,52px)}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .hero-actions button{width:100%}
  .quickbar{padding:16px;gap:14px}
  .quickbar>div:first-child{grid-column:1/-1}
  .quickbar>div{padding:6px 0}
  .download-zone{padding-block:60px}
  .zone-head>div:first-child{flex-basis:auto}
  .zone-head h2,.credential-intro h2{font-size:clamp(27px,8vw,35px)}
  .appgrid-v2{grid-template-columns:minmax(0,1fr)}
  .device-card{padding:26px}
  .flow-heading{padding:24px 20px;grid-template-columns:48px minmax(0,1fr);gap:14px}
  .flow-primary-actions{grid-column:1/-1;display:flex;flex-direction:column;width:100%}
  .flow-primary-actions button{width:100%;justify-content:center}
  .home-apple-note{grid-template-columns:minmax(0,1fr);margin:16px 16px 0}
  .home-apple-note>svg{display:none}
  .home-flow-steps{grid-template-columns:minmax(0,1fr)}
  .flow-footer{align-items:stretch;flex-direction:column;padding:22px 20px}
  .flow-footer>div:first-child{flex-basis:auto}
  .flow-footer-actions{display:flex!important;flex-direction:column;width:100%}
  .flow-footer-actions>*{width:100%}
  .credential-zone{padding-inline:var(--motal-gutter);padding-block:60px}
  .credential-card{padding:24px 20px}
  .credential-head{gap:10px}
  .credential-head>span:nth-child(2){min-width:0;flex-basis:calc(100% - 56px)}
  .credential-head .status{margin-left:0}
  .credential-stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .credential-stats>div{padding-bottom:12px;border-bottom:1px solid #ffffff20}
  .copy-enabled{flex-wrap:wrap}
  .copy-enabled .credential-copy-button{margin:8px 0 0;width:100%}
  .codex-zone{padding:60px var(--motal-gutter)}
  .codex-downloads-unified>a{padding:22px 18px}
  .codex-downloads-unified b{font-size:17px}
  .support-v2{padding-block:48px;gap:20px}
  .adminhead>div{flex-basis:100%}
  .adminhead>.primary{width:100%}
  .stats>div,.audit-stats>div{min-width:0;padding:14px;gap:10px}
  .stats b,.audit-stats b{font-size:20px}
  .stats svg{width:20px;flex-shrink:0}
  .audit-heading>div:first-child{flex-basis:100%}
  .audit-filters{display:grid;grid-template-columns:minmax(0,1fr);width:100%;flex-basis:auto}
  .audit-filters input,.audit-filters select{width:100%;min-width:0}
  .audit-heading p{font-size:13px}
  .tabletools input{flex-basis:100%;width:100%}
  .tabletools>span,.tabletools>small{flex-basis:100%}
  .guideTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .guideTabs button{justify-content:center;min-width:0;padding:12px 10px}
  .guidePanel{padding:22px 18px!important}
  .guidePanel aside{min-width:0;padding:22px}
  .overlay{padding:16px}
  .overlay>:is(.modal,.it-modal,.import-modal){padding:24px 20px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  .app>footer{justify-content:center;text-align:center;padding-block:24px}
  .app>footer>span{flex-basis:100%;margin-left:0}
}
@media(max-height:600px){
  .login-form{align-items:start;padding-block:24px}
  .login-side .login-copy{position:relative;inset:auto;margin-top:36px}
}
/* Expanded-size audit: align very wide layouts and account for a live standby banner. */
:root{--motal-overlay-space:48px}
html{scroll-padding-top:calc(var(--motal-header-height) + var(--motal-standby-height,0px) + 16px)}
.app>header{top:var(--motal-standby-height,0px);padding-inline:max(var(--motal-gutter),calc((100vw - 1450px)/2))}
.command-hero{padding-inline:max(var(--motal-gutter),calc((100vw - 1240px)/2))}
.login,.login-form{min-height:calc(100vh - var(--motal-standby-height,0px));min-height:calc(100dvh - var(--motal-standby-height,0px))}
.overlay{top:var(--motal-standby-height,0px)}
.overlay>:is(.modal,.it-modal,.import-modal){max-height:calc(100vh - var(--motal-standby-height,0px) - var(--motal-overlay-space));max-height:calc(100dvh - var(--motal-standby-height,0px) - var(--motal-overlay-space))}
@media(max-width:1100px){.app>header nav{max-height:calc(100dvh - var(--motal-header-height) - var(--motal-standby-height,0px))}}
@media(max-width:650px){:root{--motal-overlay-space:32px}}
