/* HE Supply Production v1 responsive + zoom acceptance layer
   Browser zoom and OS display scaling reduce the usable CSS viewport.
   This file responds to that usable width. It does not counteract user zoom. */

:root{
  --he-usable-gutter:clamp(20px,3vw,48px);
  --he-touch:44px;
}

html,body{max-width:100%}
img,svg,video,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}
.ws-stage,.account-stage,.hq-stage,.client-stage,.cinematic-public,.world-entry,.world-proof{min-width:0}
.ws-pane,.account-pane,.hq-stage>*,.client-pane,.request-row-main,.request-row-status,.commerce-item,.quote-field-grid,.staff-commerce-card{min-width:0}
.ws-help-drawer,.ws-tour-card,.modal,.dialog,[role="dialog"]{max-width:calc(100vw - 24px)!important}

/* Wide desktop stays on the full production frame. */
@media(min-width:1440px){
  :root{--he-rail:228px;--he-gutter:clamp(32px,3vw,48px)}
}

/* Standard desktop / laptop / moderate browser zoom. */
@media(max-width:1439px){
  :root{--he-rail:204px;--he-gutter:clamp(24px,2.8vw,36px)}
  .account-signed-in .client-rail,.hq-rail,.ws-sidebar{padding-left:12px!important;padding-right:12px!important}
  .account-overview-grid{grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr)!important;gap:28px!important}
  .account-home-hero h1{font-size:clamp(40px,4.5vw,62px)!important}
  .account-signed-in .request-head h2,.account-signed-in .commerce-head h2{font-size:clamp(32px,3.3vw,44px)!important}
  .request-row{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important;gap:24px!important}
  .hq-signal-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hq-signal:nth-child(3n){border-right:0!important}
  .hq-signal:nth-child(-n+3){border-bottom:1px solid var(--he-line)!important}
  .ws-mode .staff-order-fields{grid-template-columns:repeat(2,minmax(160px,1fr))!important}
  .ws-mode .operations-handoff-grid{grid-template-columns:1fr 1fr!important}
  .world-v2 .cinematic-hero-grid,.world-v2 .world-proof-grid,.world-v2 .world-entry-grid{gap:clamp(36px,4vw,64px)!important}
}

