/* Office alone extends the served header; original nodes and V2 stay intact. */
.shell-top[data-office-bar] { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; height:60px; padding-inline:max(var(--office-gutter), calc((100vw - var(--col-wide)) / 2)); font-family:var(--font); color:var(--ink); background:var(--paper); border-bottom:1px solid var(--hairline); }
.shell-top[data-office-bar] .shell-menu,.shell-top[data-office-bar] .shell-wordmark { display:none; }
.shell-top[data-office-bar] .shell-left { gap:2px; min-width:0; }
.shell-top[data-office-bar] .shell-actions { justify-content:flex-end; gap:8px; margin-left:0; }
.office-bar__back,.office-bar__menu,.office-bar__needs { position:relative; isolation:isolate; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; border-radius:var(--pill); font:inherit; }
.office-bar__back[hidden],.office-bar__needs[hidden] { display:none; }
.office-bar__back { flex:none; margin-left:-44px; }
.office-bar__back-stroke { width:7px; height:7px; border-left:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); }
.office-bar__menu { min-width:0; justify-content:flex-start; gap:10px; padding-inline:4px 10px; }
.office-bar__mark { display:block; position:relative; flex:none; width:22px; height:22px; border-radius:var(--pill); background:var(--ink); }
.office-bar__mark::after { content:""; position:absolute; width:8px; height:8px; inset:7px; border-radius:var(--pill); background:var(--paper); }
.office-bar__brand { flex:none; white-space:nowrap; font-size:15px; font-weight:600; line-height:1.2; }
.office-bar__chevron { width:5px; height:5px; flex:none; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:rotate(45deg); margin-left:2px; margin-top:-3px; }
.office-bar__menu[aria-expanded="true"] .office-bar__chevron { transform:rotate(225deg); margin-top:3px; }
.office-bar__needs { flex:none; gap:8px; padding-inline:12px; font-size:13px; white-space:nowrap; }
.office-bar__needs::before { content:""; width:6px; height:6px; flex:none; border-radius:var(--pill); background:rgb(var(--rm)); }
.office-bar__needs::after { content:""; position:absolute; z-index:-1; inset:6px 0; border-radius:var(--pill); background:var(--calm); }
/* The board's crumb is one line in two tones: the department faint, the page
   or person in ink (Main.dc.html's `.crumb`/`.crumb b`). bar-13: the company
   name is NOT part of it — it is a button in the mega menu's footer. */
.office-bar__crumb { min-width:0; margin:0; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:14px; font-weight:500; }
.office-bar__section { color:var(--faint); }
/* sales-person-31: the crumb's third level. The half that is a WAY BACK reads
   in the same faint tone as the department word it replaces, and is a link. */
.office-bar__parent { color:var(--faint); text-decoration:none; }
.office-bar__parent[hidden] { display:none; }
.office-bar__parent:hover { color:var(--ink); }
.office-bar__parent:focus-visible { outline:var(--focus); outline-offset:2px; }
/* bar-18: while an employee is working, a gradient sweeps the bar's own bottom
   edge (ChatMenu.dc.html:250). Two of the department hues and nothing else, so
   the strip belongs to the palette rather than adding a colour to it. */
.office-bar__shimmer { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, rgba(var(--tele),0) 0%, rgba(var(--tele),.9) 30%, rgba(var(--kb),.9) 50%, rgba(var(--soc),.9) 70%, rgba(var(--soc),0) 100%); background-size:50% 100%; background-repeat:no-repeat; animation:office-bar-sweep 2.2s ease-in-out infinite; }
@keyframes office-bar-sweep { from { background-position:-60% 0; } to { background-position:160% 0; } }
@media(prefers-reduced-motion:reduce){ .office-bar__shimmer { animation:none; background-size:100% 100%; } }
.office-bar__back:hover,.office-bar__menu:hover,.office-bar__needs:hover::after { background:var(--calm); }
.office-bar__back:focus-visible,.office-bar__menu:focus-visible,.office-bar__needs:focus-visible { outline:var(--focus); outline-offset:2px; }
.shell-top[data-office-bar] .shell-account { isolation:isolate; width:44px; height:44px; background:transparent; color:var(--ink); font-size:12px; font-weight:600; }
.shell-top[data-office-bar] .shell-account::before { inset:6px; z-index:-1; border:1px solid var(--hairline); border-radius:var(--pill); background:var(--calm); }
/* overlays-entry-06 — PopShapes 'Menu · the account'. The panel's first line is
   the PERSON, at the board's 600/15. header.js is variable-free by design and
   its suite pins the landing's weights closed, so the Office reading is written
   here, where the served names already are, and only under the Office bar. */
.shell-top[data-office-bar] .shell-account-name { color:var(--ink); font:600 15px/1.35 var(--font); }
/* The 'Workspace' sub-heading above the inline switcher, and the check on the
   one you are in. */
.shell-top[data-office-bar] .shell-account-group { margin:8px 0 2px; padding:0 12px; color:var(--faint); font:500 11.5px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; }
.shell-top[data-office-bar] .shell-account-tick { margin-left:auto; color:rgb(var(--kb)); }
@media(max-width:1199px){.shell-top[data-office-bar] { padding-inline:80px; }}
@media(max-width:700px){
 .shell-top[data-office-bar] { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; height:56px; padding-inline:20px; }
 .office-bar__crumb { font-size:12px; text-align:center; }
 .office-bar__section { display:none; }
 .office-bar__back { margin-left:-12px; width:28px; }
 .office-bar__menu { gap:8px; padding-inline:0; }
 .office-bar__brand { font-size:14px; }
 .office-bar__mark { width:20px; height:20px; }
 .office-bar__mark::after { inset:6px; }
 .shell-top[data-office-bar] .shell-actions { gap:0; }
 .office-bar__needs { padding-inline:8px; font-size:12px; gap:6px; }
}
@media(max-width:479px){
 .shell-top[data-office-bar] { grid-template-columns:minmax(0,1fr) auto; }
 .office-bar__crumb { display:none; }
}