/*
 * MTR minimal glass system
 * One finishing layer for the account shell and the warehouse workspace.
 */
:root{
  --mg-bg-0:#06111d;
  --mg-bg-1:#0b2533;
  --mg-bg-2:#143e49;
  --mg-glass:rgba(17,42,54,.58);
  --mg-glass-strong:rgba(9,29,42,.78);
  --mg-glass-soft:rgba(209,241,243,.075);
  --mg-line:rgba(220,248,249,.17);
  --mg-line-strong:rgba(220,248,249,.3);
  --mg-text:#f5fbfc;
  --mg-muted:#adc5cb;
  --mg-faint:#7899a2;
  --mg-cyan:#7bd9dc;
  --mg-gold:#e7c47f;
  --mg-success:#7ae1b4;
  --mg-danger:#ff8998;
  --mg-shadow:0 22px 60px rgba(0,9,17,.28);
  --mg-shadow-soft:0 10px 30px rgba(0,9,17,.16);
  --mg-inset:inset 0 1px 0 rgba(255,255,255,.14);
  --mg-radius-xl:26px;
  --mg-radius-lg:20px;
  --mg-radius-md:14px;
  --mg-blur:blur(26px) saturate(120%);
  --ui-bg:var(--mg-bg-0);
  --ui-surface:var(--mg-glass-strong);
  --ui-soft:var(--mg-glass-soft);
  --ui-glass:var(--mg-glass);
  --ui-line:var(--mg-line);
  --ui-text:var(--mg-text);
  --ui-muted:var(--mg-muted);
  --ui-accent:var(--mg-gold);
  --ui-cyan:var(--mg-cyan);
  --ui-shadow:var(--mg-shadow);
  color-scheme:dark;
}

html[data-mtr-theme="light"]{
  --mg-bg-0:#dce8ef;
  --mg-bg-1:#e8f0f4;
  --mg-bg-2:#c7d9e3;
  --mg-glass:rgba(244,249,252,.58);
  --mg-glass-strong:rgba(246,250,252,.78);
  --mg-glass-soft:rgba(255,255,255,.34);
  --mg-line:rgba(255,255,255,.72);
  --mg-line-strong:rgba(255,255,255,.9);
  --mg-text:#182a39;
  --mg-muted:#5a6e7c;
  --mg-faint:#7d909c;
  --mg-cyan:#237d8c;
  --mg-gold:#92661c;
  --mg-success:#19775a;
  --mg-danger:#b73e50;
  --mg-shadow:0 22px 58px rgba(65,91,108,.17);
  --mg-shadow-soft:0 10px 28px rgba(65,91,108,.11);
  --mg-inset:inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light;
}

html,body{background:var(--mg-bg-0);color:var(--mg-text)}
body{font-family:Inter,"Segoe UI Variable","Segoe UI",Arial,sans-serif;font-weight:400}
button,input,select,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}
#app{
  background:
    radial-gradient(ellipse 58% 48% at 50% 32%,rgba(100,199,211,.14),transparent 72%),
    radial-gradient(ellipse 45% 38% at 16% 82%,rgba(220,183,111,.075),transparent 74%),
    linear-gradient(152deg,#020a12 0%,#071827 48%,#0b2330 100%);
}
#app canvas{display:block;}

/* App background: diffused landscape-like layers instead of decorative rings. */
#mtrAppShell,
html[data-mtr-theme="light"] #mtrAppShell{
  background:
    linear-gradient(180deg,rgba(4,16,27,.04),rgba(4,16,27,.22)),
    radial-gradient(ellipse 82% 58% at 5% 100%,rgba(43,130,146,.33),transparent 68%),
    radial-gradient(ellipse 62% 72% at 100% 0%,rgba(107,155,166,.25),transparent 66%),
    linear-gradient(135deg,var(--mg-bg-0),var(--mg-bg-1) 56%,var(--mg-bg-2));
  color:var(--mg-text);
}
html[data-mtr-theme="light"] #mtrAppShell{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(215,231,239,.28)),
    radial-gradient(ellipse 90% 58% at 8% 100%,rgba(113,165,184,.25),transparent 68%),
    radial-gradient(ellipse 60% 72% at 100% 0%,rgba(255,255,255,.76),transparent 65%),
    linear-gradient(135deg,var(--mg-bg-0),var(--mg-bg-1) 56%,var(--mg-bg-2));
}
#mtrAppShell:before,#mtrAppShell:after{display:none!important}

