/* One shared shell for portal-active and portal-invoices. No invoice-pane selectors. */
@supports(scrollbar-gutter:stable){
  html:has(>body:is(.portal-active,.portal-invoices)){scrollbar-gutter:stable}
}
body:is(.portal-active,.portal-invoices) #portal-shell{
  min-width:0;max-width:100%;font:400 14px/21px "Segoe UI",system-ui,sans-serif;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-top{
  position:static;inset:auto;display:flex;flex-wrap:wrap;align-items:center;
  box-sizing:border-box;width:100%;min-width:0;min-height:76px;height:auto;
  padding:15px clamp(16px,2vw,40px);gap:16px;
  background:#fff;border:0;font:400 14px/21px "Segoe UI",system-ui,sans-serif;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-top>.p-brand{
  display:flex;align-items:center;gap:13px;flex:0 0 207px;
  box-sizing:border-box;width:207px;min-width:207px;max-width:207px;
  height:32px;margin:0;padding:0 24px 0 0;border:0;border-right:1px solid #dfe7ef;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-brand>strong{
  display:block;flex:none;margin:0;padding:0;
  font:800 27px/31px "Segoe UI",system-ui,sans-serif;letter-spacing:-1.2px;color:#0a2547;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-brand>small{
  display:block;flex:none;box-sizing:border-box;width:78px;min-width:78px;max-width:78px;
  margin:0;padding:0;font:400 10px/15px "Segoe UI",system-ui,sans-serif;
  letter-spacing:.8px;color:#627487;white-space:normal;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-top>[data-portal-heading]{
  flex:1 1 100px;min-width:0;margin:0;padding:0;
  font:600 15px/22.5px "Segoe UI",system-ui,sans-serif;color:#627487;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-top>button,
body:is(.portal-active,.portal-invoices) #portal-shell .p-who>button:not(.p-avatar){
  box-sizing:border-box;min-height:36px;padding:8px 12px;
  font:600 12px/18px "Segoe UI",system-ui,sans-serif;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-who{
  display:flex;align-items:center;gap:13px;padding:0 0 0 18px;border:0;border-left:1px solid #dfe7ef;flex:none;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-who>div>strong{
  display:block;max-width:210px;font:600 13px/19.5px "Segoe UI",system-ui,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-who>div>small{
  display:block;margin-top:4px;font:400 11px/16.5px "Segoe UI",system-ui,sans-serif;color:#627487;
}
body:is(.portal-active,.portal-invoices) #portal-shell .p-top .p-avatar{
  display:grid;place-items:center;box-sizing:border-box;flex:none;width:38px;min-width:38px;
  height:38px;min-height:38px;padding:0;border-radius:50%;font:600 12px/18px "Segoe UI",system-ui,sans-serif;
}
@media(max-width:1000px){
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top>.p-context{order:10;flex-basis:100%;min-width:0}
}
@media(max-width:750px){
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top{padding:14px 16px;gap:12px}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top>.p-brand{flex:1 1 207px;min-width:207px;max-width:none;border:0;padding:0}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top>[data-portal-heading],
  body:is(.portal-active,.portal-invoices) #portal-shell .p-who>div{display:none}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-who{border:0;padding:0;gap:8px}
}
@media(max-width:450px){
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top>.p-brand{flex:1 1 160px;min-width:160px;gap:10px}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-brand>strong{font-size:24px;line-height:28px}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-brand>small{font-size:8px;line-height:12px;letter-spacing:.6px;width:64px;min-width:64px;max-width:64px}
  body:is(.portal-active,.portal-invoices) #portal-shell .p-top>.p-back{display:none}
}