/* Compact mode. Common at 200% zoom on 1920-wide desktops and on scaled laptops. */
@media(max-width:1099px){
  :root{--he-rail:86px;--he-gutter:clamp(20px,3vw,28px);--he-top:62px}

  /* Account and workstations can use icon rails. Client Home keeps its editorial
     top navigation. HQ keeps readable labels until it becomes a mobile command bar. */
  .account-signed-in .client-rail,.ws-sidebar{width:var(--he-rail)!important;padding:14px 8px 12px!important;overflow:hidden!important}
  .account-signed-in .client-brand,.ws-brand{justify-content:center!important;padding:0 0 12px!important}
  .account-signed-in .client-brand>span:last-child,.ws-brand>span:last-child{display:none!important}
  .account-signed-in .client-nav button,.account-signed-in .client-nav a,.ws-nav button,.ws-nav a{justify-content:center!important;padding:0 8px!important;min-height:46px!important}
  .account-signed-in .client-nav button span,.account-signed-in .client-nav a span,.ws-nav button span,.ws-nav a span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .account-signed-in .client-nav svg,.ws-nav svg{width:19px!important;height:19px!important;margin:0!important}
  .account-signed-in .client-rail-bottom a,.account-signed-in .client-rail-bottom button,.ws-side-bottom a,.ws-side-bottom button{justify-content:center!important;min-height:42px!important;padding:0 8px!important;font-size:0!important}
  .account-signed-in .client-rail-bottom svg,.ws-side-bottom svg{width:19px!important;height:19px!important}
  .ws-topbar{left:var(--he-rail)!important}
  .ws-stage{left:var(--he-rail)!important}

  /* HQ uses a readable compact rail because its current navigation is text-first. */
  .hq-shell{grid-template-columns:172px minmax(0,1fr)!important}
  .hq-rail{width:172px!important;padding:14px 10px 12px!important;overflow:hidden!important}
  .hq-brand{justify-content:flex-start!important;padding:0 8px 12px!important}
  .hq-brand>span:last-child{display:block!important}
  .hq-nav a,.hq-nav span{justify-content:flex-start!important;padding:0 10px!important;min-height:46px!important;white-space:normal!important}
  .hq-rail-bottom a,.hq-rail-bottom button{justify-content:flex-start!important;min-height:42px!important;padding:0 10px!important}

  /* Account collapses secondary panels before shrinking readable text. */
  .account-overview-grid,.account-overview-body{grid-template-columns:1fr!important;gap:28px!important}
  .account-overview-side{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important}
  .account-home-hero{grid-template-columns:1fr!important;align-items:start!important}
  .account-home-actions{justify-content:flex-start!important;padding-top:4px!important}
  .account-home-overview{width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .account-activity-row{grid-template-columns:96px minmax(0,1fr)!important;gap:14px!important}
  .account-activity-row>b,.account-activity-row>small{grid-column:2!important;text-align:left!important;justify-self:start!important}
  .request-row{grid-template-columns:1fr!important;gap:14px!important}
  .request-row-status{justify-self:start!important;justify-items:start!important;text-align:left!important;grid-auto-flow:column!important;align-items:center!important;gap:10px!important}
  .account-signed-in .request-head,.account-signed-in .commerce-head{grid-template-columns:1fr!important;align-items:start!important}
  .account-signed-in .request-head>.btn,.account-signed-in .commerce-head>.btn{justify-self:start!important}
  .commerce-item-top{grid-template-columns:1fr!important}
  .commerce-status{justify-self:start!important}
  .account-settings-grid,.account-settings-meta{grid-template-columns:1fr!important}
  .account-settings-meta>div+div{border-left:0!important;border-top:1px solid var(--he-line)!important;padding-left:0!important}

  /* Operations and Sales become fewer-column working surfaces. */
  .ws-mode .command-split,.ws-mode .command-form-grid,.ws-mode .quote-field-grid,.ws-mode .staff-order-fields{grid-template-columns:1fr 1fr!important}
  .ws-mode .staff-request-row{grid-template-columns:1fr!important}
  .ws-mode .staff-request-control{justify-self:start!important;min-width:0!important;width:100%!important}
  .ws-mode .processing-tools,.ws-mode .staff-form-actions{grid-column:1/-1!important}
  .ws-mode .operations-handoff-grid{grid-template-columns:1fr 1fr!important}
  .ws-stage{padding-left:var(--he-gutter)!important;padding-right:var(--he-gutter)!important}

  /* HQ signal strip follows 6 → 3 → 2 → 1. */
  .hq-signal-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hq-signal:nth-child(n){border-right:1px solid var(--he-line)!important;border-bottom:1px solid var(--he-line)!important}
  .hq-signal:nth-child(even){border-right:0!important}
  .hq-status-line{grid-template-columns:1fr!important;gap:16px!important}

  /* Public and Client Home reflow rather than shrinking type into dust. */
  .world-v2 .cinematic-hero-grid,.world-v2 .world-entry-grid,.world-v2 .world-proof-grid,.client-home-hero,.client-home-band,.client-section-intro,.client-lab-feature{grid-template-columns:1fr!important}
  .world-v2 .world-proof aside{position:static!important}
  .client-home-hero{min-height:auto!important;gap:34px!important}
}

/* Mobile / heavy desktop zoom. Full rails become horizontally scrollable command bars. */
@media(max-width:799px){
  :root{--he-rail:0px;--he-top:54px;--he-gutter:clamp(16px,4vw,22px)}

  /* Account frame: command bar + topbar + content. */
  .account-signed-in .account-client-shell{grid-template-columns:1fr!important;grid-template-rows:64px var(--he-top) minmax(0,1fr)!important}
  .account-signed-in .client-rail{grid-column:1!important;grid-row:1!important;width:100%!important;height:64px!important;display:flex!important;flex-direction:row!important;align-items:center!important;padding:8px 10px!important;border-right:0!important;border-bottom:1px solid var(--he-line)!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior-x:contain}
  .account-signed-in .client-rail::-webkit-scrollbar{display:none}
  .account-signed-in .client-brand{flex:0 0 48px!important;min-width:48px!important;border:0!important;padding:0!important}
  .account-signed-in .client-brand>span:last-child{display:none!important}
  .account-signed-in .client-nav{display:flex!important;flex-direction:row!important;gap:4px!important;padding:0!important;margin:0!important;flex:0 0 auto!important}
  .account-signed-in .client-nav button,.account-signed-in .client-nav a{flex:0 0 auto!important;width:auto!important;min-width:48px!important;min-height:44px!important;padding:0 11px!important}
  .account-signed-in .client-nav button span,.account-signed-in .client-nav a span{display:inline!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;font-size:10px!important}
  .account-signed-in .client-nav svg{width:16px!important;height:16px!important}
  .account-signed-in .client-rail-bottom{display:flex!important;flex-direction:row!important;gap:4px!important;margin:0!important;padding:0!important;border:0!important;flex:0 0 auto!important}
  .account-signed-in .client-rail-bottom a,.account-signed-in .client-rail-bottom button{min-height:44px!important;padding:0 10px!important;font-size:10px!important;white-space:nowrap!important}
  .account-signed-in .client-topbar{grid-column:1!important;grid-row:2!important;height:var(--he-top)!important;padding:0 var(--he-gutter)!important}
  .account-signed-in .account-stage{grid-column:1!important;grid-row:3!important;padding:0 var(--he-gutter) 44px!important}
  .account-signed-in .account-pane{padding:24px 0 44px!important}

  /* Workstations use a scrollable top command bar rather than a crushed sidebar. */
  .ws-mode .ws-sidebar{position:fixed!important;z-index:70!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:64px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:8px 10px!important;border-right:0!important;border-bottom:1px solid var(--he-line)!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior-x:contain}
  .ws-mode .ws-sidebar::-webkit-scrollbar{display:none}
  .ws-mode .ws-brand{flex:0 0 44px!important;min-width:44px!important;padding:0!important;border:0!important}
  .ws-mode .ws-brand>span:last-child{display:none!important}
  .ws-mode .ws-nav{display:flex!important;grid-template-columns:none!important;gap:4px!important;padding:0!important;margin:0!important;flex:0 0 auto!important;overflow:visible!important}
  .ws-mode .ws-nav button,.ws-mode .ws-nav a{flex:0 0 auto!important;min-width:58px!important;min-height:44px!important;padding:0 10px!important;display:flex!important}
  .ws-mode .ws-nav button span,.ws-mode .ws-nav a span{display:block!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .ws-mode .ws-side-bottom{display:flex!important;flex-direction:row!important;gap:4px!important;margin:0!important;padding:0!important;border:0!important;flex:0 0 auto!important}
  .ws-mode .ws-side-bottom a,.ws-mode .ws-side-bottom button{min-width:44px!important;min-height:44px!important;padding:0 10px!important;font-size:0!important;display:flex!important}
  .ws-mode .ws-topbar{left:0!important;top:64px!important;height:var(--he-top)!important;padding:0 var(--he-gutter)!important}
  .ws-mode .ws-stage{left:0!important;top:calc(64px + var(--he-top))!important;padding:0 var(--he-gutter) 44px!important}
  .ws-mode .ws-status{display:none!important}
  .ws-mode .command-hero h1{font-size:clamp(34px,9vw,48px)!important}
  .ws-mode .command-metrics,.ws-mode .command-form-grid,.ws-mode .quote-field-grid,.ws-mode .staff-order-fields,.ws-mode .operations-handoff-grid{grid-template-columns:1fr!important}
  .ws-mode .processing-tools,.ws-mode .staff-form-actions{grid-column:1!important}
  .ws-mode .protected-quote-card .protected-quote-math{position:static!important}
  .ws-mode .staff-commerce-head,.ws-mode .command-section-head{align-items:flex-start!important;flex-wrap:wrap!important}
  .ws-help-drawer{width:min(100% - 20px,380px)!important;right:10px!important;top:calc(64px + var(--he-top) + 8px)!important;bottom:10px!important}
  .ws-tour-card{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important}

  /* HQ becomes a top navigation environment and keeps every route accessible. */
  .hq-shell{grid-template-columns:1fr!important;grid-template-rows:64px var(--he-top) minmax(0,1fr)!important}
  .hq-rail{grid-column:1!important;grid-row:1!important;width:100%!important;height:64px!important;display:flex!important;flex-direction:row!important;align-items:center!important;padding:8px 10px!important;border-right:0!important;border-bottom:1px solid var(--he-line)!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
  .hq-rail::-webkit-scrollbar{display:none}
  .hq-brand{flex:0 0 48px!important;min-width:48px!important;padding:0!important;border:0!important}
  .hq-brand>span:last-child{display:none!important}
  .hq-nav{display:flex!important;flex-direction:row!important;gap:4px!important;padding:0!important;margin:0!important;flex:0 0 auto!important}
  .hq-nav a,.hq-nav span{flex:0 0 auto!important;min-height:44px!important;padding:0 12px!important;white-space:nowrap!important}
  .hq-rail-bottom{display:flex!important;flex-direction:row!important;gap:4px!important;margin:0!important;padding:0!important;border:0!important}
  .hq-topbar{grid-column:1!important;grid-row:2!important;height:var(--he-top)!important;padding:0 var(--he-gutter)!important}
  .hq-stage{grid-column:1!important;grid-row:3!important;padding-left:var(--he-gutter)!important;padding-right:var(--he-gutter)!important;overflow:auto!important}
  .hq-signal-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Customer records stay paired and readable. */
  .account-overview-side{grid-template-columns:1fr!important}
  .account-home-overview{grid-template-columns:1fr!important;border-radius:0!important}
  .account-home-overview button{border-right:0!important;border-bottom:1px solid var(--he-line)!important}
  .account-home-overview button:last-child{border-bottom:0!important}
  .account-activity-row{grid-template-columns:1fr!important;gap:4px!important}
  .account-activity-row>b,.account-activity-row>small{grid-column:1!important;text-align:left!important}
  .request-row-status{grid-auto-flow:row!important}
  .commerce-item-top{padding:18px!important}
  .quote-item .price-lines{padding:16px 18px!important}
  .price-lines>div{grid-template-columns:minmax(0,1fr) auto!important;gap:16px!important}
  .commerce-meta{gap:8px 16px!important;padding-left:18px!important;padding-right:18px!important}
  .commerce-actions,.quote-payment-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .commerce-actions .btn,.quote-payment-actions .btn{width:100%!important;justify-content:center!important}

  /* Public header stays usable without forcing a desktop nav. */
  .world-v2 .wrap{width:min(100% - 32px,1480px)!important}
  .world-v2 .head-inner{gap:10px!important}
  .world-v2 .nav{margin-left:auto!important;gap:6px!important}
  .world-v2 .nav a[href="/how/"],.world-v2 .nav a[href="/supply/"],.world-v2 .nav .network-link,.world-v2 .nav button{display:none!important}
  .world-v2 .cinematic-hero{min-height:auto!important;padding-top:clamp(60px,9vw,90px)!important}
  .world-v2 .cinematic-copy h1{font-size:clamp(46px,13vw,78px)!important}
}

/* Small mobile and 200% desktop zoom at narrower window sizes. */
@media(max-width:620px){
  :root{--he-gutter:16px}
  .client-topbar-meta,.hq-topbar>span{display:none!important}
  .account-signed-in .client-nav button span,.account-signed-in .client-nav a span{display:none!important}
  .account-signed-in .client-nav button,.account-signed-in .client-nav a{min-width:44px!important;padding:0 8px!important}
  .account-home-hero h1{font-size:clamp(36px,11vw,48px)!important}
  .account-home-actions,.account-home-actions .btn{width:100%!important}
  .account-home-actions .btn{justify-content:center!important}
  .request-list-head,.commerce-block-head{align-items:flex-start!important;flex-wrap:wrap!important}
  .request-form,.staff-commerce-card,.protected-quote-card{padding:16px!important}
  .request-form-grid,.quote-field-grid,.staff-order-fields{grid-template-columns:1fr!important}
  .price-lines>div{gap:12px!important}
  .price-lines .total strong{font-size:22px!important}
  .hq-signal-strip{grid-template-columns:1fr!important}
  .hq-signal:nth-child(n){border-right:0!important}
  .hq-command{grid-template-columns:34px minmax(0,1fr) auto!important;gap:12px!important}
  .hq-command>i{display:none!important}
  .ws-mode .ws-nav button,.ws-mode .ws-nav a{min-width:52px!important;padding:0 8px!important}
  .ws-mode .staff-request-control{width:100%!important}
  .ws-mode .staff-request-control .btn,.ws-mode .staff-form-actions .btn{width:100%!important;justify-content:center!important}
  .operations-handoff{padding:16px!important}
  .world-v2 .wrap{width:calc(100% - 28px)!important}
  .world-v2 .cinematic-copy h1{font-size:clamp(42px,14vw,62px)!important}
  .world-v2 .world-actions{display:grid!important;grid-template-columns:1fr!important}
  .world-v2 .world-btn{width:100%!important;justify-content:center!important}
  .client-editorial-wrap,.client-section-shell{width:calc(100% - 28px)!important}
  .client-home-hero h2{font-size:clamp(42px,14vw,64px)!important}
}

/* Very narrow emergency-fit range. Preserve function, never shrink the whole application. */
@media(max-width:390px){
  .account-signed-in .client-brand,.ws-mode .ws-brand,.hq-brand{display:none!important}
  .account-signed-in .client-rail,.ws-mode .ws-sidebar,.hq-rail{padding-left:6px!important;padding-right:6px!important}
  .client-topbar h1,.ws-topbar h1,.hq-topbar h1{font-size:14px!important}
  .price-lines>div{grid-template-columns:1fr!important;gap:2px!important;padding:8px 0!important}
  .price-lines>div strong{justify-self:start!important}
  .commerce-status{white-space:normal!important;text-align:left!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}