/* Shared glass surface. */
:is(
  .mtrShellNav,.mtrAccountPopover,.mtrAccountLogin,.mtrRoleCard,
  .mtrQuick button,.mtrDataGrid button,.mtrSettings section,
  .mtrNotionHead,.mtrTaskRow,.mtrNotionTask,.mtrAlertCard,
  .mtrMessenger,.mtrProcedureCard,.mtrProcedureAdmin,.mtrSchedule,
  .mtrProfileIdentity,.mtrProfileForm,.mtrBlockBuilder,
  .mtrUsersPanel,#mtrReportDialog form
){
  border:1px solid var(--mg-line)!important;
  background:
    linear-gradient(125deg,rgba(255,255,255,.12),transparent 26%,transparent 70%,rgba(122,217,220,.045)),
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 54%),
    var(--mg-glass)!important;
  box-shadow:var(--mg-inset),var(--mg-shadow-soft)!important;
  -webkit-backdrop-filter:var(--mg-blur);
  backdrop-filter:var(--mg-blur);
}.mtrWorkspace{
  width:min(1460px,100%);
  padding:30px clamp(20px,4vw,58px) 64px;
  column-gap:28px;
  row-gap:30px;
}
.mtrShellBrand{position:relative;z-index:3;align-self:center}
.mtrWordmark{width:178px}

/* Navigation groups are portalled above the page{position:fixed;pointer-events:none;opacity:0;visibility:hidden}.mtrWorkspace h1{color:var(--mg-text);font-weight:520;letter-spacing:-.045em}
.mtrWorkspace h1{font-size:clamp(32px,3vw,46px)}
.mtrHero p:not(.mtrEyebrow),.mtrWorkspace header>p:last-child{color:var(--mg-muted)!important}
.mtrEyebrow{padding-left:13px;border-left:1px solid var(--mg-line-strong);color:var(--mg-gold)!important}
.mtrStatusOrbit,.mtrOrderOrbit,
html[data-mtr-theme="light"] :is(.mtrStatusOrbit,.mtrOrderOrbit){
  justify-content:flex-end;align-items:flex-start;padding:24px;border:1px solid var(--mg-line)!important;
  border-radius:var(--mg-radius-xl)!important;background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 55%),var(--mg-glass)!important;
  box-shadow:var(--mg-inset),var(--mg-shadow)!important;backdrop-filter:var(--mg-blur);transform:none;
}.mtrDataGrid{gap:16px}.mtrDataGrid button{
  min-height:150px;padding:24px;border-radius:var(--mg-radius-lg)!important;text-align:left;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}.mtrDataGrid button:hover{
  transform:translateY(-3px);border-color:var(--mg-line-strong)!important;
  box-shadow:var(--mg-inset),var(--mg-shadow)!important;
}.mtrDataGrid b{font-weight:600;color:var(--mg-text)}.mtrDataGrid span,.mtrHint{color:var(--mg-muted)!important}
.mtrDataGrid em{color:var(--mg-gold)!important}

/* Forms and controls. */
#mtrAppShell input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#mtrAppShell select,#mtrAppShell textarea{
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--mg-line)!important;
  border-radius:12px!important;
  background:rgba(3,19,29,.31)!important;
  color:var(--mg-text)!important;
  box-shadow:var(--mg-inset)!important;
  outline:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
