/* The workspace dropdown's extra rows, its create dialog, and the small
confirmation that follows an action. Written to sit inside the shell's own
menu styling rather than replacing it, so the rows the shell already draws
keep looking the way they did. */
.workspace-menu .ws-ic {
width: 20px; height: 20px; flex: 0 0 auto;
display: grid; place-items: center; color: #2476f3;
}
.workspace-menu .ws-ic svg { width: 18px; height: 18px; }
/* A separator between the workspaces, the workspace actions, and the shortcuts
to the pages that manage each thing. */
.workspace-menu > i {
display: block; height: 1px; margin: 8px 10px;
background: #e6ecf5; border: 0;
}
.ws-modal {
position: fixed; inset: 0; z-index: 9000;
display: grid; place-items: center; padding: 22px;
}
.ws-backdrop {
position: absolute; inset: 0; border: 0; padding: 0;
background: rgba(11, 24, 59, 0.4); backdrop-filter: blur(3px);
}
.ws-dialog {
position: relative; width: min(440px, 100%);
background:var(--paper,#fff); border-radius: 18px; padding: 24px;
box-shadow: 0 30px 80px rgba(11, 24, 59, 0.24);
font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
color:var(--ink,#16223c);
}
.ws-dialog h2 { margin: 0 0 6px; font-size: 21px; }
.ws-dialog > p { margin: 0 0 18px; color: #64748b; }
.ws-dialog form { display: grid; gap: 13px; }
.ws-dialog label { display: grid; gap: 6px; font-weight: 650; font-size: 12.5px; }
.ws-dialog input, .ws-dialog select {
height: 42px; padding: 0 12px;
border: 1px solid #d9e2ef; border-radius: 10px;
background:var(--sd-sunk,#fbfcff); font: 650 13.5px inherit; color:var(--ink,#17233d); outline: 0;
}
.ws-dialog input:focus, .ws-dialog select:focus {
border-color: #3e84f4; box-shadow: 0 0 0 3px rgba(36, 118, 243, 0.13); background:var(--paper,#fff);
}
.ws-actions {
display: flex; justify-content: flex-end; gap: 9px;
margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf1f6;
}
.ws-btn {
height: 40px; padding: 0 15px; border: 1px solid #d9e2ef; border-radius: 10px;
background:var(--paper,#fff); color:var(--ink,#18243d); font: 750 13px inherit; cursor: pointer;
}
.ws-btn:hover { border-color: #94b7ed; }
.ws-btn.primary { background: #2476f3; border-color: #2476f3; color: #fff; }
.ws-toast {
position: fixed; right: 24px; bottom: 24px; z-index: 9500;
background: #15213a; color: #fff; border-radius: 12px;
padding: 12px 16px; font: 750 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
box-shadow: 0 15px 40px rgba(16, 33, 61, 0.24);
}
html[data-theme="dark"] {
.ws-dialog { background: #131c2e; color: #e8edf7; }
.ws-dialog > p { color: #9aa8c0; }
.ws-dialog input, .ws-dialog select { background: #0f1726; border-color: #26314a; color: #e8edf7; }
.ws-btn { background: #131c2e; border-color: #26314a; color: #e8edf7; }
.workspace-menu > i { background: #24304a; }
}
/* ---------------- the account menu at the foot of the sidebar ---------------- */
/* The shell's own Settings / Help / Sign out stay in the page because Sign
out carries its session-ending logic — they are just not shown. A React
re-render can drop the hide class, so every original button is hidden by
tag rather than by a class we have to keep re-applying. */
.dashboard-sidebar .sidebar-bottom > button:not(.ws-account-trigger) {
display: none !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.sidebar-bottom .ws-hidden-original { display: none !important; }
/* The shell paints this as #edf0f4, which on mint is almost the same
brightness as the panel. A step darker is still a hairline. */
.dashboard-sidebar .sidebar-bottom {
border-top-color: #c5d0de !important;
}
html[data-theme="dark"] .dashboard-sidebar .sidebar-bottom {
border-top-color: #3d4e68 !important;
}
.ws-account-trigger {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 10px; border: 1px solid transparent; border-radius: 12px;
background: transparent; cursor: pointer; text-align: left;
font: inherit; color:var(--ink,#16223c);
}
.ws-account-trigger:hover { background:var(--sd-sunk,#f2f6fc); border-color: #e2e9f4; }
.ws-account-trigger[aria-expanded="true"] { background: #eaf2ff; border-color: #cfe0fb; }
.ws-account-trigger .ws-avatar {
width: 32px; height: 32px; flex: 0 0 auto;
display: grid; place-items: center; border-radius: 10px;
background: linear-gradient(135deg, #4c93f7, #2476f3); color: #fff;
font-weight: 750; font-size: 14px;
}
.ws-account-trigger .ws-who { min-width: 0; flex: 1; }
.ws-account-trigger .ws-who b {
display: block; font-size: 13.5px; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-account-trigger .ws-who small {
display: block; font-size: 11.5px; color: #7b8aa3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-account-trigger .ws-caret { color: #8fa0ba; display: grid; place-items: center; }
.ws-account-trigger .ws-caret svg { width: 16px; height: 16px; }
.ws-account-trigger[aria-expanded="true"] .ws-caret { transform: rotate(180deg); }
/* Opens upwards: the trigger sits at the foot of the window, so a menu
dropping down would open off the bottom of the screen. */
.ws-account-menu {
position: fixed; z-index: 9200;
min-width: 320px; padding: 6px;
background:var(--paper,#fff); border: 1px solid #e2e9f4; border-radius: 14px;
box-shadow: 0 -12px 40px rgba(11, 24, 59, 0.16), 0 2px 8px rgba(11, 24, 59, 0.06);
font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}
.ws-account-head { padding: 10px 11px 9px; border-bottom: 1px solid #eef2f8; margin-bottom: 5px; }
.ws-account-head b { display: block; font-size: 13.5px; color:var(--ink,#16223c); }
.ws-account-head small { display: block; color: #7b8aa3; font-size: 11.5px; margin-top: 1px; }
.ws-account-label {
display: block;
padding: 8px 11px 4px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7b8aa3;
}
.ws-account-menu button {
display: block; width: 100%; text-align: left;
padding: 8px 11px; border: 0; border-radius: 9px;
background: transparent; cursor: pointer; font: inherit; color:var(--ink,#16223c);
}
.ws-account-menu button:hover, .ws-account-menu button:focus-visible {
background:var(--sd-sunk,#f2f6fc); outline: none;
}
.ws-account-menu button b { display: block; font-weight: 650; font-size: 13px; }
.ws-account-menu button small { display: block; color: #7b8aa3; font-size: 11.5px; margin-top: 1px; }
.ws-account-menu .ws-account-make small { white-space: normal; line-height: 1.4; }
.ws-account-menu > i { display: block; height: 1px; margin: 6px 8px; background:var(--sd-sunk,#eef2f8); }
/* Sign out reads as the one action with consequences: a light red at rest,
deepening on hover so the intent is unmistakable before the click. */
.ws-account-menu .ws-signout b { color: #d8566a; }
.ws-account-menu .ws-signout small { color: #c98b96; }
.ws-account-menu .ws-signout:hover,
.ws-account-menu .ws-signout:focus-visible {
background: #fdecef;
}
.ws-account-menu .ws-signout:hover b,
.ws-account-menu .ws-signout:focus-visible b { color: #b3253c; }
.ws-account-menu .ws-signout:hover small,
.ws-account-menu .ws-signout:focus-visible small { color: #b3253c; opacity: .78; }
html[data-theme="dark"] {
.ws-account-trigger { color: #e8edf7; }
.ws-account-trigger:hover { background: #1b2540; border-color: #26314a; }
.ws-account-menu { background: #131c2e; border-color: #26314a; }
.ws-account-head { border-bottom-color: #222c44; }
.ws-account-label { color: #8fa0ba; }
.ws-account-head b, .ws-account-menu button { color: #e8edf7; }
.ws-account-menu button:hover { background: #1b2540; }
.ws-account-menu > i { background: #222c44; }
.ws-account-menu .ws-signout b { color: #ff8a9c; }
.ws-account-menu .ws-signout:hover { background: #35202a; }
.ws-account-menu .ws-signout:hover b { color: #ffb3bf; }
}
/* ---------------- the header profile popover ---------------- */
/* The shell already styles this menu; these rules only cover the parts it did
not have — an icon on every row, and the sign-out treatment. */
.profile-popover button > i {
width: 34px; height: 34px; flex: 0 0 auto;
display: grid; place-items: center;
border-radius: 10px; background: #eef4ff; color: #2476f3;
}
.profile-popover button > i svg { width: 18px; height: 18px; }
.profile-popover button > em { margin-left: auto; color: #b6c2d6; display: grid; place-items: center; }
.profile-popover button > em svg { width: 16px; height: 16px; }
/* Sign out is the one row with consequences: a light red at rest, deepening on
hover so the intent is clear before the click. */
.profile-popover .signout > i { background: #fdecef; color: #d8566a; }
.profile-popover .signout b { color: #d8566a; }
.profile-popover .signout small { color: #c98b96; }
.profile-popover .signout:hover { background: #fdecef; }
.profile-popover .signout:hover > i { background: #f9d4da; color: #b3253c; }
.profile-popover .signout:hover b { color: #b3253c; }
.profile-popover .signout:hover small { color: #b3253c; opacity: .78; }
html[data-theme="dark"] {
.profile-popover button > i { background: #1b2540; color: #6ba4ff; }
.profile-popover .signout > i { background: #35202a; color: #ff8a9c; }
.profile-popover .signout b { color: #ff8a9c; }
.profile-popover .signout:hover { background: #35202a; }
.profile-popover .signout:hover b { color: #ffb3bf; }
}
/* ---------------- collapsible navigation groups ---------------- */
/* The heading becomes the control. A chevron drawn with a CSS mask rather than
an element injected into the page, because the shell re-renders this list on
every navigation and would throw an injected element away each time. */
.dashboard-sidebar nav .nav-group > small {
display: flex !important;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
border-radius: 8px;
padding: 5px 9px;
margin-bottom: 2px;
transition: background .14s ease, color .14s ease;
}
.dashboard-sidebar nav .nav-group > small:hover { background:var(--sd-sunk,#f1f5fb); }
.dashboard-sidebar nav .nav-group > small:focus-visible {
outline: 2px solid #2476f3; outline-offset: 1px;
}
.dashboard-sidebar nav .nav-group > small::after {
content: "";
margin-left: auto;
width: 13px; height: 13px;
flex: 0 0 auto;
background: currentColor;
opacity: .5;
transform: rotate(-90deg);
transition: transform .2s cubic-bezier(.4, 0, .2, 1);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group.is-open > small::after { transform: rotate(0deg); }
.dashboard-sidebar nav .nav-group.is-closed > small::after { transform: rotate(-90deg); }
.dashboard-sidebar nav .nav-group > small:hover::after { opacity: .85; }
/* ── An icon for each section heading ──────────────────────────────────────
The headings are the seven top-level controls in this sidebar and were the
only things in it with no mark of their own: a column of sub-items each
carrying an icon, under headings carrying none.
Drawn as CSS masks on `::before`, exactly as the chevron beside them is, and
for the same reason — four of these headings are rendered by React, which
throws away anything injected into them on the next navigation. A mask is a
style, so it survives.
Matched on `aria-label`, which our own collapse control sets and which
therefore holds the section's name whether or not the label text is
translated or abbreviated later. `^=` because the label continues
"— expand section" / "— collapse section" depending on state. */
.dashboard-sidebar nav .nav-group > small::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 auto;
background: currentColor;
opacity: .62;
}
.dashboard-sidebar nav .nav-group > small:hover::before { opacity: .9; }
.dashboard-sidebar nav .nav-group > small[aria-label^="Workspace"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Create"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Audience"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Developer"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Delivery"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Messaging"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small[aria-label^="Organization"]::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.dashboard-sidebar nav .nav-group > small:not([aria-label])::before { display: none; }
/* The rows fold rather than vanish, so opening and closing reads as one
movement instead of the list jumping. */
.dashboard-sidebar nav .nav-group button {
overflow: hidden;
transition:
height .2s cubic-bezier(.4, 0, .2, 1),
opacity .14s ease,
margin .2s cubic-bezier(.4, 0, .2, 1),
padding .2s cubic-bezier(.4, 0, .2, 1);
}
.dashboard-sidebar nav .nav-group.is-closed button,
.dashboard-sidebar nav .nav-group:not(.is-open):not([data-senditto-foot]):not([data-senditto-guide]) button {
height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-width: 0 !important;
opacity: 0;
pointer-events: none;
}
.dashboard-shell.collapsed .dashboard-sidebar nav .nav-group.is-closed button,
.dashboard-shell.collapsed .dashboard-sidebar nav .nav-group:not(.is-open):not([data-senditto-foot]) button,
html.senditto-sidebar-pref-closed .dashboard-shell .dashboard-sidebar nav .nav-group.is-closed button,
html.senditto-sidebar-pref-closed .dashboard-shell .dashboard-sidebar nav .nav-group:not(.is-open):not([data-senditto-foot]) button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-width: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow: visible !important;
}
.dashboard-shell.collapsed .dashboard-sidebar nav .nav-group button svg,
html.senditto-sidebar-pref-closed .dashboard-shell .dashboard-sidebar nav .nav-group button svg {
display: block !important;
opacity: 1 !important;
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
/* Bundled collapse control is position:absolute; left:54px on the logo. */
@media (min-width: 901px) {
html.senditto-sidebar-pref-closed .dashboard-shell .sidebar-brand,
.dashboard-shell.collapsed .sidebar-brand {
position: relative !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
height: auto !important;
overflow: visible !important;
gap: 8px !important;
}
html.senditto-sidebar-pref-closed .dashboard-shell .sidebar-brand > button,
.dashboard-shell.collapsed .sidebar-brand > button {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: rotate(180deg) !important;
box-shadow: none !important;
width: 31px !important;
height: 31px !important;
flex: 0 0 31px !important;
margin: 0 !important;
}
}
.dashboard-sidebar nav [data-senditto-foot],
.dashboard-sidebar nav [data-senditto-foot].is-closed {
margin-top: auto;
margin-bottom: 0;
}
.dashboard-sidebar nav [data-senditto-foot] button,
.dashboard-sidebar nav [data-senditto-foot].is-closed button {
height: auto !important;
min-height: 52px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
opacity: 1 !important;
pointer-events: auto !important;
overflow: visible;
}
/* A closed group keeps a little air beneath it so the headings do not run
together into one block of capitals. */
.dashboard-sidebar nav .nav-group.is-closed,
.dashboard-sidebar nav .nav-group:not(.is-open):not([data-senditto-foot]):not([data-senditto-guide]) { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
.dashboard-sidebar nav .nav-group button,
.dashboard-sidebar nav .nav-group > small::after { transition: none; }
}
html[data-theme="dark"] {
.dashboard-sidebar nav .nav-group > small:hover { background: #1b2540; }
}
/* ------------------------------------------------------------------
Menus that fit the window.
The account menu had grown past the bottom of the screen, cutting Sign
out in half. The obvious fix — wrapping the rows in a scrolling box —
was wrong: every one of the shell's layout rules is written as
`.top-popover > button`, a direct child, so the wrapper made the rows
grandchildren and silently dropped all of their styling. The menu
scrolls as a whole instead, and Sign out sticks to the bottom edge of
it, which pins it without moving it in the tree.
------------------------------------------------------------------ */
.profile-popover {
max-height: min(calc(100vh - 84px), 78vh);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #c9d4e6 transparent;
}
.profile-popover::-webkit-scrollbar { width: 8px; }
.profile-popover::-webkit-scrollbar-thumb {
background: #c9d4e6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
.profile-popover > .profile-summary { position: sticky; top: -9px; z-index: 2; background:var(--paper,#fff); }
.profile-popover > .signout {
position: sticky;
bottom: -9px;
z-index: 2;
background:var(--paper,#fff);
box-shadow: 0 -6px 14px #ffffffe0;
}
/* The sidebar drop-up has the same ceiling. */
.ws-account-menu { max-height: min(calc(100vh - 96px), 78vh); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme="dark"] {
.profile-popover { scrollbar-color: #33415c transparent; }
.profile-popover::-webkit-scrollbar-thumb { background: #33415c; background-clip: content-box; }
.profile-popover > .profile-summary,
.profile-popover > .signout { background: #111a2e; }
.profile-popover > .signout { box-shadow: 0 -6px 14px #111a2ee0; }
}
/* ------------------------------------------------------------------
Bigger sidebar type.
The shell set the section headings at 9px and the rows at 12px, which
is small to read and small to hit — and the headings are controls you
click now, so they had earned a larger target as well as larger text.
The rows grow with them, and the icons in step, so the proportions of
the sidebar stay as they were rather than the text outgrowing them.
------------------------------------------------------------------ */
.dashboard-sidebar nav .nav-group > small {
font-size: 11.5px !important;
letter-spacing: 1.05px !important;
color: #2c3852 !important;
font-weight: 800 !important;
padding: 13px 10px !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
.dashboard-sidebar nav .nav-group > small:hover { color: #131c2f !important; }
.dashboard-sidebar nav .nav-group > small::after { width: 15px !important; height: 15px !important; }
.dashboard-sidebar nav .nav-group button,
.dashboard-sidebar .sidebar-bottom button,
.dashboard-sidebar .ws-account-trigger b,
.dashboard-sidebar .ws-account-trigger small {
font-size: 13.5px !important;
}
.dashboard-sidebar nav .nav-group button,
.dashboard-sidebar .sidebar-bottom button {
height: 43px !important;
gap: 12px !important;
}
.dashboard-sidebar nav .nav-group button svg,
.dashboard-sidebar .sidebar-bottom button svg {
width: 18.5px !important;
height: 18.5px !important;
}
.dashboard-sidebar .ws-account-trigger small { font-size: 11.5px !important; }
.dashboard-sidebar nav [data-senditto-foot] button {
height: auto !important;
min-height: 52px !important;
align-items: center !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.dashboard-sidebar nav [data-senditto-foot] .senditto-mail-label {
display: flex;
flex-direction: column;
min-width: 0;
text-align: left;
line-height: 1.25;
gap: 2px;
}
.dashboard-sidebar nav [data-senditto-foot] .senditto-mail-label b {
font-size: 13.5px !important;
font-weight: 600;
}
.dashboard-sidebar nav [data-senditto-foot] .senditto-mail-label .senditto-mail-hint {
font-size: 11.5px !important;
font-weight: 400;
color: var(--muted, #6a7590);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme="dark"] .dashboard-sidebar nav [data-senditto-foot] .senditto-mail-label .senditto-mail-hint {
color: #9aa8c2 !important;
}
html[data-theme="dark"] {
.dashboard-sidebar nav .nav-group > small { color: #ccd6e8 !important; }
.dashboard-sidebar nav .nav-group > small:hover { color: #f0f5ff !important; }
}
/* The section holding the page you are on, shown without being opened —
a closed sidebar should still say where you are. */
.dashboard-sidebar nav .nav-group.has-active > small { color: #1769ed !important; }
/* The section's own icon *is* the marker, shown at full strength and in the
active colour it already inherits. This used to be a small blue dot on the
same pseudo-element, which meant the heading you were actually on was the one
heading in the sidebar with no icon — the active section looked like the
unfinished one. */
.dashboard-sidebar nav .nav-group.has-active > small::before { opacity: 1; }
html[data-theme="dark"] {
.dashboard-sidebar nav .nav-group.has-active > small { color: #6ba4ff !important; }
.dashboard-sidebar nav .nav-group.has-active > small::before { opacity: 1; }
}
/* ── The workspace this button is actually for ─────────────────────────────
The shell hardcodes "My workspace / Developer workspace" into this button.
The real name arrives as a custom property set by `nameTheWorkspace()`, and
is drawn here rather than written into the button's text: React owns those
nodes, and replacing their contents is what once hung the whole application.
The original text is collapsed rather than hidden, so it keeps its place in
the layout and the swap causes no reflow. Only ever applied once the property
is there — a `content: var(--x)` with nothing behind it renders nothing, and
an empty workspace name is worse than a wrong one. */
.workspace-switch[data-sd-ws] > span { font-size: 0 !important; }
.workspace-switch[data-sd-ws] > span::before {
content: var(--sd-ws-initial, "W");
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.workspace-switch[data-sd-ws] > div > b { font-size: 0 !important; }
.workspace-switch[data-sd-ws] > div > b::before {
content: var(--sd-ws-name, "Workspace");
display: block;
font-size: 14px;
font-weight: 650;
line-height: 1.25;
/* A long workspace name must not push the chevron off the button. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
}
.workspace-switch[data-sd-ws] > div > small { font-size: 0 !important; }
.workspace-switch[data-sd-ws] > div > small::before {
content: var(--sd-ws-type, "Workspace");
display: block;
font-size: 11.5px;
line-height: 1.3;
opacity: .72;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
}
/* The same two facts in the top-right chip, from the same source. Its role line
read "Owner" for every account, whoever they were. */
.dashboard-topbar .profile[data-sd-ws] b { font-size: 0 !important; }
.dashboard-topbar .profile[data-sd-ws] b::before {
content: var(--sd-ws-name, "Workspace");
display: block;
font-size: 13.5px;
font-weight: 650;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.dashboard-topbar .profile[data-sd-ws] small { font-size: 0 !important; }
.dashboard-topbar .profile[data-sd-ws] small::before {
content: var(--sd-ws-role, "Member");
display: block;
font-size: 11px;
line-height: 1.3;
opacity: .7;
}