/* R354.9 responsive presentation contract. Optical diagrams retain their own colours and scale. */
:root{--ui-ink:#172b49;--ui-muted:#526581;--ui-line:#dfe6ef;--ui-focus:#2563eb;--ui-header:72px}
/* One vertical page scroller. Legacy process.css locks html/body and scrolls
   main independently, which breaks the shell's window.scrollTo navigation. */
@media screen{
 /* Sign-in is outside #app and needs its own document scrolling contract. */
 html:has(body>#login:not(.hidden)){height:auto!important;min-height:100%!important;overflow-x:clip!important;overflow-y:auto!important}
 html body:has(>#login:not(.hidden)){height:auto!important;min-height:100vh!important;min-height:100dvh!important;overflow:visible!important}
 html body #login.login:not(.hidden){height:auto!important;max-height:none!important;overflow:visible!important}
 html:has(#app.x-responsive:not(.hidden)){height:auto!important;min-height:100%!important;overflow-x:clip!important;overflow-y:auto!important}
 html body:has(>#app.x-responsive:not(.hidden)){height:auto!important;min-height:100vh!important;min-height:100dvh!important;overflow:visible!important}
 html body #app.x-responsive:not(.hidden){height:auto!important;min-height:100vh!important;min-height:100dvh!important;overflow:visible!important}
 html body #app.x-responsive>main{height:auto!important;min-height:100vh!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important}
 html:has(#app.x-responsive:not(.hidden)):has(dialog[open],.modalShade:not(.hidden):not([hidden])){overflow-y:hidden!important}
}
@media screen and (min-width:1001px){
 html body #app.x-responsive>aside#xnSidebar{position:sticky!important;top:0!important;align-self:start!important;height:100vh!important;height:100dvh!important;min-height:0!important;max-height:100vh!important;max-height:100dvh!important}
}
@media screen and (max-width:1000px){
 html:has(body.xn-nav-open #app.x-responsive:not(.hidden)){overflow-y:hidden!important}
}
/* Map popups stay within the visible map rather than under the sticky shell. */
#content .leaflet-container{isolation:isolate;background:#edf2f7}
#content #r324Map{height:clamp(170px,calc(100dvh - var(--ui-header) - 36px),540px);min-height:0!important;scroll-margin-top:calc(var(--ui-header) + 12px)}
#content .xn-fault-leaflet-popup .leaflet-popup-content{margin:14px 18px;line-height:1.4}
#content .xn-fault-popup p{margin:8px 0!important;font-size:13px!important;overflow-wrap:anywhere}
#content .xn-fault-popup .xn-location-link{background:#2457b7!important;border-color:#2457b7!important;min-height:40px!important;padding:8px 12px!important;font-size:13px!important}
#content .xn-map-notice{padding:12px 14px;margin:10px 0;border:1px solid #dfc68c;border-radius:9px;background:#fff8e8;color:#654919;font-size:13px;line-height:1.5}
#content .xn-map-notice[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--ui-header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0}
/* A mobile display override must never expose the application before sign-in. */
html body #app.hidden,html body #login.hidden,html body [hidden]{display:none!important}
#app>main,#app.x-responsive #content,#app.x-responsive #content>.xn{min-width:0!important;max-width:100%;box-sizing:border-box}
#app.x-responsive #content{padding:24px!important}
#app.x-responsive #content :is(.xn-body,.xn-card,.xn-card-content,.panel,.grid2,.grid3,.grid4,.xw-home-layout)>*{min-width:0}
#app.x-responsive #content :is(h1,h2,h3,p,.xn-notice,.hint){overflow-wrap:break-word}
#app.x-responsive #content :is(.panel,.opHero,.opKpi,.xw-calendar-filters,.xw-resource-scroll){border-color:var(--ui-line)!important;box-shadow:none!important}
#app.x-responsive #content :is(.panel h2,.panel h3,.opHero h1){text-transform:none!important;letter-spacing:normal!important}
#app.x-responsive #content .opHero{padding:20px!important;border-radius:12px!important}
#app.x-responsive #content .opHero h1{font-size:28px!important;line-height:1.2!important}
#app.x-responsive #content .xn-head{margin-bottom:20px;align-items:flex-start}
#app.x-responsive #content .xn-card{margin-bottom:18px}
#app.x-responsive #content .xn-stat{padding:16px!important}
#app.x-responsive #content .xn-stat strong{font-size:28px!important;line-height:1.2!important;margin:8px 0!important}
#app.x-responsive #content .xn-stat small{line-height:1.5!important}
#app.x-responsive #content :is(.xn-actions,.xn-toolbar,.xw-date-nav,.xw-pagination){flex-wrap:wrap;gap:8px}
#app.x-responsive #content :is(.xn-toolbar,.xw-calendar-filters) :is(input,select){min-width:0;max-width:100%;box-sizing:border-box}
#app :is(button,[role=button],a,input,select,textarea):focus-visible,dialog :is(button,a,input,select,textarea):focus-visible{outline:3px solid #93b4fc!important;outline-offset:2px}
#app .xn-icon,dialog .xn-icon{width:18px;height:18px;min-width:18px;fill:none!important;stroke:currentColor;flex-shrink:0}

/* Header: a single source of sizing for every role and every page. */
html body #app>main>header.x-shell-header{display:grid!important;grid-template-columns:minmax(130px,1fr) minmax(280px,auto) auto auto!important;grid-template-rows:auto!important;gap:10px!important;height:72px!important;min-height:72px!important;padding:12px 24px!important;align-items:center!important;box-sizing:border-box!important}
html body #app>main>header.x-shell-header .search{grid-area:1/1!important;width:100%!important;min-width:0!important;max-width:440px!important;height:44px!important;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:12px 14px!important;font-size:13px!important}
html body #app>main>header.x-shell-header .accountWrap{grid-area:1/2!important;display:flex!important;gap:8px!important;min-width:0!important;max-width:none!important;width:auto!important;justify-content:flex-end!important;position:relative}
html body #app>main>header.x-shell-header :is(.topIcon,#r314InboxBtn,#xnetAsk){height:44px!important;min-height:44px!important;min-width:44px!important;margin:0!important;padding:10px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;color:#304968!important;-webkit-text-fill-color:currentColor!important;background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:9px!important;box-shadow:none!important;box-sizing:border-box;line-height:1.2!important;font-size:13px!important;position:relative}
html body #app>main>header.x-shell-header button *{color:inherit!important;-webkit-text-fill-color:currentColor!important}
html body #app>main>header.x-shell-header #r314InboxBtn{grid-area:1/3!important;width:auto!important}
html body #app>main>header.x-shell-header #xnetAsk{grid-area:1/4!important;width:auto!important;background:#eef3ff!important;color:#2457b7!important}
html body #app>main>header.x-shell-header #xnMenuToggle{display:none!important}
html body #app>main>header.x-shell-header #lang{height:44px!important;min-height:44px!important;width:112px!important;min-width:0!important;flex:0 0 112px!important;margin:0!important;font-size:13px!important;padding:8px!important}
html body #app>main>header.x-shell-header #who{min-width:0!important;max-width:200px!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto!important}
html body #app>main>header.x-shell-header .avatar{width:32px!important;height:32px!important;flex:0 0 32px!important;min-width:0!important}
#app #bell #nbadge:not(:empty){position:absolute;right:2px;top:0;min-width:16px;min-height:16px;padding:1px 3px;border-radius:9px;background:#b42342!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:10px;line-height:14px}
#app #profileMenu{top:calc(100% + 10px)!important;right:0!important;width:240px!important;max-width:calc(100vw - 24px)!important;padding:6px!important;border-radius:12px!important}
#app #profileMenu button{min-height:44px!important;width:100%;text-align:left!important;justify-content:flex-start!important}
#xnNavClose{display:none!important}
#app.x-responsive #content .xSafeBack{margin:0 0 14px!important;min-height:38px!important}

/* Navigation tabs use a quiet rail and a clear selected state, not large action tiles. */
html body #app.x-responsive #content :is(.jobWsTabs,.joTabs,.tabs,.r234Steps,.techTabs){display:flex!important;flex-wrap:nowrap!important;gap:4px!important;padding:6px!important;background:#edf1f7!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;min-width:0!important;scrollbar-width:thin;scroll-padding-inline:8px;align-items:stretch!important;box-sizing:border-box}
html body #app.x-responsive #content :is(.jobWsTabs,.joTabs,.tabs,.r234Steps,.techTabs)>button{flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:42px!important;height:auto!important;padding:10px 13px!important;font-size:13px!important;font-weight:550!important;line-height:1.4!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap!important;color:#4b5f7d!important;-webkit-text-fill-color:currentColor!important;background:transparent!important;border:1px solid transparent!important;border-radius:7px!important;box-shadow:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
html body #app.x-responsive #content :is(.jobWsTabs,.joTabs,.tabs,.r234Steps,.techTabs)>button.active{background:#fff!important;color:#204f9e!important;border-color:#ccd9ef!important;box-shadow:0 1px 3px #1425460a!important}
html body #app.x-responsive #content :is(.jobWsTabs,.joTabs,.tabs,.r234Steps,.techTabs)>button :is(span,b){color:inherit!important;-webkit-text-fill-color:currentColor!important}
html body #app.x-responsive #content .r234Steps>button>b{width:24px!important;height:24px!important;min-width:24px!important;display:grid;place-items:center;background:#e1e8f3!important;border-radius:50%!important;font-size:12px!important}
#app.x-responsive #content .jobWorkspaceV3 .jobWsStatus{gap:6px!important;padding:10px!important;background:#f0f3f8!important;border-color:var(--ui-line)!important}
#app.x-responsive #content .jobWorkspaceV3 .jobWsStatus>span{padding:8px!important;font-size:12px!important;overflow-wrap:anywhere;min-width:0}
#app.x-responsive #content .jobWorkspaceV3 :is(.r234ActionBar,.xnet-packages-toolbar){padding:12px!important;gap:10px!important;border-color:var(--ui-line)!important;flex-wrap:wrap!important}
#app.x-responsive #content .jobWorkspaceV3 .x-job-action-controls{flex-wrap:wrap!important}
#app.x-responsive #content .jobWorkspaceV3 .jobWsGrid{gap:10px!important}

/* Tables and technical canvases scroll locally; their detail is never shrunk to fit. */
#app.x-responsive #content :is(.xn-scroll,.xw-resource-scroll,.x-ui-scroll){max-width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#app.x-responsive #content .x-ui-scroll>table{display:table!important;width:100%;min-width:640px;max-width:none!important;overflow:visible!important}
#app.x-responsive #content .x-ui-scroll button:not(.primary):not(.danger){background:#fff!important;color:#304968!important;-webkit-text-fill-color:currentColor!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;font-size:13px!important;min-height:40px!important;padding:8px 12px!important;text-transform:none!important}
#app.x-responsive #content .xRouteFlow span>b{background:#e5ecfa!important;color:#2457b7!important;-webkit-text-fill-color:currentColor!important;min-width:24px;line-height:24px;text-align:center}
#app.x-responsive #content .opAttentionBlock button{background:#f7f9fc!important;color:#304968!important;-webkit-text-fill-color:currentColor!important;border:1px solid var(--ui-line)!important;min-height:44px}
#app.x-responsive #content .opAttentionBlock button span{color:#526581!important;-webkit-text-fill-color:currentColor!important}
#app.x-responsive #content .xn-scroll table{min-width:560px}
#app.x-responsive #content .xn-scroll table :is(td,th){white-space:normal;overflow-wrap:anywhere}
#app.x-responsive #content :is(.xn-scroll,.x-ui-scroll):focus-visible{outline:3px solid #93b4fc;outline-offset:2px}
#app.x-responsive #content .xn-scroll .xn-actions{min-width:110px}
#app.x-responsive #content :is(.grid2,.grid3,.grid4){min-width:0}
#app.x-responsive #content .xe-canvas-toolbar{flex-wrap:wrap}
#app.x-responsive #content :is(.xe-library,.xe-inspector){background:#fff!important;color:var(--ui-ink)!important;position:static!important;width:auto!important;height:auto!important;box-sizing:border-box;box-shadow:none!important}
#app.x-responsive #content :is(.xe-library,.xe-inspector) :is(h3,h4,label){color:var(--ui-ink)!important;-webkit-text-fill-color:currentColor!important}
#app.x-responsive #content .xe-metrics{border-color:var(--ui-line)!important}
#app.x-responsive #content #techDetail{position:static!important;width:auto!important;height:auto!important;background:#fff!important;color:var(--ui-ink)!important;box-shadow:none!important}
#app.x-responsive #content .techJobCard{background:#fff!important;color:var(--ui-ink)!important;-webkit-text-fill-color:currentColor!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;text-align:left!important;min-height:44px!important;padding:16px!important;box-shadow:none!important}
#app.x-responsive #content .techJobCard:hover{background:#f4f7fc!important;border-color:#9db8e4!important}
#app.x-responsive #content .techJobCard :is(span,small){color:var(--ui-muted)!important;-webkit-text-fill-color:currentColor!important;font-size:13px!important;line-height:1.5!important;overflow-wrap:anywhere}
#app.x-responsive #content .r292SectionHead>b{background:#eaf0ff!important;color:#2457b7!important;-webkit-text-fill-color:currentColor!important}
#app.x-responsive #content :is(.r292Topbar,.r292Meta>span){background:#fff!important;border-color:var(--ui-line)!important;box-shadow:none!important}
#app.x-responsive #content .r292Topbar button,#app.x-responsive #content .r292ToolRow button,#app.x-responsive #content .r293UploadActions button{min-height:44px!important;padding:10px 13px!important;font-size:13px!important}
#app.x-responsive #content .closureHero{gap:18px!important;box-shadow:none!important;border-color:var(--ui-line)!important}
#app.x-responsive #content .closureHeroActions{display:flex;flex-wrap:wrap;gap:8px!important}
#app.x-responsive #content .closureHeroActions button,#app.x-responsive #content .closureBack{min-height:44px!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;border-radius:8px!important}
#app.x-responsive #content .closureBack{background:#f4f7fb!important;color:#304968!important;-webkit-text-fill-color:currentColor!important;border:1px solid var(--ui-line)!important}
#app.x-responsive #content .closureContext{gap:10px!important}
#app.x-responsive #content .contextCard{min-height:0!important;padding:14px!important;border-color:var(--ui-line)!important;overflow-wrap:anywhere}
#app.x-responsive #content .contextCard small{font-size:11px!important;letter-spacing:.03em!important;color:var(--ui-muted)!important}
#app.x-responsive #content .contextCard b{font-size:13px!important;line-height:1.5!important}
#app.x-responsive #content .contextCard span{font-size:12px!important;line-height:1.5!important}
#app.x-responsive #content :is(.closureMachine,.mapCard,.modernDiagram){border-color:var(--ui-line)!important;box-shadow:none!important}
#app.x-responsive #content .njTitle>b{background:#eaf0ff!important;color:#2457b7!important;-webkit-text-fill-color:currentColor!important;min-width:34px!important;width:34px!important;flex:0 0 34px!important;white-space:nowrap!important;font-size:13px!important;line-height:34px!important;text-align:center}
dialog.xn{box-sizing:border-box;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important}
dialog.xn .xn-form{min-width:0;overscroll-behavior:contain}
dialog.xn :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
dialog.xn .xn-modal-head h2{overflow-wrap:anywhere}
dialog.xn .xn-modal-head>[data-close]{flex-shrink:0}
#app.x-responsive #content :is(.xw-brand-form,.xw-brand-editor){min-width:0}

@media(max-width:1250px){
 :root{--ui-header:116px}
 html body #app>main>header.x-shell-header{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:44px 44px!important;height:auto!important;min-height:116px!important;padding:10px 18px!important;gap:8px!important}
 html body #app>main>header.x-shell-header .accountWrap{grid-area:2/1/3/-1!important;width:100%!important}
 html body #app>main>header.x-shell-header #r314InboxBtn{grid-area:1/2!important}
 html body #app>main>header.x-shell-header #xnetAsk{grid-area:1/3!important}
 #app.x-responsive #content .grid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:1000px){
 html body #app>main>header.x-shell-header{grid-template-columns:44px minmax(0,1fr) 44px 44px!important;padding:10px 12px!important}
 html body #app>main>header.x-shell-header #xnMenuToggle{display:inline-flex!important;grid-area:1/1!important;width:44px!important}
 html body #app>main>header.x-shell-header .search{grid-area:1/2!important;max-width:none!important}
 html body #app>main>header.x-shell-header #r314InboxBtn{grid-area:1/3!important;width:44px!important}
 html body #app>main>header.x-shell-header #xnetAsk{grid-area:1/4!important;width:44px!important}
 html body #app>main>header.x-shell-header :is(#r314InboxBtn,#xnetAsk)>span{display:none!important}
 #app>aside #xnNavClose{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;margin:0 0 8px auto;background:#22334d!important;border:1px solid #40536f!important;color:#fff!important;-webkit-text-fill-color:currentColor!important;border-radius:8px}
 /* Own the entire drawer geometry: legacy phone styles cap it at 250px
    and let menu entries overflow onto the dimmed page. */
 html body #app.x-responsive>aside#xnSidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(340px,calc(100vw - 48px))!important;max-width:calc(100vw - 48px)!important;height:100vh!important;height:100dvh!important;max-height:100vh!important;max-height:100dvh!important;margin:0!important;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important;overflow:hidden!important;overscroll-behavior:contain;background:#111d35!important;color:#e6edf9!important;z-index:11001!important;opacity:1!important;filter:none!important;box-shadow:12px 0 36px #07112440!important}
 html body #app.x-responsive>aside#xnSidebar>.brand{flex:0 0 auto!important;margin:0 4px!important;padding:0 4px 14px!important;min-width:0!important;gap:10px!important}
 html body #app.x-responsive>aside#xnSidebar .brand small{color:#b5c5df!important;font-size:11px!important}
 html body #app.x-responsive>aside#xnSidebar #xnNavClose{flex:0 0 44px!important;margin:0 0 8px auto!important}
 html body #app.x-responsive>aside#xnSidebar .nav{display:block!important;flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important;width:100%!important;margin-top:12px!important;padding:0 4px 8px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#7385a4 transparent}
 html body #app.x-responsive>aside#xnSidebar .nav button{min-height:46px!important;font-size:15px!important;line-height:1.45!important;color:#e6edf9!important;-webkit-text-fill-color:currentColor!important;padding:11px 12px!important;white-space:normal!important;overflow-wrap:break-word!important}
 html body #app.x-responsive>aside#xnSidebar .nav button.active{background:#2864e8!important;color:#fff!important}
 html body #app.x-responsive>aside#xnSidebar .nav :is(.navGroupBtn,.navSection){font-size:11px!important;line-height:1.5!important;color:#b5c5df!important;-webkit-text-fill-color:currentColor!important;letter-spacing:.06em!important}
 html body #app.x-responsive>aside#xnSidebar .online{position:static!important;flex:0 0 auto!important;margin:8px 0 0!important;padding:10px 12px!important;font-size:12px!important;color:#c6d4ec!important;background:#111d35!important}
 html body.xn-nav-open #xnNavBackdrop{z-index:11000!important;background:#07112480!important;backdrop-filter:none!important;filter:none!important}
 body.xn-nav-open{overflow:hidden!important}
 #app.x-responsive #content :is(.grid2,.grid3,.grid4){grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app.x-responsive #content .xn-scroll table{min-width:620px}
}
@media(max-width:600px){
 #app.x-responsive #content .r292Meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #app.x-responsive #content .r292Meta>span:first-child{grid-column:1/-1}
 #app.x-responsive #content .closureContext{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app.x-responsive #content .closureHeroActions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app.x-responsive #content .closureHeroActions button{min-width:0!important;padding:9px!important}
 #app.x-responsive #content .xw-job-table .xn-scroll table{min-width:0!important;display:block!important}
 #app.x-responsive #content .xw-job-table :is(tbody,tr){display:block!important;width:100%;box-sizing:border-box}
 #app.x-responsive #content .xw-job-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #app.x-responsive #content .xw-job-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;padding:14px 16px!important;border-bottom:1px solid var(--ui-line)}
 #app.x-responsive #content .xw-job-table td{display:block!important;padding:5px 0!important;border:0!important;min-width:0!important}
 #app.x-responsive #content .xw-job-table td:first-child{grid-column:1/-1;font-size:14px}
 #app.x-responsive #content .xw-job-table td:nth-child(2){grid-column:1/-1}
 #app.x-responsive #content .xw-job-table td:nth-child(3){align-self:center}
 #app.x-responsive #content .xw-job-table td:nth-child(4){justify-self:end}
 #app.x-responsive #content{padding:18px 14px 28px!important}
 html body #app>main>header.x-shell-header #who{max-width:none!important;font-size:11px!important}
 html body #app>main>header.x-shell-header #settings{display:none!important}
 html body #app>main>header.x-shell-header #lang{width:104px!important;flex-basis:104px!important;font-size:14px!important}
 html body #app>main>header.x-shell-header .accountWrap{gap:6px!important}
 #app.x-responsive #content :is(.grid2,.grid3,.grid4,.xn-form,.xn-permissions,.jobWorkspaceV3 .jobWsGrid){grid-template-columns:minmax(0,1fr)!important}
 #app.x-responsive #content :is(.panel,.xn-card-body){padding:16px!important}
 #app.x-responsive #content :is(.xn-card-head,.xn-toolbar){padding:16px!important}
 #app.x-responsive #content .xn-head{gap:12px!important;margin-bottom:16px!important}
 #app.x-responsive #content .xn h1,#app.x-responsive #content .opHero h1{font-size:25px!important}
 #app.x-responsive #content .xn-stats{gap:10px!important;margin-bottom:18px!important}
 #app.x-responsive #content .xn-stat{padding:14px!important}
 #app.x-responsive #content .xn-stat strong{font-size:25px!important;margin:7px 0!important}
 #app.x-responsive #content .xn-stat small{font-size:11px!important}
 #app.x-responsive #content :is(.opKpis,.r234Kpis){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 #app.x-responsive #content :is(.opKpi,.opStat){padding:12px!important;min-height:0!important}
 #app.x-responsive #content :is(button.primary,button.secondary,button.xPrimary,.xn button,.r234WizardBar button,.x-job-action-controls button){min-height:44px!important;font-size:13px!important;line-height:1.4!important}
 #app.x-responsive #content :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]),dialog.xn :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]){font-size:16px!important;min-height:44px!important}
 #app.x-responsive #content :is(.xn-toolbar,.xw-calendar-filters){gap:10px!important}
 #app.x-responsive #content .xn-toolbar>input{flex-basis:100%!important;width:100%!important}
 #app.x-responsive #content .xw-pagination{align-items:flex-start;gap:12px}
 #app.x-responsive #content .xw-pagination .xn-actions{width:100%;justify-content:space-between}
 #app.x-responsive #content .xw-calendar-page .xn-head .xn-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 #app.x-responsive #content .xw-calendar-page .xn-head .xn-actions button{white-space:normal!important}
 #app.x-responsive #content .xw-calendar-filters{display:grid!important;grid-template-columns:1fr 1fr!important}
 #app.x-responsive #content .xw-calendar-filters input{grid-column:1/-1}
 #app.x-responsive #content .xw-date-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;width:100%}
 #app.x-responsive #content .xw-date-nav>b{grid-column:1/-1;padding:4px 0}
 #app.x-responsive #content .xw-date-nav input{width:100%;box-sizing:border-box}
 #app.x-responsive #content .xw-segments{display:flex;width:100%;box-sizing:border-box}
 #app.x-responsive #content .xw-segments button{flex:1;padding:8px!important}
 #app.x-responsive #content .xw-resource-grid th:first-child{min-width:140px!important;max-width:140px!important;width:140px!important;overflow-wrap:anywhere;font-size:12px!important}
 #app.x-responsive #content .xw-resource-grid th:first-child b{white-space:normal!important}
 #app.x-responsive #content .xw-month-grid{min-width:640px}
 #app.x-responsive #content #xwCalendarBoard{max-width:100%;overflow:auto}
 #app.x-responsive #content .jobWorkspaceV3 .jobWsStatus{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app.x-responsive #content .jobWorkspaceV3 :is(.xnet-packages-toolbar,.x-job-action-controls){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%;box-sizing:border-box}
 #app.x-responsive #content .jobWorkspaceV3 :is(.xnet-packages-toolbar,.x-job-action-controls) button{white-space:normal!important;width:100%!important;padding:9px!important}
 #app.x-responsive #content .jobWorkspaceV3 .r234ActionBar{align-items:stretch!important}
 #app.x-responsive #content .jobWorkspaceV3 .x-job-action-label{width:100%!important}
 dialog.xn{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:14px!important;margin:auto!important}
 dialog.xn .xn-modal-head{padding:16px!important;gap:12px}
 dialog.xn .xn-modal-head h2{font-size:21px!important}
 dialog.xn form{padding:14px!important}
 dialog.xn .xn-form{grid-template-columns:minmax(0,1fr)!important;padding:2px!important}
 dialog.xn .xn-modal-foot{gap:8px!important;margin-top:12px!important;padding-top:12px!important}
 dialog.xn .xn-modal-foot button{min-height:44px!important}
 #xnToastStack{right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:calc(100vw - 24px)!important;max-height:40dvh!important}
 #xnToastStack .toast{padding:12px!important;font-size:13px!important;gap:10px!important}
}
@media(max-width:360px){html body #app>main>header.x-shell-header .avatar{display:none!important}}
@media(max-width:1000px) and (max-height:480px){html body #app.x-responsive>aside#xnSidebar>.brand{display:none!important}html body #app.x-responsive>aside#xnSidebar .online{padding:6px 12px!important}html body #app.x-responsive>aside#xnSidebar .nav{margin-top:4px!important}}
@media(prefers-reduced-motion:reduce){#app *,dialog *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* A stable job number must stay readable in the compact review queue. */
#app.x-responsive .opAttentionBlock button[data-queue-open]{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;text-align:start!important;width:100%!important;padding:12px!important}
#app.x-responsive .opAttentionBlock button[data-queue-open]>b{white-space:nowrap!important;overflow-wrap:normal!important}
#app.x-responsive .opAttentionBlock button[data-queue-open]>span{white-space:normal!important;overflow-wrap:anywhere}

/* Readable workspace lists. Do not apply these rules to optical diagram tables. */
#app.x-responsive #content :is(.xn-scroll,.x-ui-scroll)>table{table-layout:auto;min-width:640px}
#app.x-responsive #content :is(.xn-scroll,.x-ui-scroll)>table :is(th,td){overflow-wrap:normal;word-break:normal;line-height:1.5!important}
#app.x-responsive #content :is(.xn-scroll,.x-ui-scroll)>table td:first-child{min-width:90px}
#app.x-responsive #content :is(.xn-scroll,.x-ui-scroll)>table td:first-child>b{white-space:nowrap}
#app.x-responsive #content .x-ui-scroll>table td:nth-child(2){min-width:150px}
#app.x-responsive #content .xn-scroll .xn-person{min-width:210px;align-items:flex-start}
#app.x-responsive #content .xn-scroll .xn-person small{overflow-wrap:anywhere;max-width:30ch}
#app.x-responsive #content .xn .xn-chip{white-space:nowrap!important;word-break:normal;overflow-wrap:normal;max-width:none;line-height:1.5!important;flex-shrink:0}
#app.x-responsive #content .xn-scroll .xn-actions{flex-wrap:wrap;min-width:150px}
/* Keep the existing splice rows/colours intact; pan the table instead of crushing its columns. */
@media screen{
 #app.x-responsive #content .spliceTableWrap{overflow-x:auto!important;overscroll-behavior-inline:contain}
 #app.x-responsive #content .spliceCleanTable{min-width:1060px!important}
}
#app.x-responsive #content .odfCabinetTop :is(span,small,b){color:#e6f5ff!important;-webkit-text-fill-color:currentColor!important}
#app.x-responsive #content .odfCabinetTop{flex-wrap:wrap;justify-content:center;gap:10px;text-align:center}
#app.x-responsive #content .odfCabinetTop>span,#app.x-responsive #content .odfCabinetTop>small{flex:0 0 auto;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:break-word;line-height:1.5}
#app.x-responsive #content .odfPortGrid{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:10px}
#app.x-responsive #content #odfPositionTable table{min-width:900px}
#app.x-responsive #content #odfPositionTable :is(th,td):nth-child(-n+2){min-width:60px;width:60px}
#app.x-responsive #content #odfPositionTable :is(td:nth-child(4),td:nth-child(5),td:nth-child(6)){white-space:nowrap}
#app.x-responsive #content #odfPositionTable td:nth-child(4) :is(b,small){white-space:nowrap}
#app.x-responsive #content .x-table-hint{display:block;margin:0;padding:8px 14px;color:#526581;font-size:12px;line-height:1.5;background:#f7f9fc;border-block:1px solid #e1e8f0}
#app.x-responsive #content :is(.xn-head,.xn-card-head){flex-wrap:wrap}
#app.x-responsive #content :is(.xn-head,.xn-card-head)>div:first-child{min-width:0;flex:1 1 240px}
@media(max-width:700px){#app.x-responsive #content .xn-head>div:first-child{flex:0 1 auto}}
#app.x-responsive #content :is(.xn-head,.xn-card-head) .xn-actions{flex-shrink:0;max-width:100%}
#app.x-responsive #content :is(.panel>h2,.panel>h3,.xn-card-head h2){font-weight:650!important;line-height:1.4!important}
/* Long form labels expand with their text, with one scrollable body and reachable actions. */
dialog.xn[open]{max-width:calc(100vw - 24px);height:fit-content;overflow:hidden}
dialog.xn .xn-modal-head>div{min-width:0}
dialog.xn .xn-modal-head h2{overflow-wrap:break-word;line-height:1.35!important}
dialog.xn .xn-modal-head>[data-close]{flex:0 0 44px;align-self:flex-start}
dialog.xn form{flex:1 1 auto;min-height:0}
dialog.xn form>.xn-form{min-height:0;min-width:0;overflow:auto;align-content:start}
dialog.xn .xn-form>*,dialog.xn .xn-form label{min-width:0}
dialog.xn .xn-form label{height:auto;white-space:normal;line-height:1.5!important;overflow-wrap:break-word}
dialog.xn .xn-check{align-items:flex-start!important;gap:10px;white-space:normal!important}
dialog.xn .xn-check input{flex:0 0 18px;margin-top:3px!important}
dialog.xn .xn-modal-foot{flex:0 0 auto!important;display:flex;flex-wrap:wrap;gap:10px}
dialog.xn .xn-modal-foot button{height:auto!important;white-space:normal!important;line-height:1.4!important}
@media(max-width:700px){
 #app.x-responsive #content .odfCabinetFace{padding:16px 14px 22px}
 #app.x-responsive #content .odfCabinetTop{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:center;text-align:center;letter-spacing:.03em}
 #app.x-responsive #content .odfCabinetTop>span:first-child{max-width:100%;overflow-wrap:break-word}
 #app.x-responsive #content .odfCabinetTop small{white-space:normal;line-height:1.5;letter-spacing:.04em}
 #app.x-responsive #content .odfPanel3d{margin:12px 2px!important;padding:10px!important}
 #app.x-responsive #content .odfPortGrid{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:10px}
 #app.x-responsive #content .odf3dStage{padding:26px 8px;min-height:460px!important}
 dialog.xn .xnet-label-paper{flex-direction:column;align-items:center;padding:16px;gap:12px;text-align:center}
 dialog.xn .xnet-label-paper>div{min-width:0;overflow-wrap:anywhere}
 dialog.xn .xnet-label-paper img{width:160px;height:160px;flex:none}
 #app.x-responsive #content :is(.xn-head,.xn-card-head){flex-wrap:wrap}
 #app.x-responsive #content .r302RouteActions{display:grid;grid-template-columns:1fr;gap:8px}
 #app.x-responsive #content .r302RouteActions button{height:auto!important;min-height:44px!important;width:100%;line-height:1.4!important}
 #app.x-responsive #content .joToolBand{--workspace-control-height:44px;--workspace-control-font-size:13px;display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:8px 0!important}
 #app.x-responsive #content .joToolBand>button{flex:1 1 160px;height:auto!important;min-height:44px!important;white-space:normal!important;line-height:1.4!important;font-size:13px!important}
}