html[data-mtr-theme="light"] #mtrAppShell :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){background:rgba(255,255,255,.42)!important}
#mtrAppShell :is(input,select,textarea):focus{
  border-color:var(--mg-cyan)!important;background:rgba(8,31,42,.5)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mg-cyan) 15%,transparent),var(--mg-inset)!important;
}
#mtrAppShell input::placeholder,#mtrAppShell textarea::placeholder{color:var(--mg-faint)}
#mtrAppShell button:not([class^="ui-"]):not(.ui-nav button),.sbx button{
  border-radius:11px;border-color:var(--mg-line);box-shadow:none;
}
.mtrPrimary,.pri2,html[data-mtr-theme="light"] .mtrPrimary{
  border-color:rgba(255,232,185,.56)!important;
  background:linear-gradient(135deg,#efd99f,#cfa85c)!important;
  color:#342914!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 9px 24px rgba(159,115,36,.18)!important;
}
.mtrPrimary:hover,.pri2:hover{filter:brightness(1.045);transform:translateY(-1px)}
.mtrGhost{border-color:var(--mg-line)!important;background:var(--mg-glass-soft)!important;color:var(--mg-text)!important}
.mtrPasswordField button{background:var(--mg-glass-soft)!important;color:var(--mg-cyan)!important}

/* Dense application views. */
.mtrWorkspace>header{margin-top:10px;padding:30px 0 8px;border-top:1px solid var(--mg-line)}
.mtrSettings{gap:16px}.mtrSettings section{padding:24px;border-radius:var(--mg-radius-lg)!important}.mtrAlertCard{border-radius:17px!important}.mtrAlertCard:hover{border-color:var(--mg-line-strong)!important}.mtrAlertCard p{color:var(--mg-muted)!important}.mtrScheduleStatus{border:1px solid var(--mg-line);background:var(--mg-glass-soft);border-radius:999px}

.mtrMessenger{overflow:hidden;border-radius:var(--mg-radius-xl)!important}
.mtrMessageFeed{scrollbar-gutter:stable;padding:20px}
.mtrMessageBubble{border:1px solid var(--mg-line);border-radius:16px 16px 16px 5px;background:var(--mg-glass-soft);box-shadow:var(--mg-inset)}
.mtrMessageBubble.mine{border-radius:16px 16px 5px 16px;background:rgba(81,158,170,.2)}
.mtrMessageComposer{border-top:1px solid var(--mg-line);background:rgba(0,0,0,.06)}

.mtrProcedureGrid{gap:16px}
.worker-tool-tile{border:1px solid var(--mg-line)!important;background:var(--mg-glass)!important;border-radius:var(--mg-radius-lg)!important;box-shadow:var(--mg-shadow)!important}.worker-tool-tile:hover{border-color:var(--mg-line-strong)!important}
.mtrProcedureCard,.mtrProcedureAdmin,.mtrSchedule{border-radius:var(--mg-radius-lg)!important}
.mtrProcedureCard{transition:transform .2s ease,border-color .2s ease!important}
.mtrProcedureCard:hover{transform:translateY(-2px);border-color:var(--mg-line-strong)!important}
.mtrProcedureContent{color:var(--mg-text)}
.mtrScheduleTable th{color:var(--mg-faint)}
.mtrScheduleTable td,.mtrScheduleTable th{border-bottom-color:var(--mg-line)}

.mtrLogin{max-width:1280px;padding:44px clamp(20px,5vw,66px)}
.mtrLoginGrid{gap:clamp(36px,7vw,90px)}
.mtrLogin h1{font-weight:520;letter-spacing:-.05em}
.mtrAccountLogin{padding:28px!important;border-radius:var(--mg-radius-xl)!important}
.mtrLoginSignal{color:var(--mg-success)!important}
.mtrUsersPanel{border-radius:var(--mg-radius-xl)!important;background:var(--mg-glass-strong)!important}
#mtrUsersDialog{background:rgba(2,10,17,.45);backdrop-filter:blur(16px)}

/* Warehouse overlays use the same material, with enough contrast over 3D. */
:is(#jarvisDeskNav,#jarvisMenu,#deskTaskBoard,#warehouseSummary,#walkKeysLegend,
  #panel,#tasks,#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,
  #hantleTask,#tip,#walkhud,#mtrSceneBar,.sbx){
  border:1px solid var(--mg-line)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),transparent 52%),var(--mg-glass-strong)!important;
  color:var(--mg-text)!important;
  box-shadow:var(--mg-inset),var(--mg-shadow)!important;
  -webkit-backdrop-filter:var(--mg-blur)!important;
  backdrop-filter:var(--mg-blur)!important;
}
#jarvisDeskNav{
  border-radius:19px!important;
  box-shadow:var(--mg-inset),0 16px 46px rgba(0,9,17,.23)!important;
}
#jarvisDeskNav:before,#jarvisDeskNav:after{opacity:.28!important}
#jarvisDeskNav .jdControls{border-color:var(--mg-line)!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important}
#jarvisDeskNav button{border-radius:10px!important;color:var(--mg-muted)!important}
#jarvisDeskNav button:hover{color:var(--mg-text)!important;background:var(--mg-glass-soft)!important;border-color:var(--mg-line)!important;transform:translateY(-1px)!important}
#jarvisDeskNav #jdTasks{color:var(--mg-gold)!important;border-color:rgba(231,196,127,.26)!important;background:rgba(231,196,127,.075)!important}
#jarvisMenu,#deskTaskBoard{border-radius:var(--mg-radius-lg)!important}
#warehouseSummary{border-radius:var(--mg-radius-lg)!important}
#walkKeysLegend{border-radius:17px!important;color:var(--mg-muted)!important}
#walkKeysLegend b{color:var(--mg-gold)!important}
#walkKeysLegend i{color:var(--mg-success)!important}
:is(#panel,#tasks,#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,#hantleTask,#deskTaskBoard){border-radius:var(--mg-radius-lg)!important}
:is(.task,.pstep,.row,.src,.ebox,.brow,.irow,.volrow,.hstep,.jbCard,.plancheck,.cofinfo,.help,.hstats,.volCarton,.volLocations){
  border:1px solid var(--mg-line)!important;border-radius:12px!important;
  background:rgba(255,255,255,.045)!important;color:var(--mg-text)!important;box-shadow:var(--mg-inset)!important;
}
#mtrSceneBar{border-radius:17px!important}
.closePanel{background:var(--mg-glass-soft)!important;color:var(--mg-text)!important;border-color:var(--mg-line)!important}

/* Light glass over the dark 3D canvas needs a firmer milk layer and ink. */
html[data-mtr-theme="light"] :is(
  #jarvisDeskNav,#jarvisMenu,#deskTaskBoard,#warehouseSummary,#walkKeysLegend,
  #panel,#tasks,#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,
  #hantleTask,#tip,#walkhud,#mtrSceneBar,.sbx
){
  --mg-text:#142c38;
  --mg-muted:#47616c;
  --mg-faint:#647c86;
  --mg-line:rgba(255,255,255,.82);
  --mg-line-strong:rgba(255,255,255,.96);
  --mg-glass-soft:rgba(255,255,255,.34);
  --mg-glass-strong:rgba(235,242,246,.76);
  color:#142c38!important;
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.08) 54%),rgba(224,234,240,.7)!important;
  text-shadow:none!important;
}
html[data-mtr-theme="light"] #jarvisDeskNav button{color:#405d69!important;font-weight:600}
html[data-mtr-theme="light"] #jarvisDeskNav button:hover{color:#142c38!important;background:rgba(255,255,255,.42)!important}
html[data-mtr-theme="light"] #jarvisDeskNav #jdTasks{color:#76531b!important}
html[data-mtr-theme="light"] :is(#warehouseSummary,#walkKeysLegend,#mtrSceneBar) :is(b,span,small){text-shadow:none!important}
html[data-mtr-theme="light"] #warehouseSummary #stats b{color:#173642!important}
html[data-mtr-theme="light"] #warehouseSummary :is(#stats,#legend){color:#47616c!important}

/* Responsive: the navigation remains a bar and scrolls instead of becoming a tile. */
@media(max-width:1100px){.mtrWorkspace{grid-template-columns:1fr;gap:20px;padding-top:22px}
  .mtrShellBrand{grid-column:1}
}
@media(max-width:700px){.mtrWorkspace{padding:18px 14px 36px;row-gap:18px}
  .mtrWordmark{width:154px}.mtrDataGrid{gap:11px}.mtrDataGrid button{min-height:125px;padding:20px}
  .mtrLogin{padding:24px 14px}.mtrAccountLogin{padding:22px!important}
  #jarvisDeskNav{border-radius:16px!important}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.mtrShellNav,.mtrAccountPopover,.mtrNavGroupMenu,.mtrAccountLogin,.mtrRoleCard,.mtrQuick button,.mtrDataGrid button,.mtrSettings section,.mtrTaskRow,.mtrNotionTask,.mtrAlertCard,.mtrMessenger,.mtrProcedureCard,.mtrProcedureAdmin,.mtrSchedule,#jarvisDeskNav,#warehouseSummary,#walkKeysLegend){background:var(--mg-bg-1)!important}
}
@media(prefers-reduced-transparency:reduce){
  :is(.mtrShellNav,.mtrAccountPopover,.mtrNavGroupMenu,.mtrAccountLogin,.mtrRoleCard,.mtrQuick button,.mtrDataGrid button,.mtrSettings section,.mtrTaskRow,.mtrNotionTask,.mtrAlertCard,.mtrMessenger,.mtrProcedureCard,.mtrProcedureAdmin,.mtrSchedule,#jarvisDeskNav,#warehouseSummary,#walkKeysLegend){background:var(--mg-bg-1)!important;backdrop-filter:none!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ==========================================================
   READABILITY HIGHWAY
   Central rules for contrast, type and responsive behaviour.
   Future visual corrections should start with these tokens.
   ========================================================== */
:root{
  --mg-type-body:15px;
  --mg-type-small:12px;
  --mg-type-label:11px;
  --mg-leading:1.58;
  --mg-touch:44px;
  --mg-page-gap:clamp(14px,2vw,26px);
  --mg-panel-pad:clamp(16px,2vw,24px);
}
html[data-mtr-theme="light"]{
  --mg-text:#162b3a;
  --mg-muted:#435d6c;
  --mg-faint:#617986;
}

/* One readable baseline for every application screen. */
#mtrAppShell{font-size:var(--mg-type-body);line-height:var(--mg-leading);text-rendering:optimizeLegibility}
#mtrAppShell :is(p,li,td,input,select,textarea,button){line-height:var(--mg-leading)}
#mtrAppShell :is(.mtrHint,.mtrTaskMeta,.mtrQuick span,.mtrDataGrid span,.mtrTaskBody p,.mtrAlertCard p,.mtrProcedureCard p,.mtrMessageBubble p){font-size:var(--mg-type-small)!important}
#mtrAppShell :is(label,small,.mtrEyebrow,.mtrProcedureCard small,.mtrMessageBubble small,.mtrScheduleTable th){font-size:var(--mg-type-label)}
#mtrAppShell :is(.mtrQuick span,.mtrDataGrid span,.mtrTaskBody p,.mtrAlertCard p,.mtrProcedureCard p,.mtrHint){color:var(--mg-muted)!important}
#mtrAppShell :is(button,input,select){min-height:var(--mg-touch)}
#mtrAppShell textarea{font-size:14px}.mtrDataGrid b,.mtrProcedureCard h2{font-size:16px!important;line-height:1.35}
.mtrSettings section,.mtrProcedureCard,.mtrProcedureAdmin form,.mtrSchedule,.mtrProfileForm{padding:var(--mg-panel-pad)!important}
.mtrMessageBubble{padding:13px 15px}.mtrMessageBubble time{font-size:10px!important;color:var(--mg-faint)!important}
.mtrMessageComposer label,.mtrProcedureAdmin label,.mtrProfileForm label{font-size:12px!important;color:var(--mg-muted)!important}
.mtrProcedureContent{font-size:14px!important;line-height:1.72!important}
.mtrScheduleTable{max-width:100%;overflow-x:auto;scrollbar-gutter:stable}
.mtrSchedule table{min-width:720px}.mtrSchedule th,.mtrSchedule td{font-size:12px!important}
#mtrAppShell :is(#mtrMessageDialog,#mtrProcedureDialog,#mtrUsersDialog)>:is(section,article,.mtrUsersPanel){max-height:calc(100dvh - 24px)!important}

/* Dense warehouse surfaces use smoked glass for contrast over the scene. */
#app canvas{}
html[data-mtr-theme="light"] :is(
  #jarvisDeskNav,#jarvisMenu,#deskTaskBoard,#warehouseSummary,#walkKeysLegend,
  #panel,#tasks,#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,
  #hantleTask,#tip,#walkhud,#mtrSceneBar,.sbx
){
  --mg-text:#eef9fa;
  --mg-muted:#bad0d5;
  --mg-faint:#8faab1;
  --mg-line:rgba(190,231,234,.24);
  --mg-line-strong:rgba(218,246,247,.38);
  --mg-glass-soft:rgba(188,229,232,.09);
  --mg-glass-strong:rgba(7,27,39,.78);
  color:var(--mg-text)!important;
  background:linear-gradient(135deg,rgba(184,231,233,.11),transparent 46%),rgba(7,27,39,.78)!important;
  border-color:var(--mg-line)!important;
}
html[data-mtr-theme="light"] #jarvisDeskNav button{color:var(--mg-muted)!important}
html[data-mtr-theme="light"] #jarvisDeskNav button:hover{color:var(--mg-text)!important;background:var(--mg-glass-soft)!important}
html[data-mtr-theme="light"] #jarvisDeskNav #jdTasks{color:#f0d29a!important}
html[data-mtr-theme="light"] #warehouseSummary #stats b{color:var(--mg-text)!important}
html[data-mtr-theme="light"] #warehouseSummary :is(#stats,#legend){color:var(--mg-muted)!important}

#jarvisDeskNav{font-size:12px!important}
#jarvisDeskNav button{min-height:38px!important;font-size:12px!important}
#jarvisMenu button,#deskTaskBoard button{font-size:12px!important}
#warehouseSummary{width:min(320px,calc(100vw - 32px));padding:15px 16px!important;font-size:12px!important;line-height:1.55!important}
#warehouseSummary #stats{font-size:12px!important;line-height:1.65!important}
#warehouseSummary #legend{font-size:11px!important;line-height:1.55!important}
#panel{left:16px!important;top:90px!important;width:min(370px,calc(100vw - 32px))!important;max-height:calc(100dvh - 190px)!important;padding:16px!important;font-size:12px!important;line-height:1.45!important;overflow:auto!important;scrollbar-gutter:stable}
#panel :is(.row,.src,.task){padding:10px!important;gap:9px!important}
#panel :is(.row,.src,.task) :is(b,.a,.nm){font-size:12px!important;line-height:1.35!important}
#panel :is(.row,.src,.task) :is(small,.b,.nz){font-size:10px!important;line-height:1.4!important}
#panel .th{width:42px!important;height:42px!important;flex:0 0 42px}
:is(#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,#hantleTask,#deskTaskBoard){font-size:13px!important;line-height:1.55!important}
:is(#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,#hantleTask,#deskTaskBoard) :is(.sub,.meta,small){font-size:11px!important;line-height:1.5!important}
#walkKeysLegend{font-size:11px!important;line-height:1.55!important}
#mtrSceneBar{font-size:11px!important}

/* Tablet highway. */
@media(max-width:900px){
  :root{--mg-type-body:14px;--mg-page-gap:16px;--mg-panel-pad:18px}.mtrWorkspace{padding:20px 18px 42px!important;gap:var(--mg-page-gap)!important}.mtrDataGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mtrMessenger{grid-template-columns:1fr!important;min-height:0!important}
  .mtrMessageFeed{max-height:52dvh!important}
  .mtrMessageComposer{border-left:0!important;border-top:1px solid var(--mg-line)!important}
  .mtrProfileLayout,.mtrProcedureAdmin{grid-template-columns:1fr!important}
}

/* Phone highway: vertical flow, full tap targets, no clipped navigation. */
@media(max-width:700px){
  :root{--mg-type-body:14px;--mg-type-small:12px;--mg-type-label:11px;--mg-panel-pad:16px}.mtrWorkspace{padding:14px 12px 30px!important;gap:14px!important}
  .mtrShellBrand{justify-self:start!important;margin:4px 2px!important}
  .mtrWordmark{width:148px!important}.mtrDataGrid{grid-template-columns:1fr!important;gap:10px!important}.mtrDataGrid button{min-height:112px!important;padding:18px!important}
  .mtrProcedureGrid{grid-template-columns:1fr!important}
  .mtrProcedureCard{grid-template-columns:44px minmax(0,1fr)!important;padding:16px!important}
  .mtrProcedureCard>button{grid-column:1/-1;width:100%}
  .mtrMessageBubble{max-width:94%!important}.mtrMessageFeed{padding:14px!important;max-height:46dvh!important}
  .mtrMessageComposer{padding:14px!important}
  .mtrProfileIdentity{padding:18px!important}.mtrProfileForm{padding:16px!important}
  #mtrMessageDialog,#mtrProcedureDialog,#mtrUsersDialog{padding:8px!important}
  #mtrMessageDialog>section,#mtrProcedureDialog>article,#mtrUsersDialog>.mtrUsersPanel{border-radius:17px!important;max-height:calc(100dvh - 16px)!important}

  #jarvisDeskNav{left:8px!important;right:8px!important;top:8px!important;width:auto!important;max-width:none!important;transform:none!important;border-radius:16px!important}
  #jarvisDeskNav button{min-height:42px!important}
  #jarvisMenu,#deskTaskBoard{left:8px!important;right:8px!important;top:70px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 82px)!important;overflow:auto!important}
  #panel{left:8px!important;right:8px!important;top:auto!important;bottom:68px!important;width:auto!important;max-height:52dvh!important;padding:14px!important;border-radius:18px!important}
  body:has(#panel.section-visible) #warehouseSummary{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  #warehouseSummary{left:8px!important;bottom:66px!important;width:min(286px,calc(100vw - 16px))!important;max-height:128px!important;padding:10px 12px!important;overflow:auto!important;border-radius:16px!important}
  #warehouseSummary #stats{font-size:11px!important}#warehouseSummary #legend{font-size:10px!important}
  #mtrSceneBar:not(.worker){left:8px!important;right:auto!important;bottom:8px!important;max-width:calc(100vw - 16px)!important}
  #walkKeysLegend{left:8px!important;right:8px!important;bottom:8px!important;width:auto!important;max-height:32dvh!important;overflow:auto!important}
  :is(#planer,#trasy,#edyt,#logbox,#bazabox,#inw,#volbox,#gabcheck,#hantleTask,#deskTaskBoard){left:8px!important;right:8px!important;top:70px!important;bottom:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 78px)!important;padding:16px!important}
}

@media(max-width:420px){
  .mtrProcedureCard{grid-template-columns:1fr!important}.mtrProcedureCard>span{width:40px;height:40px}
  #warehouseSummary{right:8px!important;width:auto!important}
}

/* Compact packing station preview: isolated from live order operations. */
.packing-state{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px;border:1px solid #69bfc650;background:#268b8820;border-radius:14px;font-size:14px}
#mtrAppShell .packing-receive{background:#72d5c5;color:#092f34;min-height:60px;width:100%;font-weight:750;font-size:17px;border-radius:15px;border:1px solid #a3ecdf;white-space:normal}
.packing-received{padding:18px;border:1px solid #83b7c54a;border-radius:16px}.packing-received dl{font-size:14px}.packing-received dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0}.packing-received dd{margin:0;overflow-wrap:anywhere}
@media(max-width:600px){.packing-page{padding-left:12px!important;padding-right:12px!important}}

.packing-receive:disabled{opacity:.55;cursor:default}.packing-received .mtr-rich-content{overflow-wrap:anywhere}

/* App navigation is separate from the desktop header; menus use the shared portal. */
.mobile-app-nav{display:none}
.work-shift{display:grid;gap:10px;padding:16px;border:1px solid var(--mg-line,#52737c);border-radius:16px;background:#298b7b15}.work-shift p,.work-shift small{font-size:13px}.shift-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:24px;border:1px solid #52737c;border-radius:20px;background:var(--mg-glass,#102832);color:var(--mg-text,#ecffff)}.shift-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.shift-actions{display:grid;gap:10px}.shift-actions button{min-height:48px;background:#244752;color:#ecffff;border:1px solid #52737c;border-radius:10px;font:inherit}.shift-dialog [role=alert]{color:#ffb5a8}.shift-actions button:focus-visible{outline:2px solid #e9c980;outline-offset:2px}
.work-pool{display:grid;gap:14px}.work-pool label{display:grid;gap:8px}.work-pool [data-pool-list]{display:grid;gap:14px}.work-pool details{margin:12px 0}.work-pool summary{min-height:44px;cursor:pointer}.work-pool .packing-received{min-width:0}.ui-task-creator-grid small{line-height:1.5}
@media(max-width:700px){
  body.has-mobile-app-nav #mtrAppShell{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  body.has-mobile-app-nav .ui-topbar .ui-nav{display:none!important}
  body.has-mobile-app-nav .ui-topbar{min-height:48px;margin-bottom:12px!important;padding:0!important;gap:8px}
  body.has-mobile-app-nav .ui-topbar .mtrWordmark{width:132px}
  body.has-mobile-app-nav .ui-topbar .ui-release{display:none}
  #mtrAppShell .mobile-app-nav{position:fixed;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;bottom:0;left:0;right:0;z-index:1900;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--mg-glass,#102832f5);border-top:1px solid var(--mg-line,#52737c);backdrop-filter:blur(20px);box-shadow:0 -8px 24px #0002}
  #mtrAppShell .mobile-app-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:56px;border:0;border-radius:13px;background:transparent;color:var(--mg-muted,#bacdd2);font-size:11px;padding:5px 2px;box-shadow:none}
  #mtrAppShell .mobile-app-nav button>span:first-child{font-size:23px;line-height:25px}
  #mtrAppShell .mobile-app-nav button.is-current,#mtrAppShell .mobile-app-nav button[aria-expanded="true"]{background:#62ccba25;color:var(--mg-text,#ecffff)}
  .mobile-app-menu{width:min(320px,calc(100vw - 24px));border-radius:18px!important;padding:8px!important}
  body.has-mobile-app-nav .packing-page{padding:12px 16px!important}
  body.has-mobile-app-nav .packing-state{padding:12px}
  body.has-mobile-app-nav [data-work-refresh]{min-height:44px}
  .mobile-app-nav button:focus-visible{outline:2px solid #e9c980;outline-offset:-2px}
}