/* UIUX-008: ecosystem utility and multi-workspace identity chrome. */
.ecosystem-utility {
    min-height: 42px;
    overflow: visible;
    border-bottom: 1px solid var(--rule, #dde2df);
    background: #fff;
    color: var(--ink, #202824);
    font-size: .75rem;
}

.ecosystem-utility__inner,
.ecosystem-utility__left,
.ecosystem-utility__connect,
.ecosystem-utility__mobile,
.ecosystem-utility__link,
.ecosystem-connect-link {
    display: flex;
    align-items: center;
}

.ecosystem-utility__inner { justify-content: space-between; gap: 1.25rem; min-height: 42px; }
.ecosystem-utility__left { flex: 0 0 auto; gap: .42rem; }
.ecosystem-utility__connect { min-width: 0; justify-content: flex-end; gap: clamp(.45rem, 1vw, .9rem); }
.ecosystem-utility__heading { color: #65706a; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.ecosystem-utility__link {
    min-height: 32px;
    gap: .35rem;
    padding: .25rem .35rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: inherit;
    text-decoration: none;
}
.ecosystem-utility__link:hover { background: #f3f3f3; color: #18211d; }
.ecosystem-utility__link:focus-visible,
.ecosystem-connect-link:focus-visible,
.ecosystem-utility__mobile a:focus-visible { outline: 3px solid var(--info, #216ca5); outline-offset: 2px; }
.ecosystem-utility__link .aanya-icon,
.ecosystem-utility__link svg { width: 15px; height: 15px; }
.ecosystem-utility__link[class*="social-"] .ecosystem-utility__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecosystem-utility__preview,
.ecosystem-utility__preview:hover {
    background: #c2410c;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.ecosystem-connect-link { gap: .35rem; color: #303a35; font-weight: 680; text-decoration: none; white-space: nowrap; }
.ecosystem-connect-link__icon,
.connect-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 50%;
    background: #52605a;
    color: #fff;
}
.ecosystem-connect-link__icon .aanya-icon,
.ecosystem-connect-link__icon svg,
.connect-icon .aanya-icon,
.connect-icon svg { width: 14px; height: 14px; }
.ecosystem-connect-link:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }

:where(.ecosystem-connect-link,.connect-landing,.connect-icon)[data-accent="coral"] .ecosystem-connect-link__icon,
.ecosystem-connect-link[data-accent="coral"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="coral"],
.connect-landing[data-accent="coral"] { --connect-accent: #c94745; }
.ecosystem-connect-link[data-accent="amber"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="amber"] { background: #986000; }
.ecosystem-connect-link[data-accent="green"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="green"] { background: #2e7835; }
.ecosystem-connect-link[data-accent="teal"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="teal"] { background: #007467; }
.ecosystem-connect-link[data-accent="violet"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="violet"] { background: #6848ad; }
.ecosystem-connect-link[data-accent="sky"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="sky"] { background: #146b9f; }
.ecosystem-connect-link[data-accent="indigo"] .ecosystem-connect-link__icon,
.connect-icon[data-accent="indigo"] { background: #4f5aa8; }
.ecosystem-connect-link[data-accent="coral"] .ecosystem-connect-link__icon { background: #c94745; }
.connect-pathway-card[data-accent="coral"] .connect-icon { background: #c94745; }
.connect-pathway-card[data-accent="amber"] .connect-icon { background: #986000; }
.connect-pathway-card[data-accent="green"] .connect-icon { background: #2e7835; }
.connect-pathway-card[data-accent="teal"] .connect-icon { background: #007467; }
.connect-pathway-card[data-accent="violet"] .connect-icon { background: #6848ad; }
.connect-pathway-card[data-accent="sky"] .connect-icon { background: #146b9f; }
.connect-pathway-card[data-accent="indigo"] .connect-icon { background: #4f5aa8; }

.ecosystem-utility__mobile { display: none; }

/* ---------------------------------------------------------------------
 * UIUX-008 header account and context switcher, made neutral by UIUX-009.
 * Charcoal current state (ink text, a quiet neutral surface and a thin
 * charcoal indicator), no green. The Brand portal's in-page organization
 * list reuses the block name, so everything beyond `position` is scoped to
 * the header instance ([data-workspace-switcher]).
 * ------------------------------------------------------------------- */
.workspace-context-switcher { position: relative; }
.workspace-context-switcher[data-workspace-switcher] { --color-focus: #1f2328; }
.workspace-context-switcher[data-workspace-switcher] > summary { list-style: none; cursor: pointer; }
.workspace-context-switcher[data-workspace-switcher] > summary::-webkit-details-marker { display: none; }
.workspace-context-switcher[data-workspace-switcher][open] > summary { border-color: rgb(31 35 40 / 42%); background: #f2f2f2; }
.workspace-context-switcher__menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + .5rem);
    right: 0;
    width: min(21.5rem, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--u8r-rule, #d9deda);
    border-radius: 12px;
    background: #fff;
    color: var(--u8r-ink, #181a19);
    box-shadow: 0 16px 36px rgb(24 26 25 / 14%);
}
.workspace-context-switcher__identity { display: grid; gap: .1rem; padding: .5rem .625rem .625rem; border-bottom: 1px solid var(--u8r-rule, #d9deda); }
.workspace-context-switcher__identity strong { font-size: .9375rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.workspace-context-switcher__identity span { color: var(--u8r-muted, #59615c); font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.workspace-context-switcher__group { margin: .625rem 0 .25rem; padding: 0 .625rem; color: var(--u8r-muted, #59615c); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.workspace-context-switcher[data-workspace-switcher] .workspace-context-switcher__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.workspace-context-switcher__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .625rem; min-height: 48px; padding: .375rem .5rem; border-radius: 8px; color: var(--u8r-ink, #181a19); text-decoration: none; }
.workspace-context-switcher__item:hover { background: #f4f4f4; color: var(--u8r-ink, #181a19); }
.workspace-context-switcher__text { display: grid; min-width: 0; }
.workspace-context-switcher__text strong { overflow: hidden; font-size: .875rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context-switcher__item small { display: block; overflow: hidden; color: var(--u8r-muted, #59615c); font-size: .75rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context-switcher__item[aria-current="page"] { background: #f0f0f0; box-shadow: inset 2px 0 0 var(--u8r-charcoal, #202321); }
.workspace-context-switcher__item[aria-current="page"] .workspace-context-switcher__icon { background: var(--u8r-charcoal, #202321); color: #fff; }
.workspace-context-switcher__current { color: var(--u8r-muted, #59615c); font-size: .6875rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.workspace-context-switcher__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #f0f0f0; color: var(--u8r-charcoal, #202321); }
.workspace-context-switcher__icon svg { width: 15px; height: 15px; }
.workspace-context-switcher__explore { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; margin-top: .375rem; padding: .375rem .625rem; border-top: 1px solid var(--u8r-rule, #d9deda); color: var(--u8r-ink, #181a19); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.workspace-context-switcher__explore:hover { text-decoration: underline; text-underline-offset: 3px; }
.workspace-context-switcher__explore svg { width: 15px; height: 15px; flex: 0 0 auto; }
.workspace-context-switcher__footer { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; padding-top: .5rem; border-top: 1px solid var(--u8r-rule, #d9deda); }
.workspace-context-switcher__footer form { display: grid; margin: 0; }
.workspace-context-switcher__footer a,
.workspace-context-switcher__footer button { display: grid; width: 100%; min-height: 40px; place-items: center; padding: .375rem .5rem; border: 1px solid var(--u8r-rule, #d9deda); border-radius: 7px; background: #fff; color: var(--u8r-ink, #181a19); font: inherit; font-size: .8125rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.workspace-context-switcher__footer a:hover,
.workspace-context-switcher__footer button:hover { border-color: var(--u8r-rule-strong, #b7bfb9); background: #f4f4f4; }
.workspace-context-switcher[data-workspace-switcher] :is(.workspace-context-switcher__item, .workspace-context-switcher__explore, .workspace-context-switcher__footer a, .workspace-context-switcher__footer button):focus-visible { outline: 2px solid #1f2328; outline-offset: 2px; }

@media (max-width: 1279px) {
    .ecosystem-utility__left .ecosystem-utility__preview { display: none; }
    .ecosystem-utility__inner { gap: .75rem; }
    .ecosystem-utility__connect { overflow-x: auto; padding-block: 4px; scrollbar-width: none; }
    .ecosystem-utility__connect::-webkit-scrollbar { display: none; }
    .ecosystem-utility__heading { flex: 0 0 auto; padding-right: .35rem; }
}

@media (max-width: 899px) {
    .ecosystem-utility__left,
    .ecosystem-utility__connect { display: none; }
    .ecosystem-utility__mobile { display: flex; width: 100%; justify-content: space-between; }
    .ecosystem-utility__mobile a { display: inline-flex; min-height: 42px; align-items: center; gap: .45rem; color: #25302b; font-weight: 720; text-decoration: none; }
    .ecosystem-utility__mobile svg { width: 16px; height: 16px; }
}

@media (max-width: 600px) {
    .workspace-context-switcher__menu { top: calc(100% + .55rem); right: 0; left: auto; width: min(21rem, calc(100vw - 2rem)); max-height: min(65dvh, 32rem); overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .information-bar__track { animation: none; }
}