/* MDCS cross-browser responsive compatibility layer */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{width:100%;min-width:0;overflow-x:hidden}
img,svg,video,canvas,iframe{display:block;max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
p,li,dd,td,th,h1,h2,h3,h4,a{overflow-wrap:anywhere}
pre,.code{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre}
table{max-width:100%}
.wrap{width:100%;min-width:0}
.herogrid>*,.two>*,.eng>*,.lead>*,.mgrid>*,.both>*,.xo>*,.layout>*,.fields>*{min-width:0}
.graphic,.heroart,.diagram,.floor,.rack,.one-line{max-width:100%;overflow:hidden}
.ctl,.tbl,.svc{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctl tbody,.tbl tbody,.svc tbody{min-width:100%}
.navbar{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.navbar::-webkit-scrollbar{display:none}
.navbar a,.btn,button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--sig);outline-offset:3px}
.menu-toggle{display:none;position:relative;border:1px solid var(--line);border-radius:8px;background:var(--deep);color:#fff;width:46px;height:46px;padding:0;align-items:center;justify-content:center;cursor:pointer;flex:none;box-shadow:0 5px 14px rgba(11,21,25,.13);transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.menu-toggle:hover{background:var(--sig);border-color:var(--sig);box-shadow:0 7px 18px rgba(11,21,25,.18)}
.menu-toggle:active{transform:scale(.96)}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";position:absolute;left:12px;display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .24s ease,opacity .18s ease,top .24s ease}
.menu-toggle::before{top:14px}.menu-toggle span{top:21px}.menu-toggle::after{top:28px}
.menu-toggle[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}
.menu-toggle[aria-expanded="true"]{background:var(--sig);border-color:var(--sig)}
.nav-backdrop{display:none}

@media(max-width:900px){
  .wrap{padding-left:22px!important;padding-right:22px!important}
  header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .topbar{min-width:0}
  .topright{min-width:0;gap:10px}.topright>:not(.menu-toggle){display:none!important}
  .menu-toggle{display:flex}
  .navbar{display:block;position:absolute;left:22px;right:22px;top:calc(100% + 10px);width:auto;height:auto!important;max-height:calc(100vh - 100px);padding:10px!important;overflow-y:auto!important;border:1px solid var(--line);border-top:3px solid var(--sig);border-radius:10px;background:var(--card);box-shadow:0 18px 45px rgba(11,21,25,.24);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.985);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .navbar.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
  .navbar ul{display:grid!important;width:100%;gap:3px!important;padding:0!important}
  .navbar li{width:100%;border:0}
  .navbar a{position:relative;display:flex;align-items:center;width:100%;min-height:50px;padding:13px 40px 13px 14px!important;border-radius:6px;font-size:14px!important;white-space:normal;border:0!important;transition:background .16s ease,color .16s ease,padding-left .16s ease}
  .navbar a::after{content:"›";position:absolute;right:15px;top:50%;transform:translateY(-52%);font-family:Arial,sans-serif;font-size:23px;line-height:1;color:var(--sig)}
  .navbar a:hover,.navbar a:focus-visible{background:var(--paper);color:var(--ink);padding-left:18px!important}
  .navbar a.on{color:var(--ink);background:var(--paper);font-weight:700;box-shadow:inset 3px 0 0 var(--sig)}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(6,14,17,.48);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  section{scroll-margin-top:120px}
}

/* Narrow tablets and resized desktop windows need the same compact treatment
   as phones. 700px also covers the 625px Firefox viewport reported by QA. */
@media(max-width:700px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  .topbar{height:62px!important}
  .logo img{height:34px!important;max-width:min(72vw,260px)}
  header.stuck .topbar{height:56px!important}
  header.stuck .logo img{height:31px!important}
  .navbar{left:12px;right:12px;top:calc(100% + 7px);padding:8px!important;max-height:calc(100vh - 82px)}
  .navbar a{font-size:14px!important;min-height:48px}
  h1{font-size:clamp(30px,10vw,44px)!important;line-height:1.05!important}
  h2{font-size:clamp(24px,7.5vw,34px)!important}
  .lede{font-size:17px!important}
  .hero{padding-top:42px!important;padding-bottom:42px!important}
  section,.section{padding-top:44px!important;padding-bottom:44px!important}
  .btn,button,input,select,textarea{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center;white-space:normal;text-align:center}
  .herocta{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .herocta .btn{width:100%}
  input,select,textarea{font-size:16px!important}
  .fields,.two,.herogrid,.xo,.both,.lead,.mgrid,.eng,.argue,.auditgrid,.areas,.doc,.layout,.tl,.feats{grid-template-columns:minmax(0,1fr)!important}
  .cards,.parts,.tiles,.refs,.guidegrid,.kpis,.steps,.limits,.phases,.deliv,.delv,.disc,.args,.nofit,.eco,.relgrid,.buyers,.ints,.links,.svcs{grid-template-columns:minmax(0,1fr)!important}
  .toc .list,.rail .list{grid-template-columns:minmax(0,1fr)!important}
  .doc>.toc,.layout>.rail{position:static!important;max-height:none!important;overflow:visible!important}
  .foot{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}
  .foot>*{min-width:0}
  .ctl,.tbl,.svc{font-size:13px}
  .ctl th,.ctl td,.tbl th,.tbl td,.svc th,.svc td{padding:10px!important}
  .graphic svg,.heroart svg,.diagram svg{min-width:0!important;width:100%!important;height:auto!important}
}

@supports not (width:min(72vw,260px)){
  @media(max-width:700px){.logo img{width:auto;max-width:72vw}}
}

@media(max-width:380px){
  .wrap{padding-left:12px!important;padding-right:12px!important}
  .logo img{max-width:76vw}
  h1{font-size:29px!important}
  .navbar{padding-left:12px!important;padding-right:12px!important}
}

@media(hover:none){.navbar a:hover{border-bottom-color:transparent}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* High-contrast dark mode. The original pages contain a few fixed light-mode
   colours, so these late overrides keep headers, controls and copy legible. */
@media(prefers-color-scheme:dark){
  :root{
    --paper:#0F1A1F!important;--card:#19282F!important;--card-2:#22363E!important;
    --ink:#F3F7F8!important;--ink-2:#C2CFD3!important;
    --deep:#091318!important;--deeper:#050C10!important;--deep-2:#1C3D47!important;
    --line:#43565E!important;--line-2:#32464E!important;
    --sig:#F1C46F!important;--sig-lt:#F1C46F!important;
  }
  body{background:var(--paper);color:var(--ink)}
  header{background:rgba(15,26,31,.98)!important;border-color:var(--line)!important;box-shadow:0 5px 20px rgba(0,0,0,.28)}
  header .logo img{filter:brightness(0) invert(1);opacity:1}
  .tagline,.navbar a{color:#D3DEE1!important}
  .navbar a:hover,.navbar a:focus-visible,.navbar a.on{color:#FFFFFF!important}
  .btn,.dark .btn,.darker .btn{background:var(--sig)!important;border-color:var(--sig)!important;color:#101A1F!important}
  .btn:hover,.dark .btn:hover,.darker .btn:hover{background:#FFFFFF!important;border-color:#FFFFFF!important;color:#101A1F!important}
  .btn.ghost,.dark .btn.ghost,.darker .btn.ghost{background:transparent!important;border-color:#91A5AC!important;color:#F3F7F8!important}
  .btn.ghost:hover,.dark .btn.ghost:hover,.darker .btn.ghost:hover{background:#FFFFFF!important;border-color:#FFFFFF!important;color:#101A1F!important}
  input,select,textarea{color-scheme:dark;background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
  input::placeholder,textarea::placeholder{color:#9EB0B6;opacity:1}
  option{background:var(--card);color:var(--ink)}
  .dark p,.darker p,.dark li,.darker li,.dark dd,.darker dd{color:#C6D3D7}
  .dark .lede,.darker .lede{color:#C6D3D7!important}
  .relcard p,.part p,.tile p,.ref p,.feat p,.promise{color:var(--ink-2)!important}
  .navbar{background:var(--card)}
  .navbar a::after{color:var(--sig)}
  .navbar a:hover,.navbar a:focus-visible,.navbar a.on{background:var(--card-2)!important}
  .menu-toggle{background:var(--sig);border-color:var(--sig);color:#101A1F}
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"]{background:#FFFFFF;border-color:#FFFFFF;color:#101A1F}
  .ctl td,.tbl td,.svc td{border-color:var(--line-2)}
  .feat .fig{background:#F7FAFA}
}

@media print{header,.navbar{position:static!important}.navbar{overflow:visible!important}body{overflow:visible!important}}
