/* AS Surface OS 216B4 — Desktop / Mobile Visual Parity
   Keeps the SAME Premium Command Center and module language as desktop.
   Only the layout adapts to phone width. Desktop remains untouched. */

@media (max-width:800px){
  html.as216a8-native{
    --as216b4-gutter:10px;
    --as216b4-paper:#fffdf9;
    --as216b4-line:#ded4ca;
    --as216b4-ink:#171b1b;
    --as216b4-muted:#7b736b;
    --as216b4-gold:#dcae73;
    --as216b4-dark:#0c1417;
  }

  /* ---------------------------------------------------------
     HOME = THE SAME PREMIUM DASHBOARD AS DESKTOP
     --------------------------------------------------------- */
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center.as216a8-ready>.as94-mobile-home,
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center.as216a8-ready>.as94-mobile-home.as216a8-legacy{
    display:none!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center.as216a8-ready:not(.as216a8-show-detail)>.as216a8-dashboard{
    display:grid!important;
    visibility:visible!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center.as216a8-show-detail>.as216a8-dashboard{
    display:none!important;
  }

  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-dashboard{
    width:100%!important;
    max-width:100%!important;
    gap:11px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Same photo hero and wording as desktop, reflowed instead of replaced. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero{
    min-height:330px!important;
    height:auto!important;
    padding:21px 18px 18px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    align-content:space-between!important;
    gap:18px!important;
    background-position:center 48%!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(22,16,12,.12),rgba(22,16,12,.14) 45%,rgba(22,16,12,.40));
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-copy,
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions{
    position:relative!important;
    z-index:2!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-copy{
    max-width:none!important;
    padding:0!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kicker{
    margin-bottom:9px!important;
    font-size:8.5px!important;
    letter-spacing:.15em!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero h1{
    max-width:330px!important;
    margin:0 0 8px!important;
    font-size:34px!important;
    line-height:1.01!important;
    letter-spacing:-.025em!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero p{
    max-width:330px!important;
    margin:0 0 5px!important;
    font-size:16px!important;
    line-height:1.25!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero small{
    display:block!important;
    max-width:330px!important;
    font-size:10px!important;
    line-height:1.4!important;
    color:#eee2d5!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-quote{
    display:none!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions{
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin:0!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:43px!important;
    padding:9px 10px!important;
    border-radius:12px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-align:center!important;
    backdrop-filter:blur(6px)!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions .detail{
    grid-column:1/-1!important;
  }

  /* Desktop KPI row becomes a compact responsive version of the SAME cards. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:-20px!important;
    padding:0 8px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi{
    min-width:0!important;
    min-height:100px!important;
    padding:12px!important;
    border-radius:14px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    background:var(--as216b4-paper)!important;
    background-image:none!important;
    border:1px solid var(--as216b4-line)!important;
    box-shadow:0 7px 18px rgba(52,40,30,.08)!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi:last-child{
    grid-column:1/-1!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi>i{
    width:34px!important;
    height:34px!important;
    border-radius:9px!important;
    font-size:14px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi small{
    font-size:8px!important;
    line-height:1.2!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi strong{
    margin:4px 0 2px!important;
    font-size:25px!important;
    line-height:1!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi em{
    font-size:9px!important;
    line-height:1.3!important;
  }

  /* Same dashboard sections, same order, one-column phone flow. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-main-grid,
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-secondary-grid,
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-features{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-main-grid>.activity,
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-features>.quote{
    grid-column:auto!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-panel{
    min-width:0!important;
    width:100%!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-panel header{
    margin-bottom:11px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-panel h2{
    font-size:15px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-bars{
    height:155px!important;
    gap:6px!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-bar-col small{
    font-size:7px!important;
  }

  /* Factory Live stays the same component and scrolls inside itself. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-stage-scroll{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-stage-scroll::-webkit-scrollbar{display:none!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-stage{
    width:92px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-stage:not(:last-child):after{
    width:53px!important;
    left:66px!important;
  }

  /* Activity remains the same desktop activity list, only tightened. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-activity-row{
    min-height:51px!important;
    padding:8px 0!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-activity-row strong{
    font-size:10px!important;
  }

  /* Health / quick actions preserve the desktop content. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-health{
    display:grid!important;
    grid-template-columns:94px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-ring{
    width:94px!important;
    height:94px!important;
    flex-basis:94px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-ring:before{
    inset:10px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-ring strong{
    font-size:20px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-quick-grid button{
    min-height:68px!important;
    padding:11px!important;
  }

  /* Same visual navigation cards as desktop. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-features button{
    min-height:116px!important;
    padding:17px!important;
    border-radius:15px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-features strong{
    font-size:20px!important;
  }

  /* Detailed Factory Command still uses the same underlying desktop command center. */
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center.as216a8-show-detail>.as216a8-back{
    display:block!important;
    position:sticky!important;
    top:4px!important;
    z-index:22!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:40px!important;
    margin:0 0 9px!important;
    padding:8px 12px!important;
    border-radius:10px!important;
  }

  /* Bottom navigation is mobile-only chrome, but Scan is not permanently selected. */
  html.as216a8-native #app .workspace94.as211v11a-shell .as94-mobile-scan{
    background:transparent!important;
    background-image:none!important;
    color:#c9a06e!important;
    border-color:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as94-mobile-scan.active{
    background:rgba(201,149,91,.14)!important;
    color:#f1c894!important;
    border-color:rgba(201,149,91,.24)!important;
  }

  /* Keep B2's responsive forms/tables/modules, but do not let its alternate
     mobile home replace the Premium desktop dashboard. */
  html.as216a8-native #app .workspace94.as211v11a-shell .command-center .as94-mobile-home{
    display:none!important;
  }
}

@media (max-width:420px){
  html.as216a8-native{--as216b4-gutter:8px}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero{
    min-height:340px!important;
    padding:19px 15px 15px!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero h1{font-size:31px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero p{font-size:15px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpis{padding:0 5px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi{padding:10px!important;grid-template-columns:31px minmax(0,1fr)!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi>i{width:31px!important;height:31px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi strong{font-size:23px!important}
}

@media (max-width:800px) and (orientation:landscape) and (max-height:540px){
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero{
    min-height:235px!important;
    grid-template-columns:minmax(0,1fr) 230px!important;
    grid-template-rows:1fr!important;
    align-items:end!important;
  }
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero h1{font-size:29px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions{grid-template-columns:1fr 1fr!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-hero-actions .detail{grid-column:1/-1!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:-14px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-kpi:last-child{grid-column:auto!important}
}