/* Phase 1: keep the first screen focused on work instead of explanatory chrome. */
main{padding-top:12px}
#workspace-context-bar{margin:4px 0 8px;padding:6px 10px;border-radius:10px;box-shadow:none}
.wh-context-main{flex-wrap:nowrap}
.wh-company-select,.wh-domain-select{gap:5px}
.wh-company-select select,.wh-domain-select select{min-width:116px;padding-top:4px;padding-bottom:4px}
.wh-scope-note{flex-wrap:nowrap;margin:0 0 0 auto}
.wh-scope-note>span:last-child{display:none}
.wh-scope-badge{font-size:10px}

/* Mail: preserve the useful numbers, but turn the hero into a compact status strip. */
main:has(#mailview:not(.hidden)) #hero{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(430px,1.28fr);align-items:center;gap:12px;margin-bottom:8px;padding:9px 12px;border-radius:13px;box-shadow:none}
main:has(#mailview:not(.hidden)) #hero:after{display:none}
main:has(#mailview:not(.hidden)) #hero .eyebrow{font-size:9px;letter-spacing:1.25px}
main:has(#mailview:not(.hidden)) #hero h2{margin:1px 0 0;font-size:15px}
main:has(#mailview:not(.hidden)) #hero p{display:none}
main:has(#mailview:not(.hidden)) #hero .metric-grid{display:flex;justify-content:flex-end;gap:6px;min-width:0}
main:has(#mailview:not(.hidden)) #hero .metric{display:flex;align-items:baseline;justify-content:space-between;gap:7px;min-width:96px;padding:6px 9px;border-radius:9px}
main:has(#mailview:not(.hidden)) #hero .metric b{font-size:15px}
main:has(#mailview:not(.hidden)) #hero .metric span{font-size:9px;white-space:nowrap}
#mailview .mail-section-head{align-items:center;margin:7px 2px 8px}
#mailview .mail-section-head h2{font-size:18px}
#mailview .mail-head-actions{gap:7px}
#mailview .mail-window-control{padding:5px 8px}
#mailview .mail-mode-tabs{padding:3px;border-radius:10px}
#mailview .mail-mode-tabs button{padding:6px 10px}
#mailview .mail-workspace{grid-template-columns:190px minmax(0,1fr);gap:8px}
#mailview .business-sidebar{top:74px;padding:10px;border-radius:13px;box-shadow:none}
#mailview .wh-sidebar-heading{margin-bottom:7px}
#mailview .wh-sidebar-heading strong{font-size:13px}
#mailview .wh-mailbox-block{margin-bottom:8px;padding:7px}
#mailview .wh-mailbox-summary{margin-top:6px;padding-top:6px}
#mailview .wh-mailbox-stats{margin-top:5px}
#mailview .wh-filter-list{gap:4px}
#mailview .wh-filter-list button{padding:6px 8px;font-size:12px}
#mailview .wh-sidebar-section{margin-top:8px;padding-top:8px}
#mailview .filter-row{padding:7px 10px}
#mailview .bar{padding-top:7px;padding-bottom:7px}

/* Tasks: the list is the page. Keep mode, risk and filters compact. */
#taskview .simple-task-shell{border-radius:14px;box-shadow:none}
#taskview .simple-task-head{align-items:center;padding:12px 14px 9px}
#taskview .simple-task-head h2{font-size:18px}
#taskview .simple-task-head p{font-size:10px}
#taskview .simple-head-actions{flex-wrap:nowrap;overflow-x:auto;max-width:68%;padding-bottom:2px}
#taskview .simple-head-actions>*{flex:none}
#taskview .simple-head-actions button{padding:6px 9px;white-space:nowrap}
#taskview .simple-task-stats{gap:5px;padding:0 14px 9px}
#taskview .simple-stat{padding:5px 9px}
#taskview .manager-kpis{display:flex;gap:6px;padding:8px 12px;overflow-x:auto}
#taskview .manager-kpi{display:flex;align-items:center;gap:7px;min-width:max-content;padding:6px 9px;border-radius:9px}
#taskview .manager-kpi b,#taskview .manager-kpi.info b{display:inline;margin:0;font-size:14px}
#taskview .manager-kpi span{font-size:10px;white-space:nowrap}
#taskview .manager-filterbar{gap:6px;padding:7px 10px}
#taskview .manager-filterbar select{min-width:118px;padding-top:6px;padding-bottom:6px}
#taskview .manager-table-head{padding-top:6px;padding-bottom:6px}
#taskview .manager-row{padding-top:7px;padding-bottom:7px}
#taskview .task-supporting-details{margin-top:8px}

/* Freight: connection and scope stay visible without becoming the page. */
#freightview .freight-shell{gap:6px}
#freightview .freight-section-head{margin-top:0;padding-block:5px}
#freightview .freight-scope{padding:6px 9px;border-radius:10px;box-shadow:none}
#freightview .freight-scope-icon{width:29px;height:29px}
#freightview .freight-module-tabs{margin-bottom:0}
#freightview .freight-error-state{padding:10px 12px}

@media(max-width:980px){
  .wh-context-main{flex-wrap:wrap}
  .wh-scope-note{margin-left:0}
  main:has(#mailview:not(.hidden)) #hero{grid-template-columns:1fr;padding:8px 10px}
  main:has(#mailview:not(.hidden)) #hero>div:first-child{display:none}
  main:has(#mailview:not(.hidden)) #hero .metric-grid{justify-content:flex-start;overflow-x:auto}
  main:has(#mailview:not(.hidden)) #hero .metric{flex:0 0 auto}
  #mailview .mail-workspace{grid-template-columns:1fr}
  #mailview .business-sidebar{position:static;padding:8px;max-height:220px;overflow:auto}
  #mailview .wh-sidebar-heading,#mailview .wh-mailbox-summary,#mailview .wh-small-note{display:none}
  #mailview .wh-mailbox-block{margin:0}
  #mailview .wh-filter-list{flex-wrap:nowrap;overflow-x:auto}
  #mailview .wh-filter-list button{flex:0 0 auto;min-width:106px}
  #taskview .simple-task-head{align-items:flex-start;flex-direction:column}
  #taskview .simple-head-actions{width:100%;max-width:none}
  #taskview .manager-table{min-width:0}
  #taskview .manager-table-head{display:none}
  #taskview .manager-row{grid-template-columns:30px minmax(0,1fr) auto;gap:7px;padding:10px 11px}
  #taskview .manager-row>.simple-check{grid-column:1;grid-row:1/5}
  #taskview .manager-row>.manager-task-cell{grid-column:2;grid-row:1}
  #taskview .manager-row>.manager-risk{grid-column:3;grid-row:1}
  #taskview .manager-row>select:nth-of-type(1){grid-column:2;grid-row:2}
  #taskview .manager-row>.manager-biz{grid-column:3;grid-row:2}
  #taskview .manager-row>select:nth-of-type(2){grid-column:2;grid-row:3}
  #taskview .manager-row>input{grid-column:3;grid-row:3;min-width:150px}
  #taskview .manager-row>span:last-child{grid-column:2/4;grid-row:4}
}

@media(max-width:680px){
  main{padding-top:7px}
  #workspace-context-bar{margin:3px 0 6px;padding:5px 7px}
  .wh-context-main{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .wh-company-select,.wh-domain-select{display:grid;grid-template-columns:auto minmax(0,1fr);width:auto}
  .wh-company-select select,.wh-domain-select select{min-width:0;max-width:none;width:100%}
  .wh-system-access,.wh-scope-note{display:none}
  main:has(#mailview:not(.hidden)) #hero{margin-bottom:5px;padding:5px 7px}
  main:has(#mailview:not(.hidden)) #hero .metric{min-width:82px;padding:5px 7px}
  main:has(#mailview:not(.hidden)) #hero .metric span{font-size:8px}
  #mailview .mail-section-head{gap:7px;margin-top:4px}
  #mailview .mail-section-head>div:first-child p{display:none}
  #mailview .mail-head-actions{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%}
  #mailview .mail-window-control{grid-column:1}
  #mailview .mail-mode-tabs{grid-column:2;min-width:0}
  #mailview .business-sidebar{max-height:156px}
  #mailview .wh-sidebar-section{margin-top:6px;padding-top:6px}
  #taskview .simple-task-head{padding:10px 10px 7px}
  #taskview .simple-task-stats{padding:0 10px 7px}
  #taskview .simple-task-filters{gap:6px;padding:7px 9px}
  #taskview .manager-kpis{padding:7px 9px}
  #taskview .manager-filterbar{align-items:stretch}
  #taskview .manager-filterbar select{flex:1;min-width:calc(50% - 6px)}
  #taskview .manager-row{grid-template-columns:28px minmax(0,1fr)}
  #taskview .manager-row>.simple-check{grid-column:1;grid-row:1/7}
  #taskview .manager-row>.manager-task-cell,#taskview .manager-row>.manager-risk,#taskview .manager-row>select:nth-of-type(1),#taskview .manager-row>.manager-biz,#taskview .manager-row>select:nth-of-type(2),#taskview .manager-row>input,#taskview .manager-row>span:last-child{grid-column:2;grid-row:auto;min-width:0}
  #taskview .manager-row>.manager-risk,#taskview .manager-row>.manager-biz{justify-self:start}
  #freightview .freight-section-head{padding:9px 10px}
  #freightview .freight-scope{padding:6px 8px}
}

/* Freight is a workbench: keep scope controls compact so the queue starts on the first screen. */
main:has(#freightview:not(.hidden)) #workspace-context-bar{display:flex;align-items:center;gap:8px;margin:3px 0 6px;padding:5px 8px}
main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-context-main{flex:1;flex-wrap:nowrap}
main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-scope-note{flex:none;margin:0 0 0 auto}
main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-scope-note>span:last-child{display:none}
@media(max-width:760px){
 main:has(#freightview:not(.hidden)) #workspace-context-bar{display:block}
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-context-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-company-select,
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-domain-select{display:grid;grid-template-columns:auto minmax(0,1fr);width:auto;min-width:0}
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-company-select select,
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-domain-select select{width:100%;min-width:0;max-width:none}
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-system-access,
 main:has(#freightview:not(.hidden)) #workspace-context-bar .wh-scope-note{display:none}
}

/* Shared ERP shell language. Keep tokens local until the WorkHub/ERP shells merge. */
html[data-theme="light"]{
  --bg:#eef2f9;--line:#dce5f0;--txt:#0f172a;--dim:#64748b;
  --acc:#2f6bff;--acc2:#1d4fd7;--active:#e9f0ff;
  --surface0:#f2f6fc;--surface1:#fff;--surface2:#edf3fb;--surface3:#f7f9fd;
  --hero1:#f4f8ff;--hero2:#fff;--primary1:#3b82f6;--primary2:#6366f1;
  --shadow:0 2px 12px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.025)
}
html[data-theme="light"] body{background:radial-gradient(circle at 84% 0,rgba(86,200,220,.09),transparent 30%),var(--bg)}
html body .topbar{width:calc(100% - 232px);height:60px;min-height:60px;margin-left:232px;padding:0 24px;justify-content:flex-start;gap:13px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
html[data-theme="light"] body .topbar{background:rgba(255,255,255,.83);backdrop-filter:saturate(180%) blur(22px)}
/* A backdrop filter makes this sticky header the containing block for the fixed nav. */
html[data-theme] body .topbar{backdrop-filter:none}
html body .topbar:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.32),rgba(86,200,220,.35),transparent)}
.topbar .brandline{min-width:0;flex:none}
.topbar .brandline .brand-marks{display:none}
.topbar .brandline h1{font-size:17px;letter-spacing:-.02em;color:var(--txt)}
html body .topbar .tools{margin-left:auto}
.shell-nav-toggle{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;color:var(--dim)!important;font-size:20px}
.shell-nav-toggle:hover{background:var(--surface0)!important;color:var(--acc2)!important}
.shell-nav-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html body .topbar .hub-nav{left:0;top:0;bottom:0;width:232px;gap:4px;padding:8px 12px 15px;border:0;border-radius:0;background:linear-gradient(178deg,#0b1a3a 0%,#101f42 55%,#14264d 100%);box-shadow:4px 0 24px rgba(11,26,58,.18);overflow-y:auto;overflow-x:hidden}
html[data-theme="light"] body .topbar .hub-nav{background:linear-gradient(178deg,#0b1a3a 0%,#101f42 55%,#14264d 100%);border:0;box-shadow:4px 0 24px rgba(11,26,58,.18)}
.hub-nav-brand{display:flex;align-items:center;gap:11px;min-height:60px;margin:0 4px 13px;padding:6px 4px 15px;border-bottom:1px solid rgba(255,255,255,.09);color:#f1f5f9}
.hub-nav-brand-mark{display:grid;place-items:center;flex:none;width:39px;height:39px;padding:4px;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(86,200,220,.28)}
.hub-nav-brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.hub-nav-brand-copy b,.hub-nav-brand-copy small{display:block;white-space:nowrap}
.hub-nav-brand-copy b{font-size:15px;line-height:1.25;letter-spacing:-.015em}
.hub-nav-brand-copy small{margin-top:2px;color:rgba(148,163,184,.88);font-size:10px;letter-spacing:.12em}
html body .hub-nav .viewtab{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:42px;margin:2px 0;padding:8px 12px;border-radius:11px;text-align:left;font-size:13px;font-weight:550;color:rgba(226,232,240,.8)}
html[data-theme="light"] body .hub-nav .viewtab{color:rgba(226,232,240,.8)}
html body .hub-nav .viewtab i{flex:none;width:22px;font-size:18px;text-align:center;color:rgba(148,163,184,.95)}
html body .hub-nav .viewtab:hover,html[data-theme="light"] body .hub-nav .viewtab:hover{background:rgba(255,255,255,.09);color:#fff}
html body .hub-nav .viewtab.on,html[data-theme="light"] body .hub-nav .viewtab.on{background:linear-gradient(92deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 6px 18px rgba(59,130,246,.32),inset 0 1px 0 rgba(255,255,255,.18);font-weight:700}
html body .hub-nav .viewtab.on i{color:#fff}
html body .hub-nav .viewtab.task-priority:not(.on){background:transparent;color:rgba(226,232,240,.8)}
html body .hub-nav .viewtab.task-priority:not(.on):hover{background:rgba(255,255,255,.09);color:#fff}
html body .hub-nav .viewtab .nav-task-count{position:static;margin-left:auto;border:0;box-shadow:none}
html body main{margin-left:232px;padding:22px 28px 48px;max-width:none}
html[data-theme="light"] #workspace-context-bar,html[data-theme="light"] #freightview .freight-panel,html[data-theme="light"] #freightview .freight-side{border-color:rgba(15,23,42,.08);box-shadow:var(--shadow)}

/* Collapsed desktop navigation keeps the same module structure and state. */
html[data-workhub-nav="collapsed"] body .topbar{width:calc(100% - 72px);margin-left:72px}
html[data-workhub-nav="collapsed"] body .topbar .hub-nav{width:72px;padding-inline:9px}
html[data-workhub-nav="collapsed"] body .hub-nav-brand{justify-content:center;margin-inline:0;padding-inline:0}
html[data-workhub-nav="collapsed"] body .hub-nav-brand-copy,html[data-workhub-nav="collapsed"] body .hub-nav .viewtab span{display:none}
html[data-workhub-nav="collapsed"] body .hub-nav .viewtab{justify-content:center;min-height:47px;padding:8px 3px}
html[data-workhub-nav="collapsed"] body .hub-nav .viewtab i{width:auto}
html[data-workhub-nav="collapsed"] body .hub-nav .viewtab .nav-task-count{position:absolute;top:2px;right:2px}
html[data-workhub-nav="collapsed"] body main{margin-left:72px}
html[dir="rtl"] body .topbar,html[dir="rtl"][data-workhub-nav="collapsed"] body .topbar{margin-left:0;margin-right:232px}
html[dir="rtl"] body .topbar .hub-nav{left:auto;right:0}
html[dir="rtl"] body .topbar .tools{margin-left:0;margin-right:auto}
html[dir="rtl"] body main{margin-left:0;margin-right:232px}
html[dir="rtl"][data-workhub-nav="collapsed"] body .topbar,html[dir="rtl"][data-workhub-nav="collapsed"] body main{margin-left:0;margin-right:72px}
html[dir="rtl"] body .hub-nav .viewtab{text-align:right}

/* Freight workbench adopts the ERP page/header/card hierarchy, without moving actions. */
#freightview .freight-shell{gap:14px}
#freightview .freight-section-head{padding:0 2px;margin:4px 0 0;border:0;background:transparent}
#freightview .freight-section-head h2{font-size:24px;letter-spacing:-.025em}
#freightview .freight-section-head p{font-size:12px;color:var(--dim)}
#freightview .freight-side{top:76px;padding:13px 10px;border-radius:16px}
#freightview .freight-side-heading{padding-bottom:12px}
#freightview .freight-side .freight-module-tabs button{min-height:57px;margin:2px 0;border-radius:11px}
#freightview .freight-side .freight-module-tabs button.on{border-color:transparent;background:linear-gradient(92deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 5px 14px rgba(59,130,246,.22)}
#freightview .freight-side .freight-module-tabs button.on i{background:rgba(255,255,255,.22);color:#fff}
#freightview .freight-side .freight-module-tabs button.on small,#freightview .freight-side .freight-module-tabs button.on em{color:rgba(255,255,255,.85)}
#freightview .freight-ops-summary{gap:10px;overflow:visible;border:0;background:transparent}
#freightview .freight-ops-summary article{padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow)}
#freightview .freight-ops-summary article:last-child{border-right:1px solid var(--line)}
#freightview .freight-ops-summary span{font-size:12px}
#freightview .freight-ops-summary b{font-size:23px}
#freightview .freight-panel-head{background:var(--panel)}
#freightview .freight-columns{background:var(--surface0)}
#freightview .freight-row{min-height:76px}
#freightview .freight-row:hover,#freightview .freight-row.on{background:#eef4ff}
#freightview .freight-row b{font-size:13px}
#freightview .freight-row small,#freightview .freight-route,#freightview .freight-date,#freightview .freight-owner{font-size:12px}
#freightview .freight-commercial-hero,#freightview .freight-commercial-start{border-radius:16px;box-shadow:var(--shadow)}

/* Pixel heritage stays in small signposts; the working surfaces remain calm. */
#mailview .mail-section-head h2,#freightview .freight-section-head h2{display:flex;align-items:center;gap:15px}
#mailview .mail-section-head h2::before,#freightview .freight-section-head h2::before{content:"";flex:none;width:8px;height:8px;margin:0 9px 8px 1px;background:#2f6bff;box-shadow:10px 0 #56c8dc,0 10px #56c8dc,10px 10px #2f6bff;transform:rotate(-8deg)}
#mailview .business-sidebar{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,#e9f0ff));box-shadow:var(--shadow)}
#mailview .mail-shell{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
#mailview .filter-row{align-items:center;min-height:45px;padding:8px 15px;background:var(--panel)}
#mailview .bar{position:relative;top:auto;gap:7px;min-height:53px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface0)}
#mailview .bar .sel{order:0;min-width:72px;color:var(--dim);font-weight:650}
#mailview .bar .mail-select-current{order:1}
#mailview .bar .mail-bulk-action{order:2}
#mailview .bar .mail-cleanup-action{order:3;margin-inline-start:auto}
#mailview .bar:not(.has-selection) .mail-bulk-action{display:none}
#mailview .bar.has-selection .mail-cleanup-action{order:4}
#mailview .bar .mail-select-all{order:0;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:12px;cursor:pointer}
#mailview .bar .mail-select-all input{width:15px;height:15px;margin:0}
#mailview .mail-more-actions{position:relative}#mailview .mail-more-actions>summary{list-style:none;cursor:pointer;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:12px}#mailview .mail-more-actions>summary::-webkit-details-marker{display:none}
#mailview .mail-more-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:grid;gap:5px;min-width:200px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}#mailview .mail-more-menu>button{justify-content:flex-start;text-align:left}#mailview .mail-move-row{display:flex;gap:5px}#mailview .mail-move-row select{flex:1;min-width:0}
#mailview .mail-more-filters{border-bottom:1px solid var(--line);background:var(--panel)}#mailview .mail-more-filters>summary{padding:9px 15px;color:var(--dim);font-size:12px;cursor:pointer}#mailview .mail-more-filters[open]>summary{color:var(--acc2)}
.wh-rule-option{display:grid;gap:4px;margin:4px 0 0;padding:9px 11px;border:1px solid var(--line);border-radius:10px}.wh-rule-option legend{padding:0 4px;font-size:12px;font-weight:700}.wh-assignment-dialog .wh-rule-option label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;margin:0;font-size:12px;font-weight:500;text-align:left}.wh-assignment-dialog .wh-rule-option input{width:auto;margin:0}.wh-rules-heading{margin:12px 0 4px;font-size:13px}.wh-rules-suggestions li{grid-template-columns:minmax(0,1fr) auto auto}.wh-rules-suggestions select{max-width:150px}.wh-rule-option small{color:var(--dim);font-size:10px;line-height:1.5}
.wh-rules-dialog{width:min(720px,94vw)}.wh-rules-form{display:grid;grid-template-columns:120px minmax(0,1fr) 150px 130px auto;gap:6px;margin:8px 0}.wh-rules-list{display:grid;gap:6px;margin:6px 0 10px;padding:0;list-style:none;max-height:46vh;overflow:auto}.wh-rules-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface0)}.wh-rules-list li.off{opacity:.6}.wh-rules-list li.empty{display:block;color:var(--dim);font-size:12px}.wh-rules-list b,.wh-rules-list small{display:block}.wh-rules-list small{margin-top:3px;color:var(--dim);font-size:11px}
@media(max-width:720px){.wh-rules-form{grid-template-columns:1fr}}
#mailview .mail-shell #empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:250px;margin:0;padding:32px 20px;color:var(--dim);font-size:14px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 30%)}
#mailview .mail-shell #empty[hidden]{display:none}
#mailview .mail-shell #empty::before{content:"✉";display:grid;place-items:center;width:57px;height:57px;border:1px solid color-mix(in srgb,var(--acc) 24%,var(--line));border-radius:16px;background:var(--surface1);box-shadow:7px 7px 0 color-mix(in srgb,#56c8dc 18%,transparent),var(--shadow);color:var(--acc2);font-size:27px}
#mailview .hint{margin:10px 6px;color:var(--dim);font-size:11px}

@media(max-width:1100px){
  html body .topbar,html[data-workhub-nav="collapsed"] body .topbar{width:calc(100% - 72px);margin-left:72px}
  html body .topbar .hub-nav,html[data-workhub-nav="collapsed"] body .topbar .hub-nav{width:72px;padding-inline:9px}
  html body .hub-nav-brand{justify-content:center;margin-inline:0;padding-inline:0}
  html body .hub-nav-brand-copy,html body .hub-nav .viewtab span{display:none}
  html body .hub-nav .viewtab{justify-content:center;min-height:47px;padding:8px 3px}
  html body .hub-nav .viewtab i{width:auto}
  html body .hub-nav .viewtab .nav-task-count{position:absolute;top:2px;right:2px}
  html body main,html[data-workhub-nav="collapsed"] body main{margin-left:72px;padding:15px}
  html body .topbar .tools #q{width:140px}
  .shell-nav-toggle{display:none}
  html[dir="rtl"] body .topbar,html[dir="rtl"][data-workhub-nav="collapsed"] body .topbar,
  html[dir="rtl"] body main,html[dir="rtl"][data-workhub-nav="collapsed"] body main{margin-left:0;margin-right:72px}
}
@media(max-width:680px){
  html body .topbar,html[data-workhub-nav="collapsed"] body .topbar{height:58px;min-height:58px;padding:0 10px;gap:6px}
  .topbar .brandline h1{display:none}
  html body .topbar .tools{gap:4px}
  html body .topbar .tools #q{width:95px;min-width:50px}
  html body main,html[data-workhub-nav="collapsed"] body main{padding:10px 9px 34px}
  #freightview .freight-ops-summary article{border-radius:12px}
}