/* One responsive surface for actual devices and the phone preview.
   No alternate content or datasets: only the layout changes. */
.compact-account,.workspace-toggle{display:none}
.dashboard-top-actions{display:flex;align-items:center;gap:10px}
#app .workspace-header{grid-template-columns:minmax(160px,1fr) auto}
.workspace-site-name{color:#c4ced9;font-size:14px;overflow-wrap:anywhere}
.admin-two-column{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-two-column>.panel{min-width:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body[data-layout="compact"]{min-width:0;font-size:16px;line-height:1.65}
body[data-layout="compact"] #app{width:100%;min-width:0}
body[data-layout="compact"] #app :is(main,section,article,aside,nav,.panel,.card,.field,.hero>div){min-width:0;max-width:100%}
body[data-layout="compact"] #app :is(h1,h2,h3,p,a,strong,small,label,code){overflow-wrap:anywhere}
body[data-layout="compact"] #app :is(h1,h2,h3){letter-spacing:-.025em;text-wrap:pretty}
body[data-layout="compact"] #app h1{font-size:clamp(30px,7.8vw,44px)!important;line-height:1.35!important;margin-block:12px 16px}
body[data-layout="compact"] #app h2{font-size:clamp(24px,6vw,32px)!important;line-height:1.4}
body[data-layout="compact"] #app h3{font-size:20px;line-height:1.5}
body[data-layout="compact"] #app :is(p,.card p,.choice p,.faq p){font-size:16px;line-height:1.8}
body[data-layout="compact"] #app :is(label,.eyebrow,.field-note,.form-note,.check-list,.mini-list,.badge,.status){font-size:14px;line-height:1.6}
body[data-layout="compact"] #app small{font-size:14px;line-height:1.6}
body[data-layout="compact"] #app .btn{min-height:46px;padding:10px 16px;font-size:15px;line-height:1.5;white-space:normal;border-radius:12px}
body[data-layout="compact"] #app .btn:hover{transform:none}
body[data-layout="compact"] #app main .btn.ghost{color:var(--text)!important;background:var(--surface);border-color:var(--line-strong)}
body[data-layout="compact"] #app :is(input:not([type="checkbox"]):not([type="hidden"]),select,textarea){min-width:0;max-width:100%;font-size:16px;line-height:1.5;min-height:48px}
body[data-layout="compact"] #app textarea{min-height:112px}
body[data-layout="compact"] #app input[type="file"][hidden]{display:none}
body[data-layout="compact"] #app img{max-width:100%}
body[data-layout="compact"] #app .container{width:calc(100% - 32px)!important;max-width:720px;margin-inline:auto}
body[data-layout="compact"] #app .page{padding:28px 0 48px}
body[data-layout="compact"] #app .section{padding:40px 0}
body[data-layout="compact"] #app :is(.card,.panel){padding:20px;border-radius:16px;overflow:visible}
body[data-layout="compact"] #app :is(.section-head,.page-title,.welcome){display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:22px}
body[data-layout="compact"] #app :is(.section-head,.page-title,.welcome)>p{max-width:none}
body[data-layout="compact"] #app :is(.section-head,.page-title,.welcome)>.btn{align-self:stretch;width:100%}
body[data-layout="compact"] #app :is(.grid-3,.grid-4,.choice-grid,.form-grid,.footer-grid,.hero,.dashboard-shell,.dashboard-grid,.settings-layout,.settings-page-grid,.settings-side,.updates-layout,.updates-side,.domain-grid,.domain-guide,.domain-checks,.domain-guide ol,.asset-upload-grid,.store-content,.store-info-panel,.store-product-grid,.admin-two-column,.support-layout,.order-detail-grid,.order-summary-grid,.onboarding-list,.trust-signal-grid,.about-statement,.about-process,.demo-highlight-card){display:grid;grid-template-columns:minmax(0,1fr)!important;gap:16px;width:auto}
body[data-layout="compact"] #app :is(.settings-side,.updates-side,.store-cart){position:static;top:auto}
body[data-layout="compact"] #app .container{width:calc(100% - 32px)!important;max-width:720px;margin-inline:auto}
body[data-layout="compact"] #app :is(.guide-intro,.guide-next,.guide-mini-stats,.guide-quick-nav,.guide-checklist){grid-template-columns:minmax(0,1fr)!important}
body[data-layout="compact"] #app :is(.admin-stats,.dashboard-main .grid-4){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
body[data-layout="compact"] #app .stat{padding:16px}
body[data-layout="compact"] #app .stat strong{font-size:clamp(24px,6vw,32px);line-height:1.35}
body[data-layout="compact"] #app .stat span{font-size:14px}

/* Navigation expands in document flow; it never obscures the page. */
body[data-layout="compact"] #app .topbar{
  position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
  min-height:72px;gap:10px;align-items:center;isolation:auto;backdrop-filter:none;z-index:30;
}
body[data-layout="compact"] #app .topbar-brand{grid-column:1;grid-row:1;width:auto;min-width:0;align-self:center}
body[data-layout="compact"] #app .topbar .brand-logo-full{display:block!important;width:116px!important;height:40px!important;object-fit:contain;object-position:left center}
body[data-layout="compact"] #app .topbar-tagline{display:block!important;font-size:10px!important;line-height:1.4;letter-spacing:0;margin:0}
body[data-layout="compact"] #app .topbar-brand .auth-status{display:none!important}
body[data-layout="compact"] #app .topbar .top-actions{display:flex!important;grid-column:2;grid-row:1;gap:6px!important;align-self:center;justify-self:end}
body[data-layout="compact"] #app :is(.topbar .theme-toggle,.topbar .mobile-toggle,.workspace-toggle){display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;font-size:0}
body[data-layout="compact"] #app .topbar .mobile-toggle{grid-column:3;grid-row:1;align-self:center}
body[data-layout="compact"] #app .theme-toggle::before{content:none!important;display:none!important}
body[data-layout="compact"] #app .theme-toggle .ui-icon{display:block!important;width:21px;height:21px}
body[data-layout="compact"] #app :is(.topbar,.store-header) :is(.theme-toggle,.mobile-toggle,.workspace-toggle){color:#f8fafc!important}
body[data-layout="compact"] #app .theme-toggle>span{display:none}
body[data-layout="compact"] #app .view-toggle{display:none!important}
body[data-layout="compact"] #app .compact-account{display:flex;grid-column:1 / -1;grid-row:2;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #2b3947}
body[data-layout="compact"] #app .compact-account>a{flex:1}
body[data-layout="compact"] #app .compact-account .auth-status{display:inline-flex!important;font-size:14px!important;gap:6px;white-space:normal}
body[data-layout="compact"] #app .topbar .nav{
  display:none!important;position:static!important;inset:auto!important;grid-column:1 / -1;grid-row:3;
  width:100%!important;max-width:none;min-height:0;height:auto;margin:0;padding:8px;
  background:var(--surface)!important;border:1px solid var(--line);border-radius:14px;
  box-shadow:none!important;transform:none;opacity:1;backdrop-filter:none!important;
}
body[data-layout="compact"] #app .topbar .nav.open{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px}
body[data-layout="compact"] #app .topbar .nav :is(a,button){display:flex;width:100%;min-height:48px;align-items:center;justify-content:flex-start;padding:12px 14px!important;color:var(--text)!important;font-size:16px;white-space:normal;border-radius:10px}
body[data-layout="compact"] #app .topbar .nav :is(a,button):is(:hover,.active){color:var(--primary)!important;background:var(--primary-soft)!important}
body[data-layout="compact"] #app .mobile-nav-account{display:grid;grid-template-columns:1fr;gap:4px;border-color:var(--line);margin-top:4px;padding-top:8px}
body[data-layout="compact"] #app .mobile-nav-account .mobile-nav-primary{background:var(--primary)!important;color:#fff!important}

/* Workspace: complete navigation, plus store/plan/actions visible in the header. */
body[data-layout="compact"] #app .workspace-header{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-layout="compact"] #app .workspace-header .topbar-brand{grid-column:1 / 3}
body[data-layout="compact"] #app .dashboard-top-actions{display:contents!important}
body[data-layout="compact"] #app .dashboard-top-actions .theme-toggle{grid-column:3;grid-row:1;justify-self:end}
body[data-layout="compact"] #app .dashboard-top-actions .workspace-toggle{grid-column:4;grid-row:1;justify-self:end}
body[data-layout="compact"] #app .dashboard-top-actions>.workspace-site-name{display:block!important;grid-column:1 / 4;grid-row:2;font-size:14px;color:#c4ced9;white-space:normal}
body[data-layout="compact"] #app .dashboard-top-actions>.badge{display:inline-flex!important;grid-column:4;grid-row:2;justify-self:end;font-size:12px;letter-spacing:0}
body[data-layout="compact"] #app .dashboard-top-actions>a.btn{display:flex!important;width:100%;min-height:46px;grid-row:3}
body[data-layout="compact"] #app .dashboard-top-actions>a.ghost{grid-column:1 / 3}
body[data-layout="compact"] #app .dashboard-top-actions>a.primary{grid-column:3 / 5;padding-inline:8px;font-size:14px}
body[data-layout="compact"] #app .dashboard-shell{gap:0;min-height:0}
body[data-layout="compact"] #app #workspace-navigation{display:none;position:static;top:auto;width:auto;height:auto;max-height:none;padding:16px;margin:16px 16px 0;border:1px solid var(--line)!important;border-radius:16px;background:var(--surface)!important;overflow:visible}
body[data-layout="compact"] #app #workspace-navigation.open{display:grid;grid-template-columns:1fr;gap:4px}
body[data-layout="compact"] #app #workspace-navigation>div:first-child{display:none}
body[data-layout="compact"] #app #workspace-navigation .side-label{display:block;min-width:0;margin:16px 12px 4px;color:var(--muted)!important;font-size:14px;letter-spacing:0}
body[data-layout="compact"] #app #workspace-navigation :is(a,button){min-width:0;width:100%;min-height:48px;margin:0;padding:12px 14px;color:var(--text)!important;font-size:16px;white-space:normal}
body[data-layout="compact"] #app #workspace-navigation :is(a,button):is(.active,:hover){background:var(--primary-soft)!important;color:var(--primary)!important}
body[data-layout="compact"] #app #workspace-navigation a.active::before{content:none}
body[data-layout="compact"] #app .dashboard-main{padding:24px 16px 48px;width:100%;max-width:760px;margin-inline:auto}
body[data-layout="compact"] #app .admin-toolbar{display:grid;grid-template-columns:1fr;gap:10px}

/* Table -> labelled records: every value and existing action stays available. */
body[data-layout="compact"] #app .table-wrap{width:100%;overflow:visible}
body[data-layout="compact"] #app .responsive-table{display:block;width:100%;min-width:0!important}
body[data-layout="compact"] #app .responsive-table thead{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
body[data-layout="compact"] #app .responsive-table tbody{display:grid;gap:14px;width:100%}
body[data-layout="compact"] #app .responsive-table tr{display:block;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
body[data-layout="compact"] #app .responsive-table td{display:block;position:relative;min-width:0;width:auto;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;white-space:normal;overflow-wrap:anywhere}
body[data-layout="compact"] #app .responsive-table td:last-child{border-bottom:0}
body[data-layout="compact"] #app .responsive-table td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.5}
body[data-layout="compact"] #app .responsive-table td[data-label=""]::before{content:none}
body[data-layout="compact"] #app .responsive-table :is(select,.btn){max-width:100%;margin:3px 3px 3px 0}
body[data-layout="compact"] #app .product-list-item{min-width:0;align-items:flex-start}
body[data-layout="compact"] #app .product-list-item small{white-space:normal;overflow:visible;max-width:none}
body[data-layout="compact"] #app .admin-ticket-detail p{max-width:100%}

/* Public pages, wizard and forms retain the desktop content and reading order. */
body[data-layout="compact"] #app .hero{padding:34px 0 40px;min-height:0;gap:28px}
body[data-layout="compact"] #app .hero>div:first-child{max-width:100%}
body[data-layout="compact"] #app .hero h1{font-size:clamp(32px,8.2vw,46px)!important;line-height:1.35!important}
body[data-layout="compact"] #app .hero h1 br{display:none}
body[data-layout="compact"] #app :is(.hero-actions,.welcome-actions,.about-process-actions){display:flex;flex-wrap:wrap;gap:10px;width:100%}
body[data-layout="compact"] #app :is(.hero-actions,.welcome-actions,.about-process-actions)>.btn{flex:1 1 220px;width:auto}
body[data-layout="compact"] #app .hero-proof{display:flex;flex-wrap:wrap;gap:8px}
body[data-layout="compact"] #app .hero-proof span{font-size:14px;white-space:normal}
body[data-layout="compact"] #app .hero-card{padding:12px;max-width:100%;border-radius:16px}
body[data-layout="compact"] #app .mock-grid{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;min-height:240px}
body[data-layout="compact"] #app .mock-sidebar{padding:6px}
body[data-layout="compact"] #app .mock-main{padding:12px;min-width:0}
body[data-layout="compact"] #app .mock-main h3{font-size:17px}
body[data-layout="compact"] #app .demo-browser-body{grid-template-columns:1fr;padding:18px}
body[data-layout="compact"] #app .demo-product-stack{grid-template-columns:1fr;gap:8px}
body[data-layout="compact"] #app .demo-product-stack span{padding:14px;font-size:14px}
body[data-layout="compact"] #app .demo-browser-bar strong{font-size:12px;white-space:normal}
body[data-layout="compact"] #app .demo-highlight-copy{padding:16px}
body[data-layout="compact"] #app .price-card{min-height:0}
body[data-layout="compact"] #app .price-card :is(li,ul){font-size:16px}
body[data-layout="compact"] #app .price-card .btn{width:100%}
body[data-layout="compact"] #app .wizard{display:grid;grid-template-columns:1fr;gap:16px}
body[data-layout="compact"] #app .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:10px 4px;overflow:visible}
body[data-layout="compact"] #app .step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;padding:4px 0;border:0;gap:6px;font-size:12px;text-align:center}
body[data-layout="compact"] #app .step-number{width:30px;height:30px;flex:0 0 30px;font-size:14px}
body[data-layout="compact"] #app .wizard-actions>.btn{flex:1;min-width:0;padding-inline:8px}
body[data-layout="compact"] #app .choice{min-height:0;padding:18px}
body[data-layout="compact"] #app .form-grid{margin-top:16px}
body[data-layout="compact"] #app .field.full{grid-column:auto}
body[data-layout="compact"] #app .password-toggle{width:44px;min-height:44px}
body[data-layout="compact"] #app :is(.settings-section-head,.guide-step){grid-template-columns:36px minmax(0,1fr);gap:12px}
body[data-layout="compact"] #app .settings-section-head h2{font-size:22px!important}
body[data-layout="compact"] #app :is(.settings-step,.guide-step-number){width:36px;height:36px}
body[data-layout="compact"] #app .asset-upload-grid{margin-bottom:24px}
body[data-layout="compact"] #app .asset-preview{aspect-ratio:16/9}
body[data-layout="compact"] #app .asset-preview-square{aspect-ratio:1;max-height:200px}
body[data-layout="compact"] #app .asset-upload-actions .btn{flex:1}
body[data-layout="compact"] #app .asset-upload-actions>span{width:100%;margin:0}
body[data-layout="compact"] #app .settings-mobile-save{display:block;position:static;margin-top:20px;padding:0;border:0;background:none;box-shadow:none}
body[data-layout="compact"] #app .settings-mobile-save .btn{width:100%}
body[data-layout="compact"] #app .input-action{grid-template-columns:minmax(0,1fr)}
body[data-layout="compact"] #app .domain-url-box{align-items:stretch;flex-direction:column}
body[data-layout="compact"] #app .domain-url-box>div{display:flex;flex-wrap:wrap;gap:8px}
body[data-layout="compact"] #app .domain-url-box .btn{flex:1}
body[data-layout="compact"] #app .onboarding-item{min-width:0}
body[data-layout="compact"] #app .onboarding-welcome{flex-wrap:wrap}
body[data-layout="compact"] #app [data-reveal]{opacity:1;transform:none}
body[data-layout="compact"] #app .mobile-sticky-cta{display:none!important}

/* Storefront and checkout. */
body[data-layout="compact"] #app .store-header{position:relative;top:auto;display:grid;grid-template-columns:1fr;padding:12px 16px;gap:12px;min-height:0}
body[data-layout="compact"] #app .store-header .brand-logo-full{width:116px!important;height:40px!important}
body[data-layout="compact"] #app .store-header-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;width:100%}
body[data-layout="compact"] #app .store-header-actions>.ghost:not(.theme-toggle){display:inline-flex!important;flex:1;font-size:14px}
body[data-layout="compact"] #app .store-header-actions .auth-status{display:inline-flex!important;width:100%;font-size:14px;color:#c4ced9}
body[data-layout="compact"] #app .store-header-actions .theme-toggle{display:inline-flex!important;width:44px;height:44px;min-height:44px;padding:0}
body[data-layout="compact"] #app .store-header-actions .primary{min-height:44px;padding:8px 12px}
body[data-layout="compact"] #app .store-main{max-width:760px;padding:24px 16px 40px;margin-inline:auto}
body[data-layout="compact"] #app .store-hero{padding:26px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-height:0}
body[data-layout="compact"] #app .store-hero.has-cover{min-height:280px}
body[data-layout="compact"] #app .store-hero-mark{width:56px;height:56px;font-size:28px;flex-shrink:0}
body[data-layout="compact"] #app .store-product{min-width:0;overflow:hidden}
body[data-layout="compact"] #app .store-product-image{height:220px}
body[data-layout="compact"] #app .store-product-body{padding:18px}
body[data-layout="compact"] #app .store-product-bottom{flex-wrap:wrap;gap:12px}
body[data-layout="compact"] #app .store-product-bottom .btn{flex:1}
body[data-layout="compact"] #app .store-cart{width:100%;padding:20px;scroll-margin-top:16px}
body[data-layout="compact"] #app :is(.checkout-address-grid,.cart-row){min-width:0}
body[data-layout="compact"] #app .checkout-address-grid{grid-template-columns:1fr}
body[data-layout="compact"] #app .cart-row{flex-wrap:wrap;gap:12px}
body[data-layout="compact"] #app .cart-controls button{width:44px;min-width:44px;height:44px;font-size:20px}
body[data-layout="compact"] #app .store-info-panel{padding:0;margin-block:24px}
body[data-layout="compact"] #app .store-contact-actions .btn{flex:1 1 120px}
body[data-layout="compact"] #app :is(.store-preview-banner,.store-closed-banner){flex-direction:column;align-items:flex-start;gap:6px;font-size:14px}
body[data-layout="compact"] #app .store-empty{padding:32px 20px;margin-block:24px;min-height:0}
body[data-layout="compact"] #app .store-footer{padding:26px 20px max(26px,env(safe-area-inset-bottom));font-size:14px}
body[data-layout="compact"] #app .footer{margin-top:16px;padding:32px 0 max(32px,env(safe-area-inset-bottom))}
body[data-layout="compact"] #app .footer-grid{gap:24px}
body[data-layout="compact"] #app .footer a:not(.brand){font-size:15px;min-height:44px;display:flex;align-items:center;margin:0}
body[data-layout="compact"] #app .footer-bottom{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:20px}
body[data-layout="compact"] #app .footer-credits{text-align:left}
body[data-layout="compact"] #app .footer-bottom p{font-size:14px}
body[data-layout="compact"] .toast{z-index:1200;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:520px;margin-inline:auto;font-size:15px}

/* Preview controls are available on a wide computer; real phones size themselves. */
@media(min-width:1101px){
  body.preview-mobile[data-layout="compact"] #app .topbar .view-toggle{display:inline-flex!important;padding:3px;gap:2px}
  body.preview-mobile[data-layout="compact"] #app .topbar .view-toggle button{width:30px;min-width:30px;height:38px;min-height:38px;padding:0}
  body.preview-mobile[data-layout="compact"] #app .topbar .view-toggle :is(.view-toggle-label,button span){display:none}
  body.preview-mobile[data-layout="compact"] #app .workspace-header .view-toggle{grid-row:4;grid-column:1 / -1;justify-self:start}
}
@media(max-width:359px){
  body[data-layout="compact"] #app :is(.admin-stats,.dashboard-main .grid-4){grid-template-columns:1fr!important